:root {
        --bg0: #f8fbff;
        --card: rgba(255, 255, 255, 0.86);
        --card2: rgba(255, 255, 255, 0.62);
        --text: #0f172a;
        --muted: #64748b;
        --border: rgba(148, 163, 184, 0.25);
        --shadow: 0 18px 50px rgba(2, 6, 23, 0.08);
        --shadow2: 0 10px 30px rgba(2, 6, 23, 0.06);
        --green: #16a34a;
        --red: #e11d48;
        --orange: #f97316;
        --accentA: #2563eb;
        --accentB: #06b6d4;
        --accentC: #22c55e;
        --btn: linear-gradient(135deg, #2563eb 0%, #06b6d4 55%, #22c55e 100%);
        --btnText: #ffffff;
        --pill: rgba(2, 6, 23, 0.06);
        --ring: rgba(37, 99, 235, 0.28);
        --inputBg: rgba(255, 255, 255, 0.62);
      }
      :root[data-theme="dark"] {
        --bg0: #0b1220;
        --card: rgba(15, 23, 42, 0.75);
        --card2: rgba(2, 6, 23, 0.35);
        --text: #e2e8f0;
        --muted: #94a3b8;
        --border: rgba(148, 163, 184, 0.22);
        --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
        --shadow2: 0 10px 30px rgba(0, 0, 0, 0.3);
        --pill: rgba(255, 255, 255, 0.07);
        --ring: rgba(37, 99, 235, 0.24);
        --inputBg: rgba(2, 6, 23, 0.22);
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
        font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Segoe UI",
          Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
        color: var(--text);
        background: radial-gradient(1200px 560px at 18% -10%, rgba(37, 99, 235, 0.16), transparent 62%),
          radial-gradient(1150px 540px at 86% 14%, rgba(6, 182, 212, 0.14), transparent 60%),
          radial-gradient(1200px 640px at 55% 110%, rgba(34, 197, 94, 0.12), transparent 58%),
          var(--bg0);
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      .container {
        max-width: 1100px;
        margin: 0 auto;
        padding: 24px 18px 40px;
      }
      .top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 18px 14px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: linear-gradient(180deg, var(--card), var(--card2));
        box-shadow: var(--shadow);
        backdrop-filter: blur(10px);
      }
      .top h1 {
        margin: 0;
        font-size: 18px;
        letter-spacing: 0.2px;
      }
      .top p {
        margin: 10px 0 0;
        font-size: 12px;
        line-height: 1.6;
        color: var(--muted);
        max-width: 760px;
      }
      .actions {
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .chip {
        border: 1px solid var(--border);
        background: var(--pill);
        border-radius: 999px;
        padding: 8px 10px;
        font-size: 12px;
        color: var(--muted);
        cursor: pointer;
        user-select: none;
      }
      .chip:focus {
        outline: none;
        box-shadow: 0 0 0 4px var(--ring);
      }
      .section {
        margin-top: 14px;
        padding: 18px;
        border-radius: 18px;
        border: 1px solid var(--border);
        background: linear-gradient(180deg, var(--card), var(--card2));
        box-shadow: var(--shadow2);
        backdrop-filter: blur(10px);
      }
      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
      }
      .title {
        font-size: 14px;
        font-weight: 700;
        margin: 0;
      }
      .sub {
        font-size: 12px;
        color: var(--muted);
        margin-top: 8px;
      }
      .recommend {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
      }
      .rec-left .host {
        font-size: 20px;
        font-weight: 800;
        margin-top: 8px;
        letter-spacing: 0.2px;
      }
      .rec-left .meta {
        margin-top: 6px;
        font-size: 12px;
        color: var(--muted);
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: 999px;
        background: var(--pill);
        border: 1px solid var(--border);
        color: var(--muted);
      }
      .btn {
        background: var(--btn);
        border: none;
        color: var(--btnText);
        padding: 10px 16px;
        border-radius: 999px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 12px 26px rgba(59, 130, 246, 0.18);
      }
      .btn:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }
      .btn.secondary {
        background: transparent;
        color: var(--text);
        border: 1px solid var(--border);
        box-shadow: none;
      }
      .btn:focus {
        outline: none;
        box-shadow: 0 0 0 4px var(--ring);
      }
      .table-wrap {
        margin-top: 10px;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: rgba(255, 255, 255, 0.55);
      }
      :root[data-theme="dark"] .table-wrap {
        background: rgba(2, 6, 23, 0.25);
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
      }
      thead th {
        text-align: left;
        padding: 12px 14px;
        color: var(--muted);
        font-weight: 700;
        background: rgba(2, 6, 23, 0.03);
      }
      :root[data-theme="dark"] thead th {
        background: rgba(255, 255, 255, 0.04);
      }
      tbody td {
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        vertical-align: middle;
      }
      .url {
        font-weight: 700;
      }
      .small {
        display: block;
        margin-top: 4px;
        font-weight: 500;
        font-size: 12px;
        color: var(--muted);
        word-break: break-all;
      }
      .status-ok {
        color: var(--green);
        font-weight: 800;
      }
      .status-bad {
        color: var(--red);
        font-weight: 800;
      }
      .lat-ok {
        color: var(--orange);
        font-weight: 800;
      }
      .lat-bad {
        color: var(--red);
        font-weight: 800;
      }
      .op {
        text-align: right;
      }
      .row-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .pill-right {
        font-size: 12px;
        color: var(--muted);
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--pill);
      }
      .foot {
        margin-top: 10px;
        font-size: 12px;
        color: var(--muted);
      }
      .btn.small {
        padding: 9px 12px;
        font-weight: 750;
      }
      @media (max-width: 860px) {
        .container {
          padding: 18px 14px 28px;
        }
        .recommend {
          grid-template-columns: 1fr;
        }
        .op {
          text-align: left;
        }
        .row {
          flex-direction: column;
          align-items: flex-start;
        }
        .actions {
          width: 100%;
          flex-wrap: wrap;
        }
        .actions .btn,
        .actions .chip {
          width: 100%;
          justify-content: center;
        }
      }
      @media (max-width: 720px) {
        thead {
          display: none;
        }
        .table-wrap {
          background: transparent;
          border: none;
          overflow: visible;
        }
        table,
        tbody,
        tr {
          display: block;
          width: 100%;
        }
        tbody tr {
          margin-top: 10px;
          border-radius: 16px;
          border: 1px solid var(--border);
          background: linear-gradient(180deg, var(--card), var(--card2));
          box-shadow: var(--shadow2);
          backdrop-filter: blur(10px);
          overflow: hidden;
        }
        tbody td {
          display: flex;
          gap: 10px;
          align-items: flex-start;
          justify-content: space-between;
          border-top: 1px solid var(--border);
        }
        tbody td:first-child {
          border-top: none;
        }
        tbody td::before {
          content: attr(data-label);
          color: var(--muted);
          font-weight: 750;
          flex: 0 0 auto;
        }
        .op {
          text-align: left;
        }
      }
    
/* Local controls retain semantic links and accessible states. */
:root{color-scheme:light}:root[data-theme="dark"]{color-scheme:dark}
button,a.btn{font-family:inherit;font-size:13px;line-height:normal}a.btn{display:inline-flex;align-items:center;justify-content:center}.btn.disabled{opacity:.55;pointer-events:none}[hidden]{display:none!important}.host{overflow-wrap:anywhere}h2.title{margin:0}.meta{align-items:center}.foot p{margin:6px 0}.pending{color:var(--muted)}.status-ok,.status-bad{font-weight:800}.url-cell{min-width:0}.url-cell .badge{margin-left:4px;font-size:12px;font-weight:400}.url{overflow-wrap:anywhere}a:focus-visible,button:focus-visible{outline:3px solid var(--accentA);outline-offset:3px}.noscript{margin-top:10px}
.top>.chip{flex-shrink:0;white-space:nowrap}
#message:empty{display:none}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}