body { background: #050505; color: #fff; margin: 0; padding-top: 80px; font-family: sans-serif; }
nav { position: fixed; top: 0; width: 100%; display: flex; justify-content: center; padding: 10px 2px; background: #000; border-bottom: 2px solid #00d4ff; z-index: 1000; flex-wrap: wrap; }
.nav-btn { background: none; border: 1px solid #00d4ff; color: #00d4ff; padding: 8px 10px; margin: 2px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; text-transform: uppercase; flex: 1; min-width: 60px; }
.page { padding: 20px; text-align: center; }
.shorts-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; justify-items: center; }
.video-card { background: #111; padding: 15px; border-radius: 12px; width: 100%; max-width: 315px; }
iframe { width: 100%; height: 500px; border-radius: 8px; }
.logo { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #00d4ff; margin: 20px auto; display: block; object-fit: cover; }
.theme-text { color: #00d4ff; text-transform: uppercase; }
.star-rating { display: flex; justify-content: center; gap: 5px; font-size: 30px; color: #333; cursor: pointer; margin: 15px 0; }
.star-rating span:hover, .star-rating span:hover ~ span { color: #00d4ff; }
.neon-input { width: 85%; height: 100px; background: #000; border: 1px solid #00d4ff; color: #00d4ff; padding: 12px; border-radius: 10px; box-shadow: 0 0 5px #00d4ff; outline: none; margin-bottom: 10px; }
.neon-btn { background: #000; border: 1px solid #00d4ff; color: #00d4ff; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 20px; box-shadow: 0 0 5px #00d4ff; }
.neon-btn:hover { background: #00d4ff; color: #000; }
.reactions button { background: #1a1a1a; border: 1px solid #333; color: #fff; padding: 10px; border-radius: 5px; cursor: pointer; transition: 0.3s; }
.reactions button.active { background: #00d4ff; color: #000; border-color: #00d4ff; box-shadow: 0 0 10px #00d4ff; }