/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --bg:          #07070f;
  --bg2:         #0c0c1a;
  --surf:        rgba(255,255,255,0.04);
  --surf-hover:  rgba(255,255,255,0.07);
  --border:      rgba(255,255,255,0.07);
  --border-a:    rgba(108,99,255,0.35);
  --t1:          #e4e4f0;
  --t2:          #7070a0;
  --t3:          #404060;
  --accent:      #6c63ff;
  --accent-d:    rgba(108,99,255,0.14);
  --glow:        0 0 24px rgba(108,99,255,0.25);
  --green:       #22d3a0;
  --yellow:      #fbbf24;
  --red:         #f87171;
  --muted:       #4a4a6a;
  --r:           14px;
  --r-sm:        8px;
  --blur:        blur(18px) saturate(1.6);
  --font:        'Inter', -apple-system, system-ui, sans-serif;
}

[data-theme="light"] {
  --bg:         #f0f0f8;
  --bg2:        #e6e6f2;
  --surf:       rgba(255,255,255,0.65);
  --surf-hover: rgba(255,255,255,0.85);
  --border:     rgba(0,0,0,0.07);
  --border-a:   rgba(108,99,255,0.28);
  --t1:         #16162a;
  --t2:         #6060a0;
  --t3:         #a0a0c0;
  --accent-d:   rgba(108,99,255,0.1);
  --glow:       0 0 20px rgba(108,99,255,0.15);
}

/* ─── Reset ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

html { scroll-behavior:smooth }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* animated gradient bg */
body::before {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(108,99,255,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 90%, rgba(0,210,255,.04) 0%, transparent 60%);
  transition: opacity .4s;
}

/* ─── Header ─────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: var(--surf);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border);
}

.header__brand { display:flex; align-items:center; gap:10px }

.header__logo {
  width:22px; height:22px; color: var(--accent);
  filter: drop-shadow(var(--glow));
  flex-shrink: 0;
}

.header__title { font-size:15px; font-weight:700; letter-spacing:.01em; line-height:1.1 }
.header__sub   { font-size:11px; color: var(--t2); margin-top:1px }

.theme-btn {
  width:34px; height:34px;
  background: var(--surf); border: 1px solid var(--border);
  border-radius:50%; cursor:pointer;
  color: var(--t2); font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition: all .2s;
  flex-shrink: 0;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent) }

/* ─── Tabs ───────────────────────────────────────────────── */
.tabs {
  display:flex; gap:4px;
  padding: 10px 12px 0;
  position:relative; z-index:1;
}

.tab {
  flex:1;
  background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 4px;
  color: var(--t2); font-size:12px; font-weight:500;
  cursor:pointer; transition: all .2s;
  display:flex; align-items:center; justify-content:center; gap:4px;
}
.tab__icon { font-size:13px }
.tab--active {
  background: var(--accent-d);
  border-color: var(--border-a);
  color: var(--accent);
}
.tab:not(.tab--active):hover { border-color: var(--border-a); color: var(--t1) }

/* ─── Main ───────────────────────────────────────────────── */
.main { padding: 12px 12px 80px; position:relative; z-index:1 }

/* ─── Filter bar ─────────────────────────────────────────── */
.filter-bar {
  display:flex; gap:6px; margin-bottom:12px;
  overflow-x:auto; scrollbar-width:none; padding-bottom:2px;
}
.filter-bar::-webkit-scrollbar { display:none }

.chip {
  flex-shrink:0;
  background: var(--surf); border: 1px solid var(--border);
  border-radius:20px; padding: 5px 12px;
  color: var(--t2); font-size:12px; font-weight:500;
  cursor:pointer; transition: all .18s;
}
.chip--active {
  background: var(--accent-d); border-color: var(--border-a); color: var(--accent);
}

/* ─── Lead Cards ─────────────────────────────────────────── */
.leads-list { display:flex; flex-direction:column; gap:9px }

.lead-card {
  background: var(--surf);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 13px 14px;
  transition: border-color .2s, background .2s, transform .15s;
  animation: fadeUp .3s ease both;
}
.lead-card:active { transform: scale(.99) }

@keyframes fadeUp {
  from { opacity:0; transform:translateY(10px) }
  to   { opacity:1; transform:translateY(0) }
}

.lead-card__head {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:8px;
}
.lead-card__addr {
  font-size:13px; font-weight:600; line-height:1.3;
  color: var(--t1); flex:1; margin-right:8px;
}

/* Status badges */
.badge {
  flex-shrink:0; border-radius:20px;
  padding: 3px 9px; font-size:10px; font-weight:700;
  letter-spacing:.02em; white-space:nowrap;
}
.badge-new    { background:rgba(108,99,255,.15);  color:var(--accent) }
.badge-take   { background:rgba(251,191,36,.14);  color:var(--yellow) }
.badge-done   { background:rgba(34,211,160,.13);  color:var(--green) }
.badge-skip   { background:rgba(120,120,160,.12); color:var(--t2) }

.lead-card__meta {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-bottom:10px;
}
.lead-card__price { font-size:16px; font-weight:700 }
.lead-card__detail { font-size:12px; color:var(--t2) }
.lead-card__score {
  font-size:11px; font-weight:600; color:var(--accent);
  background: var(--accent-d); border-radius:6px; padding:2px 6px;
}

.lead-card__foot {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px solid var(--border);
}
.lead-card__by { font-size:11px; color:var(--t2) }
.lead-card__actions { display:flex; gap:6px }

.btn {
  background: var(--surf); border: 1px solid var(--border);
  border-radius:var(--r-sm); padding:5px 10px;
  font-size:11px; font-weight:500; cursor:pointer;
  color:var(--t2); transition: all .18s;
  text-decoration:none; display:inline-flex; align-items:center;
}
.btn:hover { border-color:var(--border-a); color:var(--t1) }
.btn-take:hover  { border-color:var(--accent); color:var(--accent) }
.btn-done:hover  { border-color:var(--green);  color:var(--green) }
.btn-open { color:var(--t2) }

/* ─── Funnel ─────────────────────────────────────────────── */
.funnel-total {
  margin-bottom:20px;
}
.funnel-total__label { font-size:12px; color:var(--t2); margin-bottom:4px }
.funnel-total__num   { font-size:36px; font-weight:800; color:var(--accent) }

.funnel { display:flex; flex-direction:column; gap:10px }

.funnel-row { display:flex; align-items:center; gap:10px }
.funnel-row__label { width:88px; font-size:12px; color:var(--t2); flex-shrink:0 }
.funnel-row__track {
  flex:1; height:28px;
  background:var(--surf); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden;
}
.funnel-row__bar {
  height:100%; border-radius:var(--r-sm);
  transition: width .7s cubic-bezier(.34,1.56,.64,1);
}
.funnel-row__cnt { width:28px; text-align:right; font-size:13px; font-weight:700 }

/* ─── Team ───────────────────────────────────────────────── */
.member-card {
  background:var(--surf);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--border); border-radius:var(--r);
  padding:12px 14px;
  display:flex; align-items:center; gap:12px;
  margin-bottom:8px;
  animation: fadeUp .3s ease both;
}

.member-ava {
  width:42px; height:42px; border-radius:50%;
  background:var(--accent-d); border:1px solid var(--border-a);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:var(--accent); flex-shrink:0;
}
.member-info { flex:1 }
.member-name { font-size:14px; font-weight:600 }
.member-role { font-size:11px; color:var(--t2); margin-top:1px }
.member-stat { text-align:right }
.member-stat strong { display:block; font-size:20px; font-weight:800; color:var(--accent); line-height:1 }
.member-stat span   { font-size:11px; color:var(--t2) }

/* ─── Skeleton / States ──────────────────────────────────── */
.skeleton {
  background:var(--surf); border:1px solid var(--border);
  border-radius:var(--r); height:100px; margin-bottom:9px;
  overflow:hidden; position:relative;
}
.skeleton::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);
  animation:shim 1.4s infinite;
}
@keyframes shim { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

.empty {
  text-align:center; padding:48px 20px;
  color:var(--t2); font-size:13px;
}
.empty__icon { font-size:40px; opacity:.3; margin-bottom:10px }

.hidden { display:none !important }