:root{
      --border:#e5e7eb; --head:#f8fafc; --zebra:#fcfcfd; --text:#0f172a;
      --ok-bg:#e8f6ee; --ok-fg:#0f6a44;
      --no-bg:#fdecec; --no-fg:#b42318;
    }
    *{box-sizing:border-box}
    .cont{    background : white;
    padding : 25px;
    margin: 20px;
    border-radius: 8px;}
    h1{margin:0 0 8px; font-size:18px}
    .controls{display:flex; gap:8px; align-items:center; margin:8px 0 12px}
    button{padding:8px 12px; border:1px solid var(--border); background:#fff; cursor:pointer; border-radius:6px}
    #status{font-size:12px; color:#64748b}
    .legend{display:flex; gap:8px; align-items:center; font-size:12px; margin:6px 0 12px}
    .chip{display:inline-flex; gap:6px; align-items:center; border:1px solid var(--border); border-radius:999px; padding:4px 8px; background:#fff}
    .chip .box{display:inline-block; width:10px; height:10px; border-radius:2px}
    .chip.ok .box{background:var(--ok-bg); border:1px solid #b7e2cd}
    .chip.no .box{background:var(--no-bg); border:1px solid #f3b8b6}
    .wrap{overflow-x:auto; border:1px solid var(--border); border-radius:8px}
    table{border-collapse:collapse; width:100%; min-width:640px}
    th,td{border-bottom:1px solid var(--border); padding:8px 10px; text-align:center}
    thead th{position:sticky; top:0; background:var(--head); z-index:1}
    tbody tr:nth-child(even){background:var(--zebra)}
    tbody td:first-child, thead th:first-child{text-align:left; position:sticky; left:0; background:#fff; z-index:2}
    td.ok{background:var(--ok-bg); color:var(--ok-fg); font-weight:600}
    td.no{background:var(--no-bg); color:var(--no-fg); font-weight:600}