* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI','Courier New',monospace;
  background: linear-gradient(135deg,#0a0a2a 0%,#0f0f3a 25%,#1a1a4a 50%,#0f0f3a 75%,#0a0a2a 100%);
  color:#e0e0ff; line-height:1.6; min-height:100vh;
}
.container { max-width:1100px; margin:0 auto; padding:20px; position:relative; z-index:1; }
.header {
  text-align:center; padding:40px 20px; background:rgba(10,10,42,0.7);
  border-radius:20px; margin-bottom:30px; border:1px solid rgba(0,255,255,0.2);
}
.header h1 {
  font-size:2.4em; background:linear-gradient(135deg,#00ffff,#ff00ff,#ffff00);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.subtitle { color:#88aaff; margin-top:8px; }
.badge {
  display:inline-block; padding:3px 10px; border-radius:15px; font-size:0.75em;
  margin:4px; background:rgba(0,255,255,0.25); color:#00ffff; border:1px solid #00ffff;
}
.nav {
  background:rgba(0,0,0,0.5); border-radius:15px; padding:12px; margin-bottom:24px;
  border:1px solid rgba(0,255,255,0.3); display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.nav a { color:#88aaff; text-decoration:none; padding:6px 12px; border-radius:8px; }
.nav a:hover { background:rgba(0,255,255,0.2); color:#00ffff; }
.card {
  background:rgba(20,20,60,0.6); border-radius:16px; padding:22px; margin-bottom:22px;
  border:1px solid rgba(0,255,255,0.2);
}
.card h2 { color:#00ffff; font-size:1.4em; margin-bottom:12px; border-left:4px solid #ff00ff; padding-left:12px; }
.card h3 { color:#ffaa00; margin:16px 0 8px; }
.card ul { margin-left:22px; }
.card a { color:#66eeff; }
.meta { color:#aab; font-size:0.9em; }
.footer { text-align:center; color:#667; padding:20px; font-size:0.85em; }
.class-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; }
.class-grid a {
  background:rgba(0,0,0,0.35); padding:8px 10px; border-radius:8px; color:#88eeff;
  text-decoration:none; border:1px solid rgba(0,255,255,0.15);
}
.class-grid a:hover { border-color:#00ffff; color:#00ffff; }