:root{
  --radius: 0.875rem;
  --background: oklch(0.988 0.003 240);
  --foreground: oklch(0.285 0.024 258);
  --card: oklch(1 0 0);
  --primary: oklch(0.452 0.163 259.5);
  --primary-foreground: oklch(0.995 0.005 205);
  --secondary: oklch(0.968 0.005 240);
  --secondary-foreground: oklch(0.325 0.024 258);
  --muted: oklch(0.605 0.018 258);
  --accent: oklch(0.795 0.152 84);
  --destructive: oklch(0.63 0.17 26);
  --success: oklch(0.635 0.155 144);
  --border: oklch(0.285 0.024 258 / 0.10);
  --sidebar: oklch(0.235 0.02 258);
  --sidebar-foreground: oklch(0.9 0.008 240);
  --sidebar-hover: oklch(0.975 0.004 240 / 0.08);
  --sidebar-primary: oklch(0.63 0.145 259.5);
  --font-display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-body);
  font-size:14.3px;
}
h1{font-family:var(--font-display);font-weight:700;font-size:24px;margin:0 0 4px;letter-spacing:-0.01em;}
.subtitulo{color:var(--muted);margin:0 0 20px;}

@keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.rise{animation:rise 480ms cubic-bezier(.32,.72,0,1) both;}

/* LOGIN */
.tela-login{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg, var(--background), oklch(0.96 0.01 258));
  padding:20px;
}
.tela-login[hidden]{display:none !important;}
.login-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 28px;
  width:100%;max-width:380px;
  box-shadow:0 20px 60px -20px oklch(0.285 0.024 258 / 0.25);
  text-align:center;
}
.login-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;}
.sino{font-size:26px;}
.marca{font-family:var(--font-display);font-weight:800;font-size:22px;}
.login-sub{color:var(--muted);font-size:13px;margin:0 0 24px;}
#form-login{text-align:left;}
#form-login label{display:block;font-size:12.5px;font-weight:600;margin:12px 0 6px;}
#form-login input{
  width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--border);
  background:var(--secondary);font-size:14px;outline:none;
}
#form-login input:focus{border-color:var(--primary);}
.login-erro{color:var(--destructive);font-size:13px;margin-top:10px;}
.login-dica{color:var(--muted);font-size:12px;margin-top:16px;}

.btn-primary{
  background:var(--primary);color:var(--primary-foreground);
  border:none;border-radius:9px;padding:10px 16px;font-weight:600;
  font-size:14px;cursor:pointer;
}
.btn-primary:hover{opacity:0.92;}
.btn-secundario{
  background:var(--secondary);color:var(--secondary-foreground);
  border:1px solid var(--border);border-radius:9px;padding:9px 15px;
  font-weight:600;font-size:13.5px;cursor:pointer;
}
.btn-texto{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13.5px;padding:8px;}
.btn-full{width:100%;margin-top:16px;}

/* APP LAYOUT */
.app{display:flex;min-height:100vh;}
.app[hidden]{display:none !important;}
.sidebar{
  width:220px;background:var(--sidebar);color:var(--sidebar-foreground);
  display:flex;flex-direction:column;padding:18px 12px;flex-shrink:0;
}
.sidebar-topo{display:flex;align-items:center;gap:8px;padding:6px 10px 20px;}
.marca-side{font-family:var(--font-display);font-weight:700;font-size:16.5px;}
.nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{
  text-align:left;background:none;border:none;color:var(--sidebar-foreground);
  padding:10px 12px;border-radius:8px;font-size:13.8px;cursor:pointer;
}
.nav-item:hover{background:var(--sidebar-hover);}
.nav-item.ativo{background:var(--sidebar-primary);color:white;font-weight:600;}
.nav-sair{
  background:none;border:none;color:oklch(0.9 0.008 240 / 0.6);
  text-align:left;padding:10px 12px;cursor:pointer;font-size:13px;
}
.nav-sair:hover{color:white;}

.conteudo{flex:1;padding:32px 40px;max-width:900px;}
.view[hidden]{display:none;}

.cards-topo{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px;
}
.card-label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);}
.card-valor{font-family:var(--font-display);font-size:28px;font-weight:700;margin-top:6px;}
.card-titulo{font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:12px;}

.tabela{width:100%;border-collapse:collapse;font-size:13.3px;}
.tabela th{text-align:left;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--border);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;}
.tabela td{padding:9px 8px;border-bottom:1px solid var(--border);}
.badge{padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;}
.badge.lead{background:oklch(0.795 0.152 84 / 0.18);color:oklch(0.5 0.1 84);}
.badge.venda{background:oklch(0.635 0.155 144 / 0.18);color:oklch(0.4 0.1 144);}

/* WHATSAPP */
.status-linha{display:flex;align-items:center;gap:9px;font-weight:600;}
.bolinha{width:10px;height:10px;border-radius:50%;display:inline-block;}
.bolinha.conectado{background:var(--success);}
.bolinha.desconectado{background:var(--destructive);}

.modal-overlay{
  position:fixed;inset:0;background:oklch(0.1 0 0 / 0.5);
  display:flex;align-items:center;justify-content:center;z-index:50;
}
.modal-overlay[hidden]{display:none !important;}
.modal-card{background:var(--card);border-radius:var(--radius);padding:24px;width:100%;max-width:360px;}
.modal-card h3{font-family:var(--font-display);margin:0 0 14px;}
.modal-tabs{display:flex;gap:4px;background:var(--secondary);padding:3px;border-radius:8px;margin-bottom:16px;}
.tab-btn{flex:1;border:none;background:none;padding:7px;border-radius:6px;font-size:12.8px;cursor:pointer;font-weight:600;}
.tab-btn.ativo{background:var(--card);}
.tab-content[hidden]{display:none;}
.qr-fake{
  font-family:var(--font-mono);text-align:center;background:var(--secondary);
  padding:30px 10px;border-radius:9px;font-size:22px;letter-spacing:4px;
}
.codigo-fake{
  font-family:var(--font-mono);text-align:center;background:var(--secondary);
  padding:24px 10px;border-radius:9px;font-size:22px;font-weight:700;letter-spacing:3px;
}
.dica-modal{color:var(--muted);font-size:12.5px;margin-top:10px;text-align:center;}

/* CONVERSAS */
.lista-conversas{display:flex;flex-direction:column;gap:8px;}
.conversa-item{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  padding:14px 16px;display:flex;justify-content:space-between;align-items:center;
}
.conversa-nome{font-weight:600;}
.conversa-preview{color:var(--muted);font-size:12.8px;margin-top:2px;}
.conversa-meta{text-align:right;font-size:11.5px;color:var(--muted);}

/* RASTREIO */
.codigo-bloco{
  background:oklch(0.205 0.018 258);color:oklch(0.9 0.01 150);
  font-family:var(--font-mono);font-size:12.6px;padding:14px;border-radius:9px;
  overflow-x:auto;margin:0 0 12px;
}
.resultado-teste{
  margin-top:12px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:600;
  background:oklch(0.635 0.155 144 / 0.15);color:oklch(0.4 0.1 144);
}

/* REGRAS */
.label-form{display:block;font-weight:600;margin-bottom:8px;font-size:13.5px;}
#regras-texto{
  width:100%;padding:12px;border-radius:9px;border:1px solid var(--border);
  background:var(--secondary);font-family:var(--font-body);font-size:13.6px;resize:vertical;
}
.checkboxes{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap;}
.checkboxes label{display:flex;align-items:center;gap:6px;font-size:13.3px;}
.salvo-msg{color:var(--success);font-weight:600;margin-left:10px;font-size:13px;}

@media (max-width:720px){
  .app{flex-direction:column;}
  .sidebar{width:100%;flex-direction:row;overflow-x:auto;padding:10px;}
  .sidebar-topo{display:none;}
  .nav{flex-direction:row;}
  .nav-sair{display:none;}
  .conteudo{padding:20px;}
  .cards-topo{grid-template-columns:1fr;}
}