:root{
  --bg: #0a0e14;
  --bg-panel: #10151f;
  --bg-panel-2: #141b28;
  --line: #212b3d;
  --copper: #e0935b;
  --pcb-green: #3fa77c;
  --red: #e05b5b;
  --text: #edede3;
  --text-muted: #8b93a7;
  --radius: 10px;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'Manrope', sans-serif;
}
*{ box-sizing: border-box; }
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--sans); line-height:1.5;
}
.hidden{ display:none !important; }
.wrap{ max-width: 1100px; margin:0 auto; padding: 32px 24px; }

button{ cursor:pointer; font-family: var(--mono); font-weight:600; font-size:13.5px; border-radius:8px; border:none; padding:11px 18px; }
.btn-primary{ background: var(--copper); color:#1a1207; }
.btn-primary:hover{ background:#eba471; }
.btn-ghost{ background:transparent; border:1px solid var(--line); color: var(--text); }
.btn-ghost:hover{ border-color: var(--copper); color: var(--copper); }

input, select, textarea{
  width:100%; background: var(--bg-panel); border:1px solid var(--line); color: var(--text);
  border-radius:8px; padding:11px 13px; font-family: var(--sans); font-size:14px; margin-bottom:14px;
}
label{ font-family: var(--mono); font-size:12px; color: var(--text-muted); display:block; margin-bottom:6px; }
textarea{ resize:vertical; min-height:70px; }

/* Login */
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card{
  width:100%; max-width:360px; background: var(--bg-panel); border:1px solid var(--line);
  border-radius: var(--radius); padding:36px;
}
.login-card h1{ font-family: var(--mono); margin:0 0 4px; }
.subtitle{ color: var(--text-muted); font-size:13.5px; margin: 0 0 24px; }
.error-text{ color: var(--red); font-size:13px; min-height:16px; margin:4px 0 0; }

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; border-bottom:1px solid var(--line); background: rgba(10,14,20,0.85);
}
.brand{ font-family: var(--mono); font-weight:600; }
.brand span{ color: var(--copper); }
.topbar-right{ display:flex; align-items:center; gap:16px; }
#current-user{ font-family: var(--mono); font-size:12.5px; color: var(--text-muted); }

/* Toolbar */
.toolbar{ display:flex; justify-content:space-between; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.toolbar-left{ display:flex; gap:12px; flex:1; min-width:280px; }
.toolbar-left input{ margin:0; flex:1; }
.toolbar-left select{ margin:0; max-width:160px; }

/* Table */
table{ width:100%; border-collapse:collapse; background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
th, td{ text-align:left; padding:14px 16px; font-size:14px; border-bottom:1px solid var(--line); }
th{ font-family: var(--mono); font-size:11.5px; color: var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
tbody tr:hover{ background: var(--bg-panel-2); cursor:pointer; }
.empty-state{ text-align:center; color: var(--text-muted); padding:40px 0; }

.status-pill{
  font-family: var(--mono); font-size:11px; padding:4px 10px; border-radius:20px; display:inline-block;
}
.status-NEW{ background:rgba(224,147,91,0.15); color: var(--copper); }
.status-CONTACTED{ background:rgba(63,167,124,0.15); color: var(--pcb-green); }
.status-CONVERTED{ background:rgba(63,167,124,0.3); color: var(--pcb-green); }
.status-LOST{ background:rgba(224,91,91,0.15); color: var(--red); }

.row-actions button{ padding:6px 10px; font-size:11px; }

/* Modal */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal-card{
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  background: var(--bg-panel); border:1px solid var(--line); border-radius: var(--radius); padding:28px;
}
.modal-card h2{ font-family: var(--mono); margin:0 0 20px; font-size:19px; }
.modal-actions{ display:flex; gap:12px; justify-content:flex-end; margin-top:8px; }
hr{ border:none; border-top:1px solid var(--line); margin:20px 0; }
#notes-section h3{ font-family: var(--mono); font-size:14px; margin-bottom:12px; }
.note-item{ background: var(--bg-panel-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:8px; font-size:13.5px; }
.note-item .note-time{ display:block; font-family: var(--mono); font-size:11px; color: var(--text-muted); margin-top:4px; }

.toast{
  position:fixed; bottom:24px; right:24px; background: var(--pcb-green); color:#08130e;
  font-family: var(--mono); font-size:13px; padding:12px 18px; border-radius:8px; z-index:200;
}
.toast.error{ background: var(--red); color:#1a0707; }

@media (max-width: 640px){
  table, thead, tbody, th, td, tr{ display:block; }
  thead{ display:none; }
  tbody tr{ margin-bottom:12px; border:1px solid var(--line); border-radius:8px; }
  td{ border:none; padding:8px 16px; }
  td::before{ content: attr(data-label); font-family: var(--mono); font-size:10.5px; color: var(--text-muted); display:block; }
}