/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:      #0b0b14;
  --bg2:     #13131f;
  --bg3:     #1a1a2e;
  --card:    #181826;
  --card2:   #20203a;
  --border:  #252542;
  --accent:  #7c3aed;
  --accent2: #a855f7;
  --accent3: #c084fc;
  --text:    #f1f5f9;
  --text2:   #94a3b8;
  --text3:   #4e5a70;
  --success: #10b981;
  --danger:  #ef4444;
  --warning: #f59e0b;
  --reels:     #7c3aed;
  --foto:      #3b82f6;
  --carrossel: #f59e0b;
  --story:     #10b981;
  --r:  12px;
  --r2:  8px;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --spring:   cubic-bezier(0.34, 1.2, 0.64, 1);
  --t:  0.22s;
  --t2: 0.36s;
  --shadow:  0 4px 32px rgba(0,0,0,.5);
  --shadow2: 0 2px 12px rgba(0,0,0,.35);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── HEADER ──────────────────────────────────────────── */
.app-header {
  background: rgba(13,13,20,.92);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: box-shadow var(--t) var(--ease);
}

.app-header.scrolled { box-shadow: 0 1px 28px rgba(0,0,0,.55); }

.app-logo { display: flex; align-items: center; gap: 12px; }

.app-logo-icon {
  width: 36px; height: 36px;
  object-fit: contain;
  border-radius: 0;
  background: none;
  flex-shrink: 0;
  transition: transform var(--t) var(--spring);
  filter: drop-shadow(0 2px 8px rgba(249,115,22,.3));
}
.app-logo:hover .app-logo-icon { transform: scale(1.08); }

.app-logo-text {
  font-size: 16px; font-weight: 700; letter-spacing: -.3px;
  color: #f8f8f8;
}

/* Botão "casinha" — atalho pra Gestão Central. Só aparece em mobile. */
.app-home-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #f8f8f8;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s, border-color .15s, transform .15s;
}
.app-home-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); }
.app-home-btn:active { transform: scale(.94); }
.app-home-btn svg { display:block; }

/* ── TABS ────────────────────────────────────────────── */
.main-tabs {
  display: flex; gap: 3px;
  background: var(--bg);
  padding: 3px;
  border-radius: var(--r);
  border: 1px solid var(--border);
}

.main-tab {
  padding: 8px 16px;
  border-radius: var(--r2);
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  display: flex; align-items: center; gap: 6px;
  transition: color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position: relative;
  white-space: nowrap;
}
.main-tab::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--r2);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  opacity: 0;
  transition: opacity var(--t) var(--ease);
  z-index: -1;
}
.main-tab.active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 2px 14px rgba(124,58,237,.38); }
.main-tab.active::after { opacity: 0; }
.main-tab:hover:not(.active) { background: var(--card2); color: var(--text); }
/* Ferramentas dropdown */
.main-tab-more { position:relative; }
.main-tab-more-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px; min-width: 180px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  z-index: 200; flex-direction: column; gap: 2px;
}
.main-tab-more-menu.open { display: flex; }
.main-tab-more-item {
  padding: 9px 14px; border-radius: 8px; border: none;
  background: transparent; color: var(--text2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--font); display: flex; align-items: center; gap: 8px;
  text-align: left; width: 100%; transition: background .12s;
}
.main-tab-more-item:hover { background: var(--bg2); color: var(--text1); }
.main-tab-more-item.active { color: var(--accent); background: rgba(99,102,241,.08); }

/* ── CONTENT & PANELS ────────────────────────────────── */
.app-content { width:100%; margin:0; padding:24px 32px; }

/* ── TAB ENTRADA — Layout centrado e espaçado ─────────── */
#tab-entrada {
  max-width: 740px;
  margin: 0 auto;
  padding-bottom: 40px;
}

/* Contador automático de passos */
#tab-entrada { counter-reset: entrada-step; }
#tab-entrada .form-section { counter-increment: entrada-step; }

/* Badge de passo antes de cada header */
#tab-entrada .form-section-header::before {
  content: "0" counter(entrada-step);
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  color: var(--accent3);
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-right: 2px;
}

/* Borda esquerda colorida quando aberto */
#tab-entrada .form-section:not(.collapsed) {
  border-color: rgba(124,58,237,.35);
}
#tab-entrada .form-section:not(.collapsed) .form-section-header {
  border-bottom: 1px solid var(--border);
  background: rgba(124,58,237,.03);
}

/* Page header de Criar Post */
.entrada-page-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.entrada-page-title {
  font-size: 22px; font-weight: 800;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent3) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 4px;
}
.entrada-page-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-text-fill-color: #fff;
  font-size: 16px; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124,58,237,.35);
}
.entrada-page-sub {
  font-size: 13px; color: var(--text3); margin-left: 44px;
}

.tab-panel {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  /* Colapsa altura quando inativo para não contribuir com scrollHeight do body
     (evita o "vão de espaço" abaixo de páginas curtas como Métricas). */
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: opacity var(--t2) var(--ease-out), transform var(--t2) var(--ease-out);
}
.tab-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
  height: auto;
  overflow: visible;
  visibility: visible;
}

/* ── FORM SECTIONS (collapsible) ─────────────────────── */
.form-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.form-section:focus-within { border-color: rgba(124,58,237,.4); box-shadow: 0 4px 20px rgba(124,58,237,.12); }

.form-section-header {
  padding: 16px 20px;
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: var(--card);
  transition: background var(--t) var(--ease);
}
.form-section-header:hover { background: rgba(255,255,255,.04); }

.form-section-title {
  font-size: 14px; font-weight: 700;
  color: var(--text);
  text-transform: none; letter-spacing: 0;
  display: flex; align-items: center; gap: 10px;
  flex: 1;
}

.section-chevron {
  width: 18px; height: 18px;
  color: var(--text3);
  transition: transform var(--t2) var(--ease);
  flex-shrink: 0;
}
.form-section.collapsed .section-chevron { transform: rotate(-90deg); }

.form-section-body {
  overflow: hidden;
  transition: height var(--t2) var(--ease);
}
.form-section-body-inner { padding: 20px 22px 26px; }

/* ── RESTAURANT BAR ──────────────────────────────────── */
.restaurant-sticky {
  background: linear-gradient(135deg, rgba(124,58,237,.07) 0%, var(--bg2) 100%);
  border: 1px solid rgba(124,58,237,.22);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 4px 18px rgba(124,58,237,.1);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
  position: relative;
}
.restaurant-sticky::before {
  content: '';
  position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}
.restaurant-sticky:focus-within { border-color: var(--accent); box-shadow: 0 6px 24px rgba(124,58,237,.18); }
.restaurant-sticky label {
  font-size: 11px; font-weight: 800; color: var(--accent3);
  text-transform: uppercase; letter-spacing: 1.2px; white-space: nowrap;
}
.restaurant-sticky input { flex: 1; }

/* Select do restaurante – remove aparência nativa */
#restauranteSelect {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%237c3aed'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 10px !important;
  padding-right: 38px !important;
  font-weight: 600 !important;
  font-family: var(--font) !important;
  cursor: pointer !important;
  transition: border-color .2s, box-shadow .2s !important;
}
#restauranteSelect:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,.14) !important;
  background-color: var(--bg3) !important;
}

/* ── FORM CONTROLS ───────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-group:last-child { margin-bottom: 0; }

.form-group label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text2); margin-bottom: 8px; letter-spacing: .2px;
}
.form-group label .req { color: var(--accent2); margin-left: 2px; }

input[type="text"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px; font-family: var(--font);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  outline: none;
  color-scheme: dark;
}
input[type="text"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="time"]:hover { border-color: var(--text3); }
input[type="text"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(124,58,237,.14));
  background: var(--bg2);
}
input.error, textarea.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
textarea { min-height: 96px; resize: vertical; }

.error-msg {
  color: var(--danger); font-size: 11px; margin-top: 5px;
  display: none; align-items: center; gap: 4px;
}
.error-msg.visible { display: flex; }

/* ── TYPE GRID ───────────────────────────────────────── */
.type-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }

.type-btn {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px 10px 16px;
  cursor: pointer;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font); color: var(--text3);
  transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease),
              color var(--t) var(--ease),
              transform var(--t) var(--spring),
              box-shadow var(--t) var(--ease);
}
.type-btn .type-icon { font-size: 30px; line-height: 1; filter: grayscale(.4); transition: filter .2s, transform .2s; }
.type-btn .type-label { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.type-btn:hover { transform: translateY(-4px); border-color: var(--accent); color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.type-btn:hover .type-icon { filter: grayscale(0); transform: scale(1.1); }
.type-btn:active { transform: translateY(0); }

.type-btn.active[data-type="REELS"]    { border-color:var(--reels);     background:linear-gradient(160deg,rgba(124,58,237,.2),rgba(124,58,237,.06)); color:var(--reels);     box-shadow:0 8px 24px rgba(124,58,237,.3); }
.type-btn.active[data-type="FOTO"]     { border-color:var(--foto);      background:linear-gradient(160deg,rgba(59,130,246,.2),rgba(59,130,246,.06));  color:var(--foto);      box-shadow:0 8px 24px rgba(59,130,246,.3); }
.type-btn.active[data-type="CARROSSEL"]{ border-color:var(--carrossel); background:linear-gradient(160deg,rgba(245,158,11,.2),rgba(245,158,11,.06));  color:var(--carrossel); box-shadow:0 8px 24px rgba(245,158,11,.3); }
.type-btn.active[data-type="STORY"]   { border-color:var(--story);     background:linear-gradient(160deg,rgba(16,185,129,.2),rgba(16,185,129,.06));  color:var(--story);     box-shadow:0 8px 24px rgba(16,185,129,.3); }
.type-btn.active .type-icon { filter: grayscale(0); }

/* ── OBJETIVO ────────────────────────────────────────── */
.objetivo-grid { display: flex; flex-wrap: wrap; gap: 7px; }

.objetivo-btn {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: var(--text2); font-family: var(--font);
  transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease),
              color var(--t) var(--ease),
              transform var(--t) var(--spring),
              box-shadow var(--t) var(--ease);
}
.objetivo-btn:hover { border-color: var(--accent2); color: var(--text); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.objetivo-btn:active { transform: translateY(0); }
.objetivo-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 16px rgba(124,58,237,.4);
  transform: translateY(-1px);
}

/* ── SCRIPT CONDITIONAL ──────────────────────────────── */
.script-wrapper {
  overflow: hidden;
  max-height: 0; opacity: 0;
  transition: max-height var(--t2) var(--ease),
              opacity 0.28s var(--ease-out),
              margin var(--t2) var(--ease);
  margin-bottom: 0;
}
.script-wrapper.visible { max-height: 220px; opacity: 1; margin-bottom: 18px; }

/* ── IMAGE INPUT ─────────────────────────────────────── */
.image-input-group { display: flex; flex-direction: column; gap: 8px; }
.image-input-tabs { display: flex; gap: 4px; margin-bottom: 4px; }

.img-tab-btn {
  padding: 5px 13px;
  border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text3);
  font-size: 12px; cursor: pointer; font-family: var(--font);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.img-tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.img-panel { display: none; }
.img-panel.active { display: block; }

input[type="file"] {
  width: 100%;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--r2);
  padding: 16px;
  color: var(--text2); font-size: 13px; cursor: pointer;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
input[type="file"]:hover { border-color: var(--accent); background: rgba(124,58,237,.04); }

.image-preview-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.img-preview-item {
  position: relative; width: 70px; height: 70px;
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border);
  animation: imgIn .3s var(--spring);
}
@keyframes imgIn {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}
.img-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.img-preview-item button {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  border: none; background: rgba(239,68,68,.9); color: #fff;
  font-size: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t) var(--spring);
}
.img-preview-item button:hover { transform: scale(1.15); }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; border-radius: 14px;
  color: #fff; font-size: 15px; font-weight: 800;
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 28px rgba(124,58,237,.42);
  letter-spacing: .5px;
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--t) var(--ease);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(124,58,237,.58); }
.btn-primary:hover::after { background: rgba(255,255,255,.08); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(124,58,237,.3); }

/* Submit button específico do Criar Post */
.entrada-submit-btn {
  margin-top: 8px; height: 56px;
  font-size: 16px; letter-spacing: .3px;
  border-radius: 16px;
}

.btn-secondary {
  padding: 8px 15px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: var(--r2); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--spring);
}
.btn-secondary:hover { background: var(--border); transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); }

.btn-danger {
  padding: 8px 15px;
  background: transparent; border: 1px solid var(--danger);
  border-radius: var(--r2); color: var(--danger);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t) var(--ease), transform var(--t) var(--spring);
}
.btn-danger:hover { background: rgba(239,68,68,.1); transform: translateY(-1px); }
.btn-danger:active { transform: translateY(0); }
.btn-sm { padding: 5px 11px !important; font-size: 12px !important; }
.post-card-compact { margin-bottom: 12px; }

/* ── TOAST ───────────────────────────────────────────── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.1);
  animation: toastIn .32s var(--spring) forwards;
  pointer-events: auto;
  min-width: 260px; max-width: 360px;
  backdrop-filter: blur(8px);
}
.toast.success { border-left: 3px solid var(--success); background: linear-gradient(90deg, rgba(34,197,94,.06) 0%, var(--card) 50%); }
.toast.danger  { border-left: 3px solid var(--danger);  background: linear-gradient(90deg, rgba(239,68,68,.06) 0%, var(--card) 50%); }
.toast.warning { border-left: 3px solid var(--warning); background: linear-gradient(90deg, rgba(245,158,11,.06) 0%, var(--card) 50%); }
.toast-icon { font-size: 18px; flex-shrink: 0; }
.toast-msg { flex: 1; color: var(--text); }
.toast-out { animation: toastOut .25s var(--ease-in) forwards; }

@keyframes toastIn  { from { opacity:0; transform:translateX(48px) scale(.95); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0) scale(1); }      to { opacity:0; transform:translateX(48px) scale(.95); } }

/* ── VISUALIZAR HEADER ───────────────────────────────── */
.visualizar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.visualizar-title {
  font-size: 22px; font-weight: 800;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent3) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.visualizar-title-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  -webkit-text-fill-color: initial;
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
}
.visualizar-actions { display: flex; align-items: center; gap: 8px; }

.btn-export {
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none; border-radius: 20px; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; gap: 7px;
  box-shadow: 0 4px 18px rgba(124,58,237,.35);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}
.btn-export:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(124,58,237,.55); }
.btn-export:active { transform: translateY(0); }

/* ── COLLAPSIBLE BLOCK — redesign ────────────────────── */
.collapsible-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.collapsible-block:not(.closed) { border-color: rgba(124,58,237,.25); }

.collapsible-head {
  padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; user-select: none;
  transition: background var(--t) var(--ease);
}
.collapsible-head:hover { background: rgba(124,58,237,.03); }
.collapsible-block:not(.closed) .collapsible-head { border-bottom: 1px solid var(--border); }

.collapsible-head-left { display: flex; align-items: center; gap: 12px; }

/* Ícone do bloco colapsável */
.collapsible-head-left > span[style],
.collapsible-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  background: rgba(124,58,237,.12) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 16px !important; flex-shrink: 0;
}
.collapsible-head-title { font-size: 15px; font-weight: 700; color: var(--text); }
.collapsible-head-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }

.collapsible-chevron {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--text3);
  transition: transform var(--t2) var(--ease), color var(--t) var(--ease);
}
.collapsible-block.closed .collapsible-chevron { transform: rotate(-90deg); }
.collapsible-head:hover .collapsible-chevron { color: var(--accent3); }

.collapsible-body {
  overflow: hidden;
  transition: height var(--t2) var(--ease);
}

/* ── CALENDAR ────────────────────────────────────────── */
.calendar-header {
  background: var(--bg2);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 10px;
}

.calendar-nav { display: flex; align-items: center; gap: 10px; }

.cal-nav-btn {
  width: 30px; height: 30px;
  border-radius: 7px; border: 1px solid var(--border);
  background: var(--card); color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-family: var(--font);
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--spring);
}
.cal-nav-btn:hover { background: var(--accent); border-color: var(--accent); transform: scale(1.08); }
.cal-nav-btn:active { transform: scale(.97); }

.cal-month-label {
  font-size: 15px; font-weight: 700;
  min-width: 150px; text-align: center;
}

.cal-view-btns {
  display: flex; gap: 3px;
  background: var(--bg); padding: 3px;
  border-radius: 8px; border: 1px solid var(--border);
}
.cal-view-btn {
  padding: 5px 13px; border-radius: 6px; border: none;
  background: transparent; color: var(--text2);
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.cal-view-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(124,58,237,.3); }

.calendar-body-wrap {
  overflow: hidden;
  position: relative;
}
.calendar-body-inner {
  transition: opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.calendar-body-inner.animating {
  opacity: 0; transform: translateX(16px);
}

/* MONTH */
.calendar-grid { padding: 14px; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-bottom: 3px; }
.cal-weekday { text-align: center; font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; padding: 4px; }
.cal-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; }

.cal-day {
  aspect-ratio: 1;
  border-radius: 8px; border: 1px solid transparent;
  padding: 5px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  min-height: 48px; position: relative;
  transition: background var(--t) var(--ease),
              border-color var(--t) var(--ease),
              transform var(--t) var(--spring);
}
.cal-day:hover { background: var(--bg2); border-color: var(--border); transform: scale(1.04); }
.cal-day:active { transform: scale(.98); }
.cal-day.other-month .cal-day-num { color: var(--text3); opacity: .5; }
.cal-day.today { background: rgba(124,58,237,.1); border-color: rgba(124,58,237,.5); }
.cal-day.today .cal-day-num { color: var(--accent2); font-weight: 700; }
.cal-day.has-posts { background: rgba(255,255,255,.03); }
.cal-day.has-posts .cal-day-num { animation: pulseNum 2.4s ease-in-out infinite; }

@keyframes pulseNum { 0%,100% { opacity:1; } 50% { opacity:.65; } }

.cal-day-num { font-size: 12px; font-weight: 500; line-height: 1; margin-bottom: 4px; }
.cal-day-dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.cal-dot.REELS     { background: var(--reels); }
.cal-dot.FOTO      { background: var(--foto); }
.cal-dot.CARROSSEL { background: var(--carrossel); }
.cal-dot.STORY     { background: var(--story); }

/* WEEK */
.week-view { padding: 14px; }
.week-header { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; margin-bottom: 7px; }
.week-day-header {
  text-align: center; padding: 8px 4px; border-radius: 8px;
  cursor: pointer;
  transition: background var(--t) var(--ease), transform var(--t) var(--spring);
}
.week-day-header:hover { background: var(--bg2); transform: scale(1.03); }
.week-day-header.today { background: rgba(124,58,237,.15); }
.week-day-name { font-size: 10px; color: var(--text3); font-weight: 700; text-transform: uppercase; }
.week-day-num  { font-size: 19px; font-weight: 700; margin-top: 2px; }
.week-day-header.today .week-day-num { color: var(--accent2); }
.week-posts { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; align-items: start; }
.week-day-posts { display: flex; flex-direction: column; gap: 4px; min-height: 56px; }

.week-post-pill {
  background: var(--bg2); border-radius: 6px; padding: 4px 6px;
  font-size: 10px; font-weight: 600; cursor: pointer;
  border-left: 3px solid; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--spring);
}
.week-post-pill:hover { opacity: .75; transform: translateX(2px); }
.week-post-pill.REELS     { border-color:var(--reels);     color:var(--reels); }
.week-post-pill.FOTO      { border-color:var(--foto);      color:var(--foto); }
.week-post-pill.CARROSSEL { border-color:var(--carrossel); color:var(--carrossel); }
.week-post-pill.STORY     { border-color:var(--story);     color:var(--story); }

/* DAY */
.day-view { padding: 14px; }
.day-view-header { font-size: 17px; font-weight: 700; margin-bottom: 14px; color: var(--accent3); }

/* ── SIDE PANEL ──────────────────────────────────────── */
.panel-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  z-index: 199;
  pointer-events: none;
  transition: background var(--t2) var(--ease);
}
.panel-overlay.open { background: rgba(0,0,0,.55); pointer-events: auto; }

.day-panel {
  position: fixed; top: 0; right: 0;
  width: 380px; height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--border);
  z-index: 200; padding: 22px;
  overflow-y: auto;
  box-shadow: -12px 0 48px rgba(0,0,0,.55);
  transform: translateX(100%);
  transition: transform var(--t2) var(--ease);
}
.day-panel.open { transform: translateX(0); }

.day-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.day-panel-title { font-size: 15px; font-weight: 700; }

.btn-close-panel {
  width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg2); color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--spring);
}
.btn-close-panel:hover { background: var(--danger); border-color: var(--danger); transform: rotate(90deg); }

/* ── POSTS SECTION ───────────────────────────────────── */
.posts-inner-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg2); position: relative;
}
.posts-inner-tabs::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 50%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px 2px 0 0;
  transition: transform var(--t2) var(--ease);
}
.posts-inner-tabs[data-active="story"]::after { transform: translateX(100%); }

.posts-inner-tab {
  flex: 1; padding: 13px; border: none;
  background: transparent; color: var(--text2);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: color var(--t) var(--ease);
}
.posts-inner-tab.active { color: var(--accent3); }

.posts-count-badge {
  background: var(--card2); border-radius: 12px;
  padding: 2px 8px; font-size: 11px; font-weight: 700;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.posts-inner-tab.active .posts-count-badge { background: rgba(124,58,237,.2); color: var(--accent3); }

.posts-panel { display: none; padding: 18px; }
.posts-panel.active { display: block; }

/* ── POST CARDS ──────────────────────────────────────── */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

/* reveal animation via JS / IntersectionObserver */
.post-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  opacity: 0; transform: translateY(20px);
  transition: opacity .4s var(--ease-out),
              transform .4s var(--ease-out),
              border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.post-card.revealed { opacity: 1; transform: translateY(0); }
.post-card:hover {
  border-color: rgba(124,58,237,.45);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(124,58,237,.12);
  transform: translateY(-3px);
}
.post-card.revealed:hover { transform: translateY(-3px); }

.post-card-header {
  padding: 11px 15px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 7px;
}
.post-badges { display: flex; gap: 5px; flex-wrap: wrap; }

.badge {
  padding: 3px 9px; border-radius: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  display: inline-flex; align-items: center; gap: 3px;
}
.badge.REELS     { background:rgba(124,58,237,.18); color:var(--reels);     border:1px solid rgba(124,58,237,.28); }
.badge.FOTO      { background:rgba(59,130,246,.18);  color:var(--foto);      border:1px solid rgba(59,130,246,.28); }
.badge.CARROSSEL { background:rgba(245,158,11,.18);  color:var(--carrossel); border:1px solid rgba(245,158,11,.28); }
.badge.STORY     { background:rgba(16,185,129,.18);  color:var(--story);     border:1px solid rgba(16,185,129,.28); }
.badge.objetivo  { background:var(--card); border:1px solid var(--border); color:var(--text2); }

.post-date { font-size: 11px; color: var(--text3); display: flex; align-items: center; gap: 4px; }
.post-card-body { padding: 14px; }
.post-gancho { font-size: 14px; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
.post-prato { font-size: 12px; color: var(--accent3); margin-bottom: 9px; display: flex; align-items: center; gap: 4px; }

.post-field {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 9px 11px; margin-bottom: 7px;
}
.post-field-label {
  font-size: 9px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 4px; display: flex; align-items: center; gap: 3px;
}
.post-field-text { font-size: 12px; color: var(--text2); line-height: 1.5; white-space: pre-wrap; }

.post-link {
  color: var(--accent3); text-decoration: none; font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
  transition: color var(--t) var(--ease);
}
.post-link:hover { color: #fff; text-decoration: underline; }

.post-thumb { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 9px; }
.post-thumb img {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border);
  transition: transform var(--t) var(--spring);
}
.post-thumb img:hover { transform: scale(1.1); }

.post-card-rest {
  padding: 5px 14px 0;
}
.post-rest-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2px;
  background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.18);
  color: var(--accent3);
}
.post-field-note {
  background: rgba(245,158,11,.06) !important;
  border-color: rgba(245,158,11,.22) !important;
}
.post-card-footer {
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  display: flex; gap: 7px; justify-content: flex-end;
}

/* ── EMPTY STATES — redesign ─────────────────────────── */
.empty-state {
  text-align: center; padding: 56px 24px; color: var(--text3);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.empty-state-icon {
  font-size: 48px; margin-bottom: 16px;
  width: 76px; height: 76px; border-radius: 20px;
  background: var(--bg2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  line-height: 1; box-shadow: 0 4px 18px rgba(0,0,0,.1);
}
.empty-state-text { font-size: 15px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.empty-state-sub  { font-size: 13px; color: var(--text3); margin-bottom: 18px; max-width: 280px; line-height: 1.5; }
.empty-state-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-size: 13px; font-weight: 700; border: none;
  cursor: pointer; font-family: var(--font);
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}
.empty-state-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.45); }

/* ── SKELETON LOADING ────────────────────────────────── */
@keyframes sk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.sk {
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg2) 25%, var(--border) 50%, var(--bg2) 75%);
  background-size: 800px 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
/* Post card skeleton */
.post-card-skeleton {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden; padding: 0;
}
.post-card-skeleton .sk-header { height: 40px; background: var(--bg2); display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.post-card-skeleton .sk-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.post-card-skeleton .sk-footer { height: 38px; background: var(--bg2); border-top: 1px solid var(--border); }
.sk-circle { border-radius: 50% !important; }
/* KPI skeleton */
.kpi-skeleton {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
/* Task row skeleton */
.task-skeleton {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}

/* ── MODAL ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(0px);
  pointer-events: none;
  transition: background var(--t2) var(--ease), backdrop-filter var(--t2) var(--ease);
}
.modal-overlay.open {
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; width: 100%; max-width: 860px; max-height: 90vh;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.65);
  opacity: 0; transform: scale(.94) translateY(18px);
  transition: opacity var(--t2) var(--ease-out), transform var(--t2) var(--ease-out);
}
.modal-overlay.open .modal { opacity: 1; transform: scale(1) translateY(0); }

.modal-header {
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg2);
}
.modal-title { font-size: 17px; font-weight: 700; }
.modal-body { flex: 1; overflow-y: auto; padding: 22px; display: flex; gap: 22px; }
.modal-footer {
  padding: 14px 22px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 9px; background: var(--bg2);
}

/* THEME SELECTOR */
.theme-selector { width: 250px; flex-shrink: 0; }
.theme-selector-title { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 11px; }

.theme-list { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; max-height: 380px; }

.theme-btn {
  padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; gap: 9px;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t) var(--spring);
  text-align: left; color: var(--text);
}
.theme-btn:hover { border-color: var(--accent); transform: translateX(2px); }
.theme-btn.active { border-color: var(--accent); background: rgba(124,58,237,.1); }

.theme-swatch { width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0; border: 1px solid rgba(255,255,255,.08); }
.theme-btn-info { flex: 1; }
.theme-btn-name { font-size: 12px; font-weight: 600; }
.theme-btn-desc { font-size: 10px; color: var(--text3); margin-top: 1px; }

.theme-preview { flex: 1; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.preview-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; padding: 7px 11px; background: var(--bg); border-bottom: 1px solid var(--border); }
.preview-frame { flex: 1; border: none; display: block; }

/* ── CONFIRM ─────────────────────────────────────────── */
.confirm-dialog {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(0px); pointer-events: none;
  transition: background var(--t2) var(--ease), backdrop-filter var(--t2) var(--ease);
}
.confirm-dialog.open { background: rgba(0,0,0,.72); backdrop-filter: blur(6px); pointer-events: auto; }

.confirm-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 26px;
  max-width: 360px; width: 100%; box-shadow: var(--shadow);
  opacity: 0; transform: scale(.9) translateY(12px);
  transition: opacity var(--t2) var(--ease-out), transform var(--t2) var(--ease-out);
}
.confirm-dialog.open .confirm-box { opacity: 1; transform: scale(1) translateY(0); }

.confirm-icon { font-size: 34px; text-align: center; margin-bottom: 11px; }
.confirm-title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 7px; }
.confirm-text  { font-size: 13px; color: var(--text2); text-align: center; margin-bottom: 19px; }
.confirm-buttons { display: flex; gap: 9px; }
.confirm-buttons button { flex: 1; padding: 10px; }

/* ── REVEAL ANIMATION ────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .48s var(--ease-out), transform .48s var(--ease-out);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

/* ── APP THEME PICKER ────────────────────────────────── */
.theme-picker-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--t),color var(--t),background var(--t);flex-shrink:0;}
.theme-picker-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--bg3);}
.app-settings-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:14px 0 18px;}
.app-settings-tab{background:transparent;border:none;color:var(--text2);padding:10px 14px;font-size:13px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;}
.app-settings-tab:hover{color:var(--text);}
.app-settings-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.app-settings-pane{display:block;}
.app-settings-section{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px;}
.app-settings-row-label{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.app-settings-hint{font-size:11px;font-weight:400;color:var(--text3);}
.app-settings-row{display:flex;gap:6px;align-items:center;}
.app-settings-input{flex:1;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--text);font-family:inherit;}
.app-settings-input:focus{outline:none;border-color:var(--accent);}
.app-settings-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.app-settings-btn:hover{filter:brightness(1.1);}
.app-settings-btn-sec{background:var(--bg3);color:var(--text2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;cursor:pointer;}
.app-settings-btn-sec:hover{color:var(--text);border-color:var(--accent);}
.app-settings-btn-test{background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:500;cursor:pointer;}
.app-settings-btn-test:hover{color:var(--accent);border-color:var(--accent);}
.app-settings-action-row{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap;}
.app-settings-link{font-size:11px;color:var(--accent);text-decoration:none;}
.app-settings-link:hover{text-decoration:underline;}
.app-settings-test-result{font-size:11px;color:var(--text3);}
.app-settings-test-result.ok{color:#22c55e;}
.app-settings-test-result.err{color:#ef4444;}
.app-settings-info-block{font-size:12px;color:var(--text2);line-height:1.6;}
.app-settings-info-block code{background:var(--bg3);padding:1px 5px;border-radius:4px;font-size:11px;color:var(--accent);}
.app-settings-pre{background:var(--bg3);padding:10px 12px;border-radius:6px;font-size:11px;color:var(--text2);overflow-x:auto;margin-top:6px;font-family:Menlo,monospace;line-height:1.5;}
.app-uazapi-status{position:relative;}
.app-uazapi-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:#999;border:1.5px solid var(--card);transition:background .25s;}
.app-uazapi-dot.connected{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.4);animation:appUazapiPing 2s ease-out infinite;}
.app-uazapi-dot.disconnected{background:#ef4444;}
.app-uazapi-dot.warning{background:#f59e0b;}
@keyframes appUazapiPing{0%{box-shadow:0 0 0 0 rgba(34,197,94,.45);}70%{box-shadow:0 0 0 6px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}
.app-presence{display:flex;align-items:center;gap:0;cursor:pointer;padding:2px 6px;border-radius:18px;border:1px solid var(--border);background:var(--bg2);transition:border-color .15s,background .15s;}
.app-presence:hover{border-color:var(--accent);background:var(--bg3);}
.app-presence-avatar{width:24px;height:24px;border-radius:50%;background:var(--bg3);color:var(--text);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--card);margin-left:-7px;text-transform:uppercase;flex-shrink:0;background-size:cover;background-position:center;}
.app-presence-avatar:first-child{margin-left:0;}
.app-presence-avatar.more{background:var(--accent);color:#fff;font-size:9px;}
.app-presence-avatar.offline{filter:grayscale(1);opacity:.55;}
.app-presence-edit-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text2);padding:4px 10px;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.06));border:1px solid rgba(99,102,241,.3);border-radius:12px;margin:6px 0;animation:appPulseFade 1.5s ease-in-out infinite;}
.app-presence-edit-badge .dot{width:6px;height:6px;background:#22c55e;border-radius:50%;}
@keyframes appPulseFade{0%,100%{opacity:.7;}50%{opacity:1;}}
.app-presence-popover{position:fixed;top:62px;right:120px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;z-index:300;min-width:240px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s;}
.app-presence-popover.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.app-presence-popover-title{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text2);margin-bottom:10px;}
.app-presence-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:var(--text);}
.app-presence-row .app-presence-avatar{margin:0;width:28px;height:28px;}
.app-presence-row-name{font-weight:500;}
.app-presence-row-time{font-size:10px;color:var(--text3);margin-left:auto;}
.color-popover{position:fixed;top:62px;right:16px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;z-index:300;min-width:196px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:scale(.95) translateY(-6px);transition:opacity .2s var(--ease),transform .2s var(--ease);}
.color-popover.open{opacity:1;pointer-events:auto;transform:scale(1) translateY(0);}
.color-popover-title{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--text2);margin-bottom:14px;}
.color-swatches{display:flex;gap:8px;flex-wrap:wrap;}
.color-swatch{width:36px;height:36px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;}
.color-swatch:hover{transform:scale(1.1);}
.color-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text);}
.color-swatch-label{font-size:9px;color:var(--text2);text-align:center;margin-top:4px;letter-spacing:.5px;}
/* ── DATE + TIME row ─────────────────────────────────── */
.date-time-row{display:flex;gap:8px;}
.date-time-row input[type="date"]{flex:1;min-width:0;}
.date-time-row input[type="time"]{width:116px;flex-shrink:0;}
/* ── RESTAURANT SELECTOR ─────────────────────────────── */
.rest-bar {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 50;
}
.rest-bar-label { font-size: 11px; font-weight: 700; color: var(--text3); white-space: nowrap; }
.rest-selector-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: var(--r2);
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: all var(--t) var(--ease);
  min-width: 140px;
}
.rest-selector-btn:hover { border-color: var(--accent); }
.rest-selector-btn svg { margin-left: auto; color: var(--text3); transition: transform var(--t) var(--ease); }
.rest-selector-btn.open svg { transform: rotate(180deg); }
.rest-dropdown {
  position: absolute; top: calc(100% + 4px); left: 24px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 6px;
  min-width: 200px; z-index: 200;
  box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.97);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.rest-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.rest-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: var(--r2);
  font-size: 12px; font-weight: 500; color: var(--text2);
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
.rest-dropdown-item:hover { background: var(--bg2); color: var(--text); }
.rest-dropdown-item.active { background: rgba(124,58,237,.1); color: var(--accent); font-weight: 700; }
.rest-dot-wrap { position: relative; width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.rest-dot-wrap .rest-dot { width: 9px; height: 9px; border-radius: 50%; pointer-events: none; }
.rest-color-input { position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px); opacity: 0; cursor: pointer; border: none; padding: 0; border-radius: 50%; }
.rest-logo-btn { background: none; border: none; cursor: pointer; padding: 0 2px; border-radius: 3px; opacity: 0; transition: opacity var(--t) var(--ease); display: flex; align-items: center; font-size: 11px; }
.rest-dropdown-item:hover .rest-logo-btn { opacity: 1; }
.rest-logo-thumb { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.rest-del-btn { background: none; border: none; color: var(--text3); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; border-radius: 3px; opacity: 0; transition: opacity var(--t) var(--ease), color var(--t) var(--ease); margin-left: auto; }
.rest-dropdown-item:hover .rest-del-btn { opacity: 1; }
.rest-del-btn:hover { color: #ef4444; }
/* ── Drag & Drop ── */
.cal-dot { cursor: grab; }
.cal-dot[draggable]:active { cursor: grabbing; }
.cal-dot.dragging { opacity: .3; }
.cal-day.drag-over { background: rgba(124,58,237,.1) !important; box-shadow: inset 0 0 0 1.5px var(--accent); }
.week-day-posts.drag-over { background: rgba(124,58,237,.07); border-radius: 8px; outline: 1.5px dashed var(--accent); }
.week-post-pill.dragging { opacity: .3; cursor: grabbing; }
.week-post-pill[draggable] { cursor: grab; }
.rest-bar-actions { display: flex; gap: 6px; margin-left: auto; }
.btn-data {
  padding: 5px 12px; border-radius: var(--r2);
  border: 1px solid var(--border); background: transparent;
  color: var(--text2); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  display: inline-flex; align-items: center; gap: 5px;
  transition: all var(--t) var(--ease);
}
.btn-data:hover { border-color: var(--accent); color: var(--accent); background: var(--bg3); }

/* ── FILTER BAR ──────────────────────────────────────── */
.filter-bar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 20px; padding: 12px 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.filter-search {
  flex: 1; min-width: 180px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 8px 14px;
  color: var(--text); font-size: 13px; font-family: var(--font);
  outline: none;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.filter-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,.1); }
.filter-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.filter-chip {
  padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--bg);
  color: var(--text2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: all var(--t) var(--ease);
  display: inline-flex; align-items: center; gap: 5px;
}
.filter-chip:hover { border-color: var(--accent2); color: var(--text); transform: translateY(-1px); }
.filter-chip.active[data-ftype="REELS"]     { background:rgba(124,58,237,.15); border-color:var(--reels);     color:var(--reels); }
.filter-chip.active[data-ftype="FOTO"]      { background:rgba(59,130,246,.15);  border-color:var(--foto);      color:var(--foto); }
.filter-chip.active[data-ftype="CARROSSEL"] { background:rgba(245,158,11,.15);  border-color:var(--carrossel); color:var(--carrossel); }
.filter-chip.active[data-ftype="STORY"]     { background:rgba(16,185,129,.15);  border-color:var(--story);     color:var(--story); }
.filter-clear {
  padding: 6px 12px; border-radius: 20px;
  border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.06);
  color: var(--danger); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  transition: all var(--t) var(--ease);
  display: none;
}
.filter-clear.visible { display: inline-flex; align-items: center; gap: 4px; }
.filter-clear:hover { background: rgba(239,68,68,.14); border-color: var(--danger); }

/* ── STATUS BADGE ────────────────────────────────────── */
.status-badge {
  padding: 3px 9px; border-radius: 20px;
  font-size: 9px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase;
}
.status-badge.rascunho  { background: rgba(148,163,184,.15); color: var(--text3); border: 1px solid rgba(148,163,184,.25); }
.status-badge.pendente  { background: rgba(245,158,11,.15);  color: var(--warning); border: 1px solid rgba(245,158,11,.25); }
.status-badge.aprovado  { background: rgba(16,185,129,.15);  color: var(--success); border: 1px solid rgba(16,185,129,.25); }
.status-badge.publicado { background: rgba(59,130,246,.15);  color: var(--foto);    border: 1px solid rgba(59,130,246,.25); }

.status-selector { display: flex; gap: 5px; flex-wrap: wrap; }
.status-opt {
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text2); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: all var(--t) var(--ease);
}
.status-opt:hover { border-color: var(--accent2); color: var(--text); }
.status-opt.active[data-status="rascunho"]  { background:rgba(148,163,184,.15); border-color:var(--text3);   color:var(--text); }
.status-opt.active[data-status="pendente"]  { background:rgba(245,158,11,.15);  border-color:var(--warning);  color:var(--warning); }
.status-opt.active[data-status="aprovado"]  { background:rgba(16,185,129,.15);  border-color:var(--success);  color:var(--success); }
.status-opt.active[data-status="publicado"] { background:rgba(59,130,246,.15);  border-color:var(--foto);     color:var(--foto); }

/* ── CHAR COUNTER ────────────────────────────────────── */
.char-counter {
  font-size: 11px; color: var(--text3); text-align: right; margin-top: 4px;
  transition: color var(--t) var(--ease);
}
.char-counter.warn { color: var(--warning); }
.char-counter.over { color: var(--danger); font-weight: 700; }

/* ── COPY BUTTON ─────────────────────────────────────── */
.field-with-copy { position: relative; }
.copy-btn {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: all var(--t) var(--ease);
  z-index: 1;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--bg3); }
.copy-btn.copied { border-color: var(--success); color: var(--success); background: rgba(16,185,129,.1); }
.field-with-copy textarea,
.field-with-copy input { padding-right: 42px; }

/* ── NOTAS ───────────────────────────────────────────── */
.notas-field { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.2) !important; }
.notas-label-badge {
  font-size: 9px; padding: 1px 6px; border-radius: 4px;
  background: rgba(245,158,11,.15); color: var(--warning);
  margin-left: 6px; vertical-align: middle;
}

/* ── MODAL GENÉRICO ──────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
  padding: 24px; box-shadow: 0 24px 64px rgba(0,0,0,.4);
  transform: translateY(12px); transition: transform .2s;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.modal-sub { font-size: 12px; color: var(--text2); margin-bottom: 20px; line-height: 1.5; }
.modal-section { margin-bottom: 18px; }
.modal-label {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text2); margin-bottom: 6px; display: block;
}
.modal-label span { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text3); margin-left: 6px; }
.modal-textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 12.5px; line-height: 1.55; resize: vertical;
  font-family: inherit; box-sizing: border-box; min-height: 80px;
}
.modal-textarea:focus { outline: none; border-color: var(--accent); }
.modal-textarea.tall { min-height: 120px; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.modal-save-btn {
  padding: 9px 22px; border-radius: 10px; border: none;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.modal-save-btn:hover { opacity: .88; }
.modal-cancel-btn {
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border);
  background: transparent; color: var(--text2); font-size: 13px; cursor: pointer;
}
.modal-hint { font-size: 10.5px; color: var(--text3); margin-top: 5px; line-height: 1.4; }

/* ── CLAUDE AI ───────────────────────────────────────── */
.ai-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(124,58,237,.4);
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(168,85,247,.08));
  color: var(--accent2);
  font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: .3px;
  transition: all .2s; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(124,58,237,.12);
}
.ai-btn:hover:not(:disabled) { background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(168,85,247,.18)); border-color: var(--accent); box-shadow: 0 4px 14px rgba(124,58,237,.25); transform: translateY(-1px); }
.ai-btn:active { transform: translateY(0); }
.ai-btn:disabled { opacity: .5; cursor: wait; }
.ai-btn .ai-spin { display: inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-label-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.ai-result-box {
  display: none; margin-top: 10px; padding: 14px;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--bg);
  font-size: 14px; color: var(--text1); line-height: 1.6;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.ai-result-box.visible { display: block; }
.ai-result-actions { display: flex; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Estrutura interna do resultado de IA (markdown renderizado) */
.ai-rendered { display: block; }
.ai-rendered .ai-section {
  background: var(--bg2); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 10px; border-left: 3px solid var(--accent);
}
.ai-rendered .ai-section:last-child { margin-bottom: 0; }
.ai-rendered h3 {
  font-size: 11px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
  display: flex; align-items: center; gap: 6px;
}
.ai-rendered p { margin: 0 0 8px; color: var(--text1); font-size: 14px; }
.ai-rendered p:last-child { margin-bottom: 0; }
.ai-rendered strong { color: var(--text1); font-weight: 700; }
.ai-rendered em { color: var(--text2); font-style: italic; }
.ai-rendered ul, .ai-rendered ol { margin: 6px 0 8px; padding-left: 22px; color: var(--text1); }
.ai-rendered li { margin: 3px 0; }
.ai-rendered blockquote {
  border-left: 3px solid var(--accent); padding: 6px 12px; margin: 8px 0;
  background: var(--bg2); border-radius: 0 6px 6px 0; font-style: italic; color: var(--text2);
}
.ai-use-btn {
  padding: 5px 12px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer;
}
.ai-use-btn:hover { opacity: .9; }
.ai-discard-btn {
  padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text2); font-size: 11px; cursor: pointer;
}
/* API Key field in popover */
.ai-key-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.ai-key-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--text2); text-transform: uppercase; margin-bottom: 6px; }
.ai-key-input {
  width: 100%; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 12px; font-family: monospace;
  box-sizing: border-box;
}
.ai-key-input:focus { outline: none; border-color: var(--accent); }
.ai-key-saved { font-size: 10px; color: var(--success); margin-top: 4px; display: none; }

/* ── RECORRÊNCIA ──────────────────────────────────────── */
.recorrencia-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.recorrencia-btn {
  padding: 7px 16px; border-radius: 24px; border: 1.5px solid var(--border);
  background: transparent; color: var(--text2); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s; letter-spacing: .3px;
}
.recorrencia-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 3px 10px rgba(124,58,237,.15); }
.recorrencia-btn.active {
  background: rgba(124,58,237,.18); border-color: var(--accent);
  color: var(--accent); box-shadow: 0 3px 12px rgba(124,58,237,.2);
}
.recorrencia-semanas {
  display: none; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 12px; color: var(--text2);
}
.recorrencia-semanas.visible { display: flex; }
.recorrencia-semanas input[type=number] {
  width: 60px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text); font-size: 12px; text-align: center;
}
.badge.recorrente {
  background: rgba(16,185,129,.15); color: #10b981;
  border: 1px solid rgba(16,185,129,.3);
}

/* ── STATS BLOCK ─────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; padding: 18px;
}
.stat-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px;
}
.stat-card-title { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.stat-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.stat-row:last-child { margin-bottom: 0; }
.stat-label { font-size: 12px; color: var(--text2); flex: 1; }
.stat-bar-wrap { width: 80px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.stat-bar { height: 100%; border-radius: 2px; transition: width .6s var(--ease); }
.stat-num { font-size: 12px; font-weight: 700; color: var(--text); min-width: 20px; text-align: right; }
.stat-big { font-size: 32px; font-weight: 700; color: var(--accent3); line-height: 1; margin-bottom: 4px; }
.stat-big-label { font-size: 11px; color: var(--text2); }

/* ── PERIOD SELECTOR (export) ────────────────────────── */
.period-selector { margin-bottom: 14px; }
.period-selector label { font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 8px; }
.period-opts { display: flex; gap: 5px; flex-wrap: wrap; }
.period-opt {
  padding: 5px 11px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text2); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: all var(--t) var(--ease);
}
.period-opt:hover { border-color: var(--accent2); color: var(--text); }
.period-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── UNDO TOAST ──────────────────────────────────────── */
.toast-undo {
  background: transparent; border: none; padding: 0 0 0 10px;
  color: var(--accent3); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--font);
  text-decoration: underline; text-underline-offset: 2px;
}
.toast-undo:hover { color: #fff; }

/* ── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cal-day.has-posts .cal-day-num { animation: none; }
  .post-card { opacity: 1; transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .app-content { padding: 14px; }
  .type-grid { grid-template-columns: repeat(2,1fr); }
  .modal-body { flex-direction: column; }
  .theme-selector { width: 100%; }
  .preview-frame { min-height: 180px; }
  .day-panel { width: 100%; }
  .cal-weekday { font-size: 9px; }
  .cal-day-num { font-size: 11px; }
  .week-view { overflow-x: auto; }
  .week-header, .week-posts { min-width: 540px; }
  .posts-grid {
    display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px;
  }
  .post-card { min-width: 270px; flex-shrink: 0; }
  .app-header { padding: 10px 14px 10px 56px; gap: 8px; } /* left:56 = espaço pro hamburger */
  .main-tabs { gap: 4px; }
  .main-tab { padding: 7px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
  .main-tab { flex: 1; justify-content: center; padding: 8px 6px; font-size: 11px; }
  .main-tab svg { display: none; }
  .app-header { flex-direction: column; gap: 8px; align-items: stretch; padding: 10px 12px; }
  .restaurant-sticky { flex-direction: column; align-items: stretch; }
  .app-content { padding: 10px; }
  .user-chip { align-self: flex-end; }
}
/* ── Login Screen ── */
.login-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(145deg, #0f0f13 0%, #1a1025 50%, #0f1a1f 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity .4s ease;
}
.login-screen.hidden { opacity: 0; pointer-events: none; }
.login-orb3 { display: none; }

.login-box {
  text-align: center; padding: 52px 44px; max-width: 400px; width: 90%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px; backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.login-logo { margin-bottom: 20px; }
.login-logo img { width: 88px; height: 88px; object-fit: contain; display: block; margin: 0 auto;
  filter: drop-shadow(0 4px 20px rgba(249,115,22,.45)); }

.login-brand { font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #f97316; margin-bottom: 8px; }
.login-title {
  font-size: 26px; font-weight: 700; color: #f8f8f8;
  margin-bottom: 6px; letter-spacing: -.5px;
}
.login-sub { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 36px; }

.login-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px 24px; border-radius: 12px;
  background: #fff; border: none; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #1f1f1f;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.login-google-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.5); }
.login-google-btn:active { transform: translateY(0); }
.login-google-btn svg { flex-shrink: 0; }

.login-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:rgba(255,255,255,.2); font-size:12px; }
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }

.login-input { width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#f8f8f8; font-size:14px; outline:none; box-sizing:border-box; margin-bottom:10px; transition: border-color .2s; }
.login-input:focus { border-color:rgba(249,115,22,.5); }

.login-email-btn { width:100%; padding:13px 24px; border-radius:12px; background:linear-gradient(135deg,#f97316,#ea580c); border:none; cursor:pointer; font-size:15px; font-weight:600; color:#fff; transition:transform .15s,box-shadow .15s; box-shadow:0 4px 24px rgba(249,115,22,.3); }
.login-email-btn:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(249,115,22,.4); }

.login-error { margin-top: 16px; font-size: 12px; color: #ef4444; min-height: 18px; }
.login-footer {
  margin-top: 32px; font-size: 11px; color: rgba(255,255,255,.2);
}
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 20px;
  background: var(--bg2); border: 1px solid var(--border);
  cursor: pointer; transition: all var(--t) var(--ease);
}
.user-chip:hover { border-color: var(--accent); }
.user-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.user-avatar-placeholder { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.user-name { font-size: 11px; font-weight: 600; color: var(--text2); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ── Acesso Tab ── */
.acesso-wrap { max-width:620px; margin:0 auto; padding:8px 0 40px; }
.acesso-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px 24px; margin-bottom:16px; }
.acesso-title { font-size:13px; font-weight:700; color:var(--text); margin-bottom:4px; }
.acesso-sub { font-size:12px; color:var(--text3); margin-bottom:16px; }
.acesso-add-row { display:flex; gap:8px; margin-bottom:14px; }
.acesso-input { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:var(--r2); padding:8px 12px; color:var(--text); font-size:13px; font-family:var(--font); outline:none; transition:border-color var(--t) var(--ease); width:100%; box-sizing:border-box; }
.acesso-input:focus { border-color:var(--accent); }
.acesso-add-btn { padding:8px 18px; border-radius:var(--r2); background:var(--accent); border:none; color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); white-space:nowrap; transition:opacity .15s; }
.acesso-add-btn:hover { opacity:.88; }
.acesso-list-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
/* Member row */
.acesso-member-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.acesso-member-row:last-child { border-bottom:none; }
.acesso-member-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:#fff; flex-shrink:0; background:var(--accent); background-size:cover; background-position:center; position:relative; }
.acesso-member-avatar.editable { cursor:pointer; }
.acesso-member-avatar.editable:hover::after { content:'📷'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.5); border-radius:50%; font-size:14px; }
.acesso-member-info { flex:1; min-width:0; }
.acesso-member-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acesso-member-email { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acesso-member-badges { display:flex; align-items:center; gap:5px; flex-shrink:0; }
.acesso-role-badge { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:2px 7px; border-radius:20px; }
.acesso-role-badge.admin { background:rgba(249,115,22,.15); color:#f97316; }
.acesso-role-badge.member { background:rgba(99,102,241,.12); color:var(--accent); }
.acesso-auth-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; letter-spacing:.5px; }
.acesso-auth-badge.google { background:rgba(66,133,244,.12); color:#4285f4; }
.acesso-auth-badge.email { background:var(--bg2); color:var(--text2); }
.acesso-online-dot { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }
.acesso-online-dot.online { background:#22c55e; }
.acesso-member-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.acesso-action-btn { background:none; border:none; color:var(--text3); font-size:14px; cursor:pointer; padding:4px 6px; border-radius:6px; transition:background .12s,color .12s; }
.acesso-action-btn:hover { background:var(--bg2); color:var(--accent); }
.acesso-action-btn.danger:hover { color:#ef4444; }
.acesso-perms-summary { font-size:11px; color:var(--text3); white-space:nowrap; }
/* Form grid */
.acesso-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.acesso-form-section { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; margin:12px 0 6px; }

/* Permissions modal */
.perms-overlay { position:fixed; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(4px); z-index:9999; display:none; align-items:center; justify-content:center; padding:20px; }
.perms-overlay.open { display:flex; }
.perms-card { background:var(--card); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); width:100%; max-width:540px; max-height:85vh; overflow:auto; padding:24px; }
.perms-card h2 { margin:0 0 4px; font-size:18px; color:var(--text); }
.perms-card .perms-email { font-size:13px; color:var(--text3); margin-bottom:18px; }
.perms-section { margin-bottom:18px; }
.perms-section h3 { font-size:12px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.4px; margin:0 0 10px; }
.perms-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.perms-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; background:var(--bg); border:1px solid var(--border); cursor:pointer; font-size:13px; color:var(--text); transition:background .12s, border-color .12s; }
.perms-item:hover { background:var(--bg2); border-color:var(--accent); }
.perms-item input { cursor:pointer; }
.perms-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
.perms-btn { padding:9px 16px; border-radius:8px; border:1px solid var(--border); background:var(--card); cursor:pointer; font-size:13px; font-weight:600; color:var(--text2); }
.perms-btn:hover { background:var(--bg2); }
.perms-btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.perms-btn-primary:hover { background:var(--accent); filter:brightness(.95); }
.perms-toggle-all { font-size:11px; color:var(--accent); cursor:pointer; margin-left:8px; font-weight:600; }
/* ── Google Meu Negócio (GMB) ── */
.gmb-wrap { max-width:960px; margin:0 auto; padding:8px 0 40px; }

/* GMB page header */
.gmb-page-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap;
}
.gmb-page-icon {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #ea4335, #fbbc04);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 4px 16px rgba(234,67,53,.3);
}
.gmb-page-title { font-size: 22px; font-weight: 800; color: var(--text); }
.gmb-page-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }

.gmb-connect-bar { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px 24px; margin-bottom:20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gmb-connect-icon { font-size:28px; flex-shrink:0; }
.gmb-connect-text { flex:1; }
.gmb-connect-title { font-size:14px; font-weight:700; color:var(--text1); margin-bottom:2px; }
.gmb-connect-sub { font-size:12px; color:var(--text3); }
.gmb-connect-btn { display:flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; border:none; background:#fff; color:#3c4043; font-size:13px; font-weight:600; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.25); font-family:var(--font); white-space:nowrap; transition:box-shadow .15s; }
.gmb-connect-btn:hover { box-shadow:0 2px 8px rgba(0,0,0,.3); }
.gmb-demo-btn { display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:10px; border:1px dashed var(--border); background:transparent; color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font); white-space:nowrap; transition:all .15s; }
.gmb-demo-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(99,102,241,.06); }
.gmb-demo-badge { display:inline-block; padding:2px 8px; border-radius:6px; background:rgba(245,158,11,.15); color:#f59e0b; font-size:10px; font-weight:700; letter-spacing:.5px; margin-left:8px; }
.gmb-token-status { font-size:11px; color:var(--text3); }
.gmb-token-status.ok { color:#22c55e; }
/* Location selector */
.gmb-loc-bar { display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.gmb-loc-select {
  flex:1; min-width:220px; background:var(--bg);
  border:1.5px solid var(--border); border-radius:10px;
  padding:9px 38px 9px 14px; color:var(--text1); font-size:13px;
  font-family:var(--font); outline:none; font-weight:600;
  -webkit-appearance:none !important; appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%23ea4335' stroke-width='2.5'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important;
  transition:border-color .15s, box-shadow .15s;
}
.gmb-loc-select:focus { border-color:#ea4335; box-shadow:0 0 0 3px rgba(234,67,53,.12); }
.gmb-refresh-btn { padding:9px 16px; border-radius:10px; background:var(--accent); border:none; color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); }
/* KPI row */
.gmb-kpi-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; margin-bottom:20px; }
.gmb-kpi { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; }
.gmb-kpi-val { font-size:28px; font-weight:800; color:var(--text1); line-height:1; }
.gmb-kpi-lbl { font-size:11px; color:var(--text3); margin-top:4px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.gmb-kpi-sub { font-size:10px; color:var(--text2); margin-top:2px; }
/* Score card */
.gmb-score-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin-bottom:16px; }
.gmb-score-head { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.gmb-score-circle { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; flex-shrink:0; font-weight:800; }
.gmb-score-circle.green { background:rgba(34,197,94,.15); border:3px solid #22c55e; color:#22c55e; }
.gmb-score-circle.yellow { background:rgba(245,158,11,.15); border:3px solid #f59e0b; color:#f59e0b; }
.gmb-score-circle.red { background:rgba(239,68,68,.15); border:3px solid #ef4444; color:#ef4444; }
.gmb-score-num { font-size:22px; line-height:1; }
.gmb-score-max { font-size:10px; color:inherit; opacity:.7; }
.gmb-score-info { flex:1; }
.gmb-score-title { font-size:15px; font-weight:700; color:var(--text1); margin-bottom:4px; }
.gmb-score-desc { font-size:12px; color:var(--text3); }
.gmb-score-items { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gmb-score-item { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text2); }
.gmb-score-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.gmb-score-dot.ok { background:#22c55e; }
.gmb-score-dot.warn { background:#f59e0b; }
.gmb-score-dot.bad { background:#ef4444; }
/* Charts */
.gmb-charts-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:600px){ .gmb-charts-row { grid-template-columns:1fr; } }
.gmb-chart-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px 20px; }
.gmb-chart-title { font-size:13px; font-weight:700; color:var(--text1); margin-bottom:14px; }
.gmb-chart-wrap { height:160px; position:relative; }
/* Reviews */
.gmb-reviews-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin-bottom:16px; }
/* ── Pré-análise ── */
.gmb-preanalise-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin-bottom:20px; }
.gmb-preanalise-header { margin-bottom:14px; }
.gmb-preanalise-title { font-size:15px; font-weight:700; color:var(--text1); }
.gmb-preanalise-sub { font-size:12px; color:var(--text3); margin-top:2px; }
.gmb-preanalise-search { display:flex; gap:8px; }
.gmb-preanalise-input { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text1); font-size:13px; font-family:var(--font); outline:none; transition:border-color .15s; }
.gmb-preanalise-input:focus { border-color:var(--accent); }
.gmb-preanalise-input::placeholder { color:var(--text3); }
.gmb-preanalise-btn { display:flex; align-items:center; gap:6px; padding:10px 18px; border-radius:10px; background:var(--accent); border:none; color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font); white-space:nowrap; transition:filter .15s; }
.gmb-preanalise-btn:hover { filter:brightness(1.1); }
.gmb-pre-result { margin-top:16px; border-top:1px solid var(--border); padding-top:16px; }
.gmb-pre-top { display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.gmb-pre-photo { width:80px; height:80px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--bg2); }
.gmb-pre-photo-placeholder { width:80px; height:80px; border-radius:10px; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:32px; flex-shrink:0; }
.gmb-pre-info { flex:1; min-width:200px; }
.gmb-pre-name { font-size:17px; font-weight:800; color:var(--text1); margin-bottom:4px; }
.gmb-pre-cat { font-size:12px; color:var(--accent); font-weight:600; margin-bottom:6px; }
.gmb-pre-addr { font-size:12px; color:var(--text3); margin-bottom:8px; }
.gmb-pre-rating { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.gmb-pre-stars { font-size:13px; font-weight:700; color:var(--text1); }
.gmb-pre-reviews { font-size:12px; color:var(--text3); }
.gmb-pre-badges { display:flex; gap:6px; flex-wrap:wrap; }
.gmb-pre-badge { padding:3px 10px; border-radius:50px; font-size:11px; font-weight:600; background:var(--bg2); color:var(--text2); border:1px solid var(--border); }
.gmb-pre-badge.open { background:rgba(34,197,94,.1); color:#22c55e; border-color:rgba(34,197,94,.3); }
.gmb-pre-badge.closed { background:rgba(239,68,68,.1); color:#ef4444; border-color:rgba(239,68,68,.3); }
.gmb-pre-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:14px; }
.gmb-pre-kpi { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.gmb-pre-kpi-val { font-size:20px; font-weight:800; color:var(--text1); }
.gmb-pre-kpi-lbl { font-size:10px; color:var(--text3); margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.gmb-pre-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.gmb-pre-action-btn { padding:8px 16px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font); display:flex; align-items:center; gap:6px; transition:all .15s; text-decoration:none; }
.gmb-pre-action-btn:hover { border-color:var(--accent); color:var(--accent); }
.gmb-pre-notfound { text-align:center; padding:20px; color:var(--text3); font-size:13px; }
.gmb-health-wrap { display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; margin:16px 0; padding:16px; background:var(--bg); border-radius:12px; border:1px solid var(--border); }
.gmb-health-score-circle { position:relative; flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.gmb-health-score-circle svg { display:block; }
.gmb-health-score-num { position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); font-size:28px; font-weight:900; color:var(--text1); }
.gmb-health-score-lbl { position:absolute; top:50%; left:50%; transform:translate(-50%,20%); font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; }
.gmb-health-categories { flex:1; min-width:180px; display:flex; flex-direction:column; gap:8px; }
.gmb-health-cat { display:flex; align-items:center; gap:8px; }
.gmb-health-cat-icon { font-size:14px; width:20px; text-align:center; flex-shrink:0; }
.gmb-health-cat-name { font-size:12px; color:var(--text2); flex:1; }
.gmb-health-cat-pts { font-size:12px; font-weight:700; color:var(--text1); width:40px; text-align:right; flex-shrink:0; }
.gmb-health-cat-bar { width:100%; height:5px; background:var(--border); border-radius:3px; margin-top:2px; overflow:hidden; }
.gmb-health-cat-bar-fill { height:100%; border-radius:3px; transition:width .4s; }
.gmb-health-title { font-size:13px; font-weight:700; color:var(--text1); margin-bottom:10px; }
.gmb-health-checklist { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.gmb-health-check { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; background:var(--bg); border:1px solid var(--border); font-size:12px; color:var(--text2); }
.gmb-health-check.ok { border-color:rgba(34,197,94,.3); background:rgba(34,197,94,.05); }
.gmb-health-check.warn { border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.05); }
.gmb-health-check.bad { border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.05); }
.gmb-health-check-icon { font-size:14px; flex-shrink:0; }
.gmb-health-check-text { flex:1; }
.gmb-health-check-pts { font-size:11px; font-weight:700; color:var(--text3); white-space:nowrap; }
/* Lista de resultados da pré-análise */
.gmb-pre-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.gmb-pre-list-header { font-size:11px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.gmb-pre-list-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--bg); cursor:pointer; transition:all .15s; }
.gmb-pre-list-item:hover { border-color:var(--accent); background:var(--bg2); }
.gmb-pre-list-item.selected { border-color:var(--accent); background:rgba(99,102,241,.07); }
.gmb-pre-list-thumb { width:44px; height:44px; border-radius:8px; object-fit:cover; flex-shrink:0; background:var(--bg2); }
.gmb-pre-list-thumb-ph { width:44px; height:44px; border-radius:8px; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.gmb-pre-list-body { flex:1; min-width:0; }
.gmb-pre-list-name { font-size:13px; font-weight:700; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gmb-pre-list-loc { font-size:11px; color:var(--text3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gmb-pre-list-cat { font-size:11px; color:var(--accent); font-weight:600; margin-top:1px; }
.gmb-pre-list-right { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.gmb-pre-list-rating { font-size:13px; font-weight:800; color:var(--text1); }
.gmb-pre-list-reviews { font-size:10px; color:var(--text3); }
.gmb-pre-list-open { font-size:10px; font-weight:700; padding:2px 7px; border-radius:50px; }
.gmb-pre-list-open.open { background:rgba(34,197,94,.12); color:#22c55e; }
.gmb-pre-list-open.closed { background:rgba(239,68,68,.1); color:#ef4444; }
/* Detalhe expandido */
.gmb-pre-detail { margin-top:14px; border:1px solid var(--border); border-radius:14px; padding:16px; background:var(--bg); }
.gmb-pre-detail-back { font-size:12px; color:var(--text3); cursor:pointer; margin-bottom:12px; display:inline-flex; align-items:center; gap:4px; }
.gmb-pre-detail-back:hover { color:var(--accent); }
/* ── Ranking Grid ── */
.gmb-rank-section { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin-bottom:16px; }
.gmb-rank-biz-row { margin-bottom:14px; }
.gmb-rank-biz-wrap { display:flex; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 14px; }
.gmb-rank-biz-dropdown { border-top:1px solid var(--border); border-radius:0 0 10px 10px; overflow:hidden; }
.gmb-rank-biz-option { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; transition:background .1s; }
.gmb-rank-biz-option:hover, .gmb-rank-biz-option.focused { background:var(--bg2); }
.gmb-rank-biz-option-icon { font-size:14px; flex-shrink:0; color:var(--text3); }
.gmb-rank-biz-option-body { flex:1; min-width:0; }
.gmb-rank-biz-option-name { font-size:13px; font-weight:700; color:var(--text1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gmb-rank-biz-option-addr { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.gmb-rank-biz-loading { padding:12px 14px; font-size:12px; color:var(--text3); text-align:center; }
.gmb-rank-biz-input { flex:1; background:transparent; border:none; outline:none; color:var(--text1); font-size:13px; font-family:var(--font); }
.gmb-rank-biz-input::placeholder { color:var(--text3); }
.gmb-rank-biz-btn { padding:6px 14px; border-radius:8px; background:var(--accent); color:#fff; border:none; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; font-family:var(--font); transition:opacity .15s; }
.gmb-rank-biz-btn:hover { opacity:.85; }
.gmb-rank-header { margin-bottom:14px; }
.gmb-rank-title { font-size:15px; font-weight:700; color:var(--text1); }
.gmb-rank-sub { font-size:12px; color:var(--text3); margin-top:2px; }
.gmb-rank-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--bg); border:1px solid var(--border); border-radius:50px; padding:6px 14px; margin-bottom:16px; }
.gmb-rank-keyword-wrap { display:flex; align-items:center; gap:6px; flex:1; min-width:180px; }
.gmb-rank-quote { font-size:18px; color:var(--text3); line-height:1; }
.gmb-rank-keyword { flex:1; background:transparent; border:none; outline:none; font-size:13px; color:var(--text1); font-family:var(--font); }
.gmb-rank-keyword::placeholder { color:var(--text3); }
.gmb-rank-btn { padding:7px 18px; border-radius:50px; background:var(--accent); border:none; color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); white-space:nowrap; }
.gmb-rank-btn:hover { filter:brightness(1.1); }
.gmb-rank-sep { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.gmb-rank-slider { flex:1; min-width:80px; max-width:160px; accent-color:var(--accent); height:4px; cursor:pointer; }
.gmb-rank-pill { display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:50px; background:var(--bg2); border:1px solid var(--border); font-size:12px; color:var(--text2); font-weight:600; cursor:pointer; white-space:nowrap; transition:all .15s; user-select:none; }
.gmb-rank-pill:hover { border-color:var(--accent); color:var(--accent); }
.gmb-rank-chevron { font-size:10px; opacity:.7; }
.gmb-rank-map-wrap { position:relative; width:100%; height:460px; border-radius:12px; overflow:hidden; border:1px solid var(--border); margin-bottom:14px; background:var(--bg2); }
.gmb-rank-map { width:100%; height:100%; }
.gmb-rank-canvas { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.gmb-rank-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); border-radius:12px; }
.gmb-rank-spinner { width:36px; height:36px; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
#gmbRankLoadingText { font-size:13px; color:#fff; font-weight:600; }
.gmb-rank-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.gmb-rank-kpi { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.gmb-rank-kpi-val { font-size:22px; font-weight:800; color:var(--text1); }
.gmb-rank-kpi-lbl { font-size:11px; color:var(--text3); margin-top:2px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
.gmb-rank-history-title { font-size:13px; font-weight:700; color:var(--text1); margin-bottom:8px; }
.gmb-rank-history-list { display:flex; flex-direction:column; gap:6px; }
.gmb-rank-hist-item { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:border-color .15s; }
.gmb-rank-hist-item:hover { border-color:var(--accent); }
.gmb-rank-hist-kw { flex:1; font-size:13px; font-weight:600; color:var(--text1); }
.gmb-rank-hist-meta { font-size:11px; color:var(--text3); }
.gmb-rank-hist-avg { padding:3px 10px; border-radius:50px; font-size:12px; font-weight:700; color:#fff; }
/* Posts card */
.gmb-posts-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin-bottom:16px; }
.gmb-posts-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.gmb-posts-title { font-size:15px; font-weight:700; color:var(--text1); }
.gmb-post-types { display:flex; gap:6px; flex-wrap:wrap; }
.gmb-post-type-btn { padding:6px 12px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all .15s; }
.gmb-post-type-btn:hover { color:var(--text1); }
.gmb-post-type-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.gmb-post-form { display:flex; flex-direction:column; gap:10px; }
.gmb-post-textarea { width:100%; min-height:90px; resize:vertical; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 12px; color:var(--text1); font-size:13px; font-family:var(--font); outline:none; box-sizing:border-box; }
.gmb-post-textarea:focus { border-color:var(--accent); }
.gmb-post-input { width:100%; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:9px 12px; color:var(--text1); font-size:13px; font-family:var(--font); outline:none; box-sizing:border-box; }
.gmb-post-input:focus { border-color:var(--accent); }
.gmb-post-fields { display:flex; flex-direction:column; gap:10px; padding:12px; background:rgba(99,102,241,.04); border:1px dashed var(--border); border-radius:10px; }
.gmb-post-row { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:8px; align-items:center; }
.gmb-post-label { font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; }
.gmb-post-cta-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.gmb-post-actions { display:flex; gap:10px; flex-wrap:wrap; }
@media (max-width:640px) { .gmb-post-row { grid-template-columns:auto 1fr; } .gmb-post-cta-row { grid-template-columns:1fr; } }
.gmb-reviews-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.gmb-reviews-title { font-size:14px; font-weight:700; color:var(--text1); }
.gmb-reviews-filter { display:flex; gap:6px; }
.gmb-filter-btn { padding:5px 12px; border-radius:20px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); font-size:11px; font-weight:600; cursor:pointer; font-family:var(--font); transition:all .15s; }
.gmb-filter-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.gmb-review { border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:12px; background:var(--bg2); }
.gmb-review-head { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
.gmb-review-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; }
.gmb-review-meta { flex:1; }
.gmb-review-name { font-size:13px; font-weight:700; color:var(--text1); }
.gmb-review-date { font-size:11px; color:var(--text3); }
.gmb-review-stars { color:#f59e0b; font-size:14px; margin-top:2px; }
.gmb-review-text { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:12px; }
.gmb-review-reply-existing { background:var(--bg); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:10px 12px; font-size:12px; color:var(--text2); margin-bottom:10px; }
.gmb-review-reply-label { font-size:10px; font-weight:700; color:var(--accent); margin-bottom:4px; text-transform:uppercase; }
.gmb-review-actions { display:flex; gap:8px; flex-wrap:wrap; }
.gmb-ai-btn { display:flex; align-items:center; gap:5px; padding:7px 13px; border-radius:8px; border:1px solid var(--accent); background:var(--accentGlow); color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); transition:all .15s; }
.gmb-ai-btn:hover { background:var(--accent); color:#fff; }
.gmb-ai-btn:disabled { opacity:.5; cursor:not-allowed; }
.gmb-reply-area { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--text1); font-size:13px; font-family:var(--font); resize:vertical; min-height:80px; outline:none; margin-top:10px; transition:border-color .15s; }
.gmb-reply-area:focus { border-color:var(--accent); }
.gmb-publish-btn { padding:7px 14px; border-radius:8px; background:var(--accent); border:none; color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); }
.gmb-publish-btn:disabled { opacity:.5; cursor:not-allowed; }
.gmb-empty { text-align:center; padding:32px; color:var(--text3); font-size:13px; }
/* Multi-location dashboard */
.gmb-multi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-bottom:20px; }
.gmb-loc-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; cursor:pointer; transition:border-color .15s, transform .15s; }
.gmb-loc-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.gmb-loc-card-name { font-size:14px; font-weight:700; color:var(--text1); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gmb-loc-card-addr { font-size:11px; color:var(--text3); margin-bottom:12px; }
.gmb-loc-card-stats { display:flex; gap:12px; }
.gmb-loc-stat { text-align:center; }
.gmb-loc-stat-val { font-size:16px; font-weight:800; color:var(--text1); }
.gmb-loc-stat-lbl { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; }
.gmb-loc-score-bar { margin-top:12px; height:4px; background:var(--bg2); border-radius:2px; overflow:hidden; }
.gmb-loc-score-fill { height:100%; border-radius:2px; transition:width .4s; }
/* ── Share Links ── */
.share-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.share-tabs-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.share-tab-label { display:flex; align-items:center; gap:5px; font-size:12px; color:var(--text2); cursor:pointer; user-select:none; }
.share-tab-label input { accent-color:var(--accent); cursor:pointer; }
.share-item { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:12px 14px; margin-top:10px; }
.share-item-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.share-item-name { font-size:13px; font-weight:700; color:var(--text1); flex:1; }
.share-item-badges { display:flex; gap:4px; flex-wrap:wrap; }
.share-item-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--accentGlow); color:var(--accent); text-transform:uppercase; letter-spacing:.8px; }
.share-item-url { font-size:10px; color:var(--text3); word-break:break-all; margin-bottom:8px; background:var(--bg); border-radius:6px; padding:5px 8px; font-family:monospace; }
.share-item-actions { display:flex; gap:6px; }
.share-item-btn { padding:5px 10px; border-radius:6px; font-size:11px; font-weight:700; cursor:pointer; border:1px solid var(--border); background:var(--bg); color:var(--text2); font-family:var(--font); transition:background .15s; }
.share-item-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.share-item-btn.danger:hover { background:#ef4444; border-color:#ef4444; color:#fff; }
/* Share access overlay */
.share-access-overlay { position:fixed; inset:0; background:var(--bg); z-index:9999; display:flex; align-items:center; justify-content:center; }
.share-access-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:36px 32px; width:340px; max-width:92vw; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.4); }
.share-access-icon { font-size:40px; margin-bottom:12px; }
.share-access-title { font-size:20px; font-weight:800; color:var(--text1); margin-bottom:4px; }
.share-access-sub { font-size:12px; color:var(--text3); margin-bottom:20px; }
.share-access-input { width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:10px 14px; color:var(--text1); font-size:14px; font-family:var(--font); outline:none; margin-bottom:12px; }
.share-access-input:focus { border-color:var(--accent); }
.share-access-btn { width:100%; padding:11px; border-radius:10px; background:var(--accent); border:none; color:#fff; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--font); }
.share-access-err { color:#ef4444; font-size:12px; margin-top:10px; display:none; }
/* ── Sync dot ── */
.sync-dot { width: 7px; height: 7px; border-radius: 50%; transition: background .4s ease; flex-shrink: 0; cursor: default; }
.sync-dot.syncing { background: #f59e0b; animation: pulse-dot 1s ease infinite; }
.sync-dot.ok      { background: #22c55e; }
.sync-dot.err     { background: #ef4444; }
@keyframes pulse-dot { 0%,100%{opacity:1;}50%{opacity:.4;} }

/* ═══════════════════════════════════════════════════════
   SOCIAL PUBLISHER
═══════════════════════════════════════════════════════ */
.sp-wrap { display:flex;flex-direction:column;gap:16px;padding:20px 24px 60px;width:100%; }

/* ── PUBLIPOST PAGE HEADER ─────────────────────────────── */
.sp-page-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.sp-page-title-wrap { display: flex; align-items: center; gap: 14px; }
.sp-page-icon {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(135deg, #1877f2, #0a5fcc);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  box-shadow: 0 4px 16px rgba(24,119,242,.35);
}
.sp-page-title { font-size: 22px; font-weight: 800; color: var(--text); }
.sp-page-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }

/* Config bar */
.sp-config {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden;
}
.sp-config-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.sp-config-header-label {
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .6px;
}
.sp-config-inner { display:flex;flex-wrap:wrap;gap:12px;align-items:center; padding: 12px 18px; }
.sp-config-group { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.sp-config-label { font-size:12px;font-weight:700;color:var(--text2);white-space:nowrap; }
.sp-config-input { padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:12px;font-family:var(--font);width:220px;outline:none;transition:border-color .2s; }
.sp-config-input:focus { border-color:var(--accent); }
.sp-config-save-btn { padding:8px 14px;border-radius:8px;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:12px;font-weight:700;font-family:var(--font);transition:opacity .15s; }
.sp-config-save-btn:hover { opacity:.85; }

/* Facebook connect button */
.sp-fb-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #1877f2, #0a5fcc);
  color: #fff; font-weight: 700; font-size: 13px; font-family: var(--font);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(24,119,242,.3);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease), opacity .15s;
}
.sp-fb-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(24,119,242,.45); }
.sp-fb-btn:active { transform: translateY(0); opacity: .9; }

.sp-token-status { font-size: 12px; color: var(--text2); }
.sp-config-hint {
  font-size: 11px; color: var(--text3); margin-left: auto;
  padding: 4px 10px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--border);
}

/* Grid */
.sp-grid { display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start; }
@media(max-width:900px){ .sp-grid { grid-template-columns:1fr; } }

/* Cards */
.sp-card { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:18px; }
.sp-card-hdr { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.sp-card-title { font-size:15px;font-weight:700;color:var(--text); }

/* Account select — modern styled */
.sp-account-select-wrap { position: relative; display: inline-flex; align-items: center; }
.sp-account-select {
  -webkit-appearance: none !important; appearance: none !important;
  padding: 9px 36px 9px 14px !important; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg2);
  color: var(--text); font-size: 13px; font-weight: 600; font-family: var(--font);
  cursor: pointer; outline: none; min-width: 180px; max-width: 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%237c3aed' stroke-width='2.5'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.sp-account-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}

/* Type tabs */
.sp-type-row { display:flex;gap:8px;background:var(--bg2);border-radius:12px;padding:4px; }
.sp-type-tab { flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:9px;border:none;background:transparent;color:var(--text2);cursor:pointer;font-size:11px;font-weight:600;font-family:var(--font);transition:all .2s; }
.sp-type-tab:hover { background:var(--bg3,var(--border));color:var(--text); }
.sp-type-tab.active { background:var(--accent);color:#fff;box-shadow:0 4px 14px var(--accentGlow,rgba(249,115,22,.3)); }
.sp-type-icon { font-size:18px; }

/* Upload zone */
.sp-upload-zone { border:2px dashed var(--border);border-radius:14px;min-height:200px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden; }
.sp-upload-zone:hover,.sp-upload-zone.drag-over { border-color:var(--accent);background:var(--accentGlow,rgba(249,115,22,.06)); }
.sp-upload-placeholder { display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px;pointer-events:none; }
.sp-upload-icon { font-size:36px;opacity:.5; }
.sp-upload-text { font-size:14px;font-weight:600;color:var(--text2); }
.sp-upload-sub { font-size:12px;color:var(--text2);opacity:.6; }
.sp-upload-preview { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
.sp-remove-media { position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .15s; }
.sp-remove-media:hover { background:rgba(239,68,68,.8); }

/* Carousel */
.sp-carousel-strip { display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin; }
.sp-carousel-thumb { width:80px;height:80px;border-radius:8px;object-fit:cover;flex-shrink:0;border:2px solid transparent;cursor:grab;transition:border-color .15s; }
.sp-carousel-thumb:hover { border-color:var(--accent); }
.sp-carousel-add { width:80px;height:80px;border-radius:8px;border:2px dashed var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:24px;color:var(--text2);transition:all .2s; }
.sp-carousel-add:hover { border-color:var(--accent);color:var(--accent); }

/* Story layout */
.sp-story-layout { display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start; }
@media(max-width:600px){ .sp-story-layout { grid-template-columns:1fr; } }
.sp-phone-wrap { display:flex;flex-direction:column;align-items:center; }
.sp-phone { width:190px;height:410px;border-radius:44px;background:#0a0a0a;border:8px solid #1c1c1e;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px #3a3a3c,inset 0 0 0 1px #2c2c2e;overflow:visible;flex-shrink:0; }
/* Side buttons */
.sp-phone::before { content:'';position:absolute;left:-11px;top:80px;width:3px;height:32px;background:#2c2c2e;border-radius:2px 0 0 2px;box-shadow:0 42px 0 #2c2c2e,0 80px 0 #2c2c2e; }
.sp-phone::after  { content:'';position:absolute;right:-11px;top:100px;width:3px;height:52px;background:#2c2c2e;border-radius:0 2px 2px 0; }
.sp-phone-screen { width:100%;height:100%;border-radius:36px;background:linear-gradient(160deg,#1a1a2e,#16213e 60%,#0f3460);overflow:hidden;position:relative; }
/* Dynamic island */
.sp-phone-notch { position:absolute;top:10px;left:50%;transform:translateX(-50%);width:90px;height:26px;background:#0a0a0a;border-radius:20px;z-index:10;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;gap:5px; }
.sp-phone-notch::before { content:'';width:10px;height:10px;border-radius:50%;background:#1c1c1e;border:1.5px solid #2c2c2e; }
.sp-phone-notch::after  { content:'';width:6px;height:6px;border-radius:50%;background:#1a3a2a;box-shadow:0 0 0 1.5px #2c2c2e; }
.sp-phone-home { position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);width:50px;height:4px;background:#3a3a3c;border-radius:3px; }
.sp-phone-empty { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:24px; }
.sp-story-topbar { position:absolute;top:0;left:0;right:0;z-index:5;padding:6px 8px 4px;background:linear-gradient(to bottom,rgba(0,0,0,.4),transparent); }
.sp-story-progress { height:2px;background:rgba(255,255,255,.3);border-radius:1px;margin-bottom:6px; }
.sp-story-bar { width:60%;height:100%;background:#fff;border-radius:1px;animation:sp-bar-anim 5s linear infinite; }
@keyframes sp-bar-anim { from{width:0} to{width:100%} }
.sp-story-user { display:flex;align-items:center;gap:5px; }
.sp-story-avatar { width:22px;height:22px;border-radius:50%;background:var(--accent);border:1.5px solid #fff; }

/* Link sticker */
.sp-link-sticker { position:absolute;bottom:28%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px 10px 7px 9px;border-radius:30px;background:#fff;color:#111;font-size:11px;font-weight:700;cursor:grab;user-select:none;box-shadow:0 2px 12px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);z-index:10;white-space:nowrap;max-width:90%;transition:box-shadow .15s;letter-spacing:.1px; }
.sp-link-sticker:hover { box-shadow:0 4px 18px rgba(0,0,0,.45); }
.sp-link-sticker:active { cursor:grabbing; }
.sp-link-sticker-icon { width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#4facfe,#00a8e8);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.sp-sticker-handle { position:absolute;bottom:-4px;right:-4px;width:14px;height:14px;cursor:nwse-resize;z-index:20;background:transparent; }
.sp-sticker-handle::after { content:'';position:absolute;bottom:2px;right:2px;width:7px;height:7px;border-right:2px solid rgba(0,0,0,.35);border-bottom:2px solid rgba(0,0,0,.35);border-radius:0 0 2px 0; }

/* Story settings */
.sp-story-settings { display:flex;flex-direction:column;gap:14px; }
.sp-story-upload-btn { display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:10px;border:2px dashed var(--border);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s; }
.sp-story-upload-btn:hover { border-color:var(--accent);color:var(--accent); }
.sp-color-row { display:flex;gap:8px;flex-wrap:wrap;margin-top:6px; }
.sp-color-dot { width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:all .15s; }
.sp-color-dot.active,.sp-color-dot:hover { border-color:var(--text);transform:scale(1.15); }

/* Form fields */
.sp-field { display:flex;flex-direction:column;gap:6px; }
.sp-label { font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.8px; }
.sp-input { padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:13px;font-family:var(--font);outline:none;transition:border-color .2s;width:100%;box-sizing:border-box; }
.sp-input:focus { border-color:var(--accent); }
.sp-textarea { padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:13px;font-family:var(--font);outline:none;resize:vertical;width:100%;box-sizing:border-box;transition:border-color .2s;line-height:1.5; }
.sp-textarea:focus { border-color:var(--accent); }
.sp-caption-wrap { position:relative; }
.sp-caption-footer { text-align:right;font-size:11px;color:var(--text2);margin-top:4px; }

/* Schedule */
.sp-when-row { display:flex;gap:16px;flex-wrap:wrap; }
.sp-radio-label { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer; }
.sp-radio { accent-color:var(--accent);width:16px;height:16px;cursor:pointer; }

/* Submit */
.sp-submit-row { display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:4px; }
.sp-publish-btn { display:flex;align-items:center;gap:8px;padding:14px 32px;border-radius:12px;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#000));color:#fff;border:none;cursor:pointer;font-size:15px;font-weight:700;font-family:var(--font);transition:transform .15s,box-shadow .15s;box-shadow:0 6px 20px var(--accentGlow,rgba(249,115,22,.35)); }
.sp-publish-btn:hover { transform:translateY(-2px);box-shadow:0 10px 28px var(--accentGlow,rgba(249,115,22,.45)); }
.sp-publish-btn:disabled { opacity:.5;cursor:not-allowed;transform:none; }
.sp-post-status { font-size:13px;font-weight:600; }

/* Queue sidebar */
.sp-sidebar { display:flex;flex-direction:column;gap:16px; }
.sp-queue-card { gap:14px; }
.sp-queue-list { display:flex;flex-direction:column;gap:10px;max-height:600px;overflow-y:auto;scrollbar-width:thin; }
.sp-queue-empty { text-align:center;color:var(--text2);font-size:13px;padding:24px 0; }
.sp-queue-item { display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);transition:border-color .2s; }
.sp-queue-item:hover { border-color:var(--accent); }
.sp-queue-thumb { width:52px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0;background:var(--border); }
.sp-queue-info { flex:1;min-width:0; }
.sp-queue-account { font-size:12px;font-weight:700;color:var(--accent); }
.sp-queue-caption { font-size:12px;color:var(--text);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sp-queue-meta { font-size:11px;color:var(--text2);margin-top:3px; }
.sp-queue-badge { font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0; }
.sp-queue-badge.pending { background:rgba(249,115,22,.15);color:var(--accent); }
.sp-queue-badge.published { background:rgba(34,197,94,.15);color:#22c55e; }
.sp-queue-badge.failed { background:rgba(239,68,68,.15);color:#ef4444; }
.sp-queue-badge.uploading { background:rgba(59,130,246,.15);color:#3b82f6; }

/* ═══════════════════════════════════════════════════════
   MÉTRICAS TAB
═══════════════════════════════════════════════════════ */
.mtr-wrap { padding:28px 32px;width:100%; }
/* ── Métricas header — 2 linhas ────────────────────────── */
.mtr-header {
  display:flex; flex-direction:column; gap:0;
  margin-bottom:28px;
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  overflow:hidden;
}
.mtr-hrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 20px; }
.mtr-hrow-top { background:var(--card); }
.mtr-hrow-bottom {
  background:var(--bg2); border-top:1px solid var(--border);
  gap:10px;
}
/* Título */
.mtr-title-wrap { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mtr-title-icon {
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; box-shadow:0 4px 14px rgba(124,58,237,.3);
}
.mtr-title { font-size:16px;font-weight:800;color:var(--text);line-height:1.1; }
.mtr-subtitle { font-size:11px;color:var(--text3);margin-top:1px; }
/* Fontes */
.mtr-sources { display:flex; gap:8px; flex:1; flex-wrap:wrap; }
/* Ações rápidas */
.mtr-quick-actions { display:flex; gap:6px; align-items:center; margin-left:auto; }
.mtr-quick-btn {
  width:34px; height:34px; border-radius:10px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text2); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
.mtr-quick-btn:hover { background:var(--bg3); border-color:var(--accent); color:var(--accent); }
/* Período */
.mtr-period-group { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
/* Comparação */
.mtr-compare-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Ferramentas */
.mtr-tools-group { display:flex; align-items:center; gap:6px; margin-left:auto; }
.mtr-tool-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:20px; border:1px solid var(--border);
  background:var(--card); color:var(--text2); font-size:12px; font-weight:600;
  cursor:pointer; font-family:var(--font); transition:all .15s;
}
.mtr-tool-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(124,58,237,.06); }
.mtr-tool-btn.mtr-tool-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.mtr-tool-btn.mtr-tool-primary:hover { filter:brightness(1.1); color:#fff; }
.mtr-tool-btn.active { background:rgba(124,58,237,.15); border-color:var(--accent); color:var(--accent); }
/* controls legacy compat */
.mtr-controls { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.mtr-select {
  background:var(--card); border:1px solid var(--border); color:var(--text1);
  padding:8px 28px 8px 12px; border-radius:20px; font-size:13px; cursor:pointer; outline:none;
  appearance:none; -webkit-appearance:none; font-family:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:8px;
  transition:border-color .15s, box-shadow .15s;
  max-width:200px; text-overflow:ellipsis;
}
.mtr-select:hover { border-color:var(--accent); }
.mtr-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.mtr-select.has-value { border-color:var(--accent); color:var(--accent); font-weight:600; background-color:rgba(99,102,241,.07); }
.mtr-presets { display:flex;gap:3px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:3px; }
.mtr-preset { padding:5px 13px;border-radius:17px;border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s; }
.mtr-preset.active { background:var(--accent);color:#fff; }
.mtr-compare-wrap { display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text2); }
.mtr-compare-wrap input { accent-color:var(--accent); }
.mtr-compare-dates { display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:6px 12px; }
.mtr-date-input { background:transparent;border:none;color:var(--text1);font-size:12px;padding:2px 4px;outline:none;color-scheme:dark;font-family:inherit;cursor:pointer; }
.mtr-date-input::-webkit-calendar-picker-indicator { filter:invert(.6);cursor:pointer; }
.mtr-date-sep { color:var(--text3);font-size:12px; }
.mtr-period-block { display:inline-flex;align-items:center;gap:8px; }
.mtr-period-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text2); }
.mtr-compare-same { background:transparent;border:1px solid var(--border);color:var(--text2);padding:5px 11px;border-radius:17px;font-size:11px;cursor:pointer;font-weight:600;margin-left:4px; }
.mtr-compare-same:hover { border-color:var(--accent);color:var(--accent); }
.mtr-refresh-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; background:var(--accent); color:#fff;
  border:none; border-radius:20px; font-size:12px; font-weight:700;
  cursor:pointer; font-family:var(--font); transition:opacity .15s, transform .15s;
}
.mtr-refresh-btn:hover { opacity:.88; transform:translateY(-1px); }
.mtr-refresh-btn:disabled { opacity:.5;cursor:not-allowed; }

.mtr-section { margin-bottom:32px; }
.mtr-section-title { font-size:14px;font-weight:700;color:var(--text2);letter-spacing:.05em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px; }
.mtr-section-title::after { content:'';flex:1;height:1px;background:var(--border); }

.mtr-kpi-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-bottom:24px; }
.mtr-kpi { background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px 22px;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s; }
/* Delete button on KPI card */
.mtr-kpi-del { position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#ef4444;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,transform .15s,background .15s;z-index:5; }
.mtr-kpi:hover .mtr-kpi-del { opacity:1; }
.mtr-kpi-del:hover { background:#ef4444;color:#fff;transform:scale(1.1); }
/* "+" add KPI card at end of grid */
.mtr-kpi-add { background:transparent;border:2px dashed var(--border);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);transition:all .2s;min-height:120px;font-family:inherit; }
.mtr-kpi-add:hover { border-color:var(--accent);color:var(--accent);background:var(--accentGlow);transform:translateY(-2px); }
.mtr-kpi-add-icon { font-size:28px;font-weight:300;line-height:1;margin-bottom:6px; }
.mtr-kpi-add-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; }
/* Source tabs (IG / Ads) */
.mtr-source-tabs { display:flex;gap:6px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:0; }
.mtr-source-tab { background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text2);padding:9px 18px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;font-family:inherit;margin-bottom:-1px; }
.mtr-source-tab:hover { color:var(--text1); }
.mtr-source-tab.active { color:var(--accent);border-bottom-color:var(--accent); }
.mtr-source-tab-count { font-size:10px;background:var(--bg2);color:var(--text2);padding:2px 7px;border-radius:10px;font-weight:700; }
.mtr-source-tab.active .mtr-source-tab-count { background:var(--accentGlow);color:var(--accent); }
/* Templates / Modelos */
.mtr-tpl-hint { font-size:11px;color:var(--text3);margin-bottom:10px;line-height:1.45; }
.mtr-tpl-save-row { display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap; }
.mtr-tpl-save-btn { flex:1 1 auto;background:var(--bg2);border:1px solid var(--border);color:var(--text1);padding:7px 10px;border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap; }
.mtr-tpl-save-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accentGlow); }
.mtr-tpl-save-btn.all { background:var(--accent);color:#fff;border-color:var(--accent); }
.mtr-tpl-save-btn.all:hover { filter:brightness(1.1);background:var(--accent);color:#fff; }
.mtr-tpl-subtitle { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin:12px 0 6px;padding-left:2px; }
.mtr-tpl-list { display:flex;flex-direction:column;gap:5px;margin-bottom:8px; }
.mtr-tpl-item { display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 10px;transition:all .15s; }
.mtr-tpl-item:hover { border-color:var(--accent);background:var(--accentGlow);transform:translateX(2px); }
.mtr-tpl-item.factory { background:linear-gradient(90deg,var(--bg2),var(--card)); }
.mtr-tpl-info { flex:1;min-width:0;cursor:pointer; }
.mtr-tpl-name { font-size:12.5px;font-weight:700;color:var(--text1);margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mtr-tpl-meta { display:flex;gap:5px;align-items:center;flex-wrap:wrap; }
.mtr-tpl-count { font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px; }
.mtr-tpl-count.ig { background:rgba(225,48,108,.15);color:#e1306c; }
.mtr-tpl-count.ad { background:rgba(59,130,246,.15);color:#3b82f6; }
.mtr-tpl-count.gmb { background:rgba(34,197,94,.15);color:#22c55e; }
.mtr-tpl-scope { font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;background:var(--bg);color:var(--text2);text-transform:uppercase;letter-spacing:.04em; }
.mtr-tpl-scope.all { background:var(--accentGlow);color:var(--accent); }
.mtr-tpl-actions { display:flex;gap:3px; }
.mtr-tpl-actions button { background:transparent;border:1px solid var(--border);color:var(--text2);width:24px;height:24px;border-radius:6px;cursor:pointer;font-size:11px;display:inline-flex;align-items:center;justify-content:center;transition:all .12s; }
.mtr-tpl-actions .mtr-tpl-apply:hover { border-color:var(--accent);color:var(--accent);background:var(--accentGlow); }
.mtr-tpl-actions .mtr-tpl-rename:hover { border-color:#3b82f6;color:#3b82f6; }
.mtr-tpl-actions .mtr-tpl-del:hover { border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,.1); }
.mtr-tpl-restore-btn { display:block;width:100%;margin-top:6px;padding:6px 10px;border:1px dashed var(--border);border-radius:7px;background:none;color:var(--text3);font-size:11px;cursor:pointer;text-align:center;transition:all .15s; }
.mtr-tpl-restore-btn:hover { border-color:var(--accent);color:var(--accent);background:var(--accentGlow); }
.mtr-kpi:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.12); }
.mtr-kpi-icon { font-size:24px;margin-bottom:10px; }
.mtr-kpi-label { font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px; }
.mtr-kpi-value { font-size:32px;font-weight:800;color:var(--text1);line-height:1; }
.mtr-kpi-delta { margin-top:6px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:4px; }
.mtr-kpi-delta.up { color:#22c55e; }
.mtr-kpi-delta.down { color:#ef4444; }
.mtr-kpi-delta.neutral { color:var(--text2); }
.mtr-kpi-sub { font-size:11px;color:var(--text2);margin-top:3px; }
.mtr-kpi-bar { position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),transparent); }

.mtr-chart-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:20px; }
.mtr-chart-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px; }
.mtr-chart-title { font-size:14px;font-weight:700;color:var(--text1); }
.mtr-chart-legend { display:flex;gap:16px; }
.mtr-legend-item { display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2); }
.mtr-legend-dot { width:10px;height:10px;border-radius:50%; }
.mtr-chart-wrap { position:relative;height:220px; }

.mtr-compare-label { font-size:11px;color:var(--text2);margin-top:4px; }
.mtr-loading { display:flex;align-items:center;justify-content:center;padding:60px;flex-direction:column;gap:12px;color:var(--text2);font-size:14px; }
.mtr-spinner { width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite; }
.mtr-empty { text-align:center;padding:60px 20px;color:var(--text2);font-size:14px; }

.mtr-table-card { background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden; }
.mtr-table { width:100%;border-collapse:collapse;font-size:13px; }
.mtr-table th { padding:12px 16px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);border-bottom:1px solid var(--border); }
.mtr-table td { padding:12px 16px;border-bottom:1px solid var(--border);color:var(--text1); }
.mtr-table tr:last-child td { border-bottom:none; }
.mtr-table tr:hover td { background:rgba(255,255,255,.03); }
.mtr-badge { display:inline-flex;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:700; }
.mtr-badge.green { background:rgba(34,197,94,.15);color:#22c55e; }
.mtr-badge.red { background:rgba(239,68,68,.15);color:#ef4444; }
.mtr-badge.blue { background:rgba(59,130,246,.15);color:#3b82f6; }

@media(max-width:600px) {
  .mtr-kpi-grid{grid-template-columns:repeat(2,1fr);}
  .mtr-header{flex-direction:column;align-items:flex-start;}
  .mtr-wrap{padding:12px 10px;}
  .mtr-controls{flex-wrap:wrap;gap:6px;}
  .mtr-presets{flex-wrap:wrap;}
  .mtr-section-title{font-size:13px;}
  .mtr-camp-table{font-size:11px;}
  .mtr-camp-name{max-width:140px;}
  .mtr-share-btn{padding:5px 10px;font-size:11px;}
  .mtr-funnel-stages{flex-direction:column;gap:8px;}
  .mtr-funnel-arrow{transform:rotate(90deg);}
}

/* Barra global de cliente removida — fonte única é a Base de Dados (aba Banco de Dados) */
.rest-bar { display:none !important; }

/* Customize sidebar */
.mtr-cust-btn { padding:8px 14px;background:var(--card);border:1px solid var(--border);color:var(--text1);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all .15s;font-family:inherit; }
.mtr-cust-btn:hover { border-color:var(--accent);color:var(--accent); }
.mtr-side-overlay { display:none; }
.mtr-side { background:var(--bg2);border:1px solid var(--border);border-radius:12px;margin:0 0 16px 0;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;display:flex;flex-direction:column; }
.mtr-side.open { max-height:600px; }
.mtr-side-head { padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
.mtr-side-title { font-size:15px;font-weight:700;color:var(--text1); }
.mtr-side-close { background:transparent;border:none;color:var(--text2);font-size:22px;cursor:pointer;padding:0;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center; }
.mtr-side-close:hover { background:var(--card);color:var(--text1); }
.mtr-side-body { padding:14px 16px;overflow-y:auto;flex:1; }
.mtr-side-hint { font-size:11px;color:var(--text2);padding:0 4px 12px;line-height:1.5; }
.mtr-side-section { margin-bottom:18px; }
.mtr-side-section-title { font-size:10px;font-weight:700;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin:0 4px 8px; }
.mtr-cat-list { display:flex;flex-direction:column;gap:5px; }
.mtr-cat-item { display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--card);border:1px solid var(--border);border-radius:9px;cursor:grab;transition:all .15s;user-select:none; }
.mtr-cat-item:hover { border-color:var(--accent);background:var(--card2); }
.mtr-cat-item.active { border-color:var(--accent);background:var(--accentGlow,rgba(124,58,237,.1)); }
.mtr-cat-item.dragging { opacity:.4; }
.mtr-cat-item.drag-over { border-style:dashed;border-color:var(--accent); }
.mtr-cat-grip { color:var(--text3);font-size:13px;cursor:grab;line-height:1; }
.mtr-cat-grip:active { cursor:grabbing; }
.mtr-cat-icon { font-size:15px; }
.mtr-cat-label { flex:1;font-size:12.5px;color:var(--text1);font-weight:500; }
.mtr-cat-checkbox { width:16px;height:16px;accent-color:var(--accent);cursor:pointer; }
.mtr-cat-source { font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;letter-spacing:.05em;text-transform:uppercase; }
.mtr-cat-source.ig { background:rgba(225,48,108,.15);color:#e1306c; }
.mtr-cat-source.ad { background:rgba(59,130,246,.15);color:#3b82f6; }
.mtr-side-foot { padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0; }
.mtr-side-btn { flex:1;padding:9px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--text1);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s; }
.mtr-side-btn:hover { border-color:var(--accent); }
.mtr-side-btn.primary { background:var(--accent);color:#fff;border-color:var(--accent); }
.mtr-side-btn.primary:hover { opacity:.85; }

/* Campanhas */
.mtr-camp-table { width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;font-size:13px; }
.mtr-camp-table th { padding:11px 14px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);border-bottom:1px solid var(--border);background:var(--bg2); }
.mtr-camp-table th.num, .mtr-camp-table td.num { text-align:right; }
.mtr-camp-table td { padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text1); }
.mtr-camp-table tr:last-child td { border-bottom:none; }
.mtr-camp-table tr.clickable { cursor:pointer;transition:background .15s; }
.mtr-camp-table tr.clickable:hover td { background:var(--card2); }
.mtr-camp-table tr.selected td { background:var(--accentGlow,rgba(124,58,237,.1));border-left:3px solid var(--accent); }
.mtr-camp-name { font-weight:600;color:var(--text1);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle; }
.mtr-camp-status { display:inline-flex;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.04em;text-transform:uppercase;margin-left:6px; }
.mtr-camp-status.active { background:rgba(34,197,94,.15);color:#22c55e; }
.mtr-camp-status.paused { background:rgba(148,163,184,.15);color:#94a3b8; }
.mtr-camp-status.other { background:rgba(245,158,11,.15);color:#f59e0b; }
.mtr-camp-filter-bar { display:flex;align-items:center;justify-content:space-between;background:var(--accentGlow,rgba(124,58,237,.1));border:1px solid var(--accent);border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px;color:var(--text1); }
.mtr-camp-filter-bar button { background:transparent;border:1px solid var(--border);color:var(--text1);padding:5px 12px;border-radius:7px;font-size:12px;cursor:pointer; }
.mtr-camp-filter-bar button:hover { border-color:var(--accent); }

/* IA Panel */
.mtr-ai-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:20px; }
.mtr-ai-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px; }
.mtr-ai-title { font-size:15px;font-weight:700;color:var(--text1);display:flex;align-items:center;gap:8px; }
.mtr-ai-train-toggle { background:var(--bg2);border:1px solid var(--border);color:var(--text1);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px; }
.mtr-ai-train-toggle:hover { border-color:var(--accent); }
.mtr-ai-train-box { background:var(--bg2);border:1px dashed var(--border);border-radius:10px;padding:12px;margin-bottom:14px;display:none; }
.mtr-ai-train-box.open { display:block; }
.mtr-ai-train-label { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);margin-bottom:6px; }
.mtr-ai-train-hint { font-size:11px;color:var(--text3);margin-bottom:8px;line-height:1.5; }
.mtr-ai-train-input { width:100%;min-height:90px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px;color:var(--text1);font-size:13px;font-family:inherit;resize:vertical;outline:none; }
.mtr-ai-train-input:focus { border-color:var(--accent); }
.mtr-ai-train-foot { display:flex;justify-content:flex-end;gap:8px;margin-top:8px; }
.mtr-ai-train-save { background:var(--accent);color:#fff;border:none;padding:6px 14px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer; }
.mtr-ai-train-save:hover { opacity:.85; }
.mtr-ai-train-saved { font-size:11px;color:#22c55e;align-self:center;display:none; }
.mtr-ai-analyze-btn { width:100%;padding:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:opacity .15s; }
.mtr-ai-analyze-btn:hover { opacity:.9; }
.mtr-ai-analyze-btn:disabled { opacity:.5;cursor:not-allowed; }
.mtr-ai-result { margin-top:14px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:16px;font-size:13.5px;line-height:1.6;color:var(--text1);white-space:pre-wrap;display:none; }
.mtr-ai-result.visible { display:block; }
.mtr-ai-result h1, .mtr-ai-result h2, .mtr-ai-result h3 { font-weight:700;margin:12px 0 6px; }
.mtr-ai-result strong { color:var(--accent); }
.mtr-ai-spin { display:inline-block;animation:spin 1s linear infinite; }

/* ═══════════════════════════════════════════════════
   NEW METRICS FEATURES (skeleton, sparklines, present,
   ai history/chat/actions, notes, funnel, presets,
   compare, demographics, top posts, stories, drilldown,
   snapshots, health)
═══════════════════════════════════════════════════ */

/* 1) LOADING SKELETON */
.mtr-skel-wrap { display:flex;flex-direction:column;gap:24px;padding:6px 0; }
.mtr-skel-section { display:flex;flex-direction:column;gap:14px; }
.mtr-skel-title-row { display:flex;align-items:center;gap:10px; }
.mtr-skel-bar { background:linear-gradient(90deg, var(--card) 0%, var(--card2) 50%, var(--card) 100%); background-size:200% 100%; animation:skelShimmer 1.4s ease-in-out infinite; border-radius:6px; }
.mtr-skel-title { height:14px;width:160px; }
.mtr-skel-line { height:1px;flex:1;background:var(--border); }
.mtr-skel-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px; }
.mtr-skel-kpi { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:8px;height:128px;position:relative;overflow:hidden; }
.mtr-skel-kpi::after { content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--border); }
.mtr-skel-icon { height:22px;width:22px;border-radius:6px; }
.mtr-skel-label { height:10px;width:70%; }
.mtr-skel-value { height:24px;width:55%;margin-top:4px; }
.mtr-skel-spark { height:24px;width:100%;margin-top:auto;border-radius:4px; }
.mtr-skel-table { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px; }
.mtr-skel-row { height:14px; }
.mtr-skel-row:nth-child(1) { width:90%; }
.mtr-skel-row:nth-child(2) { width:75%; }
.mtr-skel-row:nth-child(3) { width:82%; }
.mtr-skel-row:nth-child(4) { width:65%; }
.mtr-skel-row:nth-child(5) { width:78%; }
.mtr-skel-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px; }
.mtr-skel-block { height:60px;border-radius:8px; }
@keyframes skelShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

/* 2) MINI-SPARKLINES INSIDE KPI */
.mtr-kpi { padding-bottom:38px; }
.mtr-kpi-spark { position:absolute;bottom:10px;left:18px;right:18px;height:20px;pointer-events:none;opacity:.85; }
.mtr-kpi-spark svg { width:100%;height:100%;display:block; }
.mtr-kpi-spark .spk-line { fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round; }
.mtr-kpi-spark .spk-area { stroke:none; }
.mtr-kpi[data-source="ig"] .spk-line { stroke:#e1306c; }
.mtr-kpi[data-source="ig"] .spk-area { fill:rgba(225,48,108,.18); }
.mtr-kpi[data-source="ad"] .spk-line { stroke:#3b82f6; }
.mtr-kpi[data-source="ad"] .spk-area { fill:rgba(59,130,246,.16); }
.mtr-kpi-spark-empty { position:absolute;bottom:8px;left:14px;right:14px;height:18px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--text3);font-style:italic;opacity:.5; }

/* 2b) LOCATION MAP CARD */
.mtr-loc-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 24px; margin-bottom:16px; }
.mtr-loc-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.mtr-loc-title { font-size:15px; font-weight:800; color:var(--text1); }
.mtr-loc-sub { font-size:12px; color:var(--text3); margin-top:2px; }
.mtr-loc-view-btn { padding:6px 14px; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--text2); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; font-family:var(--font); }
.mtr-loc-view-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.mtr-loc-map { width:100%; height:420px; border-radius:12px; border:1px solid var(--border); background:var(--bg2); }
.mtr-loc-list { display:flex; flex-direction:column; gap:8px; }
.mtr-loc-item { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg); }
.mtr-loc-item-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mtr-loc-item-name { font-size:13px; font-weight:700; color:var(--text1); }
.mtr-loc-item-addr { font-size:11px; color:var(--text3); margin-top:1px; }
.mtr-loc-item-actions { margin-left:auto; display:flex; gap:6px; }
.mtr-loc-item-btn { padding:4px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text2); font-size:11px; cursor:pointer; font-family:var(--font); }
.mtr-loc-item-btn:hover { border-color:var(--accent); color:var(--accent); }

/* 3) PRESENTATION MODE */
.mtr-present-btn { padding:8px 12px;background:var(--card);border:1px solid var(--border);color:var(--text1);border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit; }
.mtr-present-btn:hover { border-color:var(--accent);color:var(--accent); }
body.mtr-presenting { overflow-y:auto; }
body.mtr-presenting .topbar, body.mtr-presenting .main-tabs, body.mtr-presenting .mtr-controls > *:not(.mtr-present-exit), body.mtr-presenting .mtr-camp-table, body.mtr-presenting .mtr-ai-card, body.mtr-presenting .mtr-side, body.mtr-presenting .mtr-side-overlay { display:none !important; }
body.mtr-presenting #tab-metricas { padding:40px 60px; }
body.mtr-presenting .mtr-title { font-size:42px; }
body.mtr-presenting .mtr-kpi { padding:36px 30px;padding-bottom:48px; }
body.mtr-presenting .mtr-kpi-icon { font-size:36px;margin-bottom:14px; }
body.mtr-presenting .mtr-kpi-label { font-size:14px;margin-bottom:8px; }
body.mtr-presenting .mtr-kpi-value { font-size:48px; }
body.mtr-presenting .mtr-kpi-delta { font-size:18px;margin-top:12px; }
body.mtr-presenting .mtr-kpi-spark { height:32px;left:24px;right:24px;bottom:14px; }
body.mtr-presenting .mtr-kpi-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px; }
body.mtr-presenting .mtr-section-title { font-size:18px; }
.mtr-present-exit { position:fixed;top:18px;right:24px;z-index:1500;padding:10px 18px;background:#000;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;display:none; }
body.mtr-presenting .mtr-present-exit { display:inline-flex;align-items:center;gap:6px; }

/* 4) AI HISTORY */
.mtr-ai-history-btn { background:var(--bg2);border:1px solid var(--border);color:var(--text1);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-right:6px; }
.mtr-ai-history-btn:hover { border-color:var(--accent); }
.mtr-ai-history-modal { position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:1100;display:none;align-items:center;justify-content:center;padding:24px; }
.mtr-ai-history-modal.open { display:flex; }
.mtr-ai-history-card { width:min(720px,100%);max-height:85vh;background:var(--bg2);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;overflow:hidden; }
.mtr-ai-history-head { padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.mtr-ai-history-title { font-size:16px;font-weight:700;color:var(--text1); }
.mtr-ai-history-list { flex:1;overflow-y:auto;padding:12px 16px; }
.mtr-ai-history-item { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all .15s; }
.mtr-ai-history-item:hover { border-color:var(--accent); }
.mtr-ai-history-meta { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.mtr-ai-history-date { font-size:11px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.05em; }
.mtr-ai-history-tag { font-size:10px;padding:2px 8px;border-radius:5px;background:var(--accentGlow,rgba(124,58,237,.12));color:var(--accent);font-weight:700; }
.mtr-ai-history-snippet { font-size:13px;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.mtr-ai-history-actions { display:flex;gap:6px;margin-top:8px; }
.mtr-ai-history-actions button { font-size:11px;background:transparent;border:1px solid var(--border);color:var(--text2);padding:3px 9px;border-radius:6px;cursor:pointer; }
.mtr-ai-history-actions button:hover { border-color:var(--accent);color:var(--accent); }
.mtr-ai-history-empty { text-align:center;color:var(--text2);padding:40px 20px;font-size:13px; }

/* 5) HEALTH INDICATORS */
.mtr-health-bar { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; }
.mtr-health-pill { display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:20px;font-size:11.5px;font-weight:600;border:1px solid; }
.mtr-health-pill.ok { background:rgba(34,197,94,.08);color:#22c55e;border-color:rgba(34,197,94,.3); }
.mtr-health-pill.warn { background:rgba(245,158,11,.08);color:#f59e0b;border-color:rgba(245,158,11,.3); }
.mtr-health-pill.err { background:rgba(239,68,68,.08);color:#ef4444;border-color:rgba(239,68,68,.3); }
.mtr-health-dot { width:7px;height:7px;border-radius:50%;background:currentColor; }

/* 6) PER-CAMPAIGN AI BUTTON */
.mtr-camp-table td.actions { text-align:right;padding:6px 14px; }
.mtr-camp-ai-btn { background:var(--accentGlow,rgba(124,58,237,.1));border:1px solid var(--accent);color:var(--accent);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:4px; }
.mtr-camp-ai-btn:hover { background:var(--accent);color:#fff; }
.mtr-camp-ai-btn:disabled { opacity:.5;cursor:wait; }
.mtr-camp-ai-result { background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:12px 14px;margin:8px 0;font-size:13px;line-height:1.55;color:var(--text1);white-space:pre-wrap; }
.mtr-camp-ai-result h1, .mtr-camp-ai-result h2, .mtr-camp-ai-result h3 { font-weight:700;margin:8px 0 4px;color:var(--text1); }
.mtr-camp-ai-result strong { color:var(--accent); }

/* 7) AI CHAT */
.mtr-ai-chat-toggle { background:var(--bg2);border:1px solid var(--border);color:var(--text1);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px; }
.mtr-ai-chat-toggle:hover { border-color:var(--accent); }
.mtr-ai-chat-box { background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px;margin-top:12px;display:none; }
.mtr-ai-chat-box.open { display:flex;flex-direction:column;gap:10px; }
.mtr-ai-chat-msgs { max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:4px 2px; }
.mtr-ai-chat-msg { padding:9px 12px;border-radius:10px;font-size:13.5px;line-height:1.5;max-width:85%; }
.mtr-ai-chat-msg.user { align-self:flex-end;background:var(--accent);color:#fff; }
.mtr-ai-chat-msg.bot { align-self:flex-start;background:var(--card);border:1px solid var(--border);color:var(--text1);white-space:pre-wrap; }
.mtr-ai-chat-msg.bot strong { color:var(--accent); }
.mtr-ai-chat-msg.bot h1, .mtr-ai-chat-msg.bot h2, .mtr-ai-chat-msg.bot h3 { font-weight:700;margin:6px 0 3px;font-size:14px; }
.mtr-ai-chat-input-row { display:flex;gap:6px; }
.mtr-ai-chat-input { flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text1);font-size:13px;font-family:inherit;outline:none; }
.mtr-ai-chat-input:focus { border-color:var(--accent); }
.mtr-ai-chat-send { background:var(--accent);color:#fff;border:none;padding:0 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer; }
.mtr-ai-chat-send:disabled { opacity:.6;cursor:not-allowed; }
.mtr-ai-chat-suggestions { display:flex;flex-wrap:wrap;gap:6px; }
.mtr-ai-chat-suggestion { font-size:11px;background:transparent;border:1px solid var(--border);color:var(--text2);padding:5px 10px;border-radius:14px;cursor:pointer; }
.mtr-ai-chat-suggestion:hover { border-color:var(--accent);color:var(--accent); }

/* 8) ACTIONABLE SUGGESTIONS */
.mtr-actions-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:14px; }
.mtr-action-card { background:var(--card);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:11px;padding:13px 15px;display:flex;flex-direction:column;gap:6px; }
.mtr-action-card.high { border-left-color:#ef4444; }
.mtr-action-card.med { border-left-color:#f59e0b; }
.mtr-action-card.low { border-left-color:#22c55e; }
.mtr-action-prio { font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text2); }
.mtr-action-card.high .mtr-action-prio { color:#ef4444; }
.mtr-action-card.med .mtr-action-prio { color:#f59e0b; }
.mtr-action-card.low .mtr-action-prio { color:#22c55e; }
.mtr-action-title { font-size:13.5px;font-weight:700;color:var(--text1);line-height:1.3; }
.mtr-action-desc { font-size:12px;color:var(--text2);line-height:1.5; }
.mtr-action-impact { font-size:11px;color:var(--text3);font-style:italic; }

/* 9) NOTES TIMELINE */
.mtr-notes-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:18px; }
.mtr-notes-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.mtr-notes-title { font-size:13px;font-weight:700;color:var(--text1);display:flex;align-items:center;gap:6px; }
.mtr-notes-add-btn { background:transparent;border:1px solid var(--border);color:var(--text1);padding:5px 11px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer; }
.mtr-notes-add-btn:hover { border-color:var(--accent);color:var(--accent); }
.mtr-notes-list { display:flex;flex-direction:column;gap:8px; }
.mtr-note { display:flex;gap:10px;padding:8px 10px;background:var(--bg2);border-radius:8px;align-items:flex-start; }
.mtr-note-date { font-size:10.5px;font-weight:700;color:var(--accent);min-width:74px;padding-top:2px;text-transform:uppercase;letter-spacing:.04em; }
.mtr-note-text { flex:1;font-size:12.5px;color:var(--text1);line-height:1.5; }
.mtr-note-del { background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:0 4px; }
.mtr-note-del:hover { color:#ef4444; }
.mtr-notes-empty { font-size:12px;color:var(--text3);font-style:italic;padding:6px 0; }
.mtr-notes-form { display:flex;gap:6px;margin-top:8px; }
.mtr-notes-input-date { background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:6px 8px;color:var(--text1);font-size:12px;color-scheme:dark; }
.mtr-notes-input-text { flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:6px 10px;color:var(--text1);font-size:12px;font-family:inherit;outline:none; }
.mtr-notes-input-text:focus { border-color:var(--accent); }
.mtr-notes-save { background:var(--accent);color:#fff;border:none;padding:0 12px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer; }

/* 10) FUNNEL */
.mtr-funnel-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:20px; }
.mtr-funnel-title { font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);margin-bottom:14px; }
.mtr-funnel-stages { display:flex;flex-direction:column;gap:6px; }
.mtr-funnel-stage { position:relative;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-radius:10px;color:#fff;font-weight:700;overflow:hidden;min-height:48px; }
.mtr-funnel-stage::before { content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),var(--accent2,#a855f7));opacity:1;border-radius:inherit; }
.mtr-funnel-stage > * { position:relative;z-index:1; }
.mtr-funnel-stage-label { font-size:13px;display:flex;align-items:center;gap:8px; }
.mtr-funnel-stage-value { font-size:18px;font-weight:800; }
.mtr-funnel-rate { text-align:center;font-size:11px;color:var(--text2);padding:4px 0;font-weight:700; }
.mtr-funnel-rate strong { color:var(--text1); }
.mtr-funnel-empty { text-align:center;color:var(--text3);font-size:12px;padding:20px;font-style:italic; }
/* Drag-and-drop funil */
.mtr-kpi[draggable="true"] { cursor:grab; }
.mtr-kpi[draggable="true"]:active { cursor:grabbing; }
.mtr-kpi.mtr-dragging { opacity:.4; }
.mtr-kpi.mtr-kpi-drop-target { outline:2px dashed var(--accent);outline-offset:2px;background:var(--accentGlow); }
.mtr-funnel-card.mtr-funnel-drop-active { outline:2px dashed var(--accent);outline-offset:4px;background:rgba(99,102,241,.04); }
.mtr-funnel-stage[draggable="true"] { cursor:grab; }
.mtr-funnel-stage.mtr-stage-dragging { opacity:.4; }
.mtr-funnel-stage.mtr-stage-drop-before { box-shadow:inset 0 3px 0 0 #fff; }
.mtr-funnel-stage.mtr-stage-drop-after { box-shadow:inset 0 -3px 0 0 #fff; }
.mtr-funnel-stage-remove { background:rgba(255,255,255,.18);border:0;color:#fff;width:22px;height:22px;border-radius:6px;cursor:pointer;font-size:12px;line-height:1;margin-left:8px;display:inline-flex;align-items:center;justify-content:center; }
.mtr-funnel-stage-remove:hover { background:rgba(255,255,255,.32); }
.mtr-funnel-toolbar { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px; }
.mtr-funnel-toolbar button { background:var(--bg2);border:1px solid var(--border);color:var(--text1);border-radius:8px;padding:6px 10px;font-size:11px;font-weight:600;cursor:pointer; }
.mtr-funnel-toolbar button:hover { background:var(--card);border-color:var(--accent); }
.mtr-funnel-hint { color:var(--text3);font-size:11px;font-style:italic; }
/* Modal Personalizar Funil */
.mtr-funnel-modal { position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px; }
.mtr-funnel-modal.show { display:flex; }
.mtr-funnel-modal-card { background:var(--card);border:1px solid var(--border);border-radius:14px;max-width:640px;width:100%;max-height:85vh;overflow:auto;padding:22px;position:relative; }
.mtr-funnel-modal-close { position:absolute;top:10px;right:10px;background:none;border:0;color:var(--text2);font-size:22px;cursor:pointer; }
.mtr-funnel-modal h3 { margin:0 0 14px;font-size:16px; }
.mtr-funnel-presets { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px; }
.mtr-funnel-presets button { background:var(--bg2);border:1px solid var(--border);color:var(--text2);border-radius:18px;padding:5px 12px;font-size:11px;cursor:pointer;font-weight:600; }
.mtr-funnel-presets button:hover { border-color:var(--accent);color:var(--text1); }
.mtr-funnel-cfg-list { display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-height:60px; }
.mtr-funnel-cfg-item { display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;cursor:grab; }
.mtr-funnel-cfg-item.mtr-cfg-dragging { opacity:.4; }
.mtr-funnel-cfg-item .grip { color:var(--text3);font-size:14px; }
.mtr-funnel-cfg-item .lbl { flex:1;font-size:13px; }
.mtr-funnel-cfg-item button { background:none;border:0;color:#ef4444;cursor:pointer;font-size:14px; }
.mtr-funnel-add-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px; }
.mtr-funnel-add-grid button { text-align:left;background:var(--bg2);border:1px solid var(--border);color:var(--text1);border-radius:8px;padding:8px 10px;font-size:12px;cursor:pointer; }
.mtr-funnel-add-grid button:hover { border-color:var(--accent); }
.mtr-funnel-add-grid button:disabled { opacity:.4;cursor:not-allowed; }
/* Modal Colunas de Campanhas */
.mtr-camp-cols-btn { background:var(--bg2);border:1px solid var(--border);color:var(--text1);border-radius:8px;padding:6px 10px;font-size:11px;font-weight:600;cursor:pointer; }
.mtr-camp-cols-btn:hover { border-color:var(--accent); }
.mtr-cc-modal { position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px; }
.mtr-cc-modal.show { display:flex; }
.mtr-cc-card { background:var(--card);border:1px solid var(--border);border-radius:14px;max-width:780px;width:100%;max-height:85vh;overflow:auto;padding:22px;position:relative; }
.mtr-cc-close { position:absolute;top:10px;right:10px;background:none;border:0;color:var(--text2);font-size:22px;cursor:pointer; }
.mtr-cc-card h3 { margin:0 0 14px;font-size:16px; }
.mtr-cc-section { margin-bottom:16px; }
.mtr-cc-section-title { font-size:11px;color:var(--text2);font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em; }
.mtr-cc-selected-list { display:flex;flex-wrap:wrap;gap:6px;min-height:36px;padding:8px;border:1px dashed var(--border);border-radius:10px;margin-bottom:12px;background:var(--bg2); }
.mtr-cc-chip { display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:5px 10px;font-size:12px;cursor:grab; }
.mtr-cc-chip.mtr-cc-dragging { opacity:.4; }
.mtr-cc-chip button { background:none;border:0;color:#ef4444;cursor:pointer;font-size:13px;padding:0; }
.mtr-cc-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px; }
.mtr-cc-grid label { display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;cursor:pointer; }
.mtr-cc-grid label:hover { border-color:var(--accent); }
.mtr-cc-grid input { cursor:pointer; }

/* 11) PER-CLIENT PRESETS UI */
.mtr-side-client-info { background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;margin:0 4px 12px;font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px; }
.mtr-side-client-info strong { color:var(--text1); }

/* 12) CAMPAIGN COMPARISON */
.mtr-cmp-toolbar { display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap; }
.mtr-cmp-toolbar-info { font-size:12px;color:var(--text2); }
.mtr-cmp-toolbar-info strong { color:var(--accent); }
.mtr-cmp-btn { background:var(--accent);color:#fff;border:none;padding:5px 12px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer; }
.mtr-cmp-btn:disabled { opacity:.5;cursor:not-allowed;background:var(--card);color:var(--text2);border:1px solid var(--border); }
.mtr-cmp-clear { background:transparent;border:1px solid var(--border);color:var(--text2);padding:5px 10px;border-radius:7px;font-size:12px;cursor:pointer; }
.mtr-camp-table td.cmp-col { width:32px;text-align:center; }
.mtr-camp-table input[type="checkbox"].cmp-check { width:14px;height:14px;accent-color:var(--accent);cursor:pointer; }
.mtr-cmp-modal { position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:1100;display:none;align-items:center;justify-content:center;padding:20px; }
.mtr-cmp-modal.open { display:flex; }
.mtr-cmp-card { width:min(1000px,100%);max-height:90vh;background:var(--bg2);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;overflow:hidden; }
.mtr-cmp-head { padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; }
.mtr-cmp-title { font-size:15px;font-weight:700;color:var(--text1); }
.mtr-cmp-body { flex:1;overflow:auto;padding:18px 20px; }
.mtr-cmp-grid { display:grid;gap:12px; }
.mtr-cmp-row { display:grid;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--border); }
.mtr-cmp-row:last-child { border-bottom:none; }
.mtr-cmp-row.head { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);padding-bottom:10px;border-bottom:1px solid var(--border); }
.mtr-cmp-cell { font-size:13.5px;color:var(--text1);font-weight:600;text-align:right; }
.mtr-cmp-cell.label { font-weight:500;color:var(--text2);text-align:left; }
.mtr-cmp-name { font-weight:700;color:var(--text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.mtr-cmp-cell.best { color:#22c55e; }
.mtr-cmp-cell.worst { color:#ef4444; }

/* 13) DEMOGRAPHICS */
.mtr-demo-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:20px; }
.mtr-demo-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:12px; }
.mtr-demo-block { display:flex;flex-direction:column;gap:8px; }
.mtr-demo-block-title { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text2); }
.mtr-demo-row { display:flex;align-items:center;gap:8px; }
.mtr-demo-row-label { font-size:11.5px;color:var(--text1);min-width:80px;font-weight:500; }
.mtr-demo-bar-wrap { flex:1;height:14px;background:var(--bg2);border-radius:7px;overflow:hidden;position:relative; }
.mtr-demo-bar { height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2,#a855f7));border-radius:7px;transition:width .4s ease; }
.mtr-demo-row-val { font-size:11px;color:var(--text2);font-weight:700;min-width:48px;text-align:right; }
.mtr-demo-empty { text-align:center;color:var(--text3);padding:14px;font-size:12px;font-style:italic; }
.mtr-demo-tabs { display:flex;gap:4px;margin-bottom:8px; }
.mtr-demo-tab { background:transparent;border:1px solid var(--border);color:var(--text2);padding:4px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer; }
.mtr-demo-tab.active { background:var(--accent);color:#fff;border-color:var(--accent); }

/* 14) TOP/BOTTOM POSTS */
.mtr-posts-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:20px; }
.mtr-posts-tabs { display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap; }
.mtr-posts-tab { background:var(--bg2);border:1px solid var(--border);color:var(--text2);padding:6px 13px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s; }
.mtr-posts-tab.active { background:var(--accent);color:#fff;border-color:var(--accent); }
.mtr-posts-tab:hover:not(.active) { border-color:var(--accent);color:var(--accent); }
.mtr-posts-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px; }
.mtr-post-card { position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all .2s;display:flex;flex-direction:column; }
.mtr-post-card:hover { transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.18);border-color:var(--accent); }
.mtr-post-thumb-wrap { position:relative;aspect-ratio:1/1;overflow:hidden;background:#000; }
.mtr-post-thumb { width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease; }
.mtr-post-card:hover .mtr-post-thumb { transform:scale(1.06); }
.mtr-post-thumb-fallback { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:42px;background:linear-gradient(135deg,#1e1b4b,#7c3aed); }
.mtr-post-rank { position:absolute;top:8px;left:8px;background:rgba(0,0,0,.7);color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.15); }
.mtr-post-rank.top1 { background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000; }
.mtr-post-rank.top2 { background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#000; }
.mtr-post-rank.top3 { background:linear-gradient(135deg,#f59e0b,#d97706);color:#000; }
.mtr-post-type-badge { position:absolute;top:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;font-size:14px;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px); }
.mtr-post-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent 50%);display:flex;flex-direction:column;justify-content:flex-end;padding:10px;opacity:0;transition:opacity .2s; }
.mtr-post-card:hover .mtr-post-overlay { opacity:1; }
.mtr-post-overlay-stat { display:flex;justify-content:space-between;font-size:11px;color:#fff;font-weight:600;margin-bottom:2px; }
.mtr-post-info { padding:10px 12px;display:flex;flex-direction:column;gap:6px; }
.mtr-post-caption { font-size:11.5px;color:var(--text1);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px; }
.mtr-post-stats { display:flex;flex-wrap:wrap;gap:8px;font-size:10.5px;color:var(--text2);font-weight:700; }
.mtr-post-stat { display:inline-flex;align-items:center;gap:3px; }
.mtr-post-stat-icon { font-size:12px; }
.mtr-post-date { font-size:10px;color:var(--text3);font-weight:600;letter-spacing:.04em; }
.mtr-post-link { position:absolute;inset:0;z-index:5; }

/* 15) STORIES INSIGHTS */
.mtr-stories-card { background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px;margin-bottom:20px; }
.mtr-stories-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px; }
.mtr-story-card { background:var(--bg2);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;position:relative; }
.mtr-story-thumb-wrap { aspect-ratio:9/16;background:#000;position:relative;overflow:hidden; }
.mtr-story-thumb { width:100%;height:100%;object-fit:cover; }
.mtr-story-thumb-fallback { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,#7c3aed,#ec4899); }
.mtr-story-info { padding:8px 10px;display:flex;flex-direction:column;gap:4px; }
.mtr-story-stat { display:flex;justify-content:space-between;font-size:10.5px;color:var(--text2); }
.mtr-story-stat strong { color:var(--text1);font-weight:700; }
.mtr-story-date { font-size:9.5px;color:var(--text3);text-align:center;letter-spacing:.04em; }
.mtr-story-rate-badge { position:absolute;bottom:6px;left:6px;right:6px;background:rgba(0,0,0,.7);color:#fff;font-size:9.5px;padding:3px 6px;border-radius:5px;text-align:center;font-weight:700;backdrop-filter:blur(3px); }

/* KPI expand modal */
.mtr-kpi-modal { position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s; }
.mtr-kpi-modal.open { opacity:1;pointer-events:auto; }
.mtr-kpi-modal-card { background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px 32px;width:420px;max-width:92vw;box-shadow:0 24px 60px rgba(0,0,0,.5);position:relative; }
.mtr-kpi-modal-head { display:flex;align-items:center;gap:10px;margin-bottom:18px; }
.mtr-kpi-modal-icon { font-size:28px; }
.mtr-kpi-modal-name { font-size:16px;font-weight:700;color:var(--text1); }
.mtr-kpi-modal-source { font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--accentGlow);color:var(--accent); }
.mtr-kpi-modal-close { position:absolute;top:16px;right:18px;background:none;border:none;color:var(--text2);font-size:20px;cursor:pointer; }
.mtr-kpi-modal-value { font-size:44px;font-weight:800;color:var(--text1);line-height:1;margin-bottom:8px; }
.mtr-kpi-modal-pct { font-size:13px;font-weight:700;margin-bottom:16px; color:var(--text3); }
.mtr-kpi-modal-pct.pos { color:#22c55e; }
.mtr-kpi-modal-pct.neg { color:#ef4444; }
.mtr-kpi-modal-spark.no-data { color:var(--text3); font-size:11px; }
.mtr-kpi-modal-spark { margin:16px 0;height:70px;background:var(--bg2);border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center; }
.mtr-kpi-modal-spark svg { width:100%;height:70px; }
.mtr-kpi-modal-def { font-size:12px;color:var(--text2);line-height:1.65;background:var(--bg2);border-radius:8px;padding:10px 14px;margin-top:10px; }
.mtr-kpi-modal-prev { font-size:12px;color:var(--text3);margin-top:10px; }
/* Custom metric */
.mtr-custom-metric-form { background:var(--bg2);border:1px dashed var(--border);border-radius:10px;padding:12px 14px;margin-top:12px;display:flex;flex-direction:column;gap:8px; }
.mtr-custom-metric-form input { background:var(--card);border:1px solid var(--border);border-radius:7px;padding:7px 10px;color:var(--text1);font-size:13px;font-family:inherit;outline:none;width:100%; }
.mtr-custom-metric-form input:focus { border-color:var(--accent); }
.mtr-custom-metric-form .mtr-custom-row { display:flex;gap:8px; }
/* % toggle button */
.mtr-pct-btn { background:var(--card);border:1px solid var(--border);color:var(--text2);padding:7px 13px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s; }
.mtr-pct-btn.active { background:var(--accent);color:#fff;border-color:var(--accent); }
.mtr-pct-btn:hover:not(.active) { border-color:var(--accent);color:var(--accent); }
/* 16) DRILL-DOWN */
.mtr-drill-row { background:var(--bg2);transition:all .2s; }
.mtr-drill-row td { padding:10px 14px 10px 36px;font-size:12px;color:var(--text2); }
.mtr-drill-row.adset td { padding-left:36px; }
.mtr-drill-row.ad td { padding-left:60px; }
.mtr-drill-toggle { background:transparent;border:none;color:var(--text2);cursor:pointer;font-size:11px;padding:0 6px;width:18px; }
.mtr-drill-toggle:hover { color:var(--accent); }
.mtr-drill-toggle.expanded { color:var(--accent); }
.mtr-drill-loading { font-size:11px;color:var(--text3);padding:10px 36px;font-style:italic; }
.mtr-drill-name { font-size:12.5px;font-weight:500; }
.mtr-drill-row.ad .mtr-drill-name { font-weight:400;color:var(--text2); }
.mtr-drill-thumb { width:36px;height:36px;border-radius:6px;object-fit:cover;background:#000;margin-right:8px;vertical-align:middle; }

/* 17) SHARED SNAPSHOTS */
.mtr-share-btn { background:var(--card);border:1px solid var(--border);color:var(--text1);padding:8px 12px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s; }
.mtr-share-btn:hover { border-color:var(--accent);color:var(--accent); }
.mtr-share-modal { position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:1100;display:none;align-items:center;justify-content:center;padding:20px; }
.mtr-share-modal.open { display:flex; }
.mtr-share-card { width:min(520px,100%);background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:14px; }
.mtr-share-title { font-size:16px;font-weight:700;color:var(--text1); }
.mtr-share-desc { font-size:12.5px;color:var(--text2);line-height:1.5; }
.mtr-share-link { background:var(--card);border:1px solid var(--border);border-radius:8px;padding:11px 13px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;color:var(--text1);word-break:break-all; }
.mtr-share-row { display:flex;gap:8px;justify-content:flex-end; }

/* SHARED VIEW (read-only) */
body.mtr-shared-view .topbar, body.mtr-shared-view .main-tabs, body.mtr-shared-view .mtr-controls { display:none !important; }
body.mtr-shared-view #tab-metricas { padding-top:24px; }
.mtr-shared-banner { background:linear-gradient(135deg,var(--accent),var(--accent2,#a855f7));color:#fff;padding:10px 16px;border-radius:10px;margin-bottom:18px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px; }

/* ══════════════════════════════════════════════════════
   PROJETOS — Project Management
══════════════════════════════════════════════════════ */
#tab-projetos { overflow:hidden; }
.pj-wrap { display:flex; min-height:calc(100vh - 120px); overflow:hidden; font-family:var(--font); }

/* ── Sidebar ── */
.pj-sidebar {
  width:240px; min-width:200px;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column; overflow:hidden;
}
.pj-sidebar-scroll { flex:1; overflow-y:auto; padding:8px 0 40px; }
.pj-sidebar-scroll::-webkit-scrollbar { width:3px; }
.pj-sidebar-scroll::-webkit-scrollbar-thumb { background:rgba(99,102,241,.2); border-radius:4px; }
.pj-sidebar-top { padding:10px 8px 4px; display:flex; flex-direction:column; gap:1px; }
/* Bell row — header-style with label + bell */
.pj-sidebar-bell-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 10px 10px;
}
.pj-sidebar-bell-label {
  font-size: 11px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em;
}
/* Nav items */
.pj-nav-btn {
  display:flex; align-items:center; gap:9px;
  padding:8px 12px; border-radius:8px;
  border:none; background:none;
  color:var(--text2); font-size:13px; font-family:var(--font); font-weight:500;
  cursor:pointer; width:100%; text-align:left;
  transition:background .15s, color .15s;
  position:relative;
}
.pj-nav-btn:hover { background:var(--card); color:var(--text); }
.pj-nav-btn.active {
  background:linear-gradient(90deg, rgba(99,102,241,.15) 0%, rgba(99,102,241,.05) 100%);
  color:var(--accent); font-weight:600;
}
.pj-nav-btn.active::before {
  content:''; position:absolute; left:0; top:18%; bottom:18%;
  width:3px; border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#818cf8,#6366f1);
}
.pj-nav-btn .pj-badge {
  margin-left:auto;
  background:var(--accent); color:#fff;
  font-size:10px; font-weight:700;
  padding:2px 7px; border-radius:10px; min-width:18px; text-align:center;
}
/* SVG icon in nav */
.pj-nav-ic {
  width:28px; height:28px; border-radius:7px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--bg); color:var(--text3);
  transition:background .15s, color .15s;
}
.pj-nav-btn:hover .pj-nav-ic { background:var(--bg2); color:var(--text2); }
.pj-nav-btn.active .pj-nav-ic {
  background:rgba(99,102,241,.15); color:var(--accent);
}
.pj-divider { height:1px; background:var(--border); margin:8px 10px; }
.pj-section-label {
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:.08em;
  padding:12px 14px 4px;
}
/* Space rows */
.pj-space-row { display:flex; align-items:center; gap:8px; padding:6px 10px 6px 12px; cursor:pointer; border-radius:9px; margin:1px 6px; user-select:none; transition:background .15s; }
.pj-space-row:hover { background:rgba(99,102,241,.06); }
.pj-space-icon { width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.pj-space-name { flex:1; font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-space-actions { display:none; align-items:center; gap:2px; margin-left:auto; }
.pj-space-row:hover .pj-space-actions { display:flex; }
.pj-space-chevron { font-size:9px; color:var(--text3); transition:transform .2s; cursor:pointer; padding:2px; }
.pj-space-chevron.open { transform:rotate(90deg); }
.pj-icon-btn { background:none; border:none; color:var(--text3); font-size:13px; cursor:pointer; padding:2px 5px; border-radius:5px; line-height:1; transition:background .15s,color .15s; }
.pj-icon-btn:hover { background:var(--border); color:var(--text); }
/* Folder rows */
.pj-folder-row { display:flex; align-items:center; gap:7px; padding:5px 8px 5px 30px; cursor:pointer; border-radius:9px; margin:1px 6px; user-select:none; transition:background .15s; }
.pj-folder-row:hover { background:rgba(99,102,241,.06); }
.pj-folder-name { flex:1; font-size:12.5px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-folder-actions { display:none; align-items:center; gap:2px; }
.pj-folder-row:hover .pj-folder-actions { display:flex; }
/* List rows */
.pj-list-row { display:flex; align-items:center; gap:7px; padding:5px 8px 5px 44px; cursor:pointer; border-radius:9px; margin:1px 6px; user-select:none; transition:background .15s; }
.pj-list-row.indent2 { padding-left:58px; }
.pj-list-row:hover { background:rgba(99,102,241,.06); }
.pj-list-row.active { background:rgba(99,102,241,.1); }
.pj-list-row.active .pj-list-name { color:var(--accent); font-weight:600; }
.pj-list-row.drag-list-target { background:rgba(99,102,241,.18); outline:2px dashed var(--accent); outline-offset:-2px; }
.pj-list-name { flex:1; font-size:12.5px; color:var(--text2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-list-count { font-size:10px; color:var(--text3); font-weight:600; background:var(--bg2); padding:1px 6px; border-radius:8px; }
.pj-list-actions { display:none; align-items:center; gap:2px; }
.pj-list-row:hover .pj-list-actions { display:flex; }
/* Sidebar footer with user avatar */
.pj-sidebar-footer { padding:10px 10px 14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:4px; }
.pj-sidebar-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.pj-sidebar-user-row:hover { background: var(--card); border-color: var(--accent); }
.pj-sidebar-user-info { flex: 1; min-width: 0; }
.pj-sidebar-user-name {
  font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pj-sidebar-user-role {
  font-size: 10px; color: var(--text3); margin-top: 1px;
}
.pj-sidebar-user-status {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg2), 0 0 6px rgba(34,197,94,.5);
}
.pj-add-space-btn {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:8px;
  border:none; background:none;
  color:var(--text3); font-size:12px; font-family:var(--font); font-weight:500;
  cursor:pointer; width:100%;
  transition:background .15s, color .15s;
}
.pj-add-space-btn:hover { background:var(--card); color:var(--text2); }
.pj-add-space-btn svg { opacity:.6; flex-shrink:0; }

/* ── Main Content ── */
.pj-main { flex:1; display:flex; flex-direction:column; overflow:auto; background:var(--bg); }
.pj-view-header {
  display:flex; align-items:center; gap:10px; padding:14px 20px 12px;
  border-bottom:1px solid var(--border); flex-shrink:0; background:var(--bg);
  position: relative;
}
.pj-view-header::after {
  content: ''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, var(--accent) 0%, transparent 60%);
  opacity: .3;
}
.pj-view-title {
  font-size:16px; font-weight:700; color:var(--text); flex:1;
  display:flex; align-items:center; gap:6px;
}
.pj-view-title .breadcrumb-sep { color:var(--text3); font-weight:300; font-size:18px; margin:0 2px; }
.pj-view-title .breadcrumb-parent { font-size:12px; color:var(--text3); font-weight:500; }
.pj-view-toggle {
  display:flex; background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; gap:0;
}
.pj-view-toggle button {
  padding:6px 12px; border:none; background:none; color:var(--text2);
  font-size:12px; font-family:var(--font); cursor:pointer; font-weight:500;
  transition:background .15s,color .15s; border-radius:0;
}
.pj-view-toggle button:not(:last-child) { border-right:1px solid var(--border); }
.pj-view-toggle button.active {
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; font-weight:700;
}
.pj-view-body { flex:1; overflow-y:auto; padding:16px 20px; }
.pj-view-body-sm { padding:14px !important; }

/* ── List View ── */
.pj-lt { width:100%; border-collapse:collapse; font-size:13px; }
.pj-lt th { text-align:left; padding:6px 10px; font-size:11px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--border); white-space:nowrap; }
.pj-lt td { padding:0; border-bottom:1px solid var(--border); }
.pj-status-group-header {
  padding:14px 10px 8px; display:flex; align-items:center; gap:10px;
  position:sticky; top:0; z-index:2;
  background:var(--bg); cursor:pointer; user-select:none;
}
.pj-status-group-header:hover { background:var(--bg2); }
.pj-status-chev {
  width:14px; height:14px; flex-shrink:0;
  transition:transform .18s ease;
  color:var(--text3);
}
.pj-status-group-header.collapsed .pj-status-chev { transform:rotate(-90deg); }
.pj-status-zone.collapsed { display:none; }
.pj-status-group-header::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.pj-status-group-dot {
  display:inline-block;
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  background:var(--c, #94a3b8);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c, #94a3b8) 22%, transparent);
  margin-right:2px;
}
.pj-status-group-name { font-size:12px; font-weight:700; color:var(--text); letter-spacing:.02em; }
.pj-status-group-count {
  font-size:10px; font-weight:700; color:var(--text3);
  background:var(--bg2); border:1px solid var(--border);
  padding:1px 7px; border-radius:10px; margin-left:2px;
}
.pj-task-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px 10px 14px;
  cursor:pointer; border-radius:10px;
  background:var(--card);
  border:1px solid var(--border);
  margin-bottom:6px;
  position:relative;
  transition:transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s, border-color .15s, background .15s;
  animation: pjSlideIn .25s cubic-bezier(.4,0,.2,1) backwards;
}
.pj-task-row::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:transparent; transition:background .2s;
}
.pj-task-row[data-priority="urgent"]::before { background:linear-gradient(180deg,#ef4444,#dc2626); }
.pj-task-row[data-priority="high"]::before { background:linear-gradient(180deg,#f97316,#ea580c); }
.pj-task-row[data-priority="normal"]::before { background:linear-gradient(180deg,#6366f1,#4f46e5); }
.pj-task-row[data-priority="low"]::before { background:var(--border); }
.pj-task-row:hover {
  border-color:var(--accent);
  box-shadow:0 4px 14px rgba(99,102,241,.12), 0 1px 3px rgba(0,0,0,.04);
  transform:translateX(2px);
}
.pj-task-row.done-row { opacity:.6; }
@keyframes pjSlideIn {
  from { opacity:0; transform:translateX(-8px); }
  to { opacity:1; transform:translateX(0); }
}
.pj-task-row:nth-child(2) { animation-delay:.04s; }
.pj-task-row:nth-child(3) { animation-delay:.08s; }
.pj-task-row:nth-child(4) { animation-delay:.12s; }
.pj-task-row:nth-child(5) { animation-delay:.16s; }
.pj-task-row:nth-child(6) { animation-delay:.20s; }
.pj-task-row:nth-child(n+7) { animation-delay:.24s; }

/* List view colunizada */
.pj-list-table { display:flex; flex-direction:column; gap:0; }
.pj-list-th-row {
  display:grid; align-items:center; gap:12px;
  padding:10px 14px 8px;
  font-size:11px; font-weight:600; color:var(--text3);
  text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
}
.pj-list-th-row > div { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Cabeçalho de coluna draggable */
.pj-list-th-cell {
  position:relative;
  display:flex; align-items:center; gap:6px;
  cursor:grab; user-select:none;
  padding:2px 4px; border-radius:6px;
  transition:background .15s, color .15s;
}
.pj-list-th-cell:hover { background:color-mix(in srgb, var(--accent) 8%, transparent); color:var(--text); }
.pj-list-th-cell:active { cursor:grabbing; }
.pj-list-th-cell.dragging { opacity:.4; }
.pj-list-th-cell .pj-th-grip {
  font-size:11px; color:var(--text3);
  opacity:0; transition:opacity .15s;
  letter-spacing:-1px;
}
.pj-list-th-cell:hover .pj-th-grip { opacity:.8; }
.pj-list-th-cell .pj-th-label { overflow:hidden; text-overflow:ellipsis; }
.pj-list-th-cell.drop-before::before,
.pj-list-th-cell.drop-after::after {
  content:''; position:absolute; top:-2px; bottom:-2px;
  width:2px; background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  border-radius:2px;
  pointer-events:none;
}
.pj-list-th-cell.drop-before::before { left:-6px; }
.pj-list-th-cell.drop-after::after  { right:-6px; }
/* Botão + adicionar campo no cabeçalho */
.pj-th-add-col {
  display:flex; align-items:center; justify-content:center;
  height:100%; cursor:pointer;
  font-size:16px; font-weight:400;
  color:var(--text3);
  border-radius:6px;
  transition:background .15s, color .15s;
  user-select:none;
}
.pj-th-add-col:hover {
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  color:var(--accent);
}
/* Estado vazio (todas colunas ocultas) */
.pj-empty-cols {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:48px 24px; color:var(--text3);
}
.pj-empty-cols-text { font-size:13px; }

/* ───── Celebração ao concluir ───── */
.pj-celebrate-overlay {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,12,24,.55); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.pj-celebrate-overlay.open { opacity:1; pointer-events:auto; }
.pj-celebrate-card {
  background:var(--card, #16181f);
  border:1px solid var(--border);
  border-radius:18px;
  padding:28px 32px;
  min-width:280px; max-width:88vw;
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  transform:scale(.85) translateY(8px);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  animation: pjCelebPop .55s cubic-bezier(.34,1.56,.64,1);
}
.pj-celebrate-overlay.open .pj-celebrate-card { transform:scale(1) translateY(0); }
@keyframes pjCelebPop {
  0% { transform:scale(.5) translateY(20px); opacity:0; }
  60% { transform:scale(1.06) translateY(-4px); opacity:1; }
  100% { transform:scale(1) translateY(0); opacity:1; }
}
.pj-celebrate-emoji {
  font-size:54px; line-height:1; margin-bottom:8px;
  animation: pjCelebBounce 1s ease-in-out infinite;
}
.pj-celebrate-emoji.big {
  font-size:72px;
  animation: pjCelebBounce .9s ease-in-out infinite, pjCelebGlow 2s ease-in-out infinite;
}
@keyframes pjCelebBounce {
  0%,100% { transform:translateY(0) rotate(-3deg); }
  50%     { transform:translateY(-6px) rotate(3deg); }
}
@keyframes pjCelebGlow {
  0%,100% { filter: drop-shadow(0 0 12px rgba(250,204,21,.45)); }
  50%     { filter: drop-shadow(0 0 22px rgba(250,204,21,.85)); }
}
.pj-celebrate-title {
  font-size:24px; font-weight:800;
  color:var(--text, #f4f4f5);
  letter-spacing:.5px;
  margin-bottom:8px;
  background:linear-gradient(90deg, #fbbf24, #ef4444, #ec4899);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pj-celebrate-text {
  font-size:14px; color:var(--text2, #d4d4d8);
  line-height:1.55; margin-bottom:14px;
}
.pj-celebrate-text b { color:var(--text); font-weight:700; }
.pj-celebrate-bar {
  height:8px; border-radius:99px;
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  overflow:hidden;
}
.pj-celebrate-bar-fill {
  height:100%;
  background:linear-gradient(90deg, #6366f1, #22c55e);
  border-radius:99px;
  transition:width .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.pj-celebrate-frac {
  margin-top:6px;
  font-size:11px; font-weight:600; color:var(--text3);
  letter-spacing:.5px;
}
.pj-celebrate-alldone .pj-celebrate-title {
  font-size:28px;
  background:linear-gradient(90deg, #fbbf24, #22c55e, #06b6d4);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.pj-celebrate-alldone .pj-btn { margin-top:16px; }
@media (max-width:520px) {
  .pj-celebrate-card { padding:22px 20px; min-width:0; width:88vw; }
  .pj-celebrate-emoji { font-size:48px; }
  .pj-celebrate-emoji.big { font-size:64px; }
  .pj-celebrate-title { font-size:22px; }
}
.pj-list-tr {
  display:grid; align-items:center; gap:12px;
  padding:10px 12px 10px 14px;
  cursor:pointer; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  margin-bottom:6px; position:relative;
  transition:transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s, border-color .15s;
  animation: pjSlideIn .25s cubic-bezier(.4,0,.2,1) backwards;
}
.pj-list-tr::before {
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:transparent;
}
.pj-list-tr[data-priority="urgent"]::before { background:linear-gradient(180deg,#ef4444,#dc2626); }
.pj-list-tr[data-priority="high"]::before { background:linear-gradient(180deg,#f97316,#ea580c); }
.pj-list-tr[data-priority="normal"]::before { background:linear-gradient(180deg,#6366f1,#4f46e5); }
.pj-list-tr[data-priority="low"]::before { background:var(--border); }
.pj-list-tr:hover {
  border-color:var(--accent);
  box-shadow:0 4px 14px rgba(99,102,241,.12), 0 1px 3px rgba(0,0,0,.04);
  transform:translateX(2px);
}
.pj-list-tr.done-row { opacity:.6; }
.pj-list-cell {
  font-size:13px; color:var(--text2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:6px; min-width:0;
}
.pj-list-cell.title { color:var(--text); font-weight:500; }
.pj-list-title-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pj-list-title-text.done { text-decoration:line-through; color:var(--text3); font-weight:400; }
.pj-cell-empty { color:var(--text3); opacity:.45; font-size:12px; }
.pj-recur-badge { font-size:11px; opacity:.75; }

/* Popup menu (recorrência etc) */
.pj-popup-menu {
  position:fixed; z-index:10000;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1);
  padding:5px; min-width:190px; max-width:min(320px, calc(100vw - 24px));
  overflow-y:auto !important; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  animation: pjPopIn .14s cubic-bezier(.4,0,.2,1);
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.pj-popup-menu::-webkit-scrollbar { width:4px; }
.pj-popup-menu::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

/* Backdrop e bottom sheet — usado no mobile pra ter scroll que sempre funciona */
.pj-popup-backdrop {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.4);
  animation: pjBackdropIn .18s ease;
}
@keyframes pjBackdropIn { from { opacity:0; } to { opacity:1; } }
.pj-popup-menu.is-sheet {
  position:fixed !important;
  left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  width:100% !important; max-width:100% !important;
  max-height:70vh !important;
  border-radius:18px 18px 0 0 !important;
  padding:6px 8px 24px !important;
  animation: pjSheetIn .22s cubic-bezier(.4,0,.2,1);
}
@keyframes pjSheetIn { from { transform:translateY(100%); } to { transform:translateY(0); } }
.pj-popup-menu.is-sheet::before {
  content:""; display:block;
  width:38px; height:4px;
  background:var(--border); border-radius:3px;
  margin:6px auto 10px;
  flex-shrink:0;
}
.pj-popup-menu.is-sheet .pj-popup-item { padding:14px 14px; font-size:15px; }
.pj-popup-menu.is-sheet .pj-popup-icon { font-size:16px; width:22px; }
@keyframes pjPopIn { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
.pj-popup-label {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text3); padding:6px 12px 4px; display:block;
}
.pj-popup-separator { height:1px; background:var(--border); margin:4px 6px; }
.pj-popup-item {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:9px;
  cursor:pointer; font-size:13px; font-weight:500;
  color:var(--text); font-family:var(--font);
  transition:background .12s, color .12s;
}
.pj-popup-item:hover { background:rgba(99,102,241,.07); color:var(--text); }
.pj-popup-item.active { background:var(--accent); color:#fff; font-weight:600; }
.pj-popup-item.active .pj-popup-icon { color:#fff !important; }
.pj-popup-icon { font-size:14px; width:18px; text-align:center; flex-shrink:0; }
.pj-popup-check { margin-left:auto; font-weight:700; font-size:12px; opacity:.85; }
/* Active filter button */
.pj-filter-active-btn {
  border-color:var(--accent) !important; background:rgba(99,102,241,.08) !important;
  color:var(--accent) !important; font-weight:600 !important;
}

/* Filter bar */
.pj-filter-bar {
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:10px 16px 8px; border-bottom:1px solid var(--border);
  background:var(--bg);
}
.pj-filter-search {
  flex:1 1 200px; min-width:160px;
  padding:7px 14px; border-radius:20px;
  border:1px solid var(--border); background:var(--card);
  font-size:13px; color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.pj-filter-search:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.pj-filter-sel {
  padding:7px 28px 7px 13px; border-radius:20px;
  border:1px solid var(--border); background:var(--card);
  font-size:12px; font-weight:500; color:var(--text2); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:8px;
  transition:border-color .15s, background-color .15s, color .15s;
}
.pj-filter-sel:hover { border-color:var(--accent); }
.pj-filter-sel:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.pj-filter-sel.pj-filter-active { border-color:var(--accent); background-color:rgba(99,102,241,.08); color:var(--accent); font-weight:600; }
.pj-filter-btn {
  padding:7px 14px; border-radius:20px;
  border:1px solid var(--border); background:var(--card);
  font-size:12px; color:var(--text2); cursor:pointer; font-weight:500;
  transition:background .15s, border-color .15s, color .15s;
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font);
}
.pj-filter-btn:hover { background:var(--bg2); border-color:var(--accent); color:var(--text); }
.pj-filter-btn-danger { color:#ef4444; }
.pj-filter-btn-danger:hover { background:rgba(239,68,68,.08); border-color:#ef4444; color:#ef4444; }

/* Botão "Filtros" agrupado — só no mobile */
.pj-filter-mobile-only { display:none; }
.pj-filter-desktop-only { display:contents; }
.pj-filter-badge {
  display:inline-block; min-width:18px; padding:1px 5px;
  margin-left:4px; border-radius:9px;
  background:var(--accent); color:#fff;
  font-size:10px; font-weight:700; line-height:14px;
  text-align:center;
}
/* Sheet de filtros (mobile) — usa pjOpenFormModal */
.pj-filter-sheet-list { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.pj-filter-sheet-row {
  display:flex; align-items:center; gap:12px;
  width:100%; padding:14px;
  background:var(--bg); border:1px solid transparent;
  border-radius:10px; cursor:pointer;
  font-family:inherit; color:var(--text); font-size:14px;
  transition:background .12s, border-color .12s;
}
.pj-filter-sheet-row:hover { background:var(--bg2); border-color:var(--border); }
.pj-filter-sheet-icon { font-size:18px; width:24px; flex-shrink:0; }
.pj-filter-sheet-label { font-weight:600; flex:1; text-align:left; }
.pj-filter-sheet-value {
  font-size:13px; font-weight:500;
  color:var(--text3); flex-shrink:0;
}

/* View switcher row dentro do painel Filtros (mobile) */
.pj-filter-sheet-view-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:10px; background:var(--bg);
}
.pj-filter-sheet-view-btns { display:flex; gap:6px; flex-wrap:wrap; }
.pj-filter-sheet-view-btns button {
  padding:7px 14px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text2);
  border-radius:8px; font-size:12px; font-weight:500;
  font-family:inherit; cursor:pointer; transition:background .12s,color .12s;
}
.pj-filter-sheet-view-btns button.active {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; border-color:transparent; font-weight:700;
}

/* Bulk bar */
.pj-bulk-bar {
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  background:linear-gradient(90deg, rgba(99,102,241,.08), rgba(168,85,247,.06));
  border-bottom:1px solid var(--border);
  animation: pjSlideIn .2s cubic-bezier(.4,0,.2,1);
}
.pj-bulk-count {
  font-weight:700; color:var(--accent); font-size:13px;
  padding:4px 10px; border-radius:999px;
  background:rgba(99,102,241,.12);
}

/* Selection circle on task row */
.pj-list-tr .pj-sel-circle {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border);
  flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); transition:all .18s;
  opacity:0; font-size:11px; font-weight:900; color:#fff;
}
.pj-list-tr:hover .pj-sel-circle { opacity:.7; }
.pj-list-tr .pj-sel-circle.checked,
.pj-list-tr.selected .pj-sel-circle {
  opacity:1;
  background:linear-gradient(135deg,#6366f1,#a855f7);
  border-color:#6366f1;
}
.pj-list-tr.selected {
  background:rgba(99,102,241,.06); border-color:var(--accent);
}

/* Notification bell */
.pj-notif-bell-wrap { display:flex; justify-content:flex-end; padding:2px 0 6px; }
.pj-notif-bell {
  width:38px; height:38px; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; font-size:17px;
  display:flex; align-items:center; justify-content:center;
  position:relative; color:var(--text2);
  transition:background .15s, transform .15s, border-color .15s;
}
.pj-notif-bell:hover { background:var(--bg2); border-color:var(--accent); transform:scale(1.05); }
.pj-notif-count {
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:#ef4444; color:#fff;
  font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.pj-notif-count.has { display:flex; animation: pjPopIn .2s; }
.pj-notif-panel {
  position:fixed; top:60px; right:24px; z-index:9999;
  width:360px; max-height:480px; overflow:hidden;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 10px 36px rgba(0,0,0,.18);
  flex-direction:column;
  display:none;
}
.pj-notif-panel.open { display:flex; animation: pjPopIn .18s cubic-bezier(.4,0,.2,1); }
.pj-notif-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px; border-bottom:1px solid var(--border);
  font-weight:600; font-size:13px;
}
.pj-notif-header button {
  font-size:11px; padding:4px 8px; border-radius:6px;
  border:none; background:transparent; cursor:pointer;
  color:var(--text3); transition:color .15s;
}
.pj-notif-header button:hover { color:var(--accent); }
.pj-notif-list { flex:1; overflow:auto; padding:4px 0; }
.pj-notif-item {
  display:flex; gap:10px; padding:10px 14px;
  cursor:pointer; border-bottom:1px solid var(--border);
  transition:background .12s;
}
.pj-notif-item:hover { background:var(--bg2); }
.pj-notif-item.unread { background:rgba(99,102,241,.04); }
.pj-notif-item.unread::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--accent); margin-top:8px; flex-shrink:0;
}
.pj-notif-icon { font-size:16px; flex-shrink:0; }
.pj-notif-body { flex:1; min-width:0; }
.pj-notif-body > div:first-child {
  font-size:13px; color:var(--text); font-weight:500; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pj-notif-body > div:first-child.bold { font-weight:700; }
.pj-notif-sub { font-size:11px; color:var(--text3); margin-top:2px; }
.pj-notif-time { font-size:10px; color:var(--text3); margin-left:auto; flex-shrink:0; }
.pj-notif-empty {
  padding:30px 14px; text-align:center;
  color:var(--text3); font-size:12px;
}
/* Mention notifications */
.pj-notif-item.mention-highlight {
  background:rgba(168,85,247,.08);
  border-left:3px solid #a855f7;
}
.pj-notif-item.mention-highlight:hover { background:rgba(168,85,247,.14); }
.pj-notif-icon.mention-icon {
  background:#a855f7; color:#fff;
  width:24px; height:24px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.pj-notif-mention-badge {
  background:#a855f7; color:#fff;
  font-size:10px; font-weight:700;
  padding:2px 6px; border-radius:10px;
  align-self:center; flex-shrink:0;
}
.pj-notif-mention-banner {
  background:rgba(168,85,247,.12);
  border-bottom:1px solid rgba(168,85,247,.25);
  padding:8px 14px; font-size:12px;
  color:#a855f7; font-weight:600;
}

/* Comment attach + mention buttons (dentro da textarea, à direita) */
.pj-comment-input-wrap { position:relative; }
.pj-comment-attach-btn,
.pj-comment-mention-btn {
  position:absolute; bottom:6px;
  width:30px; height:30px; border-radius:8px;
  background:transparent; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--text3); font-family:var(--font);
  transition:background .15s, color .15s;
}
.pj-comment-attach-btn { right:8px; }
.pj-comment-mention-btn { right:44px; font-weight:700; font-size:15px; }
.pj-comment-attach-btn:hover,
.pj-comment-mention-btn:hover { background:var(--bg2); color:var(--accent); }
/* Linha de ações abaixo do textarea (Enviar) */
.pj-comment-actions { display:flex; justify-content:flex-end; margin-top:8px; }
.pj-comment-attach-preview { padding:6px 0 0; min-height:0; }
.pj-comment-attach-preview:empty { display:none; }
.pj-attach-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px 4px 4px; border-radius:8px;
  background:var(--bg2); border:1px solid var(--border);
  font-size:12px; color:var(--text2); max-width:100%;
}
.pj-attach-chip img { width:24px; height:24px; border-radius:4px; object-fit:cover; }
.pj-attach-chip span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.pj-attach-chip button {
  background:none; border:none; cursor:pointer; color:var(--text3);
  font-size:14px; padding:0 4px; line-height:1;
}
.pj-attach-chip button:hover { color:#ef4444; }
.pj-comment-attach {
  margin-top:6px; max-width:240px;
}
.pj-comment-attach img {
  max-width:100%; max-height:160px; border-radius:8px;
  border:1px solid var(--border); cursor:pointer; display:block;
}
.pj-comment-attach a {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:8px;
  background:var(--bg2); border:1px solid var(--border);
  font-size:12px; color:var(--accent); text-decoration:none;
}
.pj-comment-attach a:hover { background:var(--card); }

.pj-task-check {
  width:18px; height:18px; border:2px solid var(--border); border-radius:5px;
  flex-shrink:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  transition:all .18s cubic-bezier(.4,0,.2,1);
}
.pj-task-check:hover { border-color:var(--accent); background:rgba(99,102,241,.06); transform:scale(1.1); }
.pj-task-check.done {
  background:linear-gradient(135deg,#22c55e,#16a34a);
  border-color:#16a34a; color:#fff; font-size:11px; font-weight:900;
  box-shadow:0 2px 6px rgba(34,197,94,.35);
}
.pj-task-title-cell { flex:1; min-width:0; }
.pj-task-title-text { font-size:13.5px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35; }
.pj-task-title-text.done { text-decoration:line-through; color:var(--text3); font-weight:400; }
.pj-subtask-count {
  font-size:10.5px; color:var(--text3); margin-top:3px;
  display:inline-flex; align-items:center; gap:4px;
  padding:1px 7px; background:var(--bg2); border-radius:6px;
  font-weight:500;
}

.pj-task-assignees { display:flex; flex-direction:row-reverse; }
.pj-task-assignees .pj-avatar { margin-left:-6px; transition:transform .15s, z-index 0s .15s; }
.pj-task-assignees:hover .pj-avatar { margin-left:0; }
.pj-avatar {
  width:26px; height:26px; border-radius:50%; color:#fff;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  border:2px solid var(--card);
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  transition:transform .15s;
}
.pj-avatar:hover { transform:translateY(-2px) scale(1.08); z-index:2; }

.pj-task-due {
  font-size:11px; font-weight:600; white-space:nowrap;
  padding:3px 9px; border-radius:8px;
  display:inline-flex; align-items:center; gap:4px;
  transition:transform .15s;
}
.pj-task-due.overdue { background:rgba(239,68,68,.12); color:#ef4444; }
.pj-task-due.overdue::before { content:'⚠'; font-size:10px; }
.pj-task-due.today {
  background:linear-gradient(90deg,rgba(249,115,22,.18),rgba(245,158,11,.18));
  color:#f97316;
  animation: pjPulseToday 2s ease-in-out infinite;
}
.pj-task-due.today::before { content:'🔥'; font-size:10px; }
.pj-task-due.future { background:var(--bg2); color:var(--text3); }
.pj-task-due.future::before { content:'📅'; font-size:9px; opacity:.6; }
@keyframes pjPulseToday {
  0%,100% { box-shadow:0 0 0 0 rgba(249,115,22,.0); }
  50% { box-shadow:0 0 0 4px rgba(249,115,22,.15); }
}

.pj-priority {
  font-size:10px; font-weight:700; padding:3px 9px; border-radius:10px;
  white-space:nowrap; letter-spacing:.3px; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:3px;
}
.pj-priority.urgent {
  background:linear-gradient(135deg,rgba(239,68,68,.15),rgba(220,38,38,.18));
  color:#dc2626; border:1px solid rgba(239,68,68,.25);
}
.pj-priority.urgent::before { content:'⚡'; }
.pj-priority.high {
  background:linear-gradient(135deg,rgba(249,115,22,.15),rgba(234,88,12,.18));
  color:#ea580c; border:1px solid rgba(249,115,22,.25);
}
.pj-priority.normal {
  background:rgba(99,102,241,.10); color:var(--accent);
  border:1px solid rgba(99,102,241,.18);
}
.pj-priority.low { background:var(--bg2); color:var(--text3); border:1px solid var(--border); }

.pj-status-pill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:10px;
  font-size:11px; font-weight:600;
  transition:transform .15s;
}
.pj-status-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.pj-status-pill:hover { transform:scale(1.04); }

/* Bolinha colorida clicável que mostra status da tarefa.
   Hit-zone (botão) tem 28px pra ser tocável; círculo visível tem 12px. */
.pj-status-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:transparent; border:none; padding:0;
  cursor:pointer; flex-shrink:0;
  transition:background .15s;
  position:relative;
}
.pj-status-dot::before {
  content:''; width:12px; height:12px; border-radius:50%;
  background:var(--c, #94a3b8);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--c, #94a3b8) 25%, transparent);
  transition:transform .15s, box-shadow .15s;
}
.pj-status-dot:hover { background:color-mix(in srgb, var(--c, #94a3b8) 12%, transparent); }
.pj-status-dot:hover::before { transform:scale(1.15); box-shadow:0 0 0 3px color-mix(in srgb, var(--c, #94a3b8) 35%, transparent); }
.pj-status-dot:active::before { transform:scale(0.95); }
/* Mobile: hit-zone permanece 28px (touch-friendly), círculo um pouco maior */
@media (max-width:640px) {
  .pj-status-dot::before { width:14px; height:14px; }
}

/* Cabeçalho de seção no popup menu (usado pelos buckets do menu de status) */
.pj-popup-header {
  font-size:10px; font-weight:700; text-transform:uppercase;
  color:var(--text3); letter-spacing:.5px;
  padding:8px 12px 4px; margin-top:2px;
  pointer-events:none;
}
.pj-popup-header:first-child { margin-top:0; }
.pj-popup-divider {
  height:1px; background:var(--border); margin:4px 0;
  pointer-events:none;
}
.pj-add-task-row {
  display:flex; align-items:center; gap:7px;
  padding:8px 12px; margin:4px 2px;
  color:var(--text3); font-size:12.5px; font-weight:500;
  cursor:pointer; border-radius:8px;
  border:1px dashed transparent;
  transition:background .15s, color .15s, border-color .15s;
}
.pj-add-task-row:hover {
  background:rgba(99,102,241,.05);
  color:var(--accent);
  border-color:rgba(99,102,241,.2);
}

/* ── Kanban ── */
.pj-kanban { display:flex; gap:14px; padding:4px 0 16px; overflow-x:auto; min-height:300px; align-items:flex-start; }
.pj-kanban::-webkit-scrollbar { height:6px; }
.pj-kanban::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.pj-col {
  min-width:300px; max-width:300px; background:var(--bg2);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  transition:box-shadow .2s, border-color .2s; display:flex; flex-direction:column;
  max-height:calc(100vh - 240px);
  position: relative;
}
.pj-col::before {
  content: ''; display: block; height: 3px; width: 100%;
  background: var(--col-accent, var(--border));
  flex-shrink: 0;
}
.pj-col:hover { box-shadow:0 8px 28px rgba(0,0,0,.1); }
.pj-col-header { display:flex; align-items:center; gap:10px; padding:12px 14px 10px; border-bottom:1px solid var(--border); }
.pj-col-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.pj-col-name { font-size:12px; font-weight:800; color:var(--text); flex:1; text-transform:uppercase; letter-spacing:.5px; }
.pj-col-count {
  font-size:11px; color:var(--text2); font-weight:700;
  background:var(--card); padding:2px 8px; border-radius:10px;
  min-width:22px; text-align:center; border:1px solid var(--border);
}
.pj-col-body { padding:10px; display:flex; flex-direction:column; gap:8px; min-height:80px; flex:1; overflow-y:auto; transition:background .2s; }
.pj-col-body::-webkit-scrollbar { width:5px; }
.pj-col-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.pj-col-body.drag-over {
  background:linear-gradient(180deg,rgba(99,102,241,.10),rgba(99,102,241,.04));
  border-radius:10px;
  outline:2px dashed var(--accent); outline-offset:-4px;
}
.pj-list-tr { cursor:pointer; }
.pj-list-tr.dragging { opacity:.45; transform:scale(.995); }
.pj-status-zone { padding-bottom:2px; transition:background .15s, outline-color .15s; }
.pj-status-zone.drag-over,
.pj-status-droptarget.drag-over {
  background:linear-gradient(180deg,rgba(99,102,241,.10),rgba(99,102,241,.04));
  outline:2px dashed var(--accent); outline-offset:-2px;
  border-radius:8px;
}
.pj-archived-row {
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; background:var(--bg);
  margin-bottom:8px;
}
.pj-archived-row:hover { border-color:var(--accent); }

/* Integrações */
.pj-integ-card {
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:20px; margin-bottom:16px;
}
.pj-integ-card-title {
  font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px;
  padding-bottom:8px; border-bottom:1px solid var(--border);
}
.pj-integ-event-row {
  display:flex; align-items:center; gap:12px; padding:10px 0;
  border-bottom:1px solid var(--border);
}
.pj-integ-event-row:last-child { border-bottom:none; }
.pj-integ-input {
  flex:1; height:32px; padding:0 10px; border-radius:8px;
  border:1px solid var(--border); background:var(--bg2);
  color:var(--text); font-size:12px; font-family:var(--font);
  min-width:0;
}
.pj-integ-input:focus { outline:none; border-color:var(--accent); }
.pj-integ-log-row {
  display:flex; align-items:center; gap:8px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:12px;
}
.pj-integ-log-row:last-child { border-bottom:none; }
.pj-integ-log-row .log-status { flex-shrink:0; }
.pj-integ-log-row.ok .log-status { color:#22c55e; }
.pj-integ-log-row.err .log-status { color:#ef4444; }
.pj-integ-log-time { font-size:11px; color:var(--text3); }
.pj-integ-log-event { font-size:12px; font-weight:500; }
.pj-integ-log-url { font-size:11px; color:var(--text3); margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-integ-log-err { font-size:11px; color:#ef4444; }
.pj-integ-log-empty { color:var(--text3); font-size:12px; padding:12px 0; }
.pj-queue-status-ok { color:#22c55e; font-weight:600; }
.pj-queue-status-off { color:var(--text3); font-weight:600; }
.pj-integ-notice { background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(139,92,246,.04)); border-color:rgba(99,102,241,.3) !important; }
.pj-integ-notice-inner { display:flex; align-items:center; gap:10px; }
.pj-integ-notice-icon { font-size:18px; flex-shrink:0; }
.pj-integ-notice-body { flex:1; }
.pj-integ-notice-title { font-size:13px; font-weight:600; color:var(--text); }
.pj-integ-notice-sub { font-size:11px; color:var(--text3); margin-top:2px; }
.pj-integ-section-sub { font-size:12px; color:var(--text3); margin-bottom:10px; }
.pj-integ-row { display:flex; gap:8px; align-items:center; }
.pj-integ-schema-grid { display:flex; gap:12px; flex-wrap:wrap; }
.pj-integ-schema-block { flex:1; min-width:200px; }
.pj-integ-schema-title {
  font-size:11px; font-weight:700; color:var(--accent);
  margin-bottom:6px; text-transform:uppercase;
}
.pj-integ-pre {
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:10px 12px; font-size:11px; font-family:monospace;
  color:var(--text); white-space:pre; overflow-x:auto; margin:0;
}
.pj-integ-id-table { width:100%; border-collapse:collapse; font-size:12px; }
.pj-integ-id-table th { text-align:left; color:var(--text3); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--border); }
.pj-integ-id-table td { padding:6px 8px; border-bottom:1px solid var(--border); color:var(--text); }
.pj-integ-id-table tr:last-child td { border-bottom:none; }
.pj-integ-id-table code { background:var(--bg2); padding:2px 6px; border-radius:4px; font-size:11px; }

/* Digest Semanal */
.pj-digest-kpis {
  display:flex; gap:16px; margin-bottom:28px; flex-wrap:wrap;
}
.pj-digest-kpi {
  flex:1; min-width:120px; background:var(--bg);
  border:1px solid var(--border); border-radius:12px;
  padding:16px 20px; text-align:center;
}
.pj-digest-kpi-num { font-size:32px; font-weight:700; color:var(--accent); line-height:1.1; }
.pj-digest-kpi-label { font-size:11px; color:var(--text3); margin-top:4px; }
.pj-digest-cols { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.pj-digest-section-title {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text3); margin-bottom:12px;
}
.pj-digest-member-card {
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
  margin-bottom:12px; overflow:hidden;
}
.pj-digest-member-header {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.pj-digest-avatar {
  width:36px; height:36px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.pj-digest-member-name { font-size:14px; font-weight:600; color:var(--text); }
.pj-digest-member-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.pj-digest-task-list { padding:8px 12px; }
.pj-digest-task-row {
  display:flex; align-items:center; gap:8px;
  padding:6px 4px; border-bottom:1px solid var(--border);
}
.pj-digest-task-row:last-child { border-bottom:none; }
.pj-digest-task-row.done { opacity:.7; }
.pj-digest-task-title { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.pj-digest-task-title.pj-done-text { text-decoration:line-through; color:var(--text3); }
.pj-digest-task-list-name { font-size:11px; color:var(--text3); }
.pj-digest-task-list-name.overdue { color:#ef4444; font-weight:600; }
.pj-digest-list-row {
  display:flex; align-items:center; gap:8px;
  padding:8px 0; border-bottom:1px solid var(--border);
}
.pj-digest-list-row:last-child { border-bottom:none; }
.pj-digest-list-name { flex:1; font-size:13px; font-weight:500; color:var(--text); }
.pj-digest-list-cnt { font-size:12px; color:var(--text3); margin-right:10px; }
.pj-digest-list-bar { width:80px; height:6px; background:var(--bg2); border-radius:3px; overflow:hidden; }
.pj-digest-list-bar-fill { height:100%; background:var(--accent); border-radius:3px; }
/* Digest header meta */
.pj-digest-nav { display:flex; gap:8px; align-items:center; margin-left:auto; }
.pj-digest-range { font-size:12px; color:var(--text3); font-weight:600; padding:3px 10px; border-radius:20px; background:var(--bg2); border:1px solid var(--border); }
/* Digest collaborator filter chips */
.pj-digest-collab-filter { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.pj-digest-chip { padding:5px 13px; border-radius:20px; border:1px solid var(--border); background:var(--card); font-size:12px; font-weight:500; color:var(--text2); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:all .15s; font-family:var(--font); }
.pj-digest-chip:hover { border-color:var(--accent); color:var(--accent); }
.pj-digest-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.pj-digest-chip-count { font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; background:rgba(0,0,0,.12); }
.pj-digest-chip:not(.active) .pj-digest-chip-count { background:var(--bg2); color:var(--text3); }

/* Timer */
.pj-timer-btn {
  display:inline-flex; align-items:center; gap:4px;
  margin-left:auto; padding:3px 8px; font-size:11px; font-family:var(--font);
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  color:var(--text2); cursor:pointer; transition:border-color .15s, background .15s, color .15s;
  opacity:0;
}
.pj-list-tr:hover .pj-timer-btn { opacity:1; }
.pj-timer-btn:hover { border-color:var(--accent); color:var(--accent); }
.pj-timer-btn.running {
  opacity:1 !important;
  background:linear-gradient(90deg, rgba(239,68,68,.12), rgba(239,68,68,.06));
  border-color:#ef4444; color:#ef4444; font-weight:600;
  animation: pjPulse 1.5s infinite;
}
@keyframes pjPulse { 0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.3);} 50%{box-shadow:0 0 0 4px rgba(239,68,68,.0);} }

/* Time metrics */
.pj-tm-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-bottom:20px; }
.pj-tm-kpi { padding:14px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.pj-tm-kpi-label { font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:4px; }
.pj-tm-info { font-size:13px; color:var(--text3); cursor:help; opacity:.6; text-transform:none; letter-spacing:0; transition:opacity .15s; }
.pj-tm-info:hover { opacity:1; color:var(--accent); }
.pj-tm-kpi-val { font-size:22px; font-weight:700; color:var(--accent); margin:6px 0 2px; }
.pj-tm-kpi-sub { font-size:11px; color:var(--text3); }
.pj-tm-section { margin-bottom:24px; }
.pj-tm-h { font-size:13px; font-weight:700; color:var(--text); margin-bottom:8px; }
.pj-tm-row { display:grid; grid-template-columns:160px 1fr 140px; gap:10px; align-items:center; padding:6px 0; }
.pj-tm-name { font-size:13px; color:var(--text); }
.pj-tm-duration { font-size:11px; color:var(--text3); }
.pj-tm-rate-input { width:70px; padding:3px 6px; font-size:11px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); }
.pj-tm-cost { font-weight:700; color:var(--text3); }
.pj-tm-cost.has-cost { color:#22c55e; }
.pj-tm-bar { height:8px; background:var(--bg); border-radius:4px; overflow:hidden; }
.pj-tm-bar-fill { height:100%; background:linear-gradient(90deg,#6366f1,#a855f7); border-radius:4px; }
.pj-tm-val { font-size:12px; color:var(--text2); text-align:right; }
.pj-tm-task { display:flex; align-items:center; gap:12px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; flex-wrap:wrap; }

/* Heatmap */
.pj-heat-grid { display:flex; flex-direction:column; gap:2px; padding:8px 0; }
.pj-heat-row { display:grid; grid-template-columns:24px repeat(24, 1fr); gap:2px; }
.pj-heat-label { font-size:10px; color:var(--text3); text-align:right; padding-right:4px; align-self:center; }
.pj-heat-h { font-size:10px; color:var(--text3); text-align:center; }
.pj-heat-cell { height:18px; border-radius:3px; background:rgba(99,102,241,0); transition:transform .1s; }
.pj-heat-cell:hover { transform:scale(1.2); outline:1px solid var(--accent); }
.pj-card {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:12px 12px 10px; cursor:grab;
  transition:box-shadow .2s, transform .2s, border-color .2s;
  position:relative;
  animation: pjFadeIn .25s ease backwards;
  overflow: hidden;
}
.pj-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:transparent;
}
.pj-card[data-priority="urgent"]::before { background:linear-gradient(180deg,#ef4444,#dc2626); }
.pj-card[data-priority="high"]::before { background:linear-gradient(180deg,#f97316,#ea580c); }
.pj-card[data-priority="normal"]::before { background:linear-gradient(180deg,#6366f1,#4f46e5); }
.pj-card:hover {
  box-shadow:0 10px 28px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  border-color:rgba(124,58,237,.4);
  transform:translateY(-2px);
}
.pj-card:active { cursor:grabbing; }
.pj-card.dragging { opacity:.4; transform:rotate(2deg) scale(.98); }
.pj-card-title { font-size:13.5px; font-weight:600; color:var(--text); line-height:1.4; margin-bottom:8px; }
.pj-card-footer { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pj-col-add { padding:6px; }
.pj-col-add-btn { width:100%; padding:7px; border:1px dashed var(--border); border-radius:8px; background:none; color:var(--text3); font-size:12px; font-family:var(--font); cursor:pointer; transition:border-color .15s,color .15s; }
.pj-col-add-btn:hover { border-color:var(--accent); color:var(--accent); }

/* ── Dashboard ── */
.pj-dash-wrap { padding:28px 36px; width:100%; max-width:none; animation:pjFadeIn .3s ease; position:relative; overflow:hidden; }
.pj-dash-wrap::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(700px 500px at 8% 0%,  color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(700px 500px at 95% 5%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 60%),
    radial-gradient(600px 450px at 60% 100%, color-mix(in srgb, var(--accent3) 14%, transparent), transparent 60%);
}
.pj-dash-wrap > * { position:relative; z-index:1; }
.pj-dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.pj-dash-greet { font-size:26px; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.pj-dash-date { font-size:13px; color:var(--text3); margin-top:4px; }
.pj-dash-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-bottom:24px; }
@media(max-width:1100px) { .pj-dash-kpis { grid-template-columns:repeat(2,1fr); } }
/* Mobile mantém 2x2 — 1 coluna fica gigante e força scroll absurdo */
@media(max-width:380px)  { .pj-dash-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
.pj-dash-kpi {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--card) 55%, transparent),
    color-mix(in srgb, var(--card) 30%, transparent));
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
  border-radius:18px; padding:20px 22px; cursor:default;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--text) 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pj-dash-kpi::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb, #fff 12%, transparent), transparent 45%);
  border-radius:inherit;
}
.pj-dash-kpi:hover {
  transform:translateY(-3px);
  box-shadow:
    0 14px 40px color-mix(in srgb, var(--text) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
}
.pj-dash-kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pj-dash-kpi-icon { font-size:22px; }
.pj-dash-kpi-val { font-size:38px; font-weight:800; line-height:1; }
.pj-dash-kpi-label { font-size:12px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; }
.pj-dash-kpi-sub { font-size:11px; color:var(--text3); margin-top:4px; }
.pj-dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:1100px) { .pj-dash-grid { grid-template-columns:1fr; } }
@media(max-width:768px)  { .pj-dash-wrap { padding:16px; } }
.pj-dash-col {
  position:relative;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--card) 50%, transparent),
    color-mix(in srgb, var(--card) 25%, transparent));
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius:18px; padding:20px;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--text) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}
.pj-dash-section-title { display:flex; align-items:center; justify-content:space-between; font-size:12px; font-weight:800; color:var(--text2); text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.pj-dash-section-count { background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius:10px; padding:2px 8px; font-size:11px; color:var(--text3); font-weight:700; backdrop-filter:blur(8px); }
.pj-dash-task-list { display:flex; flex-direction:column; gap:4px; }
.pj-dash-task-row { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; transition:background .12s, transform .12s; }
.pj-dash-task-row:hover { background:color-mix(in srgb, var(--text) 6%, transparent); transform:translateX(2px); }
.pj-dash-task-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pj-dash-task-info { flex:1; min-width:0; }
.pj-dash-task-title { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pj-dash-task-meta { font-size:11px; color:var(--text3); margin-top:1px; }
.pj-dash-empty { font-size:12px; color:var(--text3); padding:16px 0; text-align:center; font-style:italic; }
.pj-dash-see-all { font-size:12px; color:var(--accent); cursor:pointer; padding:8px 10px; text-align:center; margin-top:4px; border-radius:8px; transition:background .12s; }
.pj-dash-see-all:hover { background:var(--accentGlow); }
.pj-dash-members { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:14px; }
.pj-dash-member {
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--card) 50%, transparent),
    color-mix(in srgb, var(--card) 25%, transparent));
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius:18px; padding:18px;
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:
    0 8px 32px color-mix(in srgb, var(--text) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pj-dash-member:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow:
    0 14px 40px color-mix(in srgb, var(--text) 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent);
}
.pj-dash-member-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pj-dash-member-info { flex:1; min-width:0; }
.pj-dash-member-name { font-size:13px; font-weight:700; color:var(--text); }
.pj-dash-member-role { font-size:11px; color:var(--text3); margin-top:1px; }
.pj-dash-member-stats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pj-dash-stat { font-size:11px; color:var(--text2); background:color-mix(in srgb, var(--text) 6%, transparent); border:1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius:8px; padding:3px 8px; backdrop-filter:blur(8px); }
.pj-dash-stat-red { font-size:11px; color:#dc2626; background:color-mix(in srgb, #ef4444 16%, transparent); border:1px solid color-mix(in srgb, #ef4444 30%, transparent); border-radius:8px; padding:3px 8px; font-weight:700; backdrop-filter:blur(8px); }
.pj-dash-progress-wrap { height:6px; background:color-mix(in srgb, var(--text) 8%, transparent); border-radius:4px; overflow:hidden; }
.pj-dash-progress-bar { height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); border-radius:3px; transition:width .4s ease; box-shadow:0 0 12px rgba(34,197,94,.4); }

/* ── KPI clicável + sparkline ── */
.pj-dash-kpi { cursor:pointer; }
.pj-dash-kpi:hover .pj-dash-kpi-arrow { opacity:1; transform:translateX(2px); }
.pj-dash-kpi-arrow { opacity:0; transition:opacity .15s, transform .15s; font-size:14px; color:var(--text3); margin-left:6px; }
.pj-dash-kpi-spark { margin-top:8px; height:24px; width:100%; }
.pj-dash-kpi-spark path { fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pj-dash-kpi-spark .area { stroke:none; opacity:.18; }

/* ── Filter chip on dashboard ── */
.pj-dash-filter-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 12px; background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius:20px; font-size:12px; font-weight:600; color:var(--accent); margin-left:10px; backdrop-filter:blur(6px); }
.pj-dash-filter-chip button { background:none; border:none; color:inherit; font-size:14px; cursor:pointer; padding:0; line-height:1; opacity:.7; }
.pj-dash-filter-chip button:hover { opacity:1; }

/* ── Skeleton loading ── */
@keyframes pjSkelShimmer { 0% { background-position:-200px 0; } 100% { background-position:200px 0; } }
.pj-skel { background:linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 0%, color-mix(in srgb, var(--text) 12%, transparent) 50%, color-mix(in srgb, var(--text) 6%, transparent) 100%); background-size:400px 100%; animation:pjSkelShimmer 1.2s infinite linear; border-radius:6px; display:inline-block; }
.pj-skel-line { height:12px; margin:6px 0; }
.pj-skel-kpi { height:90px; border-radius:14px; }

/* ── Próximas 24h / Atividade ── */
.pj-dash-trio { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
@media(max-width:1100px) { .pj-dash-trio { grid-template-columns:1fr; } }
.pj-activity-row { display:flex; gap:10px; padding:8px 10px; border-radius:10px; transition:background .12s; cursor:pointer; }
.pj-activity-row:hover { background:color-mix(in srgb, var(--text) 6%, transparent); }
.pj-activity-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; background:color-mix(in srgb, #22c55e 18%, transparent); }
.pj-activity-info { flex:1; min-width:0; font-size:12px; color:var(--text2); line-height:1.4; }
.pj-activity-info b { color:var(--text); }
.pj-activity-time { font-size:10.5px; color:var(--text3); margin-top:2px; }

/* ── Quick-add FAB ── */
.pj-fab { position:fixed; right:24px; bottom:24px; width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent2,#a855f7)); color:#fff; border:none; font-size:26px; cursor:pointer; box-shadow:0 10px 28px color-mix(in srgb, var(--accent) 40%, transparent), 0 4px 10px rgba(0,0,0,.2); z-index:4500; display:flex; align-items:center; justify-content:center; transition:transform .15s, box-shadow .15s; }
.pj-fab:hover { transform:scale(1.06) rotate(8deg); box-shadow:0 14px 36px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 14px rgba(0,0,0,.25); }
.pj-fab:active { transform:scale(.96); }
.pj-fab-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); z-index:5500; display:none; align-items:center; justify-content:center; padding:20px; animation:pjFadeIn .2s ease; }
.pj-fab-modal-overlay.open { display:flex; }
.pj-fab-modal { background:var(--card); border:1px solid var(--border); border-radius:16px; max-width:480px; width:100%; padding:22px; box-shadow:0 24px 80px rgba(0,0,0,.5); }
.pj-fab-modal h3 { margin:0 0 16px; font-size:16px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.pj-fab-modal label { display:block; font-size:11px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.04em; margin:10px 0 4px; }
.pj-fab-modal input, .pj-fab-modal select { width:100%; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13.5px; font-family:var(--font); outline:none; box-sizing:border-box; }
.pj-fab-modal input:focus, .pj-fab-modal select:focus { border-color:var(--accent); }
.pj-fab-modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }

/* ── WhatsApp Daily Report Preview ── */
.pj-wa-modal { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(6px); z-index:5000; display:flex; align-items:center; justify-content:center; padding:24px; animation:pjFadeIn .2s ease; }
.pj-wa-card { background:var(--card); border:1px solid var(--border); border-radius:18px; max-width:540px; width:100%; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.6); }
.pj-wa-head { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:linear-gradient(135deg,#075e54,#128c7e); color:#fff; }
.pj-wa-head h3 { margin:0; font-size:15px; font-weight:700; display:flex; align-items:center; gap:10px; }
.pj-wa-head .close-btn { background:rgba(255,255,255,.15); border:none; color:#fff; font-size:18px; cursor:pointer; line-height:1; padding:0; width:30px; height:30px; border-radius:8px; transition:background .15s; }
.pj-wa-head .close-btn:hover { background:rgba(255,255,255,.25); }
.pj-wa-body { flex:1; padding:24px 20px; overflow-y:auto; background:#0b141a; background-image:linear-gradient(rgba(11,20,26,.85),rgba(11,20,26,.92)),repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(255,255,255,.015) 30px,rgba(255,255,255,.015) 60px); }
.pj-wa-bubble-wrap { display:flex; justify-content:flex-end; }
.pj-wa-bubble { background:#005c4b; color:#e9edef; padding:10px 12px; border-radius:8px 0 8px 8px; max-width:88%; font-size:13.5px; line-height:1.55; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; white-space:pre-wrap; word-wrap:break-word; box-shadow:0 1px 1px rgba(0,0,0,.13); position:relative; }
.pj-wa-bubble strong { font-weight:700; color:#fff; }
.pj-wa-bubble em { font-style:italic; color:#aebac1; }
.pj-wa-bubble:after { content:''; position:absolute; top:0; right:-7px; width:0; height:0; border-style:solid; border-width:0 0 8px 7px; border-color:transparent transparent #005c4b transparent; }
.pj-wa-time { display:block; text-align:right; font-size:10px; color:#aebac1; margin-top:4px; }
.pj-wa-actions { padding:14px 20px; border-top:1px solid var(--border); display:flex; gap:10px; flex-shrink:0; }
.pj-wa-actions button { flex:1; padding:11px 16px; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; border:none; transition:all .15s; font-family:inherit; }
.pj-wa-actions .copy { background:var(--bg2); color:var(--text); border:1px solid var(--border); }
.pj-wa-actions .copy:hover { background:var(--border); }
.pj-wa-actions .send { background:#25d366; color:#fff; }
.pj-wa-actions .send:hover { background:#1da850; transform:translateY(-1px); }
.pj-wa-actions .send:active { transform:translateY(0); }
.pj-wa-trigger-btn { background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; border:none; padding:9px 16px; border-radius:10px; font-weight:700; font-size:12.5px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:all .15s; box-shadow:0 2px 8px rgba(37,211,102,.3); font-family:inherit; }
.pj-wa-trigger-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,211,102,.45); }
.pj-wa-trigger-btn:active { transform:translateY(0); }

/* ── Inbox ── */
.pj-inbox-section { margin-bottom:24px; animation:pjFadeIn .35s ease; }
@keyframes pjFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.pj-inbox-section-title {
  font-size:11.5px; font-weight:800; color:var(--text2);
  text-transform:uppercase; letter-spacing:.6px;
  padding:8px 4px 10px; display:flex; align-items:center; gap:10px;
  cursor:pointer; user-select:none; border-radius:7px;
}
.pj-inbox-section-title:hover { background:var(--bg2); padding-left:8px; }
.pj-inbox-section-chev { width:14px; height:14px; flex-shrink:0; color:var(--text3); transition:transform .18s ease; margin-left:auto; }
.pj-inbox-section.collapsed .pj-inbox-section-chev { transform:rotate(-90deg); }
.pj-inbox-section-body { overflow:hidden; }
.pj-inbox-section.collapsed .pj-inbox-section-body { display:none; }
.pj-inbox-section-title .dot {
  width:10px; height:10px; border-radius:50%;
  box-shadow:0 0 0 3px rgba(255,255,255,.6), 0 0 8px currentColor;
  animation:pjDotPulse 2.5s ease-in-out infinite;
}
@keyframes pjDotPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }
.pj-inbox-count-badge {
  font-size:10.5px; font-weight:700; color:var(--text3);
  background:var(--bg2); padding:1px 8px; border-radius:10px;
}

/* ── Task Modal ── */
.pj-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2000; display:none; align-items:center; justify-content:center; }
.pj-modal-overlay.open { display:flex; }
.pj-task-modal { background:var(--card); border:1px solid var(--border); border-radius:20px; width:1500px; max-width:97vw; max-height:96vh; height:96vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 32px 80px rgba(0,0,0,.5); }
.pj-modal-topbar { display:flex; align-items:center; gap:8px; padding:14px 22px; border-bottom:1px solid var(--border); font-size:12px; color:var(--text3); flex-shrink:0; }
.pj-modal-topbar span { cursor:pointer; }
.pj-modal-topbar span:hover { color:var(--text); }
.pj-modal-topbar .sep { color:var(--border); }
.pj-modal-body { display:flex; flex:1; min-height:0; }
.pj-modal-left { flex:1; overflow-y:auto; padding:32px 48px; }
.pj-modal-right { width:380px; border-left:1px solid var(--border); padding:18px; background:var(--bg2); flex-shrink:0; display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.pj-modal-right .pj-activity-title { flex-shrink:0; }
.pj-modal-right .pj-activity-list { flex:1 1 auto; overflow-y:auto; min-height:0; padding-right:4px; margin-right:-4px; }
.pj-modal-right .pj-reply-banner { flex-shrink:0; }
.pj-modal-right .pj-comment-input-wrap { flex-shrink:0; margin-top:12px; }
.pj-modal-right .pj-comment-attach-preview { flex-shrink:0; }
.pj-modal-title-input { width:100%; border:none; background:none; color:var(--text); font-size:22px; font-weight:800; font-family:var(--font); outline:none; resize:none; padding:0; margin-bottom:12px; line-height:1.4; }
.pj-modal-title-input::placeholder { color:var(--text3); }
.pj-modal-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border); }
.pj-meta-item {
  display:flex; align-items:center; gap:6px; padding:7px 13px;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--card) 70%, transparent),
    color-mix(in srgb, var(--card2) 55%, transparent));
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius:11px; font-size:12.5px; font-weight:500; color:var(--text);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  box-shadow:0 1px 2px color-mix(in srgb, var(--text) 6%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
}
.pj-meta-item:hover {
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent),
             inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent);
}
.pj-meta-item:active { transform:translateY(0); transition-duration:.05s; }
.pj-meta-item input[type="date"],
.pj-meta-item input[type="time"] { border:none; background:none; color:var(--text1); font-family:var(--font); font-size:12.5px; font-weight:500; cursor:pointer; outline:none; }
.pj-meta-item input[type="date"] { width:130px; }
.pj-meta-item input[type="time"] { width:80px; }
.pj-meta-item input[type="date"]::-webkit-calendar-picker-indicator,
.pj-meta-item input[type="time"]::-webkit-calendar-picker-indicator { opacity:.5; cursor:pointer; }
/* Custom date picker (calendário bonito) */
.pj-datepicker {
  position:fixed; z-index:11500; background:var(--card); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 16px 48px rgba(0,0,0,.18); padding:14px; width:300px;
  display:none; font-family:var(--font); user-select:none;
}
.pj-datepicker.open { display:block; animation:pjDpFadeIn .15s ease-out; }
@keyframes pjDpFadeIn { from{opacity:0;transform:translateY(-4px);} to{opacity:1;transform:translateY(0);} }
.pj-dp-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.pj-dp-title { font-size:14px; font-weight:700; color:var(--text); text-transform:capitalize; }
.pj-dp-nav { display:flex; gap:4px; }
.pj-dp-nav-btn { width:28px; height:28px; border-radius:8px; border:none; background:var(--bg2); color:var(--text); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.pj-dp-nav-btn:hover { background:var(--bg3); }
.pj-dp-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.pj-dp-dow { font-size:10px; font-weight:700; color:var(--text3); text-transform:uppercase; text-align:center; padding:6px 0; }
.pj-dp-day {
  aspect-ratio:1; border:none; background:none; color:var(--text);
  border-radius:8px; cursor:pointer; font-size:12.5px; font-weight:500;
  display:flex; align-items:center; justify-content:center; transition:all .12s;
  font-family:var(--font);
}
.pj-dp-day:hover { background:var(--bg2); }
.pj-dp-day.other-month { color:var(--text3); opacity:.4; }
.pj-dp-day.today { font-weight:700; color:var(--accent); border:1px solid var(--accent); }
.pj-dp-day.selected { background:var(--accent); color:#fff; font-weight:700; }
.pj-dp-day.selected:hover { background:var(--accent); filter:brightness(1.1); }
.pj-dp-actions { display:flex; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.pj-dp-btn { flex:1; padding:7px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg2); color:var(--text); cursor:pointer; font-size:12px; font-weight:600; transition:all .12s; }
.pj-dp-btn:hover { background:var(--bg3); }
.pj-dp-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.pj-dp-btn.primary:hover { filter:brightness(1.1); }
.pj-dp-btn.danger { color:#ef4444; }
.pj-meta-date-btn { border:none; background:none; color:var(--text1); font-family:var(--font); font-size:12.5px; font-weight:500; cursor:pointer; padding:0; min-width:60px; white-space:nowrap; text-align:left; pointer-events:none; }
.pj-meta-date-btn.empty { color:var(--text3); }
.pj-meta-label { font-size:10px; color:var(--text3); font-weight:600; text-transform:uppercase; }
.pj-modal-desc { width:100%; border:none; background:none; color:var(--text2); font-size:13.5px; font-family:var(--font); outline:none; resize:none; min-height:80px; line-height:1.6; margin-bottom:16px; }
.pj-modal-desc::placeholder { color:var(--text3); }
.pj-modal-section-title {
  font-size:11px; font-weight:800; color:var(--text3);
  text-transform:uppercase; letter-spacing:.6px;
  margin:18px 0 10px; display:flex; align-items:center; gap:8px; cursor:pointer;
  padding-bottom:6px; border-bottom:1px solid var(--border);
}
.pj-fields-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.pj-field-item { display:flex; flex-direction:column; gap:3px; position:relative; }
.pj-field-label { font-size:10px; font-weight:600; color:var(--text3); text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.pj-field-quick-del {
  margin-left:auto; width:20px; height:20px; border-radius:5px; border:none;
  background:none; color:var(--text3); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:13px; line-height:1;
  opacity:0; transition:opacity .15s, background .15s, color .15s;
}
.pj-field-item:hover .pj-field-quick-del { opacity:1; }
.pj-field-quick-del:hover { background:rgba(239,68,68,.12); color:#ef4444; }
.pj-field-value { padding:6px 8px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:12.5px; font-family:var(--font); outline:none; border:1px solid transparent; }
.pj-field-value:hover { border-color:var(--border); }
.pj-field-value:focus { border-color:var(--accent); background:var(--card); }
/* Subtasks */
.pj-subtask-header { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
.pj-subtask-progress-text { font-size:11px; color:var(--text3); font-weight:400; }
.pj-subtask-progress-bar { flex:1; height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin-left:4px; }
.pj-subtask-progress-fill { height:100%; background:linear-gradient(90deg,#22c55e,#16a34a); border-radius:3px; transition:width .3s; }
.pj-subtask-list { display:flex; flex-direction:column; gap:2px; margin-bottom:6px; }
.pj-subtask-item { display:flex; align-items:center; gap:8px; padding:6px 6px; border-radius:7px; transition:background .12s; }
.pj-subtask-item:hover { background:var(--bg); }
.pj-subtask-check { width:15px; height:15px; border:2px solid var(--border); border-radius:4px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:9px; transition:background .15s, border-color .15s; }
.pj-subtask-check:hover { border-color:var(--accent); }
.pj-subtask-check.done { background:var(--accent); border-color:var(--accent); color:#fff; }
.pj-subtask-text { flex:1; font-size:13px; color:var(--text2); cursor:pointer; }
.pj-subtask-text:hover { color:var(--accent); text-decoration:underline; }
.pj-subtask-text.done { text-decoration:line-through; color:var(--text3); }
.pj-subtask-meta { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.pj-subtask-del { background:none; border:none; color:var(--text3); font-size:15px; cursor:pointer; opacity:.35; padding:2px 5px; border-radius:5px; transition:opacity .12s, background .12s, color .12s; }
.pj-subtask-del:hover { opacity:1; background:rgba(239,68,68,.12); color:#ef4444; }
.pj-subtask-fields { display:flex; flex-wrap:wrap; gap:6px; padding:4px 0 4px 23px; }
.pj-subtask-field-chip { display:flex; align-items:center; gap:4px; background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:2px 8px; font-size:11px; }
.pj-subtask-field-label { color:var(--text3); font-weight:600; white-space:nowrap; }
.pj-subtask-field-val { border:none; background:transparent; color:var(--text); font-size:11px; font-family:var(--font); outline:none; min-width:40px; max-width:120px; cursor:text; }
.pj-subtask-field-val:focus { color:var(--accent); }
.pj-subtask-field-select { border:none; background:transparent; color:var(--text); font-size:11px; font-family:var(--font); outline:none; cursor:pointer; max-width:120px; }
.pj-subtask-field-empty { color:var(--text3); font-style:italic; }
.pj-add-subtask-row { display:flex; align-items:center; gap:8px; padding:5px 6px; }
.pj-add-subtask-input { flex:1; background:none; border:none; border-bottom:1px dashed var(--border); outline:none; font-size:13px; color:var(--text); font-family:var(--font); padding:3px 0; }
.pj-add-subtask-input:focus { border-bottom-color:var(--accent); }
.pj-add-subtask-input::placeholder { color:var(--text3); }
.pj-tpl-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:var(--bg); }
.pj-tpl-row:hover { border-color:var(--accent); }
.pj-tpl-info { flex:1; }
.pj-tpl-name { font-weight:600; font-size:13px; color:var(--text); }
.pj-tpl-desc { font-size:11px; color:var(--text3); margin-top:1px; }
.pj-assignee-list { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.pj-assignee-row { display:flex; align-items:center; gap:10px; padding:8px; background:var(--bg); border-radius:8px; cursor:pointer; }
.pj-assignee-name { font-size:13px; color:var(--text); }

/* Client picker (modal de seleção de cliente) — substitui o popup */
.pj-cli-search-wrap { margin-bottom:10px; }
.pj-cli-list {
  display:flex; flex-direction:column; gap:4px;
  max-height:55vh; overflow-y:auto; overflow-x:hidden;
  padding:2px; margin:0 -2px 14px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
}
.pj-cli-list::-webkit-scrollbar { width:6px; }
.pj-cli-list::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.pj-cli-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border-radius:10px;
  cursor:pointer; transition:background .12s, border-color .12s;
  background:var(--bg); border:1px solid transparent;
}
.pj-cli-row:hover { background:var(--bg2); border-color:var(--border); }
.pj-cli-row.active {
  background:linear-gradient(90deg, rgba(99,102,241,.16), rgba(168,85,247,.10));
  border-color:rgba(99,102,241,.45);
}
.pj-cli-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.pj-cli-logo {
  width:28px !important; height:28px !important; min-width:28px; max-width:28px;
  border-radius:7px; flex-shrink:0;
  object-fit:cover; background:var(--bg2);
  border:1px solid var(--border);
  display:block;
}
/* Defesa extra: qualquer img solta dentro do form modal nunca estoura */
.pj-form-card img:not(.pj-cli-logo):not([style*="width"]) {
  max-width:100%; max-height:200px; height:auto;
}
.pj-cli-name {
  flex:1; min-width:0; font-size:14px; font-weight:500; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pj-cli-check { color:var(--accent); font-weight:700; flex-shrink:0; }
.pj-cli-empty {
  text-align:center; padding:24px 12px;
  color:var(--text3); font-size:13px;
}
@media (max-width:640px) {
  .pj-cli-list { max-height:50vh; }
  .pj-cli-row { padding:12px; }
  .pj-cli-name { font-size:15px; }
}
.pj-activity-empty { text-align:center; padding:24px 16px; color:var(--text3); font-size:12px; display:flex; flex-direction:column; align-items:center; gap:6px; }
.pj-activity-empty-icon { font-size:28px; }
.pj-activity-empty-title { font-weight:700; color:var(--text2); font-size:12.5px; }

/* Gantt */
.pj-gantt-wrap { min-width:max-content; }
.pj-gantt-header { display:flex; align-items:center; border-bottom:1px solid var(--border); padding:6px 0; position:sticky; top:0; background:var(--card); z-index:4; }
.pj-gantt-days-row { display:flex; }
.pj-gantt-label { width:200px; min-width:200px; font-size:12px; color:var(--text2); padding:0 10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-gantt-task-label { cursor:pointer; font-size:12.5px; }
.pj-gantt-task-label:hover { color:var(--accent); }
.pj-gantt-day-head { text-align:center; font-size:10px; color:var(--text3); border-left:1px solid var(--border); padding:2px 0; flex-shrink:0; }
.pj-gantt-day-head.today { background:rgba(99,102,241,.12); color:var(--accent); font-weight:700; }
.pj-gantt-day-head.weekend { background:rgba(0,0,0,.03); }
.pj-gantt-group-header { display:flex; align-items:center; background:var(--bg); padding:6px 0; border-top:1px solid var(--border); margin-top:4px; }
.pj-gantt-group-header .pj-gantt-label { font-size:11px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.5px; }
.pj-gantt-row { display:flex; align-items:center; padding:3px 0; }
.pj-gantt-row:hover { background:rgba(99,102,241,.04); }
.pj-gantt-track { height:32px; position:relative; border-left:1px solid var(--border); }
.pj-gantt-today-line { position:absolute; top:0; bottom:0; width:2px; background:rgba(99,102,241,.5); z-index:2; pointer-events:none; }
.pj-gantt-weekend-col { position:absolute; top:0; bottom:0; background:rgba(0,0,0,.025); pointer-events:none; }
.pj-gantt-bar { position:absolute; top:5px; height:22px; border-radius:5px; cursor:pointer; overflow:hidden; display:flex; align-items:center; z-index:3; transition:filter .15s; opacity:.9; }
.pj-gantt-bar:hover { filter:brightness(1.1); opacity:1; z-index:5; }
.pj-gantt-bar.done { opacity:.5; }
.pj-gantt-bar-fill { position:absolute; top:0; left:0; height:100%; pointer-events:none; }
.pj-gantt-bar-label { position:relative; font-size:11px; color:#fff; font-weight:600; padding:0 7px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px rgba(0,0,0,.3); z-index:1; }

/* Pomodoro Widget */
.pj-pomo-widget { position:fixed; bottom:24px; right:24px; z-index:8000; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px 20px; width:210px; box-shadow:0 8px 32px rgba(0,0,0,.18); display:flex; flex-direction:column; gap:10px; }
.pj-pomo-header { display:flex; align-items:center; justify-content:space-between; }
.pj-pomo-mode { font-size:13px; font-weight:700; color:var(--text); }
.pj-pomo-close { background:none; border:none; font-size:18px; color:var(--text3); cursor:pointer; padding:0 2px; }
.pj-pomo-timer { font-size:42px; font-weight:800; text-align:center; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-1px; transition:color .3s; }
.pj-pomo-timer.running { color:#ef4444; animation:pjPulse 2s infinite; }
.pj-pomo-task-name { font-size:11px; color:var(--text3); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pj-pomo-cycles { display:flex; gap:6px; justify-content:center; }
.pj-pomo-dot { width:10px; height:10px; border-radius:50%; background:var(--border); }
.pj-pomo-dot.done { background:#ef4444; }
.pj-pomo-controls { display:flex; gap:6px; }
.pj-pomo-btn { flex:1; padding:7px; border-radius:8px; background:linear-gradient(90deg,#ef4444,#dc2626); border:none; color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font); transition:opacity .15s; }
.pj-pomo-btn:hover { opacity:.9; }
.pj-pomo-btn-sec { background:var(--bg); color:var(--text2); border:1px solid var(--border); flex:0 0 36px; }

/* Busca Global */
.pj-search-overlay { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9000; display:none; align-items:flex-start; justify-content:center; padding-top:80px; backdrop-filter:blur(4px); }
.pj-search-overlay.open { display:flex; }
.pj-search-box { background:var(--card); border:1px solid var(--border); border-radius:14px; width:min(600px, 90vw); box-shadow:0 24px 60px rgba(0,0,0,.3); overflow:hidden; }
.pj-search-input-wrap { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.pj-search-icon { font-size:18px; }
.pj-search-input { flex:1; background:none; border:none; outline:none; font-size:16px; color:var(--text); font-family:var(--font); }
.pj-search-esc { background:var(--bg); border:1px solid var(--border); border-radius:5px; padding:2px 7px; font-size:11px; color:var(--text3); cursor:pointer; font-family:var(--font); }
.pj-search-results { max-height:360px; overflow-y:auto; padding:8px; }
.pj-search-hint { font-size:12px; color:var(--text3); padding:10px 8px; }
.pj-search-hint kbd { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:11px; }
.pj-search-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; transition:background .1s; }
.pj-search-item:hover, .pj-search-item.active { background:rgba(99,102,241,.1); }
.pj-search-item-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.pj-search-item-label { flex:1; font-size:13.5px; font-weight:500; color:var(--text); }
.pj-search-item-sub { font-size:11px; color:var(--text3); }
.pj-search-item-type { font-size:10px; color:var(--text3); background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:1px 5px; text-transform:uppercase; }
.pj-add-subtask { display:flex; align-items:center; gap:6px; padding:5px 6px; color:var(--text3); font-size:12.5px; cursor:pointer; border-radius:6px; }
.pj-add-subtask:hover { background:var(--bg); color:var(--text2); }
/* Activity */
.pj-activity-title {
  font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}
.pj-activity-title::before {
  content: ''; display: block; width: 3px; height: 14px;
  border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent2));
}
.pj-activity-list { display:flex; flex-direction:column; gap:0; }
.pj-activity-item {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pj-activity-item:last-child { border-bottom: none; }
.pj-activity-text { font-size:12.5px; color:var(--text2); line-height:1.5; flex:1; }
.pj-activity-text strong { color: var(--text); }
.pj-activity-time {
  font-size: 10px; color: var(--text3); white-space: nowrap; margin-top: 2px;
  background: var(--bg2); padding: 2px 6px; border-radius: 10px; border: 1px solid var(--border);
}
.pj-comment-input-wrap { margin-top:14px; }
.pj-comment-input {
  width:100%;
  padding:12px 80px 12px 14px; /* espaço pros botões @ e 📎 */
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-size:13.5px; line-height:1.45; font-family:var(--font);
  outline:none; resize:vertical; min-height:80px; max-height:240px;
  box-sizing:border-box;
}
.pj-comment-input:focus { border-color:var(--accent); }
.pj-comment-send {
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 18px;
  background:linear-gradient(135deg, var(--accent), var(--accent2,#a855f7));
  border:none; color:#fff; border-radius:10px;
  font-size:13px; font-weight:700; font-family:var(--font);
  cursor:pointer; box-shadow:0 4px 12px rgba(99,102,241,.25);
  transition:transform .12s, box-shadow .15s, opacity .15s;
}
.pj-comment-send:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.35); }
.pj-comment-send:active { transform:translateY(0); }

/* Markdown rendered */
.pj-md h2 { font-size:18px; margin:8px 0 4px; color:var(--text); }
.pj-md h3 { font-size:15px; margin:8px 0 4px; color:var(--text); }
.pj-md h4 { font-size:13px; margin:6px 0 3px; color:var(--text); font-weight:700; }
.pj-md p { margin:4px 0; }
.pj-md ul { margin:4px 0; padding-left:20px; }
.pj-md code { background:var(--bg2); padding:1px 5px; border-radius:4px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.pj-md a { color:var(--accent); text-decoration:none; }
.pj-md a:hover { text-decoration:underline; }
.pj-mention {
  background:rgba(99,102,241,.12); color:var(--accent);
  padding:0 4px; border-radius:4px; font-weight:600; font-size:.95em;
}

/* Description wrapper + preview */
.pj-desc-wrap { position:relative; }
.pj-desc-preview-btn {
  position:absolute; top:6px; right:6px; z-index:2;
  font-size:11px; padding:4px 8px; border-radius:6px;
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; color:var(--text2); transition:all .15s;
}
.pj-desc-preview-btn:hover { background:var(--bg2); border-color:var(--accent); color:var(--accent); }
.pj-modal-desc-preview {
  min-height:80px; padding:8px 10px;
  background:var(--bg); border:1px solid var(--border);
  border-radius:8px; font-size:13px; color:var(--text);
  line-height:1.5;
}
.pj-modal-desc.drag-over {
  border-color:var(--accent); background:rgba(99,102,241,.06);
  box-shadow:0 0 0 3px rgba(99,102,241,.15);
}

/* @mention autocomplete list */
.pj-mention-list {
  position:fixed; z-index:11000;
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.14);
  padding:4px; min-width:200px; max-width:280px;
  display:none;
}
.pj-mention-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:6px;
  cursor:pointer; font-size:13px; color:var(--text);
  transition:background .12s;
}
.pj-mention-item:hover, .pj-mention-item.active { background:rgba(99,102,241,.1); }
.pj-mention-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pj-mention-role { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px; font-size:10px; background:rgba(99,102,241,.18); color:#6366f1; font-weight:600; }
.pj-mention-pending { display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px; font-size:10px; background:rgba(234,179,8,.15); color:#ca8a04; font-weight:500; }

/* Comment threads + reactions */
.pj-activity-item.reply {
  margin-left:24px; padding-left:10px;
  border-left:2px solid var(--border);
}

/* Log de mudanças (status, prioridade, atribuição, etc) — entrada compacta */
.pj-activity-log-item {
  display:flex; align-items:center; gap:8px;
  padding:8px 4px; border-bottom:1px dashed var(--border);
  font-size:12px; color:var(--text2); line-height:1.4;
}
.pj-activity-log-item:last-child { border-bottom:none; }
.pj-activity-log-icon {
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg2); border:1px solid var(--border);
  font-size:11px;
}
.pj-activity-log-body { flex:1; min-width:0; }
.pj-activity-log-body strong { color:var(--text); font-weight:600; }
.pj-activity-log-body em { color:var(--text3); font-style:italic; }
.pj-activity-log-time {
  font-size:10px; color:var(--text3); white-space:nowrap;
  background:var(--bg2); padding:2px 6px; border-radius:10px;
  border:1px solid var(--border); flex:0 0 auto;
}
.pj-log-pill {
  display:inline-flex; align-items:center; gap:4px;
  background:color-mix(in srgb, var(--c, #94a3b8) 14%, transparent);
  color:var(--text); border:1px solid color-mix(in srgb, var(--c, #94a3b8) 40%, var(--border));
  padding:1px 8px; border-radius:999px; font-size:11px; font-weight:600;
  line-height:1.4;
}
.pj-log-pill::before {
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--c, #94a3b8); flex:0 0 auto;
}

/* ─── Tags ───────────────────────────────────────────────── */
.pj-tag-pill {
  display:inline-flex; align-items:center; gap:5px;
  background:color-mix(in srgb, var(--c, #94a3b8) 14%, transparent);
  color:var(--text); border:1px solid color-mix(in srgb, var(--c, #94a3b8) 40%, var(--border));
  padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;
  line-height:1.4; white-space:nowrap;
}
.pj-tag-pill.small { padding:1px 7px; font-size:10.5px; }
.pj-tag-pill-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--c, #94a3b8); flex:0 0 auto;
}
.pj-tag-pill-label { line-height:1.4; }
.pj-tag-pill-x {
  background:transparent; border:none; padding:0; cursor:pointer;
  color:var(--text3); font-size:14px; line-height:1; margin-left:2px;
  width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .12s, color .12s;
}
.pj-tag-pill-x:hover { background:color-mix(in srgb, var(--c, #94a3b8) 30%, transparent); color:var(--text); }

.pj-card-tags {
  display:flex; flex-wrap:wrap; gap:4px;
  margin:4px 0 0 0;
}
.pj-list-tags {
  display:inline-flex; flex-wrap:wrap; gap:4px;
  margin-left:6px;
}
.pj-meta-tags {
  flex-wrap:wrap; gap:4px;
}
.pj-meta-tags .pj-tag-pill { cursor:pointer; }

/* Modal manager */
.pj-tags-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  z-index:9500; padding:20px;
  backdrop-filter:blur(2px);
}
.pj-tags-backdrop.open { display:flex; animation:pjFadeIn .18s ease; }
@keyframes pjFadeIn { from { opacity:0 } to { opacity:1 } }
.pj-tags-modal {
  width:min(560px, 95vw); max-height:85vh; overflow:hidden;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
}
.pj-tags-modal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
}
.pj-tags-modal-head h3 { margin:0; font-size:15px; color:var(--text); }
.pj-tags-modal-body {
  padding:14px 18px; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px;
}
.pj-tags-create {
  display:flex; flex-direction:column; gap:8px;
  padding:12px; background:var(--bg2); border:1px solid var(--border); border-radius:10px;
}
.pj-tags-create input {
  background:var(--bg); border:1px solid var(--border); border-radius:8px;
  color:var(--text); padding:8px 10px; font-size:13px; outline:none;
}
.pj-tags-create input:focus { border-color:var(--accent); }
.pj-tag-color-row {
  display:flex; flex-wrap:wrap; gap:6px;
}
.pj-tag-color-btn {
  width:22px; height:22px; border-radius:50%;
  border:2px solid transparent; cursor:pointer;
  transition:transform .12s ease, border-color .12s ease;
}
.pj-tag-color-btn:hover { transform:scale(1.12); }
.pj-tag-color-btn.selected { border-color:var(--text); transform:scale(1.18); }
.pj-tags-list {
  display:flex; flex-direction:column; gap:4px;
}
.pj-tags-row {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:8px;
  transition:background .12s;
}
.pj-tags-row:hover { background:var(--bg2); }
.pj-tags-count {
  font-size:11px; color:var(--text3);
  background:var(--bg2); padding:1px 7px; border-radius:999px;
  border:1px solid var(--border);
}
.pj-tags-empty {
  text-align:center; padding:24px; color:var(--text3); font-size:12.5px;
}

/* Picker popover (do task modal) */
.pj-tag-picker {
  position:fixed; z-index:11000;
  width:280px; max-height:300px;
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:pjFadeIn .15s ease;
}
.pj-tag-picker-search {
  border:none; border-bottom:1px solid var(--border);
  padding:9px 12px; background:transparent; color:var(--text);
  font-size:13px; outline:none;
}
.pj-tag-picker-search::placeholder { color:var(--text3); }
.pj-tag-picker-list {
  flex:1; overflow-y:auto; padding:4px;
  min-height:60px;
}
.pj-tag-picker-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:6px; cursor:pointer;
  font-size:12.5px; color:var(--text2);
  transition:background .12s;
}
.pj-tag-picker-item:hover { background:var(--bg2); }
.pj-tag-picker-item.on { background:color-mix(in srgb, var(--accent) 10%, transparent); }
.pj-tag-picker-item.create { color:var(--accent); font-weight:600; }
.pj-tag-picker-item.create .pj-tag-pill-dot { background:var(--accent); }
.pj-tag-picker-check { color:var(--accent); font-weight:700; }
.pj-tag-picker-empty {
  padding:14px; text-align:center; color:var(--text3); font-size:12px;
}
.pj-tag-picker-foot {
  border-top:1px solid var(--border); padding:6px 12px;
}

/* ── Stale pill (tarefas paradas) ── */
.pj-stale-pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:1px 8px; border-radius:999px;
  font-size:10.5px; font-weight:600;
  background:color-mix(in srgb, #38bdf8 14%, transparent);
  color:#0ea5e9; border:1px solid color-mix(in srgb, #38bdf8 35%, transparent);
  white-space:nowrap; line-height:1.4;
}
.pj-stale-pill.moderate {
  background:color-mix(in srgb, #f97316 14%, transparent);
  color:#f97316; border-color:color-mix(in srgb, #f97316 40%, transparent);
}
.pj-stale-pill.severe {
  background:color-mix(in srgb, #ef4444 16%, transparent);
  color:#ef4444; border-color:color-mix(in srgb, #ef4444 45%, transparent);
  animation:pjStalePulse 2.4s ease-in-out infinite;
}
@keyframes pjStalePulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(239,68,68,.0); }
  50%      { box-shadow:0 0 0 4px rgba(239,68,68,.18); }
}
.pj-dash-stale {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px;
}
.pj-dash-stale-list {
  display:flex; flex-direction:column; gap:2px; margin-top:8px;
}
.pj-comment-replies { margin-top:6px; }
.pj-comment-actions {
  display:flex; align-items:center; gap:6px; margin-top:4px;
  font-size:11px; color:var(--text3);
}
.pj-comment-actions button {
  background:none; border:none; cursor:pointer;
  color:var(--text3); font-size:11px; padding:2px 6px;
  border-radius:4px; transition:background .12s, color .12s;
}
.pj-comment-actions button:hover { background:var(--bg2); color:var(--accent); }
.pj-reactions {
  display:flex; gap:4px; margin-top:4px; flex-wrap:wrap;
}
.pj-reaction {
  display:inline-flex; align-items:center; gap:3px;
  padding:2px 8px; border-radius:999px;
  border:1px solid var(--border); background:var(--card);
  cursor:pointer; font-size:12px; color:var(--text2);
  transition:all .12s;
}
.pj-reaction:hover { border-color:var(--accent); background:var(--bg2); }
.pj-reaction.mine {
  background:rgba(99,102,241,.12); border-color:var(--accent); color:var(--accent); font-weight:600;
}

/* Reply banner */
.pj-reply-banner {
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; margin-top:8px;
  background:rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.2);
  border-radius:8px; font-size:11px; color:var(--text2);
}
.pj-reply-banner button {
  margin-left:auto; background:none; border:none;
  cursor:pointer; color:var(--text3); font-size:14px;
  padding:0 4px;
}
.pj-reply-banner button:hover { color:#ef4444; }

/* Workload */
.pj-view-header-meta { margin-left:auto; font-size:12px; color:var(--text3); font-weight:600; padding:3px 10px; border-radius:20px; background:var(--bg2); border:1px solid var(--border); }
.pj-workload-grid { display:flex; flex-direction:column; gap:10px; }
.pj-workload-row {
  display:grid; grid-template-columns:200px 1fr 350px;
  gap:14px; align-items:center;
  padding:14px; border-radius:12px;
  background:var(--card); border:1px solid var(--border);
  transition:border-color .15s;
}
.pj-workload-row:hover { border-color:var(--accent); }
.pj-workload-user { display:flex; align-items:center; gap:10px; }
.pj-workload-bar {
  height:10px; border-radius:5px;
  background:var(--bg2); overflow:hidden;
  position:relative;
}
.pj-workload-bar-fill {
  height:100%; border-radius:5px;
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.pj-workload-days {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:4px;
}
.pj-wl-day {
  text-align:center; padding:6px 2px;
  border-radius:6px; background:var(--bg2);
  font-size:10px; min-width:0;
}
.pj-wl-day.today { background:rgba(99,102,241,.12); border:1px solid var(--accent); }
.pj-wl-day.weekend { opacity:.55; }
.pj-wl-day-label { font-size:9px; color:var(--text3); text-transform:uppercase; font-weight:600; }
.pj-wl-day-count { font-size:14px; font-weight:700; color:var(--text); margin-top:2px; min-height:18px; }
.pj-wl-day-count.has { color:var(--accent); }

/* Workload user info */
.pj-wl-name { font-weight:600; font-size:13px; color:var(--text); }
.pj-wl-meta { font-size:11px; color:var(--text3); margin-top:2px; }
.pj-wl-meta .overdue { color:#ef4444; font-weight:700; }

/* workload bar fill colors via CSS */
.pj-workload-bar-fill.ok   { background: var(--accent); }
.pj-workload-bar-fill.mid  { background: #f59e0b; }
.pj-workload-bar-fill.high { background: #ef4444; }

/* pj-main initial state */
.pj-main-initial {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 14px; color: var(--text3); text-align: center; padding: 40px;
}
.pj-main-initial-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 28px rgba(124,58,237,.3);
}
.pj-main-initial-text { font-size:15px; font-weight:700; color:var(--text2); }
.pj-main-initial-sub { font-size:13px; color:var(--text3); max-width:260px; line-height:1.5; }

/* Demo button */
.pj-demo-btn {
  background: linear-gradient(135deg, #a855f7, #6366f1) !important;
  color: #fff !important; border: none !important;
}

/* Sign-out button */
.acesso-signout-btn {
  margin-top: 14px; padding: 8px 16px; border-radius: var(--r2);
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text2); font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: border-color .15s, color .15s;
}
.acesso-signout-btn:hover { border-color: var(--danger); color: var(--danger); }

/* bd-empty redesign */
.bd-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text3); gap: 14px; text-align: center; padding: 40px;
}
.bd-empty-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: var(--bg2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 32px;
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
}
.bd-empty-text { font-size:15px; font-weight:700; color:var(--text2); }
.bd-empty-sub { font-size:13px; color:var(--text3); line-height:1.5; }

/* pj-icon-btn large */
.pj-icon-btn-lg { font-size: 16px !important; }

/* By Client (legacy classes mantidas) */
.pj-client-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:12px 14px;
  margin-bottom:10px;
}
.pj-client-card-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.pj-tag-pill {
  padding:2px 8px; border-radius:10px;
  background:var(--bg2); color:var(--text2);
  font-size:11px; font-weight:600;
}
.pj-client-tasks { display:flex; flex-direction:column; gap:4px; }
.pj-client-task {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:7px;
  cursor:pointer; font-size:13px; color:var(--text);
  background:var(--bg); transition:background .12s;
}
.pj-client-task:hover { background:var(--bg2); }
.pj-client-task .done { text-decoration:line-through; color:var(--text3); }

/* Visão por Cliente — grid de cartões pra escolher */
.pj-bc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;
}
.pj-bc-card {
  display:flex; align-items:center; gap:12px;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:14px 14px;
  cursor:pointer; text-align:left; font-family:inherit;
  transition:all .18s ease;
  position:relative; overflow:hidden;
  width:100%;
}
.pj-bc-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--accent), var(--accent2,var(--accent)));
  opacity:0; transition:opacity .18s;
}
.pj-bc-card:hover { transform:translateY(-3px); border-color:var(--accent); box-shadow:0 12px 32px rgba(0,0,0,.18); }
.pj-bc-card:hover::before { opacity:1; }
.pj-bc-card:hover .pj-bc-card-arrow { color:var(--accent); transform:translateX(3px); }
.pj-bc-card.empty { opacity:.7; }
.pj-bc-card.none { background:linear-gradient(135deg, var(--bg2), var(--card)); border-style:dashed; }
.pj-bc-card-avatar {
  width:52px; height:52px; flex-shrink:0;
  border-radius:14px;
  background:linear-gradient(135deg, var(--accent), var(--accent2,#a855f7));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  border:2px solid var(--card);
}
.pj-bc-card.none .pj-bc-card-avatar { background:var(--bg3,var(--bg2)); color:var(--text3); }
.pj-bc-card-body { flex:1; min-width:0; }
.pj-bc-card-name {
  font-size:14.5px; font-weight:700; color:var(--text1,var(--text));
  margin-bottom:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pj-bc-card-sub {
  font-size:11.5px; color:var(--text3);
  margin-bottom:8px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pj-bc-card-stats { display:flex; flex-wrap:wrap; gap:5px; }
.pj-bc-mini {
  font-size:10.5px; font-weight:700;
  padding:3px 8px; border-radius:10px;
  background:var(--bg2); color:var(--text2);
  letter-spacing:.02em;
}
.pj-bc-mini.total { background:var(--accentGlow); color:var(--accent); }
.pj-bc-mini.open { background:rgba(34,197,94,.14); color:#22c55e; }
.pj-bc-mini.overdue { background:rgba(239,68,68,.14); color:#ef4444; }
.pj-bc-mini.muted { background:transparent; color:var(--text3); border:1px dashed var(--border); }
.pj-bc-card-arrow {
  font-size:18px; color:var(--text3);
  transition:all .18s; flex-shrink:0;
  margin-right:2px;
}

/* Visão detalhe (cliente selecionado) */
.pj-bc-back {
  background:var(--bg2); border:1px solid var(--border); color:var(--text2);
  padding:6px 12px; border-radius:8px; font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.pj-bc-back:hover { border-color:var(--accent); color:var(--accent); background:var(--accentGlow); }
.pj-bc-detail-hero {
  display:flex; align-items:center; gap:18px;
  background:linear-gradient(135deg, var(--card), var(--bg2));
  border:1px solid var(--border); border-radius:16px;
  padding:20px 22px; margin-bottom:18px;
}
.pj-bc-detail-avatar {
  width:78px; height:78px; flex-shrink:0;
  border-radius:18px;
  background:linear-gradient(135deg, var(--accent), var(--accent2,#a855f7));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:800;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  border:3px solid var(--card);
}
.pj-bc-detail-info { flex:1; min-width:0; }
.pj-bc-detail-name { font-size:22px; font-weight:800; color:var(--text1,var(--text)); margin-bottom:4px; }
.pj-bc-detail-sub { font-size:13px; color:var(--text3); margin-bottom:12px; }
.pj-bc-detail-stats { display:flex; flex-wrap:wrap; gap:8px; }
.pj-bc-stat {
  font-size:12px; font-weight:600;
  padding:5px 12px; border-radius:10px;
  background:var(--bg2); color:var(--text2);
}
.pj-bc-stat strong { color:var(--text1,var(--text)); margin-right:4px; font-weight:800; }
.pj-bc-stat.open strong { color:var(--accent); }
.pj-bc-stat.done strong { color:#22c55e; }
.pj-bc-stat.overdue { background:rgba(239,68,68,.12); color:#ef4444; }
.pj-bc-stat.overdue strong { color:#ef4444; }

.pj-bc-tasks-list { display:flex; flex-direction:column; gap:6px; }
.pj-bc-task-row {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  cursor:pointer; transition:all .15s;
}
.pj-bc-task-row:hover { border-color:var(--accent); transform:translateX(3px); background:var(--accentGlow); }
.pj-bc-task-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.pj-bc-task-title { flex:1; font-size:13.5px; color:var(--text1,var(--text)); font-weight:500; }
.pj-bc-task-title.done { text-decoration:line-through; color:var(--text3); }
.pj-bc-task-list { font-size:11px; color:var(--text3); font-weight:600; padding:3px 8px; border-radius:6px; background:var(--bg2); }

/* Timeline / calendar grid */
.pj-cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:6px;
}
.pj-cal-head {
  text-align:center; font-size:11px; font-weight:700;
  color:var(--text3); text-transform:uppercase;
  padding:4px 0; letter-spacing:.4px;
}
.pj-cal-cell {
  min-height:100px; padding:6px;
  background:var(--card); border:1px solid var(--border);
  border-radius:8px; overflow:hidden;
  display:flex; flex-direction:column; gap:3px;
}
.pj-cal-cell.today { border-color:var(--accent); box-shadow:0 0 0 2px rgba(99,102,241,.15); }
.pj-cal-cell.weekend { background:var(--bg); }
.pj-cal-date { font-size:11px; font-weight:700; color:var(--text2); }
.pj-cal-cell.today .pj-cal-date { color:var(--accent); }
.pj-cal-task {
  font-size:11px; padding:3px 6px;
  background:var(--bg2); border-radius:4px;
  cursor:pointer; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  color:var(--text); transition:background .12s;
}
.pj-cal-task:hover { background:var(--card); filter:brightness(.95); }
.pj-cal-task.done { opacity:.5; text-decoration:line-through; }
.pj-cal-more { font-size:10px; color:var(--text3); padding:2px 6px; }

/* Drawer toggle (hamburger) — only mobile */
.pj-drawer-toggle {
  display:none;
  position:fixed; top:8px; left:8px; z-index:120;
  width:40px; height:40px; border-radius:10px;
  background:var(--card); border:1px solid var(--border);
  color:var(--text); align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.15); cursor:pointer;
}
.pj-drawer-backdrop {
  display:none; position:fixed; inset:0; z-index:99;
  background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .22s ease;
}
.pj-drawer-backdrop.open { opacity:1; }

/* Mobile responsive */
@media (max-width: 900px) {
  /* Remove transform da tab-panel ativa pra não criar containing block que captura position:fixed do sidebar */
  .tab-panel.active { transform:none !important; }
  .pj-wrap { flex-direction:column; }
  /* Sidebar agora vira drawer off-canvas — não mais empilhado em cima */
  .pj-sidebar {
    position:fixed !important; top:0; left:0; bottom:0; z-index:100;
    width:280px !important; max-width:85vw; max-height:100vh; min-width:0;
    transform:translateX(-100%); transition:transform .25s ease;
    border-right:1px solid var(--border); border-bottom:none;
    box-shadow:4px 0 20px rgba(0,0,0,.25);
  }
  .pj-sidebar.open { transform:translateX(0); }
  .pj-drawer-toggle { display:flex; }
  .pj-drawer-backdrop.open { display:block; }
  /* Espaço pro hamburger não cobrir conteúdo */
  .pj-main { width:100%; padding-top:56px; }
  /* Fix scroll mobile: cria cadeia de alturas para pj-main ser o scroll container */
  #tab-projetos { height:calc(100dvh - 52px); }
  .pj-wrap { height:100%; min-height:0; }
  .pj-main { min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  /* Botões de visão (Lista/Kanban) ficam dentro do painel Filtros no mobile */
  .pj-view-toggle { display:none !important; }
  .pj-list-th-row { display:none !important; }
  .pj-list-tr {
    grid-template-columns:28px 1fr !important;
    grid-template-areas: "check title";
    padding:10px !important;
  }
  .pj-list-tr .pj-task-check { grid-area:check; }
  .pj-list-tr > .pj-list-cell:nth-child(2) { grid-area:title; }
  .pj-list-tr > .pj-list-cell:not(:nth-child(2)):not(:nth-child(1)) {
    grid-column:1 / -1;
    padding-left:32px; font-size:12px;
  }
  .pj-filter-bar { padding:8px 10px; gap:6px; }
  .pj-filter-search { min-width:140px; flex:1 1 100%; }
  .pj-filter-sel { font-size:12px; padding:6px 24px 6px 10px; }
  .pj-filter-btn { font-size:12px; padding:6px 10px; }
  /* Mobile: agrupa filtros num botão único */
  .pj-filter-desktop-only { display:none !important; }
  .pj-filter-mobile-only { display:inline-flex !important; align-items:center; }
  .pj-bulk-bar { flex-wrap:wrap; padding:6px 10px; }
  .pj-workload-row { grid-template-columns:1fr; }
  .pj-cal-grid { grid-template-columns:repeat(7, minmax(50px, 1fr)); overflow-x:auto; }
  .pj-cal-cell { min-height:70px; padding:4px; }
  .pj-cal-task { font-size:10px; padding:2px 4px; }
  .pj-task-modal { width:96vw !important; max-width:96vw !important; }
  .pj-modal-body { flex-direction:column; }
  .pj-modal-left, .pj-modal-right { width:100% !important; }
  .pj-notif-bell-wrap { top:8px; right:10px; }
  .pj-notif-panel { width:calc(100vw - 24px); right:12px; }
}

@media (max-width: 768px) {
  /* Modal de tarefa em tela cheia — usa dvh (dynamic viewport) pra NÃO ficar
     embaixo da URL bar / barra de navegação do iOS. Com 100vh, o iOS estica
     além da área visível e empurra a bottombar pra fora da tela.
     Fallback: svh (small viewport) garante a área SEMPRE visível. */
  .pj-modal-overlay {
    height:100svh !important;
    height:100dvh !important;
    max-height:100svh !important;
    max-height:100dvh !important;
  }
  .pj-task-modal {
    width:100% !important; max-width:100vw !important;
    height:100svh !important;
    height:100dvh !important;
    max-height:100svh !important;
    max-height:100dvh !important;
    border-radius:0 !important; margin:0 !important;
    /* Reserva espaço pra bottombar fixa não cobrir conteúdo */
    padding-bottom:0 !important;
  }
  /* Body fica com altura limitada e scroll interno; reserva espaço pra bottombar */
  .pj-modal-body {
    flex:1 1 auto !important;
    min-height:0 !important;
    flex-direction:column !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important;
  }
  .pj-modal-left { padding:16px !important; min-width:0 !important; }
  .pj-modal-right { width:100% !important; border-left:none !important; border-top:1px solid var(--border); max-height:none !important; overflow:visible !important; }
  .pj-meta-bar { flex-wrap:wrap !important; gap:6px !important; }
  .pj-meta-item { font-size:11px !important; padding:5px 8px !important; }
  .pj-modal-title-input { font-size:18px !important; }
  /* Topbar fica compacta; botão "Salvar e fechar" do topo some no mobile (existe a bottombar) */
  .pj-modal-topbar { flex-wrap:wrap; gap:6px; padding:8px 10px !important; }
  .pj-modal-topbar > div[style*="margin-left:auto"] { gap:4px !important; }
  .pj-modal-topbar .pj-btn-primary { display:none !important; }
  /* Bottom action bar — FIXED na viewport pra NUNCA ficar fora da tela */
  .pj-modal-bottombar {
    display:flex !important;
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    z-index:2010 !important;
  }
}

/* Telefone BR inválido — destaca a borda em vermelho */
input.br-phone-invalid {
  border-color:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.12) !important;
}

/* ══════════════════════════════════════════════════════
   MODAL DE CONVITE POR E-MAIL — preview profissional
═══════════════════════════════════════════════════════ */
.invite-email-modal {
  position:fixed; inset:0; z-index:9000;
  background:rgba(15,17,23,.6); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:invite-modal-in .22s ease-out;
}
@keyframes invite-modal-in {
  from { opacity:0; }
  to   { opacity:1; }
}
.invite-email-card {
  background:var(--card,#fff);
  border:1px solid var(--border,#e6e8f0);
  border-radius:16px;
  width:100%; max-width:760px;
  max-height:92vh;
  display:flex; flex-direction:column;
  box-shadow:0 32px 80px rgba(0,0,0,.45);
  overflow:hidden;
  animation:invite-card-in .28s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes invite-card-in {
  from { transform:translateY(20px) scale(.98); opacity:0; }
  to   { transform:translateY(0)    scale(1);   opacity:1; }
}
.invite-email-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:20px 24px 14px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(99,102,241,.04), transparent);
}
.invite-email-header h3 {
  margin:0; font-size:17px; font-weight:700; color:var(--text);
}
.invite-email-meta-line {
  font-size:12.5px; color:var(--text3); margin-top:4px;
}
.invite-email-meta-line strong { color:var(--text2); font-weight:600; }
.invite-email-close {
  width:32px; height:32px; border-radius:8px;
  border:none; background:transparent;
  font-size:22px; color:var(--text3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  line-height:1; transition:background .15s, color .15s;
}
.invite-email-close:hover { background:var(--bg2); color:var(--text); }

.invite-email-tabs {
  display:flex; gap:2px;
  padding:0 24px;
  background:var(--card);
  border-bottom:1px solid var(--border);
  overflow-x:auto;
}
.invite-email-tab {
  padding:11px 16px;
  border:none; background:none;
  color:var(--text3); font-size:13px; font-weight:600;
  font-family:inherit; cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
  white-space:nowrap;
}
.invite-email-tab:hover { color:var(--text2); }
.invite-email-tab.active {
  color:var(--accent); border-bottom-color:var(--accent);
}

.invite-email-body {
  flex:1; overflow-y:auto;
  background:#f0f2f8;
  padding:18px;
}
.invite-email-tab-content { display:none; }
.invite-email-tab-content.active { display:block; }

.invite-email-subject-line {
  background:#fff;
  border:1px solid #e6e8f0;
  border-radius:10px;
  padding:12px 16px;
  margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
  font-size:13px;
}
.invite-email-subject-label {
  color:#888; font-weight:600; flex-shrink:0;
}
.invite-email-subject-value {
  color:#1a1a2e; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.invite-email-render {
  background:#f8f9fc;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.invite-email-render table { max-width:100% !important; }

.invite-email-source {
  width:100%; min-height:340px;
  padding:14px;
  background:#fff;
  border:1px solid #e6e8f0;
  border-radius:10px;
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.6;
  color:#1a1a2e;
  resize:vertical;
}
.invite-email-source-mono { font-size:11.5px; min-height:380px; }

.invite-email-tip {
  padding:12px 24px;
  background:linear-gradient(90deg, rgba(99,102,241,.06), rgba(168,85,247,.04));
  border-top:1px solid var(--border);
  font-size:12.5px; color:var(--text2);
  line-height:1.55;
}
.invite-email-tip strong { color:var(--text); font-weight:700; }
.invite-email-tip em { color:var(--accent); font-style:normal; font-weight:600; }

.invite-email-actions {
  display:flex; gap:8px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:var(--card);
  flex-wrap:wrap;
}
.invite-email-btn {
  flex:1 1 auto; min-width:130px;
  padding:11px 16px;
  border:1px solid var(--border);
  border-radius:9px;
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:all .15s ease;
}
.invite-email-btn-secondary {
  background:var(--bg2); color:var(--text2);
}
.invite-email-btn-secondary:hover {
  background:var(--card); color:var(--text); border-color:var(--accent);
}
.invite-email-btn-primary {
  background:linear-gradient(135deg, var(--accent), var(--accent2,#a855f7));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 12px rgba(99,102,241,.3);
  flex:1 1 200px;
}
.invite-email-btn-primary:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(99,102,241,.4);
}
.invite-email-btn-whatsapp {
  background:linear-gradient(135deg, #25d366, #128c7e);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 12px rgba(37,211,102,.3);
}
.invite-email-btn-whatsapp:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(37,211,102,.4);
}
.invite-email-btn.invite-copied {
  background:linear-gradient(135deg, #22c55e, #16a34a) !important;
  color:#fff !important; border-color:transparent !important;
}

@media (max-width:640px) {
  .invite-email-modal { padding:0; }
  .invite-email-card {
    max-width:100%; max-height:100dvh; max-height:100svh;
    height:100dvh; height:100svh;
    border-radius:0;
  }
  .invite-email-header { padding:14px 16px 10px; }
  .invite-email-header h3 { font-size:15px; }
  .invite-email-tabs { padding:0 14px; }
  .invite-email-tab { padding:10px 12px; font-size:12px; }
  .invite-email-body { padding:12px; }
  .invite-email-tip { padding:10px 16px; font-size:12px; }
  .invite-email-actions { padding:10px 12px calc(10px + env(safe-area-inset-bottom)); gap:6px; }
  .invite-email-btn { flex:1 1 calc(50% - 4px); min-width:0; padding:10px 8px; font-size:12px; }
  .invite-email-btn-primary { flex:1 1 100%; order:-1; }
}

/* Trava scroll do documento enquanto o task modal está aberto — evita
   barra de URL do iOS aparecer/sumir e jogar a bottombar pra fora da tela.
   Usa só overflow:hidden (não position:fixed) pra não perder a posição de scroll. */
html:has(body.pj-task-open),
body.pj-task-open { overflow:hidden !important; touch-action:none; }
/* Permite scroll DENTRO do modal */
body.pj-task-open .pj-modal-body { touch-action:pan-y; }

/* Bottom action bar — escondida no desktop, mostra no mobile via media query acima */
.pj-modal-bottombar {
  display:none;
  flex-shrink:0;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
  background:var(--card);
  border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(0,0,0,.4);
  z-index:5;
}
.pj-modal-bottombar .pj-btn { flex:1; padding:13px 16px; font-size:14px; font-weight:600; }
.pj-modal-bottombar .pj-btn-secondary { flex:0 0 auto; min-width:90px; }

/* ── Mobile tap targets (≥44×44 conforme Apple HIG / Material) ── */
@media (pointer:coarse), (max-width:768px) {
  /* Botões de ícone (lápis, lixeira, etc.) */
  .pj-icon-btn { min-width:40px; min-height:40px; padding:8px; display:inline-flex; align-items:center; justify-content:center; }
  /* Checkbox de tarefa: visual permanece pequeno, área de toque aumenta via padding/halo */
  .pj-task-check, .pj-row-check {
    position:relative;
  }
  .pj-task-check::before, .pj-row-check::before {
    content:""; position:absolute; inset:-13px; border-radius:50%;
  }
  /* Linhas de tarefa: aumentar altura mínima */
  .pj-task-row, .pj-list-tr, .pj-dash-task-row { min-height:48px; }
  /* Checkbox de status / pílulas pequenas */
  .pj-meta-item { min-height:36px; padding:8px 12px !important; font-size:12.5px !important; }
  /* Avatares clicáveis e dots de prioridade */
  .pj-avatar { min-width:32px; min-height:32px; }
  /* Botões de cabeçalho */
  .main-tab, .main-tab-more-item { padding:10px 14px; min-height:44px; }
  /* Send/attach/mention do comentário (toque mínimo 40×40) */
  .pj-comment-send { min-height:44px; padding:11px 22px; font-size:14px; }
  .pj-comment-attach-btn, .pj-comment-mention-btn { min-width:40px; min-height:40px; }
  /* Notif bell */
  .pj-notif-bell { min-width:40px; min-height:40px; }
  /* KPI cards: padding maior pra clique mais confortável */
  .pj-dash-kpi { padding:18px 16px; }
  /* Sidebar items */
  .pj-list-row, .pj-nav-btn, .pj-space-row { min-height:40px; }
  /* Color options nos forms */
  .pj-color-opt { width:32px !important; height:32px !important; }
  /* Botões pequenos com inputs */
  input[type=checkbox], input[type=radio] { min-width:20px; min-height:20px; }
}

/* ── Swipe-to-complete (mobile only) ── */
.pj-swipe-wrap { position:relative; overflow:hidden; }
.pj-swipe-wrap::before {
  content:"✓ Concluir"; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:flex-start;
  padding-left:18px; font-weight:700; font-size:13px;
  color:#fff; background:linear-gradient(90deg, var(--ok, #10b981), var(--ok, #10b981) 80%, transparent);
  opacity:0; transition:opacity .15s ease; z-index:0;
}
.pj-swipe-wrap.swiping::before { opacity:1; }
.pj-swipe-wrap.swiping > * { transition:none !important; }
.pj-swipe-wrap.snap-back > * { transition:transform .25s ease !important; transform:translateX(0) !important; }
.pj-swipe-wrap.fly-out > * { transition:transform .3s ease, opacity .3s ease !important; }

/* Linha sendo arrastada (rows com data-task-id) */
[data-task-id].swiping { transition:none !important; will-change:transform; position:relative; }
[data-task-id].snap-back { transition:transform .22s ease !important; transform:translateX(0) !important; }
[data-task-id].fly-out { transition:transform .3s ease, opacity .3s ease !important; }
/* Cor de fundo de feedback (visível enquanto a linha translada) */
[data-task-id].swiping-right { box-shadow: inset 4px 0 0 0 var(--ok, #10b981); }
[data-task-id].swiping-left  { box-shadow: inset -4px 0 0 0 #f97316; }

/* ── Bottom sheet de ações rápidas (swipe esquerdo) ── */
.pj-quick-actions-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:9800; display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.pj-quick-actions-backdrop.open { opacity:1; }
.pj-quick-actions-sheet {
  width:100%; max-width:520px;
  background:var(--card); color:var(--text);
  border-top-left-radius:18px; border-top-right-radius:18px;
  padding:8px 12px max(20px, env(safe-area-inset-bottom)) 12px;
  box-shadow:0 -10px 32px rgba(0,0,0,.3);
  transform:translateY(100%); transition:transform .25s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; gap:6px;
}
.pj-quick-actions-backdrop.open .pj-quick-actions-sheet { transform:translateY(0); }
.pj-quick-actions-grip {
  align-self:center; width:38px; height:4px; border-radius:2px;
  background:var(--border); margin:6px 0 8px;
}
.pj-quick-actions-title {
  font-size:13px; color:var(--text2); padding:0 12px 6px;
  font-weight:600; line-height:1.3;
  border-bottom:1px solid var(--border); margin-bottom:4px;
}
.pj-quick-action {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; background:transparent;
  border:none; border-radius:10px;
  color:var(--text); font-size:14.5px; font-weight:500;
  cursor:pointer; text-align:left;
  transition:background .12s ease;
  font-family:inherit;
  min-height:48px;
}
.pj-quick-action:hover, .pj-quick-action:active { background:var(--bg2); }
.pj-quick-action.danger { color:#ef4444; }
.pj-quick-action.danger:hover { background:rgba(239,68,68,.1); }
.pj-quick-action.cancel {
  justify-content:center; margin-top:4px;
  background:var(--bg2); color:var(--text2); font-weight:600;
  border:1px solid var(--border);
}
.pj-quick-ic { font-size:20px; width:24px; text-align:center; }
.pj-quick-label { flex:1; }

/* ── Pull-to-refresh (mobile only) ── */
.pj-ptr-indicator {
  position:fixed; top:-50px; left:50%; transform:translateX(-50%) translateY(0);
  width:44px; height:44px; border-radius:50%;
  background:var(--card); border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center;
  z-index:6500; pointer-events:none;
  transition:transform .2s ease, opacity .2s;
  opacity:0;
}
.pj-ptr-indicator.active { opacity:1; }
.pj-ptr-indicator svg { width:22px; height:22px; }
.pj-ptr-indicator .arrow { transition:transform .15s; color:var(--accent); }
.pj-ptr-indicator.ready .arrow { transform:rotate(180deg); }
.pj-ptr-indicator.refreshing .arrow { display:none; }
.pj-ptr-indicator.refreshing .spin {
  display:block !important; color:var(--accent);
  animation:pjPtrSpin .8s linear infinite;
}
.pj-ptr-indicator .spin { display:none; }
@keyframes pjPtrSpin { to { transform:rotate(360deg); } }

/* ── Modals (new space / list / status) ── */
.pj-form-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:2100; display:none; align-items:center; justify-content:center; }
.pj-form-modal.open { display:flex; }
.pj-form-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px 24px; width:fit-content; min-width:380px; max-width:min(600px,92vw); box-shadow:0 16px 48px rgba(0,0,0,.35); }
.pj-form-card h3 { margin:0 0 14px; font-size:15px; color:var(--text); }
.pj-form-input { width:100%; padding:9px 12px; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13.5px; font-family:var(--font); outline:none; box-sizing:border-box; margin-bottom:10px; }
.pj-form-input:focus { border-color:var(--accent); }
.pj-form-row { display:flex; gap:8px; }
.pj-color-grid { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.pj-color-opt { width:24px; height:24px; border-radius:6px; cursor:pointer; border:2px solid transparent; transition:transform .1s; }
.pj-color-opt:hover { transform:scale(1.15); }
.pj-color-opt.selected { border-color:var(--text); }
.pj-form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
.pj-btn {
  padding:8px 16px; border-radius:10px; border:none;
  font-size:13px; font-family:var(--font); cursor:pointer; font-weight:700;
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease), opacity .15s;
}
.pj-btn:hover { transform:translateY(-1px); }
.pj-btn:active { transform:translateY(0); opacity:.9; }
.pj-btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,.3);
}
.pj-btn-primary:hover { box-shadow:0 6px 20px rgba(124,58,237,.45); }
.pj-btn-secondary { background:var(--bg2); color:var(--text2); border:1px solid var(--border); }
.pj-btn-sm { font-size:11px !important; padding:4px 10px !important; }
/* Status editor */
.pj-status-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.pj-status-row { display:flex; align-items:center; gap:8px; padding:6px 8px; background:var(--bg); border-radius:8px; }
/* Link / Address field buttons */
.pj-field-link-btn {
  width:28px; height:28px; border-radius:7px;
  background:rgba(99,102,241,.1); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; flex-shrink:0;
  transition:background .15s, transform .1s;
}
.pj-field-link-btn:hover { background:rgba(99,102,241,.2); transform:scale(1.08); }
/* Address autocomplete */
.pj-addr-wrap { position:relative; flex:1; display:flex; flex-direction:column; }
.pj-addr-wrap .pj-field-value { width:100%; }
.pj-addr-suggestions {
  position:absolute; top:calc(100% + 3px); left:0; right:0;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.3); z-index:9999; overflow:hidden;
  max-height:200px; overflow-y:auto; display:none;
}
.pj-addr-suggestions:not(:empty) { display:block; }
.pj-addr-sugg-item {
  padding:9px 12px; font-size:12.5px; color:var(--text2); cursor:pointer;
  border-bottom:1px solid var(--border); transition:background .1s;
  display:flex; align-items:flex-start; gap:8px;
}
.pj-addr-sugg-item:last-child { border-bottom:none; }
.pj-addr-sugg-item:hover { background:rgba(99,102,241,.08); color:var(--text); }
.pj-addr-sugg-icon { color:#ef4444; flex-shrink:0; margin-top:1px; font-size:11px; }
/* Map view */
.pj-map-wrap { display:grid; grid-template-columns:340px 1fr; gap:16px; padding:16px; align-items:start; }
.pj-map-list { display:flex; flex-direction:column; gap:8px; max-height:calc(100vh - 220px); overflow-y:auto; }
.pj-map-task-card {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:12px 14px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.pj-map-task-card:hover { border-color:var(--accent); box-shadow:0 2px 8px rgba(99,102,241,.1); }
.pj-map-task-card.selected { border-color:var(--accent); background:rgba(99,102,241,.05); }
.pj-map-task-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.pj-map-addr-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text2); margin-top:4px; }
.pj-map-open-link { margin-left:auto; font-size:11px; color:var(--accent); text-decoration:none; font-weight:600; white-space:nowrap; }
.pj-map-open-link:hover { text-decoration:underline; }
.pj-map-iframe-wrap { position:sticky; top:16px; border-radius:14px; overflow:hidden; border:1px solid var(--border); box-shadow:0 4px 20px rgba(0,0,0,.1); }
.pj-map-empty {
  padding:60px 24px; text-align:center; color:var(--text3);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:14px;
}
.pj-map-empty > div:first-child {
  font-size:44px; margin-bottom:8px;
  width:72px; height:72px; border-radius:18px;
  background:var(--bg2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}
/* Custom Fields Modal Redesign */
.pj-cf-modal-wrap { width:520px; }
.pj-cf-modal-header { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.pj-cf-modal-icon { width:38px; height:38px; border-radius:10px; background:rgba(99,102,241,.12); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.pj-cf-modal-title { font-size:16px; font-weight:700; color:var(--text); }
.pj-cf-modal-sub { font-size:12px; color:var(--text3); margin-bottom:16px; }
.pj-fields-edit-list { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; max-height:340px; overflow-y:auto; padding-right:2px; }
.pj-field-edit-row {
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; background:var(--bg); border:1px solid var(--border);
  border-radius:12px; flex-wrap:wrap;
  transition:border-color .15s, box-shadow .15s;
  cursor:default;
}
.pj-field-edit-row:hover { border-color:rgba(99,102,241,.3); box-shadow:0 2px 8px rgba(99,102,241,.08); }
.pj-field-type-icon {
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; background:rgba(99,102,241,.1); color:var(--accent);
}
.pj-field-edit-row .pj-field-name-input,
.pj-field-edit-row .pj-field-options-input,
.pj-field-edit-row .pj-field-type-select {
  padding:7px 10px; background:var(--card); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:13px; font-family:var(--font); outline:none;
  transition:border-color .15s;
}
.pj-field-edit-row .pj-field-name-input:focus,
.pj-field-edit-row .pj-field-options-input:focus { border-color:var(--accent); }
.pj-field-edit-row .pj-field-name-input { flex:1; min-width:140px; }
.pj-field-edit-row .pj-field-options-input { flex:1; min-width:160px; width:100%; margin-top:6px; }
/* Field type button (replaces native select) */
.pj-field-type-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:20px;
  border:1px solid var(--border); background:var(--card);
  color:var(--text2); font-size:12px; font-weight:600; font-family:var(--font);
  cursor:pointer; white-space:nowrap;
  transition:border-color .15s, color .15s;
}
.pj-field-type-btn:hover { border-color:var(--accent); color:var(--accent); }
/* Delete field button */
.pj-field-del-btn {
  width:28px; height:28px; border-radius:7px; border:none; background:none;
  color:var(--text3); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s; flex-shrink:0;
}
.pj-field-del-btn:hover { background:rgba(239,68,68,.1); color:#ef4444; }
/* Add field button */
.pj-cf-add-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:10px; border-radius:10px;
  border:2px dashed var(--border); background:none;
  color:var(--text3); font-size:13px; font-weight:600; font-family:var(--font);
  cursor:pointer; margin-bottom:14px;
  transition:border-color .15s, color .15s, background .15s;
}
.pj-cf-add-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(99,102,241,.04); }
.pj-status-color-dot { width:14px; height:14px; border-radius:4px; flex-shrink:0; cursor:pointer; }
.pj-status-name-input { flex:1; border:none; background:none; color:var(--text); font-size:13px; font-family:var(--font); outline:none; }
.pj-status-del { background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; }
.pj-status-order-btn { background:none; border:none; color:var(--text3); cursor:pointer; font-size:11px; padding:0 2px; line-height:1; }
.pj-status-order-btn:hover { color:var(--accent); }
.pj-status-color-input { width:28px; height:28px; padding:0; border:1px solid var(--border); border-radius:6px; cursor:pointer; background:none; flex-shrink:0; }
.pj-status-color-input::-webkit-color-swatch-wrapper { padding:2px; }
.pj-status-color-input::-webkit-color-swatch { border-radius:4px; border:none; }
.pj-status-color-input::-moz-color-swatch { border-radius:4px; border:none; }
.pj-status-bucket-select {
  flex-shrink:0; height:32px;
  padding:0 30px 0 12px;
  border:1px solid var(--border);
  border-left-width:3px;
  border-radius:8px;
  background-color:var(--bg2); color:var(--text);
  font-size:12px; font-weight:600;
  cursor:pointer;
  max-width:160px;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4.5L6 7.5L9 4.5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:12px;
  transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.pj-status-bucket-select:hover {
  background-color:color-mix(in srgb, var(--accent) 6%, var(--bg2));
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
}
.pj-status-bucket-select:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pj-status-bucket-select:active { transform:translateY(1px); }
/* Faixa lateral colorida por bucket (leitura instantânea) */
.pj-status-bucket-select[data-bucket="pending"] {
  border-left-color:#94a3b8;
  background-color:color-mix(in srgb, #94a3b8 7%, var(--bg2));
}
.pj-status-bucket-select[data-bucket="active"] {
  border-left-color:#6366f1;
  background-color:color-mix(in srgb, #6366f1 8%, var(--bg2));
}
.pj-status-bucket-select[data-bucket="closed"] {
  border-left-color:#22c55e;
  background-color:color-mix(in srgb, #22c55e 8%, var(--bg2));
}
.pj-status-bucket-select[data-bucket="pending"]:hover { background-color:color-mix(in srgb, #94a3b8 14%, var(--bg2)); }
.pj-status-bucket-select[data-bucket="active"]:hover  { background-color:color-mix(in srgb, #6366f1 14%, var(--bg2)); }
.pj-status-bucket-select[data-bucket="closed"]:hover  { background-color:color-mix(in srgb, #22c55e 14%, var(--bg2)); }
.pj-status-bucket-select option {
  background:var(--bg2); color:var(--text);
  padding:6px;
}
.pj-status-hint {
  font-size:12px; color:var(--text3);
  margin:-4px 0 12px; line-height:1.45;
}
.pj-status-hint b { color:var(--text); font-weight:600; }
@media (max-width:520px) {
  .pj-status-row { flex-wrap:wrap; }
  .pj-status-bucket-select { max-width:none; flex:1 1 100%; order:99; }
}

/* Members panel */
.pj-member-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.pj-member-info { flex:1; }
.pj-member-name { font-size:13px; font-weight:600; color:var(--text); }
.pj-member-email { font-size:11px; color:var(--text3); }
.pj-member-role { font-size:11px; padding:2px 8px; border-radius:10px; font-weight:600; }
.pj-member-role.admin { background:rgba(99,102,241,.15); color:var(--accent); }
.pj-member-role.member { background:var(--bg2); color:var(--text3); }

@media(max-width:700px){
  /* .pj-sidebar agora usa drawer off-canvas (ver bloco max-width:900px), não some mais */
  .pj-modal-right { display:none; }
  .pj-modal-left { padding:14px; }
  .pj-fields-grid { grid-template-columns:1fr; }
}

/* ── Global Search trigger button ── */
.pj-search-trigger { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:7px 14px; cursor:pointer; display:flex; align-items:center; gap:8px; color:var(--text2); font-size:13px; font-family:var(--font); transition:all .15s; width:100%; box-sizing:border-box; }
.pj-search-trigger:hover { border-color:var(--accent); color:var(--text); }

/* ── Drag between status (list view) ── */
.pj-task-row[draggable="true"] { cursor:grab; }
.pj-task-row[draggable="true"]:active { cursor:grabbing; }
.pj-task-row.pj-row-dragging { opacity:.4; }
.pj-status-group-header.pj-drop-target { background:var(--accentGlow) !important; outline:2px dashed var(--accent); outline-offset:-2px; }

/* ── Lightbox ── */
.pj-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.92); backdrop-filter:blur(8px); z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; animation:pjFadeIn .2s ease; cursor:zoom-out; }
.pj-lightbox img { max-width:90vw; max-height:90vh; object-fit:contain; border-radius:12px; box-shadow:0 24px 80px rgba(0,0,0,.8); }
.pj-lightbox-close { position:absolute; top:20px; right:24px; background:rgba(255,255,255,.15); border:none; color:#fff; font-size:24px; cursor:pointer; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.pj-lightbox-close:hover { background:rgba(255,255,255,.25); }
.pj-lightbox-caption { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.7); font-size:13px; background:rgba(0,0,0,.5); padding:6px 14px; border-radius:20px; white-space:nowrap; }

/* ============== BASE DE DADOS (CLIENTES) ============== */
#tab-base { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.bd-wrap { display:flex; flex:1; min-height:0; height:calc(100vh - 64px); background:var(--bg); overflow:hidden; }
.bd-sidebar { width:300px; min-width:300px; border-right:1px solid var(--border); background:var(--card); display:flex; flex-direction:column; height:100%; overflow:hidden; }
.bd-search-wrap { padding:14px 12px 8px; border-bottom:1px solid var(--border); flex-shrink:0; }
.bd-search-input { width:100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg2); color:var(--text); font-size:13px; outline:none; }
.bd-search-input:focus { border-color:var(--accent); }
.bd-list-actions { padding:10px 12px; border-bottom:1px solid var(--border); flex-shrink:0; }
.bd-add-btn { width:100%; padding:9px; border:none; border-radius:8px; background:linear-gradient(90deg,#a855f7,#6366f1); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.bd-add-btn:hover { opacity:.9; }
.bd-list { flex:1; overflow-y:auto; padding:6px 0; min-height:0; }
.bd-list-item { display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; border-left:3px solid transparent; transition:background .15s; }
.bd-list-item:hover { background:var(--bg2); }
.bd-list-item.active { background:var(--bg3); border-left-color:var(--accent); }
.bd-list-avatar { width:36px; height:36px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.bd-list-info { flex:1; min-width:0; }
.bd-list-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-list-sub { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bd-list-empty { padding:24px 12px; text-align:center; color:var(--text3); font-size:12px; }
.bd-field-row { display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg2); border-radius:8px; margin-bottom:8px; }
.bd-field-icon { font-size:18px; flex-shrink:0; }
.bd-field-info { flex:1; min-width:0; }
.bd-field-name { font-size:13px; font-weight:600; color:var(--text); }
.bd-field-type { font-size:11px; color:var(--text3); }
.bd-field-btn { background:none; border:1px solid var(--border); border-radius:5px; padding:3px 7px; cursor:pointer; color:var(--text2); font-size:12px; }
.bd-field-btn.danger { color:#ef4444; }
.bd-field-empty { text-align:center; color:var(--text3); padding:24px; font-size:13px; }
.bd-tipo-opt { display:flex; align-items:center; gap:10px; padding:10px 12px; border:2px solid var(--border); border-radius:8px; cursor:pointer; background:var(--bg2); transition:border-color .15s; }
.bd-tipo-opt:has(input:checked) { border-color:var(--accent); }
.bd-tipo-icon { font-size:20px; flex-shrink:0; }
.bd-tipo-label { font-size:13px; font-weight:600; color:var(--text); }

.bd-main { flex:1; overflow-y:auto; padding:0; min-height:0; min-width:0; }
.bd-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text3); font-size:14px; gap:14px; text-align:center; }

.bd-header { background:linear-gradient(135deg,var(--bd-color,#6366f1) 0%,rgba(0,0,0,.2) 100%); padding:24px; color:#fff; position:relative; }
.bd-header-inner { display:flex; align-items:center; gap:18px; }
.bd-cliente-avatar { width:80px; height:80px; border-radius:50%; background-size:cover; background-position:center; background-color:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:700; border:3px solid rgba(255,255,255,.3); flex-shrink:0; }
.bd-cliente-name { font-size:24px; font-weight:700; }
.bd-cliente-meta { font-size:13px; opacity:.85; margin-top:4px; }
.bd-header-actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.bd-action-btn { padding:7px 12px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.15); color:#fff; border-radius:7px; font-size:12px; cursor:pointer; font-weight:600; backdrop-filter:blur(10px); }
.bd-action-btn:hover { background:rgba(255,255,255,.28); }
.bd-action-btn.primary { background:#fff; color:#1a1a2e; }

.bd-health-bar { position:absolute; top:14px; right:18px; background:rgba(0,0,0,.4); padding:6px 12px; border-radius:20px; font-size:11px; color:#fff; display:flex; align-items:center; gap:8px; }
.bd-health-bar-fill { width:60px; height:5px; background:rgba(255,255,255,.3); border-radius:3px; overflow:hidden; }
.bd-health-bar-fill > div { height:100%; background:#22c55e; transition:width .3s; }

.bd-pin-note { background:linear-gradient(90deg,#fef3c7,#fde68a); color:#92400e; padding:12px 18px; font-size:13px; font-weight:500; border-bottom:1px solid #f59e0b; display:flex; align-items:center; gap:10px; }
.bd-pin-note button { background:transparent; border:none; cursor:pointer; color:#92400e; font-size:14px; opacity:.6; }
.bd-pin-note button:hover { opacity:1; }

.bd-content { padding:22px 28px; max-width:1100px; }

/* ── SECTION CARD ─────────────────────────────────────── */
.bd-section {
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  margin-bottom:14px; overflow:hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.bd-section:hover { border-color: rgba(124,58,237,.25); }
.bd-section.open { box-shadow: 0 4px 16px rgba(0,0,0,.06); border-color: rgba(124,58,237,.25); }
.bd-section-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; cursor:pointer; user-select:none;
  background:transparent;
  transition: background .15s;
}
.bd-section.open .bd-section-head { border-bottom:1px solid var(--border); }
.bd-section-head:hover { background:var(--bg2); }
.bd-section-title { font-size:14px; font-weight:700; color:var(--text1); display:flex; align-items:center; gap:10px; letter-spacing:-.2px; }
.bd-section-toggle { font-size:11px; color:var(--text3); transition: transform .2s ease; }
.bd-section-body { padding:20px 22px 22px; display:none; }
.bd-section.open .bd-section-body { display:block; animation: bdFadeIn .25s ease; }
.bd-section.open .bd-section-toggle { transform:rotate(90deg); }
@keyframes bdFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

.bd-sec-hide-btn { opacity: .35; transition: opacity .15s, background .15s, color .15s; }
.bd-section-head:hover .bd-sec-hide-btn { opacity: .8; }
.bd-sec-hide-btn:hover { background: rgba(239,68,68,.12) !important; color: #ef4444 !important; opacity:1 !important; }

/* ── SUB-BLOCK (grupo dentro da seção, removível) ─────── */
.bd-subblock {
  background: var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px 16px; margin-bottom:14px;
  transition: border-color .15s ease, background .15s ease;
}
.bd-subblock:last-child { margin-bottom:0; }
.bd-subblock:hover { border-color: rgba(124,58,237,.25); }
.bd-subblock-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.bd-subblock-label {
  font-size:10.5px; font-weight:700; letter-spacing:1.2px;
  color:var(--text3); text-transform:uppercase;
}
.bd-subblock-del {
  background:none; border:none; cursor:pointer;
  color:var(--text3); font-size:13px; padding:4px 8px; border-radius:6px;
  opacity:0; transition: opacity .15s, color .15s, background .15s;
}
.bd-subblock:hover .bd-subblock-del { opacity:.55; }
.bd-subblock-del:hover { opacity:1 !important; color:#ef4444; background:rgba(239,68,68,.1); }

/* ── GRID & FIELDS ────────────────────────────────────── */
.bd-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 18px; }
.bd-grid-1 { grid-template-columns:1fr; }
.bd-field { display:flex; flex-direction:column; gap:6px; }
.bd-field-label {
  font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px;
  color:var(--text3); font-weight:700;
}
.bd-field-value { display:flex; align-items:stretch; gap:8px; }

.bd-field-input, .bd-field-textarea {
  flex:1; padding:11px 14px; border:1px solid var(--border); border-radius:10px;
  background:var(--bg); color:var(--text1); font-size:14px; font-family:inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.bd-field-input::placeholder, .bd-field-textarea::placeholder { color:var(--text3); }
.bd-field-input:hover, .bd-field-textarea:hover { border-color: rgba(124,58,237,.3); }
.bd-field-input:focus, .bd-field-textarea:focus {
  outline:none; border-color:var(--accent);
  box-shadow: 0 0 0 3px rgba(124,58,237,.12);
}
.bd-field-textarea { min-height:72px; resize:vertical; line-height:1.5; }

.bd-copy-btn {
  width:40px; min-width:40px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--bg); border-radius:10px;
  cursor:pointer; font-size:14px; color:var(--text2); flex-shrink:0;
  transition: all .15s ease;
}
.bd-copy-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); transform:scale(1.04); }
.bd-copy-btn.ok { background:#22c55e; color:#fff; border-color:#22c55e; }

/* ── LIST ITEMS (acessos, sócios, promoções, etc) ─────── */
.bd-list-items { display:flex; flex-direction:column; gap:8px; }
.bd-list-item-row {
  display:flex; gap:8px; align-items:center; padding:8px;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  transition: border-color .15s ease;
}
.bd-list-item-row:hover { border-color: rgba(124,58,237,.25); }
.bd-list-item-row input, .bd-list-item-row select {
  flex:1; padding:8px 12px; border:1px solid transparent; border-radius:7px;
  background:var(--bg2); color:var(--text1); font-size:13px;
  transition: border-color .15s, background .15s;
}
.bd-list-item-row input:focus, .bd-list-item-row select:focus {
  outline:none; border-color:var(--accent); background:var(--card);
}
.bd-list-item-row button {
  padding:6px 10px; border:none; background:transparent; color:var(--text3);
  border-radius:7px; cursor:pointer; font-size:13px;
  transition: all .15s;
}
.bd-list-item-row button:hover { background:rgba(124,58,237,.1); color:var(--accent); }
.bd-list-item-row button[onclick*="Del"]:hover, .bd-list-item-row button:last-child:hover { background:rgba(239,68,68,.12); color:#ef4444; }

.bd-add-row-btn {
  padding:9px 14px; border:1px dashed var(--border); background:transparent;
  color:var(--text2); border-radius:10px; cursor:pointer; font-size:12.5px;
  font-weight:600; align-self:flex-start;
  transition: all .15s ease;
}
.bd-add-row-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(124,58,237,.05); transform:translateY(-1px); }

/* ── COLOR PICKER ─────────────────────────────────────── */
.bd-color-picker { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.bd-color-swatch {
  width:32px; height:32px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; box-shadow: 0 2px 4px rgba(0,0,0,.08);
  transition: transform .15s, box-shadow .15s;
}
.bd-color-swatch:hover { transform:scale(1.1); }
.bd-color-swatch.active { border-color:var(--text1); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }

/* ── TAGS ─────────────────────────────────────────────── */
.bd-tag {
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  background: rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.18);
  border-radius:999px; font-size:12px; color:var(--text1);
  margin-right:6px; margin-bottom:6px; font-weight:500;
  transition: border-color .15s;
}
.bd-tag:hover { border-color:var(--accent); }
.bd-tag-x { cursor:pointer; opacity:.5; font-size:11px; transition: opacity .15s, color .15s; }
.bd-tag-x:hover { opacity:1; color:#ef4444; }

/* ── APRENDIZADOS / AVISOS ────────────────────────────── */
.bd-aprendizado {
  padding:11px 14px; background:var(--bg);
  border-left:3px solid var(--accent); border-radius:0 10px 10px 0;
  font-size:13px; color:var(--text1); margin-bottom:8px;
  display:flex; align-items:center; gap:10px;
  border-top:1px solid var(--border); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  transition: border-color .15s;
}
.bd-aprendizado:hover { border-color: rgba(124,58,237,.3); }
.bd-aprendizado-text { flex:1; }
.bd-aprendizado-date { font-size:10.5px; color:var(--text3); font-weight:600; }
.bd-aprendizado-x { cursor:pointer; opacity:.4; transition: opacity .15s, color .15s; padding:4px; border-radius:6px; }
.bd-aprendizado-x:hover { opacity:1; color:#ef4444; background:rgba(239,68,68,.08); }

.bd-aviso {
  padding:11px 14px; background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.3); border-radius:10px;
  font-size:13px; color:var(--text1); margin-bottom:8px;
  display:flex; align-items:center; gap:10px;
}
.bd-aviso.due { background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.4); }
.bd-aviso-text { flex:1; }

/* ── PHOTO UPLOAD ─────────────────────────────────────── */
.bd-photo-upload {
  width:80px; height:80px; border-radius:50%;
  border:2px dashed var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden;
  background-size:cover; background-position:center; flex-shrink:0;
  transition: border-color .2s, transform .15s;
}
.bd-photo-upload:hover { border-color:var(--accent); transform:scale(1.03); }
.bd-photo-upload input { display:none; }

/* ── CHECKBOXES (estilo pill) ─────────────────────────── */
.bd-checkbox-group { display:flex; flex-wrap:wrap; gap:8px; }
.bd-checkbox-group label {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:var(--bg); border:1px solid var(--border);
  font-size:13px; color:var(--text1); cursor:pointer;
  user-select:none;
  transition: all .15s ease;
}
.bd-checkbox-group label:hover { border-color: rgba(124,58,237,.4); transform:translateY(-1px); }
.bd-checkbox-group input[type="checkbox"] {
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; border-radius:5px;
  border:1.5px solid var(--text3); background:transparent;
  cursor:pointer; position:relative; flex-shrink:0;
  transition: all .15s;
}
.bd-checkbox-group input[type="checkbox"]:checked {
  background:var(--accent); border-color:var(--accent);
}
.bd-checkbox-group input[type="checkbox"]:checked::after {
  content:'✓'; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); color:#fff; font-size:11px; font-weight:800; line-height:1;
}
.bd-checkbox-group label:has(input:checked) {
  background: rgba(124,58,237,.1);
  border-color: var(--accent);
  color: var(--accent);
  font-weight:600;
}

/* Botão voltar (visível só em mobile dentro da view de detalhes) */
.bd-back-mobile {
  display:none;
  align-items:center; gap:6px;
  background:var(--card); border:1px solid var(--border); color:var(--text1);
  padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600;
  cursor:pointer; margin:12px 12px 4px; font-family:inherit;
  transition:border-color .15s, color .15s, background .15s;
}
.bd-back-mobile:hover { border-color:var(--accent); color:var(--accent); }

@media (max-width:900px) {
  .bd-wrap { flex-direction:column; height:auto; min-height:calc(100vh - 64px); position:relative; overflow:visible; }
  .bd-sidebar { width:100%; min-width:0; max-height:none; height:auto; overflow:visible; }
  .bd-grid { grid-template-columns:1fr; }

  /* Toggle list/detail no mobile:
     - estado padrão: mostra lista, esconde detalhe
     - .bd-show-detail: esconde lista, mostra detalhe full-screen */
  .bd-wrap > .bd-main { display:none !important; }
  .bd-wrap.bd-show-detail > .bd-sidebar { display:none !important; }
  .bd-wrap.bd-show-detail > .bd-main { display:block !important; }

  .bd-back-mobile { display:inline-flex; }

  /* Lista ocupa toda a área disponível pra rolar tranquilo */
  .bd-list { max-height:none; overflow:visible; }
}

/* ─────────────────────────────────────────────────────────
   Polimento mobile (≤640px) — header sem corte, dashboard
   compacto, listas/inbox sem desperdício de espaço.
   ───────────────────────────────────────────────────────── */
@media (max-width:640px) {
  /* HEADER: linha única, sem subtitle, tudo apertado */
  .app-header {
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:6px !important;
    padding:8px 10px 8px 56px !important; /* 56px = espaço pro hamburger */
    min-height:52px;
  }
  .app-logo { gap:6px; min-width:0; flex:0 1 auto; overflow:hidden; }
  .app-logo > div:not(.app-logo-icon) { min-width:0; overflow:hidden; }
  .app-logo-icon { width:28px; height:28px; border-radius:0; flex-shrink:0; }
  .app-logo-text { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Casinha aparece em mobile pra voltar pra Gestão Central */
  .app-home-btn { display:inline-flex; width:32px; height:32px; }
  /* Esconde casinha quando já estamos em Gestão Central — não tem pra onde voltar */
  body[data-active-tab="projetos"] .app-home-btn { display:none; }
  .app-logo-sub { display:none; } /* subtítulo somem no celular */
  /* Grupo da direita (tabs + sync + avatar) com scroll horizontal interno se preciso */
  .app-header > div:not(.app-logo) {
    margin-left:auto;
    flex:0 1 auto;
    min-width:0;
    gap:6px !important;
  }
  .main-tabs { padding:2px; gap:2px; flex-shrink:1; min-width:0; }
  .main-tab { padding:6px 9px !important; font-size:11.5px !important; min-height:32px; }
  .main-tab svg { display:none; }
  /* User chip: avatar + nome, encolhe se precisar mas mantém o nome visível */
  .user-chip { align-self:auto; padding:3px 8px 3px 3px; font-size:11.5px; flex-shrink:1; min-width:0; max-width:55%; }
  .user-chip .user-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sync-dot { width:8px; height:8px; flex-shrink:0; }
  /* Botões secundários do header no mobile: visíveis mas compactos.
     Mantém acesso a 🏢 Base de Dados, 🌙 Tema e ⚙️ Configurações. */
  .app-header .theme-picker-btn,
  .app-header .app-uazapi-status {
    width:30px !important; height:30px !important;
    flex-shrink:0; padding:0 !important;
  }
  .app-header .theme-picker-btn svg,
  .app-header .app-uazapi-status svg { width:14px; height:14px; }
  .app-header .app-presence { display:none !important; }
  /* User chip cede espaço pros ícones */
  .user-chip { max-width:38% !important; }
  .user-chip .user-name { display:none; } /* mobile: só avatar — espaço pros ícones */

  /* CLIENTE BAR (sticky com dropdown) */
  .restaurant-sticky { padding:8px 10px; gap:8px; }
  .restaurant-sticky label { font-size:11px; }

  /* CONTEÚDO geral */
  .app-content { padding:10px !important; }

  /* DASHBOARD compacto */
  .pj-dash-wrap { padding:12px !important; }
  .pj-dash-header { margin-bottom:14px !important; gap:8px !important; }
  .pj-dash-greet { font-size:17px !important; }
  .pj-dash-date { font-size:11px; margin-top:2px; }
  .pj-dash-filter-chip { font-size:10.5px; padding:3px 8px 3px 9px; margin-left:0; }
  .pj-dash-filter-chip button { font-size:13px; }
  .pj-dash-kpis { gap:8px !important; margin-bottom:14px; grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .pj-dash-kpi { padding:12px 12px !important; border-radius:14px; }
  .pj-dash-kpi-icon { font-size:16px; }
  .pj-dash-kpi-val { font-size:24px !important; }
  .pj-dash-kpi-arrow { display:none; }
  .pj-dash-kpi-label { font-size:10px !important; letter-spacing:.04em; }
  .pj-dash-kpi-sub { font-size:10px; margin-top:2px; }
  .pj-dash-kpi-spark { height:18px; margin-top:6px; }
  .pj-dash-trio, .pj-dash-grid { gap:12px !important; }
  .pj-dash-col { padding:14px !important; border-radius:14px; }
  .pj-dash-section-title { margin-bottom:8px !important; font-size:11px !important; }
  .pj-dash-section-count { font-size:10px; padding:1px 6px; }
  .pj-dash-task-row { padding:8px 8px !important; gap:8px; }
  .pj-dash-task-title { font-size:12.5px; }
  .pj-dash-task-meta { font-size:10.5px; }
  .pj-dash-empty { font-size:11.5px; padding:10px 0; }
  .pj-dash-see-all { font-size:11px; padding:6px 8px; }
  .pj-dash-member { padding:14px !important; border-radius:14px; }
  .pj-dash-member-name { font-size:12.5px; }
  .pj-dash-member-role { font-size:10px; }
  .pj-dash-member-stats { gap:6px; font-size:10.5px; }

  /* INBOX (Caixa de Entrada) */
  .pj-view-header { padding:10px 12px !important; gap:8px !important; flex-wrap:wrap; }
  .pj-view-title { font-size:16px !important; }
  .pj-wa-trigger-btn { padding:7px 12px !important; font-size:11.5px !important; }
  .pj-inbox-section { margin-bottom:14px; }
  .pj-inbox-section-title { font-size:12px; padding:6px 4px; gap:6px; }
  .pj-inbox-count-badge { font-size:10px; padding:1px 6px; }

  /* LISTAS de tarefa (cards) — modo limpo no mobile:
     só título + status (dot pequeno) + vencimento. Esconde prioridade/avatares. */
  .pj-task-row { padding:12px 14px; gap:10px; }
  .pj-list-tr { padding:10px !important; }
  .pj-task-row .pj-priority { display:none !important; }
  .pj-task-row .pj-task-assignees { display:none !important; }
  /* Status dot fica menor mas continua clicável */
  .pj-task-row .pj-status-dot { width:14px !important; height:14px !important; }
  /* Vencimento mais compacto */
  .pj-task-row .pj-task-due { font-size:11px !important; padding:2px 6px !important; }
  /* Indica que a linha é tocável (chevron sutil à direita) */
  .pj-task-row::after {
    content:"›"; color:var(--text3); font-size:18px;
    margin-left:auto; padding-left:4px;
    flex-shrink:0; opacity:.5;
  }
  .pj-task-row > div:last-child { gap:6px !important; }
  /* Título pega até 2 linhas pra evitar truncar */
  .pj-task-row .pj-task-title-text {
    white-space:normal !important;
    overflow:visible !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    line-height:1.35;
  }

  /* RELATÓRIO DO DIA / botões trigger no header de lista */
  .pj-view-header > div[style*="margin-left"] { gap:6px !important; }
}

/* ≤480px: tabs viram só ícones (🎯 / ⊞) pra liberar espaço pro nome
   sem tirar acesso a Métricas, Bots, Equipe etc. (Ferramentas ▾) */
@media (max-width:480px) {
  .app-logo-text { display:none; } /* só o ícone 🔥 fica */
  /* Esconde labels textuais das tabs principais — só emoji + setinha do dropdown */
  .main-tab .main-tab-label { display:none; }
  .main-tab { padding:6px 8px !important; font-size:14px !important; min-height:32px; }
  .main-tabs { gap:1px; }
  .pj-dash-greet { font-size:16px !important; }
  .pj-dash-kpi-val { font-size:22px !important; }
  /* Chip só com avatar (sem nome) pra liberar espaço pros ícones */
  .user-chip { max-width:none; font-size:12px; padding:3px; }
  .user-chip .user-name { display:none; }
  /* Ícones do header ainda menores em telas bem estreitas */
  .app-header .theme-picker-btn,
  .app-header .app-uazapi-status { width:28px !important; height:28px !important; }
}

/* Fine-tuning pra telas bem pequenas (iPhone SE / Android entry) */
@media (max-width:380px) {
  .pj-dash-wrap { padding:10px !important; }
  .pj-dash-col { padding:12px !important; }
  .main-tab { padding:5px 6px !important; font-size:13px !important; }
  .user-chip { max-width:42%; }
}

/* ──────────────────────────────────────────────────────────
   Pergunte à IA — chat panel em Gestão Central
   ────────────────────────────────────────────────────────── */
.pj-askai-nav .pj-askai-pill {
  margin-left:auto; font-size:9px; font-weight:700; letter-spacing:.5px;
  background:linear-gradient(135deg, #f97316, #ec4899);
  color:#fff; padding:2px 6px; border-radius:8px; text-transform:uppercase;
}
.pj-askai-wrap {
  display:flex; flex-direction:column; height:100%; min-height:0;
}
.pj-askai-wrap .pj-view-header { flex:0 0 auto; }
.pj-askai-body {
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:10px;
  padding:14px; overflow:hidden;
}
.pj-askai-ctxbadge {
  font-size:11px; color:var(--text3);
  background:var(--bg2); border:1px solid var(--border);
  padding:4px 10px; border-radius:999px;
}
.pj-askai-warn {
  background:color-mix(in srgb, var(--warn,#f59e0b) 15%, var(--bg2));
  border:1px solid color-mix(in srgb, var(--warn,#f59e0b) 40%, var(--border));
  color:var(--text1);
  padding:10px 14px; border-radius:10px; font-size:13px;
}
.pj-askai-msgs {
  flex:1 1 auto; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px;
  padding:14px; border:1px solid var(--border); border-radius:14px;
  background:var(--bg);
  scroll-behavior:smooth;
}
.pj-askai-empty {
  margin:auto; text-align:center; max-width:420px; padding:20px;
}
.pj-askai-empty-emoji { font-size:42px; margin-bottom:8px; }
.pj-askai-empty-title { font-size:15px; font-weight:600; color:var(--text1); margin-bottom:4px; }
.pj-askai-empty-sub { font-size:12px; color:var(--text3); }
.pj-askai-msg {
  display:flex; gap:10px; align-items:flex-start;
  animation:pjAskAiIn .25s ease;
}
@keyframes pjAskAiIn {
  from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:translateY(0); }
}
.pj-askai-msg.user { flex-direction:row-reverse; }
.pj-askai-avatar {
  flex:0 0 auto; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:16px;
  background:var(--bg2); border:1px solid var(--border);
}
.pj-askai-msg.user .pj-askai-avatar {
  background:linear-gradient(135deg, var(--accent), var(--accent2,#8b5cf6));
  border-color:transparent;
}
.pj-askai-bubble {
  max-width:78%;
  background:var(--bg2); border:1px solid var(--border);
  padding:10px 14px; border-radius:14px;
  color:var(--text1); font-size:13.5px; line-height:1.55;
}
.pj-askai-msg.user .pj-askai-bubble {
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 20%, var(--bg2)), var(--bg2));
  border-color:color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius:14px 14px 4px 14px;
}
.pj-askai-msg.bot .pj-askai-bubble {
  border-radius:14px 14px 14px 4px;
}
.pj-askai-bubble.pending {
  opacity:.7; font-style:italic;
}
.pj-askai-bubble { position:relative; }
.pj-askai-copy {
  position:absolute; top:6px; right:6px;
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--border);
  color:var(--text2); border-radius:6px;
  cursor:pointer; opacity:0;
  transition:opacity .15s ease, color .15s ease, background .15s ease, border-color .15s ease;
}
.pj-askai-msg.bot:hover .pj-askai-copy { opacity:.9; }
.pj-askai-copy:hover { color:var(--accent); border-color:var(--accent); background:var(--bg2); }
.pj-askai-copy.copied { color:#22c55e; border-color:#22c55e; opacity:1; }
.pj-askai-bubble p { margin:0 0 8px 0; }
.pj-askai-bubble p:last-child { margin-bottom:0; }
.pj-askai-bubble h1 { font-size:16px; margin:8px 0 6px; }
.pj-askai-bubble h2 { font-size:15px; margin:8px 0 6px; }
.pj-askai-bubble h3 { font-size:14px; margin:6px 0 4px; color:var(--accent); }
.pj-askai-bubble strong { font-weight:700; color:var(--text); }
.pj-askai-bubble em { color:var(--text2); }
.pj-askai-bubble code {
  background:var(--bg); border:1px solid var(--border);
  padding:1px 6px; border-radius:5px; font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pj-askai-bubble pre.pj-askai-code {
  background:var(--bg); border:1px solid var(--border);
  padding:10px; border-radius:8px; font-size:12px;
  overflow-x:auto; margin:6px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pj-askai-bubble .pj-askai-ul,
.pj-askai-bubble .pj-askai-ol { margin:6px 0; padding-left:20px; }
.pj-askai-bubble .pj-askai-ul li,
.pj-askai-bubble .pj-askai-ol li { margin:3px 0; }
.pj-askai-bubble a { color:var(--accent); text-decoration:underline; }
.pj-askai-bubble .pj-askai-tablewrap { overflow-x:auto; margin:8px 0; border:1px solid var(--border); border-radius:8px; }
.pj-askai-bubble .pj-askai-table {
  width:100%; border-collapse:collapse; font-size:12.5px;
}
.pj-askai-bubble .pj-askai-table th,
.pj-askai-bubble .pj-askai-table td {
  padding:6px 10px; text-align:left; border-bottom:1px solid var(--border);
}
.pj-askai-bubble .pj-askai-table th {
  background:var(--bg); font-weight:700; color:var(--text);
  position:sticky; top:0;
}
.pj-askai-bubble .pj-askai-table tr:last-child td { border-bottom:none; }
.pj-askai-bubble .pj-askai-table tr:hover td { background:color-mix(in srgb, var(--accent) 6%, transparent); }

/* Ações executáveis nas respostas da IA */
.pj-askai-actions {
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:10px; padding-top:10px;
  border-top:1px dashed color-mix(in srgb, var(--accent) 22%, var(--border));
}
.pj-askai-action-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:color-mix(in srgb, var(--accent) 10%, var(--bg2));
  border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  color:var(--text); font-size:12px; font-weight:600;
  padding:6px 11px; border-radius:999px; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
  line-height:1.2;
}
.pj-askai-action-btn:hover {
  background:color-mix(in srgb, var(--accent) 18%, var(--bg2));
  border-color:var(--accent);
  transform:translateY(-1px);
}
.pj-askai-action-btn:active { transform:translateY(0); }
.pj-askai-action-btn svg { opacity:.65; transition:transform .12s ease, opacity .15s ease; }
.pj-askai-action-btn:hover svg { opacity:1; transform:translateX(2px); }

.pj-askai-suggest {
  display:flex; flex-wrap:wrap; gap:6px;
}
.pj-askai-chip {
  background:var(--bg2); border:1px solid var(--border); color:var(--text2);
  padding:6px 12px; border-radius:999px; font-size:12px; cursor:pointer;
  transition:all .15s ease;
}
.pj-askai-chip:hover {
  border-color:var(--accent); color:var(--text);
  background:color-mix(in srgb, var(--accent) 10%, var(--bg2));
  transform:translateY(-1px);
}
.pj-askai-inputbar {
  display:flex; gap:8px; align-items:flex-end;
  padding:8px; background:var(--bg2);
  border:1px solid var(--border); border-radius:14px;
}
.pj-askai-inputbar:focus-within {
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pj-askai-input {
  flex:1; min-height:36px; max-height:160px;
  border:none; background:transparent; color:var(--text1);
  font-size:14px; padding:8px 10px; resize:none; outline:none;
  font-family: inherit;
}
.pj-askai-input::placeholder { color:var(--text3); }
.pj-askai-input:disabled { opacity:.5; cursor:not-allowed; }
.pj-askai-send {
  flex:0 0 auto;
  background:linear-gradient(135deg, var(--accent), var(--accent2,#8b5cf6));
  color:#fff; border:none; border-radius:10px;
  padding:8px 16px; font-size:13px; font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:transform .15s ease, opacity .15s ease;
}
.pj-askai-send:hover:not(:disabled) { transform:translateY(-1px); }
.pj-askai-send:disabled { opacity:.5; cursor:not-allowed; }
.pj-askai-hint {
  font-size:11px; color:var(--text3); text-align:center;
  padding:0 4px;
}

@media (max-width: 700px) {
  .pj-askai-bubble { max-width:90%; font-size:13px; }
  .pj-askai-suggest { gap:4px; }
  .pj-askai-chip { padding:5px 10px; font-size:11px; }
  .pj-askai-action-btn { font-size:11px; padding:5px 9px; }
}

/* ──────────────────────────────────────────────────────────
   Status pill na list view — substitui a bolinha pequena
   por um botão claramente clicável (cor do status + label + chevron)
   ────────────────────────────────────────────────────────── */
.pj-status-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px 4px 8px;
  border-radius:999px;
  font-size:11.5px; font-weight:600;
  cursor:pointer;
  background:color-mix(in srgb, var(--c) 14%, var(--bg2));
  color:color-mix(in srgb, var(--c) 75%, var(--text));
  border:1px solid color-mix(in srgb, var(--c) 30%, var(--border));
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
  max-width:100%;
}
.pj-status-pill:hover {
  background:color-mix(in srgb, var(--c) 22%, var(--bg2));
  border-color:color-mix(in srgb, var(--c) 50%, var(--border));
  transform:translateY(-1px);
}
.pj-status-pill:active { transform:translateY(0); }
.pj-status-pill-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--c);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent);
  flex:0 0 auto;
}
.pj-status-pill-label {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:120px;
}
.pj-status-pill-arrow {
  opacity:.55; flex:0 0 auto;
  transition:opacity .15s ease, transform .15s ease;
}
.pj-status-pill:hover .pj-status-pill-arrow { opacity:.9; transform:translateY(1px); }

@media (max-width: 700px) {
  .pj-status-pill-label { max-width:80px; font-size:11px; }
  .pj-status-pill { padding:3px 8px 3px 7px; }
}

/* ── Modo Foco (distração-zero) ─────────────────────────────── */
.pj-focus-toggle {
  appearance:none; border:0; background:transparent;
  color:var(--muted); cursor:pointer;
  width:28px; height:28px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  margin-right:4px;
}
.pj-focus-toggle:hover { background:var(--hover); color:var(--text); }
.pj-focus-toggle.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* Pill flutuante para sair do foco — só visível em focus mode */
.pj-focus-exit-pill {
  display:none;
  position:fixed; top:14px; right:14px;
  z-index: 1000;
  appearance:none; cursor:pointer;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  align-items:center; gap:7px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, background .15s ease;
}
.pj-focus-exit-pill kbd {
  font-family: inherit;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--hover);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  margin-left: 2px;
}
.pj-focus-exit-pill:hover {
  background: color-mix(in srgb, var(--card) 80%, var(--accent) 20%);
}

/* Estado focus mode ATIVO ───────────────────────────────────── */
/* Desktop: colapsa largura da sidebar para liberar o flexbox */
body.pj-focus .pj-sidebar {
  width: 0 !important;
  min-width: 0 !important;
  border-right: 0 !important;
  overflow: hidden;
  pointer-events: none;
  transition: width .28s cubic-bezier(.4,0,.2,1), min-width .28s cubic-bezier(.4,0,.2,1);
}
body.pj-focus .pj-main {
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
  transition: max-width .28s cubic-bezier(.4,0,.2,1);
}
body.pj-focus .pj-fab,
body.pj-focus .pj-drawer-toggle,
body.pj-focus .pj-notif-bell,
body.pj-focus .pj-notif-panel,
body.pj-focus .pj-drawer-backdrop {
  display: none !important;
}
body.pj-focus .pj-focus-exit-pill {
  display: inline-flex;
  opacity: 1;
  transform: translateY(0);
}
/* Esconde elementos puramente decorativos no header das views */
body.pj-focus .pj-dash-greeting,
body.pj-focus .pj-dash-quick-quote,
body.pj-focus .pj-dash-celebrate-banner {
  display: none !important;
}
/* Remove sombras/borders extras do main pra ficar mais limpo */
body.pj-focus .pj-main { background: var(--bg); }
body.pj-focus { overflow-x: hidden; }

/* Mobile: na sidebar fixed o drawer toggle some, então sidebar já fica inacessível.
   Só ajusta a posição e tamanho do pill de saída. */
@media (max-width: 700px) {
  .pj-focus-exit-pill { top: 10px; right: 10px; padding: 7px 12px 7px 10px; font-size: 11.5px; }
  .pj-focus-exit-pill kbd { display: none; }
}

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  body.pj-focus .pj-sidebar,
  body.pj-focus .pj-main,
  .pj-focus-exit-pill { transition: none !important; }
}

/* ── List view → card mode em telas estreitas ────────────────
   Em <600px o grid é convertido em cards stackados (mais legível
   com o polegar). O cabeçalho da tabela some, célula vazia ("—") é
   ocultada, e o checkbox de conclusão vai pro canto superior esquerdo.
*/
@media (max-width: 600px) {
  /* Esconde header da tabela */
  .pj-list-th-row { display: none !important; }

  /* Card */
  .pj-list-tr {
    display: flex !important;        /* override do display:grid base */
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 14px 14px 14px 44px !important;  /* espaço pra check absoluto, override do 900px rule */
    border-radius: 12px;
    margin-bottom: 8px;
    grid-template-columns: none !important;   /* anula grid-template inline */
    grid-template-areas: none !important;     /* anula areas do 900px rule */
  }
  /* Reset áreas do 900px rule pras células */
  .pj-list-tr .pj-task-check,
  .pj-list-tr > .pj-list-cell:nth-child(2),
  .pj-list-tr > .pj-list-cell:not(:nth-child(2)):not(:nth-child(1)) {
    grid-area: auto !important;
    grid-column: auto !important;
    padding-left: 0 !important;
  }
  .pj-list-tr:hover { transform: none; } /* sem hover lift no toque */

  /* Checkbox absoluto no canto */
  .pj-list-tr .pj-task-check {
    position: absolute;
    left: 12px;
    top: 14px;
    z-index: 1;
  }
  .pj-list-tr .pj-sel-circle { opacity: 1; } /* sempre visível em mobile */

  /* Título ocupa linha inteira */
  .pj-list-tr .pj-list-cell.title {
    flex: 1 0 100%;
    width: 100%;
    font-size: 14.5px;
    line-height: 1.35;
    white-space: normal;
  }
  .pj-list-tr .pj-list-title-text {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }

  /* Demais células ficam em linha de meta-info */
  .pj-list-tr .pj-list-cell:not(.title) {
    flex: 0 0 auto;
    font-size: 12px;
    min-width: 0;
  }

  /* Esconde células que só contêm "—" (campo vazio) */
  .pj-list-tr .pj-list-cell:not(.title):has(> .pj-cell-empty:only-child) {
    display: none !important;
  }

  /* Melhora touch target do título */
  .pj-list-tr { min-height: 56px; }

  /* Status group e botão "+ Adicionar tarefa" continuam normais.
     Filter bar mantém comportamento padrão. */
}

/* ── Heatmap de atividade (estilo GitHub) ──────────────────── */
.pj-activity-heatmap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin-bottom: 18px;
}
.pj-heat-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.pj-heat-title { font-size: 13.5px; font-weight: 600; color: var(--text); }
.pj-heat-stats {
  display:flex; align-items:center; gap:6px;
  font-size: 12px; color: var(--text3);
}
.pj-heat-stats strong { color: var(--text2); font-weight: 700; }
.pj-heat-stats .sep { opacity: .4; }

.pj-heat-grid-wrap {
  display: flex; gap: 8px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 4px;
}
.pj-heat-day-labels {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
  font-size: 9px; color: var(--text3);
  margin-top: 16px;
  padding-right: 2px;
  flex-shrink: 0;
}
.pj-heat-day-labels span {
  height: 14px; line-height: 14px;
  text-align: right;
}

.pj-heat-grid-inner { flex: 1; min-width: 0; }
.pj-heat-months {
  display: grid;
  grid-template-columns: repeat(12, 14px);
  gap: 3px;
  font-size: 10px; color: var(--text3);
  margin-bottom: 4px;
  text-transform: capitalize;
  height: 12px;
}
.pj-heat-month { font-size: 10px; white-space: nowrap; }

.pj-heat-grid {
  display: grid;
  grid-template-columns: repeat(12, 14px);
  gap: 3px;
}
.pj-heat-col {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  gap: 3px;
}
.pj-heat-cell {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text3) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--text3) 6%, transparent);
  transition: transform .12s ease, outline .12s ease;
  cursor: default;
}
.pj-heat-cell:hover {
  transform: scale(1.3);
  outline: 1.5px solid var(--accent);
  outline-offset: 1px;
  z-index: 1; position: relative;
}
.pj-heat-cell.lvl-0 { background: color-mix(in srgb, var(--text3) 12%, transparent); }
.pj-heat-cell.lvl-1 { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.pj-heat-cell.lvl-2 { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.pj-heat-cell.lvl-3 { background: color-mix(in srgb, var(--accent) 80%, transparent); }
.pj-heat-cell.lvl-4 { background: var(--accent); border-color: var(--accent); }
.pj-heat-cell.future {
  background: transparent;
  border: 1px dashed color-mix(in srgb, var(--text3) 25%, transparent);
}

.pj-heat-legend {
  display: flex; align-items: center; gap: 4px;
  margin-top: 12px;
  font-size: 10.5px; color: var(--text3);
  justify-content: flex-end;
}
.pj-heat-legend .pj-heat-cell {
  width: 11px; height: 11px;
  cursor: default;
}
.pj-heat-legend .pj-heat-cell:hover {
  transform: none; outline: none;
}

@media (max-width: 600px) {
  .pj-activity-heatmap { padding: 12px 14px 12px; }
  .pj-heat-day-labels { font-size: 8.5px; }
  .pj-heat-cell { width: 12px; height: 12px; }
  .pj-heat-day-labels { grid-template-rows: repeat(7, 12px); }
  .pj-heat-col { grid-template-rows: repeat(7, 12px); }
  .pj-heat-grid, .pj-heat-months { grid-template-columns: repeat(12, 12px); }
}

/* ── Cycle time por status ────────────────────────────────── */
.pj-cycle-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 4px;
  transition: background .12s ease;
}
.pj-cycle-row:hover { background: var(--hover); }
.pj-cycle-row.bottleneck {
  background: color-mix(in srgb, #f97316 6%, transparent);
}
.pj-cycle-row.bottleneck:hover {
  background: color-mix(in srgb, #f97316 12%, transparent);
}
.pj-cycle-status {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.pj-cycle-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, #6366f1) 25%, transparent);
  flex: 0 0 auto;
}
.pj-cycle-name {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pj-cycle-warn {
  font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  background: color-mix(in srgb, #f97316 18%, transparent);
  color: #f97316;
  white-space: nowrap;
}
.pj-cycle-bar {
  height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--text3) 12%, transparent);
  overflow: hidden;
  min-width: 80px;
}
.pj-cycle-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.pj-cycle-meta {
  font-size: 11.5px; color: var(--text3);
  white-space: nowrap;
}
.pj-cycle-meta strong { color: var(--text2); font-weight: 700; }

@media (max-width: 700px) {
  .pj-cycle-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .pj-cycle-bar { min-width: 0; }
}

/* ── Dashboard customizável ───────────────────────────────── */
.pj-dash-customize-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 8px;
  cursor: pointer;
  transition: all .12s ease;
}
.pj-dash-customize-btn:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  transform: translateY(-1px);
}

.pj-dash-widget {
  margin-bottom: 18px;
}
.pj-dash-widget:last-child { margin-bottom: 0; }

.pj-dash-customize-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: pjFadeIn .15s ease;
}
@keyframes pjFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pj-dash-customize-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  animation: pjScaleIn .2s cubic-bezier(.4,0,.2,1);
}
@keyframes pjScaleIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
.pj-dash-customize-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pj-dash-customize-close {
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text3);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.pj-dash-customize-close:hover { background: var(--hover); color: var(--text); }
.pj-dash-customize-list {
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pj-dash-customize-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--text3) 4%, transparent);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all .12s ease;
}
.pj-dash-customize-item.off {
  opacity: .55;
  background: transparent;
}
.pj-dash-customize-grip {
  color: var(--text3);
  font-size: 16px;
  cursor: grab;
  user-select: none;
}
.pj-dash-customize-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.pj-dash-customize-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pj-dash-customize-actions button {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s ease;
}
.pj-dash-customize-actions button:hover:not([disabled]) {
  background: var(--hover);
  color: var(--text);
}
.pj-dash-customize-actions button[disabled] {
  opacity: .3;
  cursor: not-allowed;
}
.pj-dash-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.pj-dash-toggle input {
  opacity: 0;
  width: 0; height: 0;
  position: absolute;
}
.pj-dash-toggle-slider {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--text3) 30%, transparent);
  border-radius: 20px;
  transition: background .2s ease;
}
.pj-dash-toggle-slider::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: white;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.pj-dash-toggle input:checked + .pj-dash-toggle-slider {
  background: var(--accent);
}
.pj-dash-toggle input:checked + .pj-dash-toggle-slider::before {
  transform: translateX(16px);
}
.pj-dash-customize-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.pj-dash-customize-reset,
.pj-dash-customize-done {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: all .12s ease;
}
.pj-dash-customize-reset {
  background: transparent;
  color: var(--text3);
}
.pj-dash-customize-reset:hover {
  color: var(--text);
  background: var(--hover);
}
.pj-dash-customize-done {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.pj-dash-customize-done:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ── Real-time presence (viewers) ─────────────────────────── */
.pj-task-viewers {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  z-index: 5;
  pointer-events: none;
}
.pj-viewer-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  margin-right: 4px;
  box-shadow: 0 0 0 0 rgba(16,185,129,.7);
  animation: pjViewerPulse 1.6s ease-out infinite;
}
@keyframes pjViewerPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
  70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.pj-viewer-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--bg, #fff);
  background: var(--accent);
  color: white;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  pointer-events: auto;
}
.pj-viewer-dot:first-child { margin-left: 0; }
.pj-viewer-dot img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.pj-viewer-initial {
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
}
.pj-viewer-more {
  background: var(--text3);
  color: var(--bg);
}
/* host precisa ser position:relative para o badge ancorar */
.pj-list-tr,
.pj-task-row,
.pj-dash-task-row,
.pj-bc-task-row {
  position: relative;
}

/* Bolinha verde nos avatares de membro (já existente, mas reforça) */
.pj-avatar.online::after,
.pj-avatar-online::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--bg, #fff);
  box-shadow: 0 0 0 0 rgba(16,185,129,.7);
  animation: pjViewerPulse 2s ease-out infinite;
}

/* ── Offline badge ────────────────────────────────────────── */
.pj-offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
  animation: pjOfflinePulse 2s ease-in-out infinite;
  margin-right: 6px;
}
.pj-offline-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 #f59e0b;
  animation: pjOfflineDotPulse 1.6s ease-in-out infinite;
}
@keyframes pjOfflinePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .65; }
}
@keyframes pjOfflineDotPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #f59e0b 60%, transparent); }
  70% { box-shadow: 0 0 0 6px color-mix(in srgb, #f59e0b 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, #f59e0b 0%, transparent); }
}
body.pj-offline .pj-fab,
body.pj-offline .pj-add-btn { filter: saturate(.6); }

@media (max-width: 600px) {
  .pj-offline-badge .pj-offline-label { display: none; }
  .pj-offline-badge { padding: 4px; }
}

/* ── SLA por cliente / prioridade ─────────────────────────── */
.pj-sla-thresholds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--text3) 5%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 14px;
}
.pj-sla-thr-label-main {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  margin-right: 4px;
}
.pj-sla-thr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: text;
}
.pj-sla-thr-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, #6366f1);
}
.pj-sla-thr-name {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
}
.pj-sla-thr-input {
  width: 46px;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text);
  text-align: center;
}
.pj-sla-thr-input:hover, .pj-sla-thr-input:focus {
  border-color: var(--border);
  outline: none;
}
.pj-sla-thr-unit {
  font-size: 10px;
  color: var(--text3);
}
.pj-sla-reset-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text3);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all .12s ease;
}
.pj-sla-reset-btn:hover {
  background: var(--hover);
  color: var(--text);
}

.pj-sla-overall-h {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 6px 0 8px;
}

.pj-sla-prio-row {
  display: grid;
  grid-template-columns: 14px 80px 1fr 50px auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.pj-sla-prio-row:hover { background: var(--hover); }
.pj-sla-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, #6366f1) 25%, transparent);
}
.pj-sla-prio-name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.pj-sla-bar {
  height: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text3) 12%, transparent);
  overflow: hidden;
  display: block;
}
.pj-sla-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width .35s cubic-bezier(.4,0,.2,1);
}
.pj-sla-prio-row.good .pj-sla-bar-fill,
.pj-sla-client-row.good .pj-sla-bar-fill { background: #10b981; }
.pj-sla-prio-row.warn .pj-sla-bar-fill,
.pj-sla-client-row.warn .pj-sla-bar-fill { background: #f59e0b; }
.pj-sla-prio-row.bad .pj-sla-bar-fill,
.pj-sla-client-row.bad .pj-sla-bar-fill { background: #ef4444; }

.pj-sla-pct {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--text);
}
.pj-sla-prio-row.good .pj-sla-pct,
.pj-sla-client-row.good .pj-sla-client-pct { color: #10b981; }
.pj-sla-prio-row.warn .pj-sla-pct,
.pj-sla-client-row.warn .pj-sla-client-pct { color: #f59e0b; }
.pj-sla-prio-row.bad .pj-sla-pct,
.pj-sla-client-row.bad .pj-sla-client-pct { color: #ef4444; }

.pj-sla-meta {
  font-size: 11.5px;
  color: var(--text3);
  white-space: nowrap;
}

.pj-sla-clients {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.pj-sla-client-row {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pj-sla-client-row.good { border-color: color-mix(in srgb, #10b981 30%, var(--border)); }
.pj-sla-client-row.warn { border-color: color-mix(in srgb, #f59e0b 30%, var(--border)); }
.pj-sla-client-row.bad  { border-color: color-mix(in srgb, #ef4444 30%, var(--border)); }
.pj-sla-client-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pj-sla-client-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-sla-client-pct {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}
.pj-sla-client-meta {
  font-size: 11px;
  color: var(--text3);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.pj-sla-client-mini {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.pj-sla-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c, #6366f1) 10%, transparent);
  color: var(--c, #6366f1);
}
.pj-sla-mini-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c, #6366f1);
}

@media (max-width: 700px) {
  .pj-sla-prio-row {
    grid-template-columns: 14px 1fr 60px;
    gap: 8px;
  }
  .pj-sla-prio-row .pj-sla-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .pj-sla-prio-row .pj-sla-meta {
    grid-column: 1 / -1;
    grid-row: 3;
    white-space: normal;
  }
  .pj-sla-clients { grid-template-columns: 1fr; }
}

/* ── Burndown / Burnup chart ──────────────────────────────── */
.pj-burnchart-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  color: var(--text2);
  overflow-x: auto;
}
.pj-burnchart {
  width: 100%;
  height: auto;
  display: block;
  min-width: 480px;
}

@media (max-width: 700px) {
  .pj-burnchart-wrap { font-size: 11px; }
}

/* ── PWA install button ──────────────────────────────────── */
.pj-install-btn {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent)) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
.pj-install-btn:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 28%, transparent),
    color-mix(in srgb, var(--accent) 14%, transparent)) !important;
}

/* Em modo standalone, esconde elementos que só fazem sentido no browser */
@media (display-mode: standalone) {
  .pj-install-btn { display: none !important; }
}

/* ── Voice-to-task no FAB modal ─────────────────────────────── */
.pj-fab-title-row {
  display: flex; gap: 6px; align-items: stretch;
}
.pj-fab-title-row > input { flex: 1; min-width: 0; }
.pj-voice-btn {
  flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text2);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.pj-voice-btn:hover { background: var(--hover); color: var(--text); border-color: var(--accent); }
.pj-voice-btn.recording {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #ef4444;
  color: #fff;
  animation: pjVoicePulse 1.2s ease-in-out infinite;
}
@keyframes pjVoicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.0); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,.25); }
}
.pj-ai-extract-btn {
  flex: 0 0 auto;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 15%, transparent),
    color-mix(in srgb, #a855f7 15%, transparent));
  color: var(--accent);
  font-weight: 600;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.pj-ai-extract-btn:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 25%, transparent),
    color-mix(in srgb, #a855f7 25%, transparent));
  transform: translateY(-1px);
}
.pj-ai-extract-btn:disabled { opacity: .5; cursor: wait; transform: none; }