:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --primary-light: #eeebff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --bg-main: #f8fafc;
  --navbar-h: 64px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
body { background:var(--bg-main); color:var(--text-main); min-height:100vh; }

/* ── NAVBAR ── */
.navbar {
  height:var(--navbar-h); background:rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border); display:flex; align-items:center;
  justify-content:space-between; padding:0 32px; position:sticky; top:0; z-index:100;
}
.nav-logo { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; color:var(--primary); letter-spacing:-0.5px; }
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-back {
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--text-muted); text-decoration:none; padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background: white; transition:.2s ease; box-shadow: var(--shadow-sm);
}
.nav-back:hover { color:var(--text-main); background:var(--bg-main); border-color:#cbd5e1; }

/* ── PAGE LAYOUT ── */
.page { max-width:1400px; margin:0 auto; padding:32px 32px 60px; }

/* ── PAGE HEADER ── */
.page-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:16px; }
.page-title { font-size:26px; font-weight:800; letter-spacing:-0.5px; }
.page-sub   { font-size:14px; color:var(--text-muted); margin-top:4px; }

/* ── PIPELINE STATS ── */
.pipeline {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-bottom:28px;
}
.pipeline-card {
  background:white; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; cursor:pointer; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between; box-shadow: var(--shadow-sm);
}
.pipeline-card:hover { border-color:var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pipeline-card.active { border-color:var(--primary); background:var(--primary-light); }
.pipeline-card .count { font-size:32px; font-weight:800; margin:8px 0 2px; letter-spacing:-1px; }
.pipeline-card .label { font-size:11px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.6px; }
.pipeline-card .bar { position:absolute; bottom:0; left:0; right:0; height:4px; }

/* ── TOOLBAR ── */
.toolbar {
  display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; align-items:center;
  background: white; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.search-wrap { position:relative; flex:2; min-width:240px; }
.search-wrap i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:14px; }
.search-input {
  width:100%; height:40px; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:0 12px 0 40px; font-size:13px; background:var(--bg-main); outline:none;
  transition:.15s ease;
}
.search-input:focus { border-color:var(--primary); background: white; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }

select.filter-sel {
  flex: 1; min-width: 140px; height:40px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:0 12px;
  font-size:13px; background:white; cursor:pointer; outline:none; color:#334155; font-weight: 500;
  transition: border-color .15s;
}
select.filter-sel:focus { border-color: var(--primary); }

/* ── BUTTONS ── */
.btn {
  height:40px; padding:0 18px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  cursor:pointer; border:none; display:inline-flex; align-items:center; gap:8px;
  transition:.15s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-sm);
}
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-ghost { background:white; color:#334155; border:1px solid var(--border); }
.btn-ghost:hover { background:var(--bg-main); color:var(--text-main); }
.btn-green { background:#10b981; color:white; }
.btn-green:hover { background:#059669; }

/* ── TABLE ── */
.table-wrap {
  background:white; border:1px solid var(--border); border-radius:var(--radius-lg); overflow-x:auto; box-shadow: var(--shadow-sm);
}
table { width:100%; border-collapse:collapse; text-align:left; }
thead { background:#f8fafc; border-bottom:1px solid var(--border); }
th {
  padding:14px 20px; font-size:11px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.8px; white-space:nowrap;
}
td { padding:16px 20px; font-size:13px; border-bottom:1px solid #f1f5f9; vertical-align:middle; color:#334155; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:#f8fafc; }

.place-name { font-weight:700; color:var(--text-main); margin-bottom:4px; font-size: 14px; }
.place-addr { font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:260px; }

/* ── BADGES & TAGS ── */
.status-badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px;
  font-size:11px; font-weight:700; white-space:nowrap; cursor:pointer; transition: opacity 0.15s;
}
.status-badge:hover { opacity: 0.85; }
.status-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }

.priority-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:6px; white-space:nowrap;
}

.rating { display:flex; align-items:center; gap:4px; font-size:13px; }
.rating .stars { color:#f59e0b; font-size: 14px; }

/* ── ACTION BUTTONS ── */
.action-btn {
  width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:white; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; font-size:14px; transition:.15s ease; color:#475569;
}
.action-btn:hover { background:var(--bg-main); border-color:#cbd5e1; color:var(--primary); }
.action-btn.wa   { color:#10b981; border-color:#a7f3d0; }
.action-btn.wa:hover { background:#ecfdf5; color:#059669; }
.action-btn.del  { color:#ef4444; border-color:#fecaca; }
.action-btn.del:hover { background:#fef2f2; color:#dc2626; }

/* ── MODAL & DRAWER OVERLAYS ── */
.drawer-overlay, .modal-overlay {
  position:fixed; inset:0; background:rgba(15, 23, 42, 0.3); backdrop-filter: blur(4px);
  z-index:999; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.drawer-overlay.open, .modal-overlay.open { opacity:1; pointer-events:all; }

/* ── DRAWER (Detail Prospect) ── */
.drawer {
  position:fixed; top:0; right:-560px; width:520px; height:100vh;
  background:white; z-index:1000; overflow-y:auto; transition:.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:-10px 0 40px rgba(15, 23, 42, 0.08); display:flex; flex-direction:column;
}
.drawer.open { right:0; }
.drawer-head { padding:24px; border-bottom:1px solid var(--border); position:sticky; top:0; background:white; z-index:2; }
.drawer-body { padding:24px; flex:1; }

/* ── ADD MODAL ── */
.modal-overlay { z-index: 1100; display:flex; align-items:center; justify-content:center; }
.modal {
  background:white; border-radius:var(--radius-lg); width:640px; max-width:94vw;
  max-height:85vh; overflow:hidden; display:flex; flex-direction:column;
  box-shadow: var(--shadow-lg); transform: scale(0.95); transition: transform 0.2s ease;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-head { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.modal-body { flex:1; overflow-y:auto; padding:24px; }
.modal-foot { padding:16px 24px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:12px; background:#f8fafc; }

/* ── FORMS ── */
.form-group { margin-bottom:18px; }
.form-label { font-size:12px; font-weight:600; color:#334155; margin-bottom:6px; display:block; text-transform: uppercase; letter-spacing: 0.5px; }
.form-input {
  width:100%; height:40px; border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:0 14px; font-size:13px; font-family:inherit; outline:none; background:#f8fafc; transition: all .15s;
}
.form-input:focus { border-color:var(--primary); background:white; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
textarea.form-input { height:90px; padding:12px; resize:vertical; }

/* ── ANIMATIONS & UTILS ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.animate-in { animation:fadeInUp .25s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes spin { to { transform:rotate(360deg); } }
.spinner {
  width:28px; height:28px; border:3px solid #eeebff; border-top-color:var(--primary);
  border-radius:50%; animation:spin .8s linear infinite; margin:0 auto 12px;
}
.empty-state { padding:64px 24px; text-align:center; color:var(--text-muted); }
.empty-state .emoji { font-size:48px; margin-bottom:16px; }
.empty-state h3 { font-size:16px; font-weight:700; color:var(--text-main); margin-bottom:6px; }