/* ============================================================
   Sistema MPE — Tema Premium (dark luxe)
   Roxo da marca + dourado, vidro fosco e micro-animações
   ============================================================ */
:root {
  --roxo: #7C3AED;
  --roxo-2: #5E17EB;
  --roxo-escuro: #4510b4;
  --roxo-claro: rgba(124, 58, 237, .16);
  --amarelo: #FFD60A;
  --ouro: #F5C518;
  --escuro: #ECECF4;            /* texto principal (tema escuro) */
  --cinza-900: #15151D;
  --cinza-700: #C7C7D6;
  --cinza-500: #9A9AAE;
  --cinza-300: rgba(255, 255, 255, .14);
  --cinza-100: rgba(255, 255, 255, .06);
  --bg: #0A0A10;
  --surface: rgba(255, 255, 255, .04);
  --surface-2: rgba(255, 255, 255, .07);
  --border: rgba(255, 255, 255, .09);
  --branco: #ffffff;
  --verde: #4ADE80;
  --verde-bg: rgba(34, 197, 94, .14);
  --vermelho: #FB7185;
  --vermelho-bg: rgba(244, 63, 94, .14);
  --laranja: #FDBA74;
  --laranja-bg: rgba(249, 115, 22, .14);
  --azul: #7DAFFF;
  --azul-bg: rgba(59, 130, 246, .15);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .55);
  --glow-roxo: 0 8px 28px rgba(124, 58, 237, .45);
  --ring: 0 0 0 3px rgba(124, 58, 237, .35);
}

/* ---- Tema claro ---- */
[data-theme="light"] {
  --escuro: #1a1a2e;
  --cinza-900: #f5f5fa;
  --cinza-700: #3a3a52;
  --cinza-500: #6b6b8a;
  --cinza-300: rgba(0, 0, 0, .08);
  --cinza-100: rgba(0, 0, 0, .04);
  --bg: #f0eff5;
  --surface: rgba(255, 255, 255, .7);
  --surface-2: rgba(255, 255, 255, .85);
  --border: rgba(0, 0, 0, .1);
  --branco: #1a1a2e;
  --shadow: 0 10px 30px rgba(0, 0, 0, .08);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .12);
  --glow-roxo: 0 8px 28px rgba(124, 58, 237, .2);
  --ring: 0 0 0 3px rgba(124, 58, 237, .2);
  --verde: #16a34a;
  --verde-bg: rgba(34, 197, 94, .12);
  --vermelho: #dc2626;
  --vermelho-bg: rgba(239, 68, 68, .1);
  --laranja: #ea580c;
  --laranja-bg: rgba(249, 115, 22, .1);
  --azul: #2563eb;
  --azul-bg: rgba(59, 130, 246, .1);
}
[data-theme="light"] body {
  background: var(--bg);
  background-image:
    radial-gradient(900px 500px at -10% -10%, rgba(124, 58, 237, .06), transparent 60%),
    radial-gradient(700px 420px at 110% 0%, rgba(124, 58, 237, .04), transparent 55%),
    radial-gradient(800px 500px at 90% 110%, rgba(245, 197, 24, .04), transparent 60%);
  color: var(--escuro);
  color-scheme: light;
}
[data-theme="light"] a { color: #6d28d9; }
[data-theme="light"] a:hover { color: #5b21b6; }
[data-theme="light"] ::selection { background: rgba(124, 58, 237, .2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-color: var(--bg); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .25); }
[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, .7);
  border-right-color: var(--border);
}
[data-theme="light"] .sb-name { color: var(--escuro); }
[data-theme="light"] .nav a:hover { background: rgba(0, 0, 0, .04); color: var(--escuro); }
[data-theme="light"] .nav a.active { color: #fff; }
[data-theme="light"] .btn-secondary { background: rgba(0, 0, 0, .04); color: var(--cinza-700); border-color: rgba(0, 0, 0, .12); }
[data-theme="light"] .btn-secondary:hover { background: rgba(0, 0, 0, .07); }
[data-theme="light"] .btn-primary { color: #fff; }
[data-theme="light"] .btn-logout { background: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .1); }
[data-theme="light"] .btn-logout:hover { background: rgba(255, 214, 10, .08); }
[data-theme="light"] .card { background: rgba(255, 255, 255, .65); border-color: var(--border); }
[data-theme="light"] .topbar { background: rgba(255, 255, 255, .7); border-bottom-color: var(--border); }
[data-theme="light"] .login-card { background: rgba(255, 255, 255, .85); border-color: var(--border); }
[data-theme="light"] .orb1 { opacity: .12; }
[data-theme="light"] .orb2 { opacity: .08; }
[data-theme="light"] .orb3 { opacity: .08; }
[data-theme="light"] .modal .modal-head { border-bottom-color: var(--border); }
[data-theme="light"] .modal { background: rgba(255, 255, 255, .92); border-color: var(--border); }
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea { background: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .12); color: var(--escuro); }
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus { border-color: var(--roxo); background: #fff; }
[data-theme="light"] .kc-col { background: rgba(0, 0, 0, .03); border-color: var(--border); }
[data-theme="light"] .task-card { background: rgba(255, 255, 255, .8); border-color: var(--border); }
[data-theme="light"] .task-card:hover { background: rgba(255, 255, 255, .95); border-color: rgba(124, 58, 237, .3); }
[data-theme="light"] .toast { background: rgba(30, 30, 50, .9); color: #fff; }
[data-theme="light"] .avatar { background: linear-gradient(135deg, var(--roxo), var(--roxo-2)); color: #fff; }
[data-theme="light"] .page-head h1 { color: var(--escuro); }
[data-theme="light"] .nu-name { color: var(--escuro) !important; }
[data-theme="light"] .stat-card { background: rgba(255, 255, 255, .6); border-color: var(--border); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(900px 500px at -10% -10%, rgba(94, 23, 235, .22), transparent 60%),
    radial-gradient(700px 420px at 110% 0%, rgba(124, 58, 237, .12), transparent 55%),
    radial-gradient(800px 500px at 90% 110%, rgba(245, 197, 24, .07), transparent 60%);
  background-attachment: fixed;
  color: var(--escuro);
  font-size: 14px;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
a { color: #B69CFF; text-decoration: none; transition: color .15s; }
a:hover { color: #D4C2FF; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; }
::selection { background: rgba(124, 58, 237, .45); }

/* Scrollbar fina */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .25); }

/* Ícones SVG */
.ic { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; }

/* ============ Login ============ */
.login-screen {
  min-height: 100vh; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; }
.orb1 { width: 480px; height: 480px; background: #5E17EB; top: -140px; left: -120px; animation: float1 11s ease-in-out infinite; }
.orb2 { width: 380px; height: 380px; background: #2b1467; bottom: -120px; right: -80px; animation: float2 13s ease-in-out infinite; }
.orb3 { width: 220px; height: 220px; background: rgba(245, 197, 24, .65); bottom: 8%; left: 12%; opacity: .22; animation: float1 9s ease-in-out infinite reverse; }
@keyframes float1 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(40px, 30px) } }
@keyframes float2 { 0%,100% { transform: translate(0,0) } 50% { transform: translate(-35px, -25px) } }

.login-card {
  position: relative; z-index: 2;
  background: linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: 26px;
  padding: 46px 42px;
  width: 100%; max-width: 410px;
  box-shadow: var(--shadow-lg);
  animation: rise .5s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise { from { transform: translateY(22px); opacity: 0 } to { transform: none; opacity: 1 } }

.brand { text-align: center; margin-bottom: 28px; }
.brand-name {
  font-family: 'Poppins', sans-serif;
  font-size: 64px; font-weight: 800; line-height: 1;
  color: var(--branco); letter-spacing: -3px;
  text-shadow: 0 6px 30px rgba(124, 58, 237, .35);
}
.brand-dots { display: flex; justify-content: flex-end; gap: 4px; align-items: flex-end; padding-right: 70px; margin-bottom: -8px; }
.brand-dots span { background: var(--amarelo); border-radius: 50%; display: block; box-shadow: 0 0 18px rgba(255, 214, 10, .55); }
.brand-dots span:nth-child(1) { width: 8px;  height: 8px; }
.brand-dots span:nth-child(2) { width: 13px; height: 13px; }
.brand-dots span:nth-child(3) { width: 20px; height: 20px; }
.brand-tag {
  display: inline-block; margin-top: 10px;
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  color: var(--branco);
  font-size: 10px; font-weight: 700; letter-spacing: 3px;
  padding: 7px 16px; border-radius: 4px;
  box-shadow: var(--glow-roxo);
}
.login-card h1 { font-size: 17px; text-align: center; margin-bottom: 24px; color: var(--cinza-700); font-weight: 600; letter-spacing: 0; }
.login-card label { display: block; font-size: 12px; font-weight: 600; color: var(--cinza-500); margin-bottom: 15px; }
.login-card input {
  width: 100%; margin-top: 6px;
  padding: 12px 15px; font: inherit; color: var(--escuro);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  outline: none; transition: border .15s, box-shadow .15s, background .15s;
}
.login-card input::placeholder { color: rgba(255,255,255,.25); }
.login-card input:focus { border-color: var(--roxo); box-shadow: var(--ring); background: rgba(255,255,255,.07); }
.login-error { color: var(--vermelho); font-size: 12px; margin-top: 12px; text-align: center; }
.oauth-area { margin-top: 18px; }
.oauth-divider { display: flex; align-items: center; gap: 12px; color: var(--cinza-500); font-size: 12px; margin-bottom: 16px; }
.oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, .12); }
.btn-google {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 15px; font: inherit; font-size: 13.5px; font-weight: 700;
  background: var(--branco); color: #1f1f23;
  border: none; border-radius: 12px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.btn-google:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); filter: brightness(.98); }
.btn-google:active { transform: scale(.98); }
.login-hint {
  margin-top: 22px; padding: 13px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 12px;
  font-size: 12px; color: var(--cinza-500); text-align: center; line-height: 1.8;
}
.login-hint strong { color: var(--cinza-700); }

/* ============ Layout ============ */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 248px; flex-shrink: 0;
  background: rgba(10, 10, 16, .55);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; z-index: 10;
}
.sidebar-brand { padding: 28px 24px 20px; display: flex; align-items: flex-end; gap: 7px; }
.sb-name { font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 800; color: var(--branco); line-height: .8; letter-spacing: -2px; }
.sb-dots { display: flex; gap: 3px; align-items: flex-end; padding-bottom: 2px; }
.sb-dots i { background: var(--amarelo); border-radius: 50%; display: block; box-shadow: 0 0 10px rgba(255,214,10,.6); }
.sb-dots i:nth-child(1) { width: 5px; height: 5px; }
.sb-dots i:nth-child(2) { width: 8px; height: 8px; }
.sb-dots i:nth-child(3) { width: 12px; height: 12px; }

.nav { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11.5px 15px; border-radius: 12px;
  color: var(--cinza-500); font-weight: 600; font-size: 13.5px;
  transition: background .18s, color .18s, transform .18s;
  position: relative;
}
.nav a .ico { width: 19px; display: inline-flex; align-items: center; justify-content: center; }
.nav a .ico .ic { width: 18px; height: 18px; }
.nav a:hover { background: rgba(255, 255, 255, .05); color: var(--branco); transform: translateX(2px); }
.nav a.active {
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  color: var(--branco);
  box-shadow: var(--glow-roxo);
}

.sidebar-footer { padding: 16px 18px 22px; border-top: 1px solid var(--border); }
.nav-user { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.nav-user .avatar { width: 36px; height: 36px; font-size: 13px; }
.nav-user .nu-name { color: var(--branco); font-size: 13px; font-weight: 700; line-height: 1.25; }
.nav-user .nu-role { color: var(--cinza-500); font-size: 11px; }
.btn-logout {
  width: 100%; padding: 9px; font: inherit; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  color: var(--cinza-500); cursor: pointer; transition: all .18s;
}
.btn-logout:hover { border-color: var(--amarelo); color: var(--amarelo); background: rgba(255, 214, 10, .06); }
.sidebar-actions { display: flex; gap: 8px; }
.sidebar-actions .btn-logout { flex: 1; }
.btn-theme {
  width: 40px; flex-shrink: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  color: var(--cinza-500); cursor: pointer; transition: all .18s;
}
.btn-theme:hover { border-color: var(--amarelo); color: var(--amarelo); background: rgba(255, 214, 10, .06); }
.btn-theme .ic { width: 16px; height: 16px; }
[data-theme="light"] .btn-theme { background: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .1); }
[data-theme="light"] .btn-theme:hover { background: rgba(124, 58, 237, .08); border-color: var(--roxo); color: var(--roxo); }

.main { flex: 1; min-width: 0; }
.view { padding: 36px 40px 70px; max-width: 1320px; animation: fadein .3s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* ============ Cabeçalho de página ============ */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; color: var(--branco); }
.page-head .sub { color: var(--cinza-500); font-size: 13px; margin-top: 4px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ Botões ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10.5px 19px; font: inherit; font-size: 13px; font-weight: 700;
  border: none; border-radius: 12px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s, color .15s, filter .15s;
  text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  color: var(--branco);
  box-shadow: var(--glow-roxo);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(124, 58, 237, .55); }
.btn-secondary {
  background: rgba(255, 255, 255, .05); color: var(--cinza-700);
  border: 1px solid rgba(255, 255, 255, .14);
}
.btn-secondary:hover { border-color: var(--roxo); color: var(--branco); background: rgba(124, 58, 237, .12); }
.btn-yellow {
  background: linear-gradient(135deg, var(--amarelo), var(--ouro));
  color: #1d1500;
  box-shadow: 0 8px 26px rgba(245, 197, 24, .3);
}
.btn-yellow:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(245, 197, 24, .42); }
.btn-danger { background: var(--vermelho-bg); color: var(--vermelho); border: 1px solid rgba(244, 63, 94, .25); }
.btn-danger:hover { background: rgba(244, 63, 94, .28); color: #ffb3be; }
.btn-sm { padding: 6.5px 13px; font-size: 12px; border-radius: 9px; }
.btn-block { width: 100%; justify-content: center; }
.btn-icon {
  background: none; border: none; cursor: pointer;
  padding: 6px 8px; border-radius: 8px; color: var(--cinza-500);
  display: inline-flex; align-items: center; transition: all .15s;
}
.btn-icon .ic { width: 16px; height: 16px; }
.btn-icon:hover { background: var(--cinza-100); color: var(--branco); }

/* ============ Cards e grids ============ */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 30px; }
.card {
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.stat-card { display: flex; flex-direction: column; gap: 5px; position: relative; overflow: hidden; transition: transform .2s, border-color .2s; }
.stat-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3.5px;
  background: linear-gradient(180deg, var(--roxo), var(--roxo-2));
  box-shadow: 0 0 14px rgba(124, 58, 237, .8);
}
.stat-card.yellow::before { background: linear-gradient(180deg, var(--amarelo), var(--ouro)); box-shadow: 0 0 14px rgba(255, 214, 10, .7); }
.stat-card.green::before { background: var(--verde); box-shadow: 0 0 14px rgba(74, 222, 128, .6); }
.stat-card.red::before { background: var(--vermelho); box-shadow: 0 0 14px rgba(251, 113, 133, .6); }
.stat-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); }
.stat-card .stat-label { font-size: 11px; font-weight: 700; color: var(--cinza-500); text-transform: uppercase; letter-spacing: 1.2px; }
.stat-card .stat-value { font-size: 28px; font-weight: 800; color: var(--branco); letter-spacing: -.03em; }
.stat-card .stat-foot { font-size: 12px; color: var(--cinza-500); }

.section { margin-bottom: 32px; }
.section > h2 { font-size: 15px; margin-bottom: 14px; color: var(--branco); display: flex; align-items: center; gap: 9px; }
.section > h2::before {
  content: ''; width: 4px; height: 16px; border-radius: 99px;
  background: linear-gradient(180deg, var(--roxo), var(--amarelo));
}
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .two-cols { grid-template-columns: 1fr; } }

/* ============ Tabelas ============ */
.table-wrap {
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; padding: 14px 18px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--cinza-500); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
td { padding: 13px 18px; border-bottom: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; color: var(--cinza-700); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(124, 58, 237, .07); }
tr.clickable { cursor: pointer; }
.td-main { font-weight: 700; color: var(--branco); }
.td-sub { font-size: 12px; color: var(--cinza-500); }
.td-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-actions { text-align: right; white-space: nowrap; }

/* ============ Badges / chips ============ */
.badge {
  display: inline-block; padding: 4.5px 12px; border-radius: 99px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.badge.roxo { background: var(--roxo-claro); color: #C4A8FF; border-color: rgba(124,58,237,.3); }
.badge.verde { background: var(--verde-bg); color: var(--verde); border-color: rgba(74,222,128,.25); }
.badge.vermelho { background: var(--vermelho-bg); color: var(--vermelho); border-color: rgba(251,113,133,.25); }
.badge.laranja { background: var(--laranja-bg); color: var(--laranja); border-color: rgba(253,186,116,.25); }
.badge.azul { background: var(--azul-bg); color: var(--azul); border-color: rgba(125,175,255,.25); }
.badge.cinza { background: var(--cinza-100); color: var(--cinza-500); border-color: rgba(255,255,255,.1); }
.badge.amarelo { background: rgba(255, 214, 10, .13); color: #FFE16A; border-color: rgba(255,214,10,.3); }

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  color: var(--branco);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}
.avatar.a2 { background: linear-gradient(135deg, #14b8a6, #0e7490); }
.avatar.a3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.avatar.a4 { background: linear-gradient(135deg, #ec4899, #be185d); }
.avatar.a5 { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.avatar-img {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4);
}

/* ============ Multi-picker responsáveis ============ */
.multi-picker { display: flex; flex-direction: column; gap: 6px; }
.mp-selected { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; }
.mp-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.08); border-radius: 20px;
  padding: 3px 8px 3px 3px; font-size: 12px; font-weight: 600;
}
.mp-chip .avatar-img, .mp-chip .avatar { width: 22px; height: 22px; font-size: 9px; }
.avatar-xs { width: 16px !important; height: 16px !important; font-size: 7px !important; }
.mp-remove {
  background: none; border: none; color: var(--cinza-500); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; margin-left: 2px;
}
.mp-remove:hover { color: var(--branco); }
.mp-add { font-size: 13px; }
.avatars-stack { display: inline-flex; align-items: center; }
.avatars-stack .avatar-img, .avatars-stack .avatar { width: 26px; height: 26px; font-size: 9px; margin-left: -6px; border: 2px solid var(--bg-card); }
.avatars-stack .avatar-img:first-child, .avatars-stack .avatar:first-child { margin-left: 0; }

/* ============ Filtros / toolbar ============ */
.toolbar { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
.date-range-filter { display: flex; align-items: center; gap: 6px; }
.date-range-filter label { font-size: 12px; color: var(--cinza-500); white-space: nowrap; }
.date-range-filter input[type="date"] { padding: 8px 10px; font: inherit; font-size: 13px; color: var(--escuro); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; outline: none; transition: border .15s; }
.date-range-filter input[type="date"]:focus { border-color: var(--roxo); box-shadow: var(--ring); }
.btn-clear-date { background: rgba(251,113,133,.15); border: 1px solid rgba(251,113,133,.3); color: var(--vermelho); border-radius: 8px; padding: 5px 9px; cursor: pointer; font-size: 12px; line-height: 1; }
.btn-clear-date:hover { background: rgba(251,113,133,.25); }
.toolbar input[type="search"], .toolbar select, .toolbar input[type="month"] {
  padding: 9.5px 14px; font: inherit; font-size: 13px; color: var(--escuro);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px;
  outline: none; transition: border .15s, box-shadow .15s;
}
.toolbar input::placeholder { color: rgba(255,255,255,.25); }
.toolbar input[type="search"] { min-width: 230px; }
.toolbar input:focus, .toolbar select:focus { border-color: var(--roxo); box-shadow: var(--ring); }
.toolbar select option { background: var(--cinza-900); }
.chip-group {
  display: inline-flex;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px; overflow: hidden;
}
.chip-group button {
  padding: 9.5px 16px; font: inherit; font-size: 12.5px; font-weight: 700;
  background: none; border: none; cursor: pointer; color: var(--cinza-500);
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.chip-group button .ic { width: 15px; height: 15px; }
.chip-group button:hover { color: var(--branco); }
.chip-group button.active {
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  color: var(--branco);
}
.chip-group button.active:hover { color: var(--branco); }
.chip-group button.chip-atrasada.active { background: linear-gradient(135deg, var(--vermelho), #dc2626); }
.chip-group button.chip-today.active { background: linear-gradient(135deg, var(--laranja), #ea580c); }
.status-multi { flex-wrap: wrap; border-radius: 11px; }
.status-multi button { border-right: 1px solid rgba(255,255,255,.08); }
.status-multi button:last-child { border-right: none; }

/* ============ Kanban ============ */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(235px, 1fr)); gap: 15px; align-items: start; overflow-x: auto; padding-bottom: 6px; }
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(4, 245px); } }
.kanban-col {
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius); padding: 13px; min-height: 240px;
  transition: outline-color .15s;
}
.kanban-col.drag-over { outline: 2px dashed var(--roxo); outline-offset: -2px; background: rgba(124, 58, 237, .06); }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 5px 12px; }
.kanban-col-head h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--cinza-700); font-weight: 800; display: flex; align-items: center; gap: 7px; }

/* Bolinha de cor da etapa */
.stage-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; background: var(--cinza-500); }
.stage-dot.cinza { background: var(--cinza-500); }
.stage-dot.azul { background: var(--azul); }
.stage-dot.roxo { background: #C4A8FF; }
.stage-dot.laranja { background: var(--laranja); }
.stage-dot.amarelo { background: var(--amarelo); }
.stage-dot.verde { background: var(--verde); }
.stage-dot.vermelho { background: var(--vermelho); }

/* Gerenciador de etapas (Configurações) */
.stage-list { display: flex; flex-direction: column; gap: 8px; }
.stage-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 11px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--border);
}
.stage-row .stage-dot { width: 12px; height: 12px; }
.stage-row .stage-name { font-weight: 700; color: var(--branco); }
.stage-row .stage-count { margin-left: auto; }
.stage-actions { display: flex; align-items: center; gap: 2px; }
.stage-actions .btn-icon { font-size: 14px; }
.stage-actions .btn-icon[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.kanban-count {
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px; padding: 2px 10px; font-size: 11px; font-weight: 800; color: var(--cinza-500);
}
.kanban-cards { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
.task-card {
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px; padding: 13px 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  cursor: grab; border-left: 3px solid rgba(255,255,255,.18);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.task-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); border-color: rgba(255,255,255,.16); }
.task-card:active { cursor: grabbing; }
.task-card.p-media { border-left-color: var(--azul); }
.task-card.p-alta { border-left-color: var(--laranja); }
.task-card.p-urgente { border-left-color: var(--vermelho); box-shadow: 0 6px 20px rgba(244, 63, 94, .18); }
.task-card .tc-title { font-weight: 700; font-size: 13px; line-height: 1.4; margin-bottom: 4px; color: var(--branco); }
.task-card .tc-client { font-size: 11px; color: var(--roxo); font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.task-card .tc-client .ic { width: 11px; height: 11px; }
.task-card .tc-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.task-card .tc-footer .badge { font-size: 10px; padding: 2px 7px; }
.task-card .tc-due { font-size: 11px; font-weight: 700; color: var(--cinza-500); display: flex; align-items: center; gap: 3px; }
.task-card .tc-due .ic { width: 11px; height: 11px; }
.task-card .tc-due.overdue { color: var(--vermelho) !important; font-weight: 800; }
.task-card.overdue-card { border-left-color: var(--vermelho) !important; box-shadow: 0 0 12px rgba(251,113,133,.25); }
.task-card.ontime-card { border-left-color: var(--verde) !important; box-shadow: 0 0 12px rgba(74,222,128,.15); }
.task-card .tc-no-date { font-size: 11px; color: var(--cinza-300); }
.task-card .tc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--cinza-500); }
.task-card .tc-meta .avatar { width: 22px; height: 22px; font-size: 9px; }
.task-card .tc-meta .ic { width: 12px; height: 12px; vertical-align: -2px; }
.tc-due.overdue { color: var(--vermelho); font-weight: 800; }
.tc-cl-wrap { display: flex; align-items: center; gap: 6px; margin: 5px 0 2px; }
.tc-cl-bar { flex: 1; height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; }
.tc-cl-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.tc-cl-lbl { font-size: 10px; font-weight: 700; color: var(--cinza-500); white-space: nowrap; min-width: 28px; text-align: right; }
.tc-recur { display: inline-flex; align-items: center; gap: 4px; color: #C4A8FF; font-weight: 700; }
.tc-recur .ic { width: 12px; height: 12px; vertical-align: -2px; }
.td-main .tc-recur .ic { width: 14px; height: 14px; }

/* ============ Calendário de tarefas ============ */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.cal-head .btn-sm { font-size: 16px; line-height: 1; padding: 7px 13px; }
.cal-title { font-size: 18px; color: var(--branco); min-width: 190px; }
.calendar {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.cal-dow {
  text-align: center; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--cinza-500);
  padding-bottom: 4px;
}
.cal-cell {
  min-height: 108px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border); border-radius: 13px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s, background .15s;
}
.cal-cell:not(.empty-cell):hover { background: rgba(255, 255, 255, .05); }
.cal-cell.empty-cell { background: transparent; border: none; }
.cal-cell.today {
  border-color: var(--roxo);
  box-shadow: inset 0 0 0 1px var(--roxo), 0 0 22px rgba(124, 58, 237, .22);
}
.cal-day { font-size: 12px; font-weight: 800; color: var(--cinza-500); }
.cal-cell.today .cal-day {
  color: var(--branco);
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-roxo);
}
.cal-tasks { display: flex; flex-direction: column; gap: 4px; }
.cal-chip {
  font-size: 11px; font-weight: 600; color: var(--branco);
  background: rgba(124, 58, 237, .25); border-left: 3px solid var(--roxo);
  border-radius: 6px; padding: 3px 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s, transform .12s; max-width: 100%;
}
.cal-chip:hover { background: rgba(124, 58, 237, .42); transform: translateX(1px); }
.cal-chip.p-media { border-left-color: var(--azul); background: var(--azul-bg); }
.cal-chip.p-alta { border-left-color: var(--laranja); background: var(--laranja-bg); }
.cal-chip.p-urgente { border-left-color: var(--vermelho); background: var(--vermelho-bg); }
.cal-chip.done { opacity: .5; text-decoration: line-through; }
.cal-chip.ghost {
  background: transparent !important;
  border: 1px dashed rgba(196, 168, 255, .5); border-left: 3px dashed var(--roxo);
  color: var(--cinza-500); opacity: .8;
  display: flex; align-items: center; gap: 4px;
}
.cal-chip.ghost .ic { width: 11px; height: 11px; flex-shrink: 0; }
.cal-chip.ghost:hover { opacity: 1; background: rgba(124, 58, 237, .12) !important; }
.cal-chip.ghost.p-alta { border-left-color: var(--laranja); }
.cal-chip.ghost.p-urgente { border-left-color: var(--vermelho); }
.cal-chip.ghost.p-media { border-left-color: var(--azul); }
@media (max-width: 800px) {
  .cal-cell { min-height: 76px; padding: 5px; border-radius: 9px; }
  .calendar { gap: 4px; }
  .cal-chip { font-size: 10px; padding: 2px 5px; }
}

/* ============ Gantt ============ */
.gantt-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.gantt { display: grid; position: relative; min-width: max-content; }
.gantt-corner {
  position: sticky; left: 0; z-index: 3;
  background: rgba(255, 255, 255, .04); border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.gantt-month {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--cinza-700); background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid var(--border); border-left: 1px solid var(--border);
}
.gantt-day {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--cinza-500);
  background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--border);
  grid-row: 2;
}
.gantt-day.weekend { background: rgba(255, 255, 255, .045); }
.gantt-day.today { color: var(--branco); background: rgba(124, 58, 237, .25); font-weight: 800; }
.gantt-row-label {
  position: sticky; left: 0; z-index: 2;
  display: flex; align-items: center;
  padding: 0 14px; font-size: 12.5px; font-weight: 600; color: var(--branco);
  background: var(--cinza-900); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.gantt-row-label.gantt-group {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--cinza-700); background: rgba(124, 58, 237, .1); cursor: default;
  position: static; border-right: none;
}
.gantt-bar {
  grid-row: span 1;
  align-self: center; height: 22px; margin: 0 2px;
  border-radius: 7px; cursor: pointer;
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  border-left: 3px solid var(--roxo);
  display: flex; align-items: center; overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
  transition: transform .12s, box-shadow .12s;
}
.gantt-bar:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.gantt-bar .gb-label {
  font-size: 11px; font-weight: 700; color: var(--branco);
  padding: 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-bar.p-baixa { background: rgba(154, 154, 174, .35); border-left-color: var(--cinza-500); }
.gantt-bar.p-media { background: linear-gradient(135deg, var(--azul), #3B82F6); border-left-color: var(--azul); }
.gantt-bar.p-alta { background: linear-gradient(135deg, var(--laranja), #F97316); border-left-color: var(--laranja); }
.gantt-bar.p-urgente { background: linear-gradient(135deg, var(--vermelho), #F43F5E); border-left-color: var(--vermelho); }
.gantt-bar.overdue { box-shadow: 0 0 0 1px var(--vermelho), 0 3px 10px rgba(244, 63, 94, .3); }
.gantt-bar.done { opacity: .45; }
.gantt-bar.done .gb-label { text-decoration: line-through; }
.gantt-today-line {
  position: relative; width: 2px; background: var(--roxo);
  box-shadow: 0 0 8px var(--roxo); z-index: 1; pointer-events: none;
}

/* ============ Listas simples ============ */
.list { display: flex; flex-direction: column; }
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12.5px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px; transition: background .12s;
}
.list-item:last-child { border-bottom: none; }
.list-item.clickable:hover { background: rgba(124, 58, 237, .08); }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-title { font-weight: 700; font-size: 13px; color: var(--branco); }
.list-item .li-sub { font-size: 12px; color: var(--cinza-500); }
.empty {
  padding: 38px 20px; text-align: center; color: var(--cinza-500); font-size: 13px;
  background: rgba(255, 255, 255, .02);
  border-radius: var(--radius); border: 1.5px dashed rgba(255, 255, 255, .12);
  line-height: 1.8;
}

/* ============ Relatórios ============ */
.proj-task-row { align-items: flex-start; gap: 12px; padding: 14px 18px; }
.btn-desvincular { opacity: 0; background: rgba(251,113,133,.15); border: 1px solid rgba(251,113,133,.3); color: var(--vermelho); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 12px; flex-shrink: 0; transition: opacity .15s; }
.proj-task-row:hover .btn-desvincular { opacity: 1; }
.btn-desvincular:hover { background: rgba(251,113,133,.3); }
.proj-task-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.proj-task-meta .badge { font-size: 10px; padding: 2px 7px; }
.ptm-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--cinza-500); background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.ptm-chip .ic { width: 11px; height: 11px; flex-shrink: 0; }
.ptm-late { color: var(--vermelho) !important; border-color: rgba(251,113,133,.3); background: var(--vermelho-bg); }

/* Dashboard task rows */
.dash-task-row { flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 14px; }
.dash-task-row.overdue-row { border-left: 3px solid var(--vermelho); }
.dash-task-main { width: 100%; }
.dash-task-title { font-size: 14px; font-weight: 500; color: var(--fg); margin-bottom: 5px; }
.dash-task-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.late-dot { color: var(--vermelho); font-size: 10px; }
.overdue-row .dash-task-title { color: var(--vermelho); }

.autosave-status { font-size: 12px; font-weight: 600; margin-right: auto; transition: color .2s; min-width: 80px; }
.autosave-status.saving { color: var(--cinza-500); }
.autosave-status.saved { color: var(--verde); }

.rep-flabel { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--cinza-500); font-weight: 600; }
.rep-flabel input[type="month"] {
  padding: 9.5px 14px; font: inherit; font-size: 13px; color: var(--escuro);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px;
  outline: none; transition: border .15s, box-shadow .15s;
}
.rep-flabel input[type="month"]:focus { border-color: var(--roxo); box-shadow: var(--ring); }

.bars-vert { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding: 10px 4px 0; }
.bv-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; min-width: 0; }
.bv-bars { display: flex; gap: 4px; align-items: flex-end; height: 100%; width: 100%; justify-content: center; }
.bv-bar { width: 14px; border-radius: 5px 5px 2px 2px; min-height: 2px; transition: height .35s ease; }
.bv-bar.receita { background: linear-gradient(180deg, var(--verde), rgba(74, 222, 128, .25)); box-shadow: 0 0 10px rgba(74, 222, 128, .35); }
.bv-bar.despesa { background: linear-gradient(180deg, var(--vermelho), rgba(251, 113, 133, .25)); box-shadow: 0 0 10px rgba(251, 113, 133, .35); }
.bv-bar.tasks { background: linear-gradient(180deg, var(--roxo), var(--roxo-2)); box-shadow: var(--glow-roxo); }
.bv-label { font-size: 11px; color: var(--cinza-500); font-weight: 600; text-transform: capitalize; }
.chart-legend { display: flex; gap: 18px; justify-content: center; margin-top: 14px; font-size: 12px; color: var(--cinza-500); font-weight: 600; }
.chart-legend .dot, .dl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.chart-legend .dot.receita { background: var(--verde); }
.chart-legend .dot.despesa { background: var(--vermelho); }

.bars-horiz .bh-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bars-horiz .bh-row:last-child { margin-bottom: 0; }
.bh-label { width: 130px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--cinza-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-track { flex: 1; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.bh-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--roxo), var(--roxo-2)); box-shadow: var(--glow-roxo); transition: width .35s ease; }
.bh-value { width: 96px; flex-shrink: 0; text-align: right; font-size: 12px; font-weight: 800; color: var(--branco); }

.donut-wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.donut { width: 140px; height: 140px; border-radius: 50%; flex-shrink: 0; position: relative; }
.donut::after { content: ''; position: absolute; inset: 20px; border-radius: 50%; background: var(--bg); }
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--cinza-700); flex: 1; min-width: 160px; }
.dl-item { display: flex; align-items: center; gap: 6px; }
.dl-pct { color: var(--cinza-500); margin-left: auto; }
@media (max-width: 640px) {
  .donut-wrap { justify-content: center; }
  .bh-label { width: 90px; }
}

/* ============ Roadmap ============ */
.roadmap-item { align-items: flex-start; gap: 14px; }
.roadmap-item .li-main { padding-top: 2px; }
.roadmap-item select { max-width: 180px; flex-shrink: 0; }
.vote-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 12px; border-radius: 11px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03); color: var(--cinza-500); cursor: pointer;
  font-size: 12px; font-weight: 800; flex-shrink: 0; min-width: 52px;
  transition: all .15s;
}
.vote-btn .ic { width: 15px; height: 15px; }
.vote-btn:hover { border-color: var(--roxo); color: var(--branco); }
.vote-btn.active {
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  color: var(--branco); border-color: transparent;
  box-shadow: var(--glow-roxo);
}

/* ============ Modal ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 5, 10, .7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 16px; overflow-y: auto;
}
.modal {
  background: linear-gradient(170deg, #1A1A24, #131319);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  width: 100%; max-width: 560px;
  box-shadow: var(--shadow-lg);
  animation: pop .22s cubic-bezier(.2,.9,.3,1);
}
.modal.wide { max-width: 780px; }
@keyframes pop { from { transform: translateY(18px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 0; }
.modal-head h2 { font-size: 17px; color: var(--branco); }
.modal-body { padding: 20px 26px 28px; }
.modal-close {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  font-size: 15px; cursor: pointer; color: var(--cinza-500);
  padding: 5px 10px; border-radius: 9px; transition: all .15s;
}
.modal-close:hover { background: rgba(255,255,255,.1); color: var(--branco); }

/* ============ Formulários ============ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11.5px; font-weight: 700; color: var(--cinza-500); text-transform: uppercase; letter-spacing: .6px; }
.field input, .field select, .field textarea {
  padding: 10.5px 14px; font: inherit; font-size: 13px; color: var(--escuro);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px;
  outline: none; width: 100%;
  transition: border .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.22); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--roxo); box-shadow: var(--ring); }
.field select option { background: var(--cinza-900); }
.field textarea { resize: vertical; min-height: 72px; }
.field input:disabled { opacity: .5; cursor: not-allowed; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.form-hint {
  margin-top: 14px; padding: 10px 13px;
  font-size: 12px; line-height: 1.5; color: #C4A8FF;
  background: rgba(124, 58, 237, .1); border: 1px solid rgba(124, 58, 237, .25);
  border-radius: 10px;
}
.form-hint.warn { color: var(--laranja); background: var(--laranja-bg); border-color: rgba(253, 186, 116, .3); }

/* Construtor de recorrência personalizada */
#recur-custom {
  background: rgba(124, 58, 237, .07);
  border: 1px solid rgba(124, 58, 237, .2);
  border-radius: 12px; padding: 14px;
}
.recur-builder { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recur-builder span { font-size: 13px; color: var(--cinza-700); font-weight: 600; }
.recur-builder input[type="number"] {
  width: 70px; padding: 9px 11px; font: inherit; font-size: 13px; color: var(--escuro);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; outline: none; text-align: center;
}
.recur-builder input[type="number"]:focus { border-color: var(--roxo); box-shadow: var(--ring); }
.recur-builder select { flex: 1; min-width: 130px; }
.weekday-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.weekday-row .wd-label { font-size: 12px; color: var(--cinza-500); font-weight: 600; margin-right: 2px; }
.wd {
  width: 38px; height: 34px; padding: 0; font: inherit; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .05); color: var(--cinza-500);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; cursor: pointer;
  transition: all .15s;
}
.wd:hover { border-color: var(--roxo); color: var(--branco); }
.wd.active {
  background: linear-gradient(135deg, var(--roxo), var(--roxo-2));
  color: var(--branco); border-color: transparent; box-shadow: var(--glow-roxo);
}

/* ============ Toast ============ */
.toast-root { position: fixed; bottom: 26px; right: 26px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: linear-gradient(170deg, #1E1E29, #15151D);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--branco);
  padding: 14px 22px; border-radius: 14px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg); border-left: 3.5px solid var(--amarelo);
  animation: pop .25s cubic-bezier(.2,.9,.3,1);
}
.toast.err { border-left-color: var(--vermelho); }
.toast.notif-toast {
  display: flex; align-items: flex-start; gap: 10px;
  border-left-color: var(--roxo); min-width: 280px; max-width: 340px;
  padding: 12px 14px;
}
.nt-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.nt-body { flex: 1; min-width: 0; }
.nt-body strong { display: block; font-size: 13px; margin-bottom: 2px; }
.nt-text { font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============ Detalhe / progresso ============ */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; margin-bottom: 16px; cursor: pointer; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.detail-head h1 { font-size: 23px; color: var(--branco); }
.meta-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--cinza-500); }
.meta-row strong { color: var(--escuro); }

.progress {
  height: 8px; background: rgba(255, 255, 255, .08); border-radius: 99px; overflow: hidden; flex: 1;
}
.progress > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--roxo-2), var(--roxo) 70%, var(--amarelo));
  border-radius: 99px;
  box-shadow: 0 0 12px rgba(124, 58, 237, .8);
  transition: width .4s ease;
}

input[type="checkbox"] { accent-color: var(--roxo); }

/* ============ Barra superior mobile + gaveta ============ */
.topbar {
  display: none;
  position: sticky; top: 0; z-index: 30;
  align-items: center; gap: 14px;
  padding: 12px 16px;
  background: rgba(10, 10, 16, .85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 11px; color: var(--branco); cursor: pointer; transition: all .15s;
}
.nav-toggle:active { transform: scale(.94); }
.nav-toggle svg { width: 22px; height: 22px; }
.topbar-brand { display: flex; align-items: flex-end; gap: 5px; }
.topbar-brand .sb-name { font-size: 26px; }
.topbar-brand .sb-dots i:nth-child(1) { width: 4px; height: 4px; }
.topbar-brand .sb-dots i:nth-child(2) { width: 6px; height: 6px; }
.topbar-brand .sb-dots i:nth-child(3) { width: 9px; height: 9px; }
.nav-backdrop {
  display: none; position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 5, 10, .6); backdrop-filter: blur(3px);
}
.app.nav-open .nav-backdrop { display: block; }

/* ============ Checklist ============ */
.cl-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.cl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cl-head h3 { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; margin: 0; }
.cl-count { color: var(--cinza-500); font-size: 12px; font-weight: 500; }
.cl-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cl-bar { flex: 1; height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; }
.cl-bar-fill { height: 100%; background: var(--verde); border-radius: 99px; transition: width .3s; }
.cl-pct { font-size: 11px; font-weight: 700; color: var(--verde); min-width: 30px; text-align: right; }
.cl-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.cl-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); transition: background .15s;
}
.cl-item:hover { background: var(--surface-2); }
.cl-item:hover .cl-edit, .cl-item:hover .cl-del { opacity: .6; }
.cl-item:hover .cl-edit:hover, .cl-item:hover .cl-del:hover { opacity: 1; }
.cl-check { width: 16px; height: 16px; accent-color: var(--roxo); cursor: pointer; flex-shrink: 0; }
.cl-label { flex: 1; font-size: 13px; }
.cl-done .cl-label { text-decoration: line-through; opacity: .5; }
.cl-date { font-size: 11px; color: var(--cinza-500); background: var(--surface-2); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.cl-edit, .cl-del { opacity: 0; flex-shrink: 0; }
.cl-edit-inp { flex: 1; font-size: 13px; background: var(--bg); border: 1px solid var(--roxo); border-radius: 6px; padding: 3px 8px; color: var(--escuro); }
.cl-add-row { display: flex; gap: 6px; align-items: center; }
.cl-new-inp { flex: 1; font-size: 13px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--escuro); }
.cl-new-inp:focus { border-color: var(--roxo); outline: none; box-shadow: var(--ring); }
.cl-new-date { font-size: 12px; padding: 7px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--escuro); width: 130px; }
.cl-new-date:focus { border-color: var(--roxo); outline: none; }

/* ============ Timesheet ============ */
.ts-section {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.ts-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.ts-head h3 {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; flex: 1;
}
.ts-head h3 .ic { width: 18px; height: 18px; }
.ts-total {
  font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg, var(--roxo), var(--amarelo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ts-manual {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: var(--surface-2); border-radius: 10px;
}
.ts-manual.hidden { display: none; }
.ts-manual input[type="number"], .ts-manual input[type="text"] {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; color: var(--escuro); font-size: 13px;
}
.ts-entries { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.ts-entry {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: var(--surface); border-radius: 10px; font-size: 12px;
}
.ts-entry.ts-running { border-left: 3px solid var(--verde); }
.ts-avatar.avatar-img, .ts-avatar.avatar { width: 22px; height: 22px; font-size: 9px; }
.ts-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.ts-who { font-weight: 600; }
.ts-date { color: var(--cinza-500); font-size: 11px; }
.ts-note { color: var(--cinza-700); font-style: italic; font-size: 11px; }
.ts-dur { font-weight: 700; white-space: nowrap; }
.ts-del { opacity: 0.4; }
.ts-entry:hover .ts-del { opacity: 1; }
.tc-time { color: var(--cinza-500); display: flex; align-items: center; gap: 3px; font-size: 11px; }
.tc-time .ic { width: 12px; height: 12px; }

/* ============ Comentários ============ */
.cmt-section {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.cmt-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.cmt-head h3 {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700;
}
.cmt-head h3 .ic { width: 18px; height: 18px; }
.cmt-count { color: var(--cinza-500); font-weight: 400; font-size: 13px; }
.cmt-input {
  display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px;
}
.cmt-input textarea {
  flex: 1; resize: vertical; min-height: 44px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; color: var(--escuro); font-size: 13px;
  font-family: inherit;
}
.cmt-input textarea:focus { border-color: var(--roxo); box-shadow: var(--ring); outline: none; }
.cmt-editor {
  flex: 1; min-height: 44px; max-height: 160px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; color: var(--escuro); font-size: 13px;
  font-family: inherit; line-height: 1.5; word-break: break-word;
  white-space: pre-wrap;
}
.cmt-editor:focus { border-color: var(--roxo); box-shadow: var(--ring); outline: none; }
.cmt-editor:empty::before { content: attr(data-placeholder); color: var(--cinza-500); pointer-events: none; }
.cmt-mention-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(124,58,237,.12); color: var(--roxo);
  border-radius: 20px; padding: 1px 8px 1px 4px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  vertical-align: middle; white-space: nowrap;
  user-select: none;
}
.cmt-mention-chip:hover { background: rgba(124,58,237,.22); }
.chip-avatar {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
}
.chip-ini {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--roxo); color: #fff; font-size: 9px; font-weight: 700;
}
.chip-icon { font-size: 13px; }
.cmt-list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.cmt-item {
  display: flex; gap: 10px; padding: 10px 12px;
  background: var(--surface); border-radius: 12px;
  align-items: flex-start;
}
.cmt-avatar .avatar-img, .cmt-avatar .avatar { width: 28px; height: 28px; font-size: 10px; flex-shrink: 0; }
.cmt-body { flex: 1; min-width: 0; }
.cmt-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.cmt-meta strong { font-size: 13px; }
.cmt-date { color: var(--cinza-500); font-size: 11px; }
.cmt-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.cmt-del { opacity: 0; flex-shrink: 0; }
.cmt-item:hover .cmt-del { opacity: 0.5; }
.cmt-item:hover .cmt-del:hover { opacity: 1; }

/* ============ Responsivo ============ */
@media (max-width: 860px) {
  .topbar { display: flex; }
  .app { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 270px; max-width: 84vw;
    z-index: 50; transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.2, .9, .3, 1);
    box-shadow: var(--shadow-lg);
  }
  .app.nav-open .sidebar { transform: none; }
  .main { width: 100%; }
  .view { padding: 20px 15px 80px; }
  .page-head h1 { font-size: 21px; }
  .form-grid { grid-template-columns: 1fr; }
  .two-cols { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .stat-card .stat-value { font-size: 22px; }
  .toolbar { gap: 8px; }
  .toolbar input[type="search"] { min-width: 0; flex: 1 1 100%; }
  .toolbar select, .toolbar input[type="month"] { flex: 1 1 auto; }
  .chip-group { flex: 1 1 100%; }
  .chip-group button { flex: 1; justify-content: center; }
  th, td { padding: 11px 12px; }
  .modal-overlay { padding: 20px 10px; }
  .modal-body, .modal-head { padding-left: 18px; padding-right: 18px; }
  .toast-root { left: 14px; right: 14px; bottom: 14px; }
  .toast { width: 100%; }

  /* ---- Notificações mobile ---- */
  .notif-panel { width: calc(100vw - 24px) !important; left: 12px !important; right: 12px !important; top: 60px !important; }

  /* ---- Checklist mobile ---- */
  .cl-add-row { flex-wrap: wrap; }
  .cl-new-inp { flex: 1 1 100%; }
  .cl-new-date { flex: 1 1 calc(50% - 3px); }
  #cl-add-btn { flex: 1 1 calc(50% - 3px); }
  .cl-item { font-size: 13px; }

  /* ---- Kanban mobile — scroll horizontal ---- */
  .kanban { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

  /* ---- Tabela de tarefas mobile — oculta colunas menos importantes ---- */
  .td-sub { display: none; }
  thead th:nth-child(3), thead th:nth-child(4) { display: none; }

  /* ---- Cliente detalhe mobile ---- */
  .cd-stats-row { gap: 8px; }
  .cd-stat { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }
  .cd-proj-head { flex-wrap: wrap; gap: 6px; }

  /* ---- Editor de comentário mobile ---- */
  .cmt-input { flex-wrap: wrap; }
  .cmt-editor { flex: 1 1 100%; }
  #cmt-send { align-self: flex-end; }

  /* ---- Mention drop mobile ---- */
  .mention-drop { max-height: 200px; }
  .md-opt { padding: 10px 12px; }

  /* ---- Toast de notificação mobile ---- */
  .toast.notif-toast { max-width: 100%; }

  /* ---- Formulário de task mobile ---- */
  .modal.wide { max-width: 100%; margin: 0; border-radius: 18px 18px 0 0; position: fixed; bottom: 0; left: 0; right: 0; max-height: 94vh; overflow-y: auto; }
}
@media (max-width: 460px) {
  .stat-grid { grid-template-columns: 1fr; }
  .page-head { gap: 12px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; justify-content: center; }
  .detail-head .page-actions .btn { flex: 1 1 auto; }

  /* ---- Chips de filtro Hoje/Minhas/Todas — empilham ---- */
  .chip-group-scope { display: grid; grid-template-columns: 1fr 1fr; }
  .chip-group-scope button:first-child { grid-column: 1 / -1; }

  /* ---- Checklist em telas muito pequenas ---- */
  .cl-new-date { flex: 1 1 100%; }
  #cl-add-btn { flex: 1 1 100%; }

  /* ---- Cards kanban menores ---- */
  .task-card { padding: 10px 11px; }
}

/* ---- @mention picker ---- */
.mention-drop {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 500;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); backdrop-filter: blur(18px);
  max-height: 260px; overflow-y: auto;
}
.mention-drop.hidden { display: none; }
.md-group { padding: 4px 0; }
.md-group-lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--cinza-500); padding: 6px 12px 3px;
}
.md-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer; font-size: 13px; color: var(--escuro);
  transition: background .1s;
}
.md-opt:hover, .md-opt.focused { background: var(--cinza-100); }
.md-icon { font-size: 14px; flex-shrink: 0; }
.md-avatar {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.md-avatar-ini {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--roxo); color: #fff; font-size: 10px; font-weight: 700;
}
.md-lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmt-mention {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--roxo-claro); color: var(--roxo);
  border-radius: 5px; padding: 1px 6px; font-weight: 600; font-size: 12px;
  cursor: pointer; transition: background .12s;
}
.cmt-mention:hover { background: rgba(124,58,237,.3); }

/* ---- Roadmap ---- */
.rm-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--cinza-500); margin-top: 5px; align-items: center; }
.rm-meta .ic { width: 11px; height: 11px; }

.rm-upload-area {
  margin: 12px 0 4px;
  border: 2px dashed var(--border); border-radius: 12px;
  padding: 14px 16px; transition: border-color .15s, background .15s;
}
.rm-upload-area.drag { border-color: var(--roxo); background: var(--roxo-claro); }
.rm-upload-label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--cinza-500);
  transition: color .15s;
}
.rm-upload-label:hover { color: var(--roxo); }
.rm-upload-label .ic { width: 15px; height: 15px; }

.rm-att-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rm-prev-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 8px; font-size: 11px; color: var(--cinza-700);
}
.rm-prev-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 5px; }
.rm-prev-name { max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-prev-del { background: none; border: none; cursor: pointer; color: var(--cinza-500); font-size: 13px; padding: 0 2px; line-height: 1; }
.rm-prev-del:hover { color: var(--vermelho); }

.rm-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.rm-att {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 600;
  color: var(--cinza-700); text-decoration: none; transition: border-color .12s;
}
.rm-att:hover { border-color: var(--roxo); color: var(--roxo); }
.rm-att-img img { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; display: block; }
.rm-att-img { padding: 4px; }

/* ---- Cliente detalhe — tarefas ---- */
.cd-stats-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px;
}
.cd-stat {
  flex: 1 1 90px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.cd-stat-val { font-size: 24px; font-weight: 800; color: var(--escuro); letter-spacing: -.03em; }
.cd-stat-lbl { font-size: 11px; font-weight: 700; color: var(--cinza-500); text-transform: uppercase; letter-spacing: .8px; }
.cd-stat-green .cd-stat-val { color: var(--verde); }
.cd-stat-red   .cd-stat-val { color: var(--vermelho); }
.cd-stat-orange .cd-stat-val { color: var(--laranja); }

.cd-tasks-wrap { display: flex; flex-direction: column; gap: 16px; }
.cd-proj-block { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.cd-proj-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.cd-proj-name { font-size: 13px; font-weight: 700; color: var(--escuro); text-decoration: none; display: flex; align-items: center; gap: 5px; }
.cd-proj-name:hover { color: var(--roxo); }
.cd-proj-name .ic { width: 13px; height: 13px; }
.cd-proj-pct { font-size: 11px; color: var(--cinza-500); margin-left: auto; }
.progress-bar.mini { width: 70px; height: 4px; background: var(--cinza-300); border-radius: 4px; overflow: hidden; }

.cd-task-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .12s;
}
.cd-task-row:last-child { border-bottom: none; }
.cd-task-row:hover { background: var(--cinza-100); }
.cd-task-late { border-left: 3px solid var(--vermelho); background: rgba(251,113,133,.04); }
.cd-task-today { border-left: 3px solid var(--laranja); background: rgba(253,186,116,.04); }
.cd-task-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cd-task-title { font-size: 13px; font-weight: 600; color: var(--escuro); display: flex; align-items: center; gap: 5px; }
.cd-task-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cd-task-right { flex-shrink: 0; }
.ptm-today { color: var(--laranja) !important; border-color: rgba(253,186,116,.3); background: var(--laranja-bg); }

.cd-done-details summary {
  cursor: pointer; font-size: 13px; font-weight: 700;
  color: var(--cinza-500); padding: 4px 0; list-style: none;
}
.cd-done-details summary::before { content: '▶ '; font-size: 10px; }
.cd-done-details[open] summary::before { content: '▼ '; }
.cd-done-details .cd-task-title { opacity: .5; text-decoration: line-through; }

/* ---- Task grouping ---- */
.task-group { margin-bottom: 24px; }
.task-group-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: var(--cinza-500);
  padding: 0 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.task-group-count {
  background: var(--cinza-300); color: var(--cinza-700);
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 99px;
}

/* ---- Searchable select ---- */
.search-sel { position: relative; }
.ss-inp { width: 100%; }
.ss-drop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 300;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px); overflow: hidden;
}
.ss-drop.hidden { display: none; }
.ss-list { max-height: 200px; overflow-y: auto; }
.ss-opt {
  padding: 8px 12px; font-size: 13px; cursor: pointer;
  color: var(--escuro); transition: background .1s;
}
.ss-opt:hover, .ss-opt.ss-sel { background: var(--cinza-100); }
.ss-opt.ss-sel { color: var(--roxo); font-weight: 600; }
.ss-empty { padding: 8px 12px; font-size: 12px; color: var(--cinza-500); }
.ss-create {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; background: none; border: none;
  border-top: 1px solid var(--border); color: var(--roxo);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .1s;
}
.ss-create:hover { background: var(--roxo-claro); }

/* Mini modal de criação rápida */
.ss-quick-create {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 400;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg); backdrop-filter: blur(16px);
}
.sqc-inner { padding: 14px; }
.sqc-inner strong { font-size: 13px; font-weight: 700; color: var(--escuro); }

/* ---- Sino fixo no canto superior direito ---- */
/* Sino da sidebar — visível só no desktop */
#btn-bell-sb { display: flex; }
@media (max-width: 860px) { #btn-bell-sb { display: none; } }

/* Sino da topbar — visível só no mobile */
#btn-bell { display: none; }
@media (max-width: 860px) { #btn-bell { display: flex; } }

/* ---- Topbar right ---- */
.topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* ---- Bell button ---- */
.btn-bell {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cinza-700);
  padding: 6px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.btn-bell:hover { background: var(--cinza-300); color: var(--escuro); }
.bell-badge {
  position: absolute;
  top: 3px; right: 3px;
  background: var(--vermelho);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}
.bell-badge.hidden { display: none; }

/* ---- Notification panel ---- */
#notif-panel-root { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 9999; pointer-events: none; }
.notif-panel {
  position: fixed;
  width: 340px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  backdrop-filter: blur(18px);
  overflow: hidden;
  pointer-events: all;
  animation: fadeSlideDown .18s ease;
}
.notif-panel.hidden { display: none; }
.np-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.np-head h3 { font-size: 13px; font-weight: 700; color: var(--escuro); margin: 0; }
.np-clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--cinza-500);
  padding: 3px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.np-clear:hover { background: var(--cinza-300); color: var(--escuro); }
.np-list { max-height: 360px; overflow-y: auto; }
.np-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
}
.np-item:last-child { border-bottom: none; }
.np-item:hover { background: var(--cinza-100); }
.np-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.np-body { flex: 1; min-width: 0; }
.np-title { font-size: 12px; font-weight: 600; color: var(--escuro); margin-bottom: 2px; }
.np-text { font-size: 11px; color: var(--cinza-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-time { font-size: 10px; color: var(--cinza-500); margin-top: 3px; }
.np-empty { padding: 28px 16px; text-align: center; color: var(--cinza-500); font-size: 13px; }
.np-item { cursor: pointer; position: relative; }
.np-unread { background: rgba(124,58,237,.06); }
.np-unread .np-title { font-weight: 700; }
.np-read { opacity: .6; }
.np-dot {
  position: absolute; top: 12px; right: 12px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--roxo); flex-shrink: 0;
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}