* {margin:0; padding:0; box-sizing:border-box;}
        body {
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background:#141414; color:#e0e0e0; overflow-x:hidden;
        }
        ::-webkit-scrollbar {width:8px;}
        ::-webkit-scrollbar-track {background:#1a1a1a;}
        ::-webkit-scrollbar-thumb {background:#e50914; border-radius:4px;}
        ::-webkit-scrollbar-thumb:hover {background:#ff0000;}
        header {
            background: linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%);
            padding:1rem 2rem; box-shadow:0 8px 32px rgba(0,0,0,0.5);
            position:sticky; top:0; z-index:1000;
            border-bottom:1px solid rgba(229,9,20,0.2);
        }
        .header-container {max-width:1400px; margin:0 auto; display:flex; justify-content:space-between; align-items:center;}
        .logo {
            font-size:1.8rem; font-weight:700; color:#e50914; letter-spacing:2px;
            text-shadow:0 4px 8px rgba(229,9,20,0.3);
        }
        nav {display:flex; gap:1rem;}
        nav button {
            background:transparent; border:2px solid transparent; color:#e0e0e0;
            padding:0.7rem 1.5rem; font-size:0.95rem; cursor:pointer; border-radius:4px;
            transition:all 0.3s ease; font-weight:500;
        }
        nav button:hover, nav button.active {
            background:#e50914; color:white; border-color:#e50914; transform:scale(1.05);
        }
        .main-container {max-width:1400px; margin:0 auto; padding:2rem; min-height:calc(100vh - 100px);}
        .section {display:none; animation:fadeIn 0.5s ease;}
        .section.active {display:block;}
        @keyframes fadeIn {from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
        .loading-spinner {display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2000;}
        .loading-spinner.active {display:block;}
        .spinner {border:4px solid rgba(229,9,20,0.2); border-radius:50%; border-top:4px solid #e50914; width:50px; height:50px; animation:spin 1s linear infinite;}
        @keyframes spin {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
        .spinner-background {position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); display:none; z-index:1999;}
        .spinner-background.active {display:block;}
        .search-container {display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; align-items:center;}
        .search-input {
            flex:1; min-width:200px; padding:0.8rem 1.2rem; background:#2d2d2d;
            border:2px solid #404040; color:#e0e0e0; border-radius:8px; font-size:1rem; transition:all 0.3s ease;
        }
        .search-input:focus {outline:none; border-color:#e50914; background:#1a1a1a; box-shadow:0 0 20px rgba(229,9,20,0.2);}
        .search-input::placeholder {color:#808080;}
        .search-btn {padding:0.8rem 2rem; background:#e50914; color:white; border:none; border-radius:8px; font-size:1rem; cursor:pointer; font-weight:600; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(229,9,20,0.3);}
        .search-btn:hover {background:#ff0000; transform:scale(1.05); box-shadow:0 6px 20px rgba(229,9,20,0.5);}
        .search-btn:active {transform:scale(0.98);}
        .filters-container {display:flex; gap:1rem; margin-bottom:2rem; flex-wrap:wrap;}
        .filter-group {display:flex; gap:0.5rem; flex-wrap:wrap;}
        .filter-btn {padding:0.6rem 1.2rem; background:#2d2d2d; color:#e0e0e0; border:2px solid #404040; border-radius:20px; cursor:pointer; font-size:0.9rem; transition:all 0.3s ease;}
        .filter-btn:hover {border-color:#e50914; color:#e50914;}
        .filter-btn.active {background:#e50914; color:white; border-color:#e50914;}
        .cards-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:2rem; margin-bottom:2rem;}
        @media (max-width:768px) {.cards-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem;} }
        @media (max-width:480px) {.cards-grid{grid-template-columns:1fr;} }
        .weather-card {
            background:linear-gradient(135deg,#2d2d2d 0%,#1f1f1f 100%);
            border-radius:8px; padding:1.5rem; cursor:pointer; transition:all 0.3s ease; border:1px solid rgba(229,9,20,0.1); box-shadow:0 4px 15px rgba(0,0,0,0.3); position:relative; overflow:hidden;
        }
        .weather-card::before {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(229,9,20,0.1),transparent); transition:left 0.5s ease;}
        .weather-card:hover::before {left:100%;}
        .weather-card:hover {transform:scale(1.05) translateY(-10px); box-shadow:0 12px 30px rgba(229,9,20,0.3); border-color:rgba(229,9,20,0.3);}
        .card-header {display:flex; justify-content:space-between; align-items:start; margin-bottom:1rem;}
        .card-city-info h3 {font-size:1.3rem; margin-bottom:0.3rem; color:#e50914;}
        .card-city-info p {font-size:0.85rem; color:#888;}
        .weather-icon {width:80px; height:80px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));}
        .card-main-temp {font-size:3rem; font-weight:700; color:#e50914; margin-bottom:0.5rem; line-height:1;}
        .card-description {font-size:1rem; color:#b0b0b0; text-transform:capitalize; margin-bottom:1rem;}
        .card-details {display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding-top:1rem; border-top:1px solid rgba(229,9,20,0.1);}
        .detail-item {display:flex; flex-direction:column;}
        .detail-label {font-size:0.75rem; color:#888; text-transform:uppercase; margin-bottom:0.3rem;}
        .detail-value {font-size:1.1rem; color:#e0e0e0; font-weight:600;}
        .favorite-btn {position:absolute; top:1rem; right:1rem; background:rgba(229,9,20,0.2); border:2px solid #e50914; color:#e50914; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1.3rem; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease;}
        .favorite-btn:hover {background:#e50914; color:white; transform:scale(1.1);}
        .favorite-btn.favorited {background:#e50914; color:white;}
        .modal {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:2000; overflow-y:auto; align-items:center; justify-content:center; padding:2rem;}
        .modal.active {display:flex;}
        .modal-content {background:linear-gradient(135deg,#2d2d2d 0%,#1f1f1f 100%); border-radius:12px; padding:2rem; max-width:600px; width:100%; max-height:90vh; overflow-y:auto; border:1px solid rgba(229,9,20,0.2); box-shadow:0 20px 60px rgba(0,0,0,0.5); animation:slideUp 0.3s ease;}
        @keyframes slideUp {from{transform:translateY(50px);opacity:0;}to{transform:translateY(0);opacity:1;}}
        .modal-header {display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; border-bottom:2px solid rgba(229,9,20,0.2); padding-bottom:1rem;}
        .modal-header h2 {color:#e50914; font-size:1.8rem;}
        .close-btn {background:transparent; border:none; color:#e0e0e0; font-size:2rem; cursor:pointer; transition:all 0.3s ease;}
        .close-btn:hover {color:#e50914; transform:rotate(90deg);}
        .modal-section {margin-bottom:2rem;}
        .modal-section-title {color:#e50914; font-size:1.2rem; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;}
        .forecast-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:1rem;}
        .forecast-item {background:rgba(229,9,20,0.05); border:1px solid rgba(229,9,20,0.1); padding:1rem; border-radius:8px; text-align:center; transition:all 0.3s ease;}
        .forecast-item:hover {background:rgba(229,9,20,0.15); border-color:#e50914;}
        .forecast-time {font-size:0.8rem; color:#888; margin-bottom:0.5rem;}
        .forecast-icon {width:50px; height:50px; object-fit:contain; margin:0 auto 0.5rem;}
        .forecast-temp {font-size:1rem; color:#e50914; font-weight:600;}
        .pagination {display:flex; justify-content:center; gap:1rem; margin-top:2rem; flex-wrap:wrap;}
        .pagination button {padding:0.8rem 1.5rem; background:#2d2d2d; color:#e0e0e0; border:2px solid #404040; border-radius:4px; cursor:pointer; transition:all 0.3s ease; font-weight:600;}
        .pagination button:hover:not(:disabled) {background:#e50914; border-color:#e50914; color:white; transform:scale(1.05);}
        .pagination button:disabled {opacity:0.5; cursor:not-allowed;}
        .pagination .page-info {display:flex; align-items:center; color:#888; padding:0 1rem;}
        .message {padding:1.5rem; border-radius:8px; margin-bottom:2rem; display:none; animation:slideDown 0.3s ease;}
        .message.active {display:block;}
        @keyframes slideDown {from{transform:translateY(-20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
        .message.error {background:rgba(220,20,60,0.2); color:#ff6b6b; border-left:4px solid #dc143c;}
        .message.success {background:rgba(34,139,34,0.2); color:#5dde5d; border-left:4px solid #228b22;}
        .message.info {background:rgba(30,144,255,0.2); color:#87ceeb; border-left:4px solid #1e90ff;}
        .empty-state {text-align:center; padding:4rem 2rem; color:#888;}
        .empty-state-icon {font-size:4rem; margin-bottom:1rem;}
        .empty-state h3 {color:#e0e0e0; margin-bottom:0.5rem;}
        @media (max-width:768px) {
            .header-container {flex-direction:column; gap:1rem;}
            nav {width:100%; justify-content:center;}
            nav button {font-size:0.85rem; padding:0.6rem 1rem;}
            .main-container {padding:1rem;}
            .search-container {flex-direction:column;}
            .search-input {min-width:100%;}
            .cards-grid {gap:1rem;}
            .modal-content {padding:1.5rem;}
            .modal {padding:1rem;}
        }