/* Dashboard graphic: companion to the hero phone. Everything scoped under .dv */
.dv { --dv-accent: #2346f5; --dv-violet: #7c3aed; --dv-teal: #0ea5a4; --dv-warm: #f97316; --dv-green: #16a34a; --dv-ink: #0f172a; --dv-muted: #64748b; --dv-line: #e7ebf2;
  position: relative; display: flex; justify-content: center; max-width: 660px; margin: 0 auto; padding: 2rem 1rem 3rem; perspective: 1600px; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.dv *, .dv *::before, .dv *::after { box-sizing: border-box; }
.dv-frame { width: min(560px, 100%); background: #0f172a; border-radius: 22px; padding: 10px; transform: rotateX(10deg) rotateY(-16deg) rotateZ(2deg); transform-style: preserve-3d;
  box-shadow: 30px 50px 90px rgba(15, 23, 42, 0.28), 0 10px 24px rgba(15, 23, 42, 0.14); }
.dv-screen { background: linear-gradient(180deg, #f3f6ff, #fff 45%); border-radius: 14px; padding: 14px; display: grid; gap: 10px; overflow: hidden; color: var(--dv-ink); }
.dv-top { display: flex; align-items: center; justify-content: space-between; }
.dv-dots { display: flex; gap: 5px; } .dv-dots i { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; display: block; }
.dv-dots i:nth-child(1) { background: #f87171; } .dv-dots i:nth-child(2) { background: #fbbf24; } .dv-dots i:nth-child(3) { background: #34d399; }
.dv-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.dv-live { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; color: var(--dv-green); text-transform: uppercase; letter-spacing: 0.06em; }
.dv-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--dv-green); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: dv-pulse 1.6s infinite; }
@keyframes dv-pulse { 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.dv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dv-kpi { border-radius: 12px; padding: 10px; color: #fff; }
.dv-kpi:nth-child(1) { background: linear-gradient(135deg, #2346f5, #5b3df5); }
.dv-kpi:nth-child(2) { background: linear-gradient(135deg, #7c3aed, #c026d3); }
.dv-kpi:nth-child(3) { background: linear-gradient(135deg, #0ea5a4, #0284c7); }
.dv-kpi span { display: block; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.85; font-weight: 650; }
.dv-kpi b { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dv-kpi b.dv-bump { animation: dv-bump 0.5s ease-out; }
@keyframes dv-bump { 40% { transform: scale(1.14); } }
.dv-kpi small { font-size: 0.6rem; opacity: 0.9; }
.dv-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 8px; }
.dv-card { background: #fff; border: 1px solid var(--dv-line); border-radius: 12px; padding: 10px; }
.dv-card h4 { margin: 0 0 6px; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dv-muted); font-weight: 700; }
.dv-chart { display: flex; align-items: flex-end; gap: 5px; height: 92px; }
.dv-chart i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #5b3df5, #2346f5); transition: height 0.6s ease; display: block; min-height: 6px; }
.dv-chart i:last-child { background: linear-gradient(180deg, #f97316, #fb923c); }
.dv-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dv-feed li { display: flex; gap: 7px; align-items: flex-start; font-size: 0.68rem; line-height: 1.3; color: var(--dv-muted); }
.dv-feed li strong { color: var(--dv-ink); font-weight: 700; display: block; }
.dv-tag { flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 0.6rem; font-weight: 800; }
.dv-tag.t-call { background: var(--dv-accent); } .dv-tag.t-lead { background: var(--dv-violet); } .dv-tag.t-book { background: var(--dv-teal); } .dv-tag.t-flag { background: var(--dv-warm); }
.dv-feed li + li { opacity: 0.75; } .dv-feed li + li + li { opacity: 0.5; } .dv-feed li + li + li + li { opacity: 0.3; }
.dv-feed li.dv-new { animation: dv-in 0.45s ease-out; }
@keyframes dv-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.dv-toast { position: absolute; left: 0; bottom: 0.5rem; width: min(260px, 70%); background: #fff; border: 1px solid var(--dv-line); border-radius: 16px; padding: 0.7rem 0.85rem;
  box-shadow: 0 2px 4px rgba(15,23,42,.04), 0 24px 56px rgba(15,23,42,.14); font-size: 0.78rem; color: var(--dv-muted); }
.dv-toast-head { display: flex; align-items: center; gap: 6px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin-bottom: 4px; }
.dv-toast-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--dv-violet); display: block; }
.dv-toast strong { color: var(--dv-ink); }
.dv-toast.dv-new { animation: dv-in 0.45s ease-out; }
@media (max-width: 640px) { .dv-frame { transform: rotateX(6deg) rotateY(-8deg) rotateZ(1deg); } .dv-row { grid-template-columns: 1fr; } .dv-toast { left: 50%; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .dv-pulse, .dv-feed li.dv-new, .dv-toast.dv-new, .dv-kpi b.dv-bump { animation: none; } .dv-chart i { transition: none; } }

/* Home placeholder slot */
.console-viz { margin-top: clamp(2rem, 4vw, 3rem); }
.console-viz .dv { max-width: 760px; }
.console-viz .dv-frame { width: min(680px, 100%); }

/* Layout: KPIs on top, menu left, data middle, feed right */
.console-viz .dv { max-width: 980px; }
.console-viz .dv-frame { width: min(900px, 100%); }
.dv-body { display: grid; grid-template-columns: 110px 1.25fr 1fr; gap: 10px; align-items: start; }
.dv-nav { display: grid; gap: 4px; background: #0f172a; border-radius: 12px; padding: 10px 8px; }
.dv-nav span { font-size: 0.68rem; font-weight: 600; color: #cbd5e1; padding: 6px 8px; border-radius: 8px; }
.dv-nav .is-active { background: linear-gradient(120deg, var(--dv-accent), var(--dv-violet)); color: #fff; }
.dv-main { display: grid; gap: 10px; }
.dv-table { width: 100%; border-collapse: collapse; font-size: 0.66rem; }
.dv-table td { padding: 4px 0; color: var(--dv-ink); }
.dv-table td:nth-child(2) { width: 38%; padding: 0 8px; }
.dv-table td:nth-child(2) i { display: block; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--dv-teal), var(--dv-accent)); }
.dv-table td:last-child { text-align: right; font-weight: 700; }
@media (max-width: 640px) { .dv-body { grid-template-columns: 1fr; } .dv-nav { display: none; } }

/* Bottom strip: illustrative insight cards */
.dv-insights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dv-ins { border-radius: 12px; padding: 10px 12px; background: linear-gradient(135deg, #eef2ff, #e0f7f6); border: 1px solid #c7d2fe; display: grid; gap: 2px; transition: opacity .4s, transform .4s; }
.dv-ins b { font-size: 1.05rem; color: var(--dv-accent); }
.dv-ins:nth-child(2) b { color: var(--dv-violet); } .dv-ins:nth-child(3) b { color: var(--dv-teal); }
.dv-ins span { font-size: 0.64rem; color: var(--dv-muted); font-weight: 600; }
.dv-ins.is-swap { opacity: 0; transform: translateY(6px); }
@media (max-width: 640px) { .dv-insights { grid-template-columns: 1fr; } }
.console-viz .dv { padding-bottom: 5.5rem; } .console-viz .dv-toast { bottom: 0; left: 2%; }
.dv-sent { background: linear-gradient(135deg, #dcfce7, #e0f2fe); border-color: #86efac; } .dv-insights .dv-sent b { color: var(--dv-green); }
.dv-meter { display: block; height: 6px; border-radius: 4px; background: #d1fae5; margin-top: 4px; overflow: hidden; } .dv-meter i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #0ea5a4); }
/* Mobile toast: center via margins, not transform, so the dv-in animation (which animates transform) can't shift it off-screen */
@media (max-width: 640px) { .dv .dv-toast, .console-viz .dv-toast { left: 0; right: 0; margin-inline: auto; transform: none; width: min(280px, 86%); } }