*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#2d3748;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="20" cy="80" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');pointer-events:none;z-index:-1}#app{max-width:900px;margin:0 auto;padding:40px 20px;position:relative;z-index:1}.header{text-align:center;margin-bottom:50px;color:#fff}.header h1{font-size:3rem;font-weight:700;margin-bottom:12px;text-shadow:0 4px 20px rgba(0,0,0,.3);background:linear-gradient(45deg,#fff,#e2e8f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{font-size:1.2rem;opacity:.9;text-shadow:0 2px 10px rgba(0,0,0,.2)}.feature-highlights{display:flex;justify-content:center;gap:30px;margin-top:30px;flex-wrap:wrap}.feature-item{display:flex;flex-direction:column;align-items:center;gap:8px;color:#fff;opacity:.9;transition:all .3s ease;padding:15px;border-radius:12px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}.feature-item:hover{opacity:1;transform:translateY(-3px);background:#ffffff26}.feature-item i{font-size:1.5rem;margin-bottom:5px}.feature-item span{font-size:.9rem;font-weight:500;text-align:center}.search-container{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:35px;border-radius:20px;box-shadow:0 20px 40px #0000001a,0 0 0 1px #fff3;margin-bottom:40px;border:1px solid rgba(255,255,255,.3)}.quick-cities{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:25px;border-radius:20px;box-shadow:0 20px 40px #0000001a,0 0 0 1px #fff3;margin-bottom:40px;border:1px solid rgba(255,255,255,.3);text-align:center}.quick-cities h3{color:#2d3748;font-size:1.3rem;font-weight:600;margin-bottom:20px}.city-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.city-btn{padding:10px 20px;background:linear-gradient(135deg,#f7fafc,#edf2f7);color:#4a5568;border:2px solid #e2e8f0;border-radius:25px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.city-btn:hover{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea;transform:translateY(-2px);box-shadow:0 8px 20px #667eea4d}.city-btn:active{transform:translateY(0)}.search-box{display:flex;gap:15px;margin-bottom:20px}.city-input{flex:1;padding:16px 20px;border:2px solid #e2e8f0;border-radius:12px;font-size:1.1rem;transition:all .3s ease;background:#fff;box-shadow:0 4px 6px #0000000d}.city-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a,0 4px 12px #0000001a;transform:translateY(-1px)}.search-btn{padding:16px 32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #667eea66;position:relative;overflow:hidden}.search-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.search-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea80}.search-btn:hover:before{left:100%}.search-btn:active{transform:translateY(0)}.error-message{background:linear-gradient(135deg,#fed7d7,#feb2b2);color:#742a2a;padding:16px 20px;border-radius:12px;border:1px solid #fca5a5;box-shadow:0 4px 12px #f8717133}.loading-spinner{text-align:center;padding:50px;color:#fff}.loading-spinner i{font-size:2.5rem;margin-bottom:16px;animation:spin 1s linear infinite;color:#fbbf24;filter:drop-shadow(0 4px 8px rgba(251,191,36,.3))}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.results-container{display:grid;gap:40px}.weather-section h2,.news-section h2{color:#fff;font-size:1.8rem;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:12px;text-shadow:0 2px 10px rgba(0,0,0,.3)}.weather-card{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:40px;box-shadow:0 25px 50px #00000026,0 0 0 1px #fff3;border:1px solid rgba(255,255,255,.3);position:relative;overflow:hidden}.weather-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb,#f5576c);background-size:300% 100%;animation:gradientShift 3s ease infinite}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.weather-main{display:flex;align-items:center;gap:40px;margin-bottom:35px}.weather-icon{font-size:5rem;background:linear-gradient(135deg,#fbbf24,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 4px 8px rgba(251,191,36,.3))}.weather-info h3{font-size:2.2rem;font-weight:700;margin-bottom:8px;color:#1a202c}.weather-info p{color:#4a5568;font-size:1.2rem;margin-bottom:16px;text-transform:capitalize;font-weight:500}.temperature{font-size:4rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 2px 4px rgba(102,126,234,.3))}.weather-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:25px;padding-top:25px;border-top:2px solid #e2e8f0}.detail-item{display:flex;align-items:center;gap:12px;color:#2d3748;font-weight:500;padding:15px;background:linear-gradient(135deg,#f7fafc,#edf2f7);border-radius:12px;transition:transform .2s ease}.detail-item:hover{transform:translateY(-2px)}.detail-item i{color:#667eea;width:24px;font-size:1.2rem}.music-container{display:grid;gap:25px}.music-article{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:30px;box-shadow:0 20px 40px #0000001a,0 0 0 1px #fff3;border:1px solid rgba(255,255,255,.3);transition:all .3s ease;position:relative;overflow:hidden}.music-article:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#f093fb,#f5576c,#4facfe,#00f2fe);transform:scaleX(0);transition:transform .3s ease}.music-article:hover{transform:translateY(-5px);box-shadow:0 30px 60px #00000026,0 0 0 1px #ffffff4d}.music-article:hover:before{transform:scaleX(1)}.music-article h3{font-size:1.3rem;font-weight:700;margin-bottom:12px;color:#1a202c;line-height:1.4}.music-article h3 a{color:inherit;text-decoration:none;transition:color .3s ease}.music-article h3 a:hover{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.music-article p{color:#4a5568;line-height:1.7;margin-bottom:20px;font-size:1rem}.music-meta{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:#718096;border-top:2px solid #e2e8f7;padding-top:20px}.music-meta .project-info{margin-top:50px}.music-meta .info-card{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:24px;padding:40px;box-shadow:0 25px 50px #00000026,0 0 0 1px #fff3;border:1px solid rgba(255,255,255,.3);position:relative;overflow:hidden}.music-meta .info-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb,#f5576c);background-size:300% 100%;animation:gradientShift 3s ease infinite}.music-meta .info-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.music-meta .info-header i{color:#667eea;font-size:1.5rem}.music-meta .info-header h3{color:#1a202c;font-size:1.8rem;font-weight:700;margin:0}.music-meta .info-card p{color:#2d3748;line-height:1.7;margin-bottom:30px;font-size:1.1rem}.music-meta .tech-stack,.music-meta .api-info{margin-bottom:30px}.music-meta .tech-stack h4,.music-meta .api-info h4{color:#1a202c;font-size:1.2rem;font-weight:600;margin-bottom:15px;display:flex;align-items:center;gap:8px}.music-meta .tech-badges{display:flex;flex-wrap:wrap;gap:10px}.music-meta .tech-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:500;box-shadow:0 4px 12px #667eea4d}.music-meta .api-sources{display:grid;gap:15px}.music-meta .api-source{display:flex;align-items:center;gap:15px;padding:15px;background:linear-gradient(135deg,#f7fafc,#edf2f7);border-radius:12px;border:2px solid #e2e8f0;transition:all .3s ease}.music-meta .api-source:hover{border-color:#667eea;transform:translateY(-2px);box-shadow:0 8px 20px #667eea1a}.music-meta .api-source i{color:#667eea;font-size:1.5rem;width:30px;text-align:center}.music-meta .api-source div{display:flex;flex-direction:column;gap:4px}.music-meta .api-source strong{color:#1a202c;font-weight:600;font-size:1rem}.music-meta .api-source span{color:#4a5568;font-size:.9rem}.music-meta .footer{margin-top:60px;padding:30px 0;border-top:2px solid rgba(255,255,255,.2)}.music-meta .footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;color:#fff}.music-meta .footer-content p{margin:0;opacity:.9;font-size:.95rem}.music-meta .footer-links{display:flex;gap:20px}.music-meta .footer-link{color:#fff;text-decoration:none;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:all .3s ease;font-size:.9rem;font-weight:500}.music-meta .footer-link:hover{background:#fff3;transform:translateY(-2px)}.music-genre{font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hidden{display:none!important}@media (max-width: 768px){#app{padding:20px 16px}.header h1{font-size:2.5rem}.search-container{padding:25px}.search-box{flex-direction:column}.weather-main{flex-direction:column;text-align:center;gap:25px}.weather-details{grid-template-columns:1fr}.temperature{font-size:3.5rem}.weather-icon{font-size:4rem}.music-article{padding:25px}.weather-card{padding:30px}.feature-highlights{gap:15px}.city-buttons{gap:8px}.city-btn{padding:8px 16px;font-size:.85rem}.info-card{padding:30px}.footer-content{flex-direction:column;text-align:center}}@media (max-width: 480px){.header h1{font-size:2rem}.search-container{padding:20px}.weather-card{padding:25px}.temperature{font-size:3rem}.weather-icon{font-size:3.5rem}.feature-highlights{gap:10px}.feature-item{padding:10px}.city-buttons{gap:6px}.city-btn{padding:6px 12px;font-size:.8rem}.info-card{padding:25px}.tech-badges{gap:6px}.tech-badge{padding:4px 10px;font-size:.8rem}}