* { margin: 0; box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0b1020; color: #e8ecf7; line-height: 1.6;
  max-width: 960px; margin: 0 auto; padding: 0 24px 60px;
}
header { display: flex; align-items: center; gap: 16px; padding: 24px 0; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.1rem; }
.tagline { color: #93a0bd; font-size: .9rem; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.2; }
h2 { margin-bottom: 8px; }
section { margin-top: 48px; }
.muted { color: #93a0bd; margin-bottom: 16px; }
code { background: #1a2340; padding: 2px 6px; border-radius: 4px; }

.hero {
  padding: 48px 32px; border-radius: 16px;
  background: linear-gradient(135deg, #f6821f 0%, #c2410c 35%, #1d4ed8 100%);
}
.hero p { max-width: 60ch; margin-top: 12px; color: #fff; }
.metrics { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.metric {
  background: rgba(10, 15, 30, .75); border-radius: 12px; padding: 16px 24px; min-width: 150px;
}
.metric span { display: block; font-size: 1.6rem; font-weight: 700; color: #fdba74; }
.metric label { color: #c7d2e5; font-size: .8rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gallery img {
  width: 100%; border-radius: 12px; border: 1px solid #26314f; background: #131b33;
}

button {
  background: #f6821f; color: #14181f; border: 0; border-radius: 8px;
  padding: 12px 28px; font-size: 1rem; font-weight: 700; cursor: pointer;
}
button:disabled { opacity: .5; cursor: wait; }

table { border-collapse: collapse; margin-top: 16px; width: 100%; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid #26314f; }
th { color: #93a0bd; font-weight: 600; }
tfoot th { color: #fdba74; font-size: 1.1rem; }
footer { margin-top: 64px; color: #93a0bd; font-size: .85rem; border-top: 1px solid #26314f; padding-top: 16px; }

/* ---- Tabs + Caching Lab ---- */
.tabs { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tabs a { padding: 10px 18px; border-radius: 8px; background: #1a2340; color: #93a0bd;
          text-decoration: none; font-weight: 600; }
.tabs a.active { background: #f6821f; color: #14181f; }

.banner { margin-top: 24px; padding: 16px 20px; border-radius: 12px;
          background: #1a2340; border: 1px solid #26314f; }
.banner.good { border-color: #22c55e; color: #86efac; }
.bad { border-color: #f59e0b; color: #fcd34d; }

.chip { display: inline-block; padding: 2px 10px; border-radius: 999px;
        font-size: .75rem; font-weight: 700; }
.b-HIT { background: #14532d; color: #86efac; }
.b-MISS { background: #7c2d12; color: #fdba74; }
.b-DYNAMIC { background: #1e3a8a; color: #93c5fd; }
.b-BYPASS { background: #7f1d1d; color: #fca5a5; }
.b-EXPIRED { background: #78350f; color: #fcd34d; }
.b-REVALIDATED { background: #4c1d95; color: #c4b5fd; }

.run-line { font-size: .85rem; margin-top: 6px; color: #c7d2e5; }
.run-line .ms { color: #93a0bd; }
td small { color: #93a0bd; }
.qbtns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }