/* --- THEME VARIABLES --- */
:root {
  --bg-dark:#0b0d10; --panel-dark:#11151a; --panel2-dark:#151a21;
  --text-dark:#e9edf1; --muted-dark:#a7b1bd; --brand-dark:#6fb3ff;

  --bg-light:#f9f9f9; --panel-light:#ffffff; --panel2-light:#f0f0f0;
  --text-light:#111; --muted-light:#555; --brand-light:#0056cc;

  --ring: rgba(111,179,255,.5);
  --radius: 14px;
}

/* Apply theme */
body[data-theme="dark"] {
  --bg: var(--bg-dark);
  --panel: var(--panel-dark);
  --panel2: var(--panel2-dark);
  --text: var(--text-dark);
  --muted: var(--muted-dark);
  --brand: var(--brand-dark);
}
body[data-theme="light"] {
  --bg: var(--bg-light);
  --panel: var(--panel-light);
  --panel2: var(--panel2-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --brand: var(--brand-light);
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text);
  font-family:system-ui,sans-serif; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
}

/* Header */
header {
  background:var(--panel);
  border-bottom:1px solid #ccc;
  padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
header .brand { font-weight:bold; font-size:1.1rem; }
header nav { display:flex; align-items:center; gap:16px; }
header nav a { color:var(--text); text-decoration:none; }
header nav a:hover { color:var(--brand); }
#theme-toggle {
  border:none; background:none; font-size:1.2rem; cursor:pointer;
}

/* Filters */
.filters {
  background:var(--panel); border-bottom:1px solid #ccc;
  padding:12px 16px; gap:10px;
}
.filters input { position:absolute; left:-9999px; }
.filters label {
  display:block; padding:8px 14px;
  border:1px solid #ccc; border-radius:999px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  cursor:pointer; font-size:0.95rem;
}
.filters input:checked + label {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.filters--wrap {
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(120px,1fr));
}

/* Student grid */
.container { padding:20px; flex:1; }
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px; list-style:none;
}
.card {
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid #ccc; border-radius:var(--radius);
}
.card a {
  display:block; padding:14px;
  color:inherit; text-decoration:none;
}
.card h3 { font-size:1.05rem; margin-bottom:6px; }
.card .muted { color:var(--muted); font-size:0.9rem; }

/* Filtering logic */
.card { display:block; }
body:has(#f-popular:checked) .card,
body:has(#f-a:checked) .card,
body:has(#f-b:checked) .card { display:none; }
body:has(#f-all:checked) .card { display:block; }
body:has(#f-popular:checked) .card[data-cat~="popular"] { display:block; }
body:has(#f-a:checked) .card[data-cat~="a"] { display:block; }
body:has(#f-b:checked) .card[data-cat~="b"] { display:block; }