html, body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#ffffff; color:#111; }
    #app { min-height:100vh; display:flex; flex-direction:column; }
    header { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.6rem .8rem; background:#f5f5f7; border-bottom:1px solid #ddd; }
    header h1 { font-size:1rem; margin:0 .6rem 0 0; white-space:nowrap; }
    .btn { border:1px solid #ccc; background:#f0f0f2; color:#111; padding:.35rem .6rem; border-radius:.5rem; cursor:pointer; font-size:.85rem; text-decoration:none; }
    .btn.ghost { background:transparent; border:1px solid #ccc; }
    .spacer { flex:1; }
    #count { opacity:.75; font-size:.85rem; }
    #date-select { border:1px solid #ccc; background:#f0f0f2; color:#111; padding:.35rem .6rem; border-radius:.5rem; font-size:.85rem; }
    main { flex:1; padding:.5rem .8rem 2rem; }
    table { width:100%; border-collapse:collapse; font-size:.9rem; }
    th { text-align:left; padding:.5rem .6rem; border-bottom:2px solid #ccc; color:#888; font-weight:600; position:sticky; top:0; background:#ffffff; cursor:pointer; user-select:none; }
    th:hover { color:#111; }
    th .arrow { font-size:.7rem; margin-left:.3rem; }
    td { padding:.45rem .6rem; border-bottom:1px solid #eee; }
    tr:hover td { background:#f0f4ff; }
    .name-cell { font-weight:500; }
    .ok { color:#16a34a; }
    .fail { color:#dc2626; }
    .na { color:#888; }
    .name-green { color:#16a34a; }
    .name-red { color:#dc2626; }
    .name-orange { color:#d97706; }
    .summary { margin:.6rem 0; font-size:.85rem; color:#888; }
    .filter-label { display:flex; align-items:center; gap:.3rem; cursor:pointer; font-size:.85rem; }
    .loading { text-align:center; padding:3rem; color:#888; }