*, *::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; }
    h1 { color: #1e40af; font-size: 1.2rem; margin: 0 0 1rem; }
    table { width: 100%; border-collapse: collapse; }
    th { text-align: left; padding: .5rem .6rem; border-bottom: 2px solid #ddd; color: #555; font-size: .8rem; text-transform: uppercase; cursor: pointer; user-select: none; }
    th:hover { color: #1e40af; }
    th .sort-arrow { font-size: .65rem; margin-left: .2rem; }
    th:last-child { text-align: right; }
    td { padding: .45rem .6rem; border-bottom: 1px solid #eee; font-size: .9rem; }
    td:nth-child(2), td:nth-child(3) { text-align: center; }
    td:nth-child(2) { font-weight: 600; }
    th:nth-child(2), th:nth-child(3) { text-align: center; }
    td:last-child { text-align: right; color: #888; font-size: .8rem; }
    a { color: #2563eb; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .g { color: #16a34a; }
    .o { color: #d97706; }
    .r { color: #dc2626; }
    .se-badge { display: inline-block; background: #006aa7; color: #fecc02; font-size: .65rem; font-weight: 700; padding: .1rem .35rem; border-radius: .25rem; margin-left: .4rem; vertical-align: middle; }
    .bot-badge { display: inline-block; background: #374151; color: #f9fafb; font-size: .65rem; font-weight: 600; padding: .1rem .35rem; border-radius: .25rem; vertical-align: middle; }
    .host-badge { display: inline-block; background: #e0e7ff; color: #4338ca; font-size: .65rem; font-weight: 600; padding: .1rem .35rem; border-radius: .25rem; margin-left: .3rem; vertical-align: middle; }
    .copy-btn { background: #f0f0f2; border: 1px solid #ccc; color: #888; padding: .15rem .4rem; border-radius: .3rem; cursor: pointer; font-size: .7rem; margin-left: .3rem; vertical-align: middle; }
    .copy-btn:hover { border-color: #888; color: #111; }
    .copied { color: #16a34a; font-size: .7rem; margin-left: .3rem; }
    .loading { color: #888; padding: 2rem; text-align: center; }
    .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; }
    .today-count { font-size: .85rem; color: #555; margin: 0 0 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .today-count strong { color: #1e40af; }
    .filter-opt { display: flex; align-items: center; gap: .3rem; cursor: pointer; user-select: none; }
    .tabs { display: flex; gap: .3rem; margin: 0 0 1rem; border-bottom: 2px solid #e5e7eb; }
    .tab { border: none; background: none; color: #555; padding: .5rem .8rem; font-size: .9rem; font-weight: 600; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
    .tab:hover { color: #1e40af; }
    .tab.active { color: #1e40af; border-bottom-color: #1e40af; }
    .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; }
    .hist-toggle { display: inline-block; cursor: pointer; color: #1e40af; background: #eef2ff; border: 1px solid #c7d2fe; font-size: .68rem; font-weight: 600; line-height: 1.2; padding: .05rem .35rem; border-radius: .35rem; margin-left: .4rem; vertical-align: middle; user-select: none; white-space: nowrap; }
    .hist-toggle:hover { background: #dde4ff; }
    .hist-toggle.open { background: #1e40af; color: #fff; border-color: #1e40af; }
    .hist-detail > td { background: #f8fafc; padding: .3rem .6rem .5rem 1.6rem; }
    .hist-detail .dh-loading { color: #888; font-size: .8rem; padding: .3rem 0; }
    .dh-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .3rem 0; border-top: 1px solid #e5e7eb; font-size: .8rem; text-decoration: none; color: inherit; }
    .dh-row:first-child { border-top: none; }
    .dh-row:hover { background: #eef4ff; }
    .dh-date { color: #666; min-width: 8.5rem; font-variant-numeric: tabular-nums; }
    .dh-dots { display: flex; gap: 3px; }
    .dh-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
    .dh-score { font-weight: 600; color: #333; }
    .dh-grade { font-weight: 700; padding: 0 .35rem; border-radius: .3rem; color: #fff; font-size: .74rem; }
    .dh-bot { font-size: .68rem; color: #999; border: 1px solid #ddd; border-radius: .3rem; padding: 0 .3rem; }
    @media (max-width: 640px) {
      body { padding: .6rem; }
      .nav h1, h1 { font-size: 1.05rem; }
      /* Keep the wide table inside a scroll area so the whole page isn't
         zoomed out to fit it (Safari/iOS) — text stays full-size. */
      #app { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      th { padding: .4rem .3rem; font-size: .66rem; }
      td { padding: .4rem .3rem; font-size: .82rem; }
      .copy-btn { display: none; }
      .se-badge, .bot-badge, .host-badge { font-size: .58rem; padding: .05rem .22rem; }
      td:nth-child(5) { white-space: normal !important; min-width: 5.2rem; }
      .hist-detail > td { padding-left: .5rem; }
      .dh-row { gap: .35rem .5rem; font-size: .78rem; }
      .dh-date { min-width: 6.8rem; font-size: .76rem; }
    }