html, body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#fff; color:#111; }
    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:1.05rem; margin:0; margin-right:auto; }
    .btn { border:1px solid #ccc; background:#f0f0f2; color:#111; padding:.35rem .6rem; border-radius:.5rem; cursor:pointer; font-size:.85rem; text-decoration:none; }
    .btn:hover { background:#e6e6ea; }
    main { padding:.8rem; max-width:1100px; margin:0 auto; }
    .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.6rem; margin-bottom:1rem; }
    .kpi { background:#f7f7f9; border:1px solid #e3e3e8; border-radius:.6rem; padding:.7rem .8rem; }
    .kpi .v { font-size:1.5rem; font-weight:650; }
    .kpi .l { font-size:.72rem; color:#666; text-transform:uppercase; letter-spacing:.03em; }
    table { width:100%; border-collapse:collapse; font-size:.85rem; }
    th, td { padding:.45rem .5rem; text-align:left; border-bottom:1px solid #eee; white-space:nowrap; }
    th { color:#555; font-weight:600; font-size:.78rem; cursor:pointer; user-select:none; }
    tr.cat { cursor:pointer; }
    tr.cat:hover { background:#f5f8ff; }
    td.num, th.num { text-align:right; }
    .bar { display:flex; height:14px; width:120px; border-radius:3px; overflow:hidden; background:#eee; }
    .bar span { display:block; height:100%; }
    .gA{background:#1a9850} .gB{background:#91cf60} .gC{background:#fee08b} .gD{background:#fdae61} .gE{background:#f46d43} .gF{background:#d73027}
    .pill { display:inline-block; min-width:1.4em; text-align:center; padding:.05rem .35rem; border-radius:.35rem; font-weight:650; color:#fff; font-size:.8rem; }
    .grade-A{background:#1a9850}.grade-B{background:#5aae3a}.grade-C{background:#c9a227}.grade-D{background:#e08214}.grade-E{background:#e8590c}.grade-F{background:#d73027}.grade-_{background:#999}
    .dns-yes{color:#1a9850;font-weight:650}.dns-no{color:#d73027;font-weight:650}
    a.dom { color:#0645ad; text-decoration:none; }
    a.dom:hover { text-decoration:underline; }
    .muted { color:#888; }
    .crumb { margin:.2rem 0 .8rem; font-size:.85rem; }
    #search { border:1px solid #ccc; background:#f0f0f2; padding:.35rem .6rem; border-radius:.5rem; font-size:.85rem; width:180px; }
    #domSearch { border:1px solid #ccc; background:#fff; padding:.35rem .6rem; border-radius:.5rem; font-size:.85rem; width:230px; max-width:45vw; }
    .note { color:#888; font-size:.8rem; margin-top:1rem; }
    h3 { font-size:.95rem; margin:1.2rem 0 .4rem; }
    .chart-wrap { border:1px solid #eee; border-radius:.6rem; padding:.5rem; background:#fcfcfd; }
    .lvl-ERROR, .lvl-CRITICAL { color:#d73027; font-weight:650; }
    .lvl-WARNING { color:#e08214; font-weight:650; }
    code { background:#f0f0f3; padding:.05rem .3rem; border-radius:.3rem; font-size:.82rem; }
    .cols { display:grid; grid-template-columns:1fr; gap:1rem; }
    @media (min-width:780px){ .cols { grid-template-columns:1.3fr 1fr; align-items:start; } }
    tr.domrow { cursor:pointer; }
    tr.domrow:hover { background:#f5f8ff; }
    tr.detail td { background:#fafafa; }
    .chips { display:flex; flex-wrap:wrap; gap:.3rem; padding:.15rem 0 .35rem; }
    .chip { display:inline-block; padding:.1rem .4rem; border-radius:.35rem; font-size:.74rem; font-family:ui-monospace,Menlo,Consolas,monospace; color:#fff; }
    .chip.lvl-WARNING { background:#e08214; }
    .chip.lvl-ERROR, .chip.lvl-CRITICAL { background:#d73027; }
    .lowest-box { background:#fff6f6; border:1px solid #f3c9c9; border-radius:.6rem; padding:.55rem .8rem; margin-bottom:1rem; font-size:.9rem; }
    .lowest-box .dom { margin:0 .15rem; }
    .loader { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem; gap:1rem; color:#666; }
    .spinner { width:32px; height:32px; border:3px solid #eee; border-top:3px solid #0645ad; border-radius:50%; animation:spin .8s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }