:root{
  --anchor:#0b5394;
  --bg-1:#eaf4ff;
  --bg-2:#d7ebff;
  --paper:#f7fbff;
  --ink:#16324f;
  --font-display:'Press Start 2P', monospace;
  --font-body:'VT323', monospace;
  --brand-1:#2f80ed;
  --brand-2:#56ccf2;
  --brand-solid:#2f80ed;
  --pixel-black:#16324f;
}

body{
  background:var(--bg-1);
  image-rendering:pixelated;
}

body::before{
  content:"";
  position:fixed; inset:0; z-index:0;
  background-image:
    linear-gradient(90deg, rgba(11,83,148,.12) 2px, transparent 2px),
    linear-gradient(0deg, rgba(11,83,148,.12) 2px, transparent 2px);
  background-size:32px 32px;
  animation:pixelScroll 1s linear infinite;
  pointer-events:none;
}
@keyframes pixelScroll{
  from{ background-position:0 0; }
  to{ background-position:32px 32px; }
}

.noise{display:none;}

.logo{
  font-size:1.4rem;
  letter-spacing:1px;
  text-shadow:3px 3px 0 var(--brand-solid);
}
.logo span{color:var(--brand-2);}

.stage{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:78vh; padding:20px 16px 60px;}

/* -------- LOGIN -------- */
.login-panel{
  background:var(--paper); border-radius:0; padding:44px 40px; max-width:420px; width:100%;
  text-align:center; border:4px solid var(--pixel-black); box-shadow:8px 8px 0 0 var(--pixel-black);
}
.login-panel h1{font-family:var(--font-display); font-size:1.2rem; margin:0 0 10px;}
.login-panel .sub{font-family:var(--font-body); font-size:1.2rem; opacity:.75; margin:0 0 26px;}
.login-panel .field{margin-bottom:16px; text-align:left;}
.login-panel .field label{
  display:block; font-family:var(--font-body); font-size:1.05rem; color:var(--brand-solid);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px;
}
.login-panel .field input{
  width:100%; padding:12px 14px; border-radius:0; border:3px solid var(--pixel-black);
  font-family:var(--font-body); font-size:1.2rem; outline:none; background:#ffffff;
}
.login-panel .field input:focus{border-color:var(--anchor);}
.login-error{color:#e0524b; font-family:var(--font-body); font-size:1.1rem; margin:0 0 14px;}
.btn-login{
  width:100%; padding:14px; border:3px solid var(--pixel-black); border-radius:0; background:var(--brand-solid);
  color:#fff; font-family:var(--font-display); font-size:.85rem; cursor:pointer;
  box-shadow:5px 5px 0 0 var(--pixel-black); transition:.08s;
}
.btn-login:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 0 var(--pixel-black);}
.btn-login:active{transform:translate(5px,5px); box-shadow:0 0 0 0 var(--pixel-black);}

/* -------- LEADS PAGE -------- */
.leads-page{width:min(94vw, 1100px);}
.leads-page-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  margin-bottom:20px;
}
.leads-page-header h1{font-family:var(--font-display); font-size:1.2rem; color:var(--ink); margin:0;}
.leads-page-actions{display:flex; gap:10px; flex-wrap:wrap;}
.btn-small{
  border:3px solid var(--pixel-black); border-radius:0; padding:10px 16px; background:var(--paper);
  color:var(--ink); font-family:var(--font-body); font-size:1.1rem; cursor:pointer;
  box-shadow:3px 3px 0 0 var(--pixel-black); transition:.08s;
}
.btn-small:hover{background:var(--brand-2); color:#fff; transform:translate(-2px,-2px); box-shadow:5px 5px 0 0 var(--pixel-black);}
.btn-small:active{transform:translate(3px,3px); box-shadow:0 0 0 0 var(--pixel-black);}

.table-wrap{
  background:var(--paper); border:4px solid var(--pixel-black); box-shadow:8px 8px 0 0 var(--pixel-black);
  overflow-x:auto;
}
table{width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:1.05rem;}
thead th{
  text-align:left; padding:12px 14px; background:var(--anchor); color:#fff;
  font-family:var(--font-display); font-size:.68rem; text-transform:uppercase; letter-spacing:.5px;
  white-space:nowrap;
}
tbody td{padding:10px 14px; border-bottom:1px solid var(--bg-2); white-space:nowrap;}
tbody tr:hover{background:var(--bg-1);}
.leads-empty{opacity:.5; text-align:center; padding:24px;}

.pagination{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; flex-wrap:wrap;}
.page-btn{
  min-width:36px; height:36px; padding:0 8px; border:3px solid var(--pixel-black); border-radius:0;
  background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:1.1rem; cursor:pointer;
  box-shadow:3px 3px 0 0 var(--pixel-black); transition:.08s;
}
.page-btn:hover{background:var(--brand-2); color:#fff; transform:translate(-1px,-1px); box-shadow:4px 4px 0 0 var(--pixel-black);}
.page-btn:active{transform:translate(3px,3px); box-shadow:0 0 0 0 var(--pixel-black);}
.page-btn.current{background:var(--brand-solid); color:#fff;}
.page-btn:disabled{opacity:.35; cursor:default; pointer-events:none;}
.page-ellipsis{padding:0 4px; font-family:var(--font-body); font-size:1.1rem; color:var(--ink); opacity:.6;}

.hidden{display:none !important;}

@media(max-width:640px){
  table{font-size:.95rem;}
  thead th, tbody td{padding:8px 10px;}
}