/* Minimal, clean, mobile-first */
:root{
  --bg:#0b0d12;
  --card:#121624;
  --card2:#0f1320;
  --text:#f2f4f8;
  --muted:#a8b0c0;
  --line:#27304a;
  --accent:#7c5cff;
  --accent2:#23c483;
  --danger:#ff5c7a;
  --warn:#ffbf3d;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--text);}
a{color:inherit}
code{background:#0a0d16;border:1px solid var(--line);padding:.12rem .35rem;border-radius:.4rem}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:rgba(11,13,18,.92); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#2fd5ff);display:grid;place-items:center;font-weight:800}
.title{font-weight:800; letter-spacing:.2px}
.subtitle{font-size:.86rem; color:var(--muted)}
.actions{display:flex; gap:10px; align-items:center}

.wrap{max-width:1200px;margin:18px auto; padding:0 14px; display:flex; flex-direction:column; gap:14px}
.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.pill{border:1px solid var(--line); padding:6px 10px; border-radius:999px; color:var(--muted); font-size:.88rem}

.muted{color:var(--muted)}
h2{margin:0 0 10px 0}
h3{margin:0 0 6px 0}

.btn{
  border:1px solid var(--line);
  background:#0b0f1c;
  color:var(--text);
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
}
.btn:hover{border-color:#3b4a74}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:rgba(124,92,255,.16); border-color:rgba(124,92,255,.6)}
.btn.primary:hover{border-color:rgba(124,92,255,.95)}
.input{
  width:100%;
  background:#0b0f1c;
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 12px;
  border-radius:12px;
}
.toolbar{display:grid; gap:10px; grid-template-columns: 1fr; margin:10px 0 12px}
@media(min-width:780px){
  .toolbar{grid-template-columns: 1.4fr .8fr auto}
}

.dropzone{
  position:relative;
  border:1px dashed #3b4a74;
  border-radius:16px;
  padding:18px;
  cursor:pointer;
  background:rgba(124,92,255,.06);
}
.dropzone.dragover{border-color:rgba(47,213,255,.9); background:rgba(47,213,255,.08)}
.dropzone input{opacity:0; position:absolute; inset:0; width:100%; height:100%; cursor:pointer}
.dzInner{display:flex; gap:12px; align-items:center}
.dzIcon{font-size:26px}
.dzTitle{font-weight:800}
.dzHint{color:var(--muted); font-size:.9rem}

.details{margin-top:12px}
.grid2{display:grid; gap:12px; grid-template-columns: 1fr}
@media(min-width:780px){ .grid2{grid-template-columns: 1fr 1fr} }

.split{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:980px){ .split{grid-template-columns: 1.15fr .85fr} }

.panel{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#0a0d16}
.tableWrap{overflow:auto; max-height:64vh}
.table{width:100%; border-collapse:collapse; font-size:.93rem}
.table th, .table td{padding:10px 10px; border-bottom:1px solid #1f2740; vertical-align:top}
.table th{position:sticky; top:0; background:#0a0d16; text-align:left; z-index:2; font-size:.85rem; color:var(--muted)}
.table tr:hover{background:rgba(124,92,255,.06)}
.table .clickable{cursor:pointer}

.badge{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--line); font-size:.78rem; color:var(--muted); white-space:nowrap}
.badge.hot{border-color:rgba(35,196,131,.7); color:#bff4dd}
.badge.warn{border-color:rgba(255,191,61,.65); color:#ffe4a3}
.badge.danger{border-color:rgba(255,92,122,.7); color:#ffc0cb}
.badge.accent{border-color:rgba(124,92,255,.7); color:#d9d0ff}

.contactCard{padding:14px}
.leadHeader{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.leadName{font-size:1.15rem; font-weight:900; margin:0}
.leadMeta{margin-top:6px; display:flex; flex-wrap:wrap; gap:8px}
.hr{height:1px;background:#1f2740;margin:12px 0}

.form{display:grid; gap:10px; grid-template-columns: 1fr}
@media(min-width:980px){ .form.two{grid-template-columns: 1fr 1fr} }
.label{font-size:.85rem; color:var(--muted); margin-bottom:6px}
.field{display:flex; flex-direction:column}
textarea.input{min-height:90px; resize:vertical}

.footer{max-width:1200px;margin:10px auto 22px auto; padding:0 14px}
.dialog{border:none; border-radius:16px; padding:0; width:min(860px,92vw); background:#0a0d16; color:var(--text)}
.dialog::backdrop{background:rgba(0,0,0,.6)}
.dialogInner{padding:14px}
.dialogHeader{display:flex; align-items:center; justify-content:space-between; gap:10px}
.dialogFooter{display:flex; justify-content:flex-end; margin-top:10px}