* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			font-family: 'Poppins', sans-serif;
			background: linear-gradient(180deg, #1a2332 0%, #2d3e50 100%);
			color: #fff;
			min-height: 100vh;
			overflow-x: hidden;
			position: relative;
			transition: background 1s ease;
		}

		/* Dynamic Background Overlay */
		body::before {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 1;
			z-index: -1;
			transition: opacity 1s ease;
		}

		/* Dark overlay for better text readability */
		body::after {
			content: "";
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.4);
			z-index: -1;
			transition: background 1s ease;
		}

		/* Time-based backgrounds */
		body.sunrise::before {
			background-image: url('../../img/sunrise.jpg');
			opacity: 1;
		}

		body.day::before {
			background-image: url('../../img/url2.jpg');
			opacity: 1;
		}

		body.sunset::before {
			background-image: url('../../img/sunset.jpg');
			opacity: 1;
		}

		body.night::before {
			background-image: url('../../img/night.jpg');
			opacity: 1;
		}

		.weather-atmosphere {
			position: fixed;
			inset: 0;
			z-index: -1;
			pointer-events: none;
			overflow: hidden;
		}

		.atmosphere-layer {
			position: absolute;
			inset: 0;
			opacity: 0;
			will-change: opacity;
		}

		.atmosphere-flash {
			background:
				radial-gradient(circle at 48% 20%, rgba(255, 255, 255, 0.72), transparent 34%),
				linear-gradient(180deg, rgba(255,255,255,0.16), transparent 48%);
		}

		body.weather-thunderstorm .atmosphere-flash {
			opacity: 0;
			animation: lightningFlash 7.5s steps(1, end) infinite;
		}

		body.weather-thunderstorm::after {
			background: rgba(0, 0, 0, 0.52);
		}

		@keyframes lightningFlash {
			0%, 88%, 100% { opacity: 0; }
			89% { opacity: 0.55; }
			90% { opacity: 0; }
			91% { opacity: 0.34; }
			92% { opacity: 0; }
		}

		@media (prefers-reduced-motion: reduce) {
			.atmosphere-layer {
				animation: none !important;
			}
		}

		/* Header */
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40px 20px 25px 20px;
			position: relative;
			z-index: 100;
			margin-bottom: 10px;
		}

		.header-location {
			font-size: 14px;
			color: rgba(255,255,255,0.9);
			text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6);
		}

		/* Hamburger Menu Button */
		.menu-btn {
			background: rgba(255,255,255,0.2);
			border: 2px solid rgba(255,255,255,0.2);
			display: flex;
			flex-direction: column;
			width: 44px;
			height: 44px;
			border-radius: 12px;
			position: relative;
			z-index: 1100;
			align-items: center;
			justify-content: center;
			gap: 5px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.menu-btn:hover {
			background: rgba(255,255,255,0.25);
			transform: scale(1.05);
		}

		.menu-btn span {
			width: 22px;
			height: 2px;
			display: block;
			background: white;
			border-radius: 2px;
			transition: all 0.3s ease;
		}

		.menu-btn.active span:nth-child(1) {
			transform: rotate(45deg) translate(7px, 7px);
		}

		.menu-btn.active span:nth-child(2) {
			opacity: 0;
		}

		.menu-btn.active span:nth-child(3) {
			transform: rotate(-45deg) translate(7px, -7px);
		}

		/* Slide Menu */
		.slide-menu {
			position: fixed;
			top: 0;
			left: -100%;
			width: 280px;
			height: 100vh;
			background: linear-gradient(180deg, rgba(26, 35, 50, 0.98) 0%, rgba(45, 62, 80, 0.98) 100%);
			box-shadow: 4px 0 20px rgba(0,0,0,0.5);
			z-index: 999;
			transition: left 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			overflow-y: auto;
		}

		.slide-menu.active {
			left: 0;
		}

		.menu-overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.4);
			opacity: 0;
			visibility: hidden;
			transition: all 0.3s ease;
			z-index: 998;
		}

		.menu-overlay.active {
			opacity: 1;
			visibility: visible;
		}

		.menu-header {
			padding: 30px 20px;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}

		.menu-header h2 {
			font-size: 24px;
			font-weight: 600;
			margin-bottom: 5px;
		}

		.menu-header p {
			font-size: 14px;
			opacity: 0.7;
		}

		.menu-items {
			padding: 20px 0;
		}

		.menu-item {
			display: flex;
			align-items: center;
			gap: 15px;
			padding: 18px 20px;
			color: white;
			text-decoration: none;
			transition: all 0.3s ease;
			border-left: 3px solid transparent;
		}

		.menu-item:hover {
			background: rgba(255,255,255,0.1);
			border-left-color: #4fc3f7;
			padding-left: 25px;
		}

		.menu-item-icon {
			font-size: 24px;
			width: 30px;
			text-align: center;
		}

		.menu-item-text {
			flex: 1;
		}

		.menu-item-title {
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 2px;
		}

		.menu-item-desc {
			font-size: 12px;
			opacity: 0.6;
		}

		.header-center {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			justify-content: center;
		}

		.header-right {
			display: flex;
			gap: 10px;
		}

		.header-left {
			display: none;
		}

		html.ios-device .header {
			justify-content: flex-end;
			min-height: 112px;
			padding: 40px 18px 18px;
		}

		html.ios-device .header-left {
			position: absolute;
			top: 54px;
			left: 18px;
			z-index: 103;
			display: flex;
			align-items: center;
			max-width: 88px;
		}

		html.ios-device .header-center {
			position: absolute;
			top: 40px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 102;
			max-width: calc(100vw - 216px);
		}

		html.ios-device .header-right {
			position: absolute;
			top: 54px;
			right: 18px;
			z-index: 103;
			margin-left: 0;
		}

		.location-btn {
			background: rgba(255,255,255,0.15);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255,255,255,0.2);
			color: white;
			padding: 12px 20px;
			border-radius: 24px;
			font-size: 14px;
			display: flex;
			align-items: center;
			gap: 12px;
			cursor: pointer;
			transition: all 0.3s ease;
			max-width: 280px;
			min-height: 60px;
		}

		html.ios-device .location-btn {
			max-width: min(210px, calc(100vw - 216px));
			min-height: 64px;
			padding: 12px 18px;
			border-radius: 28px;
			background: rgba(34, 45, 61, 0.72);
			border-color: rgba(255,255,255,0.22);
			box-shadow: 0 16px 36px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
		}

		.favorite-status-pill {
			height: 42px;
			max-width: 88px;
			padding: 0 11px;
			border-radius: 21px;
			background: rgba(34, 45, 61, 0.68);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255,255,255,0.22);
			box-shadow: 0 14px 30px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.1);
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			overflow: hidden;
			cursor: pointer;
		}

		.favorite-status-icon {
			font-size: 22px;
			line-height: 1;
			flex: 0 0 auto;
			color: #d7dde8;
			filter: drop-shadow(0 1px 3px rgba(0,0,0,0.75));
			transition: color 0.25s ease, filter 0.25s ease, transform 0.25s ease;
		}

		.favorite-status-pill.is-favorite .favorite-status-icon {
			color: #ffd45a;
			filter: drop-shadow(0 0 7px rgba(255, 212, 90, 0.75)) drop-shadow(0 1px 3px rgba(0,0,0,0.75));
			transform: scale(1.06);
		}

		.favorite-status-pill.favorite-pulse .favorite-status-icon {
			animation: starPulse 0.5s ease;
		}

		.location-btn:hover {
			background: rgba(255,255,255,0.25);
			transform: translateY(-2px);
		}

		.location-text {
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 1.4;
			gap: 2px;
		}

		.location-city {
			font-size: 16px;
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 200px;
			text-shadow: 0 2px 4px rgba(0,0,0,0.8);
			text-align: center;
		}

		.location-country {
			font-size: 12px;
			opacity: 0.8;
			font-weight: 500;
			text-shadow: 0 1px 3px rgba(0,0,0,0.6);
			text-align: center;
			letter-spacing: 0.5px;
		}

		#favorite-icon {
			font-size: 16px;
			transition: all 0.3s ease;
			cursor: pointer;
			position: relative;
			filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5));
		}

		#favorite-icon.favorited {
			animation: starPulse 0.5s ease;
			filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 12px rgba(255, 193, 7, 0.6));
		}

		#favorite-icon:hover {
			transform: scale(1.2);
			filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.9));
		}

		html.ios-device #favorite-icon {
			display: none;
		}

		#header-location {
			cursor: pointer;
		}

		#header-location:hover {
			text-decoration: underline;
		}

		@keyframes starPulse {
			0%, 100% { transform: scale(1); }
			50% { transform: scale(1.3); }
		}

		.icon-btn {
			background: rgba(255,255,255,0.15);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255,255,255,0.2);
			color: white;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 20px;
		}

		.icon-btn:hover {
			background: rgba(255,255,255,0.25);
			transform: translateY(-2px);
		}

		/* Modal Styles */
		.modal {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.6);
			backdrop-filter: blur(5px);
			z-index: 1000;
			animation: fadeIn 0.3s ease;
		}

		.modal.active {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		@keyframes fadeIn {
			from { opacity: 0; }
			to { opacity: 1; }
		}

		.modal-content {
			background: linear-gradient(180deg, rgba(26, 35, 50, 0.98) 0%, rgba(45, 62, 80, 0.98) 100%);
			border-radius: 20px;
			width: 90%;
			max-width: 500px;
			max-height: 80vh;
			overflow: hidden;
			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;
			padding: 20px;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}

		.modal-header h2 {
			font-size: 20px;
			font-weight: 600;
		}

		.modal-close {
			background: transparent;
			border: none;
			color: white;
			font-size: 32px;
			cursor: pointer;
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			transition: all 0.3s ease;
		}

		.modal-close:hover {
			background: rgba(255,255,255,0.1);
			transform: rotate(90deg);
		}

		.modal-body {
			padding: 20px;
			max-height: calc(80vh - 80px);
			overflow-y: auto;
		}

		/* Search Box */
		.search-box {
			position: relative;
		}

		#searchInput {
			width: 100%;
			padding: 15px 20px;
			border-radius: 15px;
			border: 1px solid rgba(255,255,255,0.2);
			background: rgba(255,255,255,0.1);
			color: white;
			font-size: 16px;
			font-family: 'Poppins', sans-serif;
			transition: all 0.3s ease;
		}

		#searchInput:focus {
			outline: none;
			border-color: #4fc3f7;
			background: rgba(255,255,255,0.15);
		}

		#searchInput::placeholder {
			color: rgba(255,255,255,0.5);
		}

		.search-results {
			margin-top: 15px;
			max-height: 400px;
			overflow-y: auto;
		}

		.search-result-item {
			padding: 15px;
			background: rgba(255,255,255,0.08);
			border-radius: 12px;
			margin-bottom: 10px;
			cursor: pointer;
			transition: all 0.3s ease;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.search-result-item:hover {
			background: rgba(255,255,255,0.15);
			transform: translateX(5px);
		}

		.search-result-info {
			flex: 1;
		}

		.search-result-name {
			font-weight: 500;
			font-size: 16px;
			margin-bottom: 4px;
		}

		.search-result-details {
			font-size: 13px;
			opacity: 0.7;
		}

		.search-result-add {
			background: rgba(255,255,255,0.2);
			border: none;
			color: white;
			padding: 8px 16px;
			border-radius: 20px;
			font-size: 14px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.search-result-add:hover {
			background: rgba(255,255,255,0.3);
		}

		.search-loading {
			text-align: center;
			padding: 20px;
			opacity: 0.7;
		}

		/* Favorites List */
		.favorites-list {
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.favorite-item {
			background: rgba(255,255,255,0.08);
			border-radius: 15px;
			padding: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.favorite-item:hover {
			background: rgba(255,255,255,0.15);
			transform: translateX(5px);
		}

		.favorite-item.current {
			background: rgba(79, 195, 247, 0.25);
			border: 2px solid rgba(79, 195, 247, 0.6);
			box-shadow: 0 0 15px rgba(79, 195, 247, 0.3);
		}

		.favorite-item.current:hover {
			transform: none;
			cursor: default;
		}

		.favorite-info {
			flex: 1;
		}

		.favorite-name {
			font-weight: 500;
			font-size: 16px;
			margin-bottom: 4px;
		}

		.favorite-coords {
			font-size: 12px;
			opacity: 0.6;
		}

		.favorite-actions {
			display: flex;
			gap: 10px;
		}

		.favorite-btn {
			background: rgba(255,255,255,0.1);
			border: none;
			color: white;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 18px;
		}

		.favorite-btn:hover {
			background: rgba(255,255,255,0.2);
			transform: scale(1.1);
		}

		.favorite-btn.delete:hover {
			background: rgba(220, 38, 38, 0.3);
		}

		.favorites-empty {
			text-align: center;
			padding: 40px 20px;
			opacity: 0.6;
		}

		.favorites-empty p:first-child {
			font-size: 18px;
			margin-bottom: 10px;
		}

		.favorites-empty p:last-child {
			font-size: 14px;
		}

		/* Weather Alert Banner */
		.weather-alert {
			margin: 20px;
			padding: 15px 20px;
			border-radius: 15px;
			display: none;
			align-items: center;
			gap: 12px;
			animation: slideDown 0.3s ease-out;
		}

		.weather-alert.show {
			display: flex;
		}

		.weather-alert.severe {
			background: linear-gradient(135deg, rgba(220, 38, 38, 0.9), rgba(185, 28, 28, 0.9));
			border: 2px solid rgba(220, 38, 38, 0.5);
		}

		.weather-alert.warning {
			background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.9));
			border: 2px solid rgba(245, 158, 11, 0.5);
		}

		.weather-alert.moderate {
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
			border: 2px solid rgba(59, 130, 246, 0.5);
		}

		.alert-icon {
			font-size: 32px;
			animation: pulse 2s ease-in-out infinite;
		}

		.alert-content {
			flex: 1;
		}

		.alert-title {
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 5px;
		}

		.alert-message {
			font-size: 14px;
			opacity: 0.9;
		}

		.alert-close {
			background: rgba(255,255,255,0.2);
			border: none;
			color: white;
			width: 28px;
			height: 28px;
			border-radius: 50%;
			font-size: 18px;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.alert-close:hover {
			background: rgba(255,255,255,0.3);
		}

		.severe-alert-header {
			position: relative;
			display: none;
			margin: -2px 20px 18px;
			padding: 16px 16px 15px;
			border-radius: 26px;
			background:
				radial-gradient(circle at 12% 0%, rgba(255,255,255,0.25), transparent 34%),
				linear-gradient(135deg, rgba(127,29,29,0.94), rgba(185,28,28,0.86) 52%, rgba(30,41,59,0.76));
			border: 1px solid rgba(254,202,202,0.35);
			box-shadow: 0 22px 55px rgba(127,29,29,0.34), inset 0 1px 0 rgba(255,255,255,0.16);
			backdrop-filter: blur(18px);
			overflow: hidden;
			z-index: 95;
			animation: slideDown 0.35s ease-out;
		}

		.severe-alert-header.show {
			display: block;
		}

		.severe-alert-header.warning {
			background:
				radial-gradient(circle at 12% 0%, rgba(255,255,255,0.24), transparent 34%),
				linear-gradient(135deg, rgba(146,64,14,0.95), rgba(217,119,6,0.86) 52%, rgba(30,41,59,0.76));
			border-color: rgba(253,230,138,0.36);
			box-shadow: 0 22px 55px rgba(146,64,14,0.32), inset 0 1px 0 rgba(255,255,255,0.16);
		}

		.severe-alert-header::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.12) 42%, transparent 56%);
			transform: translateX(-120%);
			animation: severeSweep 4s ease-in-out infinite;
			pointer-events: none;
		}

		.severe-alert-inner {
			position: relative;
			display: grid;
			grid-template-columns: 48px minmax(0, 1fr) auto;
			align-items: center;
			gap: 13px;
			z-index: 1;
		}

		.severe-alert-icon {
			width: 48px;
			height: 48px;
			border-radius: 18px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255,255,255,0.16);
			font-size: 27px;
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 12px 24px rgba(0,0,0,0.2);
			animation: pulseAlert 1.8s ease-in-out infinite;
		}

		.severe-alert-kicker {
			font-size: 10px;
			font-weight: 950;
			text-transform: uppercase;
			letter-spacing: 1.7px;
			color: rgba(255,255,255,0.72);
			text-shadow: 0 1px 3px rgba(0,0,0,0.55);
		}

		.severe-alert-title {
			margin-top: 3px;
			font-size: 17px;
			font-weight: 900;
			line-height: 1.16;
			color: white;
			text-shadow: 0 2px 6px rgba(0,0,0,0.55);
		}

		.severe-alert-message {
			margin-top: 5px;
			font-size: 12px;
			font-weight: 650;
			line-height: 1.35;
			color: rgba(255,255,255,0.82);
			text-shadow: 0 1px 3px rgba(0,0,0,0.52);
		}

		.severe-alert-badge {
			align-self: start;
			padding: 7px 10px;
			border-radius: 999px;
			background: rgba(255,255,255,0.88);
			color: #7f1d1d;
			font-size: 10px;
			font-weight: 950;
			text-transform: uppercase;
			letter-spacing: 0.9px;
			box-shadow: 0 10px 22px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.5);
			white-space: nowrap;
		}

		.severe-alert-header.warning .severe-alert-badge {
			color: #78350f;
		}

		.severe-alert-close {
			position: absolute;
			right: 10px;
			top: 10px;
			width: 28px;
			height: 28px;
			border: 0;
			border-radius: 999px;
			background: rgba(255,255,255,0.16);
			color: white;
			font-size: 19px;
			line-height: 1;
			cursor: pointer;
			z-index: 2;
		}

		@keyframes severeSweep {
			0%, 45% { transform: translateX(-120%); }
			75%, 100% { transform: translateX(120%); }
		}

		@media (max-width: 480px) {
			.severe-alert-header {
				margin: -4px 18px 16px;
				border-radius: 24px;
				padding: 15px;
			}

			.severe-alert-inner {
				grid-template-columns: 44px minmax(0, 1fr);
				gap: 12px;
			}

			.severe-alert-badge {
				grid-column: 1 / -1;
				justify-self: start;
				margin-left: 56px;
				margin-top: -3px;
			}

			.severe-alert-title {
				font-size: 16px;
				padding-right: 20px;
			}
		}

		@keyframes slideDown {
			from {
				opacity: 0;
				transform: translateY(-20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		@keyframes pulse {
			0%, 100% {
				transform: scale(1);
			}
			50% {
				transform: scale(1.1);
			}
		}

		/* Main Weather Display */
		.main-weather {
			text-align: center;
			padding: 14px 0 0;
		}

		/* Floating Weather Icon */
		.weather-icon-float {
			font-size: 78px;
			margin: 0 0 -24px 0;
			animation: float 10s ease-in-out infinite;
			filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
		}

		@keyframes float {
			0%, 100% {
				transform: translateX(0px);
			}
			50% {
				transform: translateX(20px);
			}
		}

		.temperature {
			font-size: 96px;
			font-weight: 200;
			line-height: 1;
			margin: 5px 0 10px 0;
			text-shadow: 0 4px 12px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.6);
			letter-spacing: -2px;
		}

		.city-name {
			font-size: 20px;
			font-weight: 400;
			margin-bottom: 15px;
			text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6);
		}

		.weather-condition {
			font-size: 18px;
			color: rgba(255,255,255,0.9);
			margin-bottom: 10px;
			text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6);
		}

		.worldcup-banner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 14px;
			margin: 18px auto 0;
			padding: 14px 16px;
			max-width: 560px;
			border-radius: 20px;
			background:
				linear-gradient(135deg, rgba(14,165,233,0.22), rgba(16,185,129,0.14)),
				rgba(15,23,42,0.56);
			border: 1px solid rgba(148,163,184,0.18);
			box-shadow: 0 16px 34px rgba(2,6,23,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
			text-decoration: none;
			color: #fff;
			position: relative;
			overflow: hidden;
			transition: transform .2s ease, box-shadow .2s ease;
		}

		.worldcup-banner::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.08) 30%, transparent 60%);
			opacity: 0.6;
			pointer-events: none;
		}

		.worldcup-banner-copy {
			display: flex;
			flex-direction: column;
			gap: 3px;
			min-width: 0;
			position: relative;
			z-index: 1;
		}

		.worldcup-banner-eyebrow {
			font-size: 10px;
			font-weight: 900;
			letter-spacing: 0.18em;
			text-transform: uppercase;
			color: rgba(224,242,254,0.82);
		}

		.worldcup-banner-title {
			font-size: 15px;
			font-weight: 900;
			line-height: 1.15;
			color: #f8fbff;
		}

		.worldcup-banner-subtitle {
			font-size: 12px;
			font-weight: 600;
			color: rgba(226,232,240,0.88);
		}

		.worldcup-banner-action {
			width: 38px;
			height: 38px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			background: rgba(255,255,255,0.16);
			color: #fff;
			font-size: 18px;
			font-weight: 900;
			flex: 0 0 auto;
			position: relative;
			z-index: 1;
		}

		.worldcup-banner:hover {
			transform: translateY(-1px);
			box-shadow: 0 20px 40px rgba(2,6,23,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
		}

		.temp-range {
			font-size: 18px;
			color: rgba(255,255,255,0.9);
			margin-top: 8px;
			text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6);
			font-weight: 600;
			letter-spacing: 1px;
		}

		.temp-range span {
			padding: 0 4px;
		}

		/* Weather Details Cards */
		.weather-details-container {
			padding: 20px;
			margin-top: -10px;
		}

		.details-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
			margin-bottom: 20px;
		}

		.detail-card {
			background: rgba(255, 255, 255, 0.15);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
			border-radius: 16px;
			padding: 16px;
			display: flex;
			align-items: center;
			gap: 12px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			transition: transform 0.2s ease, box-shadow 0.2s ease;
		}

		.detail-card:active {
			transform: scale(0.98);
		}

		.detail-icon {
			font-size: 28px;
			width: 45px;
			height: 45px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255, 255, 255, 0.15);
			border-radius: 12px;
			flex-shrink: 0;
		}

		.detail-content {
			flex: 1;
			min-width: 0;
		}

		.detail-label {
			font-size: 12px;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 4px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.detail-value {
			font-size: 18px;
			color: white;
			font-weight: 700;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}

		/* AQI Card Color Coding */
		.aqi-card.aqi-good {
			background: rgba(34, 197, 94, 0.25);
			border-color: rgba(34, 197, 94, 0.5);
		}

		.aqi-card.aqi-fair {
			background: rgba(132, 204, 22, 0.25);
			border-color: rgba(132, 204, 22, 0.5);
		}

		.aqi-card.aqi-moderate {
			background: rgba(234, 179, 8, 0.25);
			border-color: rgba(234, 179, 8, 0.5);
		}

		.aqi-card.aqi-poor {
			background: rgba(249, 115, 22, 0.25);
			border-color: rgba(249, 115, 22, 0.5);
		}

		.aqi-card.aqi-very-poor {
			background: rgba(239, 68, 68, 0.25);
			border-color: rgba(239, 68, 68, 0.5);
		}

		.aqi-card.aqi-extremely-poor {
			background: rgba(127, 29, 29, 0.35);
			border-color: rgba(127, 29, 29, 0.6);
		}

		/* Sun Times Section */
		.sun-times-section {
			padding: 0 20px 20px 20px;
		}

		.section-title {
			font-size: 16px;
			font-weight: 700;
			color: white;
			margin-bottom: 12px;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
			letter-spacing: 0.5px;
		}

		.sun-times-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
		}

		.sun-time-card {
			background: rgba(255, 255, 255, 0.15);
			backdrop-filter: blur(20px);
			-webkit-backdrop-filter: blur(20px);
			border-radius: 16px;
			padding: 20px;
			display: flex;
			align-items: center;
			gap: 16px;
			border: 1px solid rgba(255, 255, 255, 0.2);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		}

		.sun-icon {
			font-size: 36px;
			filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
		}

		.sun-info {
			flex: 1;
		}

		.sun-label {
			font-size: 13px;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 4px;
			font-weight: 500;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

		.sun-value {
			font-size: 20px;
			color: white;
			font-weight: 700;
			text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
		}

		@media (max-width: 380px) {
			.details-grid {
				grid-template-columns: 1fr;
			}

			.detail-card {
				padding: 14px;
			}

			.detail-icon {
				font-size: 24px;
				width: 40px;
				height: 40px;
			}
		}

		/* Hourly Forecast */
		.hourly-forecast {
			padding: 20px;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
		}

		.hourly-scroll {
			display: flex;
			gap: 20px;
			padding-bottom: 10px;
		}

		.hourly-item {
			flex: 0 0 auto;
			text-align: center;
			background: rgba(255,255,255,0.1);
			padding: 15px 20px;
			border-radius: 25px;
			min-width: 80px;
		}

		.hourly-item.active {
			background: rgba(255,255,255,0.2);
		}

		.hourly-time {
			font-size: 14px;
			margin-bottom: 10px;
			opacity: 0.9;
			text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
		}

		.hourly-icon {
			font-size: 32px;
			margin: 10px 0;
			filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
		}

		.hourly-icon img {
			width: 40px;
			height: 40px;
		}

		.hourly-temp {
			font-size: 18px;
			font-weight: 500;
			text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
		}

		.smart-brief {
			position: relative;
			margin: 20px 20px 0;
			padding: 0;
			border-radius: 30px;
			background:
				radial-gradient(circle at 16% 0%, rgba(125, 211, 252, 0.22), transparent 34%),
				linear-gradient(145deg, rgba(18, 31, 48, 0.82), rgba(9, 18, 31, 0.64));
			backdrop-filter: blur(20px);
			border: 1px solid rgba(255,255,255,0.16);
			box-shadow: 0 22px 55px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.1);
			overflow: hidden;
			isolation: isolate;
		}

		.smart-brief::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(120deg, rgba(255,255,255,0.1), transparent 38%, rgba(255,255,255,0.035));
			pointer-events: none;
		}

		.smart-brief::after {
			content: '';
			position: absolute;
			width: 145px;
			height: 145px;
			right: -54px;
			top: -62px;
			border-radius: 999px;
			background: radial-gradient(circle, rgba(255,255,255,0.2), rgba(125,211,252,0.08) 46%, transparent 70%);
			filter: blur(2px);
			opacity: 0.9;
			pointer-events: none;
			z-index: -1;
		}

		.smart-brief-inner {
			position: relative;
			padding: 18px 18px 16px;
			z-index: 1;
		}

		.smart-brief-top {
			display: grid;
			grid-template-columns: 42px minmax(0, 1fr) auto;
			align-items: start;
			gap: 13px;
		}

		.smart-brief-icon {
			width: 42px;
			height: 42px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255,255,255,0.13);
			font-size: 23px;
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 12px 24px rgba(0,0,0,0.18);
		}

		.smart-brief-copy {
			min-width: 0;
		}

		.smart-brief-label {
			font-size: 10px;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 1.7px;
			color: rgba(255,255,255,0.58);
			margin-bottom: 6px;
			text-shadow: 0 1px 3px rgba(0,0,0,0.65);
		}

		.smart-brief-text {
			font-size: 16px;
			font-weight: 750;
			line-height: 1.34;
			color: rgba(255,255,255,0.98);
			text-shadow: 0 2px 6px rgba(0,0,0,0.72);
		}

		.smart-brief-subtext {
			margin-top: 8px;
			font-size: 12px;
			font-weight: 650;
			line-height: 1.35;
			color: rgba(255,255,255,0.68);
			text-shadow: 0 1px 3px rgba(0,0,0,0.62);
		}

		.smart-risk {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 5px;
			min-width: 94px;
		}

		.smart-risk-label {
			font-size: 9px;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 1.1px;
			color: rgba(255,255,255,0.52);
			white-space: nowrap;
		}

		.smart-risk-value {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 7px 10px;
			border-radius: 999px;
			font-size: 12px;
			font-weight: 950;
			color: #06151d;
			white-space: nowrap;
			box-shadow: 0 10px 22px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.45);
		}

		.smart-risk-value.low { background: linear-gradient(135deg, #86efac, #bbf7d0); }
		.smart-risk-value.moderate { background: linear-gradient(135deg, #fde68a, #fef3c7); }
		.smart-risk-value.elevated { background: linear-gradient(135deg, #fdba74, #fed7aa); }
		.smart-risk-value.high { background: linear-gradient(135deg, #fca5a5, #fecaca); }

		.smart-risk-meter {
			position: relative;
			height: 7px;
			margin-top: 15px;
			border-radius: 999px;
			background: rgba(255,255,255,0.12);
			box-shadow: inset 0 1px 2px rgba(0,0,0,0.28);
			overflow: hidden;
		}

		.smart-risk-fill {
			display: block;
			width: 8%;
			height: 100%;
			border-radius: inherit;
			background: linear-gradient(90deg, #86efac, #fde68a, #fdba74, #fca5a5);
			box-shadow: 0 0 18px rgba(251, 191, 36, 0.26);
			transition: width 0.45s ease;
		}

		.smart-next {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
			align-items: center;
			gap: 10px;
			margin-top: 14px;
			padding: 11px 12px;
			border-radius: 20px;
			background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055));
			border: 1px solid rgba(255,255,255,0.12);
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
		}

		.smart-next-icon {
			width: 34px;
			height: 34px;
			border-radius: 13px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(255,255,255,0.12);
			font-size: 18px;
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
		}

		.smart-next-label {
			font-size: 9px;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 1.15px;
			color: rgba(255,255,255,0.52);
			text-shadow: 0 1px 3px rgba(0,0,0,0.58);
		}

		.smart-next-text {
			margin-top: 3px;
			font-size: 13px;
			font-weight: 850;
			line-height: 1.25;
			color: rgba(255,255,255,0.94);
			text-shadow: 0 1px 4px rgba(0,0,0,0.64);
		}

		.smart-brief-chips {
			display: grid;
			grid-template-columns: repeat(4, minmax(0, 1fr));
			gap: 9px;
			margin-top: 16px;
		}

		.smart-brief-chip {
			min-width: 0;
			padding: 10px 10px;
			border-radius: 18px;
			background: rgba(255,255,255,0.09);
			border: 1px solid rgba(255,255,255,0.12);
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.075);
			text-shadow: 0 1px 3px rgba(0,0,0,0.62);
		}

		.smart-brief-chip.good {
			background: linear-gradient(145deg, rgba(34,197,94,0.18), rgba(255,255,255,0.06));
			border-color: rgba(134,239,172,0.18);
		}

		.smart-brief-chip.watch {
			background: linear-gradient(145deg, rgba(250,204,21,0.2), rgba(255,255,255,0.06));
			border-color: rgba(253,224,71,0.24);
		}

		.smart-brief-chip.alert {
			background: linear-gradient(145deg, rgba(248,113,113,0.22), rgba(255,255,255,0.06));
			border-color: rgba(252,165,165,0.28);
		}

		.smart-chip-label {
			display: block;
			font-size: 9px;
			font-weight: 850;
			letter-spacing: 0.8px;
			text-transform: uppercase;
			color: rgba(255,255,255,0.54);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.smart-chip-value {
			display: block;
			margin-top: 4px;
			font-size: 13px;
			font-weight: 900;
			color: rgba(255,255,255,0.96);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.outdoor-activity-card {
			position: relative;
			margin: 14px 20px 0;
			padding: 18px;
			border-radius: 28px;
			background:
				radial-gradient(circle at 12% 0%, rgba(45,212,191,0.14), transparent 30%),
				radial-gradient(circle at 100% 0%, rgba(99,102,241,0.10), transparent 24%),
				linear-gradient(145deg, rgba(15,23,42,0.84), rgba(30,41,59,0.62));
			backdrop-filter: blur(20px);
			border: 1px solid rgba(148,163,184,0.18);
			box-shadow: 0 20px 48px rgba(2,6,23,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
			overflow: hidden;
		}

		.outdoor-activity-card::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(110deg, rgba(255,255,255,0.09), transparent 38%, rgba(255,255,255,0.035));
			pointer-events: none;
		}

		.outdoor-activity-top,
		.outdoor-activity-windows,
		.outdoor-activity-timeline,
		.outdoor-activity-legend {
			position: relative;
			z-index: 1;
		}

		.outdoor-activity-top {
			display: grid;
			grid-template-columns: 42px minmax(0, 1fr) auto;
			align-items: center;
			gap: 12px;
		}

		.outdoor-activity-icon {
			width: 42px;
			height: 42px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
			font-size: 23px;
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 24px rgba(0,0,0,0.16);
		}

		.outdoor-activity-label {
			font-size: 10px;
			font-weight: 950;
			text-transform: uppercase;
			letter-spacing: 1.55px;
			color: rgba(255,255,255,0.57);
			text-shadow: 0 1px 3px rgba(0,0,0,0.6);
		}

		.outdoor-activity-title {
			margin-top: 4px;
			font-size: 16px;
			font-weight: 900;
			line-height: 1.2;
			color: rgba(255,255,255,0.98);
			text-shadow: 0 2px 6px rgba(0,0,0,0.66);
		}

		.outdoor-activity-score {
			padding: 8px 12px;
			border-radius: 999px;
			font-size: 10px;
			font-weight: 950;
			letter-spacing: 0.04em;
			text-transform: uppercase;
			color: #07121b;
			background: linear-gradient(135deg, #a7f3d0, #d1fae5);
			white-space: nowrap;
			box-shadow: 0 10px 22px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.48);
		}

		.outdoor-activity-score.excellent { background: linear-gradient(135deg, #a7f3d0, #dcfce7); }
		.outdoor-activity-score.verygood { background: linear-gradient(135deg, #6ee7b7, #bbf7d0); }
		.outdoor-activity-score.good { background: linear-gradient(135deg, #fde68a, #fef3c7); }
		.outdoor-activity-score.caution { background: linear-gradient(135deg, #fdba74, #ffedd5); }
		.outdoor-activity-score.poor { background: linear-gradient(135deg, #fca5a5, #fee2e2); }

		.outdoor-activity-windows {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 9px;
			margin-top: 14px;
		}

		.outdoor-window {
			padding: 10px;
			border-radius: 18px;
			background: rgba(15,23,42,0.36);
			border: 1px solid rgba(148,163,184,0.16);
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 22px rgba(2,6,23,0.08);
		}

		.outdoor-window.excellent {
			background: linear-gradient(145deg, rgba(16,185,129,0.28), rgba(15,23,42,0.24));
			border-color: rgba(110,231,183,0.26);
		}

		.outdoor-window.verygood {
			background: linear-gradient(145deg, rgba(45,212,191,0.24), rgba(15,23,42,0.24));
			border-color: rgba(94,234,212,0.22);
		}

		.outdoor-window.good {
			background: linear-gradient(145deg, rgba(250,204,21,0.23), rgba(15,23,42,0.24));
			border-color: rgba(253,224,71,0.22);
		}

		.outdoor-window.caution {
			background: linear-gradient(145deg, rgba(251,146,60,0.22), rgba(15,23,42,0.24));
			border-color: rgba(251,191,36,0.20);
		}

		.outdoor-window.poor {
			background: linear-gradient(145deg, rgba(248,113,113,0.22), rgba(15,23,42,0.24));
			border-color: rgba(252,165,165,0.24);
		}

		.outdoor-window-label {
			display: block;
			font-size: 9px;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 0.8px;
			color: rgba(226,232,240,0.72);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.outdoor-window-time {
			display: block;
			margin-top: 4px;
			font-size: 13px;
			font-weight: 900;
			color: rgba(255,255,255,0.96);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-shadow: 0 1px 3px rgba(0,0,0,0.62);
		}

		.outdoor-activity-timeline {
			display: grid;
			grid-template-columns: repeat(12, minmax(18px, 1fr));
			gap: 5px;
			margin-top: 13px;
		}

		.outdoor-hour {
			min-height: 44px;
			border-radius: 14px;
			padding: 6px 3px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 3px;
			border: 1px solid rgba(148,163,184,0.14);
			text-shadow: 0 1px 3px rgba(0,0,0,0.55);
			box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
		}

		.outdoor-hour.excellent { background: rgba(16,185,129,0.28); }
		.outdoor-hour.verygood { background: rgba(45,212,191,0.24); }
		.outdoor-hour.good { background: rgba(250,204,21,0.24); }
		.outdoor-hour.caution { background: rgba(251,146,60,0.24); }
		.outdoor-hour.poor { background: rgba(248,113,113,0.24); }

		.outdoor-hour-time {
			font-size: 9px;
			font-weight: 850;
			color: rgba(255,255,255,0.84);
		}

		.outdoor-hour-score {
			font-size: 11px;
			font-weight: 950;
			color: white;
		}

		.outdoor-activity-legend {
			display: flex;
			flex-wrap: wrap;
			gap: 12px;
			margin-top: 12px;
			font-size: 10px;
			font-weight: 850;
			color: rgba(255,255,255,0.74);
		}

		.outdoor-legend-dot {
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 999px;
			margin-right: 5px;
		}

		.outdoor-legend-dot.excellent { background: #86efac; }
		.outdoor-legend-dot.verygood { background: #5eead4; }
		.outdoor-legend-dot.good { background: #fde68a; }
		.outdoor-legend-dot.caution { background: #fdba74; }
		.outdoor-legend-dot.poor { background: #fca5a5; }

		@media (max-width: 480px) {
			.smart-brief { margin: 20px 18px 0; border-radius: 28px; }
			.smart-brief-inner { padding: 16px; }
			.smart-brief-top { grid-template-columns: 40px minmax(0, 1fr); }
			.smart-risk { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px; }
			.smart-risk-meter { margin-top: 12px; }
			.smart-next { margin-top: 12px; }
			.smart-brief-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
			.outdoor-activity-card { margin: 14px 18px 0; padding: 16px; border-radius: 26px; }
			.outdoor-activity-top { grid-template-columns: 40px minmax(0, 1fr); }
			.outdoor-activity-score { grid-column: 1 / -1; justify-self: start; margin-left: 52px; }
			.outdoor-activity-windows { grid-template-columns: 1fr; }
			.outdoor-activity-timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
		}

		/* Daily Forecast */
		.daily-forecast {
			padding: 20px;
		}

		.daily-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15px 0;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}

		.daily-item:last-child {
			border-bottom: none;
		}

		.daily-day {
			flex: 1;
			font-size: 16px;
			text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
		}

		.daily-icon {
			flex: 0 0 60px;
			text-align: center;
			filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
		}

		.daily-icon img {
			width: 48px;
			height: 48px;
		}

		.daily-temps {
			flex: 1;
			text-align: right;
			font-size: 16px;
			text-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6);
		}

		.daily-high {
			font-weight: 500;
		}

		.daily-low {
			color: rgba(255,255,255,0.6);
			margin-left: 10px;
		}

		/* Bottom Navigation */
		.bottom-nav {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: rgba(26, 35, 50, 0.95);
			display: flex;
			justify-content: space-around;
			padding: 10px 0 20px;
			border-top: 1px solid rgba(255,255,255,0.1);
		}

		.nav-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 5px;
			color: rgba(255,255,255,0.5);
			text-decoration: none;
			font-size: 12px;
			padding: 5px 20px;
		}

		.nav-item.active {
			color: #5eb9ff;
		}

		.nav-icon {
			font-size: 24px;
		}

		.nav-icon img {
			width: 24px;
			height: 24px;
			opacity: 0.5;
		}

		.nav-item.active .nav-icon img {
			opacity: 1;
		}

		/* Scrollbar styling */
		.hourly-scroll::-webkit-scrollbar {
			height: 4px;
		}

		.hourly-scroll::-webkit-scrollbar-track {
			background: rgba(255,255,255,0.1);
			border-radius: 2px;
		}

		.hourly-scroll::-webkit-scrollbar-thumb {
			background: rgba(255,255,255,0.3);
			border-radius: 2px;
		}

		/* Loading State */
		.loading {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 12px;
			width: 100%;
			min-height: 88px;
			padding: 24px 16px;
			font-size: 16px;
			font-weight: 600;
			letter-spacing: 0.02em;
			color: rgba(255,255,255,0.78);
			text-align: center;
		}

		.loading::before {
			content: "";
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background:
				radial-gradient(circle at 50% 50%, #ffd76a 0 34%, transparent 35%),
				radial-gradient(circle at 50% 50%, rgba(255, 215, 106, 0.35) 0 48%, transparent 49%),
				linear-gradient(135deg, rgba(255,255,255,0.9), rgba(220,240,255,0.6));
			box-shadow:
				0 0 0 4px rgba(255,215,106,0.12),
				0 0 18px rgba(255,215,106,0.35);
			animation: weather-loader-sun 1.8s linear infinite;
			flex: 0 0 auto;
		}

		.loading::after {
			content: "";
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background: rgba(255,255,255,0.95);
			box-shadow:
				18px -4px 0 -3px rgba(255,255,255,0.85),
				30px 2px 0 -5px rgba(255,255,255,0.75),
				9px 6px 0 0 rgba(255,255,255,0.55);
			transform: translateY(2px);
			animation: weather-loader-cloud 2s ease-in-out infinite;
			flex: 0 0 auto;
		}

		@keyframes weather-loader-sun {
			0% { transform: rotate(0deg) scale(1); }
			50% { transform: rotate(180deg) scale(1.05); }
			100% { transform: rotate(360deg) scale(1); }
		}

		@keyframes weather-loader-cloud {
			0%, 100% { transform: translateY(2px) translateX(0); opacity: 0.85; }
			50% { transform: translateY(-2px) translateX(2px); opacity: 1; }
		}

		/* Settings Modal */
		.modal-overlay {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,0.7);
			z-index: 1000;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			padding: 20px 0;
		}

		.modal-content {
			position: relative;
			top: auto;
			left: auto;
			transform: none;
			background: #2d3e50;
			padding: 30px 30px 40px;
			border-radius: 20px;
			min-width: 300px;
			max-width: 90%;
			max-height: none;
			margin: 20px auto;
			overflow: visible;
		}

		@media (min-height: 800px) {
			.modal-content {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				margin: 0;
			}
		}

		.modal-header {
			font-size: 24px;
			margin-bottom: 20px;
			text-align: center;
			color: white;
		}

		.gps-detect-btn {
			position: absolute;
			top: 15px;
			left: 15px;
			background: rgba(79, 195, 247, 0.2);
			border: 2px solid rgba(79, 195, 247, 0.5);
			color: white;
			font-size: 24px;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
		}

		.gps-detect-btn:hover {
			background: rgba(79, 195, 247, 0.4);
			border-color: rgba(79, 195, 247, 0.8);
			transform: scale(1.1);
		}

		.gps-detect-btn:active {
			transform: scale(0.95);
		}

		.modal-close {
			position: absolute;
			top: 15px;
			right: 15px;
			background: transparent;
			border: none;
			color: white;
			font-size: 28px;
			cursor: pointer;
		}

		.setting-group {
			margin: 20px 0;
		}

		.setting-label {
			display: block;
			margin-bottom: 10px;
			font-size: 14px;
			color: rgba(255,255,255,0.7);
		}

		.button-group {
			display: flex;
			gap: 10px;
		}

		.button-group button {
			flex: 1;
			padding: 12px;
			background: rgba(255,255,255,0.1);
			border: 2px solid rgba(255,255,255,0.2);
			color: white;
			border-radius: 10px;
			cursor: pointer;
			font-size: 16px;
		}

		.button-group button.active {
			background: #5eb9ff;
			border-color: #5eb9ff;
		}

		.lang-button {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 5px;
		}

		.lang-flag {
			width: 32px;
			height: 24px;
			object-fit: cover;
			border-radius: 4px;
		}

		/* Floating Search Button */
		.floating-search-btn {
			position: fixed;
			bottom: 100px;
			right: 30px;
			width: 60px;
			height: 60px;
			background: linear-gradient(135deg, #4fc3f7 0%, #2196f3 100%);
			border: none;
			border-radius: 50%;
			box-shadow: 0 4px 20px rgba(79, 195, 247, 0.4);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 999;
			transition: all 0.3s ease;
		}

		.floating-search-btn:hover {
			transform: scale(1.1);
			box-shadow: 0 6px 30px rgba(79, 195, 247, 0.6);
		}

		.floating-search-btn:active {
			transform: scale(0.95);
		}

		.floating-search-btn span {
			font-size: 28px;
			filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
		}

		@media (max-width: 768px) {
			.floating-search-btn {
				bottom: 100px;
				right: 20px;
				width: 56px;
				height: 56px;
			}

			.floating-search-btn span {
				font-size: 24px;
			}

			/* Slightly smaller main weather icon on tablet/phone */
			.weather-icon-float { font-size: 64px; margin: 2px 0 -18px 0; }
		}

		@media (max-width: 480px) {
			.weather-icon-float { font-size: 56px; margin: 4px 0 -14px 0; }
		}

		/* Footer */
		.footer {
			padding: 40px 20px 30px;
			text-align: center;
			margin-top: 60px;
			border-top: 1px solid rgba(255, 255, 255, 0.08);
			background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
		}

		.footer-text {
			font-size: 10px;
			line-height: 1.7;
			color: rgba(255, 255, 255, 0.4);
			max-width: 500px;
			margin: 0 auto;
			font-weight: 300;
		}

		.footer-link {
			color: rgba(79, 195, 247, 0.6);
			text-decoration: none;
			transition: color 0.3s ease;
			border-bottom: 1px solid transparent;
		}

		.footer-link:hover {
			color: rgba(79, 195, 247, 0.9);
			border-bottom-color: rgba(79, 195, 247, 0.5);
		}

		.footer-sources {
			font-size: 9px;
			margin-top: 10px;
			color: rgba(255, 255, 255, 0.3);
			font-weight: 300;
			letter-spacing: 0.3px;
		}

		/* Like Button Styles */
		.like-btn-container {
			position: relative;
			display: inline-flex;
			align-items: center;
		}

		.like-btn {
			background: rgba(255,255,255,0.15);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255,255,255,0.2);
			color: white;
			min-width: 44px;
			height: 44px;
			border-radius: 22px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.3s ease;
			font-size: 20px;
			padding: 0 12px;
			gap: 6px;
			position: relative;
			overflow: hidden;
		}

		.like-btn:hover {
			background: rgba(255,255,255,0.25);
			transform: translateY(-2px);
			border-color: rgba(76,175,80,0.5);
		}

		.like-btn.liked {
			background: rgba(76,175,80,0.3);
			border-color: rgba(76,175,80,0.6);
			animation: likeSuccess 0.6s ease;
		}

		.like-btn.loading {
			opacity: 0.6;
			pointer-events: none;
		}

		.like-icon {
			font-size: 22px;
			transition: all 0.3s ease;
			display: inline-block;
		}

		.like-btn:hover .like-icon {
			transform: scale(1.2);
		}

		.like-btn.liked .like-icon {
			animation: thumbPop 0.5s ease;
		}

		.like-counter {
			font-size: 14px;
			font-weight: 600;
			color: white;
			min-width: 20px;
			text-align: center;
			transition: all 0.3s ease;
		}

		html.ios-device .like-btn {
			height: 42px;
			min-width: 76px;
			padding: 0 11px;
			border-radius: 21px;
			background: rgba(34, 45, 61, 0.68);
			border-color: rgba(255,255,255,0.22);
			box-shadow: 0 14px 30px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.1);
		}

		html.ios-device .like-icon {
			font-size: 20px;
		}

		html.ios-device .like-counter {
			font-size: 13px;
			min-width: 18px;
		}

		.like-counter.updating {
			animation: counterUpdate 0.4s ease;
		}

		@keyframes likeSuccess {
			0% { transform: scale(1); }
			50% { transform: scale(1.1); }
			100% { transform: scale(1); }
		}

		@keyframes thumbPop {
			0%, 100% { transform: scale(1); }
			25% { transform: scale(1.3) rotate(-15deg); }
			50% { transform: scale(1.2) rotate(15deg); }
			75% { transform: scale(1.3) rotate(-10deg); }
		}

		@keyframes counterUpdate {
			0% { transform: scale(1); }
			50% { transform: scale(1.3); color: #FFD700; }
			100% { transform: scale(1); }
		}

		.like-particles {
			position: absolute;
			pointer-events: none;
		}

		.like-particle {
			position: absolute;
			font-size: 16px;
			animation: particleFloat 1s ease-out forwards;
			opacity: 0;
		}

		@keyframes particleFloat {
			0% {
				opacity: 1;
				transform: translate(0, 0) scale(0);
			}
			50% {
				opacity: 1;
				transform: translate(var(--tx), var(--ty)) scale(1);
			}
			100% {
				opacity: 0;
				transform: translate(var(--tx), calc(var(--ty) - 30px)) scale(0.5);
			}
		}

		.like-toast {
			position: fixed;
			bottom: 80px;
			left: 50%;
			transform: translateX(-50%) translateY(100px);
			background: rgba(0,0,0,0.8);
			backdrop-filter: blur(10px);
			color: white;
			padding: 12px 20px;
			border-radius: 25px;
			font-size: 14px;
			z-index: 10000;
			opacity: 0;
			transition: all 0.3s ease;
			border: 1px solid rgba(255,255,255,0.2);
			white-space: nowrap;
		}

		.like-toast.show {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}

		/* OSHA Alerts Modal Styles */
		#osha-alerts-modal .modal-content {
			max-height: none;
			overflow: visible;
			
		}

		#osha-alerts-modal .modal-overlay {
			align-items: flex-start;
			padding: 20px 0;
			overflow-y: auto;
		}

		@media (max-width: 768px) {
			#osha-alerts-modal .modal-content {
				max-height: none;
				padding: 20px 15px 30px;
				max-width: 95%;
				margin: 10px auto;
			}

			#osha-alerts-modal .modal-header {
				font-size: 20px;
				margin-bottom: 15px;
				padding-right: 35px;
			}

			.alert-config-group {
				padding: 12px;
				margin-bottom: 12px;
			}

			.alert-config-title {
				font-size: 16px;
				margin-bottom: 12px;
			}

			.alert-param {
				padding: 10px 0;
				flex-wrap: wrap;
				gap: 8px;
			}

			.alert-param-label {
				font-size: 13px;
				flex: 1 1 100%;
				margin-bottom: 5px;
			}

			.alert-param-value {
				flex: 0 0 auto;
			}

			.alert-param-input {
				width: 70px;
				padding: 6px 10px;
				font-size: 13px;
			}

			.alert-info {
				padding: 12px;
				margin-top: 15px;
			}

			.alert-info-title {
				font-size: 13px;
			}

			.alert-info p {
				font-size: 12px;
			}
		}

		@media (max-width: 414px) {
			#osha-alerts-modal .modal-content {
				max-height: none;
				padding: 15px 12px 25px;
				max-width: 98%;
				margin: 5px auto;
			}

			#osha-alerts-modal .modal-header {
				font-size: 18px;
				margin-bottom: 12px;
			}

			.alert-config-group {
				padding: 10px;
				margin-bottom: 10px;
			}

			.alert-config-title {
				font-size: 15px;
				margin-bottom: 10px;
			}

			.alert-param {
				padding: 8px 0;
			}

			.alert-param-label {
				font-size: 12px;
			}

			.alert-param-input {
				width: 65px;
				padding: 5px 8px;
				font-size: 12px;
			}

			.alert-param-value span {
				font-size: 12px;
			}

			.alert-toggle {
				width: 45px;
				height: 24px;
			}

			.alert-toggle::after {
				width: 20px;
				height: 20px;
			}

			.alert-toggle.active::after {
				left: 23px;
			}
		}

		@media (max-width: 375px) {
			#osha-alerts-modal .modal-content {
				padding: 12px 10px 25px;
			}

			.alert-config-title {
				font-size: 14px;
			}

			.alert-param-label {
				font-size: 11px;
			}

			.alert-info-title {
				font-size: 12px;
			}

			.alert-info p {
				font-size: 11px;
			}
		}

		/* Alert threshold display */
		.alert-param-threshold {
			font-size: 12px;
			color: rgba(255,255,255,0.6);
			margin-top: 3px;
			font-weight: 400;
		}

		/* Save button responsive styles */
		.osha-save-button {
			background: linear-gradient(135deg, #4ade80, #22c55e);
			padding: 12px 30px;
			border: none;
			border-radius: 12px;
			color: white;
			font-weight: 600;
			cursor: pointer;
			font-size: 15px;
			transition: all 0.3s ease;
			width: 100%;
			max-width: 300px;
		}

		.osha-save-button:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4);
		}

		.osha-save-button:active {
			transform: translateY(0);
		}

		@media (max-width: 414px) {
			.osha-save-button {
				padding: 10px 20px;
				font-size: 14px;
			}

			.alert-param-threshold {
				font-size: 11px;
			}
		}

		@media (max-width: 375px) {
			.osha-save-button {
				padding: 9px 18px;
				font-size: 13px;
			}

			.alert-param-threshold {
				font-size: 10px;
			}
		}
		.alert-config-group {
			background: rgba(255,255,255,0.05);
			border-radius: 15px;
			padding: 20px;
			margin-bottom: 20px;
		}

		.alert-config-title {
			font-size: 18px;
			font-weight: 600;
			margin-bottom: 15px;
			display: flex;
			align-items: center;
			gap: 10px;
			color: #4fc3f7;
		}

		.alert-param {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12px 0;
			border-bottom: 1px solid rgba(255,255,255,0.1);
		}

		.alert-param:last-child {
			border-bottom: none;
		}

		.alert-param-label {
			font-size: 14px;
			color: rgba(255,255,255,0.9);
		}

		.alert-param-value {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.alert-param-input {
			width: 80px;
			padding: 8px 12px;
			background: rgba(255,255,255,0.1);
			border: 1px solid rgba(255,255,255,0.2);
			border-radius: 8px;
			color: white;
			font-size: 14px;
			text-align: center;
		}

		.alert-param-input:focus {
			outline: none;
			border-color: #4fc3f7;
			background: rgba(255,255,255,0.15);
		}

		.alert-toggle {
			width: 50px;
			height: 26px;
			background: rgba(255,255,255,0.2);
			border-radius: 13px;
			position: relative;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.alert-toggle::after {
			content: '';
			position: absolute;
			width: 22px;
			height: 22px;
			background: white;
			border-radius: 50%;
			top: 2px;
			left: 2px;
			transition: all 0.3s ease;
		}

		.alert-toggle.active {
			background: #22c55e;
		}

		.alert-toggle.active::after {
			left: 26px;
		}

		.alert-info {
			background: rgba(79, 195, 247, 0.1);
			border: 1px solid rgba(79, 195, 247, 0.3);
			border-radius: 12px;
			padding: 15px;
			margin-top: 20px;
		}

		.alert-info-title {
			font-size: 14px;
			font-weight: 600;
			margin-bottom: 8px;
			color: #4fc3f7;
		}

		.alert-info p {
			font-size: 13px;
			line-height: 1.6;
			color: rgba(255,255,255,0.8);
			margin: 0;
		}

		/* OSHA Alert Banner */
		.osha-alert-banner {
			position: fixed;
			top: 0px;
			left: 50%;
			transform: translateX(-50%) translateY(-150%);
			max-width: 500px;
			width: 90%;
			background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
			backdrop-filter: blur(10px);
			border-radius: 16px;
			padding: 20px;
			box-shadow: 0 10px 40px rgba(0,0,0,0.3);
			z-index: 1001;
			transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s ease;
			border: 2px solid rgba(255,255,255,0.2);
			/* keep in document flow but hidden visually */
			opacity: 0;
			pointer-events: none;
			transform: translateX(-50%) translateY(-150%);
		}

		.osha-alert-banner.show {
			transform: translateX(-50%) translateY(0);
			opacity: 1;
			pointer-events: auto;
		}

		.osha-alert-banner.warning {
			background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));
		}

		.osha-alert-banner.moderate {
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
		}

		.osha-alert-header {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 12px;
		}

		.osha-alert-icon {
			font-size: 28px;
			animation: pulseAlert 2s ease-in-out infinite;
		}

		@keyframes pulseAlert {
			0%, 100% {
				transform: scale(1);
			}
			50% {
				transform: scale(1.2);
			}
		}

		.osha-alert-title {
			flex: 1;
			font-size: 18px;
			font-weight: 700;
			color: white;
		}

		.osha-alert-close {
			background: rgba(255,255,255,0.2);
			border: none;
			color: white;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			font-size: 24px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
		}

		.osha-alert-close:hover {
			background: rgba(255,255,255,0.3);
			transform: rotate(90deg);
		}

		.osha-alert-message {
			font-size: 15px;
			line-height: 1.5;
			color: rgba(255,255,255,0.95);
			margin-bottom: 10px;
		}

		.osha-alert-details {
			font-size: 13px;
			line-height: 1.4;
			color: rgba(255,255,255,0.85);
			background: rgba(0,0,0,0.2);
			padding: 10px;
			border-radius: 8px;
		}

		@media (max-width: 768px) {
			.osha-alert-banner {
				top: 60px;
				width: 95%;
				padding: 15px;
			}

			.osha-alert-title {
				font-size: 16px;
			}

			.osha-alert-message {
				font-size: 14px;
			}

			.osha-alert-details {
				font-size: 12px;
			}
		}