/* MVP Technologies website v2 — product UI visuals, part 2.
   Loaded after site.css (reuses .ui, .ui-top, .ui-plan, .ui-metrics, .ui-feed, .tag, .live, .cam, .diagram).
   Every class is prefixed per visual: v-qc queue-chart, v-atm atm-watch, v-cs count-store, v-ck checkout-queue,
   v-ch camera-health, v-ef edge-flow, v-da doc-agent, v-il inspect-line, v-ap app-screens, v-im integration-map,
   v-rm roadmap, v-hw hardware-stack, v-tl timeline-exp. Shared helpers: v-m3, v-legend, v-seg, v-hours, v-chip. */

/* ---------- shared (dark) ---------- */
.ui-metrics.v-m3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-metric.alert { border-color: rgba(240, 113, 103, .38); background: rgba(240, 113, 103, .07); }
.ui-metric.alert .v { color: var(--alert); }
.ui-metric.alert .s { color: rgba(240, 113, 103, .85); }
.tag.v-gold { background: rgba(209, 165, 45, .16); color: var(--gold-soft); }
.v-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; list-style: none; margin: 0; padding: 0; font-size: 11.5px; color: var(--u-dim); line-height: 1.3; }
.v-legend li { display: inline-flex; align-items: center; gap: 7px; }
.v-legend .sw { width: 10px; height: 10px; border-radius: 2px; display: block; flex: none; }
.v-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }
.v-legend .ring { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--gold); background: var(--navy-800); display: block; flex: none; }
.v-legend .ln { width: 16px; height: 0; border-top: 2px solid var(--u-text); display: block; flex: none; position: relative; }
.v-legend .ln::after { content: ""; position: absolute; left: 5px; top: -4px; width: 6px; height: 6px; border-radius: 50%; background: var(--u-text); }
.v-legend .ln.gold { border-top-color: var(--gold); }
.v-legend .ln.gold::after { display: none; }
.v-seg { display: inline-flex; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; overflow: hidden; }
.v-seg span { padding: 2px 9px; font-size: 11px; color: var(--u-dim); line-height: 1.5; }
.v-seg span + span { border-left: 1px solid rgba(255, 255, 255, .1); }
.v-seg span.on { background: rgba(255, 255, 255, .1); color: var(--u-text); }

/* hourly mini bar chart (dark) */
.v-hours { padding: 10px 16px 8px; }
.v-hours-h { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--u-dim); margin-bottom: 8px; }
.v-hours-bars { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; align-items: end; height: 60px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.v-hours-bars i { display: block; height: 100%; background: #4F7FC4; border-radius: 3px 3px 0 0; min-height: 2px; }
.v-hours-bars i.pk { background: var(--gold); }
.v-hours-bars i.now { background: rgba(79, 127, 196, .5); }
.v-hours-bars i.over { background: var(--warn); }
.v-hours-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; font-size: 11px; color: var(--u-faint); text-align: center; margin-top: 5px; font-variant-numeric: tabular-nums; }
.v-lim { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(243, 179, 76, .9); }
.v-lim em { position: absolute; left: 0; bottom: 3px; font-style: normal; font-size: 11px; line-height: 1.2; color: var(--warn); background: var(--u-bg); padding: 0 4px 0 0; }

/* ---------- queue-chart ---------- */
.v-qc .tag, .v-atm .tag, .v-cs .tag, .v-ck .tag, .v-ch .tag, .v-da .tag { font-size: 11px; }
.v-qc-body { padding: 14px 16px 12px; }
.v-qc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; margin: 0 0 12px; }
.v-qc-head .ttl { font-size: 12px; font-weight: 500; color: var(--u-text); }
.v-qc-head.w { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--u-line); }
.v-qc-chart { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; }
.v-qc-ax { position: relative; height: 132px; font-size: 11px; line-height: 1; color: var(--u-faint); font-variant-numeric: tabular-nums; }
.v-qc-ax span { position: absolute; right: 0; transform: translateY(50%); }
.v-qc-plot { position: relative; height: 132px; }
.v-qc-chart.w .v-qc-ax, .v-qc-chart.w .v-qc-plot { height: 58px; }
.v-qc-gl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--u-line); }
.v-qc-gl:first-child { border-top-color: rgba(255, 255, 255, .16); }
.v-qc-groups { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.v-qc-g { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 100%; }
.v-qc-g .b { width: 30%; max-width: 18px; border-radius: 3px 3px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.v-qc-g .b.t { background: #4F7FC4; }
.v-qc-g .b.c { background: rgba(231, 237, 246, .34); }
.v-qc-g .b .over { display: block; width: 100%; flex: none; background: var(--warn); }
.v-qc-lim { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(243, 179, 76, .9); }
.v-qc-lim span { position: absolute; right: 0; bottom: 4px; font-size: 11px; line-height: 1.2; color: var(--warn); background: var(--u-bg); padding: 1px 0 1px 6px; }
.v-qc-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.v-qc-line polyline { fill: none; stroke: #E7EDF6; stroke-width: 1.8; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.v-qc-dot { position: absolute; width: 8px; height: 8px; margin: 0 0 -4px -4px; border-radius: 50%; background: #E7EDF6; box-shadow: 0 0 0 2px var(--u-bg); }
.v-qc-x { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); font-size: 11px; color: var(--u-faint); text-align: center; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ---------- atm-watch ---------- */
.v-atm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 14px 10px; }
.v-atm-cam { aspect-ratio: 4 / 3; }
.v-atm-cam::after { content: ""; position: absolute; inset: 0; border-radius: 8px; pointer-events: none; border: 1px solid rgba(255, 255, 255, .08); }
.v-atm-cam.warn::after { border: 1.5px solid rgba(243, 179, 76, .75); }
.v-atm-cam.alert::after { border: 1.5px solid rgba(240, 113, 103, .85); }
.v-atm-chip { position: absolute; left: 8px; bottom: 8px; font-size: 11px; font-weight: 600; line-height: 1.3; padding: 3px 8px; border-radius: 4px; color: var(--navy-950); font-variant-numeric: tabular-nums; }
.v-atm-chip.warn { background: var(--warn); }
.v-atm-chip.alert { background: var(--alert); }
.v-atm-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 2px 0; font-size: 11.5px; color: var(--u-dim); }
.v-atm-cap b { color: var(--u-text); font-weight: 500; font-size: 12.5px; white-space: nowrap; }
.v-atm-cap span { text-align: right; }

/* ---------- count-store ---------- */
.v-cs-map { position: relative; max-width: 660px; margin: 0 auto; }
.v-cs-map svg { width: 100%; height: auto; display: block; }
.v-cs-badge { position: absolute; transform: translateY(-50%); white-space: nowrap; font-size: 11.5px; line-height: 1.3; color: var(--u-dim); background: rgba(7, 29, 63, .94); border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.v-cs-badge .z { color: var(--u-text); }
.v-cs-badge b { color: #fff; font-weight: 600; }
.v-cs-badge.hl { border-color: rgba(209, 165, 45, .8); }
.v-cs-badge.hl b { color: var(--gold-soft); }
.v-cs-zones { display: none; }
.v-cs-legend { padding: 4px 16px 10px; border-bottom: 1px solid var(--u-line); }
.v-cs-legend .lab { color: var(--u-dim); margin-right: auto; }

/* ---------- checkout-queue ---------- */
.v-ck-body { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 16px; padding: 14px 16px 8px; align-items: end; }
.v-ck-lanes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.v-ck-lane { border: 1px solid var(--u-line); border-radius: 8px; background: var(--u-panel); padding: 8px 4px 9px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.v-ck-lane.hl { border: 1.5px dashed var(--gold); background: rgba(209, 165, 45, .06); }
.v-ck-h { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.v-ck-h .n { font-size: 12px; font-weight: 500; color: var(--u-text); white-space: nowrap; }
.v-ck-desk { width: 76%; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); position: relative; }
.v-ck-desk i { position: absolute; left: 50%; top: -9px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); background: var(--u-bg); }
.v-ck-lane.closed .v-ck-desk { background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, .2); }
.v-ck-lane.closed .n { color: var(--u-dim); }
.v-ck-q { display: flex; flex-direction: column; align-items: center; gap: 5px; height: 79px; }
.v-ck-q i { width: 11px; height: 11px; border-radius: 50%; background: #fff; display: block; flex: none; }
.v-ck-c { text-align: center; line-height: 1.1; }
.v-ck-c b { display: block; font-family: var(--font-display); font-weight: 620; font-size: 18px; color: #fff; font-variant-numeric: tabular-nums; }
.v-ck-c small { display: block; font-size: 11px; color: var(--u-dim); margin-top: 2px; }
.v-ck-lane.closed .v-ck-c b { color: var(--u-faint); }
.v-ck-hours { padding: 0 0 4px; }
.v-ck-hours .v-hours-bars { height: 96px; }

/* ---------- camera-health ---------- */
.v-ch-metrics { padding-top: 14px; }
.v-ch-tbl { padding: 0 16px 12px; }
.v-ch-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--u-line); }
.v-ch-hd { border-top: 0; padding: 4px 0 6px; font-size: 11px; color: var(--u-faint); letter-spacing: .08em; text-transform: uppercase; }
.v-ch-hd span:last-child, .v-ch-row .tm { text-align: right; }
.v-ch-loc { display: flex; align-items: baseline; gap: 10px; background: rgba(255, 255, 255, .045); border-radius: 6px; padding: 6px 10px; margin: 6px -10px 2px; }
.v-ch-loc b { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: #fff; }
.v-ch-loc span { font-size: 11.5px; color: var(--u-dim); }
.v-ch-loc + .v-ch-row { border-top: 0; }
.v-ch-row .dev { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--u-text); }
.v-ch-row .dev small { display: block; font-size: 11px; color: var(--u-faint); line-height: 1.25; }
.v-ch-row .ic { width: 16px; height: 12px; flex: none; fill: none; stroke: rgba(231, 237, 246, .6); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.v-ch-row .st { min-width: 0; }
.v-ch-row .tm { color: var(--u-faint); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ---------- doc-agent ---------- */
.v-da-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 12px 12px 11px; border-bottom: 1px solid var(--u-line); }
.v-da-steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; font-size: 11.5px; line-height: 1.25; color: var(--u-dim); }
.v-da-steps li:not(:last-child)::after { content: ""; position: absolute; top: 9px; left: calc(50% + 15px); right: calc(-50% + 12px); height: 1px; background: rgba(61, 190, 139, .4); }
.v-da-steps .ck { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(61, 190, 139, .16); color: var(--ok); }
.v-da-steps .ck svg { width: 12px; height: 12px; display: block; }
.v-da-steps li.cur { color: var(--gold-soft); }
.v-da-steps li:nth-last-child(2)::after { background: none; border-top: 1px dashed rgba(209, 165, 45, .6); height: 0; }
.v-da-steps li.cur .ck { background: rgba(209, 165, 45, .16); border: 1px solid var(--gold); color: var(--gold-soft); }
.v-da-steps li.cur .ck b { font-family: var(--font-display); font-size: 11px; font-weight: 600; line-height: 1; }
.v-da-body { padding: 14px 16px 14px; display: grid; gap: 12px; }
.v-da-mail { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; background: var(--u-panel); border: 1px solid var(--u-line); border-radius: 8px; padding: 11px 12px; }
.v-da-env { width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, .07); color: var(--u-text); display: grid; place-items: center; }
.v-da-env svg { width: 18px; height: 15px; display: block; }
.v-da-mt { min-width: 0; }
.v-da-mt b { display: block; font-weight: 500; color: var(--u-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-da-mt span { display: block; font-size: 12px; color: var(--u-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-da-time { font-size: 12px; color: var(--u-faint); font-variant-numeric: tabular-nums; align-self: start; }
.v-da-att { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.v-da-att span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--u-text); border: 1px solid rgba(255, 255, 255, .14); border-radius: 5px; padding: 3px 8px 3px 4px; }
.v-da-att i { font-style: normal; font-size: 11px; font-weight: 600; color: #F6A39C; background: rgba(240, 113, 103, .16); border-radius: 3px; padding: 0 4px; line-height: 1.5; }
.v-da-tbl { border: 1px solid var(--u-line); border-radius: 8px; overflow: hidden; }
.v-da-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 92px; gap: 10px; align-items: end; padding: 7px 12px 8px; border-top: 1px solid var(--u-line); }
.v-da-r.hd { border-top: 0; background: rgba(255, 255, 255, .035); font-size: 11px; color: var(--u-faint); letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; }
.v-da-r .f { color: #fff; font-variant-numeric: tabular-nums; min-width: 0; }
.v-da-r .f small { display: block; font-size: 11px; color: var(--u-faint); line-height: 1.3; }
.v-da-r .mv { color: var(--u-text); font-size: 12.5px; line-height: 1.4; min-width: 0; }
.v-da-r > span:last-child { text-align: right; }
.v-da-out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
.v-da-res { border: 1px solid var(--u-line); background: var(--u-panel); border-radius: 8px; padding: 9px 12px; }
.v-da-res small { display: block; font-size: 11px; color: var(--u-dim); }
.v-da-res b { display: block; font-family: var(--font-display); font-weight: 620; font-size: 15px; color: var(--u-dim); margin-top: 2px; white-space: nowrap; }
.v-da-res .ok { color: var(--ok); }
.v-da-res .wn { color: var(--warn); }
.v-da-draft { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--u-line); background: var(--u-panel); border-radius: 8px; padding: 9px 12px; }
.v-da-draft .doc { width: 22px; height: 28px; border: 1.5px solid rgba(231, 237, 246, .6); border-radius: 3px; position: relative; display: block; }
.v-da-draft .doc::after { content: ""; position: absolute; left: 4px; right: 4px; top: 7px; height: 9px; border-top: 1.5px solid rgba(231, 237, 246, .45); border-bottom: 1.5px solid rgba(231, 237, 246, .45); }
.v-da-draft b { display: block; font-weight: 500; color: var(--u-text); }
.v-da-draft small { display: block; font-size: 11.5px; color: var(--u-dim); }

/* ---------- light diagrams: shared ---------- */
.v-chip { display: inline-block; font-size: 11px; line-height: 1.45; font-weight: 500; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: #E8EEF7; color: var(--navy); }
.v-chip.ok { background: #E3F4EC; color: #11694F; }
.v-chip.warn { background: #FCF0D9; color: #7A5000; }
.v-chip.alert { background: #FDE9E8; color: #A3261C; }
.v-chip.dev { background: #E8EEF7; color: var(--navy); }

/* ---------- edge-flow ---------- */
.v-ef-grid { display: grid; grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr) 66px minmax(0, 1fr); align-items: stretch; }
.v-ef-step { border: 1.5px solid var(--navy); border-radius: 10px; padding: 14px 13px 14px; background: #fff; min-width: 0; }
.diagram .v-ef-ic { width: 64px; height: 44px; display: block; fill: #fff; stroke: var(--navy); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.v-ef-ic * { vector-effect: non-scaling-stroke; }
.v-ef-ic .nf { fill: var(--navy); stroke: none; }
.v-ef-step h5 { font-family: var(--font-display); font-size: 13.5px; font-weight: 620; line-height: 1.3; color: var(--ink); margin: 12px 0 8px; text-wrap: balance; }
.v-ef-step ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12px; line-height: 1.38; color: var(--muted); overflow-wrap: anywhere; }
.v-ef-step li { position: relative; padding-left: 12px; }
.v-ef-step li::before { content: ""; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--navy); opacity: .55; }
.v-ef-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 2px; }
.v-ef-link span { font-size: 11px; line-height: 1.25; color: #7A5C0E; text-align: center; font-weight: 500; min-height: 2.5em; display: flex; align-items: flex-end; justify-content: center; }
.diagram .v-ef-arr { width: 56px; height: 12px; display: block; flex: none; }

/* ---------- inspect-line ---------- */
.v-il svg text { font-family: var(--font-text); }
.v-il-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.v-il-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.v-il-legend li { display: flex; align-items: center; gap: 8px; }
.v-il-legend .fov { width: 14px; height: 11px; background: rgba(209, 165, 45, .22); border: 1px solid rgba(209, 165, 45, .8); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: block; }
.v-il-legend .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--alert); display: block; margin: 0 3px; }
.v-il-count { display: flex; align-items: flex-end; gap: 18px; }
.v-il-count .sh { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; align-self: center; white-space: nowrap; line-height: 1.3; }
.v-il-count .c { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.v-il-count .c b { display: block; font-family: var(--font-display); font-weight: 650; font-size: 20px; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.v-il-count .c.ok b { color: #11694F; }
.v-il-count .c.ng b { color: #C0392F; }

/* ---------- app-screens ---------- */
.v-ap { display: flex; align-items: flex-start; font-family: var(--font-text); color: var(--text); }
.v-ap-win { flex: 1 1 auto; min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 34px 64px -40px rgba(6, 26, 56, .5), 0 14px 28px -20px rgba(6, 26, 56, .28); font-size: 12px; line-height: 1.4; }
.v-ap-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--wash); border-bottom: 1px solid var(--line); }
.v-ap-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; flex: none; }
.v-ap-bar span { margin-left: 12px; font-size: 11px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 1px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.v-ap-body { display: grid; grid-template-columns: 108px minmax(0, 1fr); }
.v-ap-side { background: var(--navy-900); color: rgba(255, 255, 255, .72); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.v-ap-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 650; font-size: 12.5px; color: #fff; padding: 2px 6px 12px; }
.v-ap-logo i { width: 16px; height: 16px; border-radius: 4px; background: #fff; position: relative; display: block; flex: none; }
.v-ap-logo i::after { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.v-ap-nav { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 11.5px; white-space: nowrap; }
.v-ap-nav i { width: 10px; height: 10px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .75; display: block; flex: none; }
.v-ap-nav.on { background: rgba(255, 255, 255, .13); color: #fff; }
.v-ap-main { background: var(--wash); padding: 12px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.v-ap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.v-ap-head b { font-family: var(--font-display); font-size: 15px; font-weight: 640; color: var(--ink); }
.v-ap-head span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.v-ap-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.v-ap-kpi { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.v-ap-kpi span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-ap-kpi b { display: block; font-family: var(--font-display); font-weight: 650; font-size: 18px; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.v-ap-kpi.warn b { color: #9A6300; }
.v-ap-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.v-ap-tbl { background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.v-ap-tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line); }
.v-ap-tr.hd { border-top: 0; background: #FAFBFC; font-size: 11px; color: var(--muted); padding: 5px 10px; }
.v-ap-tr b { display: block; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-ap-tr small { display: block; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-ap-tr > span:last-child { text-align: right; }
.v-ap-chart { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 7px; min-width: 0; }
.v-ap-ch { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--muted); line-height: 1.3; }
.v-ap-ch b { color: var(--ink); font-weight: 600; font-size: 12px; }
.v-ap-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; height: 44px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.v-ap-bars span { display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.v-ap-bars i { display: block; width: 100%; max-width: 14px; background: var(--navy); opacity: .85; border-radius: 3px 3px 0 0; }
.v-ap-bars i.today { background: var(--gold); opacity: 1; }
.v-ap-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 4px; font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.v-ap-days span:last-child { color: var(--ink); font-weight: 600; }
.v-ap-phone { flex: none; position: relative; z-index: 1; width: 176px; margin: 272px 0 0 -128px; border-radius: 28px; padding: 7px; background: #0B1424; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 36px 60px -30px rgba(6, 26, 56, .7), 0 18px 30px -18px rgba(6, 26, 56, .5); }
.v-ap-ps { border-radius: 22px; background: #F5F7FA; overflow: hidden; color: var(--ink); font-size: 12px; line-height: 1.35; }
.v-ap-st { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 9px 14px 2px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v-ap-st i { width: 46px; height: 13px; border-radius: 8px; background: #0B1424; display: block; }
.v-ap-pc { padding: 8px 10px 12px; display: grid; gap: 8px; }
.v-ap-pt { font-family: var(--font-display); font-size: 15px; font-weight: 640; display: block; line-height: 1.2; }
.v-ap-pd { display: block; font-size: 11px; color: var(--muted); margin-top: -6px; }
.v-ap-card { background: #fff; border-radius: 12px; padding: 10px; box-shadow: 0 0 0 1px rgba(16, 32, 58, .06); display: grid; gap: 4px; justify-items: start; }
.v-ap-card .lc { font-weight: 600; font-size: 12px; }
.v-ap-card .k { font-size: 11px; color: var(--muted); }
.v-ap-card .k:first-of-type { margin-top: 6px; }
.v-ap-card .tv { font-family: var(--font-display); font-size: 24px; font-weight: 650; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ink); }
.v-ap-btn { display: block; text-align: center; background: var(--navy); color: #fff; border-radius: 10px; padding: 9px 8px; font-family: var(--font-display); font-weight: 600; font-size: 12px; }

/* ---------- integration-map ---------- */
.v-im-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
.v-im-box { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--navy); border-radius: 10px; padding: 11px 12px; background: #fff; min-width: 0; }
.v-im-box svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.v-im-box b { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 620; line-height: 1.25; color: var(--ink); }
.v-im-box span { display: block; font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
.v-im-link { position: relative; height: 48px; display: flex; justify-content: center; }
.v-im-link svg { width: 12px; height: 48px; display: block; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v-im-link em { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: 11px; line-height: 1.4; white-space: nowrap; color: var(--navy); background: #fff; border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px; font-weight: 500; }
.v-im-core { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; background: var(--navy); color: #fff; border-radius: 10px; padding: 13px 16px; }
.v-im-core b { font-family: var(--font-display); font-size: 14px; font-weight: 640; }
.v-im-core .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v-im-core .chips span { font-size: 11px; line-height: 1.4; background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 2px 9px; color: rgba(255, 255, 255, .9); white-space: nowrap; }

/* ---------- roadmap ---------- */
.v-rm-top { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 500; }
.v-rm-top span:last-child { display: none; }
.v-rm-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; }
.v-rm-list::before { content: ""; position: absolute; top: 14px; left: 14px; right: calc((100% - 42px) / 4 - 14px); height: 2px; background: var(--gold); }
.v-rm-ph { position: relative; min-width: 0; }
.v-rm-node { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 650; font-size: 13px; box-shadow: 0 0 0 4px #fff; }
.v-rm-ph h5 { font-family: var(--font-display); font-size: 13.5px; font-weight: 620; line-height: 1.3; color: var(--ink); margin: 14px 0 10px; text-wrap: balance; }
.v-rm-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.v-rm-chips li { font-size: 11.5px; line-height: 1.35; color: var(--text); background: var(--wash); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }

/* ---------- hardware-stack ---------- */
.v-hw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 10px; max-width: 680px; margin: 0 auto; }
.v-hw-cell { border: 1px solid var(--line); border-radius: 10px; padding: 14px 12px 12px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; background: #fff; }
.v-hw-cell.rack { grid-row: span 2; }
.v-hw-cell svg { width: 100%; height: auto; display: block; fill: #fff; stroke: var(--navy); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.v-hw-cell.rack svg { max-height: 300px; }
.v-hw svg * { vector-effect: non-scaling-stroke; }
.v-hw svg path { fill: none; }
.v-hw svg .g { stroke: var(--gold); }
.v-hw svg .gf { fill: var(--gold); stroke: var(--gold); }
.v-hw svg .nf { fill: var(--navy); stroke: none; }
.v-hw-cap b { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 620; color: var(--ink); line-height: 1.25; }
.v-hw-cap span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }

/* ---------- timeline-exp ---------- */
.v-tl-band { display: grid; grid-template-columns: minmax(0, 3.36fr) minmax(0, 1.4fr); margin-bottom: 12px; }
.v-tl-band span { grid-column: 1; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-bottom: 6px; border-bottom: 1px solid var(--line-2); position: relative; margin-right: 14px; }
.v-tl-band span::before, .v-tl-band span::after { content: ""; position: absolute; bottom: -1px; width: 1px; height: 7px; background: var(--line-2); }
.v-tl-band span::before { left: 0; }
.v-tl-band span::after { right: 0; }
.v-tl-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); column-gap: 14px; }
.v-tl-col { min-width: 0; }
.v-tl-yr { font-family: var(--font-display); font-weight: 650; font-size: 20px; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.v-tl-axis { position: relative; height: 14px; margin: 8px 0 12px; }
.v-tl-axis::before { content: ""; position: absolute; left: 0; right: -14px; top: 6px; height: 2px; background: var(--navy); opacity: .9; }
.v-tl-col:last-child .v-tl-axis::before { right: 0; }
.v-tl-axis i { position: absolute; left: 0; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid var(--navy); box-sizing: border-box; }
.v-tl-found { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.35; color: var(--ink); background: #FBF6E6; border: 1px solid rgba(209, 165, 45, .6); border-radius: 8px; padding: 7px 9px; margin-bottom: 12px; }
.v-tl-found i { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; margin-top: 5px; display: block; }
.v-tl-found b { display: block; font-family: var(--font-display); font-weight: 620; font-size: 12px; color: #6E520B; }
.v-tl-it { padding: 0 0 12px; }
.v-tl-it + .v-tl-it { border-top: 1px solid var(--line); padding-top: 10px; }
.v-tl-it .cl { display: block; font-size: 11px; line-height: 1.35; color: var(--muted); font-weight: 500; margin-bottom: 3px; }
.v-tl-it b { display: block; font-weight: 600; font-size: 12.5px; line-height: 1.35; color: var(--ink); margin-bottom: 6px; }

/* ---------- wide section layouts (container queries; used when a visual spans a full-width section) ---------- */
.v-atm, .v-il { container-type: inline-size; }
@container (min-width: 860px) {
  .v-atm-body { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); align-items: stretch; }
  .v-atm-body .ui-feed { border-top: 0; border-left: 1px solid var(--u-line); padding-top: 10px; }
  .v-atm-body .ui-feed .m { white-space: normal; }
  .v-atm-body .ui-feed li { align-items: start; }
  .v-il-in { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 32px; align-items: center; }
  .v-il-in > svg { max-width: 700px; justify-self: center; }
  .v-il-foot { flex-direction: column; align-items: flex-start; gap: 22px; margin: 0; padding: 4px 0 4px 28px; border-top: 0; border-left: 1px solid var(--line); }
  .v-il-count { flex-wrap: wrap; gap: 12px 22px; }
  .v-il-count .sh { flex-basis: 100%; }
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .ui-metrics.v-m3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-metrics.v-m3 > :last-child { grid-column: 1 / -1; }
  .v-wrapm .ui-feed .m { white-space: normal; }
  .v-wrapm .ui-feed li { align-items: start; }
  .diagram .lbl-sm { display: none; }

  .v-qc-ax, .v-qc-plot { height: 112px; }
  .v-qc-g .b { width: 34%; }
  .v-atm-tiles { grid-template-columns: 1fr; }

  .v-cs-badge { display: none; }
  .v-cs-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; list-style: none; margin: 0; padding: 6px 14px 10px; }
  .v-cs-zones li { background: var(--u-panel); border: 1px solid var(--u-line); border-radius: 6px; padding: 6px 8px; font-size: 11px; color: var(--u-dim); line-height: 1.3; }
  .v-cs-zones li.hl { border-color: rgba(209, 165, 45, .7); }
  .v-cs-zones .z { display: block; color: var(--u-text); font-size: 11.5px; }
  .v-cs-zones b { font-family: var(--font-display); font-weight: 620; font-size: 15px; color: #fff; margin-right: 4px; }
  .v-cs-zones li.hl b { color: var(--gold-soft); }
  .v-cs-legend .lab { flex-basis: 100%; }

  .v-ck-body { grid-template-columns: 1fr; }
  .v-ck-lanes { gap: 4px; }
  .v-ck-lane { padding: 7px 2px 8px; }
  .v-ck-h .n { font-size: 11px; }
  .v-ck-hours .v-hours-bars { height: 64px; }

  .v-ch-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px; gap: 8px; }
  .v-ch-loc { flex-wrap: wrap; gap: 2px 10px; }

  .v-da-steps { gap: 4px; padding: 12px 8px; }
  .v-da-steps li { font-size: 11px; }
  .v-da-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px; gap: 8px; padding: 7px 10px; }
  .v-da-out { grid-template-columns: 1fr; }
  .v-da-draft { grid-template-columns: auto minmax(0, 1fr); }
  .v-da-draft .tag { grid-column: 2; justify-self: start; }

  .v-ef-grid { grid-template-columns: 1fr; }
  .v-ef-link { padding: 4px 0; gap: 2px; }
  .diagram .v-ef-arr { transform: rotate(90deg); width: 30px; height: 12px; margin: 9px 0; }
  .v-ef-step { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
  .v-ef-step .v-ef-ic { grid-row: span 2; }
  .v-ef-link span { min-height: 0; }
  .v-ef-step h5 { margin-top: 0; }

  .v-il-count { gap: 14px; flex-wrap: wrap; }
  .v-il-count .sh { flex-basis: 100%; }

  .v-ap-body { grid-template-columns: 40px minmax(0, 1fr); }
  .v-ap-side { padding: 10px 6px; }
  .v-ap-logo { padding: 2px 4px 10px; }
  .v-ap-logo span, .v-ap-nav span { display: none; }
  .v-ap-nav { justify-content: center; padding: 7px 4px; }
  .v-ap-main { padding: 10px; gap: 8px; }
  .v-ap-head span { display: none; }
  .v-ap-kpi { padding: 7px 8px; }
  .v-ap-kpi b { font-size: 15px; }
  .v-ap-split { grid-template-columns: 1fr; }
  .v-ap-chart { width: 56%; }
  .v-ap-tr:nth-child(5) { display: none; }
  .v-ap-phone { width: 132px; margin: 318px 0 0 -110px; border-radius: 22px; padding: 5px; }
  .v-ap-ps { border-radius: 18px; }
  .v-ap-st { padding: 7px 12px 2px; }
  .v-ap-st i { width: 34px; height: 11px; }
  .v-ap-kpi span { white-space: normal; line-height: 1.25; }
  .v-ap-pc { padding: 6px 8px 10px; gap: 6px; }
  .v-ap-card { padding: 8px; }
  .v-ap-card .tv { font-size: 19px; }

  .v-im-grid { column-gap: 8px; }
  .v-im-box { flex-direction: column; gap: 6px; padding: 9px 9px; }
  .v-im-box span { display: none; }
  .v-im-box b { font-size: 12px; }
  .v-im-core { padding: 11px 12px; }
  .v-im-core b { font-size: 13px; }

  .v-rm-top span:last-child { display: inline; }
  .v-rm-list { grid-template-columns: 1fr; gap: 18px; }
  .v-rm-list::before { top: 14px; bottom: 14px; left: 13px; right: auto; width: 2px; height: auto; }
  .v-rm-ph { padding-left: 44px; }
  .v-rm-node { position: absolute; left: 0; top: 0; }
  .v-rm-ph h5 { margin: 4px 0 8px; }
  .v-rm-chips { flex-direction: row; flex-wrap: wrap; }

  .v-hw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v-hw-cell { padding: 12px 10px 10px; }

  .v-tl-band { display: block; margin-bottom: 14px; }
  .v-tl-band span { display: block; margin-right: 0; }
  .v-tl-cols { grid-template-columns: 1fr; row-gap: 4px; }
  .v-tl-col { position: relative; padding-left: 24px; padding-bottom: 6px; }
  .v-tl-col::before { content: ""; position: absolute; left: 5px; top: 10px; bottom: -14px; width: 2px; background: var(--navy); opacity: .9; }
  .v-tl-col:last-child::before { display: none; }
  .v-tl-axis { position: absolute; left: 0; top: 4px; height: 12px; width: 12px; margin: 0; }
  .v-tl-axis i { top: 0; }
  .v-tl-axis::before { display: none; }
  .v-tl-yr { font-size: 18px; margin-bottom: 8px; }
}