* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #1a1a2e; color: #fff; font-family: 'Segoe UI', sans-serif; }
.container { max-width: 1300px; margin: 0 auto; padding: 20px; }
.player-wrapper { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 8px; overflow: hidden; margin-bottom: 20px; }
#artplayer { width: 100%; height: 100%; }
.control-panel { background: linear-gradient(135deg, #16213e, #0f3460); border-radius: 8px; padding: 20px; }
.video-input-group { display: flex; gap: 10px; margin-bottom: 15px; }
#videoUrl { flex: 1; padding: 12px 16px; background: #1a1a2e; border: 2px solid #2a2a4a; border-radius: 6px; color: #fff; font-size: 14px; outline: none; }
#videoUrl:focus { border-color: #ff6b35; }
.btn-primary { padding: 12px 24px; background: #ff6b35; border: none; border-radius: 6px; color: #fff; font-weight: bold; cursor: pointer; transition: .2s; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255,107,53,0.4); }
.quick-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quick-links span { color: #aaa; font-size: 13px; }
.quick-links a { color: #ff8c42; text-decoration: none; padding: 4px 12px; background: rgba(255,107,53,0.1); border-radius: 4px; }
.quick-links a:hover { background: rgba(255,107,53,0.2); }
@media (max-width: 768px) { .video-input-group { flex-direction: column; } }