*, *::before, *::after { box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #fff; color: #111; max-width: 800px; margin: 0 auto; padding: 1.5rem; }
    .nav { display: flex; gap: .4rem; align-items: center; margin-bottom: 1rem; }
    .nav h1 { font-size: 1.2rem; color: #1e40af; margin: 0 .5rem 0 0; }
    .btn { border: 1px solid #ccc; background: #f0f0f2; color: #111; padding: .3rem .6rem; border-radius: .4rem; cursor: pointer; font-size: .8rem; text-decoration: none; }
    .btn:hover { border-color: #888; }
    .charts { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
    @media (min-width: 600px) { .charts { grid-template-columns: 1fr 1fr; } }
    .chart-card { background: #f8f8fa; border: 1px solid #e5e7eb; border-radius: .6rem; padding: 1rem; }
    .chart-card h2 { font-size: .95rem; color: #1e40af; margin: 0 0 .8rem; }
    .bar-row { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; }
    .bar-label { width: 150px; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; }
    .bar-wrap { flex: 1; height: 18px; background: #e5e7eb; border-radius: 3px; overflow: hidden; }
    .bar { height: 100%; border-radius: 3px; transition: width .3s; }
    .bar.dns { background: #60a5fa; }
    .bar.mx { background: #f97171; }
    .bar.cert { background: #fbbf24; }
    .bar.ipv6 { background: #34d399; }
    .bar.roa { background: #f97316; }
    .bar-count { font-size: .75rem; color: #888; width: 35px; text-align: right; flex-shrink: 0; }
    .stats { color: #888; font-size: .85rem; margin-bottom: 1rem; }
    .loading { color: #888; padding: 2rem; text-align: center; }
    .footer { border-top: 1px solid #eee; margin-top: 2rem; padding: .8rem 0; font-size: .8rem; color: #888; text-align: center; }
    .footer a { color: #2563eb; text-decoration: none; }