/* Product VDP: the SVL visual shell with real Audience data only. */
.vdp-page { --vdp-accent:#d5ad2d; }
.vdp-mark { background:rgba(213,173,45,.14); color:#9a7610; box-shadow:inset 0 0 0 1px rgba(213,173,45,.22); font-size:19px; font-weight:800; }
.vdp-tabs { display:flex; gap:5px; margin:0 0 16px; padding:4px; overflow-x:auto; border:1px solid var(--svl-border); border-radius:12px; background:var(--svl-soft); scrollbar-width:thin; }
.vdp-tab { flex:0 0 auto; min-height:34px; padding:7px 13px; border:0; border-radius:8px; background:transparent; color:var(--svl-muted); font:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.vdp-tab:hover { color:#20242c; }
.vdp-tab.active { background:#20242c; color:#fff; box-shadow:0 4px 14px rgba(25,30,40,.14); }
.vdp-section { display:none; padding-bottom:30px; }
.vdp-section.active { display:block; }
.vdp-source-banner { display:grid; margin-bottom:14px; padding:12px 15px; grid-template-columns:1fr auto; align-items:center; gap:12px; border:1px solid rgba(213,173,45,.24); border-radius:12px; background:rgba(213,173,45,.07); }
.vdp-source-banner strong { font-size:12px; }
.vdp-source-banner small { color:var(--svl-muted); font-size:10px; text-align:right; }
.vdp-source-banner[data-status="error"] { border-color:rgba(182,95,104,.3); background:rgba(182,95,104,.08); }
.vdp-free-note { display:flex; margin-bottom:14px; padding:12px 15px; align-items:center; gap:10px; border:1px solid rgba(59,156,121,.24); border-radius:12px; background:rgba(59,156,121,.07); color:#477062; font-size:10px; line-height:1.45; }
.vdp-free-note strong { color:#2b6f57; }
.vdp-kpi-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.vdp-kpi .svl-kpi-label { min-height:0; }
.vdp-timeline { display:flex; min-height:220px; align-items:flex-end; gap:6px; padding-top:20px; }
.vdp-timeline-column { display:flex; min-width:12px; flex:1 1 0; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; }
.vdp-timeline-column strong { color:#6e5510; font-size:9px; font-variant-numeric:tabular-nums; }
.vdp-timeline-column i { display:block; width:min(22px,80%); min-height:2px; height:var(--height); border-radius:5px 5px 2px 2px; background:var(--vdp-accent); }
.vdp-timeline-column span { color:var(--svl-muted); font-size:8px; white-space:nowrap; writing-mode:vertical-rl; transform:rotate(180deg); }
.vdp-completeness { display:grid; gap:12px; }
.vdp-completeness-row { display:grid; grid-template-columns:minmax(150px,1fr) auto; align-items:center; gap:12px; }
.vdp-completeness-row > div { display:flex; flex-direction:column; gap:4px; }
.vdp-completeness-row span { color:#3f4652; font-size:10px; font-weight:700; }
.vdp-completeness-row small { color:var(--svl-muted); font-size:9px; }
.vdp-completeness-row strong { font-size:16px; font-variant-numeric:tabular-nums; }
.vdp-flow-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.vdp-flow-list { display:grid; gap:9px; }
.vdp-flow-row { display:grid; grid-template-columns:minmax(140px,1fr) minmax(80px,2fr) auto; align-items:center; gap:10px; color:#535b68; font-size:10px; }
.vdp-flow-name { min-width:0; color:#535b68; font-weight:650; line-height:1.35; overflow-wrap:anywhere; }
.vdp-flow-track { display:block; height:8px; overflow:hidden; border-radius:99px; background:#eceef3; }
.vdp-flow-track i { display:block; width:var(--value); min-width:2px; height:100%; border-radius:inherit; background:var(--vdp-accent); }
.vdp-flow-row strong { font-size:11px; font-variant-numeric:tabular-nums; }
.vdp-stage-row { grid-template-columns:minmax(110px,200px) minmax(90px,1fr) 42px 88px; }
.vdp-stage-row .svl-stage-label,.vdp-current-row > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vdp-current-row { grid-template-columns:minmax(110px,200px) minmax(90px,1fr) 42px; }
.vdp-progress-layout .svl-stage-track i,.vdp-progress-layout .svl-ranked-track i { background:var(--vdp-accent); }
.vdp-progress-coverage { padding:12px 15px; border:1px solid var(--svl-border); border-radius:11px; background:var(--svl-surface); color:var(--svl-muted); font-size:10px; line-height:1.45; }
.vdp-progress-coverage strong { color:inherit; font-size:11px; font-variant-numeric:tabular-nums; }
.vdp-kdi-target { display:grid; margin-bottom:14px; padding:18px; grid-template-columns:1fr auto; align-items:center; gap:14px; border:1px solid rgba(230,153,49,.28); border-radius:13px; background:rgba(230,153,49,.07); }
.vdp-kdi-target span { color:#8f6527; font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.vdp-kdi-target strong { display:block; margin-top:5px; font-size:18px; }
.vdp-kdi-target b { color:#a96614; font-size:30px; font-variant-numeric:tabular-nums; }
.vdp-path-button { min-height:36px; padding:8px 13px; border:0; border-radius:8px; background:#20242c; color:#fff; font:inherit; font-size:10px; font-weight:750; cursor:pointer; }
.vdp-participant-tools { display:flex; margin-bottom:12px; padding:12px; align-items:center; gap:9px; }
.vdp-participant-tools input,.vdp-participant-tools select { min-height:34px; padding:7px 9px; border:1px solid var(--svl-border); border-radius:8px; outline:0; background:var(--svl-surface); color:#303641; font:inherit; font-size:10px; }
.vdp-participant-tools input { width:min(340px,50%); }
.vdp-table { min-width:1500px; }
.vdp-table tbody tr { cursor:pointer; }
.vdp-date-approx { display:block; margin-top:3px; color:var(--svl-muted); font-size:8px; }
.vdp-flow-cell { display:block; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vdp-participant-dialog { width:min(980px,calc(100vw - 36px)); max-height:calc(100vh - 36px); padding:0; overflow:auto; border:1px solid var(--svl-border); border-radius:16px; background:var(--svl-surface); color:inherit; box-shadow:0 28px 80px rgba(31,39,52,.24); }
.vdp-participant-dialog::backdrop { background:rgba(15,18,24,.52); backdrop-filter:blur(2px); }
.vdp-dialog-head { display:flex; position:sticky; z-index:2; top:0; padding:20px 22px; align-items:flex-start; justify-content:space-between; gap:15px; border-bottom:1px solid var(--svl-border); background:var(--svl-surface); }
.vdp-dialog-head h2 { margin-top:5px; font-size:22px; }
.vdp-dialog-head p { margin-top:4px; color:var(--svl-muted); font-size:10px; }
.vdp-dialog-close { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--svl-border); border-radius:9px; background:var(--svl-surface); color:inherit; font-size:20px; cursor:pointer; }
.vdp-dialog-body { display:grid; padding:22px; gap:16px; }
.vdp-dialog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.vdp-dialog-field { padding:12px; border:1px solid var(--svl-border); border-radius:10px; background:var(--svl-soft); }
.vdp-dialog-field span { display:block; color:var(--svl-muted); font-size:8px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; }
.vdp-dialog-field strong { display:block; margin-top:6px; font-size:10px; overflow-wrap:anywhere; }
.vdp-membership { padding:15px; border:1px solid var(--svl-border); border-radius:12px; }
.vdp-membership h3 { margin-bottom:12px; font-size:13px; }
.vdp-empty,.vdp-error { display:flex; min-height:180px; align-items:center; justify-content:center; padding:30px; color:var(--svl-muted); font-size:11px; text-align:center; }
.vdp-error { color:#b65f68; }

html[data-theme="dark"] .vdp-mark { background:rgba(213,173,45,.18); color:#e1c057; }
html[data-theme="dark"] .vdp-tabs { background:#111318; }
html[data-theme="dark"] .vdp-tab:hover { color:#f2f3f5; }
html[data-theme="dark"] .vdp-tab.active { background:#e7e9ed; color:#14161b; }
html[data-theme="dark"] .vdp-free-note { color:#8fc8b3; }
html[data-theme="dark"] .vdp-free-note strong { color:#9bd4bf; }
html[data-theme="dark"] .vdp-timeline-column strong { color:#e1c057; }
html[data-theme="dark"] .vdp-completeness-row span,html[data-theme="dark"] .vdp-flow-row,html[data-theme="dark"] .vdp-flow-name { color:#cdd0d7; }
html[data-theme="dark"] .vdp-flow-track { background:#282b34; }
html[data-theme="dark"] .vdp-participant-tools input,html[data-theme="dark"] .vdp-participant-tools select { background:#111318; color:#dfe2e8; }

@media (max-width:1200px) {
  .vdp-kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vdp-dialog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .vdp-flow-layout { grid-template-columns:1fr; }
}