.card {max-width: 800px;margin: auto;background: linear-gradient(135deg, #FF416C, #FF4B2B) !important;border: none !important;box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important;animation: fadeIn 0.5s ease-out;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px)}.card-body {padding: 1.5rem !important;position: relative;overflow: hidden}.card-body::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0));pointer-events: none}.card-footer {background: rgba(0,0,0,0.2) !important;border-top: 1px solid rgba(255,255,255,0.1) !important;backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px)}.CITYSelect {display: flex;flex-direction: row;gap: 12px;margin-bottom: 20px;padding: 12px;background: rgba(0, 0, 0, 0.1);border-radius: 8px;transition: all 0.3s ease}.CITYSelect select {flex: 1;width: calc(33.33% - 8px);min-width: 120px;max-width: none;height: 38px;padding: 6px 12px;font-size: 0.95rem;border-radius: 6px;background-color: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);color: #fff;cursor: pointer;transition: all 0.3s ease;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 8px center;background-size: 12px;padding-right: 24px}.CITYSelect select:hover {background-color: rgba(255, 255, 255, 0.15);transform: translateY(-1px)}.CITYSelect select:focus {outline: none;box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);background-color: rgba(255, 255, 255, 0.2)}.CITYSelect-active select {opacity: 1;color: #ffffff}.CITYSelect-inactive select {opacity: 0.5;color: #6c757d;pointer-events: none}@media (max-width: 768px) {.CITYSelect {flex-direction: column;gap: 8px;padding: 10px}.CITYSelect select {width: 100%;min-width: 0;height: 36px;font-size: 0.9rem}}@media (max-width: 480px) {.CITYSelect {gap: 6px;padding: 8px}.CITYSelect select {height: 34px;font-size: 0.85rem}}.city-select-active,.city-select-inactive {flex: 1;min-width: 120px;height: 38px;padding: 6px 12px;font-size: 0.95rem;border-radius: 6px;border: 1px solid rgba(255, 255, 255, 0.2);color: #fff;cursor: pointer;transition: all 0.3s ease;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 8px center;background-size: 12px;padding-right: 24px}.city-select-active {background: linear-gradient(135deg, #2AF598 0%, #009EFD 100%);box-shadow: 0 4px 15px rgba(42, 245, 152, 0.2);opacity: 1;pointer-events: auto}.city-select-inactive {background: linear-gradient(135deg, rgba(42, 245, 152, 0.1), rgba(0, 158, 253, 0.1));box-shadow: none;opacity: 0.3}.city-select-active:hover,.city-select-inactive:hover {transform: translateY(-2px)}.CITYSelect select option {background-color: #2f3640;color: #fff;padding: 8px}@media (hover: none) {.CITYSelect select {font-size: 16px; }.CITYSelect select:hover {transform: none}}.input-group {margin-bottom: 0.8rem !important;transition: all 0.3s ease}.input-group:hover {transform: translateY(-2px)}.input-group-text {background: rgba(255,255,255,0.15) !important;border: 1px solid rgba(255,255,255,0.3) !important;color: #fff !important;font-weight: 500;padding: 0.5rem 1rem;height: 38px;line-height: 1.5;border-radius: 6px 0 0 6px !important;transition: all 0.3s ease;display: flex;align-items: center}.form-control {background: rgba(255,255,255,0.15) !important;border: 1px solid rgba(255,255,255,0.3) !important;color: #fff !important;font-size: 1rem;padding: 0.5rem 1rem;height: 38px;line-height: 1.5;border-radius: 0 6px 6px 0 !important;transition: all 0.3s ease}.form-control:focus {background: rgba(255,255,255,0.2) !important;border-color: rgba(255,255,255,0.5) !important;color: #fff !important;box-shadow: 0 0 15px rgba(255,255,255,0.2) !important}.outtext-title {color: rgba(255,255,255,0.9) !important;font-weight: 500;padding: 0.4rem 0.8rem;border-radius: 6px;background: rgba(255,255,255,0.15);margin-bottom: 0.4rem;transition: all 0.3s ease;text-shadow: 1px 1px 2px rgba(0,0,0,0.2)}.outtext-content {color: #fff !important;padding: 0.4rem 0.8rem;background: rgba(0,0,0,0.25);border-radius: 6px;margin-bottom: 0.4rem;transition: all 0.3s ease;border: 1px solid rgba(255,255,255,0.1)}.outtext-title:hover,.outtext-content:hover {transform: translateX(5px)}.alert {background: rgba(255,255,255,0.15) !important;border: 1px solid rgba(255,255,255,0.3) !important;color: #fff !important;border-radius: 6px;padding: 0.8rem 1rem;margin: 1rem 0;backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px)}#allmap {border-radius: 12px;overflow: hidden;box-shadow: 0 8px 25px rgba(0,0,0,0.3);margin-top: 1rem;border: 1px solid rgba(255,255,255,0.2);transition: all 0.3s ease}#allmap:hover {transform: translateY(-3px);box-shadow: 0 12px 30px rgba(0,0,0,0.4)}.form-control::placeholder {color: rgba(255,255,255,0.6) !important}::-webkit-scrollbar {width: 8px;height: 8px}::-webkit-scrollbar-track {background: rgba(255,255,255,0.1);border-radius: 6px}::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.3);border-radius: 6px;border: 2px solid rgba(255,255,255,0.1)}::-webkit-scrollbar-thumb:hover {background: rgba(255,255,255,0.5)}@keyframes fadeIn {from {opacity: 0;transform: translateY(30px)}to {opacity: 1;transform: translateY(0)}}@media (max-width: 768px) {.card-body {padding: 1rem !important}.outtext-title,.outtext-content {padding: 0.3rem 0.6rem;font-size: 0.9rem}.input-group-text,.form-control {font-size: 0.9rem;padding: 0.3rem 0.6rem}.input-group {flex-wrap: nowrap !important;width: 100% !important}.input-group-prepend {width: auto !important;flex: 0 0 auto !important}.input-group-text {white-space: nowrap;width: auto !important}.input-group > .form-control {flex: 1 1 auto !important;width: 1% !important}}.row {backdrop-filter: blur(5px);-webkit-backdrop-filter: blur(5px);border-radius: 8px;padding: 0.3rem;margin-bottom: 0.6rem}.bi {text-shadow: 0 0 10px rgba(255,255,255,0.5)}select.form-control {background-color: rgba(255, 255, 255, 0.15) !important;border: 1px solid rgba(255, 255, 255, 0.3) !important;color: #fff !important;cursor: pointer;padding: 0.4rem 1.8rem 0.4rem 0.8rem !important;appearance: none;-webkit-appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 12px}select.form-control:hover {background-color: rgba(255, 255, 255, 0.2) !important;border-color: rgba(255, 255, 255, 0.4) !important}select.form-control:focus {background-color: rgba(255, 255, 255, 0.25) !important;border-color: rgba(255, 255, 255, 0.5) !important;box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.15) !important}select.form-control option {background-color: #FF416C;color: #fff;padding: 8px}.CITYSelect select {margin-right: 6px;border-radius: 6px !important;min-width: 90px}.CITYSelect select:last-child {margin-right: 0}@media (max-width: 768px) {.CITYSelect select {margin-right: 4px;min-width: 70px;font-size: 0.9rem}}.section-title {width: 100%;padding: 8px 12px;margin: 8px 0;background: rgba(0, 0, 0, 0.2);border-left: 4px solid rgba(255, 255, 255, 0.5);color: #fff;font-weight: 500;font-size: 1rem;border-radius: 0 4px 4px 0}#div_output {margin: 0;padding: 0}#city {display: flex;flex-direction: row;gap: 10px;margin-bottom: 20px}.city-select-active,.city-select-inactive {flex: 1;min-width: 120px;height: 38px;padding: 6px 30px 6px 12px;font-size: 0.95rem;border-radius: 4px;background: rgba(255, 255, 255, 0.2);border: none;color: #fff;cursor: pointer;transition: all 0.3s ease;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8.825L1.175 4 2.238 2.938 6 6.7l3.763-3.763L10.825 4z'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 8px center;background-size: 12px}.city-select-active {opacity: 1}.city-select-inactive {opacity: 0.5}.city-select-active:hover,.city-select-inactive:hover {background: rgba(255, 255, 255, 0.25)}.city-select-active:focus,.city-select-inactive:focus {outline: none;background: rgba(255, 255, 255, 0.3)}.city-select-active option,.city-select-inactive option {background-color: #2f3640;color: #fff;padding: 8px}@media (max-width: 768px) {#city {flex-direction: column;gap: 8px}.city-select-active,.city-select-inactive {width: 100% !important;min-width: 100% !important;height: 36px;font-size: 0.9rem}.CITYSelect select {width: 100% !important;min-width: 100% !important;margin-right: 0}.form-control {width: 100% !important}}@media (max-width: 480px) {#city {gap: 6px}.city-select-active,.city-select-inactive {height: 34px;font-size: 0.85rem}}@media (hover: none) {.city-select-active,.city-select-inactive {font-size: 16px}.city-select-active:hover,.city-select-inactive:hover {transform: none}}