*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;font-family:Arial,sans-serif}.video-container{display:flex;flex-direction:column;align-items:center;font-family:Poppins,sans-serif;gap:20px;padding:20px}.video-card{width:100%;max-width:300px;aspect-ratio:4 / 3;background:#1e1e1e;border-radius:14px;overflow:hidden;box-shadow:0 6px 20px #00000059}.face-video{width:100%;height:100%;object-fit:cover}.controls{text-align:center}.detect-text{font-size:1rem;margin-bottom:10px;color:#888}.detect-btn{padding:12px 28px;background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;border:none;border-radius:30px;font-size:1rem;font-weight:600;cursor:pointer;transition:.3s}.detect-btn:hover{transform:translateY(-2px);background:linear-gradient(135deg,#00f2fe,#4facfe);box-shadow:0 4px 12px #4facfe66}.mood-result{margin-top:15px;font-size:1rem;color:#333;font-weight:500}.mood-result span{color:#4facfe;font-weight:600}@media (max-width: 600px){.video-card{max-width:95%}.detect-btn{width:100%}}.container-app{height:100%;width:100%}.Mood-songs{width:100%;max-width:1100px;margin:30px auto;padding:20px;border-radius:14px;font-family:Poppins,sans-serif}.Mood-songs h1{font-size:1.5rem;margin-bottom:20px;text-align:center;color:#4facfe}.song{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-radius:12px;margin-bottom:18px;transition:.3s}.song:hover{background:#f6efef}.title h3{margin:0;font-size:1.1rem;font-weight:600}.title p{margin:2px 0 0;font-size:.9rem;opacity:.8}.play-pause-button i{font-size:1.6rem;cursor:pointer;background:#4facfe;color:#fff;padding:10px;border-radius:50%;transition:.3s}.play-pause-button i:hover{transform:scale(1.15);background:#00f2fe}.progress-bar{width:100%;height:6px;background:#ffffff40;border-radius:8px;margin:10px 0;cursor:pointer;overflow:hidden}.progress{height:100%;background:linear-gradient(90deg,#4facfe,#00f2fe);width:0%;border-radius:8px;transition:width .2s linear}.time-display{display:flex;justify-content:space-between;font-size:.9rem;opacity:.9;margin-bottom:15px}@media (max-width: 600px){.Mood-songs{max-width:95%;padding:15px}.song{flex-direction:column;align-items:flex-start;gap:10px}.play-pause-button{align-self:flex-end}}.no-song{display:flex;flex-direction:column;align-items:center;justify-content:center;height:80vh;text-align:center;padding:20px;background:linear-gradient(135deg,#f9f9f9,#f1f1f1)}.no-song-avatar{width:160px;height:160px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px #0000001a;margin-bottom:20px;animation:float 3s ease-in-out infinite}.no-song-avatar img{width:120px;height:120px;object-fit:contain}.no-song h2{font-size:28px;font-weight:700;color:#333;margin-bottom:10px}.no-song p{font-size:16px;color:#555;margin-bottom:20px}.add-btn{background:#4a90e2;color:#fff;border:none;padding:12px 24px;border-radius:30px;cursor:pointer;font-size:16px;transition:.3s ease;box-shadow:0 4px 12px #4a90e24d}.add-btn:hover{background:#357ab7;transform:translateY(-2px)}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}