/* ============ DPO CRM — LIVE DEMO APP ============ */
.demo-shell {
  --d-bg: #f6f9fc;
  --d-panel: #ffffff;
  --d-ink: #0a2540;
  --d-soft: #425466;
  --d-light: #697386;
  --d-line: #e3e8ee;
  --d-accent: #635bff;
  background: var(--d-bg);
  padding: 110px 24px 64px;
}
.demo-frame {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--d-panel);
  border: 1px solid var(--d-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px -25px rgba(10,37,64,0.28);
}

/* demo banner */
.demo-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(99,91,255,0.08), rgba(0,212,255,0.06));
  border-bottom: 1px solid var(--d-line);
  padding: 10px 18px; font-size: 13px; color: var(--d-soft);
}
.demo-banner .pill { display:inline-flex; align-items:center; gap:6px; background:var(--d-accent); color:#fff; font-weight:700; font-size:11px; letter-spacing:0.5px; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.demo-banner .pill .dot { width:6px; height:6px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:pulse 2s infinite; }
.demo-banner .grow { flex:1; }
.demo-banner a { color:var(--d-accent); font-weight:600; text-decoration:none; }

/* topbar */
.dapp-top { display:flex; align-items:center; gap:16px; padding:13px 20px; border-bottom:1px solid var(--d-line); background:#fff; }
.dapp-top .dlogo { display:flex; align-items:center; gap:9px; font-family:Manrope,sans-serif; font-weight:800; font-size:16px; color:var(--d-ink); letter-spacing:-0.4px; }
.dapp-top .dlogo .mark { width:26px; height:26px; border-radius:7px; background:var(--gradient-logo); }
.dapp-search { flex:1; max-width:420px; position:relative; }
.dapp-search input { width:100%; padding:9px 14px 9px 36px; border:1px solid var(--d-line); border-radius:9px; font-size:13.5px; font-family:inherit; color:var(--d-ink); background:var(--d-bg); }
.dapp-search input:focus { outline:none; border-color:var(--d-accent); background:#fff; box-shadow:0 0 0 3px rgba(99,91,255,0.12); }
.dapp-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--d-light); }
.dapp-top .spacer { flex:1; }
.dapp-icon { width:36px; height:36px; border-radius:9px; border:1px solid var(--d-line); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--d-soft); position:relative; }
.dapp-icon .ndot { position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:#ff006e; border:1.5px solid #fff; }
.dapp-me { display:flex; align-items:center; gap:9px; }
.dapp-me .av { width:34px; height:34px; border-radius:50%; background:var(--gradient-1); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.dapp-me .who { line-height:1.2; }
.dapp-me .who b { font-size:13px; color:var(--d-ink); display:block; }
.dapp-me .who span { font-size:11px; color:var(--d-light); }

/* layout */
.dapp-body { display:grid; grid-template-columns:212px 1fr; min-height:620px; }
.dapp-side { background:#fbfcfe; border-right:1px solid var(--d-line); padding:18px 12px; }
.dapp-side .grp { font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--d-light); padding:8px 12px 6px; font-weight:600; }
.dnav { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px; border:none; background:none; border-radius:9px; font-family:inherit; font-size:14px; font-weight:500; color:var(--d-soft); cursor:pointer; margin-bottom:2px; transition:all 0.15s; }
.dnav:hover { background:rgba(10,37,64,0.04); color:var(--d-ink); }
.dnav.active { background:rgba(99,91,255,0.12); color:var(--d-accent); font-weight:600; }
.dnav svg { width:17px; height:17px; flex-shrink:0; }
.dnav .count { margin-left:auto; font-size:11px; background:rgba(10,37,64,0.06); color:var(--d-soft); padding:1px 8px; border-radius:999px; font-weight:600; }
.dapp-side .upsell { margin-top:24px; background:var(--bg-dark); border-radius:12px; padding:16px; color:#fff; }
.dapp-side .upsell b { font-size:14px; display:block; margin-bottom:5px; }
.dapp-side .upsell p { font-size:12px; color:rgba(255,255,255,0.65); line-height:1.45; margin-bottom:12px; }
.dapp-side .upsell a { display:block; text-align:center; background:#fff; color:var(--d-ink); font-size:12.5px; font-weight:700; padding:8px; border-radius:8px; text-decoration:none; }

.dapp-main { padding:24px 26px; overflow:hidden; }
.dview-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:20px; }
.dview-head h1 { font-size:23px; font-weight:700; letter-spacing:-0.5px; color:var(--d-ink); }
.dview-head .sub { font-size:13px; color:var(--d-light); margin-top:3px; }
.dbtn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px; border:none; background:var(--d-ink); color:#fff; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
.dbtn:hover { background:#1d3a5e; }
.dbtn.ghost { background:#fff; color:var(--d-soft); border:1px solid var(--d-line); }
.dbtn.ghost:hover { border-color:var(--d-accent); color:var(--d-accent); }

/* KPI cards */
.kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
.kpi { background:#fff; border:1px solid var(--d-line); border-radius:12px; padding:18px; }
.kpi .l { font-size:12.5px; color:var(--d-light); margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.kpi .l .ic { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,rgba(99,91,255,0.12),rgba(0,212,255,0.12)); display:flex; align-items:center; justify-content:center; color:var(--d-accent); }
.kpi .v { font-size:27px; font-weight:700; letter-spacing:-1px; color:var(--d-ink); }
.kpi .d { font-size:12px; margin-top:5px; font-weight:600; }
.kpi .d.up { color:var(--green); }
.kpi .d.down { color:#d6336c; }
@media (max-width:900px){ .kpis{ grid-template-columns:repeat(2,1fr);} }

/* cards grid */
.dcards { display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
.dcard { background:#fff; border:1px solid var(--d-line); border-radius:12px; padding:18px 20px; }
.dcard h3 { font-size:15px; font-weight:700; color:var(--d-ink); margin-bottom:2px; }
.dcard .ch-sub { font-size:12px; color:var(--d-light); margin-bottom:16px; }
@media (max-width:900px){ .dcards{ grid-template-columns:1fr; } }

/* chart */
.chart-wrap { height:200px; position:relative; }
.chart-wrap svg { width:100%; height:100%; overflow:visible; }
.chart-x { display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--d-light); }

/* funnel */
.funnel { display:flex; flex-direction:column; gap:9px; }
.fstage { }
.fstage .fh { display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; color:var(--d-soft); }
.fstage .fh b { color:var(--d-ink); }
.fbar { height:9px; border-radius:5px; background:var(--d-line); overflow:hidden; }
.fbar i { display:block; height:100%; border-radius:5px; background:var(--gradient-1); }

/* activity feed */
.feed { display:flex; flex-direction:column; }
.feed-item { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--d-line); }
.feed-item:last-child { border-bottom:none; }
.feed-dot { width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; }
.feed-item .ft { font-size:13px; color:var(--d-ink); line-height:1.4; }
.feed-item .ft b { font-weight:600; }
.feed-item .fm { font-size:11.5px; color:var(--d-light); margin-top:2px; }

/* leaderboard */
.board-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--d-line); }
.board-row:last-child { border-bottom:none; }
.board-row .rk { width:20px; font-weight:700; color:var(--d-light); font-size:13px; }
.board-row .av { width:32px; height:32px; border-radius:50%; background:var(--gradient-1); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; }
.board-row .nm { font-size:13px; font-weight:600; color:var(--d-ink); }
.board-row .rl { font-size:11px; color:var(--d-light); }
.board-row .val { margin-left:auto; text-align:right; }
.board-row .val b { font-size:14px; color:var(--d-ink); }
.board-row .val span { font-size:11px; color:var(--d-light); display:block; }

/* toolbar (customers) */
.dtoolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.dtoolbar .tsearch { flex:1; min-width:200px; position:relative; }
.dtoolbar .tsearch input { width:100%; padding:9px 12px 9px 34px; border:1px solid var(--d-line); border-radius:9px; font-size:13.5px; font-family:inherit; background:#fff; }
.dtoolbar .tsearch input:focus { outline:none; border-color:var(--d-accent); box-shadow:0 0 0 3px rgba(99,91,255,0.12); }
.dtoolbar .tsearch svg { position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--d-light); }
.dchip { padding:8px 14px; border:1px solid var(--d-line); background:#fff; border-radius:9px; font-size:13px; font-weight:500; color:var(--d-soft); cursor:pointer; font-family:inherit; }
.dchip.active { background:var(--d-ink); color:#fff; border-color:var(--d-ink); }

/* table */
.dtable-wrap { border:1px solid var(--d-line); border-radius:12px; overflow:hidden; }
.dtable { width:100%; border-collapse:collapse; font-size:13.5px; }
.dtable th { text-align:left; padding:12px 16px; background:#fbfcfe; border-bottom:1px solid var(--d-line); font-size:11.5px; text-transform:uppercase; letter-spacing:0.5px; color:var(--d-light); font-weight:600; }
.dtable td { padding:12px 16px; border-bottom:1px solid var(--d-line); color:var(--d-soft); }
.dtable tr:last-child td { border-bottom:none; }
.dtable tbody tr:hover { background:#fbfcfe; }
.dtable .cust { display:flex; align-items:center; gap:11px; }
.dtable .cust .av { width:32px; height:32px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; }
.dtable .cust .nm { font-weight:600; color:var(--d-ink); }
.dtable .cust .em { font-size:11.5px; color:var(--d-light); }
.dtable .money { font-weight:600; color:var(--d-ink); }
.stat-tag { font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; display:inline-block; }
.stat-lead { background:rgba(99,91,255,0.12); color:#635bff; }
.stat-qualified { background:rgba(0,212,255,0.14); color:#0891b2; }
.stat-proposal { background:rgba(254,188,46,0.18); color:#b45309; }
.stat-negotiation { background:rgba(255,138,0,0.16); color:#c2410c; }
.stat-won { background:rgba(74,222,128,0.18); color:#15803d; }
.stat-lost { background:rgba(10,37,64,0.07); color:#697386; }
.dtable .tags span { font-size:10.5px; background:var(--d-bg); border:1px solid var(--d-line); color:var(--d-light); padding:2px 8px; border-radius:6px; margin-right:4px; }

/* pagination */
.dpager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:16px; font-size:13px; color:var(--d-light); }
.dpager .pg { display:flex; gap:6px; }
.dpager .pg button { width:32px; height:32px; border:1px solid var(--d-line); background:#fff; border-radius:8px; font-family:inherit; font-size:13px; color:var(--d-soft); cursor:pointer; }
.dpager .pg button.active { background:var(--d-ink); color:#fff; border-color:var(--d-ink); }
.dpager .pg button:disabled { opacity:0.4; cursor:default; }

/* kanban */
.kanban { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.kcol { background:#fbfcfe; border:1px solid var(--d-line); border-radius:12px; padding:12px; min-height:300px; }
.kcol .kh { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:12.5px; font-weight:700; color:var(--d-ink); }
.kcol .kh .kdot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px; }
.kcol .kh .kc { font-size:11px; color:var(--d-light); background:#fff; border:1px solid var(--d-line); padding:1px 8px; border-radius:999px; }
.kcard { background:#fff; border:1px solid var(--d-line); border-radius:10px; padding:12px; margin-bottom:9px; cursor:grab; transition:box-shadow 0.15s, transform 0.15s; }
.kcard:hover { box-shadow:0 6px 18px rgba(10,37,64,0.1); transform:translateY(-1px); }
.kcard .kt { font-size:13px; font-weight:600; color:var(--d-ink); margin-bottom:4px; }
.kcard .kco { font-size:11.5px; color:var(--d-light); margin-bottom:9px; }
.kcard .kfoot { display:flex; align-items:center; justify-content:space-between; }
.kcard .kval { font-size:13px; font-weight:700; color:var(--d-ink); }
.kcard .kav { width:24px; height:24px; border-radius:50%; background:var(--gradient-1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; }
.kcol-total { font-size:11px; color:var(--d-light); margin-top:4px; text-align:center; }
@media (max-width:980px){ .kanban{ grid-template-columns:1fr; } }

/* inbox */
.inbox { display:grid; grid-template-columns:320px 1fr; border:1px solid var(--d-line); border-radius:12px; overflow:hidden; min-height:440px; }
.inbox-list { border-right:1px solid var(--d-line); overflow-y:auto; max-height:480px; }
.imsg { display:flex; gap:11px; padding:14px 16px; border-bottom:1px solid var(--d-line); cursor:pointer; }
.imsg:hover, .imsg.active { background:#fbfcfe; }
.imsg.unread .it { font-weight:700; }
.imsg .av { width:36px; height:36px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.imsg .ibody { flex:1; min-width:0; }
.imsg .irow { display:flex; justify-content:space-between; gap:8px; }
.imsg .it { font-size:13.5px; color:var(--d-ink); }
.imsg .itime { font-size:11px; color:var(--d-light); flex-shrink:0; }
.imsg .ip { font-size:12.5px; color:var(--d-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.imsg .chan { font-size:10px; padding:1px 7px; border-radius:5px; font-weight:600; margin-top:5px; display:inline-block; }
.chan-email { background:rgba(99,91,255,0.12); color:#635bff; }
.chan-whatsapp { background:rgba(74,222,128,0.16); color:#15803d; }
.chan-sms { background:rgba(0,212,255,0.14); color:#0891b2; }
.inbox-read { padding:22px 24px; }
.inbox-read .rhead { display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--d-line); margin-bottom:18px; }
.inbox-read .rhead .av { width:44px; height:44px; border-radius:50%; background:var(--gradient-1); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.inbox-read .rhead b { font-size:15px; color:var(--d-ink); display:block; }
.inbox-read .rhead span { font-size:12.5px; color:var(--d-light); }
.bubble { max-width:80%; padding:12px 15px; border-radius:14px; font-size:13.5px; line-height:1.5; margin-bottom:12px; }
.bubble.them { background:var(--d-bg); color:var(--d-ink); border-bottom-left-radius:4px; }
.bubble.me { background:var(--d-accent); color:#fff; margin-left:auto; border-bottom-right-radius:4px; }
.bubble .bm { font-size:10.5px; opacity:0.6; margin-top:5px; }
.inbox-reply { margin-top:18px; display:flex; gap:10px; }
.inbox-reply input { flex:1; padding:11px 14px; border:1px solid var(--d-line); border-radius:9px; font-family:inherit; font-size:13.5px; }
.inbox-reply input:focus { outline:none; border-color:var(--d-accent); box-shadow:0 0 0 3px rgba(99,91,255,0.12); }
@media (max-width:780px){ .inbox{ grid-template-columns:1fr; } .inbox-read{ display:none; } }

/* reports */
.rep-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .rep-grid{ grid-template-columns:1fr; } }
.bars { display:flex; align-items:flex-end; gap:14px; height:200px; padding-top:10px; }
.bars .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bars .bar i { width:100%; max-width:42px; border-radius:7px 7px 0 0; background:var(--gradient-1); display:block; }
.bars .bar small { font-size:11px; color:var(--d-light); }
.donut-wrap { display:flex; align-items:center; gap:24px; }
.donut-legend { display:flex; flex-direction:column; gap:10px; }
.donut-legend .ll { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--d-soft); }
.donut-legend .ll i { width:11px; height:11px; border-radius:3px; }
.donut-legend .ll b { color:var(--d-ink); margin-left:auto; padding-left:18px; }

/* mobile app */
@media (max-width:760px){
  .demo-shell { padding:92px 12px 48px; }
  .dapp-body { grid-template-columns:1fr; }
  .dapp-side { display:none; }
  .dapp-search { display:none; }
  .dapp-main { padding:18px 14px; }
  .dtable-wrap { overflow-x:auto; }
  .dtable { min-width:680px; }
}

/* mobile bottom tab nav for demo */
.dapp-tabs { display:none; }
@media (max-width:760px){
  .dapp-tabs { display:flex; border-top:1px solid var(--d-line); background:#fff; }
  .dapp-tabs button { flex:1; border:none; background:none; padding:11px 4px; font-family:inherit; font-size:10px; color:var(--d-light); display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; }
  .dapp-tabs button.active { color:var(--d-accent); }
  .dapp-tabs button svg { width:18px; height:18px; }
}