: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;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--color-background-primary); color: var(--color-text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 2.5rem 2rem 3rem; }

/* header row: title + subtitle on the left, bookmarks + back links on the right */
.header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 1.75rem; }
.header-titles { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.header-links { display: flex; align-items: baseline; gap: 16px; }
h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.subtitle { font-size: 16px; color: var(--color-text-secondary); font-style: italic; }
.back { font-size: 18px; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.back:hover { color: var(--color-text-primary); }

/* search box + category/status filters + result count */
.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; }

/* the course table */
.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; }
.idx { font-family: var(--font-mono); font-size: 16px; color: var(--color-text-tertiary); }
.course { font-weight: 500; font-size: 18px; }
.course a { color: inherit; text-decoration: none; }
.course a:hover { text-decoration: underline; }

/* category badge, one colour per topic area */
.cat { display: inline-block; font-size: 14px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.cat-concepts    { background:#3E0D3E; color:#E0A6E6; }
.cat-oop         { background:#26215C; color:#CECBF6; }
.cat-collections { background:#173404; color:#C0DD97; }
.cat-io          { background:#04342C; color:#9FE1CB; }
.cat-concurrency { background:#042C53; color:#B5D4F4; }

/* status badge: where each course currently stands */
.status { display: inline-block; font-size: 14px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.status-completed  { background:#173404; color:#C0DD97; }
.status-inprogress { background:#042C53; color:#B5D4F4; }
.status-planned    { background:#2C2C2A; color:#D3D1C7; }

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

/* column widths */
th:nth-child(1) { width: 5%; }
th:nth-child(2) { width: 50%; }
th:nth-child(3) { width: 25%; }
th:nth-child(4) { width: 20%; }
td:nth-child(2) { overflow-wrap: anywhere; word-break: break-word; }

/* mobile — no room for category and status, so the list shows just the course name */
@media (max-width: 600px) {
  th:nth-child(3), td:nth-child(3),
  th:nth-child(4), td:nth-child(4) { display: none; }
  th:nth-child(1) { width: 12%; }
  th:nth-child(2) { width: 88%; }
}