/* Extracted from templates/partials/_hero_anim.html (m6 — CSP `style-src-elem` cannot
   drop 'unsafe-inline' while a page carries a <style> block). */
  /* ── Wrapper ───────────────────────────────────────────────── */
  .slot-anim{position:relative;background:transparent;overflow:hidden;
    display:block;width:100%;aspect-ratio:753/510;border-radius:14px;
    box-shadow:0 30px 60px -20px rgba(15,35,48,0.18),
               0 12px 24px -12px rgba(15,35,48,0.10);}
  .br{position:absolute;inset:0;background:#F4F7FA;border-radius:14px;overflow:hidden;
    font-family:'Inter','Plus Jakarta Sans',system-ui,sans-serif;color:#0F2330;}

  /* ── Browser chrome ────────────────────────────────────────── */
  .br-chrome{position:absolute;top:0;left:0;right:0;height:68px;z-index:10;
    background:linear-gradient(180deg,#E9EEF3 0%,#DDE5EC 100%);
    border-bottom:1px solid #C5D1DA;}
  .br-tabs{display:flex;align-items:flex-end;height:32px;padding:6px 12px 0 12px;gap:6px}
  .br-dots{display:flex;gap:6px;margin-right:14px;align-self:center;padding-bottom:6px}
  .br-dots i{width:11px;height:11px;border-radius:50%;display:inline-block}
  .br-dots i:nth-child(1){background:#FF5F57}
  .br-dots i:nth-child(2){background:#FEBC2E}
  .br-dots i:nth-child(3){background:#28C840}
  .br-tab{position:relative;height:26px;line-height:26px;padding:0 14px 0 10px;
    background:#F4F7FA;border:1px solid #C5D1DA;border-bottom:none;
    border-radius:8px 8px 0 0;font-size:11px;font-weight:600;color:#0F2330;
    display:flex;align-items:center;gap:6px;max-width:240px}
  .br-tab svg{width:11px;height:11px;flex-shrink:0}
  .br-tab .x{margin-left:8px;color:#546174;font-weight:400;font-size:13px;line-height:1}
  .br-tab.alt{background:#DDE5EC;color:#546174;font-weight:500}
  .br-url{display:flex;align-items:center;height:36px;padding:6px 12px;gap:8px}
  .br-nav{display:flex;gap:4px;color:#546174}
  .br-nav button{width:22px;height:22px;border:none;background:transparent;color:#546174;
    display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:4px}
  .br-nav button:disabled{opacity:.4}
  .br-bar{flex:1;height:26px;background:#fff;border:1px solid #C5D1DA;border-radius:14px;
    display:flex;align-items:center;padding:0 12px;gap:8px;
    font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:#3F5868}
  .br-bar .lock{color:#0E7490;display:inline-flex;align-items:center}
  .br-bar .host{color:#0F2330;font-weight:600}
  .br-bar .path{color:#3F5868;position:relative;display:inline-block;min-width:90px;height:1em;line-height:1}
  .br-bar .path span{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;line-height:1;animation:urlSwap 12s infinite}
  .br-bar .path span:nth-child(1){animation-delay:0s}
  .br-bar .path span:nth-child(2){animation-delay:3s}
  .br-bar .path span:nth-child(3){animation-delay:6s}
  .br-bar .path span:nth-child(4){animation-delay:9s}
  @keyframes urlSwap{
    0%{opacity:0} 2%{opacity:1} 23%{opacity:1} 25%{opacity:0} 100%{opacity:0}
  }
  .br-bar .live{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:0.08em;
    color:#047857;background:#D6F3E5;padding:2px 7px;border-radius:999px;
    display:inline-flex;align-items:center;gap:5px}
  .br-bar .live i{width:5px;height:5px;border-radius:50%;background:#059669;
    animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

  /* ── Stage where scenes cross-fade ─────────────────────────── */
  .br-stage{position:absolute;top:68px;left:0;right:0;bottom:0;
    background:linear-gradient(180deg,#FAFCFE 0%,#F1F7FA 100%);overflow:hidden}
  .br-stage::before{content:"";position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(14,116,144,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(14,116,144,0.05) 1px, transparent 1px);
    background-size:28px 28px;
    mask-image:radial-gradient(ellipse at center,#000 30%,transparent 85%);
    pointer-events:none}

  .scene{position:absolute;inset:0;padding:20px 28px;opacity:0;
    animation:sceneCycle 12s infinite cubic-bezier(.4,0,.2,1)}
  .scene-1{animation-delay:0s}
  .scene-2{animation-delay:3s}
  .scene-3{animation-delay:6s}
  .scene-4{animation-delay:9s}
  @keyframes sceneCycle{
    0%{opacity:0;transform:translateY(8px)}
    2%{opacity:1;transform:translateY(0)}
    23%{opacity:1;transform:translateY(0)}
    25%{opacity:0;transform:translateY(-4px)}
    100%{opacity:0;transform:translateY(-4px)}
  }

  /* shared page header */
  .ph{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
  .ph .ph-h1{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:800;
    letter-spacing:-0.01em;color:#0F2330;margin:0;line-height:1}
  .ph .sub{font-size:11px;color:#546174;margin-top:5px;line-height:1.3}
  .ph .crumb{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;
    font-weight:700;color:#0E7490;letter-spacing:0.08em;text-transform:uppercase}
  .ph .pillbar{display:flex;gap:5px;font-size:10px}
  .ph .pillbar span{padding:3px 9px;border-radius:999px;background:#fff;
    border:1px solid #D2DEE5;color:#3F5868;font-weight:600}
  .ph .pillbar span.on{background:#ECFEFF;border-color:#0E7490;color:#0E7490}

  /* ── Scene 1: Dashboard — KPI cards + agent row ───────────── */
  .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
  .kpi .card{background:#fff;border:1px solid #D2DEE5;border-radius:10px;padding:11px 13px;
    position:relative;overflow:hidden}
  .kpi .card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--c,#0E7490)}
  .kpi .card.c1{--c:#0E7490}
  .kpi .card.c2{--c:#059669}
  .kpi .card.c3{--c:#D97706}
  .kpi .card.c4{--c:#7C3AED}
  .kpi .lbl{font-size:9px;color:#546174;letter-spacing:0.07em;text-transform:uppercase;
    font-weight:700;font-family:'JetBrains Mono',ui-monospace,monospace}
  .kpi .val{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:22px;
    color:#0F2330;line-height:1.1;margin-top:4px}
  .kpi .delta{font-size:10px;color:#047857;font-weight:700;margin-top:2px}
  .kpi .delta.neg{color:#B45309}

  .agentrow{background:#fff;border:1px solid #D2DEE5;border-radius:10px;padding:12px 14px}
  .agentrow .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .agentrow .top .mock-h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:12px;font-weight:700;
    color:#0F2330;margin:0}
  .agentrow .top .tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;
    color:#047857;background:#D6F3E5;padding:2px 8px;border-radius:999px;font-weight:700;
    display:inline-flex;align-items:center;gap:5px}
  .agentrow .top .tag i{width:5px;height:5px;border-radius:50%;background:#059669;
    animation:pulse 1.6s ease-in-out infinite}
  .agentrow .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
  .agentrow .a{background:#FAFCFE;border:1px solid #E4EEF3;border-radius:8px;padding:7px 9px;
    border-left:3px solid var(--c,#0E7490)}
  .agentrow .a.a1{--c:#0E7490}
  .agentrow .a.a2{--c:#7C3AED}
  .agentrow .a.a3{--c:#6D28D9}
  .agentrow .a.a4{--c:#059669}
  .agentrow .a.a5{--c:#D97706}
  .agentrow .a .nm{font-size:10px;font-weight:700;color:#0F2330;line-height:1.2}
  .agentrow .a .st{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8px;
    color:#546174;margin-top:3px;display:flex;align-items:center;gap:4px}
  .agentrow .a .st i{width:4px;height:4px;border-radius:50%;background:#6F8593}
  .agentrow .a .st.run i{background:#D97706;animation:pulse 1.2s ease-in-out infinite}
  .agentrow .a .st.run{color:#B45309}
  .agentrow .a .st.done i{background:#059669}
  .agentrow .a .st.done{color:#047857}

  /* ── Scene 2: Jobs queue — table with rows ─────────────────── */
  .tbl{background:#fff;border:1px solid #D2DEE5;border-radius:10px;overflow:hidden;
    font-size:11px}
  .tbl .row{display:grid;grid-template-columns:90px 90px 1fr 84px 92px;gap:0;
    padding:9px 14px;border-bottom:1px solid #EAF0F4;align-items:center}
  .tbl .row.head{background:#F1F7FA;font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:9px;color:#546174;letter-spacing:0.06em;text-transform:uppercase;font-weight:700;
    padding:7px 14px}
  .tbl .row:last-child{border-bottom:none}
  .tbl .id{font-family:'JetBrains Mono',ui-monospace,monospace;color:#0F2330;font-weight:600;font-size:10px}
  .tbl .stage{color:#3F5868;font-size:10px}
  .tbl .pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:9px;
    font-weight:700;letter-spacing:0.04em;text-transform:uppercase;
    font-family:'JetBrains Mono',ui-monospace,monospace}
  .tbl .pill.run{background:#FEF3C7;color:#B45309}
  .tbl .pill.run::before{content:"●";margin-right:4px;animation:pulse 1.2s ease-in-out infinite}
  .tbl .pill.done{background:#D6F3E5;color:#047857}
  .tbl .pill.queue{background:#E0F2FE;color:#0369A1}
  .tbl .prog{display:flex;align-items:center;gap:8px}
  .tbl .prog .b{flex:1;height:5px;background:#E4EEF3;border-radius:3px;overflow:hidden}
  .tbl .prog .b > i{display:block;height:100%;background:linear-gradient(90deg,#0E7490,#06B6D4)}
  .tbl .prog .pct{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;color:#3F5868;
    width:30px;text-align:right;font-weight:600}

  /* ── Scene 3: Inbox — severity items ───────────────────────── */
  .inbox{background:#fff;border:1px solid #D2DEE5;border-radius:10px;overflow:hidden}
  .inbox .it{display:grid;grid-template-columns:24px 1fr auto;gap:12px;padding:11px 14px;
    border-bottom:1px solid #EAF0F4;align-items:flex-start}
  .inbox .it:last-child{border-bottom:none}
  .inbox .ic{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;
    justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;margin-top:1px}
  .inbox .ic.warn{background:#FEF3C7;color:#B45309}
  .inbox .ic.err{background:#FEE2E2;color:#DC2626}
  .inbox .ic.info{background:#E0F2FE;color:#0369A1}
  .inbox .ic.ok{background:#D6F3E5;color:#047857}
  .inbox .tt{font-size:11px;font-weight:600;color:#0F2330;line-height:1.3}
  .inbox .dt{font-size:10px;color:#546174;margin-top:2px;line-height:1.35}
  .inbox .ts{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;color:#546174;
    white-space:nowrap}

  /* ── Scene 4: Audit log — hash-chained table ───────────────── */
  .audit{background:#fff;border:1px solid #D2DEE5;border-radius:10px;overflow:hidden}
  .audit .row{display:grid;grid-template-columns:84px 1fr 110px 76px;gap:10px;
    padding:9px 14px;border-bottom:1px solid #EAF0F4;align-items:center;font-size:10px}
  .audit .row.head{background:#F1F7FA;font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:9px;color:#546174;letter-spacing:0.06em;text-transform:uppercase;font-weight:700;
    padding:7px 14px}
  .audit .row:last-child{border-bottom:none}
  .audit .when{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;color:#3F5868}
  .audit .who{font-size:10px;color:#0F2330;font-weight:600;display:flex;align-items:center;gap:6px}
  .audit .who::before{content:"";width:18px;height:18px;border-radius:50%;
    background:linear-gradient(135deg,#0E7490,#06B6D4);flex-shrink:0}
  .audit .act{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;
    color:#7C3AED;font-weight:700;text-transform:uppercase;letter-spacing:0.04em}
  .audit .hash{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9px;color:#546174;
    background:#F1F7FA;padding:2px 7px;border-radius:5px;border:1px solid #E4EEF3;
    text-align:center}
  .audit .chain{padding:10px 14px;background:#FAFCFE;border-top:1px solid #EAF0F4;
    display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:9px;color:#3F5868}
  .audit .chain .ok{color:#047857;font-weight:700;display:inline-flex;align-items:center;gap:5px}
  .audit .chain .ok::before{content:"✓";font-size:11px}

  /* ── Mobile: keep cycling, hide chrome niceties ────────────── */
  @media (max-width:640px){
    .slot-anim{aspect-ratio:4/3}
    .br-tabs{display:none}
    .br-chrome{height:34px}
    .br-stage{top:34px}
    .br-url{height:34px;padding:4px 8px}
    .br-bar{font-size:10px;height:24px}
    .br-bar .live{display:none}
    .scene{padding:12px 14px}
    .ph .ph-h1{font-size:14px}
    .ph .pillbar{display:none}
    .kpi{grid-template-columns:repeat(2,1fr);gap:6px}
    .kpi .val{font-size:16px}
    .agentrow .grid{grid-template-columns:repeat(3,1fr)}
    .agentrow .a:nth-child(n+4){display:none}
    .tbl .row{grid-template-columns:60px 1fr 70px;gap:8px;padding:7px 10px}
    .tbl .row > :nth-child(2),
    .tbl .row > :nth-child(5){display:none}
    .audit .row{grid-template-columns:1fr 88px;padding:7px 10px}
    .audit .row > :nth-child(1),
    .audit .row > :nth-child(4){display:none}
  }

  @media (prefers-reduced-motion: reduce){
    .scene{animation:none;opacity:0}
    .scene-1{opacity:1}
    .br-bar .path span{animation:none;opacity:0}
    .br-bar .path span:nth-child(1){opacity:1}
    .br-bar .live i,.agentrow .top .tag i,.agentrow .a .st.run i,.tbl .pill.run::before{animation:none}
  }