:root{
  --bg:#0a0e14;
  --panel:#111826;
  --panel-2:#0d1320;
  --border:#1f2937;
  --border-soft:#182233;
  --text:#e5e9f0;
  --text-dim:#8b94a7;
  --text-faint:#5b6577;
  --blue:#2f8fff;
  --blue-dim:#1c4d8f;
  --green:#22c55e;
  --red:#ef4444;
  --orange:#f5a623;
  --radius:6px;
  --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.45;
  min-height:100vh;
}
a{color:var(--blue);}
button{font-family:inherit;}

.hidden{display:none !important;}

/* ---------- Login screen ---------- */
#loginScreen{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.login-box{
  width:100%;
  max-width:360px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 28px;
}
.login-logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:700;
  margin-bottom:4px;
}
.login-logo .cp-white{color:var(--text);}
.login-logo .cp-blue{color:var(--blue);}
.login-sub{
  color:var(--text-dim);
  font-size:13px;
  margin-bottom:24px;
}
.field{margin-bottom:14px;}
.field label{
  display:block;
  font-size:12px;
  color:var(--text-dim);
  margin-bottom:6px;
}
.field input{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  padding:10px 12px;
  font-size:14px;
}
.field input:focus{
  outline:none;
  border-color:var(--blue-dim);
}
.btn{
  border:1px solid var(--border);
  background:var(--panel-2);
  color:var(--text);
  border-radius:var(--radius);
  padding:9px 14px;
  font-size:13px;
  cursor:pointer;
}
.btn:hover{border-color:var(--blue-dim);}
.btn-primary{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  width:100%;
  padding:11px 14px;
  font-weight:600;
  margin-top:6px;
}
.btn-primary:hover{background:#3f9bff;}
.btn-primary:disabled{opacity:.6;cursor:default;}
.login-error{
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.35);
  color:#f4a3a3;
  border-radius:var(--radius);
  padding:9px 12px;
  font-size:13px;
  margin-bottom:14px;
}

/* ---------- Dashboard shell ---------- */
#dashboardScreen{padding:20px 24px 60px;max-width:1400px;margin:0 auto;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--border);
}
.topbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:700;}
.brand .cp-white{color:var(--text);}
.brand .cp-blue{color:var(--blue);}
.page-title{
  color:var(--text-dim);
  font-size:13px;
  border-left:1px solid var(--border);
  padding-left:14px;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:4px 9px;
  border-radius:20px;
  border:1px solid var(--border);
  color:var(--text-dim);
}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);}
.status-pill.ok .status-dot{background:var(--green);}
.status-pill.err .status-dot{background:var(--red);}
.last-update{font-size:12px;color:var(--text-faint);}

.topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.icon-btn{display:inline-flex;align-items:center;gap:6px;}
.spinner{
  width:12px;height:12px;
  border:2px solid var(--border);
  border-top-color:var(--blue);
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Filters ---------- */
.filters{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  margin-bottom:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
}
.filter-group{display:flex;flex-direction:column;gap:5px;}
.filter-group label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.03em;}
.filter-group select,.filter-group input[type="date"]{
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius);
  padding:7px 9px;
  font-size:13px;
}
.preset-group{display:flex;gap:6px;flex-wrap:wrap;}
.preset-btn{
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:var(--radius);
  padding:7px 12px;
  font-size:12px;
  cursor:pointer;
}
.preset-btn.active{
  background:rgba(47,143,255,.15);
  border-color:var(--blue-dim);
  color:var(--blue);
}

/* ---------- Stat cards ---------- */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
  margin-bottom:20px;
}
.stat-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
}
.stat-label{
  font-size:11px;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:6px;
}
.stat-value{font-size:22px;font-weight:700;color:var(--text);}
.stat-value.blue{color:var(--blue);}
.stat-value.green{color:var(--green);}
.stat-value.red{color:var(--red);}
.stat-value.orange{color:var(--orange);}

/* ---------- Section headers ---------- */
.section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:20px;
}
.section h2{
  font-size:14px;
  margin:0 0 14px;
  color:var(--text);
  font-weight:600;
}

/* ---------- Funnel ---------- */
.funnel{display:flex;flex-direction:column;gap:0;}
.funnel-step{
  display:grid;
  grid-template-columns:170px 1fr 90px 90px;
  align-items:center;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--border-soft);
}
.funnel-step:last-child{border-bottom:none;}
.funnel-name{font-size:13px;color:var(--text-dim);}
.funnel-bar-track{
  background:var(--panel-2);
  border-radius:4px;
  height:10px;
  overflow:hidden;
}
.funnel-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue-dim),var(--blue));
  border-radius:4px;
}
.funnel-count{font-size:13px;font-weight:600;text-align:right;}
.funnel-pct{font-size:12px;color:var(--text-faint);text-align:right;}

/* ---------- Charts ---------- */
.charts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:20px;
}
.chart-box{height:240px;position:relative;}
@media (max-width:900px){
  .charts-grid{grid-template-columns:1fr;}
}

/* ---------- Table ---------- */
.table-toolbar{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.table-toolbar input[type="search"]{
  background:var(--panel-2);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:var(--radius);
  padding:7px 10px;
  font-size:13px;
  min-width:200px;
}
.table-wrap{overflow-x:auto;}
table.events-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
  min-width:1100px;
}
table.events-table th{
  text-align:left;
  color:var(--text-faint);
  font-weight:600;
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.03em;
  padding:8px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
}
table.events-table th:hover{color:var(--text-dim);}
table.events-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
  color:var(--text);
}
table.events-table tr:hover td{background:rgba(255,255,255,.02);}
.null-val{color:var(--text-faint);font-style:italic;}
.badge{
  display:inline-block;
  padding:2px 7px;
  border-radius:4px;
  font-size:11px;
  border:1px solid var(--border);
}
.badge.win{color:var(--green);border-color:rgba(34,197,94,.4);}
.badge.loss{color:var(--red);border-color:rgba(239,68,68,.4);}
.badge.up{color:var(--green);}
.badge.down{color:var(--red);}
.expand-btn{
  background:none;border:1px solid var(--border);color:var(--text-dim);
  border-radius:4px;padding:3px 8px;font-size:11px;cursor:pointer;
}
.json-row td{white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--text-dim);background:var(--panel-2);}

.pagination{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  margin-top:12px;
  font-size:12px;
  color:var(--text-dim);
}

.empty-msg,.error-msg{
  padding:24px;
  text-align:center;
  color:var(--text-faint);
  font-size:13px;
}
.error-msg{color:#f4a3a3;}

footer.dash-footer{
  text-align:center;
  color:var(--text-faint);
  font-size:11.5px;
  padding:20px 0 0;
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  #dashboardScreen{padding:14px 12px 40px;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .funnel-step{grid-template-columns:110px 1fr 60px 60px;gap:8px;}
  .page-title{border-left:none;padding-left:0;}
  .topbar{flex-direction:column;align-items:flex-start;}
}