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; }
    .filter-label { display:flex; align-items:center; gap:.3rem; cursor:pointer; font-size:.85rem; }
    #date-select { border:1px solid #ccc; background:#f0f0f2; color:#111; padding:.35rem .6rem; border-radius:.5rem; font-size:.85rem; }
    .search-box { border:1px solid #ccc; background:#f0f0f2; color:#111; padding:.35rem .6rem; border-radius:.5rem; font-size:.85rem; width:180px; }
    main { flex:1; padding:.5rem .8rem 2rem; }
    .summary { margin:.6rem 0; font-size:.85rem; color:#888; }
    table { width:100%; border-collapse:collapse; font-size:.85rem; }
    th { text-align:left; padding:.5rem .5rem; border-bottom:2px solid #ccc; color:#888; font-weight:600; position:sticky; top:0; background:#ffffff; cursor:pointer; user-select:none; white-space:nowrap; }
    th:hover { color:#111; }
    th .arrow { font-size:.7rem; margin-left:.2rem; }
    td { padding:.4rem .5rem; border-bottom:1px solid #eee; vertical-align:top; }
    tr:hover td { background:#f0f4ff; }
    .domain-sub { font-size:.75rem; color:#888; }
    .status-green { color:#16a34a; }
    .status-orange { color:#d97706; }
    .status-red { color:#dc2626; }
    .status-white { color:#777; }
    .status-grey { color:#888; }
    .status-timeout { color:#546e7a; }
    .ns-list { font-size:.78rem; color:#2563eb; }
    .msg { font-size:.78rem; margin:.1rem 0; }
    .msg.warn { color:#d97706; }
    .msg.err { color:#dc2626; }
    .msg-toggle { font-size:.75rem; color:#2563eb; cursor:pointer; border:none; background:none; padding:0; text-decoration:underline; }
    .msg-details { display:none; margin-top:.3rem; }
    .loading { text-align:center; padding:3rem; color:#888; }

    /* Charts */
    .charts { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1rem; margin-bottom:1.2rem; }
    .chart-box { background:#f5f5f7; border:1px solid #ddd; border-radius:.6rem; padding:.7rem; }
    .chart-box h3 { margin:0 0 .5rem; font-size:.85rem; color:#888; }
    .chart-row { display:flex; align-items:center; gap:.4rem; margin:.25rem 0; font-size:.8rem; }
    .chart-label { width:120px; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
    .chart-bar-wrap { flex:1; height:18px; background:#f0f0f2; border-radius:3px; overflow:hidden; }
    .chart-bar { height:100%; border-radius:3px; min-width:2px; }
    .chart-bar.errors { background:#ef4444; }
    .chart-bar.warnings { background:#f59e0b; }
    .chart-bar.domains { background:#a78bfa; }
    .chart-count { width:30px; text-align:right; color:#888; flex-shrink:0; }