/* PulseKPI interactive demo dashboard */
.demo-body{background:#0a1020;color:var(--on-dark)}
.demo-banner{background:linear-gradient(90deg,rgba(46,230,168,.14),rgba(79,124,255,.14));border-bottom:1px solid rgba(255,255,255,.06);font-size:.88rem;color:var(--on-dark)}
.demo-banner .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 0}
.demo-banner a{color:var(--mint);font-weight:700;text-decoration:none}
.dash{padding:28px 0 64px}
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.dash-head h1{font-size:clamp(1.6rem,3.4vw,2.3rem);color:#fff;margin:0}
.dash-head p{margin:4px 0 0;color:var(--on-dark-2)}
.dash-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{grid-column:span 12;background:linear-gradient(180deg,#111b31,#0e172b);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:20px;min-width:0}
.card.half{grid-column:span 6}
.card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-h h2{font-size:1.05rem;margin:0;color:#fff;letter-spacing:-.01em}
.card-h p{margin:2px 0 0;font-size:.82rem;color:var(--on-dark-2)}
.note{font-size:.8rem;color:var(--on-dark-2);margin:12px 0 0}
.seg{display:inline-flex;background:#0a1222;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{font:inherit;font-size:.8rem;font-weight:700;color:var(--on-dark-2);background:none;border:0;border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--mint);color:#04241a}
.seg button:hover:not([aria-pressed="true"]){color:#fff}
.chart{position:relative;height:280px}
.chart.tall{height:320px}
.chart.short{height:230px}
.big-clock{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.big-clock .u{background:#0a1222;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 14px;min-width:84px;text-align:center}
.big-clock .u b{display:block;font-size:2.4rem;line-height:1.05;color:#fff;font-weight:800;font-variant-numeric:tabular-nums}
.big-clock .u span{font-size:.7rem;color:var(--on-dark-2);text-transform:uppercase;letter-spacing:.08em}
.big-clock .u.flip b{animation:tick .35s ease}
.big-clock .left{color:var(--on-dark-2);font-weight:600;padding-bottom:10px}
.dgoals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.dgoal{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px}
.dgoal .top{display:flex;justify-content:space-between;gap:8px;font-weight:700;color:#fff}
.status{font-size:.75rem;font-weight:800;padding:3px 9px;border-radius:999px}
.status.ok{background:rgba(46,230,168,.14);color:var(--mint)}
.status.warn{background:rgba(245,165,36,.14);color:var(--amber)}
.dgoal .pct{font-size:2rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.dgoal .track{height:10px}
.dgoal small{color:var(--on-dark-2);font-size:.82rem}
.metrics{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.metric{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px}
.metric small{display:block;color:var(--on-dark-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.metric b{display:block;font-size:1.5rem;color:#fff;font-variant-numeric:tabular-nums;margin:2px 0}
.metric em{font-style:normal;font-size:.78rem;color:var(--on-dark-2)}
.metric em.up{color:var(--mint)}
.callout{margin-top:14px;display:flex;gap:10px;align-items:flex-start;background:rgba(79,124,255,.1);border:1px solid rgba(79,124,255,.25);border-radius:12px;padding:12px 14px;font-size:.92rem}
.callout b{color:#fff}
.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.funnel{display:flex;flex-direction:column;gap:10px}
.frow{display:grid;grid-template-columns:110px 1fr 110px;gap:12px;align-items:center}
.frow .lab{font-weight:600;font-size:.9rem}
.frow .bar{position:relative;height:42px}
.frow .bar i{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);border-radius:9px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.frow .bar i.prev{background:rgba(79,124,255,.18)}
.frow .bar i.cur{background:linear-gradient(90deg,#3d6bff,#4f7cff)}
.frow .val b{display:block;color:#fff;font-variant-numeric:tabular-nums}
.frow .val span{font-size:.75rem;color:var(--on-dark-2)}
.dash-cta{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(90deg,rgba(46,230,168,.12),rgba(79,124,255,.12));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px}
.dash-cta h2{font-size:1.3rem;color:#fff;margin:0}
.dash-cta p{margin:4px 0 0;color:var(--on-dark-2)}
.dash-cta .btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:1100px){.metrics{grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){.card.half{grid-column:span 12}.two{grid-template-columns:1fr}.dgoals{grid-template-columns:1fr}}
@media (max-width:560px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .big-clock .u{min-width:64px;padding:8px 10px}.big-clock .u b{font-size:1.8rem}
  .frow{grid-template-columns:84px 1fr 84px;gap:8px}.frow .lab{font-size:.8rem}
  .card{padding:16px}
}