/* ================= GuardDetector demo ================= */
:root{
  --c-work:var(--series-2); --c-pass:var(--series-1); --c-crowd:var(--series-4); --c-ppe:var(--status-critical);
  --c-work-soft:var(--series-2-soft); --c-pass-soft:var(--series-1-soft); --c-crowd-soft:var(--series-4-soft); --c-ppe-soft:rgba(224,87,76,.16);
}
.stage{padding-bottom:10px}
.grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:14px;margin-bottom:14px}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.chart{width:100%}
.chart--timeline{height:230px}

/* camera */
.cam{position:relative;border-radius:8px;overflow:hidden;background:#0b0d10;aspect-ratio:16/9}
.cam__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .15s linear}
.cam__img.is-on{opacity:1}
.cam__stamp{position:absolute;left:8px;bottom:8px;background:rgba(8,10,13,.78);border:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:11.5px;padding:3px 8px;border-radius:5px;color:#dfe6ef}
.cam__toks{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:70%}
.tok{font-family:var(--mono);font-size:12px;font-weight:600;padding:4px 9px;border-radius:6px;color:#fff;background:rgba(8,10,13,.78);
  border:1px solid rgba(255,255,255,.14);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tok__sw{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.tok--o{color:#c7cdd3}
.tok--b .tok__sw{box-shadow:0 0 0 2px #fff}
.cls-people_work{--c:var(--c-work);--cs:var(--c-work-soft)}
.cls-people_pass{--c:var(--c-pass);--cs:var(--c-pass-soft)}
.cls-crowd{--c:var(--c-crowd);--cs:var(--c-crowd-soft)}
.cls-PPE_violation{--c:var(--c-ppe);--cs:var(--c-ppe-soft)}
.cls-machinery_trouble{--c:var(--ink-2);--cs:var(--surface-2)}
.tok .tok__sw,.swatch.cls-people_work,.swatch.cls-people_pass,.swatch.cls-crowd,.swatch.cls-PPE_violation{background:var(--c)}

/* sliding window strip */
.win{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wcell{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:86px}
.wcell.is-cur{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wcell__t{font-family:var(--mono);font-size:11px;color:var(--ink-3);display:flex;justify-content:space-between;gap:6px}
.wcell__t i{font-style:normal;color:var(--accent-ink)}
.wcell__toks{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.wtok{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.wtok .tok__sw{background:var(--c)}
.wtok--o{color:var(--ink-3)}
.wcell__dup{font-size:10.5px;color:var(--warn);margin-top:4px}

/* event cards */
.ecards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ecard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;position:relative;overflow:hidden}
.ecard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.ecard.is-b{background:linear-gradient(180deg,var(--cs),transparent)}
.ecard.is-i{background:linear-gradient(180deg,color-mix(in srgb,var(--cs) 60%,transparent),transparent)}
.ecard__k{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:6px;white-space:nowrap}
.ecard__ru{font-size:11px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ecard__state{font-size:26px;font-weight:800;line-height:1.1;margin-top:4px;color:var(--ink)}
.ecard__state small{font-size:12px;font-weight:600;color:var(--ink-3);margin-left:6px}
.ecard__n{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.ecard__n b{color:var(--ink);font-weight:700}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:6px}
.stat{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:6px}
.stat__k{font-size:11.5px;color:var(--ink-3)}
.stat__v{font-size:20px;font-weight:800}

/* token tape */
.panel--tape{margin-bottom:14px}
.tape{display:grid;grid-template-columns:110px 1fr;gap:4px 10px;align-items:center}
.tape__k{font-family:var(--mono);font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tape__row{display:grid;grid-template-columns:repeat(48,1fr);gap:2px;height:16px}
.tape__c{background:var(--surface-2);border-radius:2px;min-width:0}
.tape__c.is-i{background:var(--c);opacity:.5}
.tape__c.is-b{background:var(--c);opacity:1;box-shadow:inset 2px 0 0 var(--surface)}
.tape__c.is-cur{outline:2px solid var(--accent);outline-offset:-1px}
.mk{width:10px;height:10px;border-radius:50%;background:var(--ink-2);display:inline-block}
.mk--i{width:6px;height:6px;opacity:.55}
.tbl{margin-top:8px;font-size:12px;color:var(--ink-3)}
.tbl summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.tbl table{width:100%;border-collapse:collapse;margin-top:8px;font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:11.5px}
.tbl th,.tbl td{text-align:right;padding:3px 6px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.tbl th{color:var(--ink-3);font-weight:500;font-family:var(--display)}
.tbl th:first-child,.tbl td:first-child,.tbl th:nth-child(2),.tbl td:nth-child(2){text-align:left}
.tbl .tbl__scroll{max-height:280px;overflow:auto}

/* method */
.method__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:start}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:12px;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.steps b{color:var(--ink)}
.method__fig{margin:0}
.method__fig img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.method__fig figcaption{margin-top:8px;font-size:12px;color:var(--ink-3);line-height:1.5}
.results{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px;margin-top:22px}
.rtable{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
.rtable th,.rtable td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.rtable th{font-family:var(--display);font-weight:600;color:var(--ink-3);font-size:11.5px}
.rtable th:first-child,.rtable td:first-child{text-align:left}
.rtable__sum td{font-weight:600;background:var(--surface-2)}
.vocab{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.vocab__row{display:grid;grid-template-columns:130px 1fr;gap:10px;font-size:13.5px;color:var(--ink-2);align-items:baseline}
.vocab__k{font-weight:600;color:var(--ink)}

@media (max-width:1180px){.grid{grid-template-columns:1fr}.method__grid{grid-template-columns:1fr}.results{grid-template-columns:1fr}}
@media (max-width:760px){
  .win{grid-template-columns:1fr 1fr}
  .ecards{grid-template-columns:1fr 1fr}
  .tape{grid-template-columns:80px 1fr}
  .tape__row{grid-template-columns:repeat(24,1fr)}
  .chart--timeline{height:200px}
  .cam__toks{max-width:60%}
}
@media (max-width:430px){.ecards{grid-template-columns:1fr}.vocab__row{grid-template-columns:1fr}}