@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
  /* Reset global pra eliminar a moldura branca do browser */
  html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
  body { background: var(--cf-bg-page); }
  :root {
    /* Paleta principal — neutros com leve tom lavanda (coesão com a marca) */
    --cf-bg-page: #F8F8FA;
    --cf-bg-card: #FFFFFF;
    --cf-bg-sidebar: #FCFCFD;
    --cf-bg-elevated: #FFFFFF;
    --cf-bg-subtle: #F3F3F6;
    --cf-bg-muted: #ECECF0;
    --cf-bg-hover: #F2F2F5;

    /* Bordas */
    --cf-border: #E9E8ED;
    --cf-border-strong: #D9D7DE;
    --cf-border-subtle: #F2F1F5;

    /* Texto */
    --cf-text: #18151F;
    --cf-text-secondary: #4E4A5A;
    --cf-text-muted: #6F6B7C;
    --cf-text-subtle: #A29EAF;
    --cf-text-on-accent: #FFFFFF;

    /* Acento roxo */
    --cf-accent: #7C3AED;
    --cf-accent-hover: #6D28D9;
    --cf-accent-active: #5B21B6;
    --cf-accent-bg: #F4F1FD;
    --cf-accent-bg-hover: #EAE4FB;
    --cf-accent-border: #DCD3F8;
    --cf-accent-text: #5B21B6;

    /* Estados de Saúde */
    --cf-aberto: #10B981;
    --cf-aberto-bg: #ECFDF5;
    --cf-aberto-text: #065F46;
    --cf-atencao: #F59E0B;
    --cf-atencao-bg: #FFFBEB;
    --cf-atencao-text: #92400E;
    --cf-urgente: #F97316;
    --cf-urgente-bg: #FFF7ED;
    --cf-urgente-text: #9A3412;
    --cf-sobehoje: #3B82F6;
    --cf-sobehoje-bg: #EFF6FF;
    --cf-sobehoje-text: #1E40AF;
    --cf-atrasado: #EF4444;
    --cf-atrasado-bg: #FEF2F2;
    --cf-atrasado-text: #991B1B;
    --cf-concluida: #6B7280;
    --cf-concluida-bg: #F3F4F6;
    --cf-concluida-text: #374151;

    /* Pill ativa */
    --cf-pill-active-bg: #1B1825;
    --cf-pill-active-text: #FFFFFF;

    /* Sombras — difusas e suaves, tom levemente roxo */
    --cf-shadow-xs: 0 1px 2px rgba(23, 17, 43, 0.05);
    --cf-shadow-sm: 0 1px 3px rgba(23, 17, 43, 0.07), 0 1px 2px rgba(23, 17, 43, 0.04);
    --cf-shadow-md: 0 6px 16px -4px rgba(23, 17, 43, 0.09), 0 2px 6px -2px rgba(23, 17, 43, 0.05);
    --cf-shadow-lg: 0 16px 32px -8px rgba(23, 17, 43, 0.13), 0 6px 12px -4px rgba(23, 17, 43, 0.06);
    --cf-shadow-focus: 0 0 0 3px rgba(124, 58, 237, 0.16);

    /* Geometria */
    --cf-radius-sm: 7px;
    --cf-radius-md: 10px;
    --cf-radius-lg: 14px;
    --cf-radius-xl: 18px;
    --cf-radius-pill: 999px;

    --cf-sidebar-w: 224px;
    --cf-sidebar-w-collapsed: 64px;
  }

  /* ================= DARK MODE ================= */
  /* Dark com tom roxo profundo — identidade Cadence (coeso com a intro) */
  .cf-app[data-theme="dark"] {
    /* Backgrounds: escala escura com sub-tom violeta */
    --cf-bg-page: #100F12;
    --cf-bg-card: #17171A;
    --cf-bg-sidebar: #131216;
    --cf-bg-elevated: #1E1D23;
    --cf-bg-subtle: #1B1A1F;
    --cf-bg-muted: #222127;
    --cf-bg-hover: #1F1E24;

    /* Bordas discretas com o mesmo sub-tom */
    --cf-border: #2B2A31;
    --cf-border-strong: #3D3B44;
    --cf-border-subtle: #222127;

    /* Texto: branco levemente quente */
    --cf-text: #ECEAF4;
    --cf-text-secondary: #B3AFC2;
    --cf-text-muted: #8D899C;
    --cf-text-subtle: #6B6779;
    --cf-text-on-accent: #FFFFFF;

    /* Roxo vibrante em dark */
    --cf-accent: #A78BFA;
    --cf-accent-hover: #B9A3FC;
    --cf-accent-active: #8B6CF0;
    --cf-accent-bg: rgba(167, 139, 250, 0.13);
    --cf-accent-bg-hover: rgba(167, 139, 250, 0.22);
    --cf-accent-border: rgba(167, 139, 250, 0.38);
    --cf-accent-text: #C7B7FD;

    /* Saúdes: cores claras + backgrounds translúcidos */
    --cf-aberto: #34D399;
    --cf-aberto-bg: rgba(52, 211, 153, 0.12);
    --cf-aberto-text: #6EE7B7;
    --cf-atencao: #FBBF24;
    --cf-atencao-bg: rgba(251, 191, 36, 0.12);
    --cf-atencao-text: #FCD34D;
    --cf-urgente: #FB923C;
    --cf-urgente-bg: rgba(251, 146, 60, 0.12);
    --cf-urgente-text: #FDBA74;
    --cf-sobehoje: #60A5FA;
    --cf-sobehoje-bg: rgba(96, 165, 250, 0.12);
    --cf-sobehoje-text: #93C5FD;
    --cf-atrasado: #F87171;
    --cf-atrasado-bg: rgba(248, 113, 113, 0.12);
    --cf-atrasado-text: #FCA5A5;
    --cf-concluida: #6B6779;
    --cf-concluida-bg: rgba(107, 103, 121, 0.16);
    --cf-concluida-text: #B3AFC2;

    /* Pill ativa em dark: roxo do accent */
    --cf-pill-active-bg: #A78BFA;
    --cf-pill-active-text: #0F0E14;

    /* Botão primário em dark: texto escuro sobre roxo claro (contraste WCAG AA) */
    --cf-btn-primary-text: #0F0E14;

    /* Sombras: presentes mas discretas */
    --cf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --cf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --cf-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
    --cf-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
    --cf-shadow-focus: 0 0 0 3px rgba(167, 139, 250, 0.28);
  }

  /* Reset local */
  .cf-app *, .cf-app *::before, .cf-app *::after { box-sizing: border-box; }
  /* Fonte do sistema na RAIZ: cobre elementos fora do .cf-app (FAB, toasts, intro,
     popovers e qualquer overlay futuro anexado ao body). Sem isso, eles caem na
     serifada default do navegador. */
  body { font-family: 'Roboto', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; }
  /* Controles de formulário não herdam fonte por padrão — força herança global */
  button, input, select, textarea { font-family: inherit; }

  .cf-app { font-family: 'Roboto', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; color: var(--cf-text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

  /* ============= SCROLLBAR CUSTOMIZADA GLOBAL ============= */
  /* Firefox */
  .cf-app *, .cf-app { scrollbar-width: thin; scrollbar-color: var(--cf-border-strong) transparent; }
  /* WebKit (Chrome, Safari, Edge) */
  .cf-app *::-webkit-scrollbar { width: 10px; height: 10px; }
  .cf-app *::-webkit-scrollbar-track { background: transparent; }
  .cf-app *::-webkit-scrollbar-thumb { background: var(--cf-border-strong); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; transition: background 0.15s; }
  .cf-app *::-webkit-scrollbar-thumb:hover { background: var(--cf-text-muted); background-clip: padding-box; }
  .cf-app *::-webkit-scrollbar-corner { background: transparent; }
  /* Scrollbar mais sutil em fundos escuros do dark mode */
  .cf-app[data-theme="dark"] *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); background-clip: padding-box; }
  .cf-app[data-theme="dark"] *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); background-clip: padding-box; }
  .cf-app[data-theme="light"] { color-scheme: light; }
  .cf-app[data-theme="dark"] { color-scheme: dark; }
  .cf-app button { font-family: inherit; }

  /* Layout principal */
  .cf-app { display: flex; height: 100vh; max-height: 100vh; min-height: 600px; background: var(--cf-bg-page); overflow: hidden; position: relative; box-sizing: border-box; }
  .cf-sidebar { width: var(--cf-sidebar-w); background: var(--cf-bg-sidebar); border-right: 1px solid var(--cf-border); display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.2s ease; }
  .cf-app.cf-sidebar-collapsed .cf-sidebar { width: var(--cf-sidebar-w-collapsed); }
  .cf-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

  /* Sidebar */
  .cf-sidebar-brand { padding: 18px 20px 14px; display: flex; align-items: center; gap: 10px; }
  .cf-sidebar-logo { width: 32px; height: 32px; border-radius: var(--cf-radius-md); background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 14px; flex-shrink: 0; box-shadow: var(--cf-shadow-sm); }
  .cf-sidebar-logo { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: none; border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.30)); }
  .cf-sidebar-brand-text { display: flex; flex-direction: column; gap: 0; white-space: nowrap; overflow: hidden; line-height: 1.15; }
  .cf-brand-eyebrow { font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--cf-text-subtle); }
  .cf-brand-name { font-weight: 650; font-size: 15px; color: var(--cf-text); letter-spacing: 0.01em; }
  .cf-app.cf-sidebar-collapsed .cf-sidebar-brand-text { display: none; }
  .cf-sidebar-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .cf-sidebar-section-label { font-size: 11px; font-weight: 600; color: var(--cf-text-subtle); text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 12px 6px; }
  .cf-app.cf-sidebar-collapsed .cf-sidebar-section-label { display: none; }
  .cf-app.cf-sidebar-collapsed .cf-nav-gestor-only.cf-sidebar-section-label { display: none !important; }
  .cf-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--cf-radius-md); cursor: pointer; color: var(--cf-text-secondary); font-size: 14px; font-weight: 500; border: none; background: transparent; text-align: left; transition: all 0.12s; position: relative; }
  .cf-nav-item:hover { background: var(--cf-bg-hover); color: var(--cf-text); }
  .cf-nav-item.active { background: var(--cf-accent-bg); color: var(--cf-accent-text); }
  .cf-nav-item.active::before { content: ''; position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px; background: var(--cf-accent); border-radius: 2px; }
  .cf-nav-item i { font-size: 18px; flex-shrink: 0; width: 18px; text-align: center; }
  .cf-nav-item-label { white-space: nowrap; overflow: hidden; }
  .cf-app.cf-sidebar-collapsed .cf-nav-item-label { display: none; }
  .cf-app.cf-sidebar-collapsed .cf-nav-tag-temp { display: none; }
  .cf-app.cf-sidebar-collapsed .cf-nav-item { justify-content: center; padding: 10px; }
  .cf-app.cf-sidebar-collapsed .cf-nav-item.active::before { display: none; }
  .cf-sidebar-footer { padding: 12px; border-top: 1px solid var(--cf-border-subtle); }
  .cf-sidebar-status { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--cf-radius-md); background: var(--cf-bg-subtle); font-size: 12px; color: var(--cf-text-secondary); }
  .cf-app.cf-sidebar-collapsed .cf-sidebar-status { justify-content: center; padding: 8px; }
  .cf-app.cf-sidebar-collapsed .cf-sidebar-status-text { display: none; }
  .cf-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-aberto); flex-shrink: 0; }
  .cf-sync-dot.syncing { background: var(--cf-atencao); animation: pulse 1.2s ease-in-out infinite; }
  .cf-sync-dot.error { background: var(--cf-atrasado); }
  @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } }
  /* Selo AO VIVO com pulso vermelho (espelha a bolinha de sync) */
  .cf-live-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--cf-atrasado-text, #DC2626); font-weight: 800; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; }
  .cf-live-tag:hover { text-decoration: underline; }
  /* Jogo não finalizado: não entra no boletim. Só o esmaecido sinaliza; cursor normal. */
  .cf-copa-mini.cf-jogo-bloqueado, .cf-copa-card.cf-jogo-bloqueado, .cf-bracket-card.cf-jogo-bloqueado { opacity: 0.55; cursor: default; }
  .cf-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #DC2626; flex-shrink: 0; animation: pulse 1.2s ease-in-out infinite; }

  /* Main / Topbar */
  .cf-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--cf-border); background: var(--cf-bg-card); gap: 16px; flex-wrap: wrap; }
  .cf-topbar-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cf-topbar h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -0.01em; color: var(--cf-text); }
  .cf-topbar-subtitle { font-size: 13px; color: var(--cf-text-muted); }
  .cf-topbar-actions { display: flex; gap: 8px; align-items: center; }
  /* User chip (email do usuário logado) */
  .cf-user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; background: var(--cf-bg-subtle); border: 1px solid var(--cf-border); border-radius: 999px; font-size: 12px; color: var(--cf-text-muted); max-width: 240px; cursor: pointer; font-family: inherit; transition: all 0.14s; }
  .cf-user-chip:hover { border-color: var(--cf-accent); background: var(--cf-accent-bg); }
  .cf-user-chip-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--cf-accent); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; text-transform: uppercase; flex-shrink: 0; overflow: hidden; }
  .cf-user-chip-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--cf-text); }
  .cf-user-chip-caret { color: var(--cf-text-muted); flex-shrink: 0; }
  .cf-sidebar-toggle { background: transparent; border: 1px solid var(--cf-border); border-radius: var(--cf-radius-md); padding: 7px 9px; cursor: pointer; color: var(--cf-text-secondary); display: inline-flex; align-items: center; font-size: 16px; transition: all 0.12s; }
  .cf-sidebar-toggle:hover { background: var(--cf-bg-hover); color: var(--cf-text); }

  /* Conteúdo principal */
  .cf-content { padding: 24px; padding-bottom: 104px; overflow-y: auto; flex: 1; }

  /* Loading */
  .cf-loading { text-align: center; padding: 64px 24px; color: var(--cf-text-muted); font-size: 14px; }

  /* Cards */
  .cf-card { background: var(--cf-bg-card); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--cf-shadow-xs); transition: box-shadow 0.15s; }
  .cf-card:hover { box-shadow: var(--cf-shadow-sm); }
  .cf-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
  .cf-card-title { font-size: 15px; font-weight: 600; color: var(--cf-text); margin: 0; display: flex; align-items: center; gap: 8px; }
  .cf-card-title i { font-size: 18px; color: var(--cf-text-muted); }
  .cf-card-subtitle { font-size: 13px; color: var(--cf-text-muted); }

  /* Métricas */
  .cf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .cf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .cf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .cf-metric { background: var(--cf-bg-card); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-lg); padding: 16px 18px; box-shadow: var(--cf-shadow-xs); position: relative; overflow: hidden; }
  .cf-metric-clickable { cursor: pointer; transition: all 0.12s; }
  .cf-metric-clickable:hover { transform: translateY(-1px); box-shadow: var(--cf-shadow-md); border-color: var(--cf-accent-border); }
  .cf-metric-clickable::after { content: '→'; position: absolute; top: 14px; right: 16px; color: var(--cf-text-muted); font-size: 14px; opacity: 0; transition: opacity 0.12s; }
  .cf-metric-clickable:hover::after { opacity: 0.6; }
  .cf-metric-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--cf-text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
  .cf-metric-label i { font-size: 14px; }
  .cf-metric-value { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--cf-text); }
  .cf-metric-trend { font-size: 12px; margin-top: 8px; color: var(--cf-text-muted); font-weight: 500; }
  .cf-metric.cf-metric-alert { background: var(--cf-atrasado-bg); border-color: #FECACA; }
  .cf-metric.cf-metric-alert .cf-metric-value { color: var(--cf-atrasado-text); }
  .cf-metric.cf-metric-alert .cf-metric-label { color: var(--cf-atrasado); }

  /* Linhas (listas) */
  .cf-row { display: flex; align-items: center; gap: 12px; padding: 12px 12px; border-radius: var(--cf-radius-md); font-size: 14px; cursor: pointer; transition: background 0.1s; }
  .cf-row + .cf-row { margin-top: 2px; }
  .cf-row:hover { background: var(--cf-bg-hover); }
  .cf-row.pending { opacity: 0.55; }
  .cf-row-color { width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
  .cf-row-body { flex: 1; min-width: 0; }
  .cf-row-title { font-weight: 600; font-size: 14px; color: var(--cf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cf-row-title-num { color: var(--cf-text-muted); font-weight: 500; margin-left: 4px; }
  .cf-row-subtitle { font-size: 12px; color: var(--cf-text-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .cf-row-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
  .cf-row-meta-channels { width: 78px; text-align: right; }
  .cf-row-meta-avatar { width: 30px; display: flex; justify-content: center; }
  .cf-row-meta-saude { min-width: 96px; display: flex; justify-content: flex-end; }

  /* Avatar */
  .cf-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 11px; flex-shrink: 0; letter-spacing: 0.02em; overflow: hidden; }
  .cf-avatar-foto { padding: 0; }
  .cf-avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* Imagem de avatar dentro de botões/spans (owner do Kanban, chip do header, etc) */
  .cf-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
  .cf-has-foto { overflow: hidden; padding: 0 !important; }
  .cf-kanban-card-owner.cf-has-foto, .cf-dash-acao-owner.cf-has-foto, .cf-user-chip-avatar.cf-has-foto { padding: 0 !important; overflow: hidden; }
  .cf-kanban-card-owner.cf-has-foto .cf-avatar-img, .cf-dash-acao-owner.cf-has-foto .cf-avatar-img { width: 100%; height: 100%; }


  /* Saúde pills */
  .cf-saude { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 9px 3px 8px; border-radius: var(--cf-radius-pill); white-space: nowrap; }
  .cf-saude::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .cf-saude-em-aberto { background: var(--cf-aberto-bg); color: var(--cf-aberto-text); }
  .cf-saude-atencao { background: var(--cf-atencao-bg); color: var(--cf-atencao-text); }
  .cf-saude-urgente { background: var(--cf-urgente-bg); color: var(--cf-urgente-text); }
  .cf-saude-sobe-hoje { background: var(--cf-sobehoje-bg); color: var(--cf-sobehoje-text); }
  .cf-saude-atrasado { background: var(--cf-atrasado-bg); color: var(--cf-atrasado-text); }
  .cf-saude-concluida { background: var(--cf-concluida-bg); color: var(--cf-concluida-text); }

  /* Channel pills */
  .cf-channels { display: inline-flex; gap: 3px; }
  .cf-chan { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--cf-radius-sm); font-size: 10px; font-weight: 700; background: var(--cf-bg-subtle); color: var(--cf-text-secondary); letter-spacing: 0.02em; }

  /* IP badge no card do calendário */
  .cf-ip-badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 700; margin-left: 6px; letter-spacing: 0.02em; }

  /* Inputs */
  .cf-input, .cf-select, .cf-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--cf-border); border-radius: var(--cf-radius-md); background: var(--cf-bg-card); color: var(--cf-text); font-size: 14px; font-family: inherit; box-sizing: border-box; line-height: 1.4; transition: all 0.12s; }
  .cf-input:hover, .cf-select:hover, .cf-textarea:hover { border-color: var(--cf-border-strong); }
  .cf-input:focus, .cf-select:focus, .cf-textarea:focus { outline: none; border-color: var(--cf-accent); box-shadow: var(--cf-shadow-focus); }
  .cf-select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='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 10px center; background-size: 16px; padding-right: 34px; }

  /* Botões */
  .cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; background: var(--cf-accent); color: var(--cf-btn-primary-text, white); border: 1px solid var(--cf-accent); border-radius: var(--cf-radius-md); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.12s; box-shadow: var(--cf-shadow-xs); }
  .cf-btn:hover { background: var(--cf-accent-hover); border-color: var(--cf-accent-hover); box-shadow: var(--cf-shadow-sm); }
  .cf-btn:active { background: var(--cf-accent-active); transform: translateY(1px); box-shadow: var(--cf-shadow-xs); }
  .cf-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
  .cf-btn-ghost { background: var(--cf-bg-card); color: var(--cf-text); border-color: var(--cf-border); box-shadow: none; }
  .cf-btn-ghost:hover { background: var(--cf-bg-hover); border-color: var(--cf-border-strong); }
  .cf-btn-danger { background: var(--cf-atrasado); border-color: var(--cf-atrasado); color: white; }
  .cf-btn-danger:hover { background: #DC2626; border-color: #DC2626; }
  /* Dark mode: outline com texto vermelho (estilo ghost) */
  .cf-app[data-theme="dark"] .cf-btn-danger { background: transparent; color: #FCA5A5; border-color: #7F1D1D; box-shadow: none; }
  .cf-app[data-theme="dark"] .cf-btn-danger:hover { background: rgba(220, 38, 38, 0.12); border-color: #DC2626; color: #FCA5A5; }
  .cf-btn-sm { padding: 6px 12px; font-size: 13px; }
  .cf-btn.cf-icon-only { padding: 6px 8px; }
  .cf-btn.cf-icon-only > span { display: none; }
  .cf-btn-icon { padding: 8px; }

  /* Form */
  .cf-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .cf-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }
  .cf-field-label { font-size: 13px; color: var(--cf-text); margin-bottom: 6px; display: block; font-weight: 500; }
  .cf-field-help { font-size: 11px; color: var(--cf-text-muted); margin-left: 4px; font-weight: 400; }

  /* Checkbox row */
  .cf-checkbox-row { display: flex; gap: 18px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
  .cf-checkbox-row label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--cf-text); font-weight: 500; }
  .cf-checkbox-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--cf-accent); }

  /* Inline panel destacado */
  .cf-panel-accent { padding: 12px 14px; background: var(--cf-accent-bg); border: 1px solid var(--cf-accent-border); border-radius: var(--cf-radius-md); margin-bottom: 14px; }
  .cf-panel-accent .cf-field-label { color: var(--cf-accent-text); margin-bottom: 8px; }

  /* Calendário (a estrela) */
  .cf-cal-section { border-radius: 0; padding: 0; background: transparent; border: none; box-shadow: none; }
  .cf-cal-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
  .cf-cal-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .cf-cal-section-icon { width: 32px; height: 32px; border-radius: var(--cf-radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .cf-cal-section-icon i { font-size: 18px; }
  .cf-cal-section-prod .cf-cal-section-icon { background: var(--cf-atencao-bg); color: var(--cf-atencao-text); }
  .cf-cal-section-pub .cf-cal-section-icon { background: var(--cf-sobehoje-bg); color: var(--cf-sobehoje-text); }
  .cf-cal-section-title { font-size: 15px; font-weight: 600; color: var(--cf-text); line-height: 1.2; }
  .cf-cal-section-sub { font-size: 12px; color: var(--cf-text-muted); margin-top: 2px; }

  /* Calendário: grid única com 8 colunas (faixa W de 24px + 7 dias iguais).
     minmax(0, 1fr) garante larguras IGUAIS independente do conteúdo dentro. */
  .cf-calendar { display: grid; gap: 1px; background: var(--cf-border); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-md); overflow: hidden; }
  .cf-calendar-cols-7 { grid-template-columns: 24px repeat(7, minmax(0, 1fr)); }
  .cf-calendar-cols-5 { grid-template-columns: 24px repeat(5, minmax(0, 1fr)); }
  .cf-cal-header-spacer { background: var(--cf-bg-subtle); }
  .cf-cal-sprint-tag-block { background: linear-gradient(180deg, #1F2937 0%, #111827 100%); color: white; font-size: 10px; writing-mode: vertical-rl; text-orientation: mixed; display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: 0.06em; min-height: 110px; }
  .cf-app[data-theme="dark"] .cf-cal-sprint-tag-block { background: linear-gradient(180deg, #2B2A31 0%, #17171A 100%); color: var(--cf-text-secondary); }
  .cf-cal-sprint-empty { background: var(--cf-bg-card); min-height: 110px; }
  .cf-cal-header { background: var(--cf-bg-subtle); padding: 10px 6px; font-size: 11px; font-weight: 700; text-align: center; color: var(--cf-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
  .cf-cal-day { background: var(--cf-bg-card); min-height: 110px; padding: 8px 6px 6px; font-size: 12px; position: relative; transition: background 0.1s; }
  /* Grupos por IP dentro do dia */
  .cf-cal-ip-group { margin-top: 18px; }
  .cf-cal-ip-group:first-of-type { margin-top: 14px; }
  .cf-cal-ip-group-header { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cf-text-muted); margin-bottom: 8px; padding: 0 2px; line-height: 1.2; }
  .cf-cal-ip-group-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
  .cf-cal-day-other-month { background: var(--cf-bg-subtle); }
  .cf-cal-day-other-month .cf-cal-day-num { color: var(--cf-text-subtle); }
  /* Número do dia: dimensões FIXAS sempre (com ou sem indicador de hoje),
     pra a linha de cards nunca desalinhar entre os dias */
  .cf-cal-day-num { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--cf-text-secondary); font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; height: 24px; min-width: 26px; width: fit-content; padding: 0 7px; border-radius: 999px; box-sizing: border-box; }
  /* Hoje: só muda cores (mesmas dimensões do número normal) */
  .cf-cal-day-today { background: var(--cf-accent-bg); box-shadow: inset 0 2px 0 0 var(--cf-accent); }
  .cf-cal-day-today .cf-cal-day-num { color: white; background: var(--cf-accent); font-weight: 700; }
  .cf-cal-day.drag-over { background: var(--cf-accent-bg-hover); outline: 2px dashed var(--cf-accent); outline-offset: -2px; }
  /* Drag inválido (sáb/dom em produção) */
  .cf-cal-day.drag-invalid { background: rgba(239, 68, 68, 0.12); outline: 2px dashed #DC2626; outline-offset: -2px; cursor: not-allowed; }
  .cf-cal-day.drag-invalid::after { content: '✕ não permitido'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #DC2626; color: white; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,0.15); z-index: 2; }
  .cf-cal-event { margin-bottom: 6px; cursor: grab; border-width: 2.5px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; justify-content: flex-start; height: 62px; box-sizing: border-box; overflow: hidden; }
  .cf-cal-event .cf-kanban-card-top { margin: 0; }
  .cf-cal-event .cf-kanban-card-meta { margin: 0; flex-wrap: nowrap; overflow: hidden; }
  .cf-cal-event .cf-kanban-card-ip { white-space: nowrap; }
  /* Placeholder: mesma altura EXATA do card real (pra alinhar os grupos de IP entre os dias) */
  .cf-cal-event-placeholder { height: 62px; margin-bottom: 6px; visibility: hidden; box-sizing: border-box; }
  .cf-cal-event:hover { transform: translateY(-1px); box-shadow: var(--cf-shadow-md); }
  .cf-cal-event-concluida { opacity: 0.5; }
  .cf-cal-event-concluida .cf-kanban-card-title { text-decoration: line-through; }
  /* Card do kanban concluído (coluna Publicado): apagado + título riscado */
  .cf-kanban-card-concluida { opacity: 0.6; }
  .cf-kanban-card-concluida .cf-kanban-card-title { text-decoration: line-through; }

  /* Segmented Autoral/Filler */
  .cf-tipo-switcher { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cf-tipo-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 16px; background: var(--cf-bg-card); border: 1.5px solid var(--cf-border); border-radius: var(--cf-radius-md); cursor: pointer; transition: all 0.12s; font-family: inherit; color: var(--cf-text-muted); }
  .cf-tipo-btn:hover { border-color: var(--cf-border-strong); color: var(--cf-text); }
  .cf-tipo-btn.active { background: var(--cf-accent-bg); border-color: var(--cf-accent); color: var(--cf-accent-text); }
  .cf-tipo-btn > svg { margin-bottom: 4px; }
  .cf-tipo-btn > span:nth-of-type(1) { font-weight: 600; font-size: 14px; }
  .cf-tipo-sub { font-size: 11px; font-weight: 400; opacity: 0.75; }
  .cf-row-concluida { opacity: 0.5; }
  .cf-row-concluida .cf-row-title, .cf-row-concluida .cf-row-subtitle { text-decoration: line-through; }
  .cf-cal-event.dragging { opacity: 0.4; }
  .cf-cal-event.pending::after { content: ''; position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,0.5); }

  /* Glow de relacionamento: hover num card (produção ou publicação) destaca o par */
  .cf-cal-event-glow {
    box-shadow: 0 0 0 2px var(--cf-accent), 0 0 14px 2px var(--cf-accent-bg) !important;
    transform: translateY(-1.5px);
    z-index: 2;
    position: relative;
  }
  .cf-cal-relacionado-tooltip {
    position: fixed;
    z-index: 500;
    background: var(--cf-bg-card);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    box-shadow: var(--cf-shadow-md);
    padding: 7px 11px;
    font-size: 12px;
    color: var(--cf-text);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: none;
    white-space: nowrap;
  }
  .cf-cal-relacionado-tooltip svg { flex-shrink: 0; color: var(--cf-accent); }
  .cf-cal-relacionado-tooltip strong { color: var(--cf-accent-text); font-weight: 600; }

  /* Tooltip genérico de info (ex: custo estimado no Histórico de Vídeos) —
     mesmo padrão visual/posicionamento do .cf-cal-relacionado-tooltip, só que
     com conteúdo em bloco (várias linhas) em vez de uma frase única inline. */
  .cf-info-tooltip {
    position: fixed;
    z-index: 500;
    background: var(--cf-bg-card);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    box-shadow: var(--cf-shadow-md);
    padding: 10px 13px;
    font-size: 12px;
    color: var(--cf-text);
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
    max-width: 240px;
  }
  .cf-info-tooltip-row { display: flex; justify-content: space-between; gap: 14px; }
  .cf-info-tooltip-row strong { color: var(--cf-accent-text); font-weight: 700; }
  .cf-info-tooltip-total { display: flex; justify-content: space-between; gap: 14px; padding-top: 5px; margin-top: 2px; border-top: 1px solid var(--cf-border); font-weight: 700; color: var(--cf-text); }
  .cf-info-tooltip-disclaimer { font-size: 10.5px; color: var(--cf-text-muted); font-style: italic; margin-top: 3px; line-height: 1.35; }
  .cf-info-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; color: var(--cf-text-muted); cursor: help; flex-shrink: 0; }
  .cf-info-icon:hover { color: var(--cf-accent-text); }

  /* Sprint tag */
  /* Acordeon */
  .cf-accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 0; background: transparent; border: none; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600; color: var(--cf-text); }
  .cf-accordion-header:hover { color: var(--cf-accent); }
  .cf-accordion-header-left { display: inline-flex; align-items: center; gap: 8px; }
  .cf-accordion-chevron { transition: transform 0.2s ease; color: var(--cf-text-muted); }
  .cf-accordion-chevron.open { transform: rotate(180deg); color: var(--cf-accent); }
  .cf-accordion-content { display: none; }
  .cf-accordion-content.open { display: block; animation: cf-acc-open 0.2s ease-out; }
  @keyframes cf-acc-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

  /* (CSS antigo de spacer removido — calendário agora usa grid única) */

  /* Modal */
  .cf-modal-overlay { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; animation: modalFade 0.15s ease-out; }
  @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
  .cf-modal { background: var(--cf-bg-card); border-radius: var(--cf-radius-xl); padding: 24px; max-width: 560px; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--cf-shadow-lg); border: 1px solid var(--cf-border); animation: modalRise 0.18s ease-out; }
  .cf-modal-wide { max-width: 640px; }
  /* Overlay com scroll quando o modal for muito alto (raro) */
  .cf-modal-overlay { overflow-y: auto; }

  /* Loader bloqueante (regeneração de recorrência) */
  .cf-blocking-loader { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 300; animation: modalFade 0.15s ease-out; }
  .cf-loader-card { background: var(--cf-bg-card); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-lg); padding: 28px 32px; box-shadow: var(--cf-shadow-lg); display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 280px; max-width: 380px; }
  .cf-loader-spinner { width: 36px; height: 36px; border: 3px solid var(--cf-accent-bg); border-top-color: var(--cf-accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
  .cf-loader-title { font-size: 15px; font-weight: 600; color: var(--cf-text); text-align: center; }
  .cf-loader-sub { font-size: 13px; color: var(--cf-text-muted); text-align: center; line-height: 1.5; }
  .cf-loader-progress { display: flex; gap: 4px; margin-top: 4px; }
  .cf-loader-progress span { width: 6px; height: 6px; background: var(--cf-accent); border-radius: 50%; animation: pulse-dot 1.4s infinite ease-in-out both; }
  .cf-loader-progress span:nth-child(1) { animation-delay: -0.32s; }
  .cf-loader-progress span:nth-child(2) { animation-delay: -0.16s; }
  @keyframes pulse-dot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }

  /* Recorrências — dia + hora consolidados num único picker. Cada pill tem um
     toggle (liga/desliga o dia) e, se ativo, um badge de horário; clicar no
     badge abre um popover integrado abaixo da grade pra editar com conforto —
     sem espremer um <input type="time"> nativo dentro do botão do dia. */
  .cf-day-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 4px; }
  .cf-day-pick { display: flex; flex-direction: column; background: var(--cf-bg-card); border: 1.5px solid var(--cf-border); border-radius: var(--cf-radius-md); overflow: hidden; transition: border-color 0.12s; }
  .cf-day-pick.selected { border-color: var(--cf-accent); }
  .cf-day-pick-toggle { border: none; background: none; cursor: pointer; font-family: inherit; padding: 8px 3px; font-size: 12px; font-weight: 600; color: var(--cf-text-secondary); transition: all 0.12s; }
  .cf-day-pick:hover .cf-day-pick-toggle { color: var(--cf-text); background: var(--cf-bg-hover); }
  .cf-day-pick.selected .cf-day-pick-toggle { background: var(--cf-accent-bg); color: var(--cf-accent-text); }
  .cf-day-pick-time-badge { border: none; border-top: 1px solid var(--cf-accent-border); background: var(--cf-bg-card); cursor: pointer; font-family: inherit; padding: 4px 2px; font-size: 10.5px; font-weight: 700; color: var(--cf-accent-text); font-variant-numeric: tabular-nums; transition: background 0.12s; }
  .cf-day-pick-time-badge:hover { background: var(--cf-accent-bg); }
  .cf-rec-time-popover { display: flex; flex-direction: column; gap: 10px; background: var(--cf-bg-subtle); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-md); padding: 12px 14px; margin-top: 8px; animation: rec-popover-in 0.12s ease-out; }
  @keyframes rec-popover-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
  .cf-rec-time-popover-head { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--cf-text); }
  .cf-rec-time-popover-row input[type="time"] { font-size: 15px; padding: 7px 10px; border: 1.5px solid var(--cf-border-strong); border-radius: var(--cf-radius-sm); background: var(--cf-bg-card); color: var(--cf-text); font-family: inherit; }
  .cf-rec-time-popover-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--cf-text-secondary); cursor: pointer; }
  .cf-rec-time-popover-actions { display: flex; justify-content: flex-end; gap: 8px; }
  /* Dark: força esquema escuro nos inputs nativos (date/time picker) */
  .cf-app[data-theme="dark"] input[type="time"],
  .cf-app[data-theme="dark"] input[type="date"],
  .cf-app[data-theme="dark"] input[type="email"],
  .cf-app[data-theme="dark"] input[type="number"],
  .cf-app[data-theme="dark"] input[type="text"],
  .cf-app[data-theme="dark"] select,
  .cf-app[data-theme="dark"] textarea { color-scheme: dark; background: var(--cf-bg-card); color: var(--cf-text); border-color: var(--cf-border); }

  /* Tira semanal — indicador de dias, usado em Gestão de IP e IP Bible */
  .cf-week-strip { display: inline-flex; gap: 4px; align-items: center; vertical-align: middle; }
  .cf-week-strip.compact { gap: 2px; }
  .cf-week-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 700; border: 1.5px solid var(--cf-border-strong); color: var(--cf-text-subtle); background: transparent; flex-shrink: 0; }
  .cf-week-strip.compact .cf-week-dot { width: 15px; height: 15px; font-size: 8px; border-width: 1.2px; }
  .cf-week-with-caption { display: inline-flex; align-items: center; gap: 8px; }
  .cf-week-caption { font-size: 11px; color: var(--cf-text-muted); }

  /* Pilar Editorial promovido a Linha Editorial (ponte IP Bible → operação) */
  .cf-pilar-promovido { font-size: 12px; color: var(--cf-accent-text); background: var(--cf-accent-bg); border: 1px solid var(--cf-accent-border); border-radius: var(--cf-radius-sm); padding: 6px 10px; display: inline-block; }
  .cf-pilar-promovido strong { color: inherit; }

  /* Linha espelhada — par entre linhas do mesmo conteúdo em IPs diferentes */
  .cf-espelho-row { display: flex; align-items: center; gap: 8px; background: var(--cf-bg-subtle); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-sm); padding: 8px 10px; font-size: 12.5px; color: var(--cf-text-secondary); margin-bottom: 6px; }
  .cf-espelho-row strong { color: var(--cf-text); }
  .cf-espelho-row button { margin-left: auto; flex-shrink: 0; }

  /* Abas do modal de Linha Editorial (Linha Editorial / Recorrência) */
  .cf-linha-tabs { display: flex; gap: 4px; border-bottom: 1.5px solid var(--cf-border); margin: 14px 0 18px; }
  .cf-linha-tab-btn { flex: 1; padding: 9px 4px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1.5px; font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--cf-text-muted); cursor: pointer; transition: color 0.12s, border-color 0.12s; }
  .cf-linha-tab-btn:hover { color: var(--cf-text); }
  .cf-linha-tab-btn.active { color: var(--cf-accent-text); border-bottom-color: var(--cf-accent); }

  /* Banner de recorrência no modal de edição */
  .cf-rec-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--cf-accent-bg); border: 1px solid var(--cf-accent-border); border-radius: var(--cf-radius-md); margin-bottom: 14px; font-size: 13px; }
  .cf-rec-banner-left { display: flex; align-items: center; gap: 8px; color: var(--cf-accent-text); font-weight: 500; }
  .cf-rec-banner-btn { padding: 4px 10px; font-size: 12px; font-weight: 600; background: var(--cf-bg-card); border: 1px solid var(--cf-accent); color: var(--cf-accent-text); border-radius: var(--cf-radius-sm); cursor: pointer; font-family: inherit; }
  .cf-rec-banner-btn:hover { background: var(--cf-accent); color: white; }

  /* Filtro por IP — pills clicáveis */
  .cf-ip-filter { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .cf-ip-filter-label { font-size: 12px; color: var(--cf-text-muted); font-weight: 500; margin-right: 4px; }
  .cf-ip-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--cf-bg-card); border: 1.5px solid var(--cf-border); border-radius: var(--cf-radius-pill); font-size: 12px; font-weight: 600; color: var(--cf-text-muted); cursor: pointer; transition: all 0.12s; font-family: inherit; }
  .cf-pessoa-chip { display: inline-block; padding: 3px 9px; background: var(--cf-bg-card); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-pill); font-size: 11px; font-weight: 600; color: var(--cf-text-secondary); margin-right: 4px; margin-bottom: 4px; }
  .cf-ip-pill:hover { border-color: var(--cf-border-strong); color: var(--cf-text); }
  .cf-ip-pill.active { background: var(--cf-pill-active-bg, #111827); color: var(--cf-pill-active-text, white); border-color: var(--cf-pill-active-bg, #111827); }
  .cf-ip-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-text-subtle); transition: background 0.12s; flex-shrink: 0; }
  .cf-ip-pill.active .cf-ip-pill-dot { background: var(--ip-color, white); }
  @keyframes modalRise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .cf-modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 12px; }
  .cf-modal-title { font-size: 17px; font-weight: 600; margin: 0; line-height: 1.3; }
  .cf-modal-subtitle { font-size: 13px; color: var(--cf-text-muted); margin-top: 4px; }
  .cf-modal-close { background: transparent; border: none; cursor: pointer; font-size: 20px; color: var(--cf-text-muted); padding: 4px; line-height: 1; border-radius: var(--cf-radius-sm); }
  .cf-modal-close:hover { background: var(--cf-bg-hover); color: var(--cf-text); }

  /* Toasts */
  .cf-toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 200; pointer-events: none; }
  .cf-toast { display: inline-flex; align-items: center; gap: 8px; background: var(--cf-text); color: white; padding: 12px 16px; border-radius: var(--cf-radius-md); font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: all 0.18s; min-width: 200px; box-shadow: var(--cf-shadow-lg); pointer-events: auto; }
  .cf-toast-msg { flex: 1; }
  .cf-toast-action { background: rgba(255,255,255,0.18); color: white; border: none; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; transition: background 0.12s; font-family: inherit; margin-left: 8px; }
  .cf-toast-action:hover { background: rgba(255,255,255,0.3); }
  .cf-app[data-theme="dark"] .cf-toast { background: #2A313A; }
  .cf-toast.show { opacity: 1; transform: translateY(0); }
  .cf-toast.error { background: var(--cf-atrasado); }
  .cf-toast.success { background: var(--cf-aberto); }
  .cf-toast::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.7); }
  .cf-toast.error::before { background: rgba(255,255,255,0.9); }
  .cf-toast.success::before { background: rgba(255,255,255,0.9); }

  /* Config rows */
  .cf-config-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--cf-radius-md); transition: background 0.1s; }
  .cf-config-row:hover { background: var(--cf-bg-hover); }

  /* Settings: sub-abas IPs / Pessoas */
  .cf-config-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--cf-border); }
  .cf-config-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--cf-text-muted); cursor: pointer; transition: all 0.14s; }
  .cf-config-tab:hover { color: var(--cf-text); }
  .cf-config-tab.active { color: var(--cf-accent); border-bottom-color: var(--cf-accent); }
  /* Acordeão de IP */
  .cf-ip-accordion { display: flex; flex-direction: column; gap: 8px; }
  .cf-ip-acc-item { border: 1px solid var(--cf-border); border-radius: var(--cf-radius-md); overflow: hidden; background: var(--cf-bg-card); }
  .cf-ip-acc-item.cf-ip-inativo { opacity: 0.6; }
  .cf-ip-acc-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; transition: background 0.1s; }
  .cf-ip-acc-header:hover { background: var(--cf-bg-hover); }
  .cf-ip-acc-caret { color: var(--cf-text-muted); flex-shrink: 0; transition: transform 0.16s ease; }
  .cf-ip-acc-caret.open { transform: rotate(90deg); }
  .cf-ip-acc-swatch { width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }
  .cf-ip-acc-name { font-weight: 700; font-size: 14px; color: var(--cf-text); }
  .cf-ip-acc-rotulo { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--cf-bg-subtle); color: var(--cf-text-muted); }
  .cf-ip-acc-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; background: var(--cf-danger-bg, #fee2e2); color: var(--cf-danger, #b91c1c); }
  .cf-ip-acc-count { margin-left: auto; font-size: 12px; color: var(--cf-text-muted); }
  .cf-ip-acc-edit { background: none; border: none; color: var(--cf-text-muted); cursor: pointer; padding: 5px; border-radius: var(--cf-radius-sm); display: inline-flex; transition: all 0.12s; flex-shrink: 0; }
  .cf-ip-acc-edit:hover { color: var(--cf-accent); background: var(--cf-accent-bg); }
  .cf-ip-acc-body { padding: 6px 10px 12px; border-top: 1px solid var(--cf-border-subtle); }
  .cf-ip-acc-empty { padding: 12px; font-size: 13px; color: var(--cf-text-muted); text-align: center; }
  .cf-add-linha-ip { margin-top: 6px; }
  .cf-linha-del { background: none; border: none; color: var(--cf-text-muted); cursor: pointer; padding: 5px; border-radius: var(--cf-radius-sm); display: inline-flex; transition: all 0.12s; flex-shrink: 0; }
  .cf-linha-del:hover { color: var(--cf-danger, #b91c1c); background: var(--cf-danger-bg, #fee2e2); }
  .cf-linha-edit { background: none; border: none; color: var(--cf-text-muted); cursor: pointer; padding: 5px; border-radius: var(--cf-radius-sm); display: inline-flex; transition: all 0.12s; flex-shrink: 0; }
  .cf-linha-edit:hover { color: var(--cf-accent); background: var(--cf-accent-bg); }
  /* Linhas desativadas (visíveis pra reativar) */
  .cf-ip-acc-inativas-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cf-text-muted); padding: 10px 12px 2px; opacity: 0.7; }
  .cf-linha-row-inativa { opacity: 0.72; }
  .cf-linha-swatch-off { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; filter: saturate(0.4); border: 1px solid var(--cf-border); }
  .cf-linha-nome-off { flex: 1.5; font-size: 14px; color: var(--cf-text-muted); text-decoration: line-through; text-decoration-color: var(--cf-border-strong); }
  .cf-linha-reativar { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--cf-border); color: var(--cf-text-muted); cursor: pointer; padding: 4px 10px; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 600; transition: all 0.12s; flex-shrink: 0; }
  .cf-linha-reativar:hover { color: var(--cf-accent); border-color: var(--cf-accent); background: var(--cf-accent-bg); }
  /* Modal de linha: seleção de IP(s) (2+ = gêmea) */
  .cf-ip-pick-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .cf-ip-pick { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1.5px solid var(--cf-border); border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--cf-text-muted); transition: all 0.12s; user-select: none; }
  .cf-ip-pick:hover { border-color: var(--cf-border-strong); color: var(--cf-text); }
  .cf-ip-pick.active { border-color: var(--cf-accent); background: var(--cf-accent-bg); color: var(--cf-accent-text); }
  .cf-ip-pick input { display: none; }
  .cf-ip-pick-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.12); }

  /* V9: Card de pessoa com cargos por IP */
  .cf-pessoa-card { background: var(--cf-bg-subtle); border: 1px solid var(--cf-border-subtle); border-radius: var(--cf-radius-md); padding: 14px; margin-bottom: 10px; }
  .cf-pessoa-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .cf-pessoa-card-body { display: flex; flex-direction: column; gap: 10px; }
  .cf-pessoa-cargo-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .cf-pessoa-cargo-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--cf-text-muted); text-transform: uppercase; letter-spacing: 0.04em; min-width: 80px; }
  .cf-pessoa-cargo-ips { display: flex; gap: 6px; flex-wrap: wrap; }
  .cf-pessoa-cargo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--cf-bg-card); border: 1.5px solid var(--cf-border); border-radius: var(--cf-radius-pill); font-size: 12px; font-weight: 600; color: var(--cf-text-muted); cursor: pointer; transition: all 0.12s; user-select: none; }
  .cf-pessoa-cargo-chip:hover { border-color: var(--cf-border-strong); color: var(--cf-text); }
  .cf-pessoa-cargo-chip.active { background: var(--cf-accent-bg); border-color: var(--cf-accent); color: var(--cf-accent-text); }
  .cf-pessoa-cargo-chip input { margin: 0; accent-color: var(--cf-accent); cursor: pointer; }

  /* ============= BATCH SELECTION ============= */
  .cf-kanban-card { position: relative; }
  .cf-kanban-card.batch-selected { outline: 2px solid var(--cf-accent); outline-offset: -1px; box-shadow: 0 0 0 4px var(--cf-accent-bg); }
  .cf-cal-event.batch-selected { outline: 2px solid var(--cf-accent); outline-offset: 1px; box-shadow: 0 0 0 3px var(--cf-accent-bg); }
  .cf-batch-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--cf-accent); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 2; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

  .cf-batch-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--cf-bg-card); border: 1px solid var(--cf-border-strong); border-radius: var(--cf-radius-pill); box-shadow: var(--cf-shadow-lg); display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 18px; z-index: 250; animation: batchBarIn 0.18s ease-out; }
  @keyframes batchBarIn { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
  .cf-batch-bar-count { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cf-text); white-space: nowrap; }
  .cf-batch-bar-num { background: var(--cf-accent); color: #fff; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--cf-radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
  .cf-batch-bar-divider { width: 1px; height: 24px; background: var(--cf-border); }
  .cf-batch-bar-actions { display: flex; align-items: center; gap: 4px; }
  .cf-batch-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: transparent; border: none; border-radius: var(--cf-radius-md); font-size: 13px; font-weight: 600; color: var(--cf-text-secondary); cursor: pointer; font-family: inherit; transition: all 0.1s; white-space: nowrap; }
  .cf-batch-action-btn:hover { background: var(--cf-bg-hover); color: var(--cf-text); }
  .cf-batch-clear-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: none; border-radius: 50%; color: var(--cf-text-muted); cursor: pointer; transition: all 0.1s; }
  .cf-batch-clear-btn:hover { background: var(--cf-bg-hover); color: var(--cf-text); }
  .cf-color-input { width: 36px; height: 30px; border: 1px solid var(--cf-border); border-radius: var(--cf-radius-sm); cursor: pointer; padding: 0; background: transparent; flex-shrink: 0; }

  /* Day sections (agrupamento por dia no dashboard) */
  .cf-day-section { margin-bottom: 4px; }
  .cf-day-section:last-child { margin-bottom: 0; }
  .cf-day-section-header { width: 100%; font-size: 12px; font-weight: 700; color: var(--cf-text-muted); padding: 10px 4px; border: none; background: transparent; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; font-family: inherit; transition: color 0.12s; }
  .cf-day-section-header:hover { color: var(--cf-text); }
  .cf-day-section-header .cf-day-label { color: var(--cf-text); }
  .cf-day-section-header .cf-day-count { background: var(--cf-bg-muted); color: var(--cf-text-muted); padding: 1px 7px; border-radius: var(--cf-radius-pill); font-size: 11px; font-weight: 600; }
  .cf-day-chevron { transition: transform 0.18s; color: var(--cf-text-muted); flex-shrink: 0; }
  .cf-day-section.open .cf-day-chevron { transform: rotate(90deg); }
  .cf-day-section-body { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; }
  .cf-day-section.open .cf-day-section-body { max-height: 2000px; padding-bottom: 6px; border-bottom: 1px solid var(--cf-border-subtle); margin-bottom: 4px; }
  .cf-day-today-badge { background: var(--cf-accent); color: white; padding: 1px 7px; border-radius: var(--cf-radius-pill); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  .cf-day-pending-badge { background: var(--cf-atencao-bg); color: var(--cf-atencao-text); padding: 1px 7px; border-radius: var(--cf-radius-pill); font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; }

  /* Empty states */
  .cf-empty { text-align: center; padding: 40px 16px; color: var(--cf-text-muted); font-size: 14px; }
  .cf-empty i { font-size: 32px; color: var(--cf-text-subtle); margin-bottom: 10px; display: block; }
  .cf-empty-title { font-weight: 600; color: var(--cf-text-secondary); margin-bottom: 4px; }
  .cf-empty-sub { font-size: 13px; color: var(--cf-text-muted); }

  /* View switcher (segmented control) */
  .cf-view-switcher { display: inline-flex; gap: 2px; background: var(--cf-bg-subtle); border-radius: var(--cf-radius-md); padding: 3px; border: 1px solid var(--cf-border); }
  .cf-week-switcher { display: inline-flex; gap: 2px; background: var(--cf-bg-subtle); border-radius: var(--cf-radius-md); padding: 3px; border: 1px solid var(--cf-border); }
  .cf-week-btn { padding: 5px 12px; background: transparent; border: none; color: var(--cf-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px; transition: all 0.12s; font-family: inherit; }
  .cf-week-btn:hover { color: var(--cf-text); }
  .cf-week-btn.active { background: var(--cf-bg-card); color: var(--cf-text); box-shadow: var(--cf-shadow-xs); }
  .cf-view-btn { padding: 5px 12px; font-size: 13px; background: transparent; border: none; border-radius: var(--cf-radius-sm); cursor: pointer; color: var(--cf-text-secondary); font-family: inherit; font-weight: 500; transition: all 0.1s; }
  .cf-view-btn:hover { color: var(--cf-text); }
  .cf-view-btn.active { background: var(--cf-bg-card); color: var(--cf-text); font-weight: 600; box-shadow: var(--cf-shadow-xs); }

  /* ---- Fundamentos ---- */
  .cf-app { letter-spacing: 0.001em; }
  .cf-app ::selection { background: rgba(124, 58, 237, 0.18); }
  .cf-app[data-theme="dark"] ::selection { background: rgba(167, 139, 250, 0.30); }

  /* Foco visível consistente (acessibilidade + teclado) */
  .cf-app button:focus-visible, .cf-app input:focus-visible, .cf-app select:focus-visible, .cf-app textarea:focus-visible, .cf-app [tabindex]:focus-visible {
    outline: 2px solid var(--cf-accent);
    outline-offset: 2px;
  }

  /* ---- Sidebar ---- */
  .cf-sidebar { border-right: 1px solid var(--cf-border-subtle); }
  .cf-sidebar-section-label { font-size: 10.5px; letter-spacing: 0.09em; font-weight: 700; opacity: 0.75; }
  .cf-nav-item { transition: background 0.13s ease, color 0.13s ease; }
  .cf-nav-item.active { font-weight: 600; }
  .cf-app[data-theme="dark"] .cf-nav-item.active { color: var(--cf-accent); }
  .cf-sidebar-footer { border-top: 1px solid var(--cf-border-subtle); }

  /* ---- Topbar ---- */
  .cf-topbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--cf-border-subtle); }
  .cf-topbar h1 { font-weight: 650; letter-spacing: -0.015em; }

  /* ---- Botões ---- */
  .cf-btn { border-radius: var(--cf-radius-md); font-weight: 600; transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.1s ease; }
  .cf-btn:active { transform: translateY(0.5px); }
  .cf-btn-ghost { border: 1px solid var(--cf-border); background: transparent; }
  .cf-btn-ghost:hover { border-color: var(--cf-border-strong); background: var(--cf-bg-hover); }

  /* ---- Inputs e selects ---- */
  .cf-input, .cf-select, .cf-app textarea {
    border-radius: var(--cf-radius-md);
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
  }
  .cf-input:hover, .cf-select:hover { border-color: var(--cf-border-strong); }
  .cf-input:focus, .cf-select:focus, .cf-app textarea:focus {
    border-color: var(--cf-accent);
    box-shadow: var(--cf-shadow-focus);
    outline: none;
  }
  .cf-field-label { font-size: 12px; font-weight: 600; color: var(--cf-text-secondary); letter-spacing: 0.01em; }

  /* ---- Pills de filtro ---- */
  .cf-ip-pill { border-radius: var(--cf-radius-pill); transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease, box-shadow 0.13s ease; }
  .cf-ip-pill:hover { border-color: var(--cf-border-strong); background: var(--cf-bg-hover); }
  .cf-ip-pill.active { box-shadow: var(--cf-shadow-xs); }

  /* ---- Kanban ---- */
  .cf-kanban-col { border-radius: var(--cf-radius-lg); background: var(--cf-bg-subtle); border: 1px solid var(--cf-border-subtle); }
  .cf-kanban-col-label { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; }
  .cf-kanban-col-count { border-radius: var(--cf-radius-pill); font-weight: 650; }
  .cf-kanban-card { border-radius: var(--cf-radius-md); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; }
  .cf-kanban-card:hover { box-shadow: var(--cf-shadow-md); transform: translateY(-1.5px); }
  .cf-kanban-card.batch-selected { box-shadow: 0 0 0 2px var(--cf-accent), var(--cf-shadow-sm); }
  .cf-kanban-card-num { font-weight: 700; color: var(--cf-text-subtle); font-variant-numeric: tabular-nums; }
  .cf-kanban-card-ip { border-radius: var(--cf-radius-sm); font-weight: 650; letter-spacing: 0.04em; }
  .cf-card-tag { border-radius: var(--cf-radius-sm); font-weight: 650; letter-spacing: 0.03em; }

  /* ---- Calendário ---- */
  .cf-cal-day { transition: background 0.12s ease; }
  .cf-cal-day-today { background: var(--cf-accent-bg); }
  .cf-cal-event { border-radius: var(--cf-radius-md); transition: box-shadow 0.15s ease, transform 0.15s ease; }
  .cf-cal-event:hover { box-shadow: var(--cf-shadow-md); transform: translateY(-1.5px); }
  .cf-cal-ip-group-header { font-weight: 700; letter-spacing: 0.06em; opacity: 0.85; }

  /* ---- Modais ---- */
  .cf-modal-overlay { background: rgba(15, 14, 20, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .cf-app[data-theme="dark"] .cf-modal-overlay { background: rgba(0, 0, 0, 0.55); }
  .cf-modal { border-radius: var(--cf-radius-xl); box-shadow: var(--cf-shadow-lg); border: 1px solid var(--cf-border-subtle); }
  .cf-modal-title { font-weight: 650; letter-spacing: -0.01em; }
  /* Escala de tamanhos: S=420 (confirmações) · M=500 (gates/seleções) · L=660 (edição) */
  #cf-edit-modal .cf-modal { max-width: 820px; padding: 26px 30px; }
  /* Seções visuais do modal de edição */
  .cf-modal-section { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--cf-text-subtle); margin: 20px 0 10px; padding-top: 14px; border-top: 1px solid var(--cf-border-subtle); }

  /* ---- Toasts ---- */
  .cf-toast { border-radius: var(--cf-radius-md); box-shadow: var(--cf-shadow-lg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

  /* ---- Dashboard ---- */
  .cf-dash-greeting { font-weight: 650; letter-spacing: -0.02em; }
  .cf-dash-acao-owner { box-shadow: var(--cf-shadow-xs); }
  .cf-dash-identify-btn { border-radius: var(--cf-radius-md); transition: background 0.13s ease, border-color 0.13s ease, transform 0.1s ease; }
  .cf-dash-identify-btn:hover { transform: translateY(-1px); }

  /* ---- Pessoas ---- */
  .cf-pessoa-card { border-radius: var(--cf-radius-lg); transition: box-shadow 0.15s ease; }
  .cf-pessoa-card:hover { box-shadow: var(--cf-shadow-md); }
  .cf-pessoa-cargo-chip { border-radius: var(--cf-radius-pill); transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease; }

  /* ---- User chip (header) ---- */
  .cf-user-chip { transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease; }
  .cf-user-chip:hover { box-shadow: var(--cf-shadow-sm); }

  /* ---- Criação contextual ---- */
  .cf-criar-contexto { display: flex; align-items: center; gap: 8px; padding: 8px 12px; margin-bottom: 12px; background: var(--cf-accent-bg); border: 1px solid var(--cf-accent-border); border-radius: var(--cf-radius-md); font-size: 12.5px; color: var(--cf-accent-text); }
  .cf-criar-contexto svg { flex-shrink: 0; }
  .cf-criar-contexto span { flex: 1; }
  .cf-criar-contexto-x { background: none; border: none; cursor: pointer; color: var(--cf-accent-text); font-size: 12px; padding: 2px 6px; border-radius: var(--cf-radius-sm); opacity: 0.7; }
  .cf-criar-contexto-x:hover { opacity: 1; background: var(--cf-accent-bg-hover); }


  /* ---- Modal de edição 2.0: grid, trilha, chips ---- */
  .cf-edit-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; margin-top: 8px; }
  .cf-edit-colside { border-left: 1px solid var(--cf-border-subtle); padding-left: 26px; }
  .cf-edit-grid .cf-modal-section { margin: 22px 0 12px; }
  .cf-edit-grid .cf-field-label { margin-bottom: 5px; }
  .cf-edit-grid .cf-input, .cf-edit-grid .cf-select, .cf-edit-grid .cf-textarea { font-size: 13.5px; }
  @media (max-width: 640px) { .cf-edit-grid { grid-template-columns: 1fr; } .cf-edit-colside { border-left: none; padding-left: 0; } }
  .cf-trilha-bar { display: flex; align-items: center; gap: 14px; margin: 14px 0 2px; }
  .cf-stepper { display: flex; align-items: center; flex: 1; gap: 3px; }
  .cf-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-border); flex-shrink: 0; transition: all 0.15s; }
  .cf-step-dot.done { background: var(--cf-accent); }
  .cf-step-dot.cur { width: 13px; height: 13px; background: var(--cf-accent); box-shadow: 0 0 0 3px var(--cf-accent-bg-hover); }
  .cf-step-line { flex: 1; height: 2px; background: var(--cf-border); min-width: 6px; }
  .cf-step-line.done { background: var(--cf-accent); }
  .cf-status-dd { width: auto; max-width: 200px; font-size: 12.5px; font-weight: 600; padding: 6px 28px 6px 10px; }
  .cf-trilha-caption { font-size: 11.5px; color: var(--cf-text-muted); margin-bottom: 12px; }
  .cf-plat-chips { display: flex; gap: 6px; }
  .cf-plat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 9px; border-radius: var(--cf-radius-pill); border: 1px solid var(--cf-border); background: var(--cf-bg-card); font-size: 12px; font-weight: 600; color: var(--cf-text-muted); cursor: pointer; transition: all 0.13s; user-select: none; }
  .cf-plat-chip input { margin: 0; }
  .cf-plat-chip.on { background: var(--cf-accent-bg); border-color: var(--cf-accent); color: var(--cf-accent-text); }
  .cf-campo-link { display: flex; gap: 6px; }
  .cf-campo-link .cf-input { flex: 1; min-width: 0; }
  .cf-abrir-btn { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cf-accent-border); background: var(--cf-accent-bg); color: var(--cf-accent); border-radius: var(--cf-radius-md); font-size: 15px; cursor: pointer; transition: all 0.13s; }
  .cf-abrir-btn:hover { background: var(--cf-accent-bg-hover); }
  .cf-abrir-btn:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--cf-border); background: var(--cf-bg-subtle); color: var(--cf-text-subtle); }
  .cf-check-inline { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--cf-text-muted); cursor: pointer; }
  .cf-check-inline input { flex-shrink: 0; }
  .cf-btn-block { width: 100%; justify-content: center; margin-top: 8px; gap: 7px; }
  .cf-tipo-locked { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .cf-tipo-locked-hint { font-size: 11px; color: var(--cf-text-subtle); font-style: italic; }

  .cf-kc-dl { color: var(--cf-text-subtle); font-weight: 500; }
  .cf-kc-dl.cf-kanban-card-data-late { color: var(--cf-atrasado-text); font-weight: 700; }
  .cf-kc-dl.cf-kanban-card-data-today { color: var(--cf-accent); font-weight: 700; }
  .cf-kanban-card-datas { margin-top: 3px; }
  .cf-kanban-card-datas .cf-kanban-card-data { white-space: nowrap; }

  /* ---- Checkboxes customizados ---- */
  .cf-app input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 16px; height: 16px; margin: 0;
    border: 1.5px solid var(--cf-border-strong);
    border-radius: 4.5px;
    background: var(--cf-bg-card);
    cursor: pointer; position: relative;
    display: inline-block; vertical-align: middle; flex-shrink: 0;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }
  .cf-app input[type="checkbox"]:hover { border-color: var(--cf-accent); }
  .cf-app input[type="checkbox"]:checked {
    background: var(--cf-accent);
    border-color: var(--cf-accent);
  }
  .cf-app input[type="checkbox"]:checked::after {
    content: '';
    position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px 10px no-repeat;
  }
  .cf-app[data-theme="dark"] input[type="checkbox"]:checked::after {
    /* check escuro sobre roxo claro (contraste do dark) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23100F12' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  }
  .cf-app input[type="checkbox"]:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
  .cf-app input[type="checkbox"]:disabled { opacity: 0.45; cursor: not-allowed; }

  /* ---- Busca global (Ctrl+K) ---- */
  .cf-busca-overlay { display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh; }
  .cf-busca-panel { width: 100%; max-width: 580px; background: var(--cf-bg-card); border: 1px solid var(--cf-border); border-radius: var(--cf-radius-xl); box-shadow: var(--cf-shadow-lg); overflow: hidden; animation: modalRise 0.16s ease-out; }
  .cf-busca-input-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cf-border-subtle); color: var(--cf-text-muted); }
  .cf-busca-input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 15px; color: var(--cf-text); }
  .cf-busca-input::placeholder { color: var(--cf-text-subtle); }
  .cf-busca-kbd { font-size: 10.5px; font-weight: 700; color: var(--cf-text-subtle); border: 1px solid var(--cf-border); border-radius: 5px; padding: 2px 6px; }
  .cf-busca-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
  .cf-busca-hint { padding: 18px 14px; font-size: 13px; color: var(--cf-text-subtle); text-align: center; }
  .cf-busca-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: none; border-radius: var(--cf-radius-md); cursor: pointer; font-family: inherit; text-align: left; color: var(--cf-text); }
  .cf-busca-item.sel { background: var(--cf-accent-bg); }
  .cf-busca-item-num { font-size: 11.5px; font-weight: 700; color: var(--cf-text-subtle); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 32px; }
  .cf-busca-item-titulo { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cf-busca-item-meta { margin-left: auto; font-size: 11.5px; color: var(--cf-text-muted); white-space: nowrap; flex-shrink: 0; }

  /* ---- FAB global de criação (todas as telas) ---- */
  .cf-fab {
    position: fixed; bottom: 24px; right: 24px; z-index: 190;
    display: flex; align-items: center; gap: 8px;
    height: 52px; padding: 0 20px 0 16px;
    background: linear-gradient(135deg, var(--cf-accent) 0%, #6D28D9 100%);
    color: #fff; border: none; border-radius: var(--cf-radius-pill);
    font-family: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.40), var(--cf-shadow-md);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .cf-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124, 58, 237, 0.50), var(--cf-shadow-lg); }
  .cf-fab:active { transform: translateY(0); }
  .cf-app[data-theme="dark"] .cf-fab { background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%); }
  @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  /* Elementos visíveis só pra gestor
     Usa visibility:hidden em vez de display:none pra evitar reflow/piscar no boot.
     O body começa sem cf-is-gestor; renderUserChip adiciona a classe assim que
     state.pessoas está carregado. */
  .cf-nav-gestor-only { display: none !important; }
  body.cf-is-gestor .cf-nav-gestor-only { display: flex !important; }
  body.cf-is-gestor div.cf-nav-gestor-only { display: block !important; }
  /* IP Bible: visível para Gestor, Visitante e Concept Prototyper */
  .cf-nav-ipbible { display: none !important; }
  body.cf-pode-ipbible .cf-nav-ipbible { display: flex !important; }

  /* Features por time */
  .cf-feature-giro { display: none; }
  body.cf-has-giro .cf-feature-giro { display: flex; }

  /* Setup wizard: esconde o botão quando concluído */
  .cf-setup-btn { }
  body.cf-setup-done .cf-setup-btn { display: none !important; }
  /* Link fantasma no rodapé do sidebar */
  .cf-setup-ghost { display: none; }
  body.cf-is-gestor .cf-setup-ghost { display: flex; }
  body.cf-setup-done .cf-setup-ghost { display: flex; }
  body:not(.cf-setup-done) .cf-setup-ghost { display: none !important; }
  .cf-setup-ghost { align-items:center;justify-content:center;padding:8px;border-radius:6px;
    opacity:0;transition:opacity .2s;cursor:pointer;border:0;background:transparent;
    color:var(--cf-text-subtle);width:100%; }
  .cf-sidebar:hover .cf-setup-ghost { opacity:0.35; }
  .cf-setup-ghost:hover { opacity:1 !important; background:var(--cf-bg-hover); }
  .cf-app.cf-sidebar-collapsed .cf-setup-ghost { display:none !important; }

  /* Histórico de mudanças */
  .cf-hist-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
  }
  .cf-hist-badge-green  { background: rgba(22,163,74,.15);  color: #16A34A; }
  .cf-hist-badge-red    { background: rgba(220,38,38,.15);  color: #DC2626; }
  .cf-hist-badge-accent { background: var(--cf-accent-bg);  color: var(--cf-accent-text); }
  .cf-hist-tag {
    display: inline-block;
    background: var(--cf-bg-elevated, var(--cf-bg-hover));
    color: var(--cf-text);
    border: 1px solid var(--cf-border-strong);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-family: monospace;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  @media (prefers-color-scheme: dark) {
    .cf-hist-badge-green { color: #4ADE80; }
    .cf-hist-badge-red   { color: #F87171; }
  }