/* ============================================================
   Sistema Operacional Maximeta — light variant
   Mantém a tipografia Outfit, acento magenta, mas inverte
   o palco: agora é papel, não palco escuro.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Surfaces — cinza neutro, claro */
  --bg:           #FFFFFF;          /* página */
  --bg-2:         #F3F4F6;          /* hover de chrome */
  --surface:      #F7F8FA;          /* topbar, cards, drawer (cinza bem clarinho) */
  --surface-2:    #EEF0F4;          /* sub-superfícies, cabeçalho de lista, hover de linha */
  --surface-3:    #E4E7ED;          /* chips, inputs */

  /* Sidebar — variante roxa */
  --sb-bg:        #4D0F75;
  --sb-bg-2:      #5A1389;          /* hover */
  --sb-bg-3:      #3D0B5E;          /* depressão (workspace, footer) */
  --sb-fg:        #FFFFFF;
  --sb-fg-mute:   rgba(255, 255, 255, 0.78);
  --sb-fg-mute2:  rgba(255, 255, 255, 0.55);
  --sb-fg-mute3:  rgba(255, 255, 255, 0.35);
  --sb-line:      rgba(255, 255, 255, 0.10);
  --sb-line-2:    rgba(255, 255, 255, 0.18);

  /* Text */
  --text-1:       #0B0410;          /* aubergine usado como tinta */
  --text-2:       #4A3F55;
  --text-3:       #7A6F87;
  --text-4:       #ADA4B5;

  /* Borders */
  --border:       rgba(11, 4, 16, 0.07);
  --border-2:     rgba(11, 4, 16, 0.12);
  --border-3:     rgba(11, 4, 16, 0.18);

  /* Brand accent */
  --magenta:        #E40DDB;
  --magenta-hot:    #FF1AF0;
  --magenta-deep:   #B30AAB;
  --magenta-soft:   rgba(228, 13, 219, 0.10);
  --magenta-edge:   rgba(228, 13, 219, 0.22);
  --magenta-glow:   rgba(228, 13, 219, 0.18);

  --purple:         #7A14B8;
  --purple-bright:  #B12BFF;
  --purple-soft:    rgba(122, 20, 184, 0.08);

  /* Semantic — recalibrated for light */
  --success:        #0FA968;
  --success-soft:   rgba(15, 169, 104, 0.10);
  --success-edge:   rgba(15, 169, 104, 0.28);

  --warning:        #C67200;
  --warning-soft:   rgba(198, 114, 0, 0.10);
  --warning-edge:   rgba(198, 114, 0, 0.30);

  --danger:         #D72C5A;
  --danger-soft:    rgba(215, 44, 90, 0.10);
  --danger-edge:    rgba(215, 44, 90, 0.30);
  /* Vermelho mais escuro — usado em "Em risco" pra destacar acima de
     "Travados" (que fica no --danger padrão). */
  --danger-deep:      #991F40;
  --danger-deep-soft: rgba(153, 31, 64, 0.12);

  --info:           #5B6BFF;

  /* Type */
  --font-display: "Outfit", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Outfit", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 14px;
  --t-md:   15px;
  --t-lg:   17px;
  --t-xl:   20px;
  --t-2xl:  24px;
  --t-3xl:  32px;
  --t-4xl:  44px;

  /* Spacing — 4px base */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* Radii */
  --r-1: 4px;
  --r-2: 7px;
  --r-3: 10px;
  --r-4: 14px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(11, 4, 16, 0.04), 0 1px 1px rgba(11, 4, 16, 0.03);
  --shadow-2: 0 4px 14px rgba(11, 4, 16, 0.06), 0 1px 2px rgba(11, 4, 16, 0.04);
  --shadow-3: 0 18px 40px rgba(11, 4, 16, 0.10), 0 4px 12px rgba(11, 4, 16, 0.05);
  --shadow-glow-magenta: 0 0 0 1px var(--magenta-edge), 0 10px 30px var(--magenta-glow);

  /* Motion */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --d-1: 120ms; --d-2: 200ms; --d-3: 320ms;

  /* Layout */
  --sidebar-w:   272px;
  --sidebar-cw:  72px;          /* collapsed */
  --topbar-h:    64px;
}

* { box-sizing: border-box; }
html, body, #root {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }

::selection { background: var(--magenta); color: #fff; }

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(11, 4, 16, 0.10);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(11, 4, 16, 0.20); }

/* ── Layout shell ─────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--d-3) var(--ease);
}
.app.is-collapsed { grid-template-columns: var(--sidebar-cw) 1fr; }

/* ── Sidebar (roxa) ───────────────────────────────────────── */
.sidebar {
  background: var(--sb-bg);
  color: var(--sb-fg);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.sidebar__brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--sb-line);
}
.sidebar__logo-img {
  height: 36px;
  width: auto;
  max-width: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Linha do workspace: card "Ártemis" (flex 1) + botões + e ... à direita.
   Inspirado no header de workspace do Slack (+ azul ao lado do nome). */
.sidebar__workspace-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin: var(--s-4) var(--s-4) var(--s-3);
}
.sidebar__workspace-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.sidebar__workspace-actions button {
  width: 28px;
  flex: 1;
  display: grid;
  place-items: center;
  background: var(--sb-bg-3);
  border: 1px solid var(--sb-line);
  border-radius: var(--r-2);
  color: var(--sb-fg-mute2);
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
  padding: 0;
}
.sidebar__workspace-actions button:hover {
  background: rgba(0, 0, 0, 0.25);
  color: var(--sb-fg);
  border-color: var(--sb-fg-mute3);
}

.sidebar__workspace {
  flex: 1;
  min-width: 0;
  padding: var(--s-3);
  background: var(--sb-bg-3);
  border: 1px solid var(--sb-line);
  border-radius: var(--r-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  transition: background var(--d-2) var(--ease);
}
.sidebar__workspace:hover { background: rgba(0, 0, 0, 0.25); }
.sidebar__workspace .ws-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-2);
  background: linear-gradient(135deg, var(--purple-bright), var(--magenta));
  display: grid; place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.sidebar__workspace .ws-name {
  flex: 1; font-weight: 500; font-size: var(--t-md); color: var(--sb-fg);
  text-align: left;
}
.sidebar__workspace .ws-chev { color: var(--sb-fg-mute2); }
/* `.sidebar.is-not-admin` esconde o chevron pra deixar claro que o switcher de
   squad não é clicável (não-admin tem só 1 squad). Cursor vira default. No v2,
   a edição de PASTAS é liberada pra todos — então esta classe NÃO mexe mais
   em pastas/grips/ações; é estreita de propósito. */
.sidebar.is-not-admin .sidebar__workspace { cursor: default; }
.sidebar.is-not-admin .sidebar__workspace .ws-chev { display: none; }
.sidebar.is-not-admin .sidebar__workspace:hover { background: var(--sb-bg-3); }

/* Switcher dropdown (admin) — abre logo abaixo do `.sidebar__workspace`. */
.squad-switcher__menu {
  position: absolute;
  z-index: 50;
  margin-top: 6px;
  background: var(--sb-bg-2);
  border: 1px solid var(--sb-line);
  border-radius: var(--r-3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  min-width: 220px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.squad-switcher__menu[hidden] { display: none; }
.squad-switcher__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  cursor: pointer;
  color: var(--sb-fg);
  font-size: var(--t-sm);
  border: 0; background: transparent;
  text-align: left;
}
.squad-switcher__item:hover { background: var(--sb-bg-3); }
.squad-switcher__item.is-active { background: rgba(228, 13, 219, 0.18); color: #fff; }
.squad-switcher__item .ws-icon {
  width: 24px; height: 24px;
  border-radius: var(--r-1);
  background: linear-gradient(135deg, var(--purple-bright), var(--magenta));
  display: grid; place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.sidebar__nav {
  flex: 1;
  padding: 0 var(--s-3) var(--s-4);
  overflow-y: auto;
  /* Esconde o scrollbar horizontal — se algum item interno vazar a largura
     da sidebar (ex: texto longo do item ativo), nada deve aparecer fora.
     Sem isso, o webkit renderiza o scrollbar-thumb global como cápsula
     contornada de branco (border: 2px solid var(--bg)) dentro da sidebar. */
  overflow-x: hidden;
  min-width: 0;
}
/* Scrollbar customizado pra dentro da sidebar (fundo escuro roxo).
   O global usa border: 2px solid var(--bg) (#FFF) — adequado pra fundo claro
   da página. Aqui invertemos pra que o "cantinho" do scrollbar combine com
   o roxo da sidebar (sb-bg) e o thumb seja branco semi-transparente. */
.sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid var(--sb-bg);
}
.sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.30);
}

.nav-group { margin-bottom: var(--s-2); }
.nav-group__head {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  gap: var(--s-3);
  border-radius: var(--r-2);
  color: var(--sb-fg);
  font-weight: 500;
  font-size: var(--t-base);
  transition: background var(--d-2) var(--ease);
}
.nav-group__head:hover { background: var(--sb-bg-2); }
.nav-group__head .ico { color: var(--sb-fg); display: grid; place-items: center; }
.nav-group__head .chev {
  margin-left: auto;
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  color: var(--sb-fg-mute2);
  transition: transform var(--d-3) var(--ease), background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
/* Fundo no hover da seta — deixa claro que ela é o alvo de colapsar
   (mesma pegada do hover dos quadros). */
.nav-group__head .chev:hover { background: var(--sb-bg-3); color: var(--sb-fg); }
.nav-group.is-open .nav-group__head .chev { transform: rotate(90deg); }

.nav-list {
  padding: var(--s-1) 0 var(--s-2);
  display: grid;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  /* padding-right maior pra não encostar a última action na curva do pill */
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-7);
  border-radius: var(--r-pill);
  color: var(--sb-fg-mute);
  font-size: var(--t-base);
  cursor: pointer;
  position: relative;
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.nav-item:hover { background: var(--sb-bg-2); color: var(--sb-fg); }
.nav-item .ico { width: 18px; height: 18px; display: grid; place-items: center; color: var(--sb-fg-mute2); }
.nav-item:hover .ico { color: var(--sb-fg); }
.nav-item.is-active {
  background: #FFFFFF;
  color: var(--sb-bg);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.nav-item.is-active .ico { color: var(--sb-bg); }

/* ── Max Tools — seção global fixa (conteúdo Maximeta, não editável
   por squad). Card BRANCO sólido pra destacar na sidebar escura. ─── */
.sidebar__global {
  background: #FFFFFF;
  /* bottom um pouco maior: respiro entre o card e o footer (Configurações) */
  margin: var(--s-3) var(--s-3) var(--s-5);
  border-radius: var(--r-3);
  padding: var(--s-3) var(--s-2) var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.sidebar__global-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
  padding: 2px var(--s-3) var(--s-2);
}
.sidebar__global-label [data-icon] {
  display: inline-flex; align-items: center; line-height: 0;
}
.sidebar__global-label svg { width: 13px; height: 13px; }
/* Item estático (link <a>) — reaproveita o visual do .nav-item, sem
   grip nem controles de edição. Cores escuras pro fundo branco. */
.nav-item--static { text-decoration: none; }
.sidebar__global .nav-item {
  padding-left: var(--s-4);
  color: var(--text-2);
}
.sidebar__global .nav-item .ico { color: var(--text-3); }
.sidebar__global .nav-item:hover { background: var(--surface-2); color: var(--text-1); }
.sidebar__global .nav-item:hover .ico { color: var(--text-1); }
.sidebar__global .nav-item.is-active {
  background: var(--magenta-soft);
  color: var(--magenta-deep);
  box-shadow: none;
  font-weight: 600;
}
.sidebar__global .nav-item.is-active .ico { color: var(--magenta-deep); }
/* Lápis de renomear (admin) no card branco — usa tokens do tema claro, não os
   da sidebar escura (senão vira um quadradinho escuro sobre o branco). */
.sidebar__global .btn-icon-mini { background: transparent; color: var(--text-3); }
.sidebar__global .btn-icon-mini:hover { background: var(--surface-2); color: var(--text-1); }

.sidebar__footer {
  border-top: 1px solid var(--sb-line);
  padding: var(--s-3) var(--s-4);
}
.sidebar__cfglink {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  color: var(--sb-fg-mute);
  cursor: pointer;
  font-size: var(--t-sm);
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.sidebar__cfglink:hover { background: var(--sb-bg-2); color: var(--sb-fg); }
.sidebar__footer .status {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  color: var(--sb-fg-mute3);
  font-size: var(--t-xs);
}
.sidebar__footer .status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(15, 169, 104, 0.25);
}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-6);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__collapse {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--text-3);
  border-radius: var(--r-2);
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.topbar__collapse:hover { background: var(--bg-2); color: var(--text-1); }

.search {
  flex: 1;
  max-width: 680px;
  position: relative;
}
.search input {
  width: 100%;
  height: 40px;
  padding: 0 var(--s-4) 0 44px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--t-base);
  outline: none;
  transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.search input::placeholder { color: var(--text-3); }
.search input:focus {
  background: var(--surface);
  border-color: var(--magenta-edge);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}
.search .ico {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
}
.search .kbd {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 6px;
}

.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  color: var(--text-2);
  position: relative;
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.icon-btn:hover { background: var(--bg-2); color: var(--text-1); }
.icon-btn .badge {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 2px var(--surface);
}

.user-chip {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 4px 12px 4px 4px;
  border-radius: var(--r-pill);
  transition: background var(--d-2) var(--ease);
}
.user-chip:hover { background: var(--bg-2); }
.user-chip .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-bright), var(--magenta));
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
.user-chip .name { font-size: var(--t-sm); font-weight: 500; line-height: 1.1; }
.user-chip .role {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}

/* ── Switcher de usuário (dropdown do chip, mock auth) ─────────────── */
.user-switcher { position: relative; }
.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.user-menu[hidden] { display: none; }
.user-menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  text-align: left;
  transition: background var(--d-2) var(--ease);
}
.user-menu__item:hover { background: var(--bg-2); }
.user-menu__item.is-active { background: var(--magenta-soft); }
.user-menu__item .avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-bright), var(--magenta));
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 500;
  flex-shrink: 0;
}
.user-menu__meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.user-menu__name {
  font-size: var(--t-sm); font-weight: 500; color: var(--text-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-menu__role {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 500;
}

/* ── Page header ──────────────────────────────────────────── */
.page {
  padding: var(--s-7) var(--s-8) var(--s-9);
  max-width: 1480px;
  margin: 0 auto;
}

.page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
.page__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-4xl);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-1);
  margin: 0;
}
.page__title span { color: var(--magenta); }
.page__crumbs {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-top: var(--s-3);
  letter-spacing: 0.02em;
}
.page__crumbs .slash { color: var(--text-4); margin: 0 6px; }
.page__crumbs .cur { color: var(--text-2); }

/* ── Stat strip ───────────────────────────────────────────── */
/* Stats compactos — uma linha horizontal de pills, em vez de 4 cards grandes.
   Reduz altura de ~120px pra ~48px, libera tela pra mais clientes visíveis. */
.stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  margin-bottom: var(--s-4);
}
.stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
}
.stat + .stat {
  border-left: 1px solid var(--border);
  padding-left: var(--s-4);
}
.stat__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--font-display);
}
.stat__label .dot { width: 8px; height: 8px; border-radius: 50%; }
.stat__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
  color: var(--text-1);
}

/* ── Stats da Carteira com barra empilhada ──────────────────
   Total à esquerda como número-âncora; risco/atenção/prontos viram uma
   barra horizontal proporcional + legenda à direita. */
.stats--chart { align-items: center; }
.stats--chart .stat--total { flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.stats--chart .stat--total + .stats-chart {
  border-left: 1px solid var(--border);
  padding-left: var(--s-4);
}
.stats-chart {
  flex: 1 1 auto;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.stats-bar {
  display: flex;
  width: 100%;
  height: 12px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-3);  /* trilho — coberto pelos segmentos */
}
.stats-bar__seg { height: 100%; }
.stats-bar__seg + .stats-bar__seg { border-left: 2px solid var(--surface); }
.stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
}
.stats-leg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--font-display);
}
.stats-leg .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.stats-leg strong {
  font-size: var(--t-sm);
  color: var(--text-1);
  letter-spacing: 0;
}
/* % de cada segmento — chip com fundo sólido na cor da tag (bg vem inline) */
.stats-leg__pct {
  color: #fff;
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0;
  padding: 1px 6px;
  border-radius: var(--r-pill);
  line-height: 1.6;
}

/* Contador "sites entregues" (concluídos) no canto sup. direito da Carteira */
.kpi-delivered {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-shrink: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--success-soft);
  border: 1px solid var(--success-edge);
  border-radius: var(--r-2);
}
.kpi-delivered__num {
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--success);
}
.kpi-delivered__label {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--success);
}

/* ── Toolbar ──────────────────────────────────────────────── */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.view-switch {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 3px;
  gap: 2px;
}
.view-switch button {
  display: flex; align-items: center; gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-3);
  border-radius: 7px;
  color: var(--text-2);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: all var(--d-2) var(--ease);
}
.view-switch button:hover { background: var(--bg-2); color: var(--text-1); }
.view-switch button.is-active {
  background: var(--text-1);
  color: #fff;
}

.field {
  position: relative;
  display: flex;
  align-items: center;
}
.field input, .field select {
  height: 36px;
  padding: 0 var(--s-3) 0 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  color: var(--text-1);
  outline: none;
  transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
  appearance: none;
  min-width: 180px;
}
.field input { padding-left: 36px; min-width: 240px; }
.field select { padding-right: 32px; cursor: pointer; }
.field input:focus, .field select:focus {
  border-color: var(--magenta-edge);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}
.field .ico {
  position: absolute;
  left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--text-3);
  pointer-events: none;
}
/* Força tamanho consistente do glyph — sem isso, ícones diferentes
   (search/users/sort) renderizam em escalas distintas e parecem desalinhados. */
.field .ico svg { width: 16px; height: 16px; display: block; }
.field .chev {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--text-3);
  pointer-events: none;
}
.field .chev svg { width: 14px; height: 14px; display: block; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  padding: 0 var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: all var(--d-2) var(--ease);
  white-space: nowrap;
}
/* Sem isso o <span data-icon> herda display:block + line-height da fonte
   do botão, jogando a SVG (16px) pro topo do span (20px+) — desalinhada
   do texto. inline-flex + line-height:0 alinha o SVG no eixo do flex. */
.btn [data-icon] { display: inline-flex; line-height: 0; }
.btn--ghost {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-1);
}
.btn--ghost:hover { background: var(--bg-2); border-color: var(--border-2); }
.btn--magenta {
  background: var(--magenta);
  color: #fff;
}
.btn--magenta:hover { background: var(--magenta-hot); box-shadow: 0 8px 24px var(--magenta-glow); }

.toolbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.toolbar__count {
  font-size: var(--t-sm);
  color: var(--text-3);
}
.toolbar__count strong { color: var(--text-1); font-weight: 600; }

/* ── List view ────────────────────────────────────────────── */
.list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.row {
  display: grid;
  grid-template-columns: 36px 1.6fr 1.5fr 1.2fr 1fr 140px 56px;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: background var(--d-2) var(--ease);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row.is-selected { background: var(--magenta-soft); }

.row::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background var(--d-2) var(--ease);
}
.row.risk-on::before  { background: var(--success); }
.row.risk-warn::before { background: var(--warning); }
.row.risk-bad::before { background: var(--danger); }

.row__avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-2);
  font-weight: 600;
  font-size: var(--t-base);
  letter-spacing: -0.01em;
}

.stage-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px var(--s-3) 6px 6px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  color: var(--text-1);
  font-weight: 500;
  max-width: fit-content;
  min-width: 0;
}
.stage-chip .num {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-2);
  font-weight: 500;
}
.stage-chip .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Na Carteira o chip mostra o nome descritivo do bloco — limita a largura
   pra nomes longos ellipsizarem (o nome completo fica no tooltip). */
.ct-col-block .stage-chip { max-width: 260px; }
.ct-col-block .stage-chip .name { max-width: 220px; }
.stage-chip.is-done {
  background: var(--success-soft);
  border-color: var(--success-edge);
  color: #096B43;
}
.stage-chip.is-done .num {
  background: var(--success);
  color: #fff;
  border-color: transparent;
}
.stage-chip.is-blocked {
  background: var(--danger-soft);
  border-color: var(--danger-edge);
  color: #8C1335;
}
.stage-chip.is-blocked .num {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
}

.resp { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.resp .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.resp .info { display: flex; flex-direction: column; min-width: 0; }
.resp .nm {
  font-size: var(--t-sm);
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.resp .sq { font-size: 11px; color: var(--text-3); }

.progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.progress__bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.progress__fill {
  height: 100%;
  background: var(--text-1);
  border-radius: 999px;
  transition: width var(--d-3) var(--ease);
}
.row.risk-warn .progress__fill { background: var(--warning); }
.row.risk-bad .progress__fill { background: var(--danger); }
.row.risk-on .progress__fill { background: var(--success); }

.deadline { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.deadline .date {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text-1);
  font-weight: 500;
}
.deadline .rest { font-size: var(--t-xs); color: var(--text-3); }
.row.risk-warn .deadline .rest { color: var(--warning); font-weight: 500; }
.row.risk-bad .deadline .rest { color: var(--danger); font-weight: 500; }
.row:hover .row__action { color: var(--text-1); background: var(--bg-2); }
.row.is-expanded { padding-bottom: var(--s-4); }

/* ── Kanban ───────────────────────────────────────────────── */
.kanban {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  padding-bottom: var(--s-4);
}

/* ── Drawer ───────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 4, 16, 0.30);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-3) var(--ease);
  z-index: 50;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  right: 0; top: 0;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-3);
  /* Estado fechado: hidden via visibility + opacity (sem animação por
     enquanto). Eliminamos o transition de transform porque tava travando
     o snapshot inicial em Chrome com translateX(100%). */
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--d-2) var(--ease);
  z-index: 51;
  display: flex;
  flex-direction: column;
}
.drawer.is-open,
.drawer-overlay.is-open .drawer {
  visibility: visible;
  opacity: 1;
}
.drawer__head {
  padding: var(--s-5);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.drawer__title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-5);
}
.drawer__hint {
  background: var(--magenta-soft);
  border: 1px dashed var(--magenta-edge);
  border-radius: var(--r-3);
  padding: var(--s-4);
  font-size: var(--t-sm);
  color: var(--magenta-deep);
}
.drawer__hint strong { color: var(--magenta); }
.drawer__sec { margin-top: var(--s-6); }
.drawer__sec h4 {
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 var(--s-3);
}
.drawer__sec p { margin: 0; color: var(--text-2); }
.stages-list { display: flex; flex-direction: column; gap: 2px; }
.stages-list .step {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  background: var(--surface-2);
  font-size: var(--t-sm);
}
.stages-list .step .ix {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--border-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-2);
  flex-shrink: 0;
}
.stages-list .step.is-done { color: var(--text-3); }
.stages-list .step.is-done .ix {
  background: var(--success);
  color: #fff;
  border-color: transparent;
}
.stages-list .step.is-current {
  background: var(--magenta-soft);
  color: var(--magenta-deep);
  font-weight: 500;
}
.stages-list .step.is-current .ix {
  background: var(--magenta);
  color: #fff;
  border-color: transparent;
}
.stages-list .step .nm { flex: 1; }
.stages-list .step .cnt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}

/* Icon-slot: ícone do tipo sempre visível; grip surge à esquerda no hover,
   com leve overlap, sem cobrir o ícone */
.icon-slot {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.icon-slot > .ico {
  display: grid;
  place-items: center;
}
.icon-slot > .grip {
  position: absolute;
  top: 50%;
  left: -16px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  opacity: 0;
  cursor: grab;
  color: var(--sb-fg);
  pointer-events: none;
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.icon-slot > .grip:active { cursor: grabbing; }
.nav-item:hover .icon-slot > .grip,
.nav-group__head:hover .icon-slot > .grip {
  opacity: 0.9;
  pointer-events: auto;
}
.icon-slot > .grip:hover { opacity: 1; }
.nav-item.is-active .icon-slot > .grip { color: var(--text-1); }

/* Nome da pasta / label do item — sem hover, ocupa o espaço natural do
   conteúdo (você vê o nome inteiro). Quando os botões aparecem no hover,
   o texto encolhe com ellipsis pra dar espaço a eles.
   `flex: 1 1 auto` + `min-width: 0` permite o shrink quando preciso. */
.nav-group__name,
.nav-item__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-item, .nav-group__head { min-width: 0; }

/* Botões inline de edit (lápis/lixeira/+) — ocupam 0 de largura no repouso
   e expandem com transição suave no hover. Assim o texto fica inteiro
   fora do hover, e só encurta quando o usuário foca o item. */
.nav-edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-width var(--d-2) var(--ease), opacity var(--d-2) var(--ease), margin-left var(--d-2) var(--ease);
  margin-left: 0;
}
.nav-item:hover .nav-edit-actions,
.nav-group__head:hover .nav-edit-actions {
  max-width: 120px; /* suficiente pra 3 botões de 24px + gaps */
  opacity: 1;
  pointer-events: auto;
  /* compensa o gap do flex pra não criar buraco grande entre name e botões */
  margin-left: calc(var(--s-3) * -1 + var(--s-2));
}

/* Sidebar v2: a edição de PASTAS é liberada pra todos (criar/renomear/excluir
   + arrastar). Por isso NÃO escondemos mais grips/ações/`+` por não-admin. O
   único controle restrito a admin é o lápis de RENOMEAR QUADRO, que o
   sidebar.js só injeta no DOM quando isAdmin (não precisa de CSS). */

/* Quadros soltos (top-level): lista sem cabeçalho de pasta, no topo da barra.
   Funciona como "inbox" de quadros novos ainda não organizados. */
.nav-loose { margin-bottom: var(--s-2); }
.nav-list--loose { padding-top: 2px; }
.btn-icon-mini {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-1);
  color: var(--sb-fg);
  background: var(--sb-bg-3);
  border: 0;
  cursor: pointer;
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.btn-icon-mini:hover {
  background: var(--sb-bg-2);
  color: var(--sb-fg);
}
.btn-icon-mini[data-action^="delete"]:hover {
  background: var(--danger);
  color: #fff;
}
.nav-item.is-active .btn-icon-mini {
  background: var(--bg-2);
  color: var(--text-2);
}
.nav-item.is-active .btn-icon-mini:hover {
  background: var(--surface-3);
  color: var(--text-1);
}
.nav-item.is-active .btn-icon-mini[data-action^="delete"]:hover {
  background: var(--danger);
  color: #fff;
}

/* Rename inline (contenteditable) */
.nav-group__name,
.nav-item__label {
  display: inline-block;
  min-width: 4ch;
  max-width: 100%;
}
.nav-group__name[contenteditable="true"],
.nav-item__label[contenteditable="true"] {
  background: var(--sb-bg-3);
  outline: 1px solid var(--magenta-edge);
  border-radius: 3px;
  padding: 0 4px;
  cursor: text;
  color: var(--sb-fg);
}
.nav-item.is-active .nav-item__label[contenteditable="true"] {
  background: var(--magenta-soft);
  outline-color: var(--magenta);
  color: var(--text-1);
}

/* Drag-and-drop feedback visual — usa box-shadow inset em vez de outline
   pra que o destaque respeite o border-radius do elemento e não vire uma
   cápsula fantasma se a classe ficar presa. */
.nav-group.is-dragging,
.nav-item.is-dragging { opacity: 0.4; }
.nav-group.is-drop-target > .nav-group__head {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.nav-item.is-drop-target {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.nav-list.is-drop-target {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-2);
  min-height: 8px;
}

/* ── Modal customizado de confirmação ──────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 4, 16, 0.5);
  display: grid;
  place-items: center;
  /* Acima de tudo (client-modal = 9999, lightbox = 99999): confirm/alert/prompt
     são sempre a camada mais ao topo, inclusive por cima do modal do cliente. */
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-2) var(--ease);
}
.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: var(--bg);
  border-radius: var(--r-4);
  padding: var(--s-6);
  width: min(440px, 92vw);
  box-shadow: var(--shadow-3);
  transform: scale(0.96);
  transition: transform var(--d-3) var(--ease);
}
.modal-overlay.is-open .modal { transform: scale(1); }
.modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
  color: var(--text-1);
}
.modal__msg {
  color: var(--text-2);
  font-size: var(--t-base);
  line-height: 1.5;
  margin: 0 0 var(--s-6);
  /* Preserva quebras de linha do `\n` em mensagens multi-linha
     (ex.: alert com lista de erros, detalhes de item) */
  white-space: pre-line;
}
/* Variante de uma ação só (alert) — botão OK ocupa centro */
.modal__actions--single { justify-content: center; }
.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
}
/* Input + erro do MaxModal.prompt(). Reusa o visual dos campos do
   onboarding mas em escala compacta (uma linha só). */
.modal__input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--text-1);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  outline: none;
  margin: 0 0 var(--s-3);
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.modal__input:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(228, 13, 219, 0.12);
}
.modal__error {
  display: none;
  color: var(--danger);
  font-size: var(--t-sm);
  margin: 0 0 var(--s-3);
}

.btn--danger {
  background: var(--danger);
  color: #fff;
}
.btn--danger:hover {
  background: #BA1F4A;
  box-shadow: 0 8px 24px rgba(215, 44, 90, 0.25);
}
.btn--success {
  background: var(--success);
  color: #fff;
}
.btn--success:hover {
  background: #0C8E57;
  box-shadow: 0 8px 24px rgba(15, 169, 104, 0.25);
}

/* ── Placeholder page ─────────────────────────────────────── */
.placeholder {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--s-10) var(--s-8);
  text-align: center;
  max-width: 720px;
  margin: var(--s-9) auto 0;
  box-shadow: var(--shadow-1);
}
.placeholder__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 12px;
  background: var(--magenta-soft);
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-pill);
  color: var(--magenta-deep);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--s-6);
}
.placeholder__badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--magenta);
}
.placeholder__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--t-3xl);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-4);
  color: var(--text-1);
}
.placeholder__lede {
  color: var(--text-2);
  font-size: var(--t-md);
  line-height: 1.6;
  max-width: 540px;
  margin: 0 auto var(--s-7);
}
.placeholder__lede code {
  font-family: var(--font-mono);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: var(--r-1);
  font-size: var(--t-sm);
  color: var(--magenta-deep);
}
.placeholder__actions { display: flex; justify-content: center; gap: var(--s-3); }
.mono { font-family: var(--font-mono); }

/* Avatar palette helper colors */
.av--a { background: linear-gradient(135deg, #7A14B8, #E40DDB); }
.av--b { background: linear-gradient(135deg, #4D0F75, #B12BFF); }
.av--c { background: linear-gradient(135deg, #B12BFF, #FF1AF0); }
.av--d { background: linear-gradient(135deg, #E40DDB, #FF6BFF); }
.av--e { background: linear-gradient(135deg, #2A0B3F, #7A14B8); }
.av--f { background: linear-gradient(135deg, #5B6BFF, #B12BFF); }

/* ─── Carteira de Clientes ──────────────────────────────────────────
 * Visão "account/diretor": cards de cliente agrupados por responsável.
 * Reusa .stage-chip, .progress, .row__avatar e .av--a..f do quadro.
 * ─────────────────────────────────────────────────────────────────── */

.carteira {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.carteira__empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-3);
  background: var(--surface);
  border-radius: var(--r-3);
}

.carteira__group {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
}

/* Header do grupo compacto — 1 linha horizontal, 36px de altura */
.carteira__group-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.carteira__group-head .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: .02em;
}

.carteira__group-meta {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}
.carteira__group-meta .nm {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
}
.carteira__group-meta .sq {
  font-size: 11px;
  color: var(--text-3);
}
.carteira__group-meta .sq::before {
  content: "·";
  color: var(--text-4);
  margin-right: 4px;
}

.carteira__group-stats {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Respiro entre o header do grupo e a tabela */
.carteira__group-head {
  padding-bottom: var(--s-4);
}


/* ─── Tabela densa (view=table) ──────────────────────────────────── */

.ct-group + .ct-group { margin-top: var(--s-4); }

/* ── Sub-seção colapsável "Concluídos" dentro de cada dev ──────────── */
.ct-done__head td { padding: 0; }
.ct-done__toggle {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-2) var(--s-4);
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2);
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.ct-done__toggle:hover { background: var(--surface-2); color: var(--text-1); }
.ct-done__toggle .chev {
  width: 14px; height: 14px; display: grid; place-items: center;
  transition: transform var(--d-2) var(--ease);
}
.ct-done__toggle .chev svg { width: 14px; height: 14px; }
.ct-done__count {
  background: var(--success-soft); color: var(--success);
  border-radius: var(--r-pill); padding: 0 7px; font-weight: 700; letter-spacing: 0;
}
.ct-done[data-collapsed="false"] .ct-done__toggle .chev { transform: rotate(90deg); }
.ct-done[data-collapsed="true"] .ct-row { display: none; }

.ct-table-wrap {
  overflow-x: auto;
}
.ct-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.ct-table thead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ct-table th {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}
/* Cabeçalho clicável (ordena os clientes do dev) — o botão herda o estilo
   do th e não adiciona padding próprio, pra alinhar com a coluna de baixo. */
.ct-table th .onb-th-link { padding: 0; cursor: pointer; }
.ct-table th .onb-th-link.is-active { color: var(--magenta); }
.ct-table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ct-row {
  cursor: pointer;
  transition: background-color .12s;
}
.ct-row:hover { background: var(--surface); }
.ct-row.risk-bad  { box-shadow: inset 3px 0 0 var(--danger);  }
.ct-row.risk-warn { box-shadow: inset 3px 0 0 var(--warning); }
.ct-row.risk-on   { box-shadow: inset 3px 0 0 var(--success); }
.ct-row td:first-child { padding-left: var(--s-4); }
.ct-row.is-focused {
  outline: 2px solid var(--magenta);
  outline-offset: -2px;
  background: var(--magenta-soft);
}

/* Cliente (avatar + nome + contato) */
.ct-client {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.ct-client .row__avatar { width: 32px; height: 32px; flex-shrink: 0; }
.ct-client__id .nm {
  font-weight: 600;
  color: var(--text-1);
  font-size: var(--t-sm);
  line-height: 1.2;
}
.ct-client__id .contact {
  font-size: 11px;
  color: var(--text-3);
}

/* Progresso */
.ct-progress {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 140px;
  font-family: var(--font-mono);
}
.ct-progress .pct {
  font-weight: 600;
  color: var(--text-1);
  min-width: 36px;
}
.ct-progress .frac {
  color: var(--text-3);
  font-size: 11px;
  min-width: 50px;
}
.ct-progress .progress__bar {
  width: 60px;
  height: 4px;
}

/* Prazo */
.ct-deadline { font-family: var(--font-mono); }
.ct-deadline .date {
  font-weight: 500;
  color: var(--text-1);
  font-size: var(--t-sm);
}
.ct-deadline .rest {
  color: var(--text-3);
  font-size: 11px;
}
.ct-deadline .rest.is-critical {
  color: var(--danger);
  font-weight: 600;
}

/* Próxima ação (com ellipsis pra não quebrar layout) */
.ct-next {
  font-size: var(--t-sm);
  color: var(--text-2);
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* View switch mini — pill style (lista | grade), inspirado no Google Drive */
.view-switch--mini {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  display: inline-flex;
  padding: 0;
  gap: 0;
  overflow: hidden;
  height: 36px;
}
.view-switch--mini button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--text-3);
  padding: 0 14px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
  transition: background .12s, color .12s;
  min-width: 44px;
  height: 100%;  /* preenche a altura toda — sem filete branco em cima/embaixo */
}
/* Cantos externos acompanham o pill pra o fundo ativo cobrir a curva inteira */
.view-switch--mini button:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.view-switch--mini button:last-child { border-right: 0; border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.view-switch--mini button [data-icon] svg,
.view-switch--mini button [data-icon] {
  display: inline-flex;
}
.view-switch--mini button:hover { color: var(--text-1); background: var(--surface-2); }
.view-switch--mini button.is-active {
  background: var(--magenta-soft);
  color: var(--magenta-deep);
}

/* Toolbar mais compacta na Carteira pra caber mais filtros */
.carteira-toolbar { gap: var(--s-2); }
.carteira-toolbar .field { min-width: 140px; }
.carteira-toolbar .field--search { min-width: 220px; flex: 1; }

/* ─── Pills (genérico, reusável fora da Carteira também) ─── */
.pill {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-2);
  white-space: nowrap;
  font-family: var(--font-display);
  letter-spacing: .01em;
}
.pill strong { font-weight: 600; color: var(--text-1); }

/* No header da Carteira, o número da pill (ex: "3 clientes") usa mono
   pra harmonizar com os contadores dos cards (ex: "70% 89/128"). */
.carteira__group .pill strong { font-family: var(--font-mono); }

.pill--bad  { background: var(--danger-soft);  color: var(--danger);  }
.pill--bad  strong { color: var(--danger);  }
/* "Em risco" — vermelho mais escuro que "Travados" (pill--bad). */
.pill--risk { background: var(--danger-deep-soft); color: var(--danger-deep); }
.pill--risk strong { color: var(--danger-deep); }
.pill--warn { background: var(--warning-soft); color: var(--warning); }
.pill--warn strong { color: var(--warning); }
.pill--on   { background: var(--success-soft); color: var(--success); }
.pill--on   strong { color: var(--success); }
.pill--done { background: var(--success-soft); color: var(--success); }
.pill--done strong { color: var(--success); }
.pill--muted { background: var(--surface-2); color: var(--text-3); }
.pill--muted strong { color: var(--text-2); }

/* ─── Modal full-screen de detalhe do cliente ───────────────────────
 * Aparece com [hidden] removido pelo JS (display:flex no body).
 * Layout: overlay escuro + shell centralizada com header, tabs e 2 paineis.
 * Aba Confecção tem layout dois-colunas (checklist + side); Briefing é uma coluna.
 * ─────────────────────────────────────────────────────────────────── */

.client-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cm-fade-in .15s ease-out;
}
.client-modal[hidden] { display: none; }

@keyframes cm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.client-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 4, 16, 0.45);
  backdrop-filter: blur(2px);
}

.client-modal__shell {
  position: relative;
  z-index: 1;
  width: calc(100vw - 64px);
  max-width: 1320px;
  height: calc(100vh - 48px);
  background: var(--bg);
  border-radius: var(--r-3);
  box-shadow: 0 24px 56px -16px rgba(11, 4, 16, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cm-pop-in .2s ease-out;
}

@keyframes cm-pop-in {
  from { transform: translateY(8px) scale(.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Header */
.client-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--magenta-soft), transparent);
}
.client-modal__head-left {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.client-modal__head-left .row__avatar {
  width: 48px; height: 48px;
  font-size: 16px;
  font-weight: 600;
}
.client-modal__head-text { min-width: 0; }
.client-modal__head-text h2 {
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  font-family: var(--font-display);
}
.client-modal__head-text .contact {
  font-size: var(--t-sm);
  color: var(--text-3);
}
.client-modal__head-right {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.client-modal__head-right .icon-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--border-2);
  background: var(--bg);
  border-radius: var(--r-2);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--text-2);
  transition: background .15s, color .15s;
}
.client-modal__head-right .icon-btn:hover {
  background: var(--surface-2);
  color: var(--text-1);
}

/* Botões pill do header do modal ("Área do Cliente" e "Dados do Parceiro") */
.client-modal__portal-btn,
.client-modal__partner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--border-2);
  color: var(--text-1);
  font-size: var(--t-sm);
  font-weight: 500;
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  white-space: nowrap;
}
.client-modal__portal-btn:hover,
.client-modal__partner-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-3);
}
.client-modal__portal-btn svg,
.client-modal__partner-btn svg { width: 16px; height: 16px; }
.client-modal__partner-btn[aria-expanded="true"] {
  background: var(--purple-soft);
  border-color: var(--purple);
  color: var(--purple);
}

/* Popover "Dados do Parceiro" (puxa os dados do onboarding) */
.cm-partner { position: relative; }
.cm-partner__pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  padding: var(--s-4);
}
.cm-partner__pop[hidden] { display: none; }
.cm-partner__head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: var(--s-2); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-2);
}
.cm-partner__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-base); color: var(--text-1); }
.cm-partner__hint { font-size: var(--t-xs); color: var(--text-3); }
.cm-partner__rows { display: flex; flex-direction: column; }
.cm-partner__row {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 8px 0; border-bottom: 1px solid var(--border-2);
}
.cm-partner__row:last-child { border-bottom: 0; }
.cm-partner__label {
  width: 88px; flex-shrink: 0;
  font-size: var(--t-xs); font-weight: 700; color: var(--text-3);
  text-transform: uppercase; letter-spacing: .03em;
}
.cm-partner__val { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--text-1); word-break: break-word; }
.cm-partner__val a { color: var(--purple); text-decoration: none; }
.cm-partner__val a:hover { text-decoration: underline; }
.cm-partner__copy {
  flex-shrink: 0; width: 26px; height: 26px; border: 0; background: transparent;
  color: var(--text-3); cursor: pointer; border-radius: var(--r-1); display: grid; place-items: center;
}
.cm-partner__copy:hover { background: var(--surface-2); color: var(--purple); }
.cm-partner__copy svg { width: 14px; height: 14px; }
.cm-partner__copy.is-done { color: var(--success); }

/* ─── Área do cliente (página pública /cliente/{slug}) ─────────── */
/* Estilo minimalista — tom Linear/Notion, sem gradients vibrantes nem
   emojis. Cliente vê informação essencial em hierarquia clara. */

.cp-body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar minimalista — listra magenta de acento + logo + label discreto */
.cp-topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.cp-topbar__accent {
  height: 2px;
  background: var(--magenta);
}
.cp-topbar__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 720px) {
  .cp-topbar__inner { padding: var(--s-4) var(--s-4); }
}
.cp-topbar__logo { height: 22px; width: auto; display: block; }
.cp-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.cp-topbar__brand-text {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 600;
  font-family: var(--font-display);
}

/* Nav principal com 2 abas (Acompanhamento + Preview) */
.cp-topnav {
  display: flex;
  gap: var(--s-2);
}
.cp-topnav__item {
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  font-family: var(--font-display);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  transition: color .12s, background .12s;
}
.cp-topnav__item:hover {
  color: var(--text-1);
  background: var(--surface);
}
.cp-topnav__item.is-active {
  color: var(--magenta-deep);
  background: var(--magenta-soft);
}

@media (max-width: 640px) {
  .cp-topbar__inner { flex-direction: column; gap: var(--s-3); align-items: flex-start; }
  .cp-topnav { flex-wrap: wrap; }
  .cp-topnav__item { font-size: 10px; padding: 6px var(--s-3); }
}

/* Página — full-width responsiva (até 1440px), com padding lateral generoso */
.cp-page {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: var(--s-8) var(--s-7) var(--s-8);
  flex: 1;
}
@media (max-width: 720px) {
  .cp-page { padding: var(--s-7) var(--s-4) var(--s-7); }
  .cp-body--preview .cp-page,
  .cp-body--materiais .cp-page { padding-top: var(--s-4); }
}
.cp-head,
.cp-row {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Row de acompanhamento: esquerda (head + stats + gráfico) / direita (marcos), 50/50 */
.cp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  /* stretch: a coluna esquerda acompanha a altura dos Marcos, pro gráfico poder
     crescer e a base do "Concluir Projeto" alinhar com o fim do grid de marcos. */
  align-items: stretch;
  margin-bottom: var(--s-7);
}
.cp-row > * { min-width: 0; }
.cp-row__left {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.cp-row__left .cp-head { margin-bottom: 0; }
.cp-row__left .cp-stats,
.cp-row__left .cp-burndown-wrap {
  max-width: none;
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.cp-row__left .cp-stats {
  /* auto-fit: 2 cards preenchem 2 colunas; 3 (com Fim do Suporte) preenchem 3,
     sem deixar célula vazia ao lado. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.cp-row .cp-milestones {
  max-width: none;
  margin: 0;
}
/* Gráfico de Evolução cresce pra preencher a coluna esquerda esticada (o JS
   redesenha na altura disponível, mantendo proporção). */
.cp-row__left .cp-burndown-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.cp-row__left .cp-burndown { flex: 1 1 auto; min-height: 0; }
.cp-row__left .cp-burndown svg { height: 100%; }

@media (max-width: 960px) {
  .cp-row { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* Header da página — nome do cliente como protagonista */
.cp-head {
  margin-bottom: var(--s-8);
}
.cp-head__title {
  font-size: var(--t-4xl);
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  line-height: 1.05;
}

/* Stats refinados: cards sutis com background levíssimo */
.cp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.cp-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-5) var(--s-5) var(--s-6);
  position: relative;
  overflow: hidden;
}
.cp-stat--accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--magenta);
}
.cp-stat__label {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--font-display);
  margin-bottom: var(--s-3);
}
.cp-stat__value {
  font-size: var(--t-3xl);
  font-weight: 500;
  color: var(--text-1);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: var(--s-2);
}
.cp-stat__value--mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.cp-stat__value .pct {
  font-size: var(--t-lg);
  color: var(--text-3);
  font-weight: 400;
  margin-left: 2px;
}
.cp-stat__sub {
  font-size: var(--t-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.cp-stat__sub.is-critical {
  color: var(--danger);
  font-weight: 600;
}

/* Burndown — compacto e sem moldura forte */
.cp-burndown-wrap {
  margin-bottom: var(--s-7);
}
.cp-burndown__label {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--font-display);
  margin-bottom: var(--s-4);
}
.cp-burndown svg { width: 100%; height: auto; display: block; }

/* ─── Aproveite a espera — 3 thumbnails de vídeo abaixo do gráfico ─── */
.cp-watch {
  margin-top: var(--s-2);
}
.cp-watch__head {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.cp-watch__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 700;
  font-family: var(--font-display);
  margin-bottom: var(--s-3);
}
.cp-watch__label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--magenta);
  display: inline-block;
}
.cp-watch__title {
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.1;
  font-family: var(--font-display);
}
.cp-watch__title-accent {
  color: var(--magenta);
  font-weight: 700;
  font-style: italic;
}
.cp-watch__grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1;                          /* preenche a altura da coluna (faixa) */
  justify-content: space-between;   /* espalha os 3 cards → último alinha no rodapé do calendário */
}
.cp-watch__card {
  display: grid;
  grid-template-columns: 220px 1fr;  /* thumbnail maior */
  gap: var(--s-5);
  align-items: center;
  cursor: pointer;
  position: relative;
}
.cp-watch__link { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
/* Linhas editáveis dos "Conteúdos exclusivos" (Configurações → Área do Cliente) */
.cfg-vidrow { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-2); align-items: center; margin-bottom: var(--s-2); }

/* Etapas do onboarding (Configurações → Onboarding) */
.cfg-onbrow { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-2); align-items: center; margin-bottom: var(--s-2); }
.cfg-onbrow__kind { font-size: var(--t-xs); color: var(--text-3); background: var(--bg-2); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }
.cfg-onbrow__kind.is-system { color: var(--magenta); background: color-mix(in srgb, var(--magenta) 12%, transparent); }
.cfg-onbrow__lock { display: inline-grid; place-items: center; width: 30px; color: var(--text-4); }
.cfg-onbrow__lock svg { width: 15px; height: 15px; }

/* Etapas do Projeto (editor do checklist) */
.cfg-callout { display: flex; gap: var(--s-2); align-items: flex-start; background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); color: var(--text-2); margin: 0 0 var(--s-5); }
.cfg-callout svg { width: 16px; height: 16px; color: var(--warning); flex-shrink: 0; margin-top: 2px; }
.cfg-checklist { display: flex; flex-direction: column; gap: var(--s-5); }
.cfg-etapa { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--s-5); }
.cfg-etapa__name { width: 100%; font-weight: 700; font-size: var(--t-md); border: 1px solid transparent; border-radius: var(--r-2); padding: 6px 8px; margin-bottom: var(--s-3); background: var(--bg-2); color: var(--text-1); }
.cfg-etapa__name:focus { border-color: var(--magenta); background: var(--surface); outline: none; }
.cfg-clcat { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); margin: var(--s-3) 0 6px; }
.cfg-clitems { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s-2); }
.cfg-clitem { display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center; }
.cfg-clmove { width: 28px; height: 32px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1; }
.cfg-clmove:hover { color: var(--magenta); border-color: var(--magenta); }
.cfg-addrow--sm { font-size: var(--t-xs); padding: 5px 10px; align-self: flex-start; }

/* Briefing de Marca (editor de textos, blocos colapsáveis) */
.cfg-brief { display: flex; flex-direction: column; gap: var(--s-3); }
.cfg-briefblock { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface); overflow: hidden; }
.cfg-briefblock__head { width: 100%; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--bg-2); border: 0; cursor: pointer; text-align: left; }
.cfg-briefblock__num { font-size: var(--t-xs); font-weight: 700; color: var(--magenta); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.cfg-briefblock__title { flex: 1; min-width: 0; font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-briefblock__count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); background: var(--surface); border-radius: var(--r-pill); padding: 2px 9px; }
.cfg-briefblock__head.is-open { background: color-mix(in srgb, var(--magenta) 8%, var(--bg-2)); }
.cfg-briefblock__body { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.cfg-briefhdr { display: flex; flex-direction: column; gap: 4px; padding-bottom: var(--s-3); border-bottom: 1px dashed var(--border); }
.cfg-briefq { display: flex; flex-direction: column; gap: 6px; padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-2); }
.cfg-briefq__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cfg-briefq__type { font-size: var(--t-xs); color: var(--text-3); background: var(--bg-2); border-radius: var(--r-pill); padding: 2px 9px; }
.cfg-briefq__req { font-size: var(--t-xs); color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cfg-briefq__req input { accent-color: var(--magenta); }
.cfg-briefq__title { font-weight: 600; }
.cfg-briefopts { display: flex; flex-direction: column; gap: 5px; padding-left: var(--s-4); border-left: 2px solid var(--border); }
.cfg-briefopt { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }

/* Prazo manual no modal do cliente (admin) */
.cm-side__edit { background: none; border: 0; cursor: pointer; color: var(--text-3); padding: 0 0 0 5px; line-height: 0; vertical-align: middle; }
.cm-side__edit:hover { color: var(--magenta); }
.cm-side__edit svg { width: 13px; height: 13px; }
.cm-deadline-edit { margin-top: var(--s-2); display: flex; flex-direction: column; gap: 6px; }
/* o atributo `hidden` (toggle por JS no lápis) precisa vencer o display:flex acima */
.cm-deadline-edit[hidden] { display: none; }
.cm-deadline-edit__input { width: 100%; padding: 6px 8px 6px 4px; border: 1px solid var(--border); border-radius: var(--r-2); font: inherit; color: var(--text-1); background: var(--surface); }
.cm-deadline-edit__row { display: flex; gap: 8px; align-items: center; }
.cm-deadline-edit__save { padding: 5px 14px; font-size: var(--t-xs); }
.cm-deadline-edit__cancel { background: none; border: 0; color: var(--text-3); font-size: var(--t-xs); cursor: pointer; }
.cm-deadline-edit__cancel:hover { color: var(--text-1); }
/* Datas do projeto — lista de datas editáveis inline (calls + onboarding) */
.cm-dates { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.cm-date__head { display: flex; align-items: center; gap: 6px; }
.cm-date__label { font-size: var(--t-sm); color: var(--text-2); flex: 1; min-width: 0; }
.cm-date__val { font-size: var(--t-sm); font-weight: 600; font-family: var(--font-mono); color: var(--text-1); }
.cm-date__edit { background: none; border: 0; cursor: pointer; color: var(--text-3); padding: 0 0 0 4px; line-height: 0; }
.cm-date__edit:hover { color: var(--magenta); }
.cm-date__edit svg { width: 12px; height: 12px; }
.cm-date__editor { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.cm-date__editor[hidden] { display: none; }  /* hidden vence o display:flex */
.cm-date__input { width: 100%; padding: 6px 8px 6px 4px; border: 1px solid var(--border); border-radius: var(--r-2); font: inherit; color: var(--text-1); background: var(--surface); }
.cm-date__row { display: flex; gap: 8px; align-items: center; }
.cm-date__save { padding: 5px 14px; font-size: var(--t-xs); }
.cm-date__cancel { background: none; border: 0; color: var(--text-3); font-size: var(--t-xs); cursor: pointer; }
.cm-date__cancel:hover { color: var(--text-1); }
.cp-watch__thumb {
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-2);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15), transparent 60%),
    linear-gradient(135deg, var(--sb-bg) 0%, var(--magenta-deep) 60%, var(--magenta) 130%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 2px 12px rgba(11, 4, 16, 0.08);
  transition: transform .15s, box-shadow .15s;
}
.cp-watch__card:hover .cp-watch__thumb {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 4, 16, 0.12);
}
.cp-watch__play {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--magenta-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  transition: transform .15s, background .15s;
}
.cp-watch__card:hover .cp-watch__play {
  transform: scale(1.08);
  background: #FFFFFF;
}
.cp-watch__play svg { width: 16px; height: 16px; }

/* Título tipográfico: caixa alta, palavras pretas em peso regular,
   palavra-chave magenta em peso forte pra criar contraste */
.cp-watch__name {
  font-size: clamp(17px, 2.2vw, 22px);
  font-weight: 500;
  color: var(--text-1);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.cp-watch__name-accent {
  color: var(--magenta);
  font-weight: 800;
}

@media (max-width: 640px) {
  .cp-watch__card { grid-template-columns: 120px 1fr; gap: var(--s-3); }
  .cp-watch__name { font-size: 16px; }
  .cp-watch__play { width: 34px; height: 34px; }
  .cp-watch__play svg { width: 14px; height: 14px; }
}

@media (max-width: 380px) {
  .cp-watch__card { grid-template-columns: 96px 1fr; }
}

/* ─── Marcos do projeto — cards ricos, timeline vertical com feedback ─── */
.cp-milestones { margin-top: 0; }
.cp-milestones__head {
  margin-bottom: var(--s-5);
}
.cp-milestones__label {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--font-display);
  margin-bottom: 4px;
}

/* ─── Preview do site piloto (gerado por IA a partir do briefing) ─── */
.cp-preview {
  margin-top: var(--s-8);
}
.cp-preview__head {
  margin-bottom: var(--s-3);
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.cp-preview__label {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--font-display);
}
.cp-preview__meta {
  font-size: var(--t-xs);
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.cp-preview__stale {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--magenta-soft);
  color: var(--magenta-deep);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Banner de estado da geração (loading / erro / aviso) */
.cp-preview__banner {
  margin-bottom: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.cp-preview__banner--loading {
  background: var(--magenta-soft);
  color: var(--magenta-deep);
}
.cp-preview__banner--error {
  background: #fdecec;
  color: #b42318;
  border: 1px solid #f7c8c8;
}
.cp-preview__banner--info {
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}
.cp-preview__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cp-preview-spin 0.8s linear infinite;
}
@keyframes cp-preview-spin {
  to { transform: rotate(360deg); }
}

/* Janela de browser simulada */
.cp-browser {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(11, 4, 16, 0.06);
}
.cp-browser__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.cp-browser__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.cp-browser__dot--r { background: #FF5F57; }
.cp-browser__dot--y { background: #FEBC2E; }
.cp-browser__dot--g { background: #28C840; }
.cp-browser__url {
  flex: 1;
  margin-left: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px var(--s-3);
  font-size: var(--t-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 360px;
  margin-right: auto;
}
.cp-browser__lock { color: var(--text-4); font-size: 10px; }

/* Mock do site dentro da janela */
.cp-mock {
  padding: 0;
  font-family: var(--font-display);
  background: var(--bg);
  overflow: hidden;        /* contém qualquer overflow horizontal de filhos */
  min-width: 0;
}
.cp-mock__page { min-width: 0; }
.cp-mock__page[hidden] { display: none; }
/* Elementos clicáveis dentro do mock ganham cursor pointer */
.cp-mock [data-go] { cursor: pointer; transition: opacity .12s; }
.cp-mock [data-go]:hover { opacity: .8; }

/* ═══ Tabs de navegação acima do browser ═══ */
.cp-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.cp-tabs__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-2);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  cursor: pointer;
  font-family: var(--font-display);
  transition: all .15s;
  text-align: center;
}
.cp-tabs__card:hover {
  border-color: var(--text-3);
  background: var(--surface);
}
.cp-tabs__card.is-on {
  border-color: var(--magenta);
  background: var(--magenta-soft);
  box-shadow: 0 0 0 2px var(--magenta-soft);
}
.cp-tabs__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  background: var(--surface-2);
}
.cp-tabs__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.cp-tabs__card.is-on .cp-tabs__icon {
  background: var(--magenta);
  color: #FFFFFF;
}
.cp-tabs__name {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.cp-tabs__card.is-on .cp-tabs__name {
  font-weight: 600;
  color: var(--magenta-deep);
}

/* Top bar promo */
.cp-mock__promo {
  background: #1A0A1F;
  color: #FFFFFF;
  font-size: 11px;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  padding: 6px var(--s-4);
  text-align: center;
}
.cp-mock__promo-sep { opacity: 0.4; }

/* Header com nav */
.cp-mock__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cp-mock__brand {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.cp-mock__menu {
  display: flex;
  gap: var(--s-5);
  align-items: center;
}
.cp-mock__menu span {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cp-mock__menu-sale {
  color: #C0392B !important;
  font-weight: 600 !important;
}
.cp-mock__actions {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-md);
  color: var(--text-2);
  align-items: center;
}
.cp-mock__icon-cart {
  position: relative;
  display: inline-flex;
}
.cp-mock__cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--magenta);
  color: #FFFFFF;
  font-size: 9px;
  font-weight: 700;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
}

/* Hero */
.cp-mock__hero {
  padding: var(--s-10) var(--s-6) var(--s-9);
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(228, 13, 219, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #FAF5F1 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.cp-mock__hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
.cp-mock__hero-title {
  font-size: var(--t-3xl);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--s-3);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.cp-mock__hero-sub {
  font-size: var(--t-sm);
  color: var(--text-3);
  margin: 0 0 var(--s-5);
}
.cp-mock__hero-ctas {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
}
.cp-mock__cta {
  display: inline-block;
  background: var(--text-1);
  color: var(--bg);
  padding: var(--s-3) var(--s-6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-1);
}
.cp-mock__cta--ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--text-1);
}
.cp-mock__cta--light {
  background: #FFFFFF;
  color: var(--text-1);
}

/* Sections genéricas */
.cp-mock__section {
  padding: var(--s-7) var(--s-5);
}
.cp-mock__section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-5);
}
.cp-mock__section-title {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
}
.cp-mock__section-link {
  font-size: var(--t-xs);
  color: var(--text-1);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Categorias (6 cards circulares estilo Farm) */
.cp-mock__cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-3);
}
.cp-mock__cat { text-align: center; }
.cp-mock__cat-img {
  aspect-ratio: 1;
  border-radius: 50%;
  margin-bottom: var(--s-2);
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.cp-mock__cat-img[data-cat="vestidos"]  { background: linear-gradient(135deg, #E8B8B5, #C18F8B); }
.cp-mock__cat-img[data-cat="blusas"]    { background: linear-gradient(135deg, #F1E5D1, #D4BA8E); }
.cp-mock__cat-img[data-cat="calcas"]    { background: linear-gradient(135deg, #5C6E5C, #3D4D3D); }
.cp-mock__cat-img[data-cat="calcados"]  { background: linear-gradient(135deg, #6B4F35, #3A2A1A); }
.cp-mock__cat-img[data-cat="acessorios"]{ background: linear-gradient(135deg, #C9B68F, #9B8865); }
.cp-mock__cat-img[data-cat="sale"]      { background: linear-gradient(135deg, #C0392B, #7D1F15); color: #fff; position: relative; }
.cp-mock__cat-img[data-cat="sale"]::after {
  content: "SALE";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
}
.cp-mock__cat-name {
  font-size: var(--t-xs);
  color: var(--text-1);
  font-weight: 500;
}

/* Grid de produtos */
.cp-mock__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.cp-mock__card { display: flex; flex-direction: column; }
.cp-mock__thumb {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-1);
  margin-bottom: var(--s-3);
  position: relative;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.cp-mock__thumb[data-prod="1"] { background: linear-gradient(135deg, #C28293 0%, #8B4D5C 100%); }
.cp-mock__thumb[data-prod="2"] { background: linear-gradient(160deg, #D9C8AC 0%, #8C7355 100%); }
.cp-mock__thumb[data-prod="3"] { background: linear-gradient(135deg, #F0DAC4 0%, #B89678 100%); }
.cp-mock__thumb[data-prod="4"] { background: linear-gradient(135deg, #B9CDDB 0%, #6C8FA8 100%); }
.cp-mock__thumb[data-prod="5"] { background: linear-gradient(135deg, #C6B797 0%, #8B7A55 100%); }
.cp-mock__thumb[data-prod="6"] { background: linear-gradient(135deg, #D9C2A0 0%, #A3845A 100%); }
.cp-mock__thumb[data-prod="7"] { background: linear-gradient(135deg, #ECECEC 0%, #C5C5C5 100%); }
.cp-mock__thumb[data-prod="8"] { background: linear-gradient(135deg, #6B4226 0%, #3A2613 100%); }

.cp-mock__badge {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  background: #C0392B;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-1);
  letter-spacing: 0.04em;
}
.cp-mock__badge--new {
  background: var(--text-1);
}
.cp-mock__name {
  font-size: var(--t-xs);
  color: var(--text-1);
  font-weight: 500;
  margin-bottom: var(--s-1);
}
.cp-mock__swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.cp-mock__swatches span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  display: inline-block;
}
.cp-mock__prices {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.cp-mock__price {
  font-size: var(--t-sm);
  color: var(--text-1);
  font-weight: 600;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.cp-mock__price-old {
  font-size: 11px;
  color: var(--text-4);
  text-decoration: line-through;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.cp-mock__installments {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  white-space: nowrap;
}

/* Banner promocional largo */
.cp-mock__banner {
  margin: 0 var(--s-5) var(--s-3);
  background: linear-gradient(135deg, #2A1428 0%, #4D0F75 60%, var(--magenta) 130%);
  border-radius: var(--r-3);
  padding: var(--s-7) var(--s-6);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  position: relative;
  overflow: hidden;
}
.cp-mock__banner-content { max-width: 60%; }
.cp-mock__banner-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: var(--s-2);
}
.cp-mock__banner-title {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
}
.cp-mock__banner-sub {
  font-size: var(--t-sm);
  opacity: 0.8;
  margin-bottom: var(--s-4);
}
.cp-mock__banner-art {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 70%);
  flex-shrink: 0;
}

/* Benefícios em 4 colunas */
.cp-mock__benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cp-mock__benefit {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}
.cp-mock__benefit-ic {
  font-size: 22px;
  color: var(--magenta);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cp-mock__benefit-t {
  font-size: var(--t-xs);
  color: var(--text-1);
  font-weight: 600;
}
.cp-mock__benefit-s {
  font-size: 11px;
  color: var(--text-3);
}

/* Depoimentos */
.cp-mock__reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.cp-mock__review {
  background: var(--surface);
  border-radius: var(--r-2);
  padding: var(--s-4);
}
.cp-mock__stars {
  color: #E8A93A;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: var(--s-2);
}
.cp-mock__review p {
  font-size: var(--t-xs);
  color: var(--text-1);
  line-height: 1.5;
  margin: 0 0 var(--s-3);
  font-style: italic;
}
.cp-mock__review-name {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}

/* Newsletter */
.cp-mock__news {
  background: linear-gradient(135deg, #FAF5F1 0%, #F0E4D6 100%);
  padding: var(--s-8) var(--s-6);
  text-align: center;
}
.cp-mock__news-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.cp-mock__news-title {
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--s-2);
  letter-spacing: -0.01em;
}
.cp-mock__news-sub {
  font-size: var(--t-sm);
  color: var(--text-3);
  margin-bottom: var(--s-4);
}
.cp-mock__news-form {
  display: flex;
  gap: var(--s-2);
  max-width: 440px;
  margin: 0 auto;
}
.cp-mock__news-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-xs);
  color: var(--text-4);
  font-family: var(--font-mono);
  text-align: left;
}

/* Footer */
.cp-mock__foot {
  background: #1A0A1F;
  color: #FFFFFF;
  padding: var(--s-7) var(--s-5) var(--s-4);
}
.cp-mock__foot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.cp-mock__foot-col { font-size: 11px; }
.cp-mock__foot-h {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--s-3);
  opacity: 0.95;
}
.cp-mock__foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cp-mock__foot-col li {
  font-size: 11px;
  opacity: 0.65;
  padding: 3px 0;
}
.cp-mock__foot-bar {
  display: flex;
  justify-content: space-between;
  padding: var(--s-4) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  gap: var(--s-4);
  flex-wrap: wrap;
}
.cp-mock__foot-pay {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cp-mock__foot-pay span {
  font-size: 9px;
  font-weight: 700;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--r-1);
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}
.cp-mock__foot-cert {
  display: flex;
  gap: var(--s-3);
}
.cp-mock__foot-cert span {
  font-size: 9px;
  opacity: 0.6;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}
.cp-mock__foot-bottom {
  display: flex;
  justify-content: space-between;
  padding-top: var(--s-3);
  font-size: 10px;
  opacity: 0.5;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-mono);
}

/* ═══ PLP (Vitrine de categoria) ═══ */
.cp-mock__plp { padding: var(--s-5) var(--s-5) var(--s-7); }
.cp-mock__crumbs {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
}
.cp-mock__crumbs strong { color: var(--text-1); font-weight: 600; }
.cp-mock__plp-title {
  font-size: var(--t-2xl);
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-1);
}
.cp-mock__plp-sub {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-bottom: var(--s-5);
}
.cp-mock__plp-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-5);
}
.cp-mock__filters {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.cp-mock__filter-h {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-1);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.cp-mock__filter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cp-mock__filter li {
  font-size: 11px;
  color: var(--text-2);
}
.cp-mock__filter-sizes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.cp-mock__filter-sizes span {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 7px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  color: var(--text-3);
}
.cp-mock__filter-sizes span.is-on {
  background: var(--text-1);
  color: #FFFFFF;
  border-color: var(--text-1);
}
.cp-mock__filter-colors {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cp-mock__filter-colors span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
}
.cp-mock__plp-toolbar {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.cp-mock__plp-toolbar strong { color: var(--text-1); font-weight: 600; }
.cp-mock__grid--3 { grid-template-columns: repeat(3, 1fr); }
.cp-mock__pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s-5);
}
.cp-mock__pagination span {
  font-size: 11px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-1);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.cp-mock__pagination span.is-on {
  background: var(--text-1);
  color: #FFFFFF;
}

/* ═══ PDP (Página de Produto) ═══ */
.cp-mock__pdp { padding: var(--s-5) var(--s-5) var(--s-7); }
.cp-mock__pdp-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
  min-width: 0;
}
/* Default min-width:auto em grid children causa overflow horizontal —
   forçamos min-width:0 pra respeitar as faixas 1fr */
.cp-mock__pdp-body > * { min-width: 0; overflow: hidden; }
.cp-mock__pdp-gallery {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-3);
  min-width: 0;
}
.cp-mock__pdp-gallery > * { min-width: 0; }
.cp-mock__pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cp-mock__pdp-thumb {
  width: 64px;
  height: 64px;
  border-radius: var(--r-1);
  border: 2px solid transparent;
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
  flex-shrink: 0;
}
.cp-mock__pdp-thumb.is-on { border-color: var(--text-1); }
.cp-mock__pdp-thumb[data-prod="1"] { background: linear-gradient(135deg, #C28293 0%, #8B4D5C 100%); }
.cp-mock__pdp-thumb[data-prod="2"] { background: linear-gradient(160deg, #D9C8AC 0%, #8C7355 100%); }
.cp-mock__pdp-thumb[data-prod="3"] { background: linear-gradient(135deg, #F0DAC4 0%, #B89678 100%); }
.cp-mock__pdp-thumb[data-prod="5"] { background: linear-gradient(135deg, #C6B797 0%, #8B7A55 100%); }
.cp-mock__pdp-main {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-2);
  background: linear-gradient(135deg, #C28293 0%, #8B4D5C 100%);
}
.cp-mock__pdp-brand {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.cp-mock__pdp-title {
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--s-2);
  letter-spacing: -0.015em;
}
.cp-mock__pdp-ratings {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.cp-mock__pdp-revs {
  font-size: 11px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cp-mock__pdp-prices {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.cp-mock__pdp-price {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--text-1);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.cp-mock__price-old { white-space: nowrap; }
.cp-mock__pdp-discount {
  background: #C0392B;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: var(--r-1);
  white-space: nowrap;
}
.cp-mock__pdp-installments {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: var(--s-4);
  white-space: nowrap;
}
.cp-mock__pdp-opt { margin-bottom: var(--s-4); }
.cp-mock__pdp-opt-label {
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: var(--s-2);
  display: flex;
  justify-content: space-between;
}
.cp-mock__pdp-opt-label strong { color: var(--text-1); font-weight: 600; }
.cp-mock__pdp-guide { color: var(--text-3); text-decoration: underline; cursor: pointer; }
.cp-mock__pdp-swatches { display: flex; gap: 8px; }
.cp-mock__pdp-swatches span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 1px var(--border-2);
}
.cp-mock__pdp-swatches span.is-on { box-shadow: 0 0 0 2px var(--text-1); }
.cp-mock__pdp-sizes { display: flex; gap: 6px; }
.cp-mock__pdp-sizes span {
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  color: var(--text-2);
  min-width: 36px;
  text-align: center;
}
.cp-mock__pdp-sizes span.is-on {
  background: var(--text-1);
  color: #FFFFFF;
  border-color: var(--text-1);
}
.cp-mock__pdp-sizes span.is-off {
  opacity: 0.35;
  text-decoration: line-through;
}
.cp-mock__pdp-actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-4);
}
.cp-mock__cta--full { width: 100%; text-align: center; padding: var(--s-3); }
.cp-mock__pdp-shipping {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--s-4) 0;
  margin-bottom: var(--s-4);
}
.cp-mock__pdp-shipping-h {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: var(--s-2);
}
.cp-mock__pdp-shipping-row {
  display: flex;
  gap: var(--s-2);
}
.cp-mock__pdp-shipping-row .cp-mock__news-input {
  flex: 1;
  padding: var(--s-2) var(--s-3);
}
.cp-mock__pdp-tabs {
  display: flex;
  gap: var(--s-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-3);
}
.cp-mock__pdp-tabs span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  padding-bottom: var(--s-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cp-mock__pdp-tabs span.is-on {
  color: var(--text-1);
  border-bottom: 2px solid var(--text-1);
}
.cp-mock__pdp-desc {
  font-size: var(--t-xs);
  color: var(--text-2);
  line-height: 1.6;
  margin: 0;
}

/* ═══ Carrinho ═══ */
.cp-mock__cart { padding: var(--s-6) var(--s-5) var(--s-7); }
.cp-mock__cart-title {
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 var(--s-5);
}
.cp-mock__cart-title span { color: var(--text-3); font-weight: 400; font-size: var(--t-sm); }
.cp-mock__cart-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-5);
  min-width: 0;
}
.cp-mock__cart-body > * { min-width: 0; }
.cp-mock__cart-items {
  display: flex;
  flex-direction: column;
}
.cp-mock__cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
  align-items: center;
}
.cp-mock__cart-item:last-child { border-bottom: 1px solid var(--border); }
.cp-mock__cart-thumb {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-1);
  background: linear-gradient(135deg, var(--surface-2), var(--surface-3));
}
.cp-mock__cart-thumb[data-prod="1"] { background: linear-gradient(135deg, #C28293 0%, #8B4D5C 100%); }
.cp-mock__cart-thumb[data-prod="3"] { background: linear-gradient(135deg, #F0DAC4 0%, #B89678 100%); }
.cp-mock__cart-name {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}
.cp-mock__cart-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: var(--s-2);
}
.cp-mock__cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  overflow: hidden;
  font-size: 11px;
}
.cp-mock__cart-qty span {
  padding: 3px 8px;
  background: var(--surface);
  color: var(--text-2);
  font-weight: 600;
}
.cp-mock__cart-qty strong { padding: 3px 12px; color: var(--text-1); }
.cp-mock__cart-price { text-align: right; }
.cp-mock__cart-rm {
  font-size: 10px;
  color: var(--text-4);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}
.cp-mock__cart-summary {
  background: var(--surface);
  border-radius: var(--r-2);
  padding: var(--s-5);
  height: fit-content;
}
.cp-mock__cart-h {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-1);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.cp-mock__cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: var(--s-2);
}
.cp-mock__cart-row--total {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--text-1);
  padding-top: var(--s-3);
  margin: var(--s-3) 0;
  border-top: 1px solid var(--border-2);
}
.cp-mock__cart-green { color: var(--success); font-weight: 600; }
.cp-mock__cart-coupon {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-3) 0;
}
.cp-mock__cart-coupon .cp-mock__news-input {
  flex: 1;
  padding: var(--s-2) var(--s-3);
  font-size: 11px;
}
.cp-mock__cart-pay {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: var(--s-3);
  flex-wrap: wrap;
}
.cp-mock__cart-pay span {
  font-size: 8px;
  font-weight: 700;
  padding: 3px 6px;
  background: var(--surface-2);
  border-radius: var(--r-1);
  color: var(--text-3);
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}

/* Responsivo geral */
@media (max-width: 720px) {
  .cp-mock__menu { display: none; }
  .cp-mock__promo span:nth-child(n+3) { display: none; }
  .cp-mock__hero { padding: var(--s-8) var(--s-4) var(--s-7); }
  .cp-mock__hero-title { font-size: var(--t-xl); }
  .cp-mock__hero-ctas { flex-direction: column; align-items: center; }
  .cp-mock__cats { grid-template-columns: repeat(3, 1fr); }
  .cp-mock__grid { grid-template-columns: repeat(2, 1fr); }
  .cp-mock__grid--3 { grid-template-columns: repeat(2, 1fr); }
  .cp-mock__benefits { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .cp-mock__reviews { grid-template-columns: 1fr; }
  .cp-mock__banner { flex-direction: column; text-align: center; gap: var(--s-3); }
  .cp-mock__banner-content { max-width: 100%; }
  .cp-mock__banner-art { width: 80px; height: 80px; }
  .cp-mock__banner-title { font-size: var(--t-lg); }
  .cp-mock__news-form { flex-direction: column; }
  .cp-mock__foot-cols { grid-template-columns: repeat(2, 1fr); }
  .cp-mock__foot-bar { flex-direction: column; }
  .cp-mock__foot-bottom { flex-direction: column; }
  .cp-browser__url { max-width: 200px; }
  .cp-mock__plp-body { grid-template-columns: 1fr; }
  .cp-mock__filters { flex-direction: row; flex-wrap: wrap; gap: var(--s-3); }
  .cp-mock__filter { flex: 1; min-width: 140px; }
  .cp-mock__pdp-body { grid-template-columns: 1fr; }
  .cp-mock__pdp-gallery { grid-template-columns: 1fr; }
  .cp-mock__pdp-thumbs { flex-direction: row; }
  .cp-mock__pdp-thumb { width: 60px; }
  .cp-mock__cart-body { grid-template-columns: 1fr; }
  .cp-mock__acc-body { grid-template-columns: 1fr; }
  .cp-mock__acc-order { grid-template-columns: 1fr; gap: var(--s-2); }
  .cp-tabs { grid-template-columns: repeat(2, 1fr); }
  .cp-tabs__name { font-size: 10px; }
}

@media (max-width: 600px) {
  .cp-hero__pill {
    position: static;
    margin-top: var(--s-3);
  }
}

/* ─── Aba "Seus materiais" — Maxi Drive público read-only ─── */
.cp-mat {
  max-width: 1100px;
  margin: 0 auto;
}
.cp-mat__head { margin-bottom: var(--s-5); }
.cp-mat__label {
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  font-family: var(--font-display);
  margin-bottom: 4px;
}
.cp-mat__hint {
  font-size: var(--t-xs);
  color: var(--text-4);
}

/* Toolbar: voltar + breadcrumbs + view switch */
.cp-mat__nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-5);
}
.cp-mat__back {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-2);
  background: var(--bg);
  border-radius: var(--r-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-2);
  transition: all .12s;
}
.cp-mat__back:hover:not(:disabled) {
  background: var(--surface);
  color: var(--text-1);
}
.cp-mat__back:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cp-mat__back svg { width: 16px; height: 16px; }

.cp-mat__crumbs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  overflow-x: auto;
}
.cp-mat__crumb {
  background: none;
  border: none;
  font-size: var(--t-sm);
  color: var(--text-3);
  font-family: var(--font-display);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-1);
  white-space: nowrap;
}
.cp-mat__crumb:hover { background: var(--surface); color: var(--text-1); }
.cp-mat__crumb:last-child { color: var(--text-1); font-weight: 600; }
.cp-mat__crumb-sep { color: var(--text-4); font-size: var(--t-sm); }

.cp-mat__viewswitch {
  display: flex;
  gap: 2px;
  background: var(--surface);
  padding: 2px;
  border-radius: var(--r-1);
}
.cp-mat__viewswitch button {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-3);
}
.cp-mat__viewswitch button.is-on {
  background: var(--bg);
  color: var(--text-1);
  box-shadow: 0 1px 2px rgba(11, 4, 16, 0.06);
}
.cp-mat__viewswitch svg { width: 14px; height: 14px; }

/* Content area */
.cp-mat__content { min-height: 200px; }
.cp-mat__loading {
  text-align: center;
  padding: var(--s-7);
  font-size: var(--t-sm);
  color: var(--text-3);
}

/* Empty state */
.cp-mat__empty {
  text-align: center;
  padding: var(--s-9) var(--s-5);
  max-width: 420px;
  margin: 0 auto;
}
.cp-mat__empty-ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s-4);
}
.cp-mat__empty-ic svg { width: 28px; height: 28px; }
.cp-mat__empty-title {
  font-size: var(--t-md);
  color: var(--text-1);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}
.cp-mat__empty-text {
  font-size: var(--t-sm);
  color: var(--text-3);
  line-height: 1.5;
  margin: 0;
}

/* Grid view */
.cp-mat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s-4);
}
.cp-mat__card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-3);
  text-align: left;
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.cp-mat__card:hover {
  border-color: var(--border-2);
  box-shadow: 0 2px 12px rgba(11, 4, 16, 0.06);
  transform: translateY(-1px);
}
.cp-mat__thumb {
  aspect-ratio: 4/3;
  background: var(--surface);
  border-radius: var(--r-1);
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-3);
}
.cp-mat__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cp-mat__icon { display: flex; align-items: center; justify-content: center; }
.cp-mat__icon svg { width: 36px; height: 36px; }
.cp-mat__name {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-mat__meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* List view */
.cp-mat__list {
  border-top: 1px solid var(--border);
}
.cp-mat__list-head {
  display: grid;
  grid-template-columns: 28px 1fr 160px;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.cp-mat__row {
  display: grid;
  grid-template-columns: 28px 1fr 160px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.cp-mat__row:hover { background: var(--surface); }
.cp-mat__row-ic {
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-mat__row-ic svg { width: 18px; height: 18px; }
.cp-mat__row-name {
  font-size: var(--t-sm);
  color: var(--text-1);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cp-mat__row-meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
  text-align: right;
}

@media (max-width: 640px) {
  .cp-mat__grid { grid-template-columns: repeat(2, 1fr); }
  .cp-mat__list-head, .cp-mat__row { grid-template-columns: 28px 1fr; }
  .cp-mat__row-meta { display: none; }
}

/* Toolbar de edição do cliente (Nova pasta / Enviar arquivo) */
.cp-mat__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.cp-mat__head-text { min-width: 0; }
.cp-mat__actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }
.cp-mat__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--bg); color: var(--text-1);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, filter .12s;
}
.cp-mat__btn svg { width: 16px; height: 16px; }
.cp-mat__btn:hover { background: var(--surface); }
.cp-mat__btn:disabled { opacity: .6; cursor: default; }
.cp-mat__btn--primary { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.cp-mat__btn--primary:hover { background: var(--magenta); filter: brightness(1.06); }

/* ⋮ por item (só aparece nos itens criados pelo cliente) */
.cp-mat__card, .cp-mat__row { position: relative; }
.cp-mat__menu-btn {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border: 0; border-radius: var(--r-1);
  background: rgba(255,255,255,0.85); color: var(--text-3);
  display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.cp-mat__row .cp-mat__menu-btn { top: 50%; transform: translateY(-50%); background: transparent; }
.cp-mat__card:hover .cp-mat__menu-btn,
.cp-mat__row:hover .cp-mat__menu-btn,
.cp-mat__menu-btn:focus-visible { opacity: 1; }
.cp-mat__menu-btn:hover { background: var(--surface-2); color: var(--text-1); }
.cp-mat__menu-btn svg { width: 15px; height: 15px; }
.cp-mat__menu {
  position: fixed; z-index: 1200; min-width: 150px;
  background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r-2);
  box-shadow: var(--shadow-3); padding: 5px; display: flex; flex-direction: column;
}
.cp-mat__menu button {
  text-align: left; padding: 8px 12px; border: 0; background: transparent;
  border-radius: var(--r-1); cursor: pointer; font-family: var(--font-display);
  font-size: var(--t-sm); color: var(--text-1);
}
.cp-mat__menu button:hover { background: var(--surface-2); }
.cp-mat__menu button.is-danger { color: var(--danger); }
.cp-mat__menu button.is-danger:hover { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); }

.cp-burndown {
  background: #FBFCFD;  /* cinza bem clarinho (mais claro que --surface) */
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-3);
}
.cp-burndown svg { width: 100%; height: auto; display: block; }

/* ── Área do Cliente: Marcos (checklist simplificado), Concluir, Site ── */
/* Marcos = espelho do checklist: etapas (cards) + subseções */
.cp-overview { display: flex; flex-direction: column; gap: var(--s-2); }
.cp-ov {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg);
  padding: var(--s-3) var(--s-4);
}
.cp-ov.is-done { background: var(--success-soft); border-color: var(--success-edge); }
.cp-ov__head { display: flex; align-items: center; gap: var(--s-3); }
.cp-ov__check {
  width: 22px; height: 22px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--border-2); color: transparent;
}
.cp-ov__check svg { width: 13px; height: 13px; }
.cp-ov.is-done .cp-ov__check { background: var(--success); border-color: var(--success); color: #fff; }
.cp-ov__name { flex: 1; font-weight: 600; color: var(--text-1); font-family: var(--font-display); }
.cp-ov__count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); }
.cp-ov__subs { margin: var(--s-3) 0 0 34px; display: flex; flex-direction: column; gap: 7px; }
.cp-ov__sub { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-3); }
.cp-ov__sub-check {
  width: 17px; height: 17px; flex-shrink: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--border-2); color: transparent;
}
.cp-ov__sub-check svg { width: 10px; height: 10px; }
.cp-ov__sub.is-done { color: var(--text-1); }
.cp-ov__sub.is-done .cp-ov__sub-check { background: var(--success); border-color: var(--success); color: #fff; }

/* Concluir projeto (lado do cliente) */
.cp-conclude { display: flex; flex-direction: column; gap: var(--s-2); }
.cp-conclude__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px var(--s-5); border: 0; border-radius: var(--r-2); cursor: pointer;
  background: var(--success); color: #fff; font-weight: 700; font-size: var(--t-base);
  font-family: var(--font-display);
}
.cp-conclude__btn:hover { background: #0C8E57; }
.cp-conclude__btn svg { width: 16px; height: 16px; }
.cp-conclude__btn.is-locked { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; }
.cp-conclude__hint { margin: 0; font-size: var(--t-xs); color: var(--text-3); }
.cp-conclude__state {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-2);
  background: var(--success-soft); border: 1px solid var(--success-edge);
}
.cp-conclude__state svg { width: 22px; height: 22px; color: var(--success); flex-shrink: 0; }
.cp-conclude__state strong { display: block; color: var(--success); font-family: var(--font-display); }
.cp-conclude__state span { font-size: var(--t-sm); color: var(--text-2); }

/* Labels + estados "em breve" */
.cp-calendar__label, .cp-fb-page__label, .cp-live__label, .cp-tutorial__label {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-3); font-weight: 600; margin-bottom: var(--s-2);
}
.cp-soon { font-size: var(--t-sm); color: var(--text-3); }
.cp-soon--block {
  padding: var(--s-6); text-align: center;
  background: var(--surface); border: 1px dashed var(--border-2); border-radius: var(--r-2);
}

/* Site em tempo real */
.cp-live__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.cp-live__sub { margin: 2px 0 0; font-size: var(--t-sm); color: var(--text-3); }
.cp-live__open { font-size: var(--t-sm); color: var(--magenta); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cp-live__frame {
  border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden;
  background: var(--surface); height: 70vh;
}
.cp-live__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Vídeo de autonomia — "Aprenda a editar seu site" (Acompanhamento) */
.cp-tutorial { margin-top: var(--s-6); }
.cp-tutorial__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.cp-tutorial__sub { margin: 2px 0 0; font-size: var(--t-sm); color: var(--text-3); max-width: 60ch; }
.cp-tutorial__open { font-size: var(--t-sm); color: var(--magenta); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cp-tutorial__frame {
  width: 100%; aspect-ratio: 16 / 9; max-height: 70vh;
  border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; background: #000;
}
.cp-tutorial__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Faixa horizontal: calendário (esquerda) + vídeos (direita) — colunas de mesma altura */
.cp-band {
  /* Mesmas colunas (50/50) e gap do .cp-row → o calendário alinha com a coluna
     esquerda (gráfico/concluir) e os vídeos com a dos marcos do projeto. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: stretch;        /* mesma altura → rodapés do calendário e dos vídeos alinhados */
  margin-top: var(--s-7);
}
.cp-band > .cp-calendar { min-width: 0; display: flex; flex-direction: column; }
.cp-band > .cp-watch { min-width: 0; margin-top: 0; display: flex; flex-direction: column; }
@media (max-width: 960px) {
  .cp-band { display: block; }
  .cp-band > .cp-watch { margin-top: var(--s-7); }
}

/* Calendário de entregas — fundo cinza claro + borda (igual ao gráfico) */
.cp-cal {
  background: #FBFCFD;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-5);
  flex: 1;                     /* preenche a altura da coluna */
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.cp-cal__months { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cp-cal__month { width: 100%; }   /* 1 mês por vez, preenche a largura do card */
.cp-cal__month[hidden] { display: none; }
.cp-cal__monthhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.cp-cal__title {
  font-size: var(--t-base); font-weight: 600; color: var(--text-1);
  font-family: var(--font-display); margin: 0;
}
.cp-cal__nav { display: flex; gap: 4px; flex-shrink: 0; }
.cp-cal__navbtn {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--bg); color: var(--text-2); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.cp-cal__navbtn svg { width: 16px; height: 16px; }
.cp-cal__navbtn:hover:not(:disabled) { border-color: var(--magenta); color: var(--magenta); }
.cp-cal__navbtn:disabled { opacity: 0.4; cursor: default; }
/* Quadriculado: gap de 1px + fundo nas linhas faz as bordas entre os dias */
.cp-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border-2);            /* cor das linhas do quadriculado */
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  overflow: hidden;                       /* arredonda os cantos externos */
}
.cp-cal__wd {
  text-align: center; font-size: var(--t-xs); font-weight: 700; color: #fff;
  font-family: var(--font-mono); padding: 6px 0; background: var(--purple);
}
.cp-cal__cell {
  aspect-ratio: 8 / 5; display: grid; place-items: center;
  font-size: var(--t-base); font-family: var(--font-mono);
  color: var(--text-2); background: #fff;
}
.cp-cal__cell.is-empty { color: transparent; }
.cp-cal__cell.is-call { color: #fff; font-weight: 700; }  /* fundo vem inline (cor por evento) */
/* Marcador de "hoje" — anel; acompanha a data atual (get_settings().today) */
.cp-cal__cell.is-today {
  font-weight: 800; color: var(--magenta);
  box-shadow: inset 0 0 0 2px var(--magenta);
}
.cp-cal__cell.is-today.is-call {
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;  /* em dia de evento (fundo colorido): anel branco */
}
.cp-cal__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.cp-cal__legend-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); }
.cp-cal__dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }  /* cor vem inline (por evento) */
.cp-cal__legend-label { color: var(--text-1); }
.cp-cal__legend-date { font-family: var(--font-mono); color: var(--text-3); }

/* Rodadas de alteração (Acompanhamento) — checklist read-only por rodada */
.cp-rounds { margin-top: var(--s-6); }
.cp-rounds__label { font-size: var(--t-sm); font-weight: 600; color: var(--text-2); margin-bottom: var(--s-3); }
.cp-rounds__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.cp-rounds__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--s-4);
}
.cp-rounds__card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2); margin-bottom: var(--s-3);
}
.cp-rounds__card-title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-base); color: var(--text-1); }
.cp-rounds__card-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.cp-rounds__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-rounds__it { display: flex; align-items: flex-start; gap: 10px; }
.cp-rounds__it-check {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid var(--border-2);
  display: grid; place-items: center; color: #fff;
}
.cp-rounds__it.is-done .cp-rounds__it-check { background: var(--success); border-color: var(--success); }
.cp-rounds__it-check svg { width: 11px; height: 11px; }
.cp-rounds__it-text { flex: 1; font-size: var(--t-sm); color: var(--text-1); line-height: 1.5; }
.cp-rounds__it.is-done .cp-rounds__it-text { color: var(--text-3); }

/* Envio de feedbacks — fases (checklist) + formulário por fase */
.cp-fb-phase {
  border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--bg); padding: var(--s-4); margin-bottom: var(--s-4);
}
.cp-fb-phase.is-locked { background: var(--surface); border-style: dashed; }
.cp-fb-phase__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.cp-fb-phase.is-locked .cp-fb-phase__head { margin-bottom: 0; }
.cp-fb-phase__title { margin: 0; font-size: var(--t-base); font-weight: 600; color: var(--text-1); font-family: var(--font-display); }
.cp-fb-phase.is-locked .cp-fb-phase__title { color: var(--text-3); }
.cp-fb-phase__count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); }
.cp-fb-phase__lockico { display: grid; place-items: center; color: var(--text-3); flex-shrink: 0; }
.cp-fb-phase__lockico svg { width: 16px; height: 16px; }
.cp-fb-phase__locked { margin: var(--s-2) 0 0; font-size: var(--t-sm); color: var(--text-3); }
.cp-fb-phase__empty { margin: 0 0 var(--s-3); font-size: var(--t-sm); color: var(--text-3); }
.cp-fb-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-direction: column; gap: 7px; }
.cp-fb-item { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-2); }
.cp-fb-item__check {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--border-2); color: transparent;
}
.cp-fb-item__check svg { width: 11px; height: 11px; }
.cp-fb-item.is-done { color: var(--text-1); }
.cp-fb-item.is-done .cp-fb-item__check { background: var(--success); border-color: var(--success); color: #fff; }
.cp-fb-item__text { flex: 1; }
.cp-fb-item__tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--success); background: var(--success-soft); border: 1px solid var(--success-edge);
  padding: 1px 7px; border-radius: 999px; flex-shrink: 0; align-self: center;
}
.cp-fb-item__actions { display: flex; gap: 4px; flex-shrink: 0; align-self: center; }
.cp-fb-item__act {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--bg); color: var(--text-3); cursor: pointer;
  transition: color .12s, border-color .12s;
}
.cp-fb-item__act svg { width: 14px; height: 14px; }
.cp-fb-item__act:hover { border-color: var(--magenta); color: var(--magenta); }
.cp-fb-item__act--del:hover { border-color: var(--danger); color: var(--danger); }
.cp-fb-form { display: flex; flex-direction: column; gap: var(--s-2); }
.cp-fb-form__input {
  width: 100%; resize: vertical; font: inherit; font-size: var(--t-sm);
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--surface); color: var(--text-1);
}
.cp-fb-form__input:focus { outline: none; border-color: var(--magenta); background: var(--bg); }
.cp-fb-form__btn {
  align-self: flex-start; border: 0; border-radius: var(--r-1); cursor: pointer;
  background: var(--magenta); color: #fff; font-weight: 600; font-size: var(--t-sm);
  padding: 8px 16px; font-family: var(--font-display);
}
.cp-fb-form__btn:hover { filter: brightness(1.05); }
.cp-fb-form__btn:disabled { opacity: 0.6; cursor: default; }

/* Pop-up in-page do portal (editar/excluir feedback) — sem prompt/confirm nativo */
.cp-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--s-4); }
.cp-modal[hidden] { display: none; }
.cp-modal__backdrop { position: absolute; inset: 0; background: rgba(11, 4, 16, 0.45); }
.cp-modal__dialog {
  position: relative; width: 100%; max-width: 440px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-2);
  box-shadow: 0 20px 50px rgba(11, 4, 16, 0.25); padding: var(--s-5);
}
.cp-modal__title { margin: 0 0 var(--s-3); font-size: var(--t-lg); font-weight: 700; color: var(--text-1); font-family: var(--font-display); }
.cp-modal__msg { margin: 0 0 var(--s-4); font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; }
.cp-modal__input {
  width: 100%; resize: vertical; font: inherit; font-size: var(--t-sm);
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--surface); color: var(--text-1); margin-bottom: var(--s-4);
}
.cp-modal__input:focus { outline: none; border-color: var(--magenta); background: var(--bg); }
.cp-modal__actions { display: flex; justify-content: flex-end; gap: var(--s-2); }
.cp-modal__btn { border: 0; border-radius: var(--r-1); cursor: pointer; font-weight: 600; font-size: var(--t-sm); padding: 9px 18px; font-family: var(--font-display); }
.cp-modal__btn--ghost { background: var(--surface); color: var(--text-2); border: 1px solid var(--border); }
.cp-modal__btn--ghost:hover { color: var(--text-1); }
.cp-modal__btn--primary { background: var(--magenta); color: #fff; }
.cp-modal__btn--primary:hover { filter: brightness(1.05); }
.cp-modal__btn--primary.is-danger { background: var(--danger); }
.cp-modal__btn:disabled { opacity: 0.6; cursor: default; }

/* Tabs */
.client-modal__tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cm-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm);
  font-weight: 500;
  font-family: var(--font-display);
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  transition: color .15s, border-color .15s;
}
.cm-tab:hover { color: var(--text-1); }
.cm-tab.is-active {
  color: var(--text-1);
  border-bottom-color: var(--magenta);
}
.cm-tab [data-icon] { display: inline-flex; }
.cm-tab .pill { font-size: 10px; padding: 2px 6px; }

/* Panels */
.client-modal__panel {
  flex: 1;
  display: none;
  overflow: hidden;
}
.client-modal__panel.is-active { display: flex; }

/* ─── Aba Confecção: layout dois-colunas ─── */
.cm-confec {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  overflow: hidden;
}
.cm-confec__main {
  padding: var(--s-5);
  overflow-y: auto;
  border-right: 1px solid var(--border);
}
/* ── Botão "Concluir projeto" (rodapé do checklist) ──────────────── */
.cm-conclude {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
}
.cm-conclude__btn { display: inline-flex; align-items: center; gap: var(--s-2); }
.cm-conclude__btn svg { width: 14px; height: 14px; }
.cm-conclude__btn.is-locked {
  background: var(--surface-3);
  color: var(--text-3);
  cursor: not-allowed;
}
.cm-conclude__hint { margin: 0; font-size: var(--t-xs); color: var(--text-3); }
.cm-conclude__done {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; color: var(--success);
  padding: var(--s-2) var(--s-3);
  background: var(--success-soft);
  border: 1px solid var(--success-edge);
  border-radius: var(--r-2);
}
.cm-conclude__done [data-icon] { display: inline-flex; }
.cm-conclude__done svg { width: 16px; height: 16px; display: block; }
.cm-confec__side {
  padding: var(--s-4);
  overflow-y: auto;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.cm-loading {
  padding: 48px;
  text-align: center;
  color: var(--text-3);
}

/* Bloco do checklist */
.cm-block {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  margin-bottom: var(--s-3);
  background: var(--bg);
  overflow: hidden;
}
.cm-block.is-done { border-color: var(--success-edge); background: var(--success-soft); }
.cm-block.is-current { border-color: var(--magenta-edge); }

.cm-block__head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  user-select: none;
  background: var(--surface);
  transition: background .15s;
}
.cm-block:not(.is-open) .cm-block__head:hover { background: var(--surface-2); }
.cm-block.is-open .cm-block__head { background: var(--bg); border-bottom: 1px solid var(--border); }

.cm-block__chev {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--text-3);
  transition: transform .15s;
}
.cm-block__chev svg { width: 12px; height: 12px; display: block; }
.cm-block.is-open .cm-block__chev { transform: rotate(90deg); }

.cm-block__name {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-1);
  font-family: var(--font-display);
}
.cm-block.is-done .cm-block__name { color: var(--success); text-decoration: line-through; }

.cm-block__count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
}
.cm-block.is-done .cm-block__count { color: var(--success); font-weight: 600; }

.cm-block__bar {
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3);
  overflow: hidden;
}
.cm-block__bar i {
  display: block;
  height: 100%;
  background: var(--magenta);
  transition: width .25s ease-out;
}
.cm-block.is-done .cm-block__bar i { background: var(--success); }

.cm-block__body {
  display: none;
  padding: var(--s-3) var(--s-4) var(--s-4);
}
.cm-block.is-open .cm-block__body { display: block; }

.cm-category__name {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--magenta);
  margin: var(--s-3) 0 var(--s-2);
}
.cm-category__name:first-child { margin-top: 0; }

.cm-req {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2);
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.cm-req:hover { background: var(--surface-2); }
.cm-req input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--magenta);
  cursor: pointer;
  flex-shrink: 0;
}
.cm-req__text {
  font-size: var(--t-sm);
  color: var(--text-1);
  line-height: 1.4;
}
.cm-req.is-done .cm-req__text { color: var(--text-3); text-decoration: line-through; }
.cm-req.is-saving { opacity: 0.6; }

/* Side panel */
.cm-side__card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-3);
}
.cm-side__label {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
/* Rodadas — cards de feedback do cliente vindos da área pública */
/* Rodadas de alteração — aba do agente que gera o checklist da call */
.cm-rounds__switch {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border-radius: var(--r-pill); margin-bottom: var(--s-4);
}
.cm-rounds__tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border: 0; background: transparent; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm);
  color: var(--text-2); cursor: pointer; transition: background .12s, color .12s;
}
.cm-rounds__tab.is-active { background: var(--bg); color: var(--text-1); box-shadow: var(--shadow-1); }
.cm-rounds__date { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.cm-rounds__result-head {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-3);
}
.cm-rounds__count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); }
.cm-rounds__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* "Rodou e não saiu nada". Antes o agente gravava um checklist mock plausível e o
   cliente via na Área dele — vazio explicado custa menos que tarefa inventada. */
.cm-rounds__empty {
  padding: var(--s-3); border-radius: var(--r-2); line-height: 1.5;
  background: var(--warning-soft); border: 1px solid var(--warning-edge);
  font-size: var(--t-sm); color: var(--text-2);
}
.cm-rounds__empty strong { color: var(--warning); }
.cm-rounds__item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-2);
}
.cm-rounds__check {
  margin-top: 1px; width: 18px; height: 18px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--purple);
}
.cm-rounds__text { flex: 1; font-size: var(--t-sm); color: var(--text-1); line-height: 1.5; }
.cm-rounds__item.is-done .cm-rounds__text { color: var(--text-3); text-decoration: line-through; }
.cm-rounds__del {
  flex-shrink: 0; width: 24px; height: 24px; border: 0; background: transparent;
  color: var(--text-3); cursor: pointer; border-radius: var(--r-1); display: grid; place-items: center;
}
.cm-rounds__del:hover { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); color: var(--danger); }
.cm-rounds__del svg { width: 14px; height: 14px; }
.cm-rounds__add { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.cm-rounds__add-input {
  flex: 1; padding: 9px 12px; border: 1px solid var(--border-2); border-radius: var(--r-1);
  font-family: var(--font-display); font-size: var(--t-sm); color: var(--text-1); background: var(--bg);
}
.cm-rounds__add-input:focus { outline: none; border-color: var(--purple); }
.cm-rounds__add-btn {
  flex-shrink: 0; width: 38px; border: 1px solid var(--border-2); background: var(--bg);
  border-radius: var(--r-1); cursor: pointer; color: var(--text-2); display: grid; place-items: center;
}
.cm-rounds__add-btn:hover { background: var(--surface-2); color: var(--text-1); }
.cm-rounds__add-btn svg { width: 16px; height: 16px; }

/* Feedbacks — inbox dos feedbacks que o cliente envia na área dele */
/* Card de feedbacks do modal — com destaque (acento magenta + header) */
.cm-side__card--fb {
  border: 1px solid var(--magenta-soft, rgba(228, 13, 219, 0.28));
  background:
    linear-gradient(180deg, rgba(228, 13, 219, 0.05), transparent 60px),
    var(--bg);
  box-shadow: inset 3px 0 0 var(--magenta);
}
.cm-fb-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: var(--s-3); padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.cm-fb-head__icon { display: grid; place-items: center; color: var(--magenta); flex-shrink: 0; }
.cm-fb-head__icon svg { width: 16px; height: 16px; }
.cm-fb-head__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-1); flex: 1; font-family: var(--font-display);
}
.cm-fb-head__count {
  font-size: 10px; font-weight: 700; flex-shrink: 0;
  color: #fff; background: var(--magenta); border-radius: 999px; padding: 2px 8px;
}
.cm-fb-head__count.is-zero { color: var(--success); background: var(--success-soft); }
.cm-feedbacks { display: flex; flex-direction: column; gap: var(--s-3); }
.cm-fb-group { display: flex; flex-direction: column; gap: 5px; }
.cm-fb-group__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cm-fb-group__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--magenta);
}
.cm-fb-group__count { font-size: 10px; color: var(--text-3); font-family: var(--font-mono); }
.cm-fb-item {
  display: flex; align-items: flex-start; gap: var(--s-2); cursor: pointer;
  font-size: var(--t-xs); color: var(--text-2); line-height: 1.45;
}
.cm-fb-item__cb { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cm-fb-item__box {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  border-radius: 5px; border: 1.5px solid var(--border-2);
  position: relative; transition: background .12s, border-color .12s;
}
.cm-fb-item__cb:checked + .cm-fb-item__box { background: var(--success); border-color: var(--success); }
.cm-fb-item__cb:checked + .cm-fb-item__box::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cm-fb-item__text { flex: 1; white-space: pre-wrap; }
.cm-fb-item.is-done .cm-fb-item__text { color: var(--text-1); }
.cm-side__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.cm-side__strong {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text-1);
}
.cm-side__frac {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--text-3);
}
.cm-side__sub {
  font-size: 11px;
  color: var(--text-3);
}
/* respiro entre o display/editor de prazo e o aviso de trava ("X produtos pendente") */
#cmTravaSub { margin-top: var(--s-2); }
.cm-side__live {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.cm-side__live-input {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--text-1);
}
.cm-side__live-input:focus {
  outline: none;
  border-color: var(--magenta);
}
.cm-side__live-save {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--r-1);
  background: var(--purple);
  color: #fff;
  cursor: pointer;
}
.cm-side__live-save:hover { filter: brightness(1.1); }
.cm-side__live-save:disabled { opacity: 0.6; cursor: default; }
.cm-side__placeholder {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.cm-side__resp {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: center;
}
.cm-side__resp .av {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-display);
}

/* ─── Aba Preview do Site: agente de IA (fluxo visual) ───────────────
   Layout dois-colunas igual à aba Confecção: config (esquerda) + palco
   da geração (direita). A geração é simulada no JS (sem agente real). */
.cm-agent {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 440px;
  overflow: hidden;
}
.cm-agent__config {
  padding: var(--s-5);
  overflow-y: auto;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.cm-agent__intro { display: flex; gap: var(--s-3); align-items: center; }
.cm-agent__intro-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-2);
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--purple-bright), var(--magenta));
}
.cm-agent__intro-icon svg { width: 20px; height: 20px; display: block; }
.cm-agent__title {
  font-size: var(--t-xl); font-weight: 600; color: var(--text-1);
  margin: 0; font-family: var(--font-display); letter-spacing: -0.01em;
}
.cm-agent__section { display: flex; flex-direction: column; gap: var(--s-2); }
.cm-agent__sources { display: flex; flex-direction: column; gap: var(--s-2); }
.cm-agent__src {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg);
}
.cm-agent__src-ico {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--r-1);
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--purple);
}
.cm-agent__src-ico svg { width: 17px; height: 17px; }
.cm-agent__src-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-agent__src-text strong { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); }
/* Card de fonte que lista itens embaixo (Cursos e Materiais) */
.cm-agent__src--col { flex-direction: column; align-items: stretch; gap: 0; }
.cm-agent__src-head { display: flex; align-items: center; gap: var(--s-3); }
/* Textarea dentro de um card de fonte (transcrição) — respiro do cabeçalho */
.cm-agent__src--col .cm-agent__direction { margin-top: var(--s-3); }
.cm-agent__direction:disabled {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed; resize: none;
}
/* Botão "Pular Etapa" (call não gravada) — pill de fundo rosa translúcido */
.cm-agent__skip {
  align-self: flex-start; margin-top: var(--s-2);
  border: 0; border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--magenta-soft); color: var(--magenta-deep);
  transition: background .12s;
}
.cm-agent__skip:hover { background: var(--magenta-edge); }
.cm-agent__mats {
  list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
}
.cm-agent__mat {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--text-2); line-height: 1.3;
}
.cm-agent__mat-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--purple); }
.cm-agent__mat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-agent__mat-tag {
  flex-shrink: 0; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 2px 7px;
}
.cm-agent__mats-empty { font-size: var(--t-xs); color: var(--text-3); }
.cm-agent__direction {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 92px;
  font-family: inherit; font-size: var(--t-sm); line-height: 1.5;
  padding: var(--s-3);
  border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--bg); color: var(--text-1);
}
.cm-agent__direction:focus {
  outline: none; border-color: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}
.cm-agent__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cm-agent__chip {
  font-size: 12px; font-weight: 500;
  padding: 5px 10px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--bg); color: var(--text-2); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.cm-agent__chip:hover {
  background: var(--magenta-soft); color: var(--magenta-deep); border-color: var(--magenta-edge);
}
.cm-agent__cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-base); font-weight: 600;
  padding: 11px 20px;
  border: 0; border-radius: var(--r-2);
  background: var(--magenta); color: #fff; cursor: pointer;
  box-shadow: var(--shadow-glow-magenta);
  transition: filter .12s;
}
.cm-agent__cta svg { width: 16px; height: 16px; display: block; }
.cm-agent__cta:hover { filter: brightness(1.07); }
.cm-agent__cta:disabled, .cm-agent__cta.is-loading {
  opacity: .55; cursor: default; box-shadow: none;
}

/* Palco (coluna direita) */
.cm-agent__stage {
  padding: var(--s-5);
  overflow-y: auto;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
/* O atributo [hidden] precisa vencer o display:flex dos estados abaixo;
   sem isto, idle + gerando + resultado apareceriam empilhados juntos. */
.cm-agent__idle[hidden],
.cm-agent__run[hidden],
.cm-agent__result[hidden] { display: none; }
.cm-agent__idle {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: var(--s-3); color: var(--text-3);
}
.cm-agent__idle-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-3);
  display: grid; place-items: center;
}
.cm-agent__idle-icon svg { width: 24px; height: 24px; }
.cm-agent__idle-text { font-size: var(--t-sm); line-height: 1.6; margin: 0; max-width: 260px; }

/* Estado: gerando */
.cm-agent__run { display: flex; flex-direction: column; gap: var(--s-4); }
.cm-agent__run-head {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-base); font-weight: 600; color: var(--text-1);
}
.cm-agent__spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid var(--magenta-soft); border-top-color: var(--magenta);
  border-radius: 50%; animation: cmAgentSpin .7s linear infinite;
}
@keyframes cmAgentSpin { to { transform: rotate(360deg); } }
.cm-agent__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.cm-agent__step {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--text-3);
  opacity: .45; transition: opacity .2s;
}
.cm-agent__step.is-active, .cm-agent__step.is-done { opacity: 1; }
.cm-agent__step.is-active .cm-agent__step-label { color: var(--text-1); font-weight: 500; }
.cm-agent__step.is-done .cm-agent__step-label { color: var(--text-2); }
.cm-agent__step-dot {
  width: 18px; height: 18px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid var(--border-2);
  position: relative; transition: background .2s, border-color .2s;
}
.cm-agent__step.is-active .cm-agent__step-dot { border-color: var(--magenta); }
.cm-agent__step.is-active .cm-agent__step-dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--magenta); animation: cmAgentPulse .8s ease-in-out infinite;
}
@keyframes cmAgentPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.cm-agent__step.is-done .cm-agent__step-dot { background: var(--success); border-color: var(--success); }
.cm-agent__step.is-done .cm-agent__step-dot::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Estado: resultado — a IA gera as 4 telas do site (mocks compactos) */
.cm-agent__result { display: flex; flex-direction: column; gap: var(--s-3); }
.cm-agent__result-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 600; color: var(--success);
}
.cm-agent__result-head svg { width: 15px; height: 15px; }

.cm-agent__pages { display: flex; flex-direction: column; gap: var(--s-4); }
.cm-agent__pv { margin: 0; }
.cm-agent__pv-cap {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2);
}
.cm-agent__pv-num {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%;
  background: var(--purple-soft); color: var(--purple);
  display: grid; place-items: center; font-size: 9px; font-weight: 800;
}
.cm-agent__pv-screen {
  border: 1px solid var(--border-2); border-radius: var(--r-2);
  overflow: hidden; background: var(--bg);
  box-shadow: 0 3px 12px rgba(11, 4, 16, 0.06);
}

/* Skeletons compartilhados (Home + base) */
.cm-agent__sk-hero {
  height: 46px; padding: 0 12px;
  background: linear-gradient(135deg, var(--purple-bright), var(--magenta));
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.cm-agent__sk-hero::before { content: ""; width: 48%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.85); }
.cm-agent__sk-hero::after  { content: ""; width: 30%; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.5); }
.cm-agent__sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
.cm-agent__sk-card { height: 30px; border-radius: var(--r-1); background: var(--surface-2); position: relative; overflow: hidden; }
.cm-agent__sk-card::after {
  content: ""; position: absolute; left: 5px; right: 5px; bottom: 4px; height: 4px; border-radius: 2px; background: var(--surface-3);
}

/* Coleção — barra de filtros + grade */
.cm-agent__sk-filters { display: flex; gap: 6px; padding: 8px 8px 0; }
.cm-agent__sk-filters span { height: 12px; flex: 1; border-radius: 999px; background: var(--surface-2); }

/* Produto — imagem + detalhes */
.cm-agent__sk-pdp { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px; }
.cm-agent__sk-img { height: 92px; border-radius: var(--r-1); background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); }
.cm-agent__sk-detail { display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.cm-agent__sk-line { height: 8px; border-radius: 3px; background: var(--surface-2); }
.cm-agent__sk-line--lg { height: 11px; width: 80%; }
.cm-agent__sk-line--price { width: 40%; background: var(--surface-3); }
.cm-agent__sk-btn { margin-top: auto; height: 22px; border-radius: var(--r-1); background: var(--text-1); opacity: .85; }

/* Carrinho — itens + barra de total */
.cm-agent__sk-cart { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.cm-agent__sk-cart-row { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; }
.cm-agent__sk-thumb { height: 40px; border-radius: var(--r-1); background: linear-gradient(135deg, var(--surface-2), var(--surface-3)); }
.cm-agent__sk-cart-row .cm-agent__sk-line { height: 9px; }
.cm-agent__sk-bar { height: 26px; border-radius: var(--r-1); background: var(--surface-2); margin-top: 2px; }

.cm-agent__result-actions { display: flex; gap: var(--s-2); }
.cm-agent__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 600; padding: 9px 14px;
  border-radius: var(--r-1); cursor: pointer; border: 1px solid transparent;
  transition: filter .12s, background .12s, color .12s;
}
.cm-agent__btn svg { width: 14px; height: 14px; }
/* hidden vence o display:inline-flex — sem isso, esconder o botão pelo JS não
   surtia efeito nenhum (valia também pro caso "não-admin"). */
.cm-agent__btn[hidden] { display: none; }
.cm-agent__btn--primary { background: var(--purple); color: #fff; }
.cm-agent__btn--primary:hover { filter: brightness(1.08); }
.cm-agent__btn--success { background: var(--success); color: #fff; }
.cm-agent__btn--success:hover { filter: brightness(1.08); }

/* ─── Aba Briefing do Cliente: reusa o chassi do agente ───────────────
   Grid mais largo (config fixa à esquerda, documento à direita) e estilos
   próprios só pro documento gerado (blocos espelhando o onboarding). */
.cm-agent--brief { grid-template-columns: 360px 1fr; }

.cm-brief__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
}
.cm-brief__legend { display: flex; gap: 6px; }
.cm-brief__src {
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.cm-brief__src--call { color: var(--magenta-deep); background: var(--magenta-soft); }

.cm-brief__doc { display: flex; flex-direction: column; gap: var(--s-3); }
.cm-brief__block {
  border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--bg); overflow: hidden;
}
.cm-brief__block-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 600; font-size: var(--t-sm); color: var(--text-1);
}
.cm-brief__block-num {
  width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-bright), var(--magenta)); color: #fff;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; font-family: var(--font-mono);
}
.cm-brief__fields { margin: 0; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.cm-brief__field { display: flex; flex-direction: column; gap: 4px; }
.cm-brief__field-label {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-3);
}
.cm-brief__field-val { font-size: var(--t-sm); color: var(--text-1); line-height: 1.55; }

/* ─── Maxi Drive (aba do modal) ─────────────────────────────────── */

.cm-drive {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.cm-drive__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}

/* Lado esquerdo do header: setas + barra divisória + breadcrumb */
.cm-drive__head-left {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  flex: 1;
}
.cm-drive__divider {
  width: 1px;
  height: 24px;
  background: var(--border-2);
  flex-shrink: 0;
}

/* Setas de histórico (← →) */
.cm-drive__nav {
  display: inline-flex;
  gap: 2px;
}
.cm-drive__nav-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  display: grid; place-items: center;
  color: var(--text-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.cm-drive__nav-btn:hover:not(:disabled) {
  background: rgba(11, 4, 16, 0.08);
  color: var(--text-1);
}
.cm-drive__nav-btn:disabled {
  color: var(--text-4);
  cursor: not-allowed;
}
.cm-drive__nav-btn svg { width: 20px; height: 20px; }

.cm-drive__crumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--t-base);
  color: var(--text-2);
}
.cm-drive__crumb {
  background: transparent;
  border: 0;
  color: var(--text-2);
  padding: 4px 8px;
  border-radius: var(--r-1);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: background .12s, color .12s;
}
.cm-drive__crumb:hover { background: var(--surface-2); color: var(--text-1); }
.cm-drive__crumb.is-current {
  color: var(--text-1);
  font-weight: 600;
  cursor: default;
}
.cm-drive__crumb.is-current:hover { background: transparent; }
.cm-drive__crumb-sep {
  color: var(--text-4);
  font-size: 12px;
}

.cm-drive__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.cm-drive__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--t-sm);
  font-family: var(--font-display);
  border-radius: var(--r-2);
  cursor: pointer;
  border: 1px solid var(--border-2);
  background: var(--bg);
  color: var(--text-1);
  font-weight: 500;
  transition: background .12s, border-color .12s;
}
.cm-drive__actions .btn--ghost:hover { background: var(--surface-2); }
.cm-drive__actions .btn--magenta {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}
.cm-drive__actions .btn--magenta:hover { background: var(--magenta-deep); }

/* Dropdown "+ Novo" (estilo Google Drive) */
.cm-drive__newmenu {
  position: relative;
  display: inline-block;
}
.cm-drive__newmenu-pop {
  position: absolute;
  top: calc(100% + 6px);
  /* Alinha à direita do botão pra que o menu cresça pra esquerda
     (o botão fica no canto direito da toolbar). */
  right: 0;
  left: auto;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  box-shadow: 0 8px 24px -6px rgba(11, 4, 16, 0.20);
  min-width: 240px;
  padding: 6px;
  z-index: 20;
  animation: cm-drive-pop-in .14s ease-out;
}
.cm-drive__newmenu-pop[hidden] { display: none; }

@keyframes cm-drive-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cm-drive__newmenu-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  font-family: var(--font-display);
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.cm-drive__newmenu-item:hover { background: var(--surface-2); }
.cm-drive__newmenu-item .ico {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-2);
}
.cm-drive__newmenu-item .ico svg {
  width: 20px;
  height: 20px;
}
.cm-drive__newmenu-item:hover .ico { color: var(--text-1); }
.cm-drive__newmenu-item .lbl { flex: 1; }

.cm-drive__newmenu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 4px;
}

.cm-drive__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5);
}

/* Grid de itens — cards uniformes, tamanho equilibrado.
   Vale pras PASTAS (sempre horizontais) e pra ARQUIVOS no modo lista. */
.cm-drive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}

/* Variante "cards grandes com preview" — usada só pra arquivos no modo grid */
.cm-drive__grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ─── Modo Lista (tabela densa estilo Google Drive) ────────────── */

.cm-drive__table {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.cm-drive__table-header {
  display: grid;
  grid-template-columns: 1fr 180px 220px 40px;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  font-family: var(--font-display);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.cm-drive__table-row {
  display: grid;
  grid-template-columns: 1fr 180px 220px 40px;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
}
.cm-drive__table-row:hover { background: var(--surface); }
.cm-drive__table-row .col-name {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.cm-drive__table-row .col-name .nm {
  font-size: var(--t-sm);
  color: var(--text-1);
  font-weight: 500;
  font-family: var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cm-drive__table-row .cm-drive__item-icon {
  width: 28px; height: 28px;
}
.cm-drive__table-row .cm-drive__item-icon svg { width: 18px; height: 18px; }
.cm-drive__table-row .cm-drive__item-icon.k-folder svg { width: 24px; height: 24px; }
.cm-drive__table-row .col-modified,
.cm-drive__table-row .col-type {
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.cm-drive__table-row .col-actions {
  display: flex;
  justify-content: flex-end;
}
.cm-drive__table-row .cm-drive__item-menu-btn {
  width: 28px; height: 28px;
}
.cm-drive__table-row .cm-drive__item-menu-btn svg { width: 16px; height: 16px; }

/* Card grande vertical (modo grid) */
.cm-drive__card {
  background: var(--surface-2);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background .12s;
}
.cm-drive__card:hover { background: var(--surface-3); }
.cm-drive__card-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 12px;
  background: var(--surface-2);
}
.cm-drive__card:hover .cm-drive__card-head { background: var(--surface-3); }
.cm-drive__card .cm-drive__item-icon.is-mini {
  width: 24px; height: 24px;
  border-radius: 4px;
}
.cm-drive__card .cm-drive__item-icon.is-mini svg { width: 14px; height: 14px; }
.cm-drive__card-name {
  flex: 1;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-1);
  font-family: var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Cadeado das pastas padrão (protegidas) — Fotos dos Produtos, Banners, etc. */
.cm-drive__lock {
  display: inline-flex; align-items: center; flex-shrink: 0;
  color: var(--text-3); opacity: 0.75; margin-left: 6px;
}
.cm-drive__lock svg { width: 13px; height: 13px; }
.cm-drive__card .cm-drive__item-menu-btn {
  width: 24px; height: 24px;
}
.cm-drive__card .cm-drive__item-menu-btn svg { width: 16px; height: 16px; }

.cm-drive__card-preview {
  flex: 1;
  min-height: 140px;
  background: var(--bg);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* tabuleiro sutil pra indicar transparência em PNGs */
  background-image:
    linear-gradient(45deg, var(--surface) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
}
.cm-drive__card-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.cm-drive__card-preview .cm-drive__item-icon.is-big {
  width: 64px; height: 64px;
  border-radius: 10px;
  background-image: none;
}
.cm-drive__card-preview .cm-drive__item-icon.is-big svg { width: 36px; height: 36px; }

/* ─── Lightbox de imagem (estilo Google Drive) ───────────────────── */

.cm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: rgba(11, 4, 16, 0.94);
  animation: cm-fade-in .15s ease-out;
}
.cm-lightbox[hidden] { display: none; }
.cm-lightbox__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cm-lightbox__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  color: white;
}
.cm-lightbox__icon {
  width: 32px; height: 32px;
  border-radius: 4px;
  background: #EA4335;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cm-lightbox__icon svg { width: 18px; height: 18px; }
.cm-lightbox__name {
  flex: 1;
  font-size: var(--t-base);
  font-weight: 500;
  font-family: var(--font-display);
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.cm-lightbox__actions {
  display: flex;
  gap: 4px;
}
.cm-lightbox__btn {
  background: transparent;
  border: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s;
  text-decoration: none;
}
.cm-lightbox__btn:hover { background: rgba(255, 255, 255, 0.12); }
.cm-lightbox__btn svg { width: 22px; height: 22px; }

.cm-lightbox__stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  overflow: hidden;
}
.cm-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 4px;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
}

.cm-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 3;
  transition: background .12s, opacity .12s;
}
.cm-lightbox__nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.cm-lightbox__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cm-lightbox__nav--prev { left: 24px; }
.cm-lightbox__nav--next { right: 24px; }
.cm-lightbox__nav svg { width: 22px; height: 22px; }

.cm-lightbox__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-family: var(--font-mono);
}
.cm-lightbox__counter {
  position: absolute;
  left: var(--s-5);
}

/* Pill de zoom (centro do footer) */
.cm-lightbox__zoom {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
}
.cm-lightbox__zoom button {
  background: transparent;
  border: 0;
  width: 36px; height: 36px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: background .12s, color .12s;
}
.cm-lightbox__zoom button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  color: white;
}
.cm-lightbox__zoom button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.cm-lightbox__zoom button svg { width: 18px; height: 18px; }

/* Aplica zoom na imagem */
.cm-lightbox__stage {
  /* permite scroll quando zoom > 1 */
  overflow: auto;
}
.cm-lightbox__img {
  transform: scale(var(--lightbox-zoom, 1));
  transition: transform .15s ease-out;
  transform-origin: center;
}
.cm-drive__section-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin: var(--s-3) 0 var(--s-2);
  font-family: var(--font-display);
}
.cm-drive__section-title:first-child { margin-top: 0; }

.cm-drive__item {
  position: relative;
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px var(--s-3);
  cursor: pointer;
  transition: background .12s, border-color .12s;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.cm-drive__item:hover {
  background: var(--surface-3);
}
.cm-drive__item.kind-folder:hover { background: var(--surface-3); }

/* Caixinha do ícone — quadrado arredondado estilo Google Drive moderno.
   A cor de fundo e o SVG são definidos via JS (ICON_LIBRARY no client_modal.js).
   As regras de cor abaixo são FALLBACK pra casos onde o JS ainda não tenha
   pintado (durante carregamento). */
.cm-drive__item-icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 18px;
}
.cm-drive__item-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.cm-drive__item-icon.k-folder {
  background: transparent;
  color: var(--text-1);
}
.cm-drive__item-icon.k-folder svg {
  width: 30px;
  height: 30px;
}

/* Thumbnail para arquivos de imagem */
.cm-drive__item-thumb {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--surface);
  display: grid;
  place-items: center;
}
.cm-drive__item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cm-drive__item-meta {
  min-width: 0;
  flex: 1;
}
.cm-drive__item-name {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-display);
}
.cm-drive__item-sub {
  font-size: 11px;
  color: var(--text-3);
}
.cm-drive__item[contenteditable="true"] { outline: 2px solid var(--magenta); }

/* Botão "⋮" sempre visível à direita do item */
.cm-drive__item-menu-btn {
  background: transparent;
  border: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--text-2);
  flex-shrink: 0;
  transition: background .12s;
}
.cm-drive__item-menu-btn:hover {
  background: rgba(11, 4, 16, 0.08);
  color: var(--text-1);
}
.cm-drive__item-menu-btn svg { width: 18px; height: 18px; }

/* Popover de ações do item (Baixar / Renomear / etc.) — montado em body */
.cm-drive__item-menu {
  position: fixed;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  box-shadow: 0 8px 24px -6px rgba(11, 4, 16, 0.20);
  min-width: 220px;
  padding: 6px;
  z-index: 10000;
  font-family: var(--font-display);
  animation: cm-drive-pop-in .14s ease-out;
}
.cm-drive__item-menu button {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  color: var(--text-1);
  cursor: pointer;
  text-align: left;
}
.cm-drive__item-menu button:hover { background: var(--surface-2); }
.cm-drive__item-menu button .ico {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-2);
  flex-shrink: 0;
}
.cm-drive__item-menu button:hover .ico { color: var(--text-1); }
.cm-drive__item-menu button .ico svg { width: 18px; height: 18px; }
.cm-drive__item-menu button.is-danger { color: var(--danger); }
.cm-drive__item-menu button.is-danger .ico { color: var(--danger); }
.cm-drive__item-menu button.is-danger:hover { background: var(--danger-soft); }
.cm-drive__item-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 4px;
}

.cm-drive__empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-3);
  background: var(--surface);
  border-radius: var(--r-2);
  border: 1px dashed var(--border-2);
}
.cm-drive__empty strong { color: var(--text-1); font-weight: 600; display: block; margin-bottom: 4px; }

/* Mini-modal de "Nova pasta"/"Adicionar link" */
.cm-drive__form {
  position: absolute;
  inset: 0;
  background: rgba(11, 4, 16, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.cm-drive__form[hidden] { display: none; }
.cm-drive__form-card {
  width: 420px;
  max-width: calc(100vw - 80px);
  background: var(--bg);
  border-radius: var(--r-3);
  box-shadow: 0 12px 32px -8px rgba(11, 4, 16, 0.4);
  overflow: hidden;
}
.cm-drive__form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
}
.cm-drive__form-head h3 {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-1);
  font-family: var(--font-display);
}
.cm-drive__form-body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cm-drive__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-sm);
}
.cm-drive__field span {
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.cm-drive__field input,
.cm-drive__field select {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  background: var(--bg);
}
.cm-drive__field input:focus,
.cm-drive__field select:focus {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--magenta-glow);
}
.cm-drive__form-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.cm-drive__form-foot .btn {
  padding: 6px 14px;
  font-size: var(--t-sm);
  font-family: var(--font-display);
  border-radius: var(--r-2);
  cursor: pointer;
  border: 1px solid var(--border-2);
  background: var(--bg);
  color: var(--text-1);
  font-weight: 500;
}
.cm-drive__form-foot .btn--magenta {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}
.cm-drive__form-foot .btn--magenta:hover { background: var(--magenta-deep); }

/* ─── Burndown chart no side panel ───────────────────────────────── */

.cm-side__card--burndown {
  background: linear-gradient(135deg, var(--magenta-soft), var(--bg));
  border-color: var(--magenta-edge);
}

.cm-burndown__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: 2px;
}
.cm-burndown__title {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-1);
  font-family: var(--font-mono);
  margin-bottom: var(--s-2);
  white-space: nowrap;
}
.cm-burndown__sub {
  font-weight: 400;
  font-size: 11px;
  color: var(--text-3);
}

.cm-burndown__chart-wrap {
  position: relative;
  width: 100%;
}
.cm-burndown__svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--font-mono);
}

/* Eixos */
.cm-burndown__svg .axis-label {
  fill: var(--text-3);
  font-size: 9px;
  font-family: var(--font-mono);
}
.cm-burndown__svg .axis-title {
  fill: var(--text-3);
  font-size: 9px;
  font-family: var(--font-mono);
}
.cm-burndown__svg .grid-line {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.cm-burndown__svg .today-line {
  stroke: var(--magenta);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.7;
}
.cm-burndown__svg .today-label {
  fill: var(--magenta);
  font-size: 9px;
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Linha + pontos */
.cm-burndown__svg .real-line {
  fill: none;
  stroke: var(--magenta);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cm-burndown__svg .real-point {
  fill: var(--magenta);
  stroke: var(--bg);
  stroke-width: 2;
  cursor: pointer;
}
.cm-burndown__svg .real-point:hover {
  fill: var(--magenta-hot);
  stroke-width: 3;
}
.cm-burndown__svg .point-label {
  fill: var(--text-1);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  text-anchor: middle;
}

/* Tooltip */
.cm-burndown__tooltip {
  position: absolute;
  background: var(--bg);
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-3);
  font-size: 11px;
  color: var(--text-1);
  pointer-events: none;
  box-shadow: 0 4px 14px -6px rgba(11, 4, 16, 0.25);
  max-width: 240px;
  z-index: 10;
}
.cm-burndown__tooltip strong { color: var(--magenta); }
.cm-burndown__tooltip .tt-sub {
  color: var(--text-3);
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 4px;
  font-size: 10px;
}

/* ═══════════════════════════════════════════════════════════
   Onboarding · Kanban + cards + drawer + modal
   ═══════════════════════════════════════════════════════════ */

.page__head-actions { display: flex; align-items: center; gap: var(--s-3); }

/* ── Layout fixo da página de Onboarding ─────────────────
   A página inteira ocupa exatamente a viewport (não rola).
   Só o body de cada coluna do kanban scrolla — assim o
   header, stats e filtros ficam sempre visíveis. */
/* Sem scroll no body — só nas colunas do kanban. Aplicado pelo JS
   ao montar a página (document.body.classList.add('layout-onboarding')). */
body.layout-onboarding,
body.layout-onboarding html {
  overflow: hidden;
  height: 100vh;
}
body.layout-onboarding .app {
  height: 100vh;
  min-height: 0;
}
/* `.app > main` (filho direto) escopa ao <main> da PÁGINA — sem o `>`,
   o seletor de tag `main` também pegava o <main> interno do modal do
   cliente (.cm-confec__main), quebrando o scroll dele. */
body.layout-onboarding .app > main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* `.page` global tem max-width: 1480px + padding lateral 40px. Pra Onboarding,
   queremos full-bleed (até a borda direita da viewport). */
.page.page--onboarding {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-width: none;
  width: 100%;
  margin: 0;
  /* top 32 · lados 24 · bottom 20 (respiro entre card da tabela e viewport) */
  padding: var(--s-7) var(--s-6) var(--s-5);
}
/* Ícone dentro do .field do filtro — perfeitamente centralizado vertical */
.page--onboarding .field .ico {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.page--onboarding .field select {
  line-height: 36px; /* mesma altura do select pra centralizar o texto */
}
.page--onboarding .toolbar { margin-bottom: var(--s-4); }

/* ═══════════════════════════════════════════════════════════
   Onboarding · Tabela densa
   Acompanhamento passivo do progresso de cada parceiro.
   ═══════════════════════════════════════════════════════════ */

.onb-table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto; /* x + y */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}
/* CSS Grid em vez de <table> — controle 100% previsível com header sticky. */
.onb-table {
  min-width: 1260px;
  font-size: var(--t-sm);
}
.onb-row {
  display: grid;
  /* 8 colunas: parceiro · briefing · etapa · progresso · cs · dev · prazo · criado */
  grid-template-columns: minmax(220px, 1.4fr) 110px minmax(220px, 1.6fr) 140px 120px 120px 130px 90px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background var(--d-2) var(--ease);
}
.onb-row--head {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 2;
  border-bottom: 1px solid var(--border);
}
.onb-row:not(.onb-row--head) { cursor: pointer; }
.onb-row:not(.onb-row--head):hover { background: var(--surface-2); }
.onb-row:last-child { border-bottom: 0; }
.onb-row::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
  transition: background var(--d-2) var(--ease);
}
.onb-row.is-overdue::before { background: var(--danger); }
.onb-row.is-done::before { background: var(--success); }

.onb-th {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
}

.onb-cell {
  padding: var(--s-3) var(--s-4);
  color: var(--text-1);
  min-width: 0; /* permite que filhos com flex/text-overflow encolham */
}
.onb-cell--partner { padding-left: var(--s-5); }

.onb-table__empty {
  padding: var(--s-7);
  text-align: center;
  color: var(--text-3);
  font-size: var(--t-sm);
}

/* Header clicável (ordenação por coluna) */
.onb-th-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  letter-spacing: inherit;
  transition: color var(--d-2) var(--ease);
}
.onb-th-link:hover { color: var(--text-1); }
.onb-th-link:hover .onb-th-arrow--idle { color: var(--text-2); opacity: 1; }
.onb-th-link.is-active { color: var(--magenta); }

/* Seta ativa: chip magenta com flecha sólida (chevUp pra asc, chevDown pra desc) */
.onb-th-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--magenta-soft);
  color: var(--magenta);
  line-height: 0;
  flex-shrink: 0;
}
.onb-th-arrow [data-icon] { display: inline-flex; line-height: 0; }
.onb-th-arrow svg { width: 12px; height: 12px; stroke-width: 2.4; }

/* Estado idle: par de setas (up + down) sobrepostas verticalmente, sem chip */
.onb-th-arrow--idle {
  background: transparent;
  color: var(--text-4);
  opacity: 0.7;
  width: 12px;
  height: 18px;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  transition: color var(--d-2) var(--ease), opacity var(--d-2) var(--ease);
}
.onb-th-arrow--idle .onb-th-arrow__up,
.onb-th-arrow--idle .onb-th-arrow__down {
  display: inline-flex;
  line-height: 0;
  margin: -2px 0;  /* aproxima as duas setas verticalmente */
}
.onb-th-arrow--idle svg { width: 10px; height: 10px; stroke-width: 2; }

/* Cell vazia (CS/Dev não atribuído) */
.onb-cell__owner-empty {
  color: var(--text-4);
  font-size: var(--t-xs);
}

/* Avatar do owner um pouquinho menor pra caber em 120px col */
.onb-cell--owner .av {
  width: 22px; height: 22px;
  font-size: 9px;
}
.onb-cell__owner-name {
  font-size: var(--t-xs);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Toolbar com muitos filtros: permite quebrar em mais de uma linha */
.onb-toolbar { flex-wrap: wrap; row-gap: var(--s-2); }
.onb-toolbar .field select { min-width: 140px; }
/* Seta dos selects da toolbar — centralizada vertical + ícone com
   `display:grid; place-items:center` (sem isso o SVG pode ficar offset). */
.onb-toolbar .field .chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: var(--text-3);
  pointer-events: none;
}
.onb-toolbar .field .chev svg { display: block; }
.onb-toolbar .field .ico {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

/* Mini-título no modal pra separar bloco "Equipe" do resto */
.onb-form__team-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta-deep);
  font-weight: 700;
  padding: var(--s-3) 0 var(--s-1);
  border-top: 1px solid var(--border);
  margin-top: var(--s-2);
}

/* ── Coluna Parceiro ─────────────────────────────────────── */
.onb-cell__partner-name {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.2;
}
.onb-cell__partner-contact {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin: 2px 0 6px;
}

/* ── Coluna Etapa atual ──────────────────────────────────── */
.onb-cell__step-label {
  display: inline-block;
  font-size: var(--t-sm);
  color: var(--text-1);
  line-height: 1.4;
  max-width: 100%;
  word-break: break-word;
}
.onb-cell__step-label.is-done {
  color: var(--success);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Força o span do data-icon a se comportar como inline-flex pra o SVG do
   check ficar perfeitamente centralizado com o texto (sem baseline weird). */
.onb-cell__step-label.is-done [data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  flex-shrink: 0;
}
.onb-cell__step-label.is-done svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
  display: block;
}

/* ── Coluna Progresso ───────────────────────────────────── */
.onb-cell__progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: 4px;
}
.onb-cell__progress-pct {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-1);
}
.onb-cell__progress-frac {
  font-size: var(--t-xs);
  color: var(--text-3);
}
.onb-cell__progress-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.onb-cell__progress-bar > i {
  display: block;
  height: 100%;
  background: var(--magenta);
  border-radius: 999px;
  transition: width var(--d-3) var(--ease);
}
.onb-row.is-overdue .onb-cell__progress-bar > i { background: var(--danger); }
.onb-row.is-done .onb-cell__progress-bar > i { background: var(--success); }

/* ── Coluna Gestor ──────────────────────────────────────── */
.onb-cell__owner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.onb-cell__owner .av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.onb-cell__owner-name {
  font-size: var(--t-xs);
  color: var(--text-2);
}

/* ── Colunas Prazo + Criado ─────────────────────────────── */
.onb-cell__deadline {
  font-size: var(--t-sm);
  color: var(--text-1);
  font-weight: 500;
}
.onb-cell__deadline-sub {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.onb-cell__deadline-sub.is-overdue {
  color: var(--danger);
  font-weight: 600;
}
.onb-cell--created {
  font-size: var(--t-sm);
  color: var(--text-3);
}

/* ── Pills usados nas células da tabela ─────────────────── */
/* As classes abaixo (`.onb-card__whatsapp*` e `.onb-card__briefing*`)
   carregam o prefixo `card` da era Kanban — foram preservadas porque
   ainda estão em uso em `partials/onboarding_row.html`. */

/* WhatsApp pill — estilo "call-to-chat" verde da referência */
.onb-card__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 12px;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.30);
  border-radius: var(--r-pill);
  color: #16A34A;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--d-2) var(--ease);
  width: fit-content;
  cursor: pointer;
  margin-top: -2px;
}
.onb-card__whatsapp:hover {
  background: rgba(37, 211, 102, 0.14);
  border-color: rgba(37, 211, 102, 0.45);
  color: #15803D;
}
.onb-card__whatsapp-icon {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: #25D366; /* WhatsApp brand green */
}
.onb-card__whatsapp-text { font-size: 11.5px; }

/* Briefing pill — variante mais destacada que .badge (font-weight + size) */
.onb-card__briefing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.onb-card__briefing.is-ok {
  background: var(--success-soft);
  color: #096B43;
  border-color: var(--success-edge);
}
.onb-card__briefing.is-pending {
  background: var(--warning-soft);
  color: var(--warning);
  border-color: var(--warning-edge);
}
.onb-card__briefing .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Drawer largo (overrides do .drawer original) ──────── */
.drawer--wide {
  width: 560px;
  max-width: 96vw;
}

.onb-drawer__title { flex: 1; min-width: 0; }
.onb-drawer__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xl);
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.onb-drawer__sub {
  font-size: var(--t-sm);
  color: var(--text-3);
  margin-top: 2px;
}

.onb-drawer__sec { margin-bottom: var(--s-5); }
.onb-drawer__sec .field { margin-top: var(--s-2); }
.onb-drawer__label,
.onb-drawer__title-sec {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 var(--s-2);
}

.onb-drawer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.onb-drawer__progress-line {
  display: flex; align-items: baseline; gap: var(--s-2);
  margin-bottom: 6px;
}
.onb-drawer__progress-pct {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--text-1);
}
.onb-drawer__progress-bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.onb-drawer__progress-fill {
  height: 100%;
  background: var(--magenta);
  border-radius: 999px;
  transition: width var(--d-3) var(--ease);
}
.onb-drawer__target {
  font-size: var(--t-lg);
  color: var(--text-1);
  font-weight: 500;
}
.onb-drawer__target-sub {
  font-size: var(--t-xs);
  margin-top: 2px;
}
/* Prazo manual do onboarding — lápis + editor inline (admin) */
.onb-drawer__prazo-edit { background: none; border: 0; cursor: pointer; color: var(--text-3); padding: 0 0 0 5px; line-height: 0; vertical-align: middle; }
.onb-drawer__prazo-edit:hover { color: var(--magenta); }
.onb-drawer__prazo-edit svg { width: 13px; height: 13px; }
.onb-drawer__prazo-editor { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.onb-drawer__prazo-editor[hidden] { display: none; }  /* hidden vence o display:flex */
.onb-drawer__prazo-input { width: 100%; padding: 6px 8px 6px 4px; border: 1px solid var(--border); border-radius: var(--r-2); font: inherit; color: var(--text-1); background: var(--surface); }
.onb-drawer__prazo-row { display: flex; gap: 8px; align-items: center; }
.onb-drawer__prazo-save { padding: 5px 14px; font-size: var(--t-xs); }
.onb-drawer__prazo-cancel { background: none; border: 0; color: var(--text-3); font-size: var(--t-xs); cursor: pointer; }
.onb-drawer__prazo-cancel:hover { color: var(--text-1); }

/* ── Lista de tarefas no drawer ────────────────────────── */
.onb-tasks { display: flex; flex-direction: column; gap: var(--s-2); }
.onb-task {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  transition: all var(--d-2) var(--ease);
}
.onb-task__main {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.onb-task.is-done {
  background: var(--success-soft);
  border-color: var(--success-edge);
}
.onb-task__check {
  width: 22px; height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  background: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
  color: #fff;
  padding: 0;
  line-height: 0;
}
.onb-task__check:not(.onb-task__check--readonly):hover {
  border-color: var(--magenta);
  background: var(--magenta-soft);
}
.onb-task__check:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}
/* O span data-icon=check vira inline-flex pra o SVG ficar centralizado no
   círculo (sem o tamanho do whitespace de span inline desalinhar). */
.onb-task__check [data-icon],
.onb-task__check svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.onb-task__check svg { width: 12px; height: 12px; }
.onb-task__check:hover { border-color: var(--magenta); }
.onb-task__check--readonly {
  cursor: default;
}
.onb-task__check--readonly:hover {
  border-color: var(--border-2);
}
.onb-task.is-done .onb-task__check {
  background: var(--success);
  border-color: var(--success);
}
.onb-tasks--readonly .onb-task {
  cursor: default;
}
.onb-task__body { flex: 1; min-width: 0; }
.onb-task__title {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.35;
}
.onb-task.is-done .onb-task__title {
  color: var(--text-3);
  text-decoration: line-through;
}
.onb-task__desc {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Link público do cliente (topo do drawer) ────────── */
.onb-public-link {
  background: var(--magenta-soft);
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-2);
  padding: var(--s-3);
  margin-bottom: var(--s-5);
}
.onb-public-link__row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.onb-public-link__url {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-1);
  font-size: 11.5px;
  color: var(--magenta-deep);
  outline: none;
  text-overflow: ellipsis;
}
.onb-public-link__url:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(228, 13, 219, 0.18);
}
.onb-public-link__btn {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-1);
  background: var(--surface);
  color: var(--magenta-deep);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  text-decoration: none;
  transition: all var(--d-2) var(--ease);
  flex-shrink: 0;
}
.onb-public-link__btn:hover {
  background: var(--magenta);
  color: #fff;
  border-color: var(--magenta);
}
.onb-public-link__btn.is-ok {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.onb-public-link__hint {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--magenta-deep);
  font-style: italic;
}

/* ── Variante do .field pro drawer (column estreita) ──── */
/* O drawer tem 560px e o team-grid é 1fr 1fr, então cada select fica em ~250px.
   O .field default tem `min-width: 180px` no select — em colunas estreitas
   isso fica ok, mas o min-width pode forçar overflow em zoom alto. `.field--inset`
   força o select a respeitar o container e mantém a seta colada na borda. */
.field--inset .field,
.field.field--inset { min-width: 0; width: 100%; }
.field.field--inset select {
  min-width: 0;
  width: 100%;
}

/* ── Equipe (CS + Dev no drawer) ──────────────────────── */
.onb-drawer__team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.onb-drawer__team-mini {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 4px;
}
.onb-drawer__sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-2);
}
.onb-drawer__sec-head .onb-drawer__title-sec { margin: 0; }

/* ── Dados do parceiro ─────────────────────────────────── */
.onb-drawer__data {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-2) var(--s-4);
}
.onb-data__row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--t-sm);
  align-items: center;
}
.onb-data__row:last-child { border-bottom: 0; }
.onb-data__label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.onb-data__val { color: var(--text-1); word-break: break-word; }
.onb-data__val a,
.onb-data__link { color: var(--magenta-deep); text-decoration: underline; }
.onb-data__copy {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-1);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-3);
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
  padding: 0;
  line-height: 0;
}
.onb-data__copy:hover {
  color: var(--magenta);
  border-color: var(--magenta-edge);
  background: var(--magenta-soft);
}
.onb-data__copy.is-ok {
  color: var(--success);
  border-color: var(--success-edge);
  background: var(--success-soft);
}

/* ── Botão "Editar" no cabeçalho de Dados do Parceiro ── */
.onb-data__edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
  line-height: 1;
}
.onb-data__edit-toggle:hover {
  color: var(--magenta);
  border-color: var(--magenta-edge);
  background: var(--magenta-soft);
}
.onb-data__edit-toggle.is-active {
  color: var(--text-2);
  background: var(--bg-2);
  border-color: var(--border-2);
}
.onb-data__edit-toggle [data-icon] {
  display: inline-flex;
  line-height: 0;
}

/* ── Form de edição dos dados do parceiro ────────────── */
.onb-data-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.onb-data-form__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onb-data-form__label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.onb-data-form input,
.onb-data-form textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  font-family: inherit;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.onb-data-form input { height: 36px; }
.onb-data-form textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.4;
}
.onb-data-form input:focus,
.onb-data-form textarea:focus {
  border-color: var(--magenta-edge);
  box-shadow: 0 0 0 3px var(--magenta-soft);
}
.onb-data-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* ── Comentários — Chat ───────────────────────────────── */
.onb-chat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  max-height: 360px;
  overflow-y: auto;
}
.onb-chat__empty {
  font-size: var(--t-xs);
  color: var(--text-4);
  padding: var(--s-4);
  text-align: center;
  font-style: italic;
}

.onb-msg {
  display: flex;
  max-width: 86%;
  align-self: flex-start;
}
.onb-msg--mine {
  align-self: flex-end;
  justify-content: flex-end;
}
.onb-msg__bubble {
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  min-width: 0;
  flex: 1;
}
.onb-msg--mine .onb-msg__bubble {
  background: var(--magenta-soft);
  border-color: var(--magenta-edge);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 4px;
}
.onb-msg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: 4px;
}
.onb-msg__author {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.01em;
}
.onb-msg--mine .onb-msg__author { color: var(--magenta-deep); }
.onb-msg__actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--d-2) var(--ease);
}
.onb-msg:hover .onb-msg__actions { opacity: 1; }
.onb-msg__icon {
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  transition: all var(--d-2) var(--ease);
}
.onb-msg__icon:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-1);
}
.onb-msg__icon--danger:hover { color: var(--danger); }
.onb-msg__body {
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.onb-msg--mine .onb-msg__body { color: var(--text-1); }

/* ── Citação (mensagem-pai) dentro da bolha — estilo WhatsApp ── */
.onb-msg__quote {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px var(--s-2);
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.04);
  border: 0;
  border-left: 3px solid var(--magenta);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--d-2) var(--ease);
}
.onb-msg__quote:hover { background: rgba(0, 0, 0, 0.08); }
.onb-msg__quote-author {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--magenta-deep);
  margin-bottom: 2px;
}
.onb-msg__quote-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.35;
}
.onb-msg--mine .onb-msg__quote {
  background: rgba(255, 255, 255, 0.4);
}
.onb-msg--mine .onb-msg__quote:hover {
  background: rgba(255, 255, 255, 0.65);
}

/* Flash quando clica numa citação pra "ir até" a mensagem original */
@keyframes onb-msg-flash {
  0%   { box-shadow: 0 0 0 0 rgba(228, 13, 219, 0.55); }
  50%  { box-shadow: 0 0 0 6px rgba(228, 13, 219, 0.30); }
  100% { box-shadow: 0 0 0 0 rgba(228, 13, 219, 0); }
}
.onb-msg--flash .onb-msg__bubble {
  animation: onb-msg-flash 1.2s ease-out;
}

/* Banner "Respondendo a X" acima do input do chat */
.onb-chat-reply-banner {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  background: var(--magenta-soft);
  border: 1px solid var(--magenta-edge);
  border-left: 3px solid var(--magenta);
  border-radius: var(--r-2);
}
/* IMPORTANTE: o `display: flex` acima sobrescreve o `[hidden]` do
   user-agent (mesma especificidade). Sem este override o banner vazio
   aparece como uma barra rosa fantasma. */
.onb-chat-reply-banner[hidden] { display: none; }
.onb-chat-reply-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.onb-chat-reply-banner__label {
  font-size: 11px;
  color: var(--magenta-deep);
}
.onb-chat-reply-banner__text {
  font-size: var(--t-sm);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onb-chat-reply-banner__close {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--magenta-deep);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
  transition: background var(--d-2) var(--ease);
}
.onb-chat-reply-banner__close:hover {
  background: rgba(228, 13, 219, 0.18);
}

/* Compose: input + botão de enviar (estilo WhatsApp). Usado no drawer
   da demanda (e replicável em qualquer chat). */
.onb-chat__compose {
  margin-top: var(--s-3);
  display: flex; flex-direction: column;
  gap: 8px;
}
.onb-chat__input-row {
  display: flex; align-items: flex-end;
  gap: 8px;
}
.onb-chat__input {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 140px;
  padding: 10px 12px;
  font-family: var(--font-display);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-1);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  outline: none;
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.onb-chat__input:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(228, 13, 219, 0.12);
}
.onb-chat__send {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--magenta);
  color: #fff;
  border: 0;
  border-radius: var(--r-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--d-2) var(--ease), transform var(--d-1) var(--ease);
}
.onb-chat__send:hover { background: var(--magenta-deep); transform: translateY(-1px); }
.onb-chat__send [data-icon] svg { width: 16px; height: 16px; }
.onb-msg__meta {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 4px;
  text-align: right;
}
.onb-msg__edited {
  margin-left: 4px;
  font-style: italic;
}

.onb-msg--editing .onb-msg__bubble { padding: var(--s-2); }
.onb-msg__edit-input {
  width: 100%;
  min-height: 60px;
  padding: var(--s-2);
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--text-1);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  resize: vertical;
  outline: none;
}
.onb-msg__edit-input:focus {
  border-color: var(--magenta-edge);
  box-shadow: 0 0 0 3px var(--magenta-soft);
}
.onb-msg__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.onb-msg__btn {
  height: 28px;
  padding: 0 var(--s-3);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-1);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-2);
  cursor: pointer;
}
.onb-msg__btn:hover { background: var(--surface); }
.onb-msg__btn--primary {
  background: var(--magenta);
  color: #fff;
  border-color: var(--magenta);
}
.onb-msg__btn--primary:hover {
  background: var(--magenta-hot);
}

.onb-chat-form {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  transition: all var(--d-2) var(--ease);
}
.onb-chat-form:focus-within {
  border-color: var(--magenta-edge);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}
.onb-chat-form input {
  flex: 1;
  min-width: 0;
  height: 32px;
  padding: 0 var(--s-2);
  background: transparent;
  border: 0;
  font-size: var(--t-sm);
  font-family: inherit;
  color: var(--text-1);
  outline: none;
}
.onb-chat-form__attach,
.onb-chat-form__send {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
  transition: all var(--d-2) var(--ease);
}
.onb-chat-form__attach:hover {
  background: var(--bg-2);
  color: var(--text-1);
}
.onb-chat-form__send {
  background: var(--magenta);
  color: #fff;
}
.onb-chat-form__send:hover { background: var(--magenta-hot); }

.onb-drawer__danger {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}

/* ── Modal "Novo Parceiro" — modal--wide override ──────── */
.modal--wide { width: min(720px, 96vw); padding: 0; }
.modal--wide .modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s-6) var(--s-6) var(--s-3);
  border-bottom: 1px solid var(--border);
}
.modal--wide .modal__crumb {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-top: 2px;
}
.modal--wide .modal__crumb .slash { color: var(--text-4); margin: 0 4px; }
.modal--wide .modal__body { padding: var(--s-6); }
.modal--wide .modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  margin-top: var(--s-5);
}

.onb-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.onb-form__grid .field-group--full { grid-column: 1 / -1; }
.onb-form__label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.field-group input,
.field-group select,
.field-group textarea {
  width: 100%;
  height: 38px;
  padding: 0 var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  font-family: inherit;
  color: var(--text-1);
}
.field-group textarea {
  height: auto;
  padding: var(--s-2) var(--s-3);
  resize: vertical;
  min-height: 72px;
}
.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus {
  outline: none;
  border-color: var(--magenta-edge);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}

.onb-form__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--magenta-soft);
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-2);
  font-size: var(--t-xs);
  color: var(--magenta-deep);
  line-height: 1.5;
}
.onb-form__hint b { color: var(--magenta); }

/* ── Responsivo: empilha colunas em telas muito estreitas ───── */
@media (max-width: 900px) {
  .onb-form__grid { grid-template-columns: 1fr; }
  .onb-drawer__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   Onboarding público — Fase 2 (link do cliente)
   Fundo branco · cards em cinza claro · headers em surface-2
   ═══════════════════════════════════════════════════════════ */

body.layout-onb-public {
  background: var(--bg);
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body, var(--font-display));
}

/* ── Chrome topbar ─────────────────────────────────────── */
.ob-chrome {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  z-index: 20;
}
.ob-chrome__in {
  max-width: 1240px;
  margin: 0 auto;
  height: 64px;
  padding: 0 var(--s-7);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.ob-chrome__logo { height: 26px; width: auto; display: block; }
.ob-chrome__crumb {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  padding-left: var(--s-5);
  border-left: 1px solid var(--border-2);
  display: flex; align-items: center; gap: 8px;
}
.ob-chrome__crumb .slash { color: var(--text-4); }
.ob-chrome__crumb b { color: var(--text-1); font-weight: 500; }
.ob-chrome__right { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); }
.ob-saving {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}
.ob-saving .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(15,169,104,0.18);
}

/* ── Shell ─────────────────────────────────────────────── */
.ob {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-7) 140px;
}
/* Etapa 1 (Bem-Vindo) — hero page sem form: centraliza verticalmente
   entre o chrome topbar (64px) e o footer fixed (~80px) pra não ficar
   colado no topo. Aplicado só via classe pq as outras etapas têm form
   alto que precisa começar no topo pro scroll natural.
   Zera padding (top 32 / bottom 140 do .ob base) e a margin-bottom do
   .ob-hero — esses valores enviesavam o centro pra cima. */
.ob.ob--centered {
  min-height: calc(100vh - 64px - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.ob.ob--centered .ob-hero { margin-bottom: 0; }

/* ── Hero ──────────────────────────────────────────────── */
.ob-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-9);
  align-items: center;
  margin-bottom: var(--s-9);
}
.ob-hero--compact {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;  /* sobrescreve o gap do .ob-hero (que é grid 2-col da etapa 1) */
  max-width: 760px; margin-bottom: var(--s-6);
}
.ob-hero--compact .ob-hero__logo { margin-bottom: var(--s-4); }
.ob-hero--compact .ob-hero__title {
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
}
.ob-hero--compact .ob-hero__lede { margin-top: var(--s-4); }
.ob-hero--compact .ob-minirail { margin-top: var(--s-5); }
.ob-hero--center {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 760px; margin: 0 auto var(--s-9);
}
.ob-hero__left { display: flex; flex-direction: column; padding-top: var(--s-3); }
.ob-hero__logo {
  height: 32px;
  width: auto;
  display: block;
  align-self: flex-start;
  margin-bottom: var(--s-7);
}
.ob-hero__title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(40px, 4.6vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  color: var(--text-1);
}
.ob-hero__title span { color: var(--magenta); font-style: italic; font-weight: 300; }
.ob-hero__lede {
  margin-top: var(--s-5);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 620px;
}
.ob-hero__lede b { color: var(--text-1); font-weight: 500; }

/* ── Mini-rail ─────────────────────────────────────────── */
.ob-minirail {
  margin-top: var(--s-7);
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 620px;
}
.ob-minirail__top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
}
.ob-minirail__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ob-minirail__label b { color: var(--text-1); font-weight: 600; }
.ob-minirail__pct {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--magenta);
  letter-spacing: -0.02em;
}
.ob-minirail--done .ob-minirail__pct,
.ob-minirail--done .ob-minirail__label b { color: var(--success); }
.ob-minirail__bar {
  height: 4px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.ob-minirail__fill {
  height: 100%;
  background: linear-gradient(90deg, #B12BFF 0%, #E40DDB 100%);
  border-radius: 999px;
}
.ob-minirail--done .ob-minirail__fill { background: var(--success); }
.ob-minirail__dots {
  display: flex; gap: var(--s-5);
  flex-wrap: wrap; margin-top: 2px;
  justify-content: center;
}
.ob-hero__left .ob-minirail__dots,
.ob-hero--compact .ob-minirail__dots { justify-content: flex-start; }
.ob-minirail__dot {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-3);
}
.ob-minirail__dot .mark {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--text-3);
  font-weight: 500;
  flex-shrink: 0;
}
.ob-minirail__dot.is-done { color: var(--text-1); font-weight: 500; }
.ob-minirail__dot.is-done .mark {
  background: var(--success); border-color: var(--success); color: #fff;
}
.ob-minirail__dot.is-current { color: var(--text-1); font-weight: 600; }
.ob-minirail__dot.is-current .mark {
  background: var(--magenta); border-color: var(--magenta); color: #fff;
  box-shadow: 0 0 0 4px var(--magenta-soft);
}

/* ── Card genérico (cinza claro) ───────────────────────── */
.ob-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: 0 1px 2px rgba(11,4,16,0.04);
}

/* ── Vídeo de boas-vindas (etapa 1) ────────────────────── */
.ob-video {
  background: #0B0410;
  border: 0; border-radius: var(--r-4);
  padding: 0; overflow: hidden;
  box-shadow: 0 24px 60px rgba(11,4,16,0.14), 0 4px 12px rgba(11,4,16,0.05);
  width: 100%; max-width: 320px;
  margin-left: auto; justify-self: end;
}
.ob-video__frame {
  position: relative;
  /* 9/16 = portrait/reel. Em 320px wide isso vira ~569px de altura, que
     cabe na área útil entre chrome (64) e footer (80) em viewport ≥720px.
     O `.ob.ob--centered` resolve o centro vertical zerando os paddings
     assimétricos do .ob base. */
  aspect-ratio: 9/16;
  background:
    radial-gradient(circle at 78% 18%, rgba(228,13,219,0.45), transparent 50%),
    radial-gradient(circle at 18% 82%, rgba(177,43,255,0.32), transparent 55%),
    #0B0410;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-5);
}
.ob-video__glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(228,13,219,0.10), transparent 65%);
  pointer-events: none;
}
.ob-video__meta {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}
.ob-video__tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}
.ob-video__tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 10px var(--magenta);
}
.ob-video__dur {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.ob-video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer; border: 0;
  box-shadow:
    0 0 0 10px rgba(228,13,219,0.14),
    0 24px 48px rgba(228,13,219,0.40);
  transition: transform var(--d-2) var(--ease);
  z-index: 3;
}
.ob-video__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.ob-video__play svg { margin-left: 4px; }
.ob-video__caption {
  position: relative;
  color: #fff;
  display: flex; flex-direction: column; gap: 4px;
}
.ob-video__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.ob-video__sub {
  font-size: 12.5px; line-height: 1.45;
  color: rgba(255,255,255,0.62);
}
.ob-video__placeholder {
  position: absolute;
  right: var(--s-3); bottom: var(--s-3);
  padding: 3px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  pointer-events: none;
}

/* ── Form genérico (etapas 2 e 3) ──────────────────────── */
.ob-form {
  display: flex; flex-direction: column;
  gap: var(--s-5); max-width: 920px;
}
.ob-form--briefing {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-9);
  align-items: start;
  max-width: 1040px;
}

.ob-fsection {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: 0 1px 2px rgba(11,4,16,0.04);
  overflow: hidden;
  scroll-margin-top: var(--s-7);
}
.ob-fsection__head {
  padding: var(--s-6) var(--s-7) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.ob-fsection__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 600;
  display: block;
  margin-bottom: var(--s-3);
}
.ob-fsection__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0;
}
.ob-fsection__desc {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  max-width: 540px;
}
.ob-fsection__body {
  padding: var(--s-6) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.ob-fsection--split .ob-fsection__body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-6);
  align-items: center;
}

/* ── Platform picker (etapa 2) ─────────────────────────── */
.ob-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  padding: var(--s-6) var(--s-7);
}
.ob-pf {
  position: relative;
  display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-3);
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
  text-align: left;
}
.ob-pf:hover { border-color: var(--text-3); background: var(--surface); }
.ob-pf__icon {
  /* 44x44 fixo pra todos (logo PNG, SVG inline ou char) — garante que os
     nomes "Shopify / Nuvemshop / Outra" caem na mesma linha base. */
  width: 44px; height: 44px;
  border-radius: var(--r-2);
  background: var(--surface-3);
  color: var(--text-1);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600;
  flex-shrink: 0;
}
/* `.ob-pf__icon--logo` renderiza uma SVG própria da marca, sem o square
   magenta-soft padrão. Double-class na specificity pra vencer a regra
   `.ob-pf.is-selected .ob-pf__icon { background: var(--magenta) }`. */
.ob-pf__icon.ob-pf__icon--logo,
.ob-pf.is-selected .ob-pf__icon.ob-pf__icon--logo {
  background: transparent;
  padding: 0;
}
.ob-pf__icon-img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
/* Nuvemshop tem aspect ratio horizontal (~1.4:1), então ao caber em 44x44
   a altura visível fica ~32px. Boost suave pra altura ficar mais próxima
   da sacola Shopify (~44px) sem estourar a largura do card. */
.ob-pf[data-platform="nuvemshop"] .ob-pf__icon-img {
  transform: scale(1.2);
  transform-origin: center;
}
.ob-pf__name { font-size: 14px; font-weight: 500; color: var(--text-1); }
/* SVG inline pra "Outra" (carrinho de compras genérico) — fica
   centralizado no box cinza 44x44, em escala compatível com as logos
   PNG das outras plataformas. */
.ob-pf__icon-svg {
  display: grid; place-items: center;
  width: 24px; height: 24px;
}
.ob-pf__icon-svg svg { width: 100%; height: 100%; }
.ob-pf__check {
  position: absolute;
  top: 12px; right: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  display: none; place-items: center;
  box-shadow: 0 4px 12px rgba(228,13,219,0.32);
}
.ob-pf.is-selected {
  border-color: var(--magenta);
  background: var(--magenta-soft);
  box-shadow: 0 0 0 4px rgba(228,13,219,0.08);
}
.ob-pf.is-selected .ob-pf__icon { background: var(--magenta); color: #fff; }
.ob-pf.is-selected .ob-pf__check { display: grid; }
.ob-pf.is-selected .ob-pf__name { color: var(--magenta-deep); }

/* ── Campos do form ────────────────────────────────────── */
.ob-field { display: flex; flex-direction: column; gap: 6px; }
/* IMPORTANTE: o `display: flex` acima sobrescreve `[hidden] { display: none }`
   do user-agent. Sem este override, conditional_on não esconde o field. */
.ob-field[hidden] { display: none; }
.ob-field > label {
  font-size: 13.5px;
  color: var(--text-1);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ob-field .req { color: var(--magenta); font-weight: 600; }
.ob-field .opt { color: var(--text-4); font-weight: 400; font-size: 12.5px; margin-left: 4px; }
.ob-field input[type="text"],
.ob-field input[type="url"],
.ob-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.ob-field input::placeholder,
.ob-field textarea::placeholder { color: var(--text-4); }
.ob-field input:focus,
.ob-field textarea:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}
.ob-field textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.ob-field textarea.is-large { min-height: 110px; }
/* Hint vem DEPOIS do input (label → input → hint). Margem negativa
   "puxa" ele pra perto do input — quase grudado, pra que o texto
   explicativo fique no contexto direto do campo que descreve. */
.ob-field__hint {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: -4px;
}
.ob-credentials-fields {
  display: flex; flex-direction: column; gap: var(--s-5);
}

/* ── Briefing v2: novos tipos de field ─────────────────── */
/* Label do field: título + (req|opt) + link de tutorial à direita */
.ob-field__label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--text-1);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ob-field__label > span { flex: 1; }
.ob-field__tutorial {
  font-size: 12px;
  color: var(--magenta);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
}
.ob-field__tutorial:hover { text-decoration: underline; }

/* Inputs base usam classes específicas pra evitar conflito com .ob-field input */
.ob-field__input,
.ob-field__textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-1);
  outline: none;
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.ob-field__textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.ob-field__input:focus,
.ob-field__textarea:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}

/* Grupos de opções (checkbox + radio + radio_text) */
.ob-options {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 2px;
}
.ob-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
  font-size: 14px;
  color: var(--text-1);
}
.ob-option:hover { border-color: var(--magenta-edge); }
.ob-option input[type="checkbox"],
.ob-option input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--magenta);
  flex-shrink: 0;
  cursor: pointer;
}
.ob-option__label { flex: 1; line-height: 1.35; }
.ob-option:has(input:checked) {
  border-color: var(--magenta);
  background: var(--magenta-soft);
}

/* Variante "Outro" do checkbox — input inline */
.ob-option--other { gap: 8px; }
.ob-option--other .ob-option__label { flex: 0 0 auto; }
.ob-option__other-input {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--border-2);
  padding: 2px 4px;
  font-size: 14px;
  color: var(--text-1);
  outline: none;
  font-family: inherit;
}
.ob-option__other-input:focus { border-bottom-color: var(--magenta); }
.ob-option__other-input:disabled { color: var(--text-4); }

/* Textarea complementar do radio_text — aparece após escolher opção que pede extra */
.ob-option__extra {
  width: 100%;
  background: var(--bg-2);
  border: 1.5px solid var(--magenta-edge);
  border-radius: var(--r-2);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-1);
  margin-top: 4px;
  min-height: 70px;
  resize: vertical;
  outline: none;
  line-height: 1.5;
}
.ob-option__extra:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}

/* Input de texto complementar (text/email) — usado em "Garantia de ___" e similares */
.ob-option__extra-input {
  width: 100%;
  background: var(--bg-2);
  border: 1.5px solid var(--magenta-edge);
  border-radius: var(--r-2);
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-1);
  margin-top: 4px;
  outline: none;
}
.ob-option__extra-input:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}

/* Wrapper do extra (apenas espaço/posicionamento) */
.ob-options__extra-wrap {
  margin-top: 4px;
}

/* Upload zone — botão "+ Anexar arquivos" + lista de chips */
.ob-option__file-zone {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1.5px dashed var(--magenta-edge);
  border-radius: var(--r-2);
}
.ob-option__file-btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  padding: 8px 14px;
  background: var(--magenta-soft);
  border: 1.5px solid var(--magenta-edge);
  border-radius: var(--r-2);
  color: var(--magenta-deep);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
}
.ob-option__file-btn:hover {
  background: var(--magenta);
  color: #fff;
  border-color: var(--magenta);
}
.ob-option__file-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ob-option__file-list:empty { display: none; }

.ob-file-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  color: var(--text-1);
  max-width: 100%;
}
.ob-file-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}
.ob-file-chip__del {
  background: transparent;
  border: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  color: var(--text-3);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--d-2) var(--ease);
}
.ob-file-chip__del:hover {
  background: var(--danger);
  color: #fff;
}

/* Repeater (categorias, subcategorias, produtos) */
.ob-repeater {
  display: flex; flex-direction: column; gap: 12px;
}
.ob-repeater__list {
  display: flex; flex-direction: column; gap: 10px;
}
/* Quando a lista não tem nenhum item, esconde o slot pra o botão
   "+ Adicionar" ficar grudado no label. Usa `:not(:has(item))` em vez
   de `:empty` porque o template literal injeta whitespace (newlines)
   no innerHTML, derrotando o `:empty`. */
.ob-repeater__list:not(:has(.ob-repeater__item)) { display: none; }
.ob-repeater__item {
  background: var(--bg-2);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ob-repeater__item-head {
  display: flex; justify-content: space-between; align-items: center;
}
.ob-repeater__item-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ob-repeater__item-del {
  background: transparent;
  border: 1.5px solid var(--border-2);
  color: var(--text-3);
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--d-2) var(--ease);
}
.ob-repeater__item-del:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.ob-repeater__item-body {
  display: flex; flex-direction: column; gap: 10px;
}
.ob-repeater__sub {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12.5px;
  color: var(--text-2);
}
.ob-repeater__sub > span {
  font-weight: 500;
  color: var(--text-1);
}
.ob-repeater__sub input,
.ob-repeater__sub textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-1);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text-1);
  outline: none;
}
.ob-repeater__sub textarea { min-height: 60px; resize: vertical; }
.ob-repeater__sub input:focus,
.ob-repeater__sub textarea:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px var(--magenta-soft);
}
.ob-repeater__add {
  align-self: flex-start;
  background: transparent;
  border: 1.5px dashed var(--magenta-edge);
  color: var(--magenta-deep);
  border-radius: var(--r-2);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--d-2) var(--ease);
}
.ob-repeater__add:hover {
  background: var(--magenta-soft);
  border-style: solid;
}

/* Variante "product" — grid 2 colunas pros sub-fields curtos */
.ob-repeater--product .ob-repeater__item-body {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ob-repeater--product .ob-repeater__sub:nth-child(2),
.ob-repeater--product .ob-repeater__sub:last-child {
  grid-column: 1 / -1;
}

/* ── Tutorial vídeo (lateral nas credenciais) ──────────── */
.ob-helpvid {
  background: #0B0410;
  border-radius: var(--r-3);
  overflow: hidden;
  position: relative;
  box-shadow: 0 14px 32px rgba(11,4,16,0.14);
}
.ob-helpvid__frame {
  position: relative;
  aspect-ratio: 4/3;
  background:
    radial-gradient(circle at 78% 20%, rgba(228,13,219,0.35), transparent 50%),
    radial-gradient(circle at 18% 82%, rgba(177,43,255,0.28), transparent 55%),
    #0B0410;
  padding: var(--s-4);
  display: flex; flex-direction: column; justify-content: space-between;
}
.ob-helpvid__meta { position: relative; display: flex; align-items: center; }
.ob-helpvid__tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  font-weight: 500;
}
.ob-helpvid__tag .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 8px var(--magenta);
}
.ob-helpvid__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer; border: 0;
  box-shadow:
    0 0 0 8px rgba(228,13,219,0.14),
    0 14px 28px rgba(228,13,219,0.40);
  z-index: 2;
}
.ob-helpvid__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.ob-helpvid__play svg { margin-left: 3px; }
.ob-helpvid__caption { position: relative; color: #fff; }
.ob-helpvid__title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.25;
}
.ob-helpvid__placeholder {
  position: absolute;
  right: var(--s-3); top: var(--s-3);
  padding: 3px 7px;
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}

/* ── TOC do briefing (etapa 3) ─────────────────────────── */
.ob-toc {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 2px;
}
.ob-toc__head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  font-weight: 600;
  margin: 0 0 var(--s-3);
  padding-left: var(--s-3);
}
.ob-toc__link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--r-2);
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--d-2) var(--ease);
}
.ob-toc__link:hover { background: var(--surface); color: var(--text-1); }
.ob-toc__link.is-active {
  background: var(--magenta-soft);
  color: var(--magenta-deep);
  font-weight: 600;
}
.ob-toc__link .ix {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-2);
  flex-shrink: 0;
}
.ob-toc__link.is-active .ix { background: var(--magenta); color: #fff; }
.ob-toc__progress {
  margin: var(--s-4) var(--s-3) 0;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--border-2);
  font-size: 12px;
  color: var(--text-3);
  display: flex; flex-direction: column; gap: 6px;
}
.ob-toc__progress .bar {
  height: 3px;
  background: var(--bg-2);
  border-radius: 999px;
  overflow: hidden;
}
.ob-toc__progress .bar > i {
  display: block;
  height: 100%;
  background: var(--magenta);
  border-radius: 999px;
  transition: width var(--d-3) var(--ease);
}
.ob-sections { display: flex; flex-direction: column; gap: var(--s-6); }

/* ── Tela final: celebração (cinza claro, não verde) ──── */
.ob-done {
  max-width: 760px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--s-10) var(--s-9) var(--s-9);
  text-align: center;
  box-shadow: 0 24px 60px rgba(11,4,16,0.06), 0 1px 2px rgba(11,4,16,0.04);
  position: relative; overflow: hidden;
}
.ob-done::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(228,13,219,0.05), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(15,169,104,0.04), transparent 50%);
  pointer-events: none;
}
.ob-done__icon {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0FA968 0%, #29C887 100%);
  display: grid; place-items: center;
  margin: 0 auto var(--s-6);
  color: #fff;
  box-shadow:
    0 0 0 12px rgba(15,169,104,0.10),
    0 0 0 24px rgba(15,169,104,0.05),
    0 14px 32px rgba(15,169,104,0.30);
}
.ob-done__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(40px, 4.6vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-1);
  margin: 0 0 var(--s-4);
}
.ob-done__title span { color: var(--magenta); font-style: italic; font-weight: 300; }
.ob-done__sub {
  position: relative;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 auto;
  max-width: 540px;
}
.ob-done__sub b { color: var(--text-1); font-weight: 500; }

/* ── Próximos passos (timeline) ────────────────────────── */
.ob-next { max-width: 760px; margin: var(--s-9) auto 0; }
.ob-next__head { text-align: center; margin-bottom: var(--s-7); }
.ob-next__eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
}
.ob-next__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 4px var(--magenta-soft);
}
.ob-next__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 32px;
  letter-spacing: -0.025em;
  color: var(--text-1);
  margin: var(--s-3) 0 0;
}
.ob-next__title span { color: var(--magenta); }
.ob-timeline {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,4,16,0.04);
}
.ob-tl-row {
  display: grid;
  /* 3 cols: when (curto) · dot · body (cresce) — coluna `who` removida */
  grid-template-columns: 140px 32px 1fr;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.ob-tl-row:last-child { border-bottom: 0; }
.ob-tl-row::before {
  content: "";
  position: absolute;
  left: calc(110px + var(--s-4) + 16px);
  top: 64px; bottom: -16px;
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--border-2) 0 3px, transparent 3px 7px);
  z-index: 0;
}
.ob-tl-row:last-child::before { display: none; }
.ob-tl-row .when {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 8px;
  text-align: right;
}
.ob-tl-row .when b {
  display: block; color: var(--text-1); font-weight: 600;
  font-size: 13px; letter-spacing: -0.005em; text-transform: none;
  margin-bottom: 2px;
}
.ob-tl-row .dot-col { z-index: 1; padding-top: 6px; }
.ob-tl-row .dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border-2);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.ob-tl-row.is-next .dot {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
  box-shadow: 0 0 0 6px var(--magenta-soft);
}
.ob-tl-row .body { padding-top: 4px; }
.ob-tl-row .what {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 0;
}
.ob-tl-row .desc {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.5;
  margin: 4px 0 0;
}
.ob-tl-row .who {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  padding-top: 8px;
  justify-content: flex-end;
}
.ob-tl-row .who .av {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7A14B8, #E40DDB);
  color: #fff;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 600;
}

/* ── Footer sticky ─────────────────────────────────────── */
.ob-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-top: 1px solid var(--border);
}
.ob-foot__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-7);
  display: flex; align-items: center;
  gap: var(--s-5);
}
.ob-foot__back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  background: transparent; border: 0;
  cursor: pointer;
}
.ob-foot__back:hover { background: var(--bg-2); color: var(--text-1); }
.ob-foot__back:disabled { opacity: 0.4; cursor: not-allowed; }
.ob-foot__back:disabled:hover { background: transparent; color: var(--text-3); }
.ob-foot__center {
  margin: 0 auto;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px;
  color: var(--text-3);
}
.ob-foot__center b { color: var(--text-1); font-weight: 600; }
.ob-foot__center .step-mini { display: inline-flex; gap: 4px; }
.ob-foot__center .step-mini i {
  width: 22px; height: 4px;
  border-radius: 999px;
  background: var(--bg-2);
  display: block;
}
.ob-foot__center .step-mini i.is-done { background: var(--success); }
.ob-foot__center .step-mini i.is-current { background: var(--magenta); }
.ob-foot__cta {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px;
  padding: 0 var(--s-5) 0 var(--s-6);
  border-radius: var(--r-pill);
  background: var(--magenta);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 0; cursor: pointer;
  box-shadow: 0 8px 24px rgba(228,13,219,0.32), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: all var(--d-2) var(--ease);
}
.ob-foot__cta:hover {
  background: var(--magenta-hot);
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(228,13,219,0.42);
}
.ob-foot__cta:disabled {
  opacity: 0.55; cursor: not-allowed; transform: none;
  background: var(--magenta);
}
.ob-foot__cta--success {
  background: #25D366;
  box-shadow: 0 8px 24px rgba(37,211,102,0.32);
}
.ob-foot__cta--success:hover {
  background: #1FB855;
  box-shadow: 0 14px 32px rgba(37,211,102,0.42);
}
.ob-foot__cta .arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: grid; place-items: center;
}

/* ── Responsivo ─────────────────────────────────────────── */
@media (max-width: 1040px) {
  .ob-hero { grid-template-columns: 1fr; }
  .ob-video { margin: 0 auto; max-width: 320px; justify-self: center; }
}
@media (max-width: 880px) {
  .ob-form--briefing { grid-template-columns: 1fr; }
  .ob-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .ob-toc__progress { display: none; }
  .ob-fsection--split .ob-fsection__body { grid-template-columns: 1fr; }
  .ob-platforms { grid-template-columns: repeat(2, 1fr); }
  .ob-tl-row { grid-template-columns: 32px 1fr; gap: var(--s-3); }
  .ob-tl-row .when, .ob-tl-row .who { display: none; }
  .ob-tl-row::before { left: 16px; top: 64px; }
}


/* ═══════════════════════════════════════════════════════════
   Drawer admin · Anexos de tutorial + Respostas do cliente
   ═══════════════════════════════════════════════════════════ */

/* ── Badge de "tipo" no canto da task (auto/locked) ───── */
.onb-task__kind-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 2px;
}
.onb-task__kind-badge--auto {
  background: rgba(79, 70, 229, 0.10);
  color: #4F46E5;
  border: 1px solid rgba(79, 70, 229, 0.25);
}
.onb-task__kind-badge--locked {
  background: var(--bg-2);
  color: var(--text-4);
  border: 1px solid var(--border);
}


/* ── Modal: anexar tutorial ────────────────────────────── */
.modal--narrow { width: min(560px, 92vw); padding: 0; }
.modal--narrow .modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s-5) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--border);
}
.modal--narrow .modal__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--text-1);
  margin: 0;
}
.modal--narrow .modal__crumb {
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-top: 2px;
}
.modal--narrow .modal__body { padding: var(--s-5); }
.modal--narrow .modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  margin-top: var(--s-4);
}

.onb-attach-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--s-4);
  background: var(--bg-2);
  padding: 4px;
  border-radius: var(--r-2);
}
.onb-attach-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--r-1);
  color: var(--text-3);
  font-size: var(--t-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
}
.onb-attach-tab:hover { color: var(--text-1); }
.onb-attach-tab.is-active {
  background: var(--surface);
  color: var(--magenta);
  box-shadow: var(--shadow-1);
}
.onb-attach-tab [data-icon] { display: inline-flex; line-height: 0; }
.onb-attach-tab svg { width: 13px; height: 13px; }

.onb-attach-form { display: flex; flex-direction: column; gap: var(--s-3); }
.onb-attach-form[hidden] { display: none; }
.onb-attach-form input[type="file"] {
  padding: 10px;
  background: var(--bg-2);
  border-style: dashed;
  cursor: pointer;
}


/* ════════════════════════════════════════════════════════════════════
 *  TO DO LIST (Demandas) — Fase 4
 * ════════════════════════════════════════════════════════════════════ */

.page--todolist {
  padding-bottom: 0;  /* kanban tem scroll próprio nas colunas */
}

/* ── Botão "Minhas demandas" (pill toggle no toolbar) ──────────── */
.todo-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px;
  padding: 0 var(--s-4);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--text-2);
  font-size: 13px; font-weight: 500;
  font-family: var(--font-display);
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
}
.todo-pill:hover {
  border-color: var(--magenta-edge);
  color: var(--magenta-deep);
}
.todo-pill [data-icon] svg {
  width: 14px; height: 14px;
}
.todo-pill[data-active="true"] {
  background: var(--magenta-soft);
  border-color: var(--magenta);
  color: var(--magenta-deep);
}

/* ── Kanban board: 4 colunas com scroll vertical próprio ────────── */
.todo-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
  /* Altura calculada pra que cada coluna role internamente sem
     scrollar a página inteira. Header+toolbar+stats ≈ 240px. */
  height: calc(100vh - 280px);
  min-height: 480px;
}
.todo-col {
  display: flex; flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  min-width: 0;  /* permite shrink no grid sem overflow horizontal */
}
.todo-col__head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.todo-col__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3);  /* override por coluna abaixo */
  flex-shrink: 0;
}
.todo-col__name {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  color: var(--text-1);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.todo-col__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: var(--r-pill);
  min-width: 18px; text-align: center;
  flex-shrink: 0;
}
.todo-col__body {
  flex: 1; overflow-y: auto;
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-3);
}
/* Estado dropzone (drag-over) — fundo levemente magenta */
.todo-col__body.is-drop-target {
  background: var(--magenta-soft);
  outline: 2px dashed var(--magenta-edge);
  outline-offset: -4px;
}

/* Dots por POSIÇÃO (colunas são configuráveis, não dá pra amarrar por nome):
     1ª → preto · 2ª → laranja · 3ª → amarelo · 4ª+ → magenta.
   A coluna "concluída" (is_done) fica sempre verde, onde quer que esteja. */
.todo-col:nth-child(1) .todo-col__dot { background: var(--text-1); }
.todo-col:nth-child(2) .todo-col__dot { background: #F97316; }
.todo-col:nth-child(3) .todo-col__dot { background: var(--warning); }
.todo-col:nth-child(n+4) .todo-col__dot { background: var(--magenta); }
.todo-col.is-done-col .todo-col__dot { background: var(--success); }

/* ── Controles de coluna (admin): grip pra reordenar + menu ⋮ ──────── */
.todo-col__grip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0;
  background: transparent; border: 0; cursor: grab;
  color: var(--text-3); flex-shrink: 0;
}
.todo-col__grip:hover { color: var(--text-1); }
.todo-col__grip:active { cursor: grabbing; }
.todo-col.is-col-dragging { opacity: 0.45; }
.todo-col__menu { position: relative; flex-shrink: 0; }
.todo-col__menu-btn {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: transparent; border: 0;
  border-radius: var(--r-1);
  color: var(--text-3); cursor: pointer;
}
.todo-col__menu-btn:hover { background: var(--surface-2); color: var(--text-1); }
.todo-col__menu-pop {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100;
  min-width: 180px;
  padding: 4px;
  display: flex; flex-direction: column;
}
.todo-col__menu-pop[hidden] { display: none; }
.todo-col__menu-pop button {
  text-align: left;
  background: transparent; border: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  border-radius: var(--r-1);
  font-family: var(--font-display);
}
.todo-col__menu-pop button:hover { background: var(--bg-2); }
.todo-col__menu-pop button[data-col-action="delete"] { color: var(--danger); }
.todo-col__menu-pop button[data-col-action="delete"]:hover { background: var(--danger-soft); }

/* ── Card de demanda ───────────────────────────────────────────── */
.todo-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-3);
  cursor: grab;
  transition: all var(--d-2) var(--ease);
  display: flex; flex-direction: column; gap: 8px;
  user-select: none;
}
.todo-card:hover {
  border-color: var(--text-3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.todo-card.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.todo-card--critical {
  border-left: 3px solid var(--danger);
  padding-left: calc(var(--s-3) - 2px);
}
.todo-card--overdue {
  background: rgba(255, 200, 100, 0.06);
}
.todo-card.is-done .todo-card__title {
  text-decoration: line-through;
  color: var(--text-3);
}

.todo-card__title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.35;
}
.todo-card__client {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: var(--magenta-soft);
  color: var(--magenta-deep);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  align-self: flex-start;
  /* Trunca nomes longos pra não estourar a coluna estreita */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.todo-card__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}
/* Linha de pills (prioridade + prazo) abaixo do título */
.todo-card__pills {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}

/* Pill de prazo e pill de criação compartilham o mesmo tamanho compacto
   (font-mono 10.5px). `deadline` fica ao lado da prioridade; `created`
   vai pro rodapé esquerdo (.todo-card__meta-left). */
.todo-card__deadline,
.todo-card__created {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
}
/* Wrappers do ícone — `line-height: 0` remove o gap do baseline da svg
   pra que ela fique perfeitamente alinhada ao texto ao lado. */
.todo-card__deadline-ico,
.todo-card__created-ico {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.todo-card__deadline-ico svg,
.todo-card__created-ico svg {
  width: 11px; height: 11px;
  display: block;            /* tira o gap inline-baseline */
}
.todo-card__deadline-txt,
.todo-card__created-txt {
  display: inline-block;
  line-height: 1;
}

.todo-card__deadline--overdue { color: var(--warning); font-weight: 600; }
.todo-card__deadline--critical { color: var(--danger); font-weight: 600; }
.todo-card__created { color: var(--text-4); }
.todo-card__created-ico { color: var(--text-4); }
.todo-card__resp {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  flex-shrink: 0;
}
.todo-card__resp.is-empty {
  background: var(--surface-2);
  color: var(--text-3);
  border: 1px dashed var(--border-2);
}
/* Empty state quando a coluna não tem cards */
.todo-col__empty {
  text-align: center;
  padding: var(--s-7) var(--s-4);
  color: var(--text-4);
  font-size: 12px;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-2);
}

/* ── Form grid do modal Nova Demanda ──────────────────────────── */
.td-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.td-form__grid .field-group--full {
  grid-column: 1 / -1;
}
.td-form__grid textarea {
  resize: vertical;
  min-height: 72px;
  font-family: var(--font-display);
}

/* Checkbox custom (label + checkbox alinhados{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
}

/* ── Drawer de edição ─────────────────────────────────────────── */
.td-drawer__sec {
  margin-bottom: var(--s-5);
}
.td-drawer__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: center;
}
.td-drawer__row:last-child { border-bottom: 0; }
.td-drawer__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.td-drawer__del {
  background: transparent;
  border: 1px solid var(--danger-edge);
  color: var(--danger);
  padding: 6px 14px;
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
}
.td-drawer__del:hover { background: var(--danger-soft); }


/* ════════════════════════════════════════════════════════════════════
 *  Fase 4 — DEMANDA: drop zone + drawer card interno + badges
 * ════════════════════════════════════════════════════════════════════ */

/* Drop zone (modal Nova demanda + drawer Anexos) */
.td-dropzone {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: var(--s-5);
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-2);
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 12.5px;
  cursor: pointer;
  flex-direction: column;
  text-align: center;
  transition: all var(--d-2) var(--ease);
}
.td-dropzone:hover { border-color: var(--magenta-edge); color: var(--magenta-deep); }
.td-dropzone.is-drag {
  border-color: var(--magenta);
  background: var(--magenta-soft);
  color: var(--magenta-deep);
}
.td-dropzone__text { line-height: 1.5; }
.td-dropzone__text small {
  display: block;
  color: var(--text-4);
  font-size: 11px;
  margin-top: 2px;
}
.td-dropzone [data-icon] svg { width: 18px; height: 18px; }
.td-dropzone__list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.td-dropzone__item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
  font-size: 12px;
}
.td-dropzone__name { flex: 1; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-dropzone__size { color: var(--text-3); font-family: var(--font-mono); font-size: 10.5px; }
.td-dropzone__del {
  background: transparent; border: 0; color: var(--text-4);
  padding: 2px; cursor: pointer; line-height: 0;
}
.td-dropzone__del:hover { color: var(--danger); }

/* ── Drawer Card Interno: header destacado ───────────────────────── */
.td-drawer__head-block {
  background: var(--bg-2);
  margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-5);
  padding: var(--s-5);
  border-bottom: 1px solid var(--border);
  position: relative;
}
.td-drawer__head-block.is-critical {
  background: linear-gradient(135deg, rgba(220,38,38,0.06), var(--bg-2));
}
.td-drawer__crit-badge {
  position: absolute; top: var(--s-4); right: var(--s-5);
  padding: 4px 12px;
  background: transparent;
  border: 1.5px solid var(--danger);
  border-radius: var(--r-pill);
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: 0 0 12px rgba(220,38,38,0.25);
}
.td-drawer__head-sub {
  color: var(--text-3);
  font-size: 13px;
  margin-bottom: var(--s-4);
}
.td-drawer__row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.td-drawer__field {
  display: flex; flex-direction: column; gap: 4px;
}
.td-drawer__field--full { grid-column: 1 / -1; }
.td-drawer__field select,
.td-drawer__field input {
  padding: 8px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-1);
  width: 100%;
}
.td-drawer__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.td-drawer__head-actions {
  display: flex; justify-content: flex-end;
  margin-top: var(--s-3);
}
/* Override do .td-drawer__del — outline + ícone */
.td-drawer__del {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--danger);
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.td-drawer__del:hover {
  background: var(--danger-soft);
  border-color: var(--danger-edge);
}
.td-drawer__del [data-icon] svg { width: 13px; height: 13px; }

/* Prioridade — borda colorida no select pra bater com o pill do card.
   Cores idênticas às das pills (status/prio-pill) pra continuidade visual. */
.prio-select.prio-baixa {
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--success);
  font-weight: 600;
}
.prio-select.prio-media {
  border-color: rgba(245, 158, 11, 0.55);
  color: var(--warning);
  font-weight: 600;
}
.prio-select.prio-alta {
  border-color: rgba(239, 68, 68, 0.55);
  color: var(--danger);
  font-weight: 600;
}
.prio-select.prio-critica {
  /* Card usa vermelho pra "Crítica" → dropdown casa: borda vermelha forte
     + bold pra reforçar a urgência */
  border-color: var(--danger);
  color: var(--danger);
  font-weight: 700;
  background: rgba(239, 68, 68, 0.04);
}

/* ── Drawer Sec (Demanda / Anexos / Comentários) ─────────────────── */
.td-drawer__sec-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-3);
}
.td-drawer__sec-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.td-drawer__sec-eyebrow [data-icon] svg { width: 13px; height: 13px; }
.btn--small {
  padding: 5px 12px;
  font-size: 12px;
  height: auto;
}
.td-drawer__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 13.5px;
  color: var(--text-1);
  margin-bottom: 8px;
}
.td-drawer__textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  background: var(--bg);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-1);
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}
.td-drawer__meta {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 6px;
}

/* Anexos rows */
.td-att-list {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: var(--s-3);
}
.td-att-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: 12.5px;
}
.td-att-row__icon { color: var(--magenta); }
.td-att-row__icon svg { width: 14px; height: 14px; }
.td-att-row__link {
  flex: 1; color: var(--text-1); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.td-att-row__link:hover { color: var(--magenta-deep); text-decoration: underline; }
.td-att-row__size {
  font-family: var(--font-mono);
  font-size: 10.5px; color: var(--text-3);
}
.td-att-row__del {
  background: transparent; border: 0; color: var(--text-4);
  padding: 2px 4px; cursor: pointer; line-height: 0;
}
.td-att-row__del:hover { color: var(--danger); }

/* Card badges (attachment/comment counts) */
.todo-card__meta-left {
  display: flex; align-items: center; gap: 8px;
}
.todo-card__badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.todo-card__badge [data-icon] svg { width: 10px; height: 10px; }


/* ════════════════════════════════════════════════════════════════════
 *  Fase 4 — PERSONAL NOTES (página dedicada)
 * ════════════════════════════════════════════════════════════════════ */

.page--notes { padding-bottom: var(--s-7); }

.page__head--with-back {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.page__head--with-back .page__head-left {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.page__back {
  display: inline-flex;
  align-items: center;       /* seta + texto na mesma linha base */
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  text-decoration: none;
  margin-bottom: 4px;
  font-family: var(--font-display);
  line-height: 1;            /* tira gap do baseline pra alinhamento ficar limpo */
}
.page__back:hover { color: var(--magenta-deep); }
/* Wrapper do ícone — `line-height: 0` evita gap do baseline da svg */
.page__back [data-icon] {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.page__back [data-icon] svg {
  width: 14px; height: 14px;
  display: block;
}
.page--notes .page__title {
  display: inline-flex; align-items: center; gap: 10px;
}
.page--notes .page__title [data-icon] svg {
  width: 22px; height: 22px;
  color: var(--magenta);
}

@media (min-width: 720px) {
  .page__head--with-back {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  .page__head--with-back .page__head-actions { flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════════════
 *  Personal Notes — KANBAN (colunas user-defined)
 * ════════════════════════════════════════════════════════════════════ */

.notes-board {
  display: flex;
  gap: var(--s-4);
  margin-top: var(--s-5);
  overflow-x: auto;
  padding-bottom: var(--s-4);
  align-items: flex-start;
}
.notes-col {
  flex: 0 0 320px;
  max-width: 320px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.notes-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--r-3) var(--r-3) 0 0;
}
.notes-col__name {
  flex: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notes-col__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  min-width: 22px; text-align: center;
}
.notes-col__menu { position: relative; }
.notes-col__menu-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent; border: 0;
  border-radius: var(--r-1);
  color: var(--text-3); cursor: pointer;
}
.notes-col__menu-btn:hover {
  background: var(--surface-2);
  color: var(--text-1);
}
.notes-col__menu-pop {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;  /* acima dos cards da própria coluna */
  min-width: 140px;
  padding: 4px;
  display: flex; flex-direction: column;
}
/* IMPORTANTE: o `display: flex` acima sobrescreve o `[hidden] { display: none }`
   do user-agent (mesma especificidade, classe vence por ordem). Sem esta regra
   explícita o popup fica visível mesmo com `pop.hidden = true` no JS. */
.notes-col__menu-pop[hidden] {
  display: none;
}
/* Backdrop transparente que cobre tudo enquanto popup aberto — captura
   click fora pra fechar. Sem isso, popup ficava "preso" porque alguns
   eventos não bubblavam até document (drag handlers, scrollbar etc). */
.notes-pop-backdrop {
  position: fixed; inset: 0;
  z-index: 99;  /* logo abaixo do popup */
  background: transparent;
}
.notes-col__menu-pop button {
  text-align: left;
  background: transparent; border: 0;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  border-radius: var(--r-1);
  font-family: var(--font-display);
}
.notes-col__menu-pop button:hover { background: var(--bg-2); }
.notes-col__menu-pop button[data-col-action="delete"] { color: var(--danger); }
.notes-col__menu-pop button[data-col-action="delete"]:hover { background: var(--danger-soft); }

/* Grip de drag-drop pra reordenar colunas — single source of truth do drag.
   Cursor de "grab" indica intenção; ao arrastar muda pra "grabbing". */
.notes-col__grip {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: transparent; border: 0;
  border-radius: var(--r-1);
  color: var(--text-3);
  cursor: grab;
  padding: 0;
  transition: color var(--d-1) var(--ease), background var(--d-1) var(--ease);
}
.notes-col__grip:hover {
  color: var(--text-1);
  background: var(--surface-2);
}
.notes-col__grip:active { cursor: grabbing; }
/* Coluna sendo arrastada: visual ghost (não suma — só desbote) */
.notes-col.is-col-dragging {
  opacity: 0.4;
  filter: grayscale(0.4);
}
/* Coluna alvo do drop: outline magenta sutil. Inset offset pra não cortar */
.notes-col.is-col-drop-target {
  outline: 2px dashed var(--magenta-edge);
  outline-offset: -4px;
  background: var(--magenta-soft);
}

/* ─── Dropdowns de status e prioridade no card (pill clicável + chev) ─── */
.note-pill-wrap {
  position: relative;
  display: inline-flex;
}
.note-pill-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.note-pill-chev {
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
.note-pill-trigger:hover .note-pill-chev { opacity: 1; }
/* Popup do dropdown — segue padrão do menu de coluna (z-100 acima do
   backdrop z-99). Hidden override pra forçar display: none mesmo com
   display: flex na regra base. */
.note-pill-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  z-index: 100;
  min-width: 160px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.note-pill-pop[hidden] { display: none; }
/* Botões dentro do popup precisam ser CLICK targets generosos. As pills
   originais são 9.5px / padding mínimo — ótimo no header do card, péssimo
   pra hit-test no menu. Aqui aumento o tamanho preservando a cor da pill. */
.note-pill-pop button {
  text-align: center;
  width: 100%;
  border-radius: var(--r-2);
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.05em;
  min-height: 32px;
  cursor: pointer;
  transition: filter var(--d-1) var(--ease), transform var(--d-1) var(--ease);
}
.note-pill-pop button:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
}
.note-pill-pop button[data-active="true"] {
  outline: 2px solid var(--magenta-edge);
  outline-offset: -1px;
}

.notes-col__body {
  padding: var(--s-3);
  display: flex; flex-direction: column;
  gap: var(--s-2);
  min-height: 120px;
}
.notes-col__body.is-drop-target {
  background: var(--magenta-soft);
  outline: 2px dashed var(--magenta-edge);
  outline-offset: -6px;
  border-radius: var(--r-2);
}
.notes-col__add-inline {
  background: transparent;
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  color: var(--text-3);
  font-family: var(--font-display);
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: center;
}
.notes-col__add-inline:hover {
  border-color: var(--magenta-edge);
  color: var(--magenta-deep);
}
.notes-col__add-inline [data-icon] svg { width: 13px; height: 13px; }

/* Concluídas (N) — colapsável */
.notes-col__done {
  border-top: 1px solid var(--border);
  padding: var(--s-2) var(--s-3) var(--s-3);
}
.notes-col__done-toggle {
  display: flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  padding: 4px 6px;
  width: 100%;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--r-1);
}
.notes-col__done-toggle:hover { color: var(--text-1); background: var(--surface-2); }
.notes-col__done-chev {
  display: inline-flex;
  transition: transform var(--d-2) var(--ease);
}
.notes-col__done-chev svg { width: 12px; height: 12px; }
.notes-col__done:not(.is-collapsed) .notes-col__done-chev {
  transform: rotate(90deg);
}
.notes-col__done-list {
  display: flex; flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.notes-col__done.is-collapsed .notes-col__done-list {
  display: none;
}

/* Card check (circle pra concluir) */
.note-card__check {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: transparent; border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-3);
  border-radius: 50%;
  transition: color var(--d-1) var(--ease);
}
.note-card__check:hover { color: var(--magenta); }
.note-card__check.is-checked { color: var(--success); }
.note-card__check [data-icon] svg { width: 16px; height: 16px; }

/* Card opacity quando completo (cards na "Concluídas") */
.note-card.is-done .note-card__title,
.note-card.is-done .note-card__body {
  text-decoration: line-through;
  color: var(--text-4);
}
.note-card.is-done { opacity: 0.75; }

/* Header reorg: check + status + prio + del */
.note-card__head {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}
.note-card__head .status-pill,
.note-card__head .prio-pill {
  font-size: 9px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
}
.note-card.is-dragging { opacity: 0.4; }

/* Grid antigo (mantido pra compat{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.notes-empty {
  grid-column: 1 / -1;
  padding: var(--s-7);
  text-align: center;
  color: var(--text-3);
  font-size: 13.5px;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-3);
  background: var(--bg-2);
}

/* Paleta neon: variáveis CSS pra cada cor */
:root {
  --note-purple: #7A14B8;
  --note-magenta: #E40DDB;
  --note-green:  #10B981;
  --note-amber:  #F59E0B;
  --note-blue:   #3B82F6;
  --note-red:    #EF4444;
  --note-cyan:   #06B6D4;
  --note-pink:   #EC4899;
}

.note-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--note-color, var(--text-3));
  border-radius: var(--r-3);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.note-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--note-glow, rgba(122,20,184,0.12));
  border-color: var(--note-color, var(--text-3));
}
.note-card.note-card--purple  { --note-color: var(--note-purple);  --note-glow: rgba(122, 20, 184, 0.18); }
.note-card.note-card--magenta { --note-color: var(--note-magenta); --note-glow: rgba(228, 13, 219, 0.18); }
.note-card.note-card--green   { --note-color: var(--note-green);   --note-glow: rgba(16, 185, 129, 0.18); }
.note-card.note-card--amber   { --note-color: var(--note-amber);   --note-glow: rgba(245, 158, 11, 0.18); }
.note-card.note-card--blue    { --note-color: var(--note-blue);    --note-glow: rgba(59, 130, 246, 0.18); }
.note-card.note-card--red     { --note-color: var(--note-red);     --note-glow: rgba(239, 68, 68, 0.18); }
.note-card.note-card--cyan    { --note-color: var(--note-cyan);    --note-glow: rgba(6, 182, 212, 0.18); }
.note-card.note-card--pink    { --note-color: var(--note-pink);    --note-glow: rgba(236, 72, 153, 0.18); }

.note-card__head {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.note-card__del {
  margin-left: auto;
  background: transparent; border: 0; padding: 2px;
  color: var(--text-4); cursor: pointer; line-height: 0;
  border-radius: var(--r-1);
}
.note-card__del:hover { color: var(--danger); background: var(--danger-soft); }
.note-card__del [data-icon] svg { width: 13px; height: 13px; }

.note-card__title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-1);
}
.note-card__body {
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.note-card__foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--text-3);
  flex-wrap: wrap;
}
.note-card__att{
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
}
.note-card__att [data-icon] svg{ width: 10px; height: 10px; }

/* Pill de prazo no footer da card. Cinza neutro por padrão; amarelo
   se for hoje (urgência leve); vermelho se atrasado (e não feito).
   Ícone e texto centralizados na mesma linha base. */
.note-card__deadline {
  display: inline-flex;
  align-items: center;       /* alinha ícone + texto verticalmente */
  justify-content: center;   /* centraliza horizontalmente no pill */
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1;            /* tira gap do baseline do texto */
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.note-card__deadline-ico {
  display: inline-flex;
  align-items: center;
  line-height: 0;            /* remove qualquer gap do baseline da svg */
}
.note-card__deadline-ico svg {
  width: 11px; height: 11px;
  display: block;            /* tira gap inline-baseline do navegador */
}
.note-card__deadline-txt {
  display: inline-block;
  line-height: 1;
  transform: translateY(0.5px); /* compensa baseline da fonte mono */
}
.note-card__deadline.is-today {
  background: rgba(245, 158, 11, 0.14);
  color: var(--warning);
  border-color: rgba(245, 158, 11, 0.25);
}
.note-card__deadline.is-overdue {
  background: rgba(239, 68, 68, 0.14);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
  font-weight: 600;
}

/* Tag "Atrasado" — mais loud que o pill de prazo. Sempre vermelho sólido,
   uppercase, com ícone de alerta. Aparece antes do pill de data quando
   a tarefa está overdue (e não está feita). */
.note-card__overdue-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--danger);
  color: #fff;
  white-space: nowrap;
}
.note-card__overdue-tag [data-icon] {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.note-card__overdue-tag [data-icon] svg {
  width: 11px; height: 11px;
  display: block;
}

/* Status / Priority pills (clicáveis no card) */
.status-pill, .prio-pill {
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: filter var(--d-1) var(--ease);
}
.status-pill:hover, .prio-pill:hover { filter: brightness(0.95); }

/* Status: Pendente=vermelho, Em Andamento=amarelo, Feito=verde */
.status-pill.status-pendente {
  background: rgba(239, 68, 68, 0.14);
  color: var(--danger);
}
.status-pill.status-em_andamento {
  background: rgba(245, 158, 11, 0.16);
  color: var(--warning);
}
.status-pill.status-feito {
  background: rgba(16, 185, 129, 0.14);
  color: var(--success);
}

/* Prioridades: Média=amarela, Baixa=verde, Alta=vermelha, Urgente=vinho */
.prio-pill.prio-baixa {
  background: rgba(16, 185, 129, 0.14);
  color: var(--success);
}
.prio-pill.prio-media {
  background: rgba(245, 158, 11, 0.14);
  color: var(--warning);
}
.prio-pill.prio-alta {
  background: rgba(239, 68, 68, 0.14);
  color: var(--danger);
}
.prio-pill.prio-urgente {
  /* Vinho — magenta escuro saturado, bem diferente do vermelho da alta */
  background: rgba(112, 26, 117, 0.16);
  color: #701A75;
}
/* Critíca (demandas) compartilha cor do vermelho */
.prio-pill.prio-critica {
  background: rgba(239, 68, 68, 0.14);
  color: var(--danger);
}

/* Paleta de cores no drawer */
.color-palette {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.color-swatch {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--d-2) var(--ease);
  padding: 0;
}
.color-swatch.is-selected {
  border-color: var(--text-1);
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--bg), 0 0 12px var(--swatch-glow, rgba(0,0,0,0.15));
}
.color-swatch.color-purple  { background: var(--note-purple);  --swatch-glow: rgba(122, 20, 184, 0.4); }
.color-swatch.color-magenta { background: var(--note-magenta); --swatch-glow: rgba(228, 13, 219, 0.4); }
.color-swatch.color-green   { background: var(--note-green);   --swatch-glow: rgba(16, 185, 129, 0.4); }
.color-swatch.color-amber   { background: var(--note-amber);   --swatch-glow: rgba(245, 158, 11, 0.4); }
.color-swatch.color-blue    { background: var(--note-blue);    --swatch-glow: rgba(59, 130, 246, 0.4); }
.color-swatch.color-red     { background: var(--note-red);     --swatch-glow: rgba(239, 68, 68, 0.4); }
.color-swatch.color-cyan    { background: var(--note-cyan);    --swatch-glow: rgba(6, 182, 212, 0.4); }
.color-swatch.color-pink    { background: var(--note-pink);    --swatch-glow: rgba(236, 72, 153, 0.4); }

/* Note attach inside drawer */
.note-attach {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.note-attach__current { flex: 1; min-width: 200px; }
.note-attach__row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: 12.5px;
}
.note-attach__row [data-icon] svg { width: 13px; height: 13px; color: var(--magenta); }
.note-attach__link { flex: 1; color: var(--text-1); text-decoration: none; }
.note-attach__staged {
  font-size: 10.5px; color: var(--warning); font-family: var(--font-mono);
}
.note-attach__del {
  background: transparent; border: 0; color: var(--text-4);
  padding: 2px; cursor: pointer; line-height: 0;
}
.note-attach__del:hover { color: var(--danger); }

/* Foot do modal/drawer — Cancelar + Salvar/Submit alinhados à direita.
   `.modal__foot` é usado pelo modal de Nova demanda e pelo drawer de Nova nota.
   Sem essa regra, os botões viravam siblings soltos sem espaçamento → no
   drawer de notas, ficavam sobrepondo a paleta de cores acima. */
.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  margin-top: var(--s-4);
  background: var(--bg);
}
/* Quando o footer está dentro do drawer__body (que já tem padding), zera o
   padding lateral pra não dobrar — só mantém o top/bottom + border separator. */
.drawer__body > .modal__foot {
  margin: var(--s-4) calc(-1 * var(--s-5)) calc(-1 * var(--s-5));
  border-radius: 0;
}

/* Header do drawer de Nova Nota: padding reduzido pra não ocupar tanto
   espaço vertical (apenas título + close, sem subtítulo). */
.note-drawer .drawer__head {
  padding: var(--s-3) var(--s-5);
}
.note-drawer .drawer__title {
  font-size: var(--t-lg);
}
/* Drawer de Nova Nota usa fundo branco em todo o corpo (default era
   var(--surface) cinza-claro herdado de .drawer base). Inclui também o
   espaço abaixo dos botões pra não haver área "morta" cinza. */
.note-drawer { background: var(--bg); }
.note-drawer .drawer__body > .modal__foot { background: var(--bg); }


/* ══════════════════════════════════════════════════════════════════════
 * Triagem de Leads — fila admin pra avaliar leads do CRM
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Botão Triagem no topbar ────────────────────────────────── */
.topbar__triage {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px;
  margin-right: 4px;
  background: var(--magenta-soft);
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-pill);
  color: var(--magenta-deep);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--d-2) var(--ease);
  white-space: nowrap;
}
/* `display:inline-flex` sobrescreve o `[hidden]` do UA — sem isso o botão
   vaza pra não-admin (e dá flash no load antes do JS resolver). O JS só
   ACENDE o botão pra admin com leads pendentes; o resto fica escondido. */
.topbar__triage[hidden] { display: none; }
.topbar__triage:hover {
  background: var(--magenta);
  color: #fff;
  border-color: var(--magenta);
}
/* Spans [data-icon] herdam line-height do flex parent — viram caixas
   altas com o SVG menor flutuando no meio. Forçar inline-flex zera
   esse ghost descent e centraliza o foguete na altura do texto. */
.topbar__triage [data-icon] {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
}
.topbar__triage [data-icon] svg { width: 14px; height: 14px; display: block; }
.topbar__triage-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px;
  padding: 0 6px;
  background: var(--magenta);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.topbar__triage:hover .topbar__triage-count {
  background: #fff;
  color: var(--magenta);
}

/* ── Página /lead-triage ────────────────────────────────────── */
.page--triage {
  padding: var(--s-6) var(--s-7);
  max-width: 1280px;
  margin: 0 auto;
}

/* Título com ícone — flex pra alinhar verticalmente sem vertical-align hacky.
   Gap pequeno e svg menor pra ficar grudado mesmo com o "T" do "Triagem". */
.page__title--with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.page__title-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--magenta);
  flex-shrink: 0;
  line-height: 0;
}
.page__title-icon svg { width: 26px; height: 26px; display: block; }

/* Stat + botão "Adicionar Parceiro" agrupados à direita do título. */
.triage__head-right {
  display: flex; align-items: center; gap: var(--s-4);
}
/* Stat compacto à direita do título. Número magenta pra puxar o
   olho — é a métrica principal da tela. */
.triage__head-stat {
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
}
.triage__head-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--magenta);
  line-height: 1;
}
.triage__head-stat-label {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Lista de cards ─────────────────────────────────────────── */
.triage__list {
  display: flex; flex-direction: column; gap: var(--s-4);
}

/* Card — cinza (--surface-2) igual aos cards do Demandas / Carteira.
   Mostra TUDO do lead já visível, sem precisar abrir drawer. */
.triage-card {
  display: flex; flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.triage-card:hover {
  border-color: var(--magenta-edge);
  box-shadow: 0 4px 14px rgba(228, 13, 219, 0.05);
}

/* Top: identidade à esquerda + produto à direita */
.triage-card__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4);
}
.triage-card__id {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.triage-card__name {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--text-1);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
/* Nome do responsável abaixo do nome da loja — texto cinza simples,
   sem pill (a loja já carrega o destaque visual). */
.triage-card__owner {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--text-3);
  font-weight: 400;
}
.triage-card__product {
  align-self: flex-start;
  padding: 6px 14px;
  background: var(--magenta);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Grid de metas — 4 colunas em desktop, vira 2 em telas estreitas.
   Borda muito sutil (border-2) e radius médio pra fazer o bloco branco
   "flutuar" no fundo cinza sem competir com os outros elementos. */
.triage-card__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
}
@media (max-width: 1100px) {
  .triage-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.triage-card__meta-item {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.triage-card__meta-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.triage-card__meta-ico {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3);
  width: 12px; height: 12px;
  line-height: 0;
}
.triage-card__meta-ico svg { width: 12px; height: 12px; display: block; }
.triage-card__meta-value {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--text-1);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.triage-card__meta-value--empty { color: var(--text-4); }

/* Notes — bloco com fundo branco igual o resto do card,
   pra observações do CRM ficarem legíveis e separadas das metas. */
.triage-card__notes {
  display: flex; flex-direction: column; gap: 8px;
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
}
.triage-card__notes-label {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.triage-card__notes-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Footer do card — recebido (esq) + botões (dir).
   Margem-top auto não funcionaria porque o card é flex column, então
   space-between no footer + items-center alinha verticalmente os dois lados. */
.triage-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.triage-card__received {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm);
  color: var(--text-3);
}
.triage-card__received-ico {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-4);
  line-height: 0;
}
.triage-card__received-ico svg { width: 14px; height: 14px; display: block; }
.triage-card__actions {
  display: flex; gap: 10px;
}

/* ── Empty state ──────────────────────────────────────────────── */
.triage__empty {
  display: flex; flex-direction: column; align-items: center;
  padding: var(--s-9) var(--s-5);
  text-align: center;
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-3);
  color: var(--text-3);
}
/* `display: flex` acima sobrescreve `[hidden] { display: none }` do
   user-agent — bug clássico que já vi 4x nesse projeto. */
.triage__empty[hidden] { display: none; }
.triage__empty [data-icon] svg {
  width: 32px; height: 32px;
  color: var(--magenta);
  margin-bottom: var(--s-3);
}
.triage__empty h2 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 8px;
}
.triage__empty p { font-size: 13.5px; margin: 0; max-width: 380px; }

/* ── Drawer de aprovação ───────────────────────────────────────
   O header e os labels seguem .onb-drawer__* (mesma estética do
   drawer de Onboarding). O bloco abaixo cobre só os componentes
   específicos da triagem: inputs com ícone embutido + footer. */

/* Section titles em negrito dentro dos triage drawers (aprovação +
   criação) — chama mais atenção do que o peso 600 padrão. */
#triageDrawer .onb-drawer__title-sec,
#triageCreate .onb-drawer__title-sec,
#triageDrawer .triage-drawer__squad .onb-drawer__label {
  color: var(--text-1);
  font-weight: 800;
}

/* Espaçamento: respiro maior abaixo do section title (DADOS DO CLIENTE),
   colado nos campos (NOME DO CLIENTE → input). Cria hierarquia visual
   clara entre seção e seus campos. */
#triageDrawer .onb-drawer__title-sec { margin-bottom: var(--s-4); }
#triageDrawer .triage-drawer__field .onb-drawer__label { margin: 0; }

.triage-drawer__field { display: flex; flex-direction: column; gap: 3px; }
.triage-drawer__field--full { grid-column: 1 / -1; }
.triage-drawer__input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.triage-drawer__input-icon {
  position: absolute;
  left: 12px;
  color: var(--text-4);
  display: inline-flex; align-items: center;
  pointer-events: none;
}
.triage-drawer__input-icon svg { width: 14px; height: 14px; }
.triage-drawer__input-icon--money {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-3);
  font-weight: 600;
}
.triage-drawer__input-wrap input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 10px 12px 10px 36px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--text-1);
  outline: none;
  transition: border-color var(--d-2) var(--ease);
}
.triage-drawer__input-wrap input:focus { border-color: var(--magenta); }
.triage-drawer__input-wrap--money input { padding-left: 32px; }

/* Select com ícone à esquerda + chevron à direita — mesma aparência
   dos inputs normais, mantém consistência visual. */
.triage-drawer__input-wrap--select select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 10px 32px 10px 36px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--text-1);
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--d-2) var(--ease);
}
.triage-drawer__input-wrap--select select:focus { border-color: var(--magenta); }
.triage-drawer__input-chev {
  position: absolute;
  right: 10px;
  pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3);
  line-height: 0;
}
.triage-drawer__input-chev svg { width: 14px; height: 14px; display: block; }

.triage-drawer__notes {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 12px 14px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--text-1);
  outline: none;
  resize: vertical;
  line-height: 1.5;
}
.triage-drawer__notes:focus { border-color: var(--magenta); }

.triage-drawer__att-list {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding: 0;
  list-style: none;
}
.triage-drawer__att-list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  color: var(--text-2);
}
.triage-drawer__att-list [data-icon] svg { width: 13px; height: 13px; }

.triage-drawer__foot {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap; /* squad + dev dividem a 1ª linha; o botão cai pra própria linha */
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
  margin-top: var(--s-5);
}
/* Aprovar ocupa uma linha inteira abaixo dos dois selects (squad + dev), pra
   os selects não ficarem espremidos a ponto de cortar o texto. */
.triage-drawer__foot > .btn--large { flex: 1 1 100%; justify-content: center; }
/* Footer do drawer de criação — sem squad selector, botão alinhado à
   direita ocupando o espaço todo. */
.triage-drawer__foot--create { justify-content: flex-end; }
.triage-drawer__foot--create > .btn--large { flex: 0 0 auto; }
/* flex-basis 0 + min-width 0 deixa os dois selects realmente partirem 50/50
   sem estourar pela largura do texto interno. */
.triage-drawer__squad { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* Wrap relativo pra absolutar a chevron custom à direita.
   Seta nativa do browser fica colada na borda — chevron custom dá
   respiro e fica consistente com o select de Produto. */
.triage-drawer__squad-wrap {
  position: relative;
  display: flex; align-items: center;
}
.triage-drawer__squad select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 10px 36px 10px 14px;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  color: var(--text-1);
  outline: none;
  appearance: none;
  cursor: pointer;
}
.triage-drawer__squad select:focus { border-color: var(--magenta); }
.btn--large {
  padding: 12px 22px;
  font-size: var(--t-sm);
}
.btn--large [data-icon] svg { width: 16px; height: 16px; }


/* ═══ Sentinela de Grupos — Radar de Operações (IA) ════════════════════ */
/* Layout fixo (igual Onboarding): header/alertas/toolbar fixos, scroll só
   na tabela. A classe é adicionada no body via sentinel.js. */
body.layout-sentinel { height: 100vh; }
body.layout-sentinel .app { height: 100vh; min-height: 0; }
/* `.app > main` escopa ao <main> da página — sem o `>`, o seletor de tag
   `main` pegava também o <main> interno do modal do cliente, cortando o
   scroll dele (o card abria comprimido). */
body.layout-sentinel .app > main {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}

.page.page--sentinel {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  max-width: none; width: 100%; margin: 0;
  padding: var(--s-7) var(--s-6) var(--s-5);
}
.page--sentinel .page__head { margin-bottom: var(--s-4); }
#sentinelAnalyzeBtn.is-loading { opacity: 0.6; pointer-events: none; }

/* ── Botão "Alertas (IA)" no header (abre o drawer lateral) ──────── */
.sentinel__head-actions { display: flex; align-items: center; gap: var(--s-3); }
.sentinel-alerts-btn__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px;
  background: var(--magenta); color: #fff; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1;
}

/* ── Drawer de alertas — lista vertical de cards ────────────────── */
.sentinel-alerts-list { display: flex; flex-direction: column; gap: var(--s-3); }
.sentinel-alerts-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: var(--s-9) var(--s-4); text-align: center; color: var(--text-3);
}
.sentinel-alerts-empty[hidden] { display: none; }
.sentinel-alerts-empty [data-icon] { color: var(--success); line-height: 0; }
.sentinel-alerts-empty svg { width: 28px; height: 28px; }
.sentinel-alerts-empty p { margin: 0; font-size: 13.5px; }

.sentinel-alert {
  display: flex; gap: 10px;
  padding: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: var(--r-2);
  transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease);
}
.sentinel-alert--danger { border-left-color: var(--danger); }
.sentinel-alert--warn { border-left-color: var(--warning); }
.sentinel-alert--info { border-left-color: var(--magenta); }
.sentinel-alert.is-clearing { opacity: 0; transform: translateX(12px); }

.sentinel-alert__check {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; cursor: pointer;
}
.sentinel-alert__check input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.sentinel-alert__box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-2); border-radius: 6px;
  background: var(--bg); color: transparent; transition: all var(--d-2) var(--ease);
}
.sentinel-alert__box [data-icon] { line-height: 0; }
.sentinel-alert__box svg { width: 13px; height: 13px; }
.sentinel-alert__check input:checked + .sentinel-alert__box {
  background: var(--success); border-color: var(--success); color: #fff;
}
.sentinel-alert__check:hover .sentinel-alert__box { border-color: var(--success); }

.sentinel-alert__content { min-width: 0; flex: 1; }
.sentinel-alert__title {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  color: var(--text-1); margin-bottom: 4px; line-height: 1.3;
}
.sentinel-alert__body {
  margin: 0 0 8px; font-size: 12px; color: var(--text-3); line-height: 1.45;
}
/* Bullets de ação — "o que fazer", objetivo */
.sentinel-alert__actions {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.sentinel-alert__actions li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--text-1); line-height: 1.4;
}
.sentinel-alert__actions li [data-icon] {
  color: var(--magenta); line-height: 0; flex-shrink: 0; margin-top: 2px;
}
.sentinel-alert__actions li svg { width: 12px; height: 12px; }
.sentinel-alert__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: 10px;
  padding-top: 8px; border-top: 1px dashed var(--border);
}
.sentinel-alert__ref {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
}
.sentinel-alert__ref [data-icon] { line-height: 0; }
.sentinel-alert__ref svg { width: 11px; height: 11px; }
/* Botão "Criar demanda" — leva o alerta pro To Do List */
.sentinel-alert__demanda {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; padding: 4px 8px; cursor: pointer;
  border-radius: var(--r-2);
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  color: var(--magenta); white-space: nowrap;
  transition: background var(--d-2) var(--ease);
}
.sentinel-alert__demanda:hover { background: var(--magenta-soft); }
.sentinel-alert__demanda:disabled { opacity: 0.5; pointer-events: none; }
.sentinel-alert__demanda [data-icon] { line-height: 0; }
.sentinel-alert__demanda svg { width: 13px; height: 13px; }

/* ── Toolbar de filtros ─────────────────────────────────────────── */
.sentinel-toolbar { flex-wrap: wrap; row-gap: var(--s-2); margin-bottom: var(--s-4); flex-shrink: 0; }
.sentinel-toolbar .field select { min-width: 160px; }
.sentinel-toolbar .field .ico { display: grid; place-items: center; width: 18px; height: 18px; }

/* ── Tabela densa ───────────────────────────────────────────────── */
.sentinel-table-wrap {
  flex: 1; min-height: 0; overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-1);
}
.sentinel-table { min-width: 980px; font-size: var(--t-sm); }
.sentinel-row {
  display: grid;
  /* grupo · health score · urgência · clima · última pendência */
  grid-template-columns: minmax(200px, 1.5fr) 160px 120px 120px minmax(260px, 2.4fr);
  align-items: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background var(--d-2) var(--ease);
}
.sentinel-row--head {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.sentinel-row:not(.sentinel-row--head) { cursor: pointer; }
.sentinel-row:not(.sentinel-row--head):hover { background: var(--surface-2); }
.sentinel-row:last-child { border-bottom: 0; }
/* Faixa lateral de saúde (vermelho/amarelo/verde) */
.sentinel-row::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: transparent;
}
.sentinel-row--critica::before { background: var(--danger); }
.sentinel-row--atencao::before { background: var(--warning); }
.sentinel-row--saudavel::before { background: var(--success); }

.sentinel-th {
  padding: var(--s-3) var(--s-4); text-align: left;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600; white-space: nowrap;
}
/* Header clicável (ordenação) — reseta o <button> e herda a tipografia do th */
.sentinel-th .onb-th-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; text-transform: inherit;
}
.sentinel-cell {
  padding: var(--s-3) var(--s-4); color: var(--text-1); min-width: 0;
}

/* Coluna Grupo */
.sentinel-cell--group {
  display: flex; align-items: center; gap: 10px; padding-left: var(--s-5);
}
.sentinel-cell__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  background: var(--success); color: #fff; border-radius: var(--r-2); line-height: 0;
}
.sentinel-cell__ico svg { width: 15px; height: 15px; }
.sentinel-cell__group-text { min-width: 0; }
.sentinel-cell__name {
  font-weight: 600; color: var(--text-1); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sentinel-cell__sub {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-4);
  letter-spacing: 0.03em;
}

/* Coluna Saúde IA */
.sentinel-cell--health { display: flex; flex-direction: column; gap: 5px; }
.sentinel-cell__score { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.sentinel-row--critica .sentinel-cell__score { color: var(--danger); }
.sentinel-row--atencao .sentinel-cell__score { color: var(--warning); }
.sentinel-row--saudavel .sentinel-cell__score { color: var(--success); }
.sentinel-cell__bar { height: 5px; background: var(--bg-2); border-radius: 999px; overflow: hidden; max-width: 110px; }
.sentinel-cell__bar > i { display: block; height: 100%; border-radius: 999px; }
.sentinel-row--critica .sentinel-cell__bar > i { background: var(--danger); }
.sentinel-row--atencao .sentinel-cell__bar > i { background: var(--warning); }
.sentinel-row--saudavel .sentinel-cell__bar > i { background: var(--success); }

/* Badges de urgência/clima */
.sentinel-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.02em;
}
.sentinel-badge--urg-alta { background: rgba(215, 44, 90, 0.12); color: var(--danger); }
.sentinel-badge--urg-media { background: rgba(198, 114, 0, 0.12); color: var(--warning); }
.sentinel-badge--urg-baixa { background: rgba(15, 169, 104, 0.12); color: var(--success); }
.sentinel-badge--clima-positivo { background: rgba(15, 169, 104, 0.12); color: var(--success); }
.sentinel-badge--clima-neutro { background: var(--surface-2); color: var(--text-3); }
.sentinel-badge--clima-negativo { background: rgba(215, 44, 90, 0.12); color: var(--danger); }

/* Coluna Pendência (texto truncado) */
.sentinel-cell--pending {
  color: var(--text-2); font-size: 12.5px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.sentinel-table__empty {
  padding: var(--s-7); text-align: center; color: var(--text-3); font-size: var(--t-sm);
}
.sentinel-table__empty[hidden] { display: none; }

/* ── Drawer de detalhe (reaproveita estética do onb-drawer) ─────── */
.sentinel-drawer__head-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--success); color: #fff; border-radius: var(--r-3); line-height: 0;
}
.sentinel-drawer__head-icon svg { width: 20px; height: 20px; }
/* Header do drawer de Alertas usa magenta (em vez do verde do WhatsApp) */
.sentinel-drawer__head-icon--alert { background: var(--magenta); }

.sentinel-drawer__resumo {
  background: var(--magenta-soft);
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-3);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
}
.sentinel-drawer__resumo-head {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta-deep);
  margin-bottom: var(--s-3);
}
.sentinel-drawer__block { margin-top: var(--s-3); }
.sentinel-drawer__block:first-of-type { margin-top: 0; }
.sentinel-drawer__block-label {
  display: inline-block; font-family: var(--font-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 5px;
}
.sentinel-drawer__block-label--ok { color: var(--success); }
.sentinel-drawer__block-label--open { color: var(--magenta); }
.sentinel-drawer__block-text {
  margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55;
}
.sentinel-drawer__block-text--pre { white-space: pre-wrap; }

.sentinel-drawer__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-5);
}
@media (max-width: 560px) { .sentinel-drawer__cols { grid-template-columns: 1fr; } }
.sentinel-drawer__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.sentinel-drawer__list li {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: var(--text-2); line-height: 1.4;
}
.sentinel-drawer__list li [data-icon] { color: var(--magenta); line-height: 0; flex-shrink: 0; margin-top: 2px; }
.sentinel-drawer__list li svg { width: 12px; height: 12px; }
.sentinel-drawer__empty { margin: 0; font-size: 12.5px; color: var(--text-4); line-height: 1.4; }

.sentinel-drawer__score {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4); background: var(--bg-2); border-radius: var(--r-2);
}
.sentinel-drawer__score-num { font-family: var(--font-mono); font-size: 30px; font-weight: 700; line-height: 1; }
.sentinel-drawer__score--critica .sentinel-drawer__score-num { color: var(--danger); }
.sentinel-drawer__score--atencao .sentinel-drawer__score-num { color: var(--warning); }
.sentinel-drawer__score--saudavel .sentinel-drawer__score-num { color: var(--success); }
.sentinel-drawer__score-bar { flex: 1; height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.sentinel-drawer__score-bar > i { display: block; height: 100%; border-radius: 999px; }
.sentinel-drawer__score--critica .sentinel-drawer__score-bar > i { background: var(--danger); }
.sentinel-drawer__score--atencao .sentinel-drawer__score-bar > i { background: var(--warning); }
.sentinel-drawer__score--saudavel .sentinel-drawer__score-bar > i { background: var(--success); }

.sentinel-drawer__reason {
  margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.55;
  padding: var(--s-4); background: var(--bg-2); border-radius: var(--r-2);
}
.sentinel-drawer__actions {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px;
}
.sentinel-drawer__actions li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--text-2); line-height: 1.45;
}
.sentinel-drawer__actions li [data-icon] { color: var(--magenta); line-height: 0; flex-shrink: 0; margin-top: 2px; }
.sentinel-drawer__actions li svg { width: 13px; height: 13px; }

.sentinel-drawer__foot {
  padding-top: var(--s-4); border-top: 1px solid var(--border); margin-top: var(--s-5);
}
.sentinel-drawer__foot .btn { width: 100%; justify-content: center; }
.sentinel-drawer__no-client {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 12.5px; color: var(--text-4);
}
.sentinel-drawer__no-client [data-icon] { line-height: 0; }
.sentinel-drawer__no-client svg { width: 14px; height: 14px; }

/* ═══ Cursos e Materiais ═══════════════════════════════════════════════ */
.page--cursos { padding-bottom: var(--s-6); }

/* ── Seções por categoria ── */
.cursos-section { margin-bottom: var(--s-6); }
.cursos-section__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.cursos-section__icon { color: var(--magenta-deep); display: inline-flex; line-height: 0; }
.cursos-section__icon svg { width: 18px; height: 18px; }
.cursos-section__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-1);
}
.cursos-section__count {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-2);
  border-radius: var(--r-pill);
  padding: 2px 9px;
}

/* ── Grade de cards ── */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: var(--s-4);
}

/* ── Card de material ── */
.material-card {
  --mat-accent: var(--magenta);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease),
    border-color var(--d-2) var(--ease);
}
.material-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
  border-color: var(--border-2);
}
.material-card--curso { --mat-accent: #e40ddb; }
.material-card--playbook { --mat-accent: #7a3ff2; }
.material-card--podcast { --mat-accent: #0ea5a0; }
.material-card--material { --mat-accent: #f59e0b; }

.material-card__media {
  position: relative;
  height: 108px;
}
.material-card__thumb {
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-2);
}
.material-card__thumb--icon {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--mat-accent) 12%, var(--surface));
  color: var(--mat-accent);
}
.material-card__thumb--icon svg { width: 34px; height: 34px; }
.material-card__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--mat-accent) 16%, #fff);
  color: var(--mat-accent);
  backdrop-filter: blur(2px);
}
/* Ações de admin (editar/excluir) — só no hover do card */
.material-card__actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--d-2) var(--ease);
}
.material-card:hover .material-card__actions { opacity: 1; }
.material-card__actions .btn-icon-mini {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.material-card__actions .btn-icon-mini:hover { background: #fff; color: var(--text-1); }
.material-card__actions .btn-icon-mini[data-action="delete"]:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.material-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-3) var(--s-3) var(--s-3);
  flex: 1;
}
.material-card__title {
  font-weight: 600;
  font-size: var(--t-base);
  line-height: 1.3;
  color: var(--text-1);
}
.material-card__desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.material-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-top: auto;
  padding-top: var(--s-2);
}
.material-card__meta {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-card__access {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--mat-accent);
  flex-shrink: 0;
}
.material-card__access svg { width: 13px; height: 13px; }

/* ── Empty state ── */
.cursos__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6);
  color: var(--text-3);
}
.cursos__empty svg { width: 36px; height: 36px; opacity: 0.5; }
/* `display:flex` sobrescreve o `[hidden]` do UA — sem isso a mensagem de
   "nenhum material" fica SEMPRE visível (apareceria mesmo com materiais). */
.cursos__empty[hidden] { display: none; }

/* ── Form do drawer (criar/editar) ── */
.material-form { display: flex; flex-direction: column; gap: var(--s-4); }
.material-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.material-form__field { display: flex; flex-direction: column; gap: 6px; }
.material-form__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-2);
}
.material-form__label em { color: var(--text-3); font-style: normal; font-weight: 400; }
.material-form input[type="text"],
.material-form input[type="url"],
.material-form textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--t-sm);
  font-family: inherit;
  color: var(--text-1);
  background: var(--surface);
}
.material-form input:focus,
.material-form textarea:focus {
  outline: none;
  border-color: var(--magenta);
}
.material-form textarea { resize: vertical; min-height: 64px; }
.field--block { width: 100%; }
.field--block select { width: 100%; }

/* Drawer de material totalmente branco (default do .drawer é --surface
   cinza-claro). Inclui o footer e a área abaixo dos botões, pra não sobrar
   faixa "morta" cinza embaixo. */
#materialDrawer { background: var(--bg); }
#materialDrawer .drawer__body > .modal__foot { background: var(--bg); }

/* ═══════════════════ Calendário de Entregas (tela do time) ═══════════════════
   Visão agregada: as calls de todos os clientes ativos numa grade mensal.
   Mesma linguagem visual do calendário individual (quadriculado, cabeçalhos
   roxos, marcador de hoje), mas com cada dia listando múltiplos eventos. */
.page--calendario { padding-bottom: var(--s-8); }

.cal-legend { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.cal-legend__item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: var(--t-sm); font-weight: 600;
}
.cal-legend__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

.cal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-3) 0 var(--s-5); }
.cal-stats { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--t-sm); }
.cal-stats__item {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 999px; font-weight: 500;
}
.cal-stats__item strong { font-family: var(--font-mono); font-weight: 800; }
.cal-stats__item--purple { background: var(--purple-soft); color: var(--purple); }
.cal-stats__item--magenta { background: var(--magenta-soft); color: var(--magenta-deep); }

/* Navegação entre meses */
.cal-nav { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.cal-nav__btn {
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--border-2); border-radius: var(--r-1);
  background: var(--bg); color: var(--text-2); cursor: pointer;
  display: grid; place-items: center;
}
.cal-nav__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text-1); }
.cal-nav__btn:disabled { opacity: 0.4; cursor: default; }
.cal-nav__btn svg { width: 18px; height: 18px; }
.cal-nav__label {
  min-width: 180px; text-align: center;
  padding: 6px 18px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-1);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-lg);
}

/* Grade quadriculada — 1px de gridline via gap sobre fundo border-2 */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--border-2);
  border: 1px solid var(--border-2); border-radius: var(--r-2); overflow: hidden;
}
.cal-wd {
  background: var(--purple); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-align: center; padding: 8px 0;
}
.cal-cell {
  background: var(--bg); min-height: 104px; padding: 6px;
  display: flex; flex-direction: column; gap: 5px;
}
.cal-cell.is-blank { background: var(--surface); }
.cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--magenta); }
.cal-cell__day { font-size: 12px; font-weight: 600; color: var(--text-3); font-family: var(--font-mono); }
.cal-cell.is-today .cal-cell__day { color: var(--magenta); font-weight: 800; }
.cal-cell__events { display: flex; flex-direction: column; gap: 4px; }
.cal-ev {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; text-align: left; padding: 4px 7px;
  border: 0; border-left: 3px solid var(--ev, var(--purple));
  border-radius: var(--r-1); cursor: pointer;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--ev, var(--purple)) 12%, var(--bg));
  transition: filter 0.12s;
}
.cal-ev:hover { filter: brightness(0.96); }
.cal-ev__client { font-size: 11px; font-weight: 700; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev__label { font-size: 10px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev__meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cal-ev__time { font-size: 10px; font-weight: 700; font-family: var(--font-mono); color: var(--text-2); }
/* Bolinha de status do sync com o Google: off (não conectado), pending, synced, error */
.cal-ev__sync { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cal-ev__sync--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); opacity: 0.55; }
.cal-ev__sync--pending { background: var(--warning); }
.cal-ev__sync--synced { background: var(--success); }
.cal-ev__sync--error { background: var(--danger); }


/* ── Toggle Entregas | Reuniões Internas + views ─────────────────────── */
.cal-switch {
  display: inline-flex; gap: 4px; margin: var(--s-3) 0;
  padding: 4px; border-radius: var(--r-2); background: var(--surface-2);
}
.cal-switch__btn {
  border: 0; cursor: pointer; padding: 7px 18px; border-radius: var(--r-1);
  background: transparent; color: var(--text-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  transition: background 0.12s, color 0.12s;
}
.cal-switch__btn:hover { color: var(--text-1); }
.cal-switch__btn.is-active { background: var(--bg); color: var(--purple); box-shadow: var(--shadow-1); }
.cal-view[hidden] { display: none; }

/* Botão "Nova Reunião" (view interna) */
.cal-newbtn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 16px; border-radius: var(--r-1); border: 0;
  background: var(--magenta); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  transition: filter 0.12s;
}
.cal-newbtn:hover { filter: brightness(1.06); }
.cal-newbtn svg { width: 16px; height: 16px; }

/* ── Card de conexão com o Google Calendar ───────────────────────────
   Base do sync bilateral. O encaixe real (OAuth + webhook) entra depois;
   por ora o botão é um stub que explica o próximo passo. */
.cal-gcal {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--bg); border: 1px solid var(--border-2); border-radius: var(--r-2);
  margin: var(--s-3) 0;
}
.cal-gcal__main { display: flex; align-items: center; gap: var(--s-3); min-width: 0; flex: 1; }
.cal-gcal__icon {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-1);
  display: grid; place-items: center;
  background: var(--purple-soft); color: var(--purple);
}
.cal-gcal__icon svg { width: 20px; height: 20px; }
.cal-gcal__text { min-width: 0; }
.cal-gcal__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 2px; }
.cal-gcal__title { font-family: var(--font-display); font-weight: 700; font-size: var(--t-base); color: var(--text-1); }
.cal-gcal__status {
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-3) 14%, var(--bg)); color: var(--text-2);
}
.cal-gcal.is-connected .cal-gcal__status { background: color-mix(in srgb, var(--success) 15%, var(--bg)); color: var(--success); }
.cal-gcal.is-connected .cal-gcal__icon { background: color-mix(in srgb, var(--success) 13%, var(--bg)); color: var(--success); }
.cal-gcal__btn {
  flex-shrink: 0; cursor: pointer;
  padding: 8px 18px; border-radius: var(--r-1); border: 0;
  background: var(--magenta); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm);
  transition: filter 0.12s;
}
.cal-gcal__btn:hover:not(:disabled) { filter: brightness(1.06); }
.cal-gcal__btn:disabled { opacity: 0.6; cursor: default; }

/* ── Modal de edição da call (estilo "Agendar Reunião") ──────────────
   Tudo que o usuário edita aqui é campo do evento do Google e sincroniza
   nos dois sentidos: data, horário, duração, agenda, observações, participantes. */
.cal-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.cal-modal[hidden] { display: none; }
.cal-modal__overlay { position: absolute; inset: 0; background: rgba(16, 18, 28, 0.55); }
.cal-modal__card {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; max-height: 90vh;
  background: var(--bg); border-radius: var(--r-4);
  box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; overflow: hidden;
}
.cal-modal__x {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-3); border-radius: var(--r-1); display: grid; place-items: center;
}
.cal-modal__x:hover { background: var(--surface-2); color: var(--text-1); }
.cal-modal__x svg { width: 18px; height: 18px; }
.cal-modal__head {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-6) var(--s-6) var(--s-3);
}
.cal-modal__dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 8px; background: var(--purple); }
.cal-modal__heads { min-width: 0; }
.cal-modal__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--t-xl); color: var(--text-1); }
.cal-modal__client { margin: 2px 0 0; font-size: var(--t-base); color: var(--text-3); }
.cal-modal__body {
  flex: 1; overflow-y: auto;
  padding: var(--s-2) var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
}

/* Campos do modal */
.cal-f { display: flex; flex-direction: column; gap: 7px; }
/* o atributo `hidden` (toggle por JS) precisa vencer o display:flex acima */
.cal-f[hidden] { display: none; }
.cal-f__row { display: flex; gap: var(--s-3); }
.cal-f__row .cal-f { flex: 1; min-width: 0; }
.cal-f__label { font-size: var(--t-sm); font-weight: 600; color: var(--text-2); }
.cal-f__label i { color: var(--magenta); font-style: normal; }
.cal-f__input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; border: 1px solid var(--border-2); border-radius: var(--r-2);
  font-family: var(--font-body); font-size: var(--t-base); color: var(--text-1); background: var(--bg);
}
.cal-f__input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px var(--purple-soft); }
.cal-f__input.is-invalid { border-color: var(--danger); }
.cal-f__select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  padding-right: 42px;  /* espaço pro chevron custom (afastado da borda) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A6F87' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
}
.cal-f__textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

/* Info card (título auto / link do Meet) */
.cal-f__info {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 12px 14px; border-radius: var(--r-2); background: var(--surface-2);
}
.cal-f__info[hidden] { display: none; }  /* [hidden] precisa vencer o display:flex */
.cal-f__info-ico { flex-shrink: 0; width: 24px; height: 24px; color: var(--text-3); display: grid; place-items: center; }
.cal-f__info-ico svg { width: 20px; height: 20px; }
.cal-f__info-ico--meet { color: var(--success); }
.cal-f__info-text { flex: 1; min-width: 0; }
.cal-f__info-title { font-weight: 700; font-size: var(--t-sm); color: var(--text-1); word-break: break-word; }
.cal-f__info-sub { font-size: var(--t-sm); color: var(--text-3); margin-top: 1px; }
.cal-f__meet-badge {
  flex-shrink: 0; padding: 5px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--success) 40%, var(--bg));
  color: var(--success); font-weight: 700; font-size: var(--t-sm); white-space: nowrap;
}

/* Participantes */
.cal-parts { display: flex; flex-direction: column; gap: var(--s-2); }
.cal-parts__empty { font-size: var(--t-sm); color: var(--text-3); padding: 2px 0; }
.cal-part {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 9px 12px; border-radius: var(--r-2); background: var(--surface-2);
}
.cal-part__info { flex: 1; min-width: 0; }
.cal-part__name { font-weight: 700; font-size: var(--t-sm); color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-part__email { font-size: var(--t-sm); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-part__rm {
  flex-shrink: 0; width: 28px; height: 28px; border: 0; background: transparent;
  color: var(--danger); cursor: pointer; border-radius: var(--r-1); font-size: 16px; line-height: 1;
}
.cal-part__rm:hover { background: color-mix(in srgb, var(--danger) 12%, var(--bg)); }
.cal-part-add { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.cal-part-add .cal-f__input { flex: 1; }
.cal-part-add__btn {
  flex-shrink: 0; width: 46px; border: 1px solid var(--border-2); border-radius: var(--r-2);
  background: var(--bg); color: var(--text-2); cursor: pointer; display: grid; place-items: center;
}
.cal-part-add__btn:hover { background: var(--surface-2); color: var(--purple); }
.cal-part-add__btn svg { width: 18px; height: 18px; }

/* ── Recorrência (picker estilo Google, inline no modal) ───────────── */
.cal-recur {
  margin-top: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--bg-2);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.cal-recur[hidden], .cal-recur__wd[hidden] { display: none; }  /* hidden vence o display:flex */
.cal-recur__row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.cal-recur__lbl { font-size: var(--t-sm); color: var(--text-2); }
.cal-recur__num { width: 64px; flex: 0 0 auto; }
.cal-recur__freq { width: auto; min-width: 110px; flex: 0 0 auto; }
.cal-recur__date { width: auto; max-width: 160px; }
.cal-recur__wd { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-recur__wd-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text-2); font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font-display);
}
.cal-recur__wd-btn:hover { border-color: var(--purple); }
.cal-recur__wd-btn.is-on { background: var(--purple); border-color: var(--purple); color: #fff; }
.cal-recur__end { display: flex; flex-direction: column; gap: var(--s-2); }
.cal-recur__opt { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: var(--text-1); }
.cal-recur__opt input[type="date"],
.cal-recur__opt input[type="number"] { width: auto; max-width: 150px; }

/* Status do sync (mesma régua das bolinhas dos chips) */
.cal-modal__sync { display: flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--text-3); }
.cal-modal__sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--text-3); }
.cal-modal__sync--off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.cal-modal__sync--pending::before { background: var(--warning); }
.cal-modal__sync--synced::before { background: var(--success); }
.cal-modal__sync--error::before { background: var(--danger); }

/* Rodapé */
.cal-modal__foot {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6); border-top: 1px solid var(--border-2);
}
.cal-modal__foot-spacer { flex: 1; }
.cal-modal__open, .cal-modal__save, .cal-modal__delete {
  cursor: pointer; padding: 11px 22px; border-radius: var(--r-2);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-base);
  transition: filter 0.12s, background 0.12s;
}
.cal-modal__open { border: 1px solid var(--border-2); background: var(--bg); color: var(--text-2); }
.cal-modal__open:hover { background: var(--surface-2); color: var(--text-1); }
.cal-modal__save { border: 0; background: var(--magenta); color: #fff; }
.cal-modal__save:hover:not(:disabled) { filter: brightness(1.06); }
.cal-modal__save:disabled { opacity: 0.6; cursor: default; }
.cal-modal__delete {
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--bg));
  background: var(--bg); color: var(--danger);
}
.cal-modal__delete:hover { background: color-mix(in srgb, var(--danger) 10%, var(--bg)); }
.cal-modal__delete[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   FERRAMENTAS — hub + Biblioteca de Sections + Gerador
   ═══════════════════════════════════════════════════════════════════════ */

/* Botão pequeno (reusa cores de .btn--magenta / .btn--ghost) */
.btn--sm {
  height: 30px;
  padding: 0 var(--s-3);
  font-size: var(--t-xs);
  border-radius: var(--r-1);
}
.btn--sm [data-icon] svg { width: 14px; height: 14px; }

/* ── Hub ─────────────────────────────────────────────────────────────── */
.page--ferramentas { padding: var(--s-6); max-width: 1100px; }

.tools-grid {
  margin-top: var(--s-6);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-4);
}
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  transition: transform var(--d-2) var(--ease), border-color var(--d-2) var(--ease),
    box-shadow var(--d-2) var(--ease);
  position: relative;
}
.tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--magenta-edge);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.tool-card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  background: var(--magenta-soft);
  color: var(--magenta);
}
.tool-card__icon svg { width: 26px; height: 26px; display: block; }
.tool-card__icon--ai {
  background: linear-gradient(135deg, var(--magenta), var(--purple-bright));
  color: #fff;
}
.tool-card__body { flex: 1; }
/* Badge no canto superior direito do card (fora do fluxo) — assim a tag não
   empurra o título pra baixo e os títulos dos cards ficam na mesma altura. */
.tool-card__tag {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--magenta);
  background: var(--magenta-soft);
  padding: 2px 8px; border-radius: var(--r-pill);
}
.tool-card__title { font-size: var(--t-lg); font-weight: 600; margin: 0; }
.tool-card__go {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  font-size: var(--t-sm); font-weight: 600; color: var(--magenta);
}
.tool-card__go svg { width: 15px; height: 15px; display: block; }

/* ── Biblioteca: header / back ───────────────────────────────────────── */
.page--sections { padding: var(--s-6); }
.page--sections .page__head { align-items: flex-end; }
.back-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-xs); font-weight: 500; color: var(--text-3);
  margin-bottom: var(--s-2);
  transition: color var(--d-2) var(--ease);
}
.back-link:hover { color: var(--magenta); }
.back-link svg { width: 14px; height: 14px; display: block; }

.sections-empty {
  margin-top: var(--s-8);
  text-align: center; color: var(--text-3);
}
.sections-empty svg { width: 40px; height: 40px; opacity: 0.4; }
.sections-empty p { margin-top: var(--s-2); font-size: var(--t-sm); }

/* ── Biblioteca: grupos por categoria ────────────────────────────────── */
.sections-group { margin-top: var(--s-6); }
.sections-group__head {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.sections-group__icon { color: var(--text-3); }
.sections-group__icon svg { width: 18px; height: 18px; display: block; }
.sections-group__title { font-size: var(--t-md); font-weight: 600; margin: 0; }
.sections-group__count {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--text-3); background: var(--bg-2);
  padding: 1px 8px; border-radius: var(--r-pill);
}

.sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}

/* ── Card de section ─────────────────────────────────────────────────── */
.section-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--d-2) var(--ease), border-color var(--d-2) var(--ease),
    box-shadow var(--d-2) var(--ease);
}
.section-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
}
.section-card__media { position: relative; }
.section-card__menu {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 4px;
  opacity: 0; transition: opacity var(--d-2) var(--ease);
}
.section-card:hover .section-card__menu { opacity: 1; }
.section-card__menu .btn-icon-mini {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  backdrop-filter: blur(4px);
}
.section-card__body { padding: var(--s-3) var(--s-4) var(--s-2); flex: 1; }
.section-card__title { font-size: var(--t-md); font-weight: 600; margin: 0 0 4px; }
.section-card__desc {
  font-size: var(--t-xs); color: var(--text-2); line-height: 1.5; margin: 0 0 var(--s-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.section-card__by { font-size: 11px; color: var(--text-3); }
.section-card__foot {
  display: flex; gap: var(--s-2);
  padding: 0 var(--s-4) var(--s-4);
}
.section-card__foot .btn--sm { flex: 1; justify-content: center; }
.btn.is-copied { background: var(--success); color: #fff; }

/* ── Vitrine Shopify (frame de navegador com o screenshot) ───────────── */
.shop-frame {
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--bg-2);
}
.section-card__media .shop-frame { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.shop-frame__bar {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 10px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.shop-frame__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-3, #cfcfd6); }
.shop-frame__url {
  margin-left: 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-3);
  background: var(--surface); border-radius: var(--r-pill);
  padding: 2px 10px; flex: 1; text-align: center;
}
.shop-frame__body { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface); }
.shop-frame--big .shop-frame__body { aspect-ratio: auto; height: 300px; }

/* iframe da prévia gerada do .liquid (render escalado pra caber no frame) */
.sp-frame { border: 0; display: block; background: #fff; }
.sp-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4); text-align: center;
  font-size: var(--t-xs); color: var(--text-3); line-height: 1.5;
}

/* ── Form de section (drawer) — usa o padrão .onb-form do sistema ────── */
/* Código .liquid em monospace (vence .field-group textarea). */
.field-group textarea.section-code {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere;
  min-height: 220px; resize: vertical;
}
/* Caixa de prévia ao vivo no form */
.section-preview-box .shop-frame__body { aspect-ratio: auto; height: 240px; }

/* Select de categoria (Ferramentas): seta custom mais pra dentro (harmônica),
   no lugar da seta nativa colada na borda. */
.field-group select.cat-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 34px;
}

/* ── Ver código (drawer) ─────────────────────────────────────────────── */
.section-view__preview { margin-bottom: var(--s-4); }
.section-view__codehead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-2);
}
.section-view__codelabel { font-size: var(--t-xs); font-weight: 600; color: var(--text-2); }
.section-view__codelabel code {
  font-family: var(--font-mono); background: var(--bg-2); padding: 1px 6px; border-radius: 4px;
}
.section-view__code {
  margin: 0;
  background: var(--surface-2, var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-4);
  max-height: 48vh; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  color: var(--text-1);
  /* Quebra linha em vez de rolar na horizontal — não precisa arrastar pro
     lado (que acabava arrastando a tela). Preserva indentação. */
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}

/* ── Gerador de Sections (agente de IA) ──────────────────────────────── */
.page--gerador { padding: var(--s-6); }
/* `.page__title .page__title-tag` (não só `.page__title-tag`) pra vencer
   `.page__title span`, que pinta a 2ª palavra de magenta — sem isso o "IA"
   ficaria magenta sobre fundo magenta (invisível). */
.page__title .page__title-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: #fff; background: linear-gradient(135deg, var(--magenta), var(--purple-bright));
  padding: 3px 9px; border-radius: var(--r-pill);
  vertical-align: middle; margin-left: var(--s-2);
}
.gen-layout {
  display: grid;
  grid-template-columns: minmax(320px, 380px) 1fr;
  gap: var(--s-5);
  align-items: start;
  margin-top: var(--s-5);
}
.gen-config {
  display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--s-5);
  /* Coluna de inputs rola sozinha (fica fixa abaixo do topbar de 64px) —
     evita descer a página toda quando o formulário é longo. */
  --gen-sticky-top: calc(64px + var(--s-4));
  position: sticky;
  top: var(--gen-sticky-top);
  max-height: calc(100vh - var(--gen-sticky-top) - var(--s-4));
  overflow-y: auto;
}
.gen-config .btn--large { justify-content: center; }
.gen-grid-block {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--s-5); margin-top: var(--s-5);
}
.gen-config__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }

/* Toggle "nome próprio" — checkbox enxuto + label inline (não herda o input 38px) */
.ds-toggle {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); color: var(--text-2); cursor: pointer; line-height: 1.4;
}
.ds-toggle input[type="checkbox"] {
  width: 15px; height: 15px; flex: none; margin: 0; padding: 0;
  accent-color: var(--magenta); cursor: pointer;
}

/* Uploader do print de referência (Gerador) — botão de fundo rosa transparente */
.section-upload { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; }
.section-upload__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-2);
  background: var(--magenta-soft);
  color: var(--magenta);
  font-size: var(--t-sm); font-weight: 500;
  transition: all var(--d-2) var(--ease);
}
.section-upload__btn:hover { background: color-mix(in srgb, var(--magenta) 16%, var(--bg)); }
.section-upload__btn svg { width: 15px; height: 15px; display: block; }
.section-upload__preview { position: relative; width: 160px; }
.section-upload__preview img {
  width: 100%; border-radius: var(--r-2); border: 1px solid var(--border); display: block;
}
.section-upload__remove {
  position: absolute; top: 6px; right: 6px;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 50%;
}
.section-upload__remove svg { width: 13px; height: 13px; display: block; }
.section-upload__preview[hidden] { display: none; }

.gen-stage {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--s-5);
  min-height: 420px;
  /* Sem isso, a coluna 1fr não encolhe abaixo do min-content (iframe 1200px +
     código) e a página ganha scroll horizontal — o swipe arrastava a tela. */
  min-width: 0;
}

/* idle */
.gen-idle { text-align: center; padding: var(--s-8) var(--s-4); color: var(--text-3); }
.gen-idle svg { width: 44px; height: 44px; color: var(--magenta); opacity: 0.6; }
.gen-idle h2 { font-size: var(--t-lg); color: var(--text-1); margin: var(--s-3) 0 var(--s-2); }
.gen-idle p { font-size: var(--t-sm); max-width: 360px; margin: 0 auto; line-height: 1.55; }

/* run / steps */
.gen-run { padding: var(--s-4) var(--s-2); }
.gen-run__title { font-size: var(--t-md); font-weight: 600; margin-bottom: var(--s-4); }
.gen-steps { display: flex; flex-direction: column; gap: var(--s-3); }
.gen-step {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-sm); color: var(--text-3);
  transition: color var(--d-2) var(--ease);
}
.gen-step__mark {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  display: grid; place-items: center;
}
.gen-step__mark svg { width: 12px; height: 12px; display: block; opacity: 0; color: #fff; }
.gen-step.is-active { color: var(--text-1); }
.gen-step.is-active .gen-step__mark {
  border-color: var(--magenta-edge);
  border-top-color: var(--magenta);
  animation: gen-spin 0.7s linear infinite;
}
.gen-step.is-done { color: var(--text-2); }
.gen-step.is-done .gen-step__mark {
  background: var(--success); border-color: var(--success); animation: none;
}
.gen-step.is-done .gen-step__mark svg { opacity: 1; }
@keyframes gen-spin { to { transform: rotate(360deg); } }

/* Guarda contra [hidden]: display:flex sobrescreve o display:none nativo
   do atributo [hidden] — sem isso, o resultado vaza no estado idle. */
.gen-idle[hidden], .gen-run[hidden], .gen-result[hidden] { display: none; }

/* result */
.gen-result { display: flex; flex-direction: column; gap: var(--s-3); }
.gen-result__previewlabel { font-size: var(--t-xs); font-weight: 600; color: var(--text-2); }
/* Aviso de "isto é exemplo automático" (injetado por agent_status.js quando a IA
   está desligada ou falhou). Âmbar e não magenta de propósito: o botão "Copiar
   todos" logo abaixo é magenta, e aviso competindo com CTA vira decoração. */
.gen-alert {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-3); border-radius: var(--r-2);
  background: var(--warning-soft); border: 1px solid var(--warning-edge);
  font-size: var(--t-sm); line-height: 1.5; color: var(--text-1);
}
.gen-alert svg { width: 18px; height: 18px; color: var(--warning); flex: 0 0 auto; margin-top: 1px; }
.gen-alert strong { color: var(--warning); }
.gen-sim {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--bg));
  padding: 1px 7px; border-radius: var(--r-pill); margin-left: 4px;
}
.gen-result__actions { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.gen-result__actions .btn { flex: 1; justify-content: center; }
.gen-save {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); background: var(--bg-2); border-radius: var(--r-2);
}
.gen-save .btn { align-self: flex-end; }
.gen-save[hidden] { display: none; }

@media (max-width: 900px) {
  .gen-layout { grid-template-columns: 1fr; }
  /* Empilhado: sem coluna fixa/rolagem própria — volta ao fluxo normal. */
  .gen-config { position: static; max-height: none; overflow: visible; }
}

/* ── Pesquisa de Mercado (reusa o chassi .gen-* do agente) ───────────── */
.page--pesquisa { padding: var(--s-6); }

.pq-report { display: flex; flex-direction: column; gap: var(--s-4); }

/* Oportunidade recomendada — card de destaque */
.pq-opp {
  background: linear-gradient(135deg, var(--magenta-soft), var(--bg-2));
  border: 1px solid var(--magenta-edge);
  border-radius: var(--r-3);
  padding: var(--s-5);
}
.pq-opp__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.pq-opp__eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta);
}
.pq-opp__score {
  font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 700;
  color: var(--success); white-space: nowrap;
}
.pq-opp__score small { font-size: 11px; font-weight: 600; color: var(--text-3); }
.pq-opp__niche { font-size: var(--t-xl, 1.5rem); font-weight: 700; margin: var(--s-2) 0 var(--s-2); }
.pq-opp__thesis { font-size: var(--t-sm); color: var(--text-2); line-height: 1.6; margin: 0; }

/* Blocos do relatório */
.pq-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: var(--s-4) var(--s-5);
}
.pq-block__title {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3);
  margin: 0 0 var(--s-3);
}
.pq-text { font-size: var(--t-sm); color: var(--text-1); line-height: 1.6; margin: 0; }
.pq-list, .pq-steps-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.pq-list li, .pq-steps-list li { font-size: var(--t-sm); color: var(--text-1); line-height: 1.55; }
.pq-list { list-style: none; padding-left: 0; }
.pq-list li { position: relative; padding-left: 20px; }
.pq-list li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--magenta);
}
.pq-steps-list { counter-reset: pq; list-style: none; padding-left: 0; gap: 10px; }
.pq-steps-list li { counter-increment: pq; position: relative; padding-left: 32px; }
.pq-steps-list li::before {
  content: counter(pq); position: absolute; left: 0; top: -1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--magenta-soft); color: var(--magenta);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  display: grid; place-items: center;
}

/* Métricas em grade */
.pq-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-4); }
.pq-metric {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--border);
}
.pq-metric__label { font-size: var(--t-xs); color: var(--text-3); }
.pq-metric__value { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); }

.pq-disclaimer {
  font-size: var(--t-xs); color: var(--text-3); font-style: italic;
  margin: var(--s-2) 0 0; text-align: center;
}

@media (max-width: 560px) {
  .pq-metrics { grid-template-columns: 1fr; }
}

/* ── Gerador de Criativos (reusa o chassi .gen-* do agente) ──────────── */
.page--criativos { padding: var(--s-6); }
.cg-picker__lede { font-size: var(--t-sm); color: var(--text-3); margin: var(--s-2) 0 var(--s-5); }

/* Picker dos 6 templates */
.cg-templates {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1100px) { .cg-templates { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .cg-templates { grid-template-columns: repeat(2, 1fr); } }
.cg-tpl {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  cursor: pointer; text-align: center;
  transition: transform var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.cg-tpl:hover {
  transform: translateY(-3px); border-color: var(--magenta-edge);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
/* Slot de altura fixa: centraliza a mini-proporção (que varia de altura),
   pra os títulos dos formatos alinharem horizontalmente entre os cards. */
.cg-tpl__thumb { height: 64px; display: grid; place-items: center; }
.cg-tpl__ratio {
  display: block; background: var(--magenta-soft);
  border: 1px solid var(--magenta-edge); border-radius: 6px;
}
.cg-tpl__ratio--4-5 { width: 40px; height: 50px; }
.cg-tpl__ratio--1-1 { width: 48px; height: 48px; }
.cg-tpl__ratio--9-16 { width: 34px; height: 60px; }
.cg-tpl__ratio--16-9 { width: 64px; height: 36px; }
.cg-tpl__name { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); }

/* Cabeçalho da ferramenta */
.cg-back { margin-bottom: var(--s-3); background: none; border: 0; cursor: pointer; padding: 0; }
.cg-toolhead { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.cg-toolhead__name { font-size: var(--t-lg); font-weight: 600; margin: 0; }
.cg-ratio-badge {
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3);
  background: var(--bg-2); padding: 3px 10px; border-radius: var(--r-pill);
}

/* Declaração pré-geração */
.cg-brief {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2);
  padding: var(--s-4); display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--s-4);
}
.cg-brief__title {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--magenta);
}
.cg-brief__title svg { width: 14px; height: 14px; display: block; }
.cg-brief__row { font-size: var(--t-sm); color: var(--text-1); line-height: 1.5; }
.cg-brief__row b { color: var(--text-2); font-weight: 600; }
.cg-brief__meta { display: flex; flex-wrap: wrap; gap: 6px var(--s-4); align-items: center; font-size: var(--t-sm); }
.cg-brief__pal { display: inline-flex; align-items: center; gap: 6px; }
.cg-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid rgba(0, 0, 0, 0.12); }

/* Galeria de imagens (placeholders fiéis ao formato) */
.cg-gallery { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-start; }
.cg-gallery__note { width: 100%; font-size: var(--t-xs); color: var(--text-3); }
.cg-shot { display: flex; flex-direction: column; gap: 6px; }
.cg-shot__canvas {
  position: relative; border-radius: var(--r-2); overflow: hidden;
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.cg-shot--4-5 .cg-shot__canvas { width: 190px; aspect-ratio: 4 / 5; }
.cg-shot--1-1 .cg-shot__canvas { width: 210px; aspect-ratio: 1 / 1; }
.cg-shot--9-16 .cg-shot__canvas { width: 150px; aspect-ratio: 9 / 16; }
.cg-shot--16-9 .cg-shot__canvas { width: 330px; aspect-ratio: 16 / 9; }
.cg-shot__prod { max-width: 62%; max-height: 56%; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35)); }
.cg-shot__prod--ph {
  width: 54%; height: 40%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.16); border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 10px; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
}
.cg-shot__hl {
  position: absolute; left: 12px; right: 12px; bottom: 14px;
  color: #fff; font-weight: 800; font-size: 14px; line-height: 1.15; text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.cg-shot__fmt {
  position: absolute; top: 8px; right: 8px;
  font-family: var(--font-mono); font-size: 9px; color: #fff;
  background: rgba(0, 0, 0, 0.38); padding: 2px 6px; border-radius: 4px;
}
.cg-shot__cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cg-shot__capmeta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cg-shot__caplabel { font-size: var(--t-xs); font-weight: 600; color: var(--text-1); }
.cg-shot__tag { font-size: 10px; color: var(--text-3); }
.cg-shot__dl { flex-shrink: 0; }

/* ══ Ferramentas SEO / Legal / Velocidade (reusam o chassi .gen-*) ══════ */
.page--titulos,
.page--descricoes,
.page--legais,
.page--velocidade { padding: var(--s-6); }

/* Nota de rodapé "simulado" — comum às 4 tools */
.gen-foot-note {
  font-size: var(--t-xs); color: var(--text-3); font-style: italic;
  margin: var(--s-2) 0 0; line-height: 1.5;
}
.gen-foot-note b { color: var(--text-2); font-style: normal; }

/* Botão de copiar inline (item de lista) — Títulos + Descrições */
.tl-copy {
  flex-shrink: 0; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--surface); color: var(--text-3); cursor: pointer;
  transition: all var(--d-2) var(--ease);
}
.tl-copy:hover { color: var(--magenta); border-color: var(--magenta-edge); background: var(--magenta-soft); }
.tl-copy.is-copied { color: var(--success); border-color: var(--success); }
.tl-copy svg { width: 13px; height: 13px; display: block; }

/* ── Gerador de Títulos (SEO) ────────────────────────────────────────── */
.tl-list { display: flex; flex-direction: column; gap: var(--s-3); }
.tl-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
}
.tl-item__orig { font-size: var(--t-xs); color: var(--text-3); }
.tl-item__row { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); }
.tl-item__title { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); line-height: 1.4; }
.tl-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: var(--r-pill);
}
.tl-count--ok   { color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--bg)); }
.tl-count--warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--bg)); }
.tl-count--bad  { color: var(--danger);  background: color-mix(in srgb, var(--danger) 14%, var(--bg)); }
.tl-tip { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-xs); color: var(--text-2); line-height: 1.45; }
.tl-tip svg { width: 13px; height: 13px; color: var(--magenta); flex-shrink: 0; margin-top: 1px; }
.tl-teach-row { margin-top: 8px; }
.tl-teach {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--t-xs); cursor: pointer;
  padding: 4px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--success); background: var(--success-soft); color: var(--success);
  transition: background .15s, color .15s, opacity .15s;
}
.tl-teach:hover { background: var(--success); color: #fff; }
.tl-teach.is-copied { background: var(--success); color: #fff; cursor: default; }
.tl-teach[disabled] { cursor: default; opacity: .9; }
.tl-teach svg { width: 13px; height: 13px; display: block; }
.tl-extra { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-xs); color: var(--text-2); margin: 4px 0; }
.tl-extra > span { display: flex; align-items: center; gap: var(--s-2); }
.tl-extra b { color: var(--text-1); font-weight: 600; }
.tl-warn { font-size: 10.5px; color: var(--warning, #b45309); }
.tl-badge { display: inline-block; font-family: var(--font-mono); font-size: 10px; color: var(--magenta); border: 1px solid currentColor; border-radius: var(--r-pill); padding: 0 6px; vertical-align: 1px; }
.tl-badge--warn { color: var(--warning, #b45309); }
.tl-kw { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-2); padding: 7px 10px; margin: 4px 0 8px; }
.tl-kw__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tl-kw__top svg { width: 13px; height: 13px; color: var(--magenta); flex-shrink: 0; }
.tl-kw__chip { font-weight: 600; font-size: var(--t-sm); color: var(--text-1); }

/* ── Grade de Produtos (compartilhada Títulos/Descrições) ────────────── */
.pg-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; }
.pg-table th { text-align: left; font-size: var(--t-xs); font-weight: 600; color: var(--text-2); padding: 7px 14px 7px 10px; border-bottom: 1px solid var(--border); background: var(--bg-2); white-space: nowrap; }  /* 10px = borda(1)+padding(9) do input, p/ o título alinhar com o texto do campo */
.pg-table th:nth-child(1) { width: 15%; }  /* produto */
.pg-table th:nth-child(2) { width: 11%; }  /* nome próprio (toggle) */
.pg-table th:nth-child(3) { width: 11%; }  /* marca do produto (toggle) */
.pg-table th:nth-child(4) { width: 10%; }  /* gênero */
.pg-table th:nth-child(5) { width: 10%; }  /* faixa etária */
.pg-table th:nth-child(6) { width: 11%; }  /* material */
.pg-table th:nth-child(7) { width: 9%; }   /* cor */
.pg-table th:nth-child(8) { width: 15%; }  /* características */
/* 9ª coluna (ações: ficha técnica + remover) = largura automática */
.pg-table.no-brand .pg-col-brand { display: none; }            /* marca só com revenda */
.pg-table.no-propername .pg-col-propername { display: none; }  /* nome próprio só com toggle */
.pg-table td { padding: 4px 14px 4px 0; }  /* sem padding-left: borda do input fica rente ao título e à borda do card */
.pg-in { width: 100%; border: 1px solid var(--border); border-radius: var(--r-1); background: var(--surface); font-size: var(--t-sm); padding: 7px 9px; color: inherit; transition: border-color .12s, box-shadow .12s; }
.pg-in::placeholder { color: var(--text-3); }
.pg-in:hover { border-color: var(--text-3); }
.pg-in:focus { border-color: var(--magenta); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--magenta) 18%, transparent); }
.pg-sel {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  padding-right: 22px;
}
.pg-scroll { overflow-x: auto; }
.pg-del-cell { width: 30px; text-align: center; }
.pg-del { background: none; border: 0; cursor: pointer; color: var(--text-3); padding: 4px; vertical-align: middle; }
.pg-del:hover { color: var(--danger); }
.pg-del svg { width: 13px; height: 13px; }
.pg-foot { display: flex; align-items: center; margin-top: 6px; }
.pg-add { display: inline-flex; align-items: center; gap: 4px; line-height: 1; font-size: var(--t-xs); color: var(--magenta); background: none; border: 0; cursor: pointer; }
.pg-add svg { display: block; }
.pg-add:hover { text-decoration: underline; }

/* Painel de ficha técnica por produto (modo rich — só Descrições). */
.pg-del-cell { white-space: nowrap; text-align: right; vertical-align: middle; }
.pg-rich-toggle {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  background: none; border: 0; cursor: pointer; color: var(--text-3);
  padding: 4px 6px; margin-right: 2px; font-size: var(--t-xs); font-family: inherit;
  line-height: 1; white-space: nowrap; transition: color .12s;
}
.pg-rich-toggle:hover,
.pg-rich-toggle.is-open { color: var(--magenta); }
.pg-rich-toggle svg { display: block; width: 13px; height: 13px; transition: transform .15s; }
.pg-rich-toggle.is-open svg { transform: rotate(45deg); }
.pg-rich > td { background: var(--bg-2); padding: 10px 12px 14px; }
.pg-rich__hint { font-size: var(--t-xs); color: var(--text-3); margin: 0 0 8px; }
.pg-rich__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); }
.pg-rich__field { display: flex; flex-direction: column; gap: 3px; }
.pg-rich__lbl { font-size: var(--t-xs); font-weight: 600; color: var(--text-2); }

/* ── Gerador de Descrições (SEO) ─────────────────────────────────────── */
.ds-list { display: flex; flex-direction: column; gap: var(--s-4); }
.ds-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.ds-item__name { font-size: var(--t-md); font-weight: 700; margin: 0; }

/* Output em 3 blocos copia-cola (corpo · meta · SEO). */
.ds-block { display: flex; flex-direction: column; gap: 6px; }
.ds-block__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.ds-block__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.ds-block__body {
  margin: 0; font-family: inherit; font-size: var(--t-sm); color: var(--text-1);
  line-height: 1.6; white-space: pre-wrap; word-break: break-word;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--s-3) var(--s-4);
}
.ds-block__meta {
  margin: 0; font-size: var(--t-sm); color: var(--text-1); line-height: 1.5;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--s-3);
}
.ds-block--seo { background: var(--bg-2); border-radius: var(--r-2); padding: var(--s-3); gap: var(--s-2); }
.ds-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-tag {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: var(--r-pill);
}

/* ── Biblioteca de Páginas Legais ────────────────────────────────────── */
/* Reserva 2 linhas no label dos grids: mantém os inputs alinhados mesmo quando
   um rótulo quebra de linha (ex.: "Prazo de postagem (separação)"). */
.page--legais .onb-form__grid .onb-form__label {
  display: flex;
  align-items: flex-end;
  min-height: 2.5em;
  line-height: 1.25;
}
.lg-pages { display: flex; flex-direction: column; gap: var(--s-2); }
/* Sub-campo condicional (ex.: transportadoras): logo abaixo da opção, alinhado
   à esquerda na mesma reta dos checkboxes (o gap da lista cuida do espaçamento). */
.lg-subfield { margin: 0; }
.lg-subfield[hidden] { display: none; }
.lg-page-opt {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: var(--t-sm); color: var(--text-1);
}
.lg-page-opt input { width: 16px; height: 16px; accent-color: var(--magenta); cursor: pointer; }
.lg-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-tab {
  font-size: var(--t-xs); font-weight: 600; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer;
  transition: all var(--d-2) var(--ease);
}
.lg-tab:hover { border-color: var(--magenta-edge); color: var(--text-1); }
.lg-tab.is-active { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.lg-doc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--s-5);
  max-height: 520px; overflow-y: auto;
}
.lg-doc__title { font-size: var(--t-lg); font-weight: 700; margin: 0 0 var(--s-3); }
.lg-doc__h { font-size: var(--t-sm); font-weight: 700; color: var(--magenta); margin: var(--s-3) 0 4px; }
.lg-doc__p { font-size: var(--t-sm); color: var(--text-1); line-height: 1.6; margin: 0 0 6px; }

/* ── Análise de Velocidade de Site ───────────────────────────────────── */
.sp-report { display: flex; flex-direction: column; gap: var(--s-4); }
.sp-top {
  display: flex; align-items: center; gap: var(--s-5);
  background: linear-gradient(135deg, var(--magenta-soft), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--s-5);
}
.sp-gauge { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.sp-gauge__svg { width: 128px; height: 128px; transform: rotate(-90deg); }
.sp-gauge__bg { fill: none; stroke: var(--border); stroke-width: 10; }
.sp-gauge__val { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--ease); }
.sp-gauge__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sp-gauge__score { font-family: var(--font-mono); font-size: 30px; font-weight: 800; line-height: 1; }
.sp-gauge__max { font-size: 11px; color: var(--text-3); }
.sp-top__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sp-top__eyebrow { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.sp-top__band { font-size: var(--t-lg); font-weight: 700; }
.sp-top__url { font-size: var(--t-xs); color: var(--text-3); word-break: break-all; }

.sp-head {
  display: flex; align-items: center; gap: var(--s-3);
  border-radius: var(--r-2); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); line-height: 1.45;
}
.sp-head svg { width: 18px; height: 18px; flex-shrink: 0; }
.sp-head b { font-family: var(--font-mono); }
.sp-head--ok { background: color-mix(in srgb, var(--success) 12%, var(--bg)); color: var(--text-1); }
.sp-head--ok svg { color: var(--success); }
.sp-head--warn { background: color-mix(in srgb, var(--warning) 14%, var(--bg)); color: var(--text-1); }
.sp-head--warn svg { color: var(--warning); }

.sp-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); }
.sp-block__title {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); margin: 0 0 var(--s-3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
}
.sp-proj {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--magenta); background: var(--magenta-soft); padding: 2px 8px; border-radius: var(--r-pill);
}
.sp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.sp-metric { display: flex; align-items: center; gap: 8px; padding: var(--s-2) var(--s-3); background: var(--bg-2); border-radius: var(--r-2); }
.sp-metric__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sp-metric__key { font-size: var(--t-xs); color: var(--text-2); flex: 1; }
.sp-metric__val { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 700; color: var(--text-1); }
.sp-metric--good .sp-metric__dot { background: var(--success); }
.sp-metric--warn .sp-metric__dot { background: var(--warning); }
.sp-metric--bad .sp-metric__dot { background: var(--danger); }

.sp-recs { display: flex; flex-direction: column; gap: var(--s-3); }
.sp-rec { display: flex; align-items: flex-start; gap: var(--s-3); }
.sp-rec__save {
  flex-shrink: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--bg));
  padding: 3px 8px; border-radius: var(--r-pill); min-width: 48px; text-align: center;
}
.sp-rec__body { display: flex; flex-direction: column; gap: 2px; }
.sp-rec__title { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); }
.sp-rec__detail { font-size: var(--t-xs); color: var(--text-3); line-height: 1.45; }

@media (max-width: 560px) {
  .sp-metrics { grid-template-columns: 1fr 1fr; }
  .sp-top { flex-direction: column; text-align: center; }
}

/* ══ Configurações (admin) ══════════════════════════════════════════════ */
.page--config { padding: var(--s-6); max-width: 1080px; }
.cfg-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--s-6); margin-top: var(--s-5); align-items: start; }
@media (max-width: 820px) { .cfg-layout { grid-template-columns: 1fr; } }

.cfg-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: var(--s-5); }
.cfg-nav__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 9px var(--s-3); border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 500; color: var(--text-2);
  background: none; border: 0; cursor: pointer; text-align: left;
  transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.cfg-nav__item svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.cfg-nav__item:hover { background: var(--bg-2); color: var(--text-1); }
.cfg-nav__item.is-active { background: var(--magenta-soft); color: var(--magenta); font-weight: 600; }

.cfg-content { min-width: 0; }
.cfg-sec__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-2); }
.cfg-sec__title { font-size: var(--t-lg); font-weight: 700; margin: 0; }

/* Listas (Equipe, Squads, Quadros) */
.cfg-list { display: flex; flex-direction: column; gap: var(--s-2); }
.cfg-row {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--s-3) var(--s-4);
}
.cfg-row__main { flex: 1; min-width: 0; }
.cfg-row__name { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); display: flex; align-items: center; gap: var(--s-2); }
.cfg-row__sub { font-size: var(--t-xs); color: var(--text-3); }
.cfg-row__actions { display: flex; gap: 4px; flex-shrink: 0; }
.cfg-badge {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--magenta); background: var(--magenta-soft); padding: 1px 7px; border-radius: var(--r-pill);
}
.cfg-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }
.cfg-iconbtn {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--surface); color: var(--text-3); cursor: pointer; transition: all var(--d-2) var(--ease);
}
.cfg-iconbtn:hover { color: var(--magenta); border-color: var(--magenta-edge); background: var(--magenta-soft); }
.cfg-iconbtn--danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 10%, var(--bg)); }
.cfg-iconbtn[disabled] { opacity: 0.35; cursor: default; }
.cfg-iconbtn svg { width: 14px; height: 14px; display: block; }

.cfg-inline {
  flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--text-1);
  border: 1px solid transparent; border-radius: var(--r-1); padding: 5px 8px; background: var(--bg-2);
}
.cfg-inline:focus { border-color: var(--magenta-edge); background: var(--surface); outline: none; }
/* Picker visual de ícone do catálogo — botão mostra o ícone atual + grade */
.cfg-iconpick { position: relative; flex-shrink: 0; }
.cfg-iconpick__btn {
  display: flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: var(--r-2);
  background: var(--surface); color: var(--magenta); cursor: pointer;
  padding: 5px 8px; transition: border-color var(--d-2) var(--ease);
}
.cfg-iconpick__btn:hover { border-color: var(--magenta-edge); }
.cfg-iconpick__cur svg { width: 18px; height: 18px; display: block; }
.cfg-iconpick__chev { color: var(--text-3); display: grid; place-items: center; }
.cfg-iconpick__chev svg { width: 12px; height: 12px; }
.cfg-iconpick__pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  width: 232px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.cfg-iconpick__pop[hidden] { display: none; }  /* hidden vence o display:grid */
.cfg-iconpick__opt {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--r-2);
  background: var(--bg-2); color: var(--text-2); cursor: pointer;
  transition: all var(--d-2) var(--ease);
}
.cfg-iconpick__opt:hover { color: var(--magenta); border-color: var(--magenta-edge); background: var(--magenta-soft); }
.cfg-iconpick__opt.is-on { color: var(--magenta); border-color: var(--magenta); background: var(--magenta-soft); }
.cfg-iconpick__opt svg { width: 16px; height: 16px; display: block; }

/* Cards (Entregas, Marca) */
.cfg-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--s-5); margin-bottom: var(--s-4); }
.cfg-card__title { font-size: var(--t-md); font-weight: 700; margin: 0 0 var(--s-2); }
.cfg-card__sub { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin: var(--s-4) 0 var(--s-2); }
.cfg-card__note { display: flex; align-items: flex-start; gap: 6px; font-size: var(--t-xs); color: var(--text-3); margin: 0 0 var(--s-3); line-height: 1.45; }
.cfg-card__note svg { width: 13px; height: 13px; color: var(--warning); flex-shrink: 0; margin-top: 1px; }
.cfg-card__foot { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); }

/* Agentes de IA — direcionamentos (treino) + memória de exemplos */
.cfg-agents { display: flex; flex-direction: column; gap: var(--s-4); }
.cfg-agent__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-2); }
.cfg-agent__head .cfg-card__title { margin: 0; }
.cfg-agent__count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }
.cfg-agent__directives { width: 100%; min-height: 120px; resize: vertical; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-2); font-family: inherit; font-size: var(--t-sm); line-height: 1.5; color: inherit; background: var(--surface); }
.cfg-agent__directives:focus { border-color: var(--magenta); outline: none; }
/* Modelo + temperatura por agente (R5). Fica acima dos direcionamentos porque é a
   escolha que muda custo e qualidade de tudo que aquele agente produz. */
.cfg-agent__model {
  margin: 0 0 var(--s-3); padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2);
}
.cfg-agent__modelrow { display: flex; align-items: flex-end; gap: var(--s-2); flex-wrap: wrap; }
.cfg-agent__modellabel {
  display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px;
  font-size: var(--t-xs); font-weight: 600; color: var(--text-2);
}
.cfg-agent__modellabel--temp { flex: 0 0 110px; }
.cfg-agent__modelsel, .cfg-agent__temp {
  height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-1);
  background: var(--bg); color: inherit; font-family: inherit; font-size: var(--t-sm); font-weight: 400;
}
.cfg-agent__modelsel:focus, .cfg-agent__temp:focus { border-color: var(--magenta); outline: none; }
.cfg-agent__temp:disabled { background: var(--bg-2); color: var(--text-4); cursor: not-allowed; }
.cfg-agent__modelsave { height: 36px; flex: 0 0 auto; }
.cfg-agent__modelnote { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--text-3); line-height: 1.5; }

/* Playbooks (contexto de referência) por agente */
.cfg-pb { margin-top: var(--s-4); border-top: 1px solid var(--border); padding-top: var(--s-3); }
.cfg-pb__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-2); }
.cfg-pb__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 600; color: var(--text-2); }
.cfg-pb__addbtn { display: inline-flex; align-items: center; gap: 4px; line-height: 1; font-size: var(--t-xs); color: var(--magenta); background: none; border: 0; cursor: pointer; }
.cfg-pb__addbtn svg { display: block; }
.cfg-pb__addbtn:hover { text-decoration: underline; }
.cfg-pb__list { display: flex; flex-direction: column; gap: 4px; }
.cfg-pb__row { display: flex; align-items: center; gap: var(--s-2); padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r-1); background: var(--surface); }
.cfg-pb__chk { flex: none; }
.cfg-pb__rowtitle { flex: 1; font-size: var(--t-sm); color: var(--text-1); }
.cfg-pb__empty { font-size: var(--t-xs); color: var(--text-3); margin: 0; line-height: 1.45; }
.cfg-pb__form { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-2); padding: var(--s-3); border: 1px dashed var(--border); border-radius: var(--r-2); background: var(--bg-2); }
.cfg-pb__form[hidden] { display: none; }
.cfg-pb__titlein { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-1); font-size: var(--t-sm); background: var(--surface); }
.cfg-pb__content { width: 100%; min-height: 100px; resize: vertical; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-2); font-family: inherit; font-size: var(--t-sm); line-height: 1.5; background: var(--surface); }
.cfg-pb__formfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.cfg-pb__file { cursor: pointer; }

.cfg-calls, .cfg-gcals { display: flex; flex-direction: column; gap: var(--s-2); }
.cfg-callrow, .cfg-gcalrow { display: flex; align-items: center; gap: var(--s-2); }
.cfg-mini { display: flex; flex-direction: column; font-size: 10px; color: var(--text-3); gap: 2px; }
.cfg-mini input { width: 64px; padding: 5px 6px; border: 1px solid var(--border); border-radius: var(--r-1); font-size: var(--t-sm); background: var(--surface); }
.cfg-callrow input[type="color"] { width: 32px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-1); background: none; cursor: pointer; }
.cfg-radio { display: grid; place-items: center; }
.cfg-addrow {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2);
  font-size: var(--t-sm); color: var(--magenta); background: none; border: 0; cursor: pointer;
}
.cfg-addrow svg { width: 14px; height: 14px; }

/* Marca */
.cfg-brand { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 560px) { .cfg-brand { grid-template-columns: 1fr; } }
.cfg-color { display: flex; align-items: center; gap: var(--s-2); }
.cfg-color input[type="color"] { width: 42px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-2); background: none; cursor: pointer; }
.cfg-color__hex { width: 110px; font-family: var(--font-mono); font-size: var(--t-sm); padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); text-transform: uppercase; }
.cfg-brand__preview { display: flex; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
.cfg-brand__chip { color: #fff; font-size: var(--t-sm); font-weight: 600; padding: 8px 16px; border-radius: var(--r-pill); border: 0; }
.cfg-foot-note { font-size: var(--t-xs); color: var(--text-3); font-style: italic; margin: var(--s-2) 0 0; }

/* Swatches de avatar + checkbox no form */
.cfg-sws { display: flex; gap: var(--s-2); }
.cfg-sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.cfg-sw.is-sel { border-color: var(--text-1); box-shadow: 0 0 0 2px var(--surface) inset; }
.cfg-check { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--text-1); cursor: pointer; margin-top: var(--s-2); }
.cfg-check input { width: 16px; height: 16px; accent-color: var(--magenta); cursor: pointer; }

/* Overlay + modal de form */
.cfg-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(20, 6, 30, 0.5); padding: var(--s-4);
}
.cfg-overlay[hidden] { display: none; }
.cfg-modal {
  width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--r-3);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28); display: flex; flex-direction: column; max-height: 88vh;
}
.cfg-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--border); }
.cfg-modal__head h3 { margin: 0; font-size: var(--t-md); font-weight: 700; }
.cfg-modal__close { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); cursor: pointer; border-radius: var(--r-2); }
.cfg-modal__close:hover { background: var(--bg-2); color: var(--text-1); }
.cfg-modal__body { padding: var(--s-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-4); }
.cfg-modal__foot { display: flex; justify-content: flex-end; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--border); }

/* ══ Meu Perfil ═════════════════════════════════════════════════════════ */
.page--perfil { padding: var(--s-6); max-width: 620px; }
.pf-wrap { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }
.pf-head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
/* Avatares (Equipe + Perfil): .av só tem o gradiente (av--*) — o resto
   (centralizar a inicial, cor, raio) vem por contexto, igual .resp .av. */
.cfg-row > .av, .pf-head .av {
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; font-weight: 700; flex-shrink: 0;
}
.cfg-row > .av { width: 38px; height: 38px; font-size: var(--t-sm); }
.pf-head .av { width: 56px; height: 56px; font-size: var(--t-lg); }
.pf-wrap input[readonly] { background: var(--bg-2); color: var(--text-2); cursor: default; }

/* ── Permissões: cards por cargo (Configurações) ── */
.perm-grid {
  display: grid;
  /* min(100%, …) evita estouro horizontal quando a coluna de conteúdo é estreita. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--s-5);
}
.perm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.perm-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.perm-card__title { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--t-md); color: var(--text-1); }
.perm-card__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.perm-card__users { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); color: var(--text-3); background: var(--bg-2); border-radius: var(--r-pill); padding: 3px 9px; white-space: nowrap; }
.perm-card__users svg { width: 13px; height: 13px; }
.perm-card__count { font-size: var(--t-sm); color: var(--text-3); margin-top: -4px; }
.perm-card__grps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-5); }
.perm-card__grp { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-2); min-width: 0; }
.perm-card__gico { display: inline-grid; place-items: center; width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.perm-card__gico svg { width: 15px; height: 15px; }
.perm-card__glabel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perm-card__gcount { font-family: var(--font-mono); font-weight: 600; color: var(--success); white-space: nowrap; }
.perm-card__gcount i { color: var(--text-3); font-style: normal; font-weight: 400; }
.perm-card__grp.is-empty { color: var(--text-4); }
.perm-card__grp.is-empty .perm-card__gico,
.perm-card__grp.is-empty .perm-card__gcount { color: var(--text-4); }
.perm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.perm-card__total { font-size: var(--t-sm); color: var(--text-3); }
.perm-card__acts { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

/* Editor de permissões (modal) */
.perm-edit { display: flex; flex-direction: column; gap: var(--s-5); }
.perm-edit__grp { display: flex; flex-direction: column; gap: 2px; }
.perm-edit__ghead { display: flex; align-items: center; gap: var(--s-2); font-weight: 600; font-size: var(--t-sm); color: var(--text-1); margin-bottom: 4px; }
.perm-edit__ghead svg { width: 15px; height: 15px; color: var(--text-3); }
.perm-edit__item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-2); padding: 5px 6px; border-radius: var(--r-2); cursor: pointer; }
.perm-edit__item:hover { background: var(--bg-2); }
.perm-edit__item input { accent-color: var(--magenta); }
.pf-head__name { font-size: var(--t-lg); font-weight: 700; color: var(--text-1); }
.pf-head__role { font-size: var(--t-sm); color: var(--text-3); }
.pf-readonly { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-2); }
.pf-readonly p { font-size: var(--t-sm); color: var(--text-1); margin: 4px 0 0; }
.pf-pref { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.pf-pref__name { font-size: var(--t-sm); font-weight: 600; color: var(--text-1); }
.pf-pref__sub { font-size: var(--t-xs); color: var(--text-3); }

/* "Meu perfil" no dropdown do usuário + link Configurações no rodapé */
.user-menu__sep { height: 1px; background: var(--border); margin: 4px 0; }
.user-menu__profileico { display: grid; place-items: center; background: var(--magenta-soft); color: var(--magenta); }
.user-menu__profileico svg { width: 16px; height: 16px; }
/* Hover instantâneo (sem transição): a transição de `color` re-rasterizava o
   texto + os traços finos do ícone de engrenagem no fundo escuro a cada frame,
   o que parecia um "tremor". Trocar cor/fundo na hora elimina isso. */
.sidebar__cfglink { text-decoration: none; transition: none; }
/* Sem isso o <span data-icon> fica display:block + line-height da fonte (~21px
   pra um SVG de 16px) → o baseline desalinha e treme no repaint do hover.
   Caixa fixa centralizada (igual .nav-item .ico) deixa o ícone estável. */
.sidebar__cfglink [data-icon] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; line-height: 0; flex-shrink: 0;
}
.sidebar__cfglink [data-icon] svg { width: 16px; height: 16px; display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN (Fase 06) — página standalone, sem sidebar nem topbar.
   Roxo é navegação, magenta é ação: fundo roxo, único CTA magenta.
   ═══════════════════════════════════════════════════════════════════════ */
.layout-login {
  min-height: 100vh; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--purple-deep, #2E0847);
  padding: var(--s-4);
}
.login { width: 100%; max-width: 380px; }
.login__card {
  display: flex; flex-direction: column;
  background: var(--bg); border-radius: var(--r-3);
  padding: var(--s-6) var(--s-5); box-shadow: 0 18px 50px rgba(11, 4, 16, 0.35);
}
.login__logo { width: 34px; height: auto; margin: 0 auto var(--s-3); }
.login__title {
  margin: 0; text-align: center;
  font-size: var(--t-xl); font-weight: 700; color: var(--text-1);
}
.login__sub {
  margin: 6px 0 var(--s-5); text-align: center;
  font-size: var(--t-sm); color: var(--text-3);
}
/* Mensagem única para e-mail inexistente e senha errada — diferenciar entregaria
   de graça quem tem conta. O texto vem do servidor. */
.login__erro {
  margin: 0 0 var(--s-4); padding: 10px 12px; border-radius: var(--r-2);
  background: var(--danger-soft, rgba(215, 44, 90, 0.10));
  border: 1px solid var(--danger, #D72C5A);
  color: var(--danger, #D72C5A); font-size: var(--t-sm); line-height: 1.45;
}
.login__label {
  font-size: var(--t-xs); font-weight: 600; color: var(--text-2); margin-bottom: 4px;
}
.login__input {
  height: 42px; padding: 0 12px; margin-bottom: var(--s-4);
  border: 1px solid var(--border-2); border-radius: var(--r-2);
  background: var(--surface); color: inherit;
  font-family: inherit; font-size: var(--t-sm);
}
.login__input:focus { border-color: var(--magenta); outline: none; }
.login__btn { justify-content: center; height: 44px; margin-top: var(--s-2); }
.login__ajuda {
  margin: var(--s-4) 0 0; text-align: center;
  font-size: var(--t-xs); color: var(--text-3);
}