* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f1419; color: #e7ecf3; min-height: 100vh; }
header { padding: 2rem; text-align: center; border-bottom: 1px solid #243041; }
h1 { font-size: 1.6rem; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; padding: 2rem; max-width: 1100px; margin: 0 auto; }
.card { display: block; background: #1a2332; border: 1px solid #2a3a50; border-radius: 12px; padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card:hover { border-color: #4a9eff; transform: translateY(-2px); }
.icon { font-size: 2rem; display: block; margin-bottom: .5rem; }
.card h2 { font-size: 1.05rem; margin-bottom: .35rem; }
.card p { font-size: .85rem; color: #9aa8b8; }
.tabs { display: flex; gap: .5rem; justify-content: center; margin-top: 1rem; }
.tab-btn {
  background: #1a2332; border: 1px solid #2a3a50; color: #9aa8b8;
  padding: .45rem 1.1rem; border-radius: 8px; cursor: pointer;
}
.tab-btn.active { background: #4a9eff; border-color: #4a9eff; color: #fff; }
.tab-panel { display: none; padding: 2rem; max-width: 1100px; margin: 0 auto; }
.tab-panel.active { display: block; }
.tab-hint { color: #9aa8b8; font-size: .85rem; margin-bottom: 1rem; text-align: center; }
.badge {
  position: absolute; top: .75rem; right: .75rem;
  font-size: .65rem; background: #243041; color: #7a8a9a;
  padding: .15rem .45rem; border-radius: 4px;
}
.card { position: relative; }
.local-only { border-style: dashed; }