* {
           box-sizing: border-box;

       }

       .up {
           display: flex;
           flex-direction: column;
           align-items: center;
       }

       body {
           margin: 0;
           font-family: Arial, sans-serif;
           background-size: cover;
           background-image: url('res/background/1.png');
           background-repeat: no-repeat;
           background-attachment: fixed;
           background-position: center;
       }

       h5 {
           position: absolute;


           top: -15px;


           left: 5px;





       }

       .sidebar {
           position: fixed;
           left: -250px;
           top: 0;
           width: 250px;
           height: 100%;
           background: rgba(255, 255, 255, 0.9);
           border-right: 1px solid #ddd;
           box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
           padding: 20px;
           transition: left 0.3s ease;
       }

       .sidebar.open {
           left: 0;
       }

       .sidebar h2 {
           margin-top: 0;
       }


       .toggle-button {
           font-size: 130%;
           position: absolute;
           top: 30px;
           right: -60px;
           background: #fff;
           border: none;
           border-radius: 5px;
           padding: 10px;
           cursor: pointer;
           background-color: rgba(24, 26, 27, 0.25);
           backdrop-filter: blur(11.5px);
           -webkit-backdrop-filter: blur(11.5px);
           border: 1px solid rgba(255, 255, 255, 0.18);
           box-shadow: rgba(88, 95, 99, 0.19) 0px 6px 15px 0px;
           -webkit-box-shadow: rgba(88, 95, 99, 0.19) 0px 6px 15px 0px;
           border-radius: 12px;
           -webkit-border-radius: 12px;
           color: rgb(232, 230, 227);
           outline: none
       }

       .toggle-button:hover {
           background: #f0f0f0;
       }


       #text-paragraph {
           opacity: 0;
           transition: opacity 1s ease-in-out;
           font-size: 0.9em;
           color: rgba(255, 255, 255, 0.8);
       }

       .weather-important {
           display: flex;
           flex-direction: column;
           align-items: center;
           padding: 30px;
           font-size: 140%;
           line-height: 10px;

       }

       .weather-important p:first-child {
           font-size: 1.8em;
           margin-bottom: 10px;
       }

       .weather-important p:nth-child(2) {
           font-size: 3em;
           margin: 10px 0;
           line-height: 1;
       }

       .container {
           display: grid;
           grid-template-columns: 1fr;
           gap: 20px;
           padding: 0 20px 20px;
           margin: 0 auto;
           max-width: 1400px;
           width: 100%;

       }

       .weather-card {
           background: rgba(255, 255, 255, 0.2);
           backdrop-filter: blur(10px);
           border-radius: 15px;
           padding: 25px 20px 20px;
           position: relative;
           overflow: hidden;
       }



       .weather-index {
           overflow-x: auto;
       }

       .weather-index table {
           width: 100%;
           min-width: 600px;
           border-collapse: collapse;
       }

       .weather-index th,
       .weather-index td {
           text-align: center;
           padding: 8px 5px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       }

       .weather-index th img,
       .weather-index td img {
           display: block;
           margin: 0 auto;
           width: 35px;
           height: 35px;
           filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
       }

       .scroll-container {
           overflow: hidden;
           white-space: nowrap;
           margin-top: 25px;
       }

       .scroll-text {
           display: inline-block;
           padding-left: 100%;
           animation: scroll 20s linear infinite;
       }

       .hourly-container {
           display: flex;
           overflow-x: auto;
           padding: 10px 0;
           gap: 15px;

           scrollbar-width: thin;
           scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
       }

       .hourly-container::-webkit-scrollbar {
           height: 6px;
       }

       .hourly-container::-webkit-scrollbar-thumb {
           background-color: rgba(0, 0, 0, 0.2);
           border-radius: 3px;
       }

       .hourly-item {

           min-width: 120px;
           border-radius: 8px;
           padding: 10px;


       }

       .hourly-row {
           display: flex;
           flex-direction: column;
           margin-bottom: 8px;
           white-space: nowrap;
       }

       .hourly-label {
           font-size: 12px;
           color: #555;
           margin-bottom: 2px;
       }

       .hourly-value {
           font-size: 14px;
           font-weight: 500;
       }

       .pollution-forecast-vertical {
           position: relative;
           margin-top: 20px;
       }

       .pollution-container {
           display: flex;
           overflow-x: auto;
           padding: 10px 0;
           gap: 15px;

           scrollbar-width: thin;
           scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
       }

       .pollution-container::-webkit-scrollbar {
           height: 6px;
       }

       .pollution-container::-webkit-scrollbar-thumb {
           background-color: rgba(0, 0, 0, 0.2);
           border-radius: 3px;
       }

       .pollution-item {
           min-width: auto;
           border-radius: 8px;
           padding: 10px;

       }

       .pollution-row {
           display: flex;
           flex-direction: column;
           margin-bottom: 8px;
           white-space: nowrap;
       }

       .pollution-label {
           font-size: 12px;
           color: #555;
           margin-bottom: 2px;
       }

       .pollution-value {
           font-size: 14px;
           font-weight: 500;
       }








       .wind-info {
           display: flex;
           justify-content: center;
           align-items: center;
           gap: 20px;
           margin: 15px 0;
       }

       .wind-details {
           text-align: center;
       }

       footer {
           text-align: center;
           padding: 20px;
           background: rgba(0, 0, 0, 0.2);
           backdrop-filter: blur(5px);
       }

       .middle {
           display: flex;
           flex-direction: column;
           gap: 10px;
       }

       a.modern {
           color: #8be9fd;
           position: relative;
           text-decoration: none;
           transition: all 0.3s ease;
       }

       a.modern::after {
           content: '';
           position: absolute;
           bottom: -2px;
           left: 0;
           width: 0;
           height: 2px;
           background: linear-gradient(90deg, #8be9fd, #50fa7b);
           transition: width 0.3s ease;
       }

       a.modern:hover {
           color: #50fa7b;
       }

       a.modern:hover::after {
           width: 100%;
       }

       #ai_txt {
           white-space: pre-wrap;
           font-family: sans-serif;
           line-height: 1.6;
       }

       #ai_txt hr {
           margin: 20px 0;
           border: 0;
           border-top: 1px dashed #ccc;
       }

       #ai_txt h3 {
           margin-top: 15px;
           color: #2c3e50;
           font-size: 1.2em;
       }

       #ai_txt ul {
           margin-left: 20px;
           padding-left: 10px;
           list-style-type: disc;
       }

       #ai_txt li {
           margin-bottom: 8px;
       }



       /* 平板及以上设备样式 */
       @media (min-width: 768px) {
           .container {
               grid-template-columns: repeat(2, 1fr);
           }

           .wide-card {
               grid-column: span 2;
           }
       }

       /* 桌面设备样式 */
       @media (min-width: 1200px) {
           .container {
               grid-template-columns: repeat(3, 1fr);
           }

           .wide-card {
               grid-column: span 3;
           }
       }

       /* 动画 */
       @keyframes scroll {
           0% {
               transform: translateX(0);
           }

           100% {
               transform: translateX(-100%);
           }
       }



       .sidebar.open {
           left: 0;
       }



       .form-group {
           margin-bottom: 15px;
       }

       input[type="text"] {
           width: 100%;
           padding: 12px;
           border: 1px solid #ddd;
           border-radius: 8px;
           margin-bottom: 10px;
           font-size: 1em;
       }

       .btn {
           padding: 12px 20px;
           background: #4caf50;
           color: white;
           border: none;
           border-radius: 8px;
           cursor: pointer;
           font-weight: bold;
           transition: background 0.3s;
       }

       .btn:hover {
           background: #439547;
       }

       /* 移动设备优化 */
       @media (max-width: 767px) {


           .hourly-item {
               min-width: 140px;
               padding: 10px;
           }

           .wind-info img {
               width: 50px;
               height: 50px;
           }

           .weather-index {
               overflow-x: auto;
           }

           .weather-index table {
               font-size: 0.8em;
           }

           .weather-index th img,
           .weather-index td img {
               width: 28px;
               height: 28px;
           }

           .hourly-item {
               min-width: 100px;
           }

       }