@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');body {font-family:'Inter',system-ui,sans-serif;scroll-behavior:smooth;background:linear-gradient(135deg,#f0f4ff 0%,#e6e6ff 100%);color:#1F2937} .dark body {background:linear-gradient(135deg,#0D1117 0%,#1F2937 100%);color:#F3F4F6} .light-theme-dark-bg body {color:#ffffff} .light-theme-dark-bg .text-neutral-600,.light-theme-dark-bg .text-neutral-500,.light-theme-dark-bg .text-neutral-400,.light-theme-dark-bg .text-neutral-300,.light-theme-dark-bg .text-neutral-800 {color:rgba(255,255,255,0.9) !important} .light-theme-dark-bg .search-icon,.light-theme-dark-bg .dark\:text-neutral-400,.light-theme-dark-bg .dark\:text-neutral-300 {color:rgba(255,255,255,0.8) !important} .light-theme-dark-bg .hot-cities-title,.light-theme-dark-bg .forecast-title {color:rgba(255,255,255,0.7) !important} .background-container {position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;overflow:hidden} .background-image {width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s ease-in-out} .dark .background-image {filter:brightness(0.5) contrast(1.1)} .background-image.loaded {opacity:1} ::-webkit-scrollbar {width:8px;height:8px} ::-webkit-scrollbar-track {background:transparent} ::-webkit-scrollbar-thumb {background-color:rgba(156,163,175,0.5);border-radius:4px} .dark ::-webkit-scrollbar-thumb {background-color:rgba(75,85,99,0.7)} ::-webkit-scrollbar-thumb:hover {background-color:rgba(156,163,175,0.8)} .dark ::-webkit-scrollbar-thumb:hover {background-color:rgba(75,85,99,0.9)} .website-card {transition:all 0.3s ease} .website-card:hover {transform:translateY(-5px)} .suggestion-enter {opacity:0;transform:translateY(-10px)} .suggestion-enter-active {opacity:1;transform:translateY(0);transition:opacity 300ms,transform 300ms} .suggestion-item {transition:all 0.2s ease} .suggestion-item:hover {background-color:rgba(255,255,255,0.3)} .dark .suggestion-item:hover {background-color:rgba(79,70,229,0.15)} .search-icon {color:#9CA3AF} .dark .search-icon {color:#9CA3AF} .loading-dots {display:inline-flex} .loading-dots span {width:6px;height:6px;margin:0 2px;background-color:currentColor;border-radius:50%;animation:loading-dots 1.4s infinite ease-in-out both} .loading-dots span:nth-child(1) {animation-delay:-0.32s} .loading-dots span:nth-child(2) {animation-delay:-0.16s} @keyframes loading-dots {0%,80%,100% {transform:scale(0)} 40% {transform:scale(1)}} .weather-selector {position:relative} .weather-dropdown {position:absolute;top:100%;right:0;min-width:300px;background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.18);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.1);z-index:50;margin-top:8px;overflow:hidden} .dark .weather-dropdown {background:rgba(17,24,39,0.7);border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.4)} .light-theme-dark-bg .weather-dropdown,.light-theme-dark-bg .more-dropdown,.light-theme-dark-bg .history-dropdown {background:rgba(0,0,0,0.4);border:1px solid rgba(255,255,255,0.1)} .city-option {padding:8px 12px;cursor:pointer;transition:all 0.2s;border-radius:6px} .city-option:hover {background-color:rgba(255,255,255,0.3)} .dark .city-option:hover {background-color:rgba(79,70,229,0.15)} .hot-cities {padding:8px 0} .hot-cities-title {padding:4px 12px;font-size:12px;color:#6b7280} .dark .hot-cities-title {color:#9ca3af} .city-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:0 8px} .weather-forecast {padding:12px} .forecast-title {font-size:14px;color:#6b7280;margin-bottom:8px;padding-left:4px} .dark .forecast-title {color:#9ca3af} .forecast-days {display:flex;justify-content:space-between;margin-top:12px} .forecast-day {flex:1;text-align:center;padding:8px 4px} .forecast-date {font-size:13px;margin-bottom:6px} .forecast-icon {font-size:20px;margin-bottom:6px} .forecast-temp {font-size:13px} .current-weather-details {padding:12px;border-bottom:1px solid rgba(229,231,235,0.5)} .dark .current-weather-details {border-color:rgba(55,65,81,0.7)} .current-weather-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:12px} .current-city-container {display:flex;align-items:center;gap:8px} .current-city {font-weight:600;font-size:16px} .current-temp {font-size:28px;font-weight:500} .current-condition {text-align:right;margin-bottom:8px} .more-menu-container {position:relative} .more-dropdown {position:absolute;top:100%;right:0;min-width:160px;background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.18);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.1);z-index:50;margin-top:8px;overflow:hidden} .dark .more-dropdown {background:rgba(17,24,39,0.7);border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.4)} .more-link {display:block;padding:8px 16px;color:inherit;text-decoration:none;transition:background-color 0.2s} .more-link:hover {background-color:rgba(255,255,255,0.3)} .dark .more-link:hover {background-color:rgba(79,70,229,0.15)} .history-menu-container {position:relative} .history-dropdown {position:absolute;top:100%;right:0;min-width:300px;max-width:500px;max-height:400px;overflow-y:auto;background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.18);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.1);z-index:50;margin-top:8px;overflow:hidden} .dark .history-dropdown {background:rgba(17,24,39,0.7);border:1px solid rgba(255,255,255,0.08);box-shadow:0 8px 32px rgba(0,0,0,0.4)} .history-header {padding:12px 16px;border-bottom:1px solid rgba(229,231,235,0.5);display:flex;justify-content:space-between;align-items:center} .dark .history-header {border-color:rgba(55,65,81,0.7)} .history-title {font-weight:500;font-size:15px} .clear-history {font-size:13px;color:#4F46E5;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color 0.2s} .clear-history:hover {background-color:rgba(255,255,255,0.3)} .dark .clear-history:hover {background-color:rgba(79,70,229,0.15)} .history-list {padding:8px 0} .history-item {padding:8px 16px;display:flex;align-items:center;cursor:pointer;transition:background-color 0.2s} .history-item:hover {background-color:rgba(255,255,255,0.3)} .dark .history-item:hover {background-color:rgba(79,70,229,0.15)} .history-item i {margin-right:10px;color:#9CA3AF} .history-item .remove-history {margin-left:auto;color:#9CA3AF;opacity:0;transition:all 0.2s} .history-item:hover .remove-history {opacity:1} .no-history {padding:20px 16px;text-align:center;color:#6b7280;font-size:14px} .dark .no-history {color:#9ca3af} .iconfont {font-size:inherit;display:inline-block;font-style:normal;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} .status-info {position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:10px 20px;background:rgba(0,0,0,0.7);color:white;border-radius:8px;font-size:14px;z-index:100;display:none} .status-info.error {background:rgba(220,38,38,0.8)} #use-location {cursor:pointer;color:#4F46E5;transition:all 0.2s} #use-location:hover {color:#6366F1;transform:scale(1.1)} footer {position:fixed;bottom:0;left:0;right:0;z-index:40;padding:8px 0;background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid rgba(255,255,255,0.18)} .light-theme-dark-bg footer {background:rgba(0,0,0,0.3);border-top:1px solid rgba(255,255,255,0.1)} .dark footer {background:rgba(17,24,39,0.6);border-top:1px solid rgba(255,255,255,0.08)} main {padding-bottom:60px} #search-input:focus {box-shadow:0 0 0 2px #4F46E5} .dark #search-input:focus {box-shadow:0 0 0 2px #4F46E5} .light-theme-dark-bg #search-input {background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.2);color:white} .light-theme-dark-bg #search-input::placeholder {color:rgba(255,255,255,0.7)} #search-btn:hover {background-color:#6366F1;transform:translateY(-1px)} .dark .website-card {border:1px solid rgba(255,255,255,0.05)} .dark .website-card:hover {border-color:rgba(79,70,229,0.3)} .light-theme-dark-bg .website-card {background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15)} .search-engine-btn.active {background-color:rgba(255,255,255,0.5);color:#4F46E5} .dark .search-engine-btn.active {background-color:rgba(79,70,229,0.2);color:#4F46E5} .light-theme-dark-bg .search-engine-btn {color:rgba(255,255,255,0.8)} .light-theme-dark-bg .search-engine-btn.active {background-color:rgba(255,255,255,0.2);color:#4F46E5} .dark .text-neutral-600 {color:#9CA3AF !important} .dark .text-neutral-500 {color:#9CA3AF !important} .dark .text-neutral-800 {color:#F3F4F6 !important} .dark .quick-search-btn {color:#F3F4F6 !important}