:root{
  --bg: #f5f7fb;
  --panel: #ffffff;
  --line: #e6ebf2;
  --text: #172033;
  --muted: #6b7280;
  --green: #14b86a;
  --yellow: #f4b740;
  --blue: #2f6fed;
  --red: #eb5757;
  --shadow: 0 10px 30px rgba(16,24,40,.06);
  --radius: 18px;
}

* { box-sizing: border-box; }

body{
  margin:0;
  font-family: Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app{
  max-width: 1680px;
  margin: 0 auto;
  padding: 28px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 24px;
}

.title-wrap h1{
  margin:0;
  font-size: 28px;
  font-weight: 800;
}

.title-wrap p{
  margin:8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.actions{
  display:flex;
  gap:10px;
}

.btn{
  border:1px solid var(--line);
  background:#fff;
  color: var(--text);
  border-radius: 12px;
  padding: 12px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}

.btn.danger{
  background:#fff4f4;
  color:#b42318;
  border-color:#ffd5d2;
}

.summary{
  display:grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  gap:14px;
  margin-bottom: 20px;
}

.card{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.metric-label{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.metric-value{
  font-size: 28px;
  font-weight: 800;
}

.table-wrap{
  background: var(--panel);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  min-width: 1600px;
}

thead th{
  background: #fbfcfe;
  color: var(--muted);
  font-size:12px;
  text-transform: uppercase;
  text-align:left;
  padding: 14px 12px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}

tbody td{
  padding: 14px 12px;
  border-bottom:1px solid var(--line);
  vertical-align: middle;
  font-size: 14px;
  white-space: nowrap;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
}

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

.active{ background: var(--green); }
.idle{ background: var(--yellow); }
.gone{ background: #9ca3af; }

.product, .page{
  max-width: 240px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size:12px;
  font-weight:700;
}

.meta{ background: #eef4ff; color: var(--blue); }
.google{ background: #eef8f0; color: #239c52; }
.email{ background: #fff4e8; color: #ca6a04; }
.direct{ background: #f3f4f6; color: #4b5563; }
.whatsapp{ background: #eafbf1; color: #0f9f58; }

.hot{ background: #ffefef; color: var(--red); }
.warm{ background: #fff7e6; color: #b7791f; }
.cold{ background: #eef2f7; color: #667085; }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color:#334155;
}

.login-body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.login-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow: var(--shadow);
  padding:32px;
}

.login-brand{
  font-size:13px;
  color:var(--muted);
  margin-bottom:12px;
}

.login-card h1{
  margin:0 0 10px;
  font-size:32px;
}

.login-card p{
  margin:0 0 24px;
  color:var(--muted);
}

.login-form{
  display:grid;
  gap:12px;
}

.login-form input{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  font-size:24px;
  letter-spacing:6px;
  text-align:center;
}

.login-form button{
  border:none;
  border-radius:14px;
  padding:14px 16px;
  font-size:16px;
  font-weight:700;
  background:#172033;
  color:#fff;
  cursor:pointer;
}

.login-message{
  min-height:20px;
  color:#b42318;
  font-size:14px;
}

@media (max-width: 1300px){
  .summary{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 800px){
  .topbar{ flex-direction:column; align-items:flex-start; }
  .summary{ grid-template-columns: 1fr 1fr; }
  .app{ padding:16px; }
}