:root { --bg-dark: #0b1d16; --accent-green: #52b788; --accent-blue: #0077b6; --text-light: #e0e0e0; }
body { background: var(--bg-dark); color: var(--text-light); font-family: sans-serif; margin: 0; }
nav { background: rgba(0,0,0,0.8); padding: 15px 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; }
.logo { color: var(--accent-green); font-weight: bold; font-size: 1.5rem; }
.nav-links a { color: white; text-decoration: none; margin-left: 20px; }
.menu-icon { display: none; cursor: pointer; color: var(--accent-green); font-size: 1.5rem; }
@media (max-width: 768px) { .nav-links { display: none; } .menu-icon { display: block; } }
.sidebar { height: 100%; width: 0; position: fixed; z-index: 2000; top: 0; left: 0; background: var(--bg-dark); overflow-x: hidden; transition: 0.5s; padding-top: 60px; border-right: 1px solid var(--accent-green); }
.sidebar a { padding: 15px 30px; text-decoration: none; font-size: 1.2rem; color: white; display: block; }
.sidebar .closebtn { position: absolute; top: 10px; right: 25px; font-size: 36px; }
.container { max-width: 800px; margin: 20px auto; padding: 20px; }
.glass-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 20px; border-radius: 15px; margin-bottom: 20px; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 30px; }
.category-card { position: relative; padding: 40px 20px; border-radius: 20px; text-align: center; cursor: pointer; transition: all 0.4s; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(10px); overflow: hidden; }
.card-mdcat { border: 2px solid #52b788; }
.card-mdcat h3 { color: #52b788; }
.card-mdcat:hover { background: rgba(82, 183, 136, 0.15); transform: translateY(-5px); }
.card-afns { border: 2px solid #00b4d8; }
.card-afns h3 { color: #00b4d8; }
.card-afns:hover { background: rgba(0, 180, 216, 0.15); transform: translateY(-5px); }
.primary-btn { background: var(--accent-green); color: var(--bg-dark); padding: 12px; border: none; border-radius: 8px; font-weight: bold; width: 100%; cursor: pointer; margin-top: 10px; }
.pass-field { width: 100%; padding: 12px; margin: 10px 0; background: rgba(255,255,255,0.1); border: 1px solid var(--accent-green); color: white; border-radius: 8px; box-sizing: border-box; }
.main-marquee { background: var(--accent-green); color: black; font-weight: bold; padding: 10px 0; }
.option-label { display: block; background: rgba(255,255,255,0.05); padding: 15px; margin: 10px 0; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255,255,255,0.1); }
.yt-btn { display: inline-flex; background: #ff0000; color: white !important; padding: 12px 25px; border-radius: 50px; text-decoration: none; font-weight: bold; }