:root {
  --jud-900: #022c22;
  --jud-800: #065f46;
  --jud-700: #047857;
  --jud-600: #059669;
  --jud-50: #ecfdf5;
  --amb-600: #d97706;
  --amb-500: #f59e0b;
  --amb-50: #fffbeb;
  --red-600: #dc2626;
  --red-50: #fef2f2;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-card: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.06);
  --shadow-drawer: -4px 0 24px rgba(0,0,0,.10);
  --shadow-modal: 0 8px 32px rgba(0,0,0,.14);
}

* { box-sizing: border-box; }
body { font-family: var(--font-sans); }
a { color: var(--jud-800); text-decoration: none; }
a:hover { color: var(--jud-700); }

.app-brand { font-weight: 700; font-size: 16px; color: var(--jud-800); letter-spacing: -.02em; }
.app-brand span { color: var(--amb-600); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:600; padding:10px 20px; border-radius:var(--radius-md); border:1.5px solid transparent; cursor:pointer; transition:background 150ms,border-color 150ms,color 150ms; text-decoration:none; }
.btn-primary { background:var(--jud-800); color:#fff; border-color:var(--jud-800); }
.btn-primary:hover { background:var(--jud-700); color:#fff; }
.btn-cta { background:var(--amb-600); color:#fff; border-color:var(--amb-600); }
.btn-cta:hover { background:var(--amb-500); color:#fff; }
.btn-secondary { background:#fff; color:var(--jud-800); border-color:var(--slate-300); }
.btn-secondary:hover { border-color:var(--jud-600); background:var(--jud-50); }
.btn-danger { background:#fff; color:var(--red-600); border-color:var(--red-600); }
.btn-danger:hover { background:var(--red-50); color:var(--red-600); }
.btn-ghost { background:transparent; color:var(--slate-700); padding:6px 10px; }
.btn-ghost:hover { background:var(--slate-100); color:var(--slate-900); }
.btn-sm { padding:6px 12px; font-size:13px; }
.btn-lg { padding:13px 28px; font-size:15px; }

.form-group { display:flex; flex-direction:column; gap:5px; }
.form-label { font-size:13px; font-weight:500; color:var(--slate-700); }
.form-input, .input, .select, textarea { width:100%; padding:10px 12px; font-size:14px; color:var(--slate-900); border:1.5px solid var(--slate-300); border-radius:var(--radius-md); transition:border-color 150ms,box-shadow 150ms; outline:none; background:#fff; }
.form-input:focus, .input:focus, .select:focus, textarea:focus { border-color:var(--jud-700); box-shadow:0 0 0 3px rgba(6,95,70,.12); }
.form-input.error { border-color:var(--red-600); }
textarea { min-height:96px; resize:vertical; }

.card { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:24px; }
.kpi { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius-lg); padding:16px 20px; position:relative; min-width:0; }
.kpi::before { content:''; position:absolute; top:0; left:0; width:3px; height:100%; border-radius:var(--radius-lg) 0 0 var(--radius-lg); background:var(--slate-200); }
.kpi.kpi-verde::before { background:var(--jud-700); }
.kpi.kpi-amarelo::before { background:var(--amb-600); }
.kpi.kpi-azul::before { background:#3b82f6; }
.kpi-num { font-size:26px; font-weight:700; color:var(--slate-900); }
.kpi-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--slate-500); }

.badge { display:inline-flex; align-items:center; font-size:11px; font-weight:600; letter-spacing:.04em; padding:3px 8px; border-radius:100px; white-space:nowrap; }
.estado-pendente { background:#fef9c3; color:#854d0e; }
.estado-em_contato { background:#dbeafe; color:#1e40af; }
.estado-qualificado { background:var(--jud-50); color:var(--jud-800); }
.estado-desqualificado { background:var(--slate-100); color:var(--slate-500); }
.estado-convertido { background:#dcfce7; color:#166534; }
.estado-nao_convertido { background:#fee2e2; color:#991b1b; }
.badge-novos { background:var(--amb-600); color:#fff; border-radius:100px; font-size:12px; font-weight:700; padding:2px 10px; animation:pulse-once 2s ease-out; }
@keyframes pulse-once { 0%{box-shadow:0 0 0 0 rgba(217,119,6,.45)} 60%{box-shadow:0 0 0 8px rgba(217,119,6,0)} 100%{box-shadow:none} }

.app-header { background:#fff; border-bottom:1px solid var(--slate-200); height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:40; }
.app-nav { display:flex; align-items:center; gap:4px; }
.app-nav a, .app-nav button { font-size:14px; font-weight:500; color:var(--slate-600); padding:6px 10px; border-radius:var(--radius-sm); text-decoration:none; transition:color 100ms,background 100ms; background:transparent; border:0; cursor:pointer; }
.app-nav a:hover, .app-nav button:hover { color:var(--jud-800); background:var(--jud-50); }
.app-nav a.active { color:var(--jud-800); font-weight:600; }
.app-content { padding:24px; max-width:1280px; margin:0 auto; }

.filter-bar { margin:16px 0; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.filter-bar #q { min-width:280px; flex:1; }
.tabela-leads { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.tabela-leads thead th { background:var(--slate-50); color:var(--slate-500); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:8px 12px; border-bottom:1px solid var(--slate-200); text-align:left; }
.tabela-leads tbody tr { background:#fff; border-bottom:1px solid var(--slate-100); transition:background 100ms; }
.tabela-leads tbody tr:hover { background:var(--jud-50); cursor:pointer; }
.tabela-leads tbody td { padding:10px 12px; vertical-align:middle; color:var(--slate-700); border-bottom:1px solid var(--slate-100); }
.tabela-leads .vazio { text-align:center; padding:32px 12px; color:var(--slate-500); }
.paginacao { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:14px 16px; font-size:13px; color:var(--slate-500); border-top:1px solid var(--slate-100); background:#fff; }
.paginacao a { font-weight:600; cursor:pointer; }

.drawer { position:fixed; right:0; top:0; height:100vh; width:420px; background:#fff; box-shadow:var(--shadow-drawer); overflow-y:auto; z-index:50; border-left:1px solid var(--slate-200); transform:translateX(100%); transition:transform 220ms cubic-bezier(.22,1,.36,1); }
.drawer:not(:empty) { transform:translateX(0); }
.drawer-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--slate-200); position:sticky; top:0; background:#fff; z-index:1; }
.drawer-header h2 { font-size:18px; font-weight:700; color:var(--slate-900); }
.drawer-section { padding:16px 20px; border-bottom:1px solid var(--slate-100); }
.drawer-section h3 { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--slate-400); margin-bottom:10px; }
.drawer-section p, .drawer-section li { font-size:14px; color:var(--slate-700); line-height:1.55; }

.alert { padding:10px 14px; border-radius:var(--radius-md); font-size:14px; border-left:3px solid transparent; margin-bottom:16px; }
.alert-error { background:var(--red-50); border-color:var(--red-600); color:#991b1b; }
.alert-success { background:var(--jud-50); border-color:var(--jud-700); color:var(--jud-800); }

.code-snippet { background:var(--slate-900); color:#e2e8f0; font-family:'Fira Code',Consolas,monospace; font-size:12px; padding:12px 14px; border-radius:var(--radius-md); overflow-x:auto; white-space:pre; line-height:1.6; }

.auth-layout { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-panel-brand { background:var(--jud-800); display:flex; flex-direction:column; justify-content:space-between; padding:48px; color:#fff; position:relative; overflow:hidden; }
.auth-panel-brand::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 80%,rgba(255,255,255,.04) 0%,transparent 50%), radial-gradient(circle at 80% 20%,rgba(255,255,255,.06) 0%,transparent 45%); pointer-events:none; }
.auth-panel-brand > * { position:relative; }
.auth-panel-brand .brand-headline { font-size:32px; font-weight:700; line-height:1.2; }
.auth-panel-brand .brand-sub { font-size:15px; opacity:.75; margin-top:12px; }
.auth-panel-form { background:#fff; display:flex; flex-direction:column; justify-content:center; padding:48px; max-width:460px; width:100%; margin:0 auto; }
.status-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--slate-50); padding:24px; }
.status-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-modal); padding:48px 40px; max-width:440px; width:100%; text-align:center; position:relative; overflow:hidden; }
.status-watermark { position:absolute; inset:auto 18px -30px auto; font-size:96px; font-weight:700; opacity:.08; color:var(--slate-900); line-height:1; }

.profile-row { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--slate-100); font-size:14px; }
.profile-row span:first-child { color:var(--slate-500); }
.profile-row span:last-child { color:var(--slate-900); font-weight:500; text-align:right; }
.danger-zone { border:1px solid #fecaca; background:var(--red-50); border-radius:var(--radius-lg); padding:16px; }
.danger-zone summary { cursor:pointer; color:var(--red-600); font-weight:700; }
.notas { display:flex; flex-direction:column; gap:8px; }
.notas li { background:var(--slate-50); border:1px solid var(--slate-100); border-radius:var(--radius-md); padding:10px 12px; }
.notas time { display:block; font-size:11px; color:var(--slate-500); margin-bottom:4px; }
.notas p { color:var(--slate-700); font-size:14px; line-height:1.5; }
.vazio { color:var(--slate-500); font-style:italic; }

@media(max-width:768px) {
  .auth-layout { grid-template-columns:1fr; }
  .auth-panel-brand { display:none; }
  .auth-panel-form { padding:32px 24px; }
  .app-header { padding:0 16px; }
  .app-content { padding:16px; }
  .drawer { width:100%; }
}