:root {
  --color-background-primary: #111113;
  --color-background-secondary: #1a1a1e;
  --color-text-primary: #e8e8ea;
  --color-text-secondary: #9898a0;
  --color-text-tertiary: #5e5e66;
  --color-border-secondary: #2e2e33;
  --color-border-tertiary: #232328;
  --border-radius-md: 7px;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

body {
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.5rem 2rem 3rem;
}

h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  align-items: center;
}

input[type=text] {
  flex: 1;
  min-width: 220px;
  font-size: 18px;
  padding: 8px 12px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-secondary);
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  outline: none;
}

input[type=text]:focus {
  border-color: #3a3a44;
}

select {
  font-size: 18px;
  padding: 8px 12px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-secondary);
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  outline: none;
  cursor: pointer;
}

.count {
  font-size: 17px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.tbl-wrap {
  overflow-x: auto;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-tertiary);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  table-layout: fixed;
}

th {
  text-align: left;
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text-secondary);
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-tertiary);
  background: var(--color-background-secondary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--color-border-tertiary);
  vertical-align: top;
  color: var(--color-text-primary);
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: #16161a;
}

tr.clickable {
  cursor: pointer;
}

.idx {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-text-tertiary);
  padding-top: 3px;
}

.code {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-text-secondary);
}

.service {
  font-weight: 500;
  font-size: 18px;
}

.service a {
  color: inherit;
  text-decoration: none;
}

.service a:hover {
  text-decoration: underline;
}

.full {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin-top: 3px;
}

.desc {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.cat {
  display: inline-block;
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}

.no-results {
  text-align: center;
  padding: 3rem;
  color: var(--color-text-secondary);
  font-size: 20px;
}

th:nth-child(1) { width: 4%; }
th:nth-child(2) { width: 15%; }
th:nth-child(3) { width: 22%; }
th:nth-child(4) { width: 12%; }
th:nth-child(5) { width: 47%; }

/* one color per AWS category — same dark/muted palette as concepts */
.cat-compute     { background:#412402; color:#FAC775; }
.cat-storage     { background:#173404; color:#C0DD97; }
.cat-database    { background:#042C53; color:#B5D4F4; }
.cat-network     { background:#26215C; color:#CECBF6; }
.cat-security    { background:#501313; color:#F7C1C1; }
.cat-mgmt        { background:#2C2C2A; color:#D3D1C7; }
.cat-devtools    { background:#0D2B3E; color:#7EC8E3; }
.cat-analytics   { background:#4A1B0C; color:#F5C4B3; }
.cat-integration { background:#4B1528; color:#F4C0D1; }
.cat-containers  { background:#04342C; color:#9FE1CB; }
.cat-migration   { background:#26215C; color:#AFA9EC; }
.cat-ml          { background:#3E0D3E; color:#E0A6E6; }
.cat-iot         { background:#1F3304; color:#C8E695; }
.cat-media       { background:#4A1F0C; color:#F2B59A; }
.cat-euc         { background:#33330A; color:#D9D788; }
.cat-frontend    { background:#2A1840; color:#C8A8F0; }
.cat-game        { background:#3A2A04; color:#E5C97A; }
.cat-robotics    { background:#2B2B2E; color:#BABABF; }
.cat-satellite   { background:#0D1A3A; color:#9AAFE0; }
.cat-quantum     { background:#3D0633; color:#F0A4D9; }
.cat-blockchain  { background:#3A2009; color:#D9A776; }