#allinfo {
  position: relative;
}

#copyJsonBtn {
  background: #1f252d;
  color: var(--muted);
  border: 1px solid #242b34;
  border-radius: var(--radius-sm);
  padding: 0.45rem 1.1rem;
  margin: 1rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
#copyJsonBtn:hover, #copyJsonBtn:focus {
  background: #232a33;
  color: var(--text);
  outline: none;
}
* { box-sizing: border-box; }
:root {
  --bg:#0f1115; --panel:#181c22; --panel-border:#262c35; --text:#e6ecf3; --muted:#7d8895; --accent:#3b82f6; --danger:#ef4444; --warn:#f59e0b; --ok:#10b981; --code:#0d1117;
  --radius:14px; --radius-sm:6px; --font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
}
html,body { margin:0; padding:0; font-family:var(--font); background:linear-gradient(145deg,#0b0e13,#151a21); color:var(--text); -webkit-font-smoothing:antialiased; }
body { padding: clamp(1rem,3vw,2.5rem); max-width:1400px; margin:0 auto; }
header { text-align:center; margin-bottom:2rem; }
h1 { margin:0 0 .5rem; font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-1px; background:linear-gradient(90deg,#60a5fa,#a78bfa); -webkit-background-clip:text; color:transparent; }
.subtitle { margin:0; color:var(--muted); }

#allinfo { background:var(--panel); border:1px solid var(--panel-border); padding:1.25rem 1.4rem 1.6rem; margin-bottom:1.75rem; border-radius:var(--radius); box-shadow:0 4px 16px -4px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.03) inset; }
#allinfo h2 { margin-top:0; letter-spacing:.5px; font-size:1.25rem; display:flex; align-items:center; gap:.6rem; }

#infoGrid { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }
.card { background:#1f252d; border:1px solid #242b34; padding:.9rem 1rem .95rem; border-radius:var(--radius-sm); position:relative; overflow:hidden; }
.card h3 { margin:0 0 .35rem; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--muted); }
.card p { margin:0; font-size:.95rem; line-height:1.25rem; word-break:break-word; }
.badge { display:inline-block; padding:2px 7px 3px; font-size:.65rem; background:var(--accent); color:#fff; border-radius:999px; font-weight:600; letter-spacing:.5px; }
.flex { display:flex; flex-wrap:wrap; gap:.5rem; }
.tag { background:#243041; padding:4px 8px 5px; border-radius:6px; font-size:.7rem; letter-spacing:.5px; color:#bcd; }

#info details { border:1px solid #242b34; border-radius:12px; margin-bottom:.9rem; background:#1c2229; }
#info summary { cursor:pointer; list-style:none; padding:.85rem 1rem; font-weight:600; display:flex; align-items:center; gap:.6rem; }
#info summary::-webkit-details-marker { display:none; }
#info table { width:100%; border-collapse:collapse; font-size:.85rem; }
#info th, #info td { text-align:left; padding:.55rem .9rem; border-top:1px solid #242b34; vertical-align:top; }
#info th { width:230px; font-weight:600; color:#9fb1c4; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; }
#info tr:first-child th, #info tr:first-child td { border-top:none; }

.code { background:#0d1218; border:1px solid #1e242c; padding:1rem 1.2rem; border-radius:var(--radius-sm); max-height:500px; overflow:auto; font-size:.75rem; line-height:1.1rem; }
footer { margin-top:2rem; text-align:center; font-size:.7rem; color:var(--muted); }

.status { font-size:.6rem; font-weight:600; padding:2px 6px 3px; border-radius:5px; background:#374151; color:#d1d5db; letter-spacing:.5px; }
.status.ok { background:var(--ok); color:#022c22; }
.status.warn { background:var(--warn); color:#422006; }
.status.danger { background:var(--danger); color:#450a0a; }

@media (max-width:700px){
  th { width:140px!important; }
  body { padding:1rem; }
}