/* Entirely scoped below the accepted main. No approved component overrides. */
#analytics { padding:128px 0 64px; color:var(--ink); background:var(--canvas); }
#analytics .an-heading-row { display:grid; grid-template-columns:minmax(0,1fr) 344px; gap:56px; align-items:end; margin-bottom:32px; }
#analytics .an-label { font-size:11px; line-height:1.4; letter-spacing:.06em; margin-bottom:24px; }
#analytics h2 { font-size:52px; line-height:1.04; letter-spacing:-1.6px; font-weight:400; }
#analytics .an-support { font-size:18px; line-height:1.5; color:var(--muted); }
#analytics .an-product { border:1px solid var(--hairline); border-radius:12px; overflow:hidden; background:var(--paper); }
#analytics .an-product:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#analytics .an-product-top { height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:12px; }
#analytics .an-product-top span:last-child { color:var(--muted); }
#analytics .an-camera { height:552px; position:relative; overflow:hidden; background:var(--product-dark); }
#analytics .an-camera>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 280ms ease-out; }
#analytics .an-frame-event { opacity:0; }
#analytics[data-state=event] .an-frame-rule,#analytics[data-state=record] .an-frame-rule { opacity:0; }
#analytics[data-state=event] .an-frame-event,#analytics[data-state=record] .an-frame-event { opacity:1; }
#analytics .an-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* Native event fragment: frontend app.css / spektr-ui.css light tokens.
   Scenario greens/oranges are rendered by the canvas using source semantics. */
#analytics .an-event-card { position:absolute; right:24px; top:96px; width:320px; padding:20px; border:1px solid rgba(16,20,30,.12); border-radius:16px; background:#F2F5FA; color:#171B24; font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
#analytics .an-event-head { display:flex; align-items:center; gap:16px; }
#analytics .an-event-head img { width:96px; height:72px; object-fit:cover; border-radius:8px; }
#analytics .an-event-head b { font-weight:700; }
#analytics .an-event-time { display:block; margin-top:6px; font:15px/1.5 ui-monospace,"SF Mono",Menlo,monospace; color:rgba(23,27,36,.42); }
#analytics .an-event-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
#analytics .an-chip { display:inline-flex; gap:6px; align-items:center; border-radius:999px; padding:4px 10px; font:700 11px/1.5 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.06em; text-transform:uppercase; }
#analytics .an-chip:before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
#analytics .an-chip-intrusion { color:#B77400; background:color-mix(in srgb,#B77400 16%,transparent); }
#analytics .an-chip-person { color:#3E63D8; background:color-mix(in srgb,#3E63D8 14%,transparent); }
#analytics .an-event-description { font-size:12.5px; color:rgba(23,27,36,.64); margin-top:12px; }
#analytics .an-open-record { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:40px; margin-top:20px; padding:0 12px; border-radius:999px; border:1px solid rgba(16,20,30,.12); color:#171B24; background:#DCE2EC; font-size:14px; font-weight:600; }
#analytics .an-open-record:hover { border-color:rgba(16,20,30,.20); }

#analytics .an-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#analytics .an-step { display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; padding:20px 24px 16px 0; border-top:2px solid var(--hairline); background:none; text-align:left; color:var(--muted); }
#analytics .an-step+.an-step { padding-left:24px; }
#analytics .an-step[aria-selected=true] { border-top-color:var(--accent); color:var(--ink); }
#analytics .an-step-number { font-size:11px; line-height:27px; font-variant-numeric:tabular-nums; }
#analytics .an-step[aria-selected=true] .an-step-number { color:var(--accent); }
#analytics .an-step-title { display:block; font-size:18px; line-height:1.5; }
#analytics .an-step-copy { display:block; font-size:15px; line-height:1.5; margin-top:8px; color:var(--muted); }
#analytics .an-step:hover .an-step-title { color:var(--accent); }
#analytics .an-fixture-note { font-size:11px; line-height:1.5; color:var(--muted); margin-top:16px; }
#analytics .an-media-message { position:absolute; left:24px; bottom:24px; padding:16px; border:1px solid var(--hairline); border-radius:6px; background:var(--paper); color:var(--ink); font-size:14px; }
#analytics .an-media-retry { color:var(--accent); background:none; padding:8px 0 0; }

#analytics-dialog { padding:0; width:calc(100vw - 64px); max-width:1280px; height:calc(100vh - 64px); border:1px solid var(--construction); border-radius:12px; background:var(--paper); color:var(--ink); overflow:hidden; }
#analytics-dialog::backdrop { background:rgb(17 19 24 / 65%); }
#analytics-dialog .an-dialog-top { height:56px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hairline); font-size:14px; }
#analytics-dialog .an-close-dialog { display:flex; gap:16px; align-items:center; background:none; padding:8px; font-size:13px; }
#analytics-dialog .an-close-dialog span { font-size:24px; }
#analytics-dialog .an-dialog-body { height:calc(100% - 56px); position:relative; }
#analytics-native { width:100%; height:100%; border:0; display:block; visibility:hidden; }
#analytics-dialog[data-status=ready] #analytics-native { visibility:visible; }
#analytics-dialog .an-dialog-message { position:absolute; inset:0; display:flex; flex-direction:column; gap:16px; align-items:center; justify-content:center; background:var(--paper); }
#analytics-dialog .an-dialog-message[hidden] { display:none; }
#analytics-dialog .an-dialog-retry { background:var(--primary-cta); color:var(--paper); padding:12px 20px; border-radius:6px; }
@media (min-width:1200px) and (max-width:1350px) {
  #analytics .an-heading-row { grid-template-columns:minmax(0,1fr) 330px; gap:40px; }
  #analytics h2 { font-size:48px; }
}
@media (prefers-reduced-motion:reduce) {
  #analytics .an-camera>img { transition:none; }
}