/* ════════════════════════════════════════════════
   D100 Command Center
   ClientOS design language: pure black + dot grid,
   Inter Tight, floating top bar with pill nav,
   gradient cards with hairline borders, white
   primary buttons, soft 10%-alpha color chips.
   ════════════════════════════════════════════════ */
:root {
  --bg: #000000;
  --panel: #121212;
  --card: #121212;
  --card-2: rgba(255,255,255,0.04);
  --card-grad: linear-gradient(135deg, #1F1F1F 0%, #171717 100%);
  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);
  --border-solid: #333333;
  --text: #FAFAFA;
  --muted: #999999;
  --muted-2: #6E6E6E;

  --accent: #4D9FFF;
  --accent-soft: rgba(77,159,255,0.1);
  --accent-border: rgba(77,159,255,0.3);

  --good: #4ADE80;
  --bad: #EB5757;
  --warn: #F2C94C;

  --r-panel: 14px;
  --r-card: 12px;
  --r-btn: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  background:var(--bg); color:var(--text);
  font-family:'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:14px; line-height:1.5; min-height:100vh;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body {
  background-color:var(--bg);
  background-image:
    radial-gradient(720px 340px at 18% -80px, rgba(77,159,255,0.08), transparent 62%),
    radial-gradient(640px 360px at 92% 8%, rgba(74,222,128,0.05), transparent 60%),
    radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size:auto, auto, 24px 24px;
  background-attachment:fixed;
}
.hidden { display:none !important; }
.muted { color:var(--muted); font-weight:500; font-size:13px; }

/* ── SHELL ── */
.app { display:flex; min-height:100vh; align-items:stretch; }

/* ── SIDEBAR (floating ClientOS panel) ── */
.sidebar {
  width:236px; flex-shrink:0; position:sticky; top:14px; align-self:flex-start;
  height:calc(100vh - 28px); margin:14px 0 14px 14px; padding:14px;
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  display:flex; flex-direction:column; gap:6px; overflow:hidden;
  box-shadow:0 4px 4px rgba(0,0,0,0.25), inset 5px 4px 8px rgba(0,0,0,0.14);
}
.sidebar::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(17deg, rgba(77,159,255,0.14) 0%, rgba(77,159,255,0.05) 18%, transparent 46%);
}
.sidebar::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:180px; pointer-events:none;
  background:linear-gradient(343deg, rgba(74,222,128,0.09) 0%, transparent 55%);
}
.sidebar > * { position:relative; z-index:1; }
.ws-chip { display:flex; align-items:center; gap:10px; padding:6px 6px 16px; }
.ws-mark {
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:grid; place-items:center; font-weight:800; font-size:12.5px; color:#FAFAFA;
  background:#333333; letter-spacing:0.5px;
}
.ws-name { font-size:14.5px; font-weight:700; color:var(--text); white-space:nowrap; letter-spacing:-0.1px; }
.ws-tag { font-size:10.5px; color:var(--muted-2); font-weight:500; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }

.side-nav { display:flex; flex-direction:column; gap:3px; }
.nav-item {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:transparent; border:none; border-radius:9px; padding:11px 12px;
  color:var(--muted); font-size:13.5px; font-weight:500; cursor:pointer;
  font-family:inherit; transition:color .15s, background .15s, transform .15s; white-space:nowrap;
}
.nav-item:hover { color:#fff; background:rgba(255,255,255,0.04); }
.nav-item:active { transform:scale(0.98); }
.nav-item.active { background:#333333; color:#fff; }
.nav-ic { width:18px; text-align:center; font-size:13px; opacity:.65; flex-shrink:0; }
.nav-item.active .nav-ic { opacity:1; color:var(--accent); }
.nav-num, .nav-sub { display:none; }
.nav-text, .nav-title { display:contents; font:inherit; }

.side-foot { margin-top:auto; padding-top:14px; border-top:1px solid var(--border-soft); }
.side-foot-btn {
  width:100%; background:#252525; border:1px solid var(--border-solid); border-radius:var(--r-btn);
  padding:9px 14px; color:var(--text); font-size:13px; font-weight:500; cursor:pointer;
  font-family:inherit; transition:background .15s, transform .15s; white-space:nowrap;
}
.side-foot-btn:hover { background:#2E2E2E; }
.side-foot-btn:active { transform:scale(0.98); }
.side-foot-updated { font-size:10.5px; color:var(--muted-2); white-space:nowrap; text-align:center; margin-top:8px; }
.side-foot-updated + .side-foot-updated { margin-top:2px; }

/* ── MAIN ── */
.main { flex:1; min-width:0; max-width:1220px; padding:28px 28px 48px; }
.view { animation:fade .3s cubic-bezier(.21,.47,.32,.98); }
@keyframes fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; flex-wrap:wrap; }
.page-eyebrow { font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--muted-2); }
.page-title { font-size:24px; font-weight:700; letter-spacing:-0.4px; margin:3px 0; color:#fff; }
.page-sub { font-size:13px; color:var(--muted); }
.page-head-actions { display:flex; align-items:center; gap:10px; }
.demo-pill {
  display:inline-block; padding:5px 13px; border-radius:999px; font-size:11px; font-weight:600;
  background:#252525; border:1px solid var(--border-solid); color:var(--muted);
}

/* ── KPI ROW ── */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:12px; margin-bottom:20px; }
.kpi {
  background:var(--card-grad);
  border:1px solid var(--border); border-radius:var(--r-card); padding:18px 18px 16px;
  position:relative; overflow:hidden; transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.kpi:hover { transform:translateY(-2px); border-color:rgba(255,255,255,0.16); box-shadow:0 8px 22px rgba(0,0,0,0.35); }
.kpi::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(17deg, rgba(255,255,255,0.05) 0%, transparent 45%);
}
.kpi-acc::before { background:linear-gradient(17deg, rgba(77,159,255,0.16) 0%, transparent 50%); }
.kpi-green::before { background:linear-gradient(17deg, rgba(74,222,128,0.14) 0%, transparent 50%); }
.kpi-warn::before { background:linear-gradient(17deg, rgba(242,201,76,0.13) 0%, transparent 50%); }
.kpi-bad::before { background:linear-gradient(17deg, rgba(235,87,87,0.15) 0%, transparent 50%); }
.kpi-label { font-size:11px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; color:var(--muted); }
.kpi-value { font-size:26px; font-weight:700; letter-spacing:-0.6px; margin:8px 0 3px; color:#fff; font-variant-numeric:tabular-nums; }
.kpi-acc .kpi-value { color:var(--accent); }
.kpi-green .kpi-value { color:var(--good); }
.kpi-warn .kpi-value { color:var(--warn); }
.kpi-bad .kpi-value { color:var(--bad); }
.kpi-sub { font-size:11.5px; color:var(--muted-2); font-weight:500; }

/* ── CARDS (panels) ── */
.card {
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r-panel);
  padding:22px 22px; margin-bottom:16px; position:relative; overflow:hidden;
  box-shadow:0 4px 4px rgba(0,0,0,0.25), inset 5px 4px 8px rgba(0,0,0,0.10);
}
.card::before {
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(17deg, rgba(77,159,255,0.12) 0%, rgba(77,159,255,0.04) 20%, transparent 48%);
}
.view > .card:nth-of-type(2)::before, .two-col .card:nth-of-type(2)::before {
  background:linear-gradient(17deg, rgba(74,222,128,0.11) 0%, rgba(74,222,128,0.04) 20%, transparent 48%);
}
.view > .card:nth-of-type(3)::before {
  background:linear-gradient(17deg, rgba(242,201,76,0.10) 0%, rgba(242,201,76,0.035) 20%, transparent 48%);
}
.view > .card:nth-of-type(4)::before {
  background:linear-gradient(17deg, rgba(192,132,252,0.10) 0%, rgba(192,132,252,0.035) 20%, transparent 48%);
}
.card > * { position:relative; z-index:1; }
.card h2 {
  font-size:15px; font-weight:600; letter-spacing:-0.1px;
  margin-bottom:18px; color:#fff; display:flex; align-items:center;
}
.card h2::before { content:''; width:3px; height:15px; background:var(--accent); border-radius:2px; margin-right:10px; }
.card h2 .muted { font-size:12px; font-weight:500; margin-left:10px; text-transform:none; color:var(--muted); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.two-col .card { margin-bottom:0; }
@media(max-width:900px) { .two-col { grid-template-columns:1fr; } }
.offer-card.is-best { border-color:var(--accent-border); }
.ft-badge { background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--r-btn); white-space:nowrap; border:none; }

/* ── STATS GRID ── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin-bottom:18px; }
.stat {
  background:var(--card-grad); border:1px solid var(--border); border-radius:var(--r-card);
  padding:15px 16px; position:relative; overflow:hidden;
  transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.stat::before { content:''; position:absolute; inset:0; pointer-events:none; }
/* One colour per pipeline stage, matching the KPI row. */
.stats-grid .stat::before { background:linear-gradient(17deg, rgba(255,255,255,0.05), transparent 55%); }
.stats-grid .stat.s-acc::before { background:linear-gradient(17deg, rgba(77,159,255,0.13), transparent 55%); }
.stats-grid .stat.s-warn::before { background:linear-gradient(17deg, rgba(242,201,76,0.12), transparent 55%); }
.stats-grid .stat.s-bad::before { background:linear-gradient(17deg, rgba(235,87,87,0.13), transparent 55%); }
.stats-grid .stat.s-good::before { background:linear-gradient(17deg, rgba(74,222,128,0.12), transparent 55%); }
.stat > * { position:relative; }
.stat:hover { border-color:rgba(255,255,255,0.18); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.35); }
.stat-label { font-size:10.5px; font-weight:600; letter-spacing:1.1px; color:var(--muted); text-transform:uppercase; margin-bottom:9px; }
.stat-value { font-size:26px; font-weight:700; color:#fff; letter-spacing:-0.025em; line-height:1; font-variant-numeric:tabular-nums; }
.stat-value.acc { color:var(--accent); }
.stat-value.green { color:var(--good); }
.stat-value.warn { color:var(--warn); }
.stat-value.bad { color:var(--bad); }
.stat-sub { font-size:10.5px; color:var(--muted-2); margin-top:6px; }

/* ── FUNNEL BARS ── */
.funnel-steps { display:flex; flex-direction:column; gap:10px; }
.funnel-step { display:grid; grid-template-columns:120px 1fr 110px; gap:14px; align-items:center; }
.funnel-step-label { font-size:13px; font-weight:500; color:var(--text); }
.funnel-step-bar { height:24px; background:rgba(255,255,255,0.05); border-radius:7px; overflow:hidden; }
.funnel-step-fill { height:100%; background:linear-gradient(90deg, rgba(77,159,255,0.55), var(--accent)); border-radius:7px; position:relative; overflow:hidden; animation:fillIn 0.8s cubic-bezier(.21,.47,.32,.98) both; }
@keyframes fillIn { from{transform:translateX(-100%);} to{transform:none;} }
.funnel-step-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%); transform:translateX(-120%); animation:shine 2.6s 0.9s ease infinite; }
@keyframes shine { 0%{transform:translateX(-120%);} 45%,100%{transform:translateX(130%);} }
.funnel-step-count { font-size:13px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.funnel-step-count .conv { color:var(--muted); font-size:11px; margin-left:6px; font-weight:500; }

/* head-to-head */
.h2h { display:flex; flex-direction:column; gap:8px; }
.h2h-row { display:grid; grid-template-columns:1fr 90px 90px; gap:12px; align-items:center; padding:10px 14px; background:var(--card-grad); border:1px solid var(--border-soft); border-radius:var(--r-card); }
.h2h-row.head { background:transparent; border-color:transparent; padding:2px 14px; font-size:10.5px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted-2); }
.h2h-label { font-size:13px; font-weight:500; color:var(--muted); }
.h2h-val { font-size:14px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
.h2h-val.win { color:var(--accent); }

/* ── SEGMENTED + PILLS ── */
.seg { display:inline-flex; gap:2px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:4px; }
.seg-btn { background:transparent; border:none; padding:8px 15px; border-radius:8px; color:var(--muted); font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; transition:color .15s, background .15s; }
.seg-btn:hover { color:#fff; }
.seg-btn.active { background:#333333; color:#fff; }

.src-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:14px 0 18px; }
.src {
  background:transparent; border:1px solid var(--border-solid); border-radius:var(--r-btn);
  padding:7px 14px; color:var(--muted); font-size:12.5px; font-weight:500;
  cursor:pointer; font-family:inherit; transition:all 0.15s;
}
.src:hover { color:#fff; }
.src.active { background:#333333; border-color:#333333; color:#fff; }
.src .n { margin-left:6px; font-size:11px; font-weight:700; opacity:.7; }

/* ── FILTER BAR (leads database) ── */
.filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.leads-search { flex:1; min-width:190px; background:#0A0A0A; color:var(--text); border:1px solid var(--border-solid); border-radius:var(--r-btn); padding:9px 13px; font-size:13px; font-family:inherit; }
.leads-search::placeholder { color:var(--muted-2); }
.leads-search:focus { outline:none; border-color:#555; }
.f-select {
  background:#0A0A0A; color:var(--text); border:1px solid var(--border-solid); border-radius:var(--r-btn);
  padding:9px 11px; font-size:12.5px; font-weight:500; cursor:pointer; font-family:inherit;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:28px;
}
.f-select:focus { outline:none; border-color:#555; }
.f-select.on { border-color:#555; color:#fff; }

/* ── LIST / TABLE ROWS ── */
.list-rows { display:flex; flex-direction:column; gap:7px; }
.list-row {
  display:grid; align-items:center; gap:14px;
  padding:13px 16px; background:var(--card-grad); border:1px solid var(--border);
  border-radius:var(--r-card); transition:border-color 0.2s;
}
.list-row:not(.head) { animation:rowIn .45s cubic-bezier(.21,.47,.32,.98) both; }
.list-rows .list-row:nth-child(2) { animation-delay:.03s; } .list-rows .list-row:nth-child(3) { animation-delay:.06s; }
.list-rows .list-row:nth-child(4) { animation-delay:.09s; } .list-rows .list-row:nth-child(5) { animation-delay:.12s; }
.list-rows .list-row:nth-child(6) { animation-delay:.15s; } .list-rows .list-row:nth-child(7) { animation-delay:.18s; }
.list-rows .list-row:nth-child(8) { animation-delay:.21s; } .list-rows .list-row:nth-child(9) { animation-delay:.24s; }
.list-rows .list-row:nth-child(10) { animation-delay:.27s; } .list-rows .list-row:nth-child(11) { animation-delay:.30s; }
.list-rows .list-row:nth-child(12) { animation-delay:.33s; } .list-rows .list-row:nth-child(13) { animation-delay:.36s; }
@keyframes rowIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.list-row:not(.head):hover { border-color:rgba(255,255,255,0.18); cursor:pointer; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,0.35); }
.list-row:not(.head) { transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.list-row.head {
  background:none; border-color:transparent; padding:2px 16px 4px;
  font-size:10.5px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted-2);
  box-shadow:none;
}
.list-row.head:hover { cursor:default; }
.lr-biz { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lr-biz .lr-sub { display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:1px; }
.lr-txt { font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.lead-tag { display:inline-block; font-size:11px; font-weight:600; padding:4px 10px; border-radius:var(--r-btn); background:rgba(255,255,255,0.07); color:var(--muted); white-space:nowrap; border:none; }
.lead-tag.acc { background:rgba(77,159,255,0.1); color:var(--accent); }
.lead-tag.good { background:rgba(74,222,128,0.1); color:var(--good); }
.lead-tag.bad { background:rgba(235,87,87,0.1); color:var(--bad); }
.lead-tag.warn { background:rgba(242,201,76,0.1); color:var(--warn); }
.lead-tag.dim { opacity:.75; }
.offer-chip {
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:var(--r-btn);
  background:rgba(255,255,255,0.07); border:none; color:var(--text);
  cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .14s;
}
.offer-chip:hover { background:rgba(255,255,255,0.12); }
.offer-chip:disabled { opacity:.5; cursor:default; }

/* buttons */
.btn-ghost {
  background:#252525; border:1px solid var(--border-solid); border-radius:var(--r-btn);
  padding:8px 14px; color:#fff; font-size:13px; font-weight:500; cursor:pointer; font-family:inherit; transition:background .15s; white-space:nowrap;
}
.btn-ghost:hover { background:#2E2E2E; }
.btn-acc {
  background:#FAFAFA; color:#000; font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:var(--r-btn); border:none;
  cursor:pointer; font-family:inherit; white-space:nowrap;
  transition:background 0.15s, transform 0.15s;
}
.btn-acc:hover { background:#fff; transform:translateY(-1px); }
.btn-acc:disabled { opacity:.55; transform:none; cursor:default; }
.btn-danger { background:transparent; border:1px solid rgba(235,87,87,.4); color:var(--bad); border-radius:var(--r-btn); padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.btn-danger:hover { background:rgba(235,87,87,.1); }
.btn-remove { background:var(--bad); color:#fff; border:none; border-radius:var(--r-btn); padding:9px 16px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap; transition:background .15s, transform .15s; }
.btn-remove:hover { background:#F06A6A; transform:translateY(-1px); }
.btn-remove:disabled { opacity:.5; transform:none; cursor:default; }
.drawer-tags .btn-remove { margin-left:auto; }
.rm-reason { width:100%; min-height:96px; resize:vertical; margin-bottom:14px; font-family:inherit; line-height:1.45; box-sizing:border-box; }

/* pager */
.pager { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--border-soft); }
.pg-btn { background:transparent; color:var(--muted); border:1px solid var(--border-solid); border-radius:8px; min-width:34px; padding:7px 10px; font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .12s; }
.pg-btn:hover:not(:disabled):not(.active) { color:#fff; }
.pg-btn.active { background:#FAFAFA; border-color:#FAFAFA; color:#000; }
.pg-btn:disabled { opacity:.4; cursor:default; }
.pg-count { margin-left:auto; font-size:12px; font-weight:500; color:var(--muted); }

/* ── DRAWER (lead card) ── */
.lead-drawer[hidden] { display:none; }
.lead-drawer { position:fixed; inset:0; z-index:120; }
.drawer-scrim { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.drawer-panel { position:absolute; top:0; right:0; height:100%; width:min(500px,94vw); background:#111111; border-left:1px solid var(--border); box-shadow:-12px 0 40px rgba(0,0,0,.5); overflow-y:auto; padding:24px; animation:drawerIn .18s ease; }
@keyframes drawerIn { from{transform:translateX(24px);opacity:.6;} to{transform:none;opacity:1;} }
.drawer-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px; }
.drawer-name { font-size:20px; font-weight:700; letter-spacing:-.4px; }
.drawer-sub { font-size:12.5px; color:var(--muted); margin-top:3px; }
.drawer-x { background:#252525; border:1px solid var(--border-solid); color:var(--text); border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:14px; flex-shrink:0; }
.drawer-tags { display:flex; align-items:center; gap:8px; margin:12px 0 18px; flex-wrap:wrap; }
.drawer-sec { margin-bottom:20px; }
.drawer-sec h4 { font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.drawer-attrs { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.drawer-attr { font-size:12.5px; display:flex; flex-direction:column; gap:2px; background:var(--card-grad); border:1px solid var(--border-soft); padding:9px 11px; border-radius:var(--r-btn); min-width:0; }
.drawer-attr span { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.3px; font-weight:600; }
.drawer-attr b, .drawer-attr a { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drawer-attr a { color:var(--accent); text-decoration:none; }
.drawer-attr a:hover { text-decoration:underline; }

/* D100 pipeline chips */
.pipe { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.pipe-step { display:flex; align-items:center; gap:5px; }
.pipe-chip { font-size:11px; font-weight:600; padding:5px 11px; border-radius:var(--r-btn); background:rgba(255,255,255,0.07); border:none; color:var(--muted); cursor:pointer; font-family:inherit; transition:all .14s; }
.pipe-chip:hover { color:#fff; }
.pipe-chip.done { color:var(--accent); background:rgba(77,159,255,0.1); }
.pipe-chip.now { background:#FAFAFA; color:#000; }
.pipe-arrow { color:var(--muted-2); font-size:11px; }

/* interest status picker */
.int-grid { display:flex; flex-wrap:wrap; gap:7px; }
.int-btn {
  font-size:12px; font-weight:600; padding:7px 12px; border-radius:var(--r-btn); cursor:pointer;
  background:rgba(255,255,255,0.07); border:none; color:var(--muted); font-family:inherit; transition:all .14s;
}
.int-btn:hover { color:#fff; }
.int-btn.on { background:rgba(77,159,255,0.12); color:var(--accent); }
.int-btn.on.good { background:rgba(74,222,128,.12); color:var(--good); }
.int-btn.on.bad { background:rgba(235,87,87,.12); color:var(--bad); }

.phase-rows { display:flex; flex-direction:column; gap:8px; }
.phase-row { display:grid; grid-template-columns:96px 1fr auto; gap:12px; align-items:center; background:var(--card-grad); border:1px solid var(--border-soft); border-radius:var(--r-card); padding:10px 13px; }
.phase-chan { font-size:12.5px; font-weight:600; }
.phase-steps { display:flex; gap:4px; }
.phase-dot { width:14px; height:14px; border-radius:4px; background:rgba(255,255,255,0.06); border:1px solid var(--border-soft); }
.phase-dot.on { background:var(--accent); border-color:var(--accent); }
.phase-cur { font-size:11px; font-weight:600; color:var(--muted); white-space:nowrap; }

.empty { color:var(--muted); text-align:center; padding:40px 0; font-size:13px; }
.err-note { color:var(--bad); font-size:13px; font-weight:500; padding:12px 0; }

/* ── LOGIN OVERLAY ── */
.login-overlay[hidden] { display:none; }
.login-overlay { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(0,0,0,.92); backdrop-filter:blur(6px); }
.login-card {
  width:min(360px, 92vw); background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:32px 30px; display:flex; flex-direction:column; gap:12px; text-align:center;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.login-mark {
  width:48px; height:48px; border-radius:12px; margin:0 auto 4px;
  display:grid; place-items:center; font-weight:800; font-size:15px; color:#FAFAFA;
  background:#333333;
}
.login-card h3 { font-size:17px; font-weight:700; letter-spacing:-.2px; }
.login-msg { font-size:12.5px; color:var(--muted); }
.login-msg.err { color:var(--bad); font-weight:600; }
.login-input {
  background:#0A0A0A; color:var(--text); border:1px solid var(--border-solid); border-radius:var(--r-btn);
  padding:11px 13px; font-size:13.5px; font-family:inherit; text-align:center;
}
.login-input:focus { outline:none; border-color:#555; }
.login-btn { margin-top:2px; }

/* ── TYPE DOTS / STATUS CHIPS (deliverable types) ── */
.type-dot { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:8px; flex-shrink:0; vertical-align:baseline; }
.type-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:16px; margin-bottom:16px; }
.type-grid .card { margin-bottom:0; }
.queued-chip {
  display:inline-block; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:600;
  background:rgba(242,201,76,.1); color:var(--warn);
}
.note-txt { font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:12px; padding-top:12px; border-top:1px solid var(--border-soft); }
.bar-track { height:10px; background:var(--panel); border:1px solid var(--border); border-radius:6px; overflow:hidden; margin:4px 0 10px; }
.bar-fill { height:100%; background:linear-gradient(90deg,#3ba55d,#4ade80); border-radius:6px; transition:width .5s ease; }
.build-live-head { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:4px; }
.build-live-head b { color:#fff; }

/* toggle switch */
.toggle {
  position:relative; width:42px; height:23px; border-radius:999px; flex-shrink:0; cursor:pointer;
  background:#252525; border:1px solid var(--border-solid); transition:all .18s; padding:0; font-family:inherit;
}
.toggle::after {
  content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:var(--muted); transition:all .28s cubic-bezier(.34,1.56,.64,1);
}
.toggle.on { background:rgba(74,222,128,0.15); border-color:rgba(74,222,128,0.4); }
.toggle.on::after { left:21px; background:var(--good); }
.toggle:disabled { opacity:.5; cursor:default; }

/* admin forms */
.form-row { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.form-input {
  flex:1; min-width:170px; background:#0A0A0A; color:var(--text); border:1px solid var(--border-solid);
  border-radius:var(--r-btn); padding:10px 13px; font-size:13px; font-family:inherit;
}
.form-input::placeholder { color:var(--muted-2); }
.form-input:focus { outline:none; border-color:#555; }
.form-hint { font-size:11.5px; color:var(--muted-2); margin-top:8px; line-height:1.5; }

/* template performance table (N-way) */
.perf-wrap { overflow-x:auto; }
.perf-row { display:grid; gap:12px; align-items:center; padding:11px 14px; background:var(--card-grad); border:1px solid var(--border); border-radius:var(--r-card); margin-bottom:7px; min-width:fit-content; }
.perf-row.head { background:none; border-color:transparent; padding:2px 14px; font-size:10.5px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted-2); }
.perf-label { font-size:13px; font-weight:500; color:var(--muted); white-space:nowrap; }
.perf-val { font-size:14px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.perf-val.win { color:var(--accent); }

/* type deliverables modal (D100 Types -> click a type) */
.type-modal[hidden] { display:none; }
.type-modal { position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; }
.type-modal-card { position:relative; width:min(520px,92vw); max-height:84vh; overflow-y:auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-panel); padding:22px 22px 20px; box-shadow:0 24px 70px rgba(0,0,0,.6); animation:drawerIn .18s ease; }
.tm-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:4px; }
.tm-title { font-size:17px; font-weight:700; letter-spacing:-.3px; display:flex; align-items:center; gap:8px; }
.tm-sub { font-size:12.5px; color:var(--muted); margin:2px 0 14px; }
.tm-list { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.tm-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px; background:var(--card-grad); border:1px solid var(--border); border-radius:var(--r-card); font-size:13.5px; font-weight:500; }
.tm-item .tm-x { background:transparent; border:1px solid var(--border-solid); color:var(--muted); border-radius:7px; width:26px; height:26px; cursor:pointer; font-size:13px; line-height:1; flex-shrink:0; }
.tm-item .tm-x:hover { color:var(--text); border-color:#555; }
.tm-add { display:flex; gap:8px; margin-bottom:16px; }
.tm-add .form-input { flex:1; }
.tm-foot { display:flex; justify-content:flex-end; gap:8px; }
.tm-note { font-size:11.5px; color:var(--muted-2); margin-top:10px; }

/* ── API LIMITS / usage cards + alerts ── */
.nav-alert { width:7px; height:7px; border-radius:50%; background:var(--bad); margin-left:auto; box-shadow:0 0 8px rgba(235,87,87,0.8); animation:pulse 1.6s ease-in-out infinite; }
.nav-alert[hidden] { display:none; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
.usage-card { display:flex; flex-direction:column; }
.usage-bar { height:8px; border-radius:99px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:4px; }
.usage-fill { height:100%; border-radius:99px; background:var(--good); transition:width .6s cubic-bezier(.21,.47,.32,.98); }
.usage-fill.warn { background:var(--warn); }
.usage-fill.crit { background:var(--bad); }
.usage-meta { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:7px; font-variant-numeric:tabular-nums; }
.usage-meta .warn { color:var(--warn); font-weight:700; }
.usage-meta .crit { color:var(--bad); font-weight:700; }
.usage-err { font-size:12.5px; color:var(--muted); line-height:1.5; margin-top:6px; }
.usage-link { font-size:11.5px; color:var(--accent); text-decoration:none; margin-top:10px; font-weight:600; }
.usage-link:hover { text-decoration:underline; }
.alert-banner {
  display:block; padding:13px 16px; border-radius:var(--r-card); margin-bottom:12px;
  background:rgba(242,201,76,0.08); border:1px solid rgba(242,201,76,0.3); color:var(--warn);
  font-size:13px; line-height:1.5;
}
.alert-banner.crit { background:rgba(235,87,87,0.08); border-color:rgba(235,87,87,0.35); color:var(--bad); }
.alert-banner b { font-weight:700; }

/* ── RESPONSIVE: sidebar becomes a horizontal bar ── */
@media(max-width:900px) {
  .app { flex-direction:column; }
  .sidebar {
    position:static; width:auto; height:auto; margin:12px 12px 0;
    flex-direction:row; align-items:center; gap:8px; padding:8px 10px;
  }
  .sidebar::after { display:none; }
  .ws-chip { padding:0 4px 0 0; }
  .ws-name, .ws-tag { display:none; }
  .side-nav { flex-direction:row; gap:2px; overflow-x:auto; scrollbar-width:none; }
  .side-nav::-webkit-scrollbar { display:none; }
  .nav-item { padding:9px 12px; font-size:13px; }
  .nav-ic { display:none; }
  .side-foot { margin:0 0 0 auto; padding:0; border:none; }
  .side-foot-btn { width:auto; padding:8px 12px; font-size:12px; }
  .side-foot-updated { display:none; }
  .main { padding:16px 12px 60px; }
  .card { padding:18px 16px; }
  .page-title { font-size:21px; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .stat-value { font-size:21px; }
  .funnel-step { grid-template-columns:84px 1fr 86px; gap:10px; }
  .list-row { padding:10px 13px; gap:10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ── TEMPLATES CHARTS ── */
.niche-tabs { flex-wrap:wrap; margin-bottom:16px; }
.niche-tabs .seg-btn .n { margin-left:7px; opacity:.6; font-variant-numeric:tabular-nums; }
.chart-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:14px; }
@media (max-width:1100px) { .chart-grid { grid-template-columns:1fr; } }
.chart-card h2 .muted { font-weight:500; }
.chart-note { font-size:11.5px; color:var(--muted-2); margin-top:10px; }
.nchart-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:-4px 0 14px; align-items:center; }
.nchart-legend .lg { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.lg.acc, .nfill.acc { background:var(--accent); }
.lg.warn, .nfill.warn { background:var(--warn); }
.nchart { display:flex; flex-direction:column; gap:10px; }
.nrow { display:grid; grid-template-columns:150px 1fr; gap:14px; align-items:center; cursor:pointer; padding:6px 8px; border-radius:10px; transition:background .15s, opacity .15s; }
.nrow:hover { background:rgba(255,255,255,.03); }
.nrow.dim { opacity:.35; }
.nrow.thin .nfill { opacity:.5; }
.nlabel { font-size:13.5px; font-weight:600; display:flex; flex-direction:column; gap:2px; }
.nlabel span { font-size:11.5px; font-weight:500; color:var(--muted-2); }
.nbars { display:flex; flex-direction:column; gap:5px; }
.nbar { position:relative; height:16px; background:rgba(255,255,255,.04); border-radius:6px; display:flex; align-items:center; }
.nfill { height:100%; border-radius:6px; min-width:2px; }
.nbar b { position:absolute; left:calc(100% + 0px); white-space:nowrap; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; transform:translateX(-100%); padding-right:8px; color:#fff; }
.nbar b em { font-style:normal; font-weight:500; color:var(--muted-2); margin-left:4px; }
.dstats { display:flex; gap:24px; margin:-2px 0 10px; }
.dstats div { display:flex; flex-direction:column; }
.dstats b { font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.dstats span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.dchart { width:100%; height:220px; display:block; }
.dbar { fill:var(--accent); opacity:.85; }
.dbar.hit { fill:var(--good); opacity:1; }
.dgrid { stroke:rgba(255,255,255,.06); stroke-width:1; }
.dtarget { stroke:var(--warn); stroke-width:1.5; stroke-dasharray:5 4; }
.dtl { fill:var(--warn); font-size:10.5px; font-weight:600; text-anchor:end; }
.dy { fill:var(--muted-2); font-size:10px; text-anchor:end; }
.dx { fill:var(--muted-2); font-size:10px; text-anchor:middle; }
.dval { fill:var(--muted); font-size:9.5px; text-anchor:middle; font-variant-numeric:tabular-nums; }
.pivot-wrap { overflow-x:auto; }
.pivot { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
.pivot th { text-align:right; font-size:10.5px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:var(--muted); padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.pivot th:first-child, .pivot td:first-child { text-align:left; }
.pivot td { text-align:right; padding:10px; border-bottom:1px solid rgba(255,255,255,.05); }
.pivot tr.tot td { font-weight:700; border-bottom:none; border-top:1px solid var(--border); }
.pivot .c-acc { color:var(--accent); } .pivot .c-warn { color:var(--warn); } .pivot .c-bad { color:var(--bad); }
.dbar.imported { fill:#5b6472; opacity:.45; }
.dstart { stroke:rgba(255,255,255,.35); stroke-width:1; stroke-dasharray:2 3; }
.dstl { fill:var(--muted); font-size:10px; font-weight:600; }
.chart-card h2 .dm-month { margin-left:auto; height:32px; font-size:12.5px; }

/* ── EOD ── */
.eod-banner { display:flex; gap:22px; flex-wrap:wrap; align-items:baseline; padding:12px 16px; margin:0 0 16px; border:1px solid rgba(242,201,76,.3); background:linear-gradient(90deg, rgba(242,201,76,.08), transparent 70%); border-radius:var(--r-card); font-size:13.5px; }
.eod-banner[hidden] { display:none; }
.eod-banner .eb-k { font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--warn); }
.eod-banner span { display:block; font-size:10.5px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.eod-banner em { font-style:normal; color:var(--muted-2); font-size:12px; }
.eod-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:14px; align-items:start; }
@media (max-width:1100px) { .eod-layout { grid-template-columns:1fr; } }
.eod-sec { font-size:10.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--muted); margin:18px 0 10px; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); }
.eod-sec:first-child { margin-top:0; padding-top:0; border-top:none; }
.eod-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px; margin-bottom:12px; }
.eod-grid.two { grid-template-columns:1fr 1fr; }
@media (max-width:700px) { .eod-grid.two { grid-template-columns:1fr; } }
.eod-num, .eod-text { display:flex; flex-direction:column; gap:6px; }
.eod-num span, .eod-text span, .eod-row > span { font-size:12px; font-weight:600; color:var(--muted); }
.eod-num em { font-style:normal; font-size:11px; color:var(--muted-2); }
.eod-num input, .eod-text input, .eod-text textarea { background:#151515; border:1px solid var(--border-solid); border-radius:10px; color:#fff; padding:10px 12px; font-size:15px; font-family:inherit; font-variant-numeric:tabular-nums; width:100%; box-sizing:border-box; }
.eod-text textarea { font-size:13.5px; resize:vertical; line-height:1.45; }
.eod-text { margin-bottom:12px; }
.eod-num input:focus, .eod-text input:focus, .eod-text textarea:focus { outline:none; border-color:#555; }
.eod-num input:disabled, .eod-text textarea:disabled, .eod-text input:disabled { color:var(--muted); background:transparent; }
.eod-dmrow { display:grid; grid-template-columns:170px 170px 1fr; gap:14px; align-items:end; margin-bottom:12px; }
.eod-dmrow .eod-num input { font-size:22px; font-weight:700; }
.eod-target { padding:10px 14px; border-radius:12px; background:rgba(235,87,87,.07); border:1px solid rgba(235,87,87,.25); font-size:13px; color:var(--muted); }
.eod-target b { font-size:22px; color:#fff; font-variant-numeric:tabular-nums; }
.eod-target em { display:block; font-style:normal; font-size:11px; color:var(--muted-2); }
.eod-target span { display:block; font-size:12px; font-weight:600; color:var(--bad); margin-top:2px; }
.eod-target.hit { background:rgba(74,222,128,.07); border-color:rgba(74,222,128,.3); }
.eod-target.hit span { color:var(--good); }
.eod-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px; }
.eod-row > span { min-width:130px; }
.eod-pills { display:flex; gap:6px; flex-wrap:wrap; }
.eod-pill { min-width:38px; padding:7px 12px; border-radius:9px; background:#1b1b1b; border:1px solid var(--border-solid); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.eod-pill:hover { color:#fff; border-color:#555; }
.eod-pill.on { background:#FAFAFA; color:#000; border-color:#FAFAFA; }
.eod-foot { display:flex; justify-content:flex-end; align-items:center; gap:14px; margin-top:6px; }
.eod-foot .muted { color:var(--bad); font-size:12.5px; }
.eod-submit { padding:11px 20px; font-size:14px; }
.eod-streak { margin-left:auto; font-size:12px; font-weight:600; color:var(--warn); background:rgba(242,201,76,.1); padding:4px 10px; border-radius:var(--r-btn); }
.eod-trends { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.eod-trends span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }
.spark { width:100%; height:44px; display:block; }
.spark polyline { fill:none; stroke-width:2; vector-effect:non-scaling-stroke; }
.spark.acc polyline { stroke:var(--accent); } .spark.good polyline { stroke:var(--good); }
.eod-day { padding:11px 0; border-top:1px solid rgba(255,255,255,.06); }
.ed-date { font-size:13px; font-weight:600; margin-bottom:5px; }
.ed-stats { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--muted); }
.ed-stats b { color:#fff; font-variant-numeric:tabular-nums; }
.ed-stats .good, .ed-stats .good b { color:var(--good); } .ed-stats .bad, .ed-stats .bad b { color:var(--bad); }
.ed-note { font-size:12px; color:var(--muted-2); margin-top:5px; }
.dbar.follow { fill:#7d8796; opacity:.75; }
.dbar.follow.imported { fill:#5b6472; opacity:.3; }
.lg.follow { background:#7d8796; } .lg.good { background:var(--good); }
.dnewmin { stroke:var(--accent); stroke-width:1.2; stroke-dasharray:2 4; opacity:.8; }
.dnl { fill:var(--accent); font-size:10.5px; font-weight:600; text-anchor:end; }
.dstats b small { font-size:11.5px; font-weight:600; color:var(--accent); margin-left:6px; }
@media (max-width:700px) { .eod-dmrow { grid-template-columns:1fr 1fr; } .eod-dmrow .eod-target { grid-column:1 / -1; } }
.ws-logo { background:none; padding:0; object-fit:cover; display:block; }

/* EOD date dropdown: pick a past day to fill in or edit (2026-10-21) */
.eod-date{font:inherit;font-weight:700;font-size:inherit;color:inherit;background:transparent;border:1px solid var(--line,rgba(255,255,255,.14));border-radius:10px;padding:4px 30px 4px 10px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.eod-date option{color:#111}