:root { color-scheme: dark; --bg:#0a0a0a; --card:#111; --line:#222;
        --fg:#eee; --muted:#8a8a8a; --key:#7a7a7a; --accent:#8ab4f8; }
* { box-sizing:border-box; }
html,body { margin:0; }
body { background:var(--bg); color:var(--fg);
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
       -webkit-font-smoothing:antialiased; }

.hero { min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
        align-items:center; justify-content:center; text-align:center; padding:24px;
        position:relative; }
.label { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
         color:var(--key); margin-bottom:14px; }
.ip-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; }
.ip { font-size:clamp(2rem,8vw,3.6rem); font-weight:600; line-height:1.1;
      font-variant-numeric:tabular-nums; word-break:break-all;
      font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.copy { background:#1b2740; color:var(--accent); border:1px solid #2c3f63;
        border-radius:8px; padding:6px 14px; font-size:.85rem; cursor:pointer;
        transition:background .15s,transform .1s; }
.copy:hover { background:#243458; }
.copy:active { transform:scale(.95); }
.copy.ok { background:#153a24; color:#7ee2a8; border-color:#245c3a; }
.loc { margin-top:18px; font-size:1.25rem; color:#c8c8c8;
       display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; }
.flag { border-radius:3px; vertical-align:middle; box-shadow:0 0 0 1px #0004; }
.flag-emoji { font-size:1.4rem; }

.lookup { margin-top:28px; display:flex; gap:8px; width:min(440px,90vw); }
.lookup input { flex:1; min-width:0; background:#141414; border:1px solid #2a2a2a;
  color:var(--fg); border-radius:9px; padding:10px 14px; font-size:.95rem; outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.lookup input:focus { border-color:var(--accent); }
.lookup button { background:#1b2740; color:var(--accent); border:1px solid #2c3f63;
  border-radius:9px; padding:0 18px; font-size:.95rem; cursor:pointer;
  transition:background .15s; }
.lookup button:hover { background:#243458; }
.lookup button:disabled { opacity:.55; cursor:default; }
.lookup-note { margin-top:14px; font-size:.9rem; color:var(--muted); }
.lookup-note b { color:#dcdcdc; font-weight:600; }
.lookup-note a { color:var(--accent); text-decoration:none; }
.lookup-note a:hover { text-decoration:underline; }
.lookup-error { margin-top:12px; font-size:.88rem; color:#f28b82; }

.scroll-hint { position:absolute; bottom:26px; left:0; right:0; color:var(--key);
               font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
               display:flex; flex-direction:column; align-items:center; gap:10px; }
.chev { width:12px; height:12px; border-right:2px solid var(--key);
        border-bottom:2px solid var(--key); transform:rotate(45deg);
        animation:bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0) rotate(45deg);}
                 50%{transform:translateY(6px) rotate(45deg);} }

.blocks { max-width:720px; margin:0 auto; padding:20px 16px 40px;
          display:flex; flex-direction:column; gap:18px; }
/* JS-built cards live inside this wrapper; display:contents lets them
   join the .blocks flex flow so they get the same 18px gap as server cards. */
#client-blocks { display:contents; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px;
        padding:20px 22px; }
.card h2 { margin:0 0 16px; font-size:1.05rem; font-weight:600; }
.grid { display:grid; grid-template-columns:minmax(140px,38%) 1fr;
        gap:10px 18px; align-items:start; }
.k { color:var(--key); font-size:.9rem; }
.v { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88rem;
     word-break:break-word; color:#e6e6e6; }
.v.hl-ok { color:#7ee2a8; }
.v.hl-bad { color:#f28b82; }
.v.hl-warn { color:#f5c76a; }
.v.pending { color:var(--muted); }
.note { margin:14px 0 0; font-size:.8rem; line-height:1.45; color:var(--muted); }

/* compact tag lists (codecs, APIs, permissions, fonts) */
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:.76rem; line-height:1.2; padding:3px 9px; border-radius:999px;
        background:#181818; border:1px solid #2a2a2a; color:#bdbdbd;
        font-family:ui-monospace,SFMono-Regular,Menlo,monospace; white-space:nowrap; }
.chip.ok { color:#7ee2a8; border-color:#245c3a; background:#122a1b; }
.chip.bad { color:#f28b82; border-color:#5c2a2a; background:#2a1414; }
.chip.warn { color:#f5c76a; border-color:#5c4a1e; background:#2a2210; }
.chip.mute { color:#6f6f6f; }

details.more summary { cursor:pointer; color:var(--accent); font-size:.85rem;
                       list-style:none; }
details.more summary::-webkit-details-marker { display:none; }
details.more summary::before { content:"▸ "; }
details.more[open] summary::before { content:"▾ "; }
details.more .body { margin-top:8px; line-height:1.55; color:#cfcfcf; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .55s ease,
          transform .55s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.reveal.in { opacity:1; transform:none; }

.foot { text-align:center; color:var(--key); font-size:.82rem; padding:8px 16px 40px; }
.foot code { color:var(--accent); background:#141414; padding:2px 8px; border-radius:6px; }
.foot code a { color:inherit; text-decoration:none; }
.foot code a:hover { text-decoration:underline; }

@media (max-width:520px){
  .grid { grid-template-columns:1fr; gap:2px 0; }
  .grid .k { margin-top:8px; }
  .grid .k:first-child { margin-top:0; }
}
@media (prefers-reduced-motion:reduce){
  .reveal { opacity:1; transform:none; transition:none; }
  .chev { animation:none; }
}