* {
    padding: 0;
    margin: 0;
}


a {
    text-decoration: none;
}

a:focus {
    outline: none;
    outline-offset: 0;
}

a,
br,
div,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
li,
ol,
p,
span,
ul {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

li,
ol,
ul {
    list-style-type: none;
}

input {
    outline: none;
}

html.no-scroll body,
body.no-scroll body {
    overflow: hidden !important;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: normal;
    margin: 0;
}

h2 {
    font-size: 18px;
    color: black;
}

ul {
    list-style: none;
}

*:focus {
    outline: none;
}

a:hover {
    text-decoration: none;
}

html,
body {
    height: 100%;
    background-color: var(--body--background-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.clockBody {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s ease-in-out;
}
.clockBox {
    height: 100vh;
    width: 100vw;
}
.clockBody .clock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    height: 3rem;
}

.clockBody .clock div {
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.clockBody .clock .sec {
    font-size: .5rem;
    width: .8rem;
    padding-bottom: .4rem;
}
.night {
    background: #2d2d2d;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.night .weather,
.night .info {
    color: #e0e0e0;
    opacity: 0.9;
}

.night .clock .sec {
    color: #a0a0a0;
}

.clockBody .info {
    font-size: .3rem;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 2%;
}
.clockBody .info .date {
    margin-bottom: 0.2rem;
}
.clockBody .info .subdate {
    font-size: 0.2rem;
}

.clockBody .weather {
    font-size: .3rem;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 2%;
    line-height: 1.5;
}
.clockBody .weather img {
    position: relative;
    top: 0.1rem;
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
}
.clockBody .weather span {
    font-size: 0.2rem;
}

.dark-mode-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    font-size: .4rem;
    z-index: 100;
    padding: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.night .dark-mode-toggle {
    background: rgba(0, 0, 0, 0.2);
}
.sep {
    animation: blink 1s infinite;
}
@keyframes blink {
    50% { opacity: 0.3; }
}

.city-weather-sun {
    background-image: -webkit-linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);
    background-image: -o-linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);
    background-image: -moz-linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);
    background-image: linear-gradient(225deg, #fee5ca, #e9f0ff 55%, #dce3fb);
}

.city-weather-cloudy {
    background-image: -webkit-linear-gradient(225deg, #D0DAE8, #CCD4DF 55%, #A5B3C5);
    background-image: -o-linear-gradient(225deg, #D0DAE8, #CCD4DF 55%, #A5B3C5);
    background-image: -moz-linear-gradient(225deg, #D0DAE8, #CCD4DF 55%, #A5B3C5);
    background-image: linear-gradient(225deg, #D0DAE8, #CCD4DF 55%, #A5B3C5);
}

.city-weather-rain {
    background-image: -webkit-linear-gradient(225deg, #DBEBFF, #DDE5F4 55%, #BECDDD);
    background-image: -o-linear-gradient(225deg, #DBEBFF, #DDE5F4 55%, #BECDDD);
    background-image: -moz-linear-gradient(225deg, #DBEBFF, #DDE5F4 55%, #BECDDD);
    background-image: linear-gradient(225deg, #DBEBFF, #DDE5F4 55%, #BECDDD);
}


.city-weather-snow {
    background-image: -webkit-linear-gradient(225deg, #D2F0FD, #E6F8FE 55%, #D6EDED);
    background-image: -o-linear-gradient(225deg, #D2F0FD, #E6F8FE 55%, #D6EDED);
    background-image: -moz-linear-gradient(225deg, #D2F0FD, #E6F8FE 55%, #D6EDED);
    background-image: linear-gradient(225deg, #D2F0FD, #E6F8FE 55%, #D6EDED);
}

.city-weather-haze {
    background-image: -webkit-linear-gradient(225deg, #b29c82, #ded9d7 64.29%, #d9d7dc);
    background-image: -o-linear-gradient(225deg, #b29c82, #ded9d7 64.29%, #d9d7dc);
    background-image: -moz-linear-gradient(225deg, #b29c82, #ded9d7 64.29%, #d9d7dc);
    background-image: linear-gradient(225deg, #b29c82, #ded9d7 64.29%, #d9d7dc);
}

.theme--dark .city-weather-sun {
    background-image: -webkit-linear-gradient(225deg, #2A427F, #1B2751);
    background-image: -o-linear-gradient(225deg, #2A427F, #1B2751);
    background-image: -moz-linear-gradient(225deg, #2A427F, #1B2751);
    background-image: linear-gradient(225deg, #2A427F, #1B2751);
}

.theme--dark .city-weather-cloudy {
    background-image: -webkit-linear-gradient(225deg, #8089a5, #424c66);
    background-image: -o-linear-gradient(225deg, #8089a5, #424c66);
    background-image: -moz-linear-gradient(225deg, #8089a5, #424c66);
    background-image: linear-gradient(225deg, #8089a5, #424c66);
}

.theme--dark .city-weather-rain {
    background-image: -webkit-linear-gradient(225deg, #2C4A77, #1F3B59);
    background-image: -o-linear-gradient(225deg, #2C4A77, #1F3B59);
    background-image: -moz-linear-gradient(225deg, #2C4A77, #1F3B59);
    background-image: linear-gradient(225deg, #2C4A77, #1F3B59);
}

.theme--dark .city-weather-snow {
    background-image: -webkit-linear-gradient(225deg, #18779e, #0d3f54);
    background-image: -o-linear-gradient(225deg, #18779e, #0d3f54);
    background-image: -moz-linear-gradient(225deg, #18779e, #0d3f54);
    background-image: linear-gradient(225deg, #18779e, #0d3f54);
}
.theme--dark .city-weather-haze {
    background-image: -webkit-linear-gradient(225deg, #8f8d52, #2b333c);
    background-image: -o-linear-gradient(225deg, #8f8d52, #2b333c);
    background-image: -moz-linear-gradient(225deg, #8f8d52, #2b333c);
    background-image: linear-gradient(225deg, #8f8d52, #2b333c);
}

.api {
    background: -webkit-radial-gradient(circle farthest-corner at 95% 45%, #4B5769, #282F3C);
    background: -o-radial-gradient(circle farthest-corner at 95% 45%, #4B5769, #282F3C);
    background: -moz-radial-gradient(circle farthest-corner at 95% 45%, #4B5769, #282F3C);
    background: radial-gradient(circle farthest-corner at 95% 45%, #4B5769, #282F3C);
}

.theme--light {
    --body--background-color: #FFFFFF;
    --text-black-1: rgba(0, 0, 0, 1);
    --text-black-2: rgba(0, 0, 0, 0.5);
    --text-white-1: rgba(255, 255, 255, 1);
    --text-white-2: rgba(255, 255, 255, 0.55);
    --card-background-color: #F7F8F9;
    --card-border-color: #F2F4FA;
    --indicator-txt-color: #6C6C6C;
    --table-row-background-color: #EAF1FF;
    --split-line-color: #DEDFE2;
    --tabs-row-background-color: rgba(0, 0, 0, 0.03);
    --tabs-active-background-color: rgba(255, 255, 255, 1);
    --tabs-active-border-color: rgba(0, 0, 0, 0.04);
    --tabs-row-num-background-color: #CED1D6;
    --compontent-data-source-hover-border-color: rgba(0, 0, 0, 0.8);
    --compontent-top-icon-menu-border-color: #E7E7E8;
    --compontent-search-box-background-color: #F2F4F8;
    --compontent-search-box-input-color: rgb(85, 85, 85);
    --compontent-search-box-input-placeholder-color: #7A7D81;
    --compontent-search-box-result-background-color: #FFFFFF;
    --compontent-submenu-menus-background-color: #E7EEFD;
    --compontent-submenu-fixed-background-color: #36363C;
    --compontent-submenu-fixed-border-color: rgba(255, 255, 255, .4);
    --compontent-mobile-submenu-background-color: #EFF1F7;
    --compontent-satellite-radar-switch-background-color: #EFF1F7;
    --compontent-map-title-background-color: rgba(255, 255, 255, 0.5);
    --object-menu-icon-background-color: #000000;
    --object-search-list-background-color: #ffffff;
    --menu-panel-background-color: #FFFFFF;
    --menu-panel-top-cancel-color: #8E8E8E;
    --menu-panel-dropdown-menu-background-color: #FFFFFF;
    --menu-panel-dropdown-menu-hover-background-color: rgba(0, 0, 0, 0.1);
    --menu-panel-down-background-color: #EFF1F7;
    --menu-panel-list-border-color: rgba(151, 151, 151, 0.2);
    --menu-panel-row-color: #6B6B6B;
    --menu-panel-bottom-color: #6B6B6B;
    --index-background-color: #FFFFFF;
    --index-search-background-color: transparent;
    --index-forecast30-txt-color: rgba(0, 0, 0, 1);
    --index-warning-background-color: #FFF6F5;
    --index-menu-list-background-color: #FFFFFF;
    --index-menu-list-hover-color: #000000;
    --index-menu-select-background-color: #FFFFFF;
    --index-menu-select-border-right-color: #4F5154;
    --index-menu--dropdown-menu-background-color: #ffffff;
    --header-main-background-color: #36363C;
    --header-search-background-color: #F3F5FA;
    --header-search-box-background-color: #FFFFFF;
    --header-search-box-input-btn-border-color: #D6DAE3;
    --header-search-box-input-placehoder-color: #7A7D81;
    --header-search-recent-border-color: #A9ADB4;
    --header-search-dropdown-menu-background-color: #F3F5FA;
    --header-search-dropdown-menu-border-color: #EEF1F7;
    --header-search-dropdown-menu-li-border-color: #E7EAF0;
    --city-weather-current-background-color: rgba(0, 0, 0, 0.03);
    --city-weather-hour24-wind-color: rgba(0, 0, 0, 0.45);
    --city-weaether-air-progress-color: #DADDE0;
    --city-weaether-indices-item-background-color: #FFFFFF;
    --city-weaether-rank-select-border-color: rgba(0, 0, 0, 0.06);
    --city-weather30-calendar-date-background-color: #FFFFFF;
    --city-weather30-calendar-date-hover-background-color: #E4EBFF;
    --city-weather30-calendar-date-detail-background-color: #FFFFFF;
    --city-weather30-calendar-date-detail-border-color: #E5EAEF;
    --city-air-current-background-color: #EFF1F7;
    --city-air-current-aqi-progress-background-color: rgba(0, 0, 0, 0.1);
    --city-air-advise-current-background-color: rgba(0, 0, 0, 0.03);
    --city-air-forecast-progress-background-color: #D7D9DF;
    --city-air-station-border-color: #DEDFE2;
    --city-air-station-aqi-progress-background-color: rgba(0, 0, 0, 0.1);
    --city--warning-events-defense-background-color: rgba(0, 0, 0, 0.05);
    --city-historical-last-12month-dropdown-menu-background-color: rgba(255, 255, 255, 1);
    --city-historical-last-12month-dropdown-menu-hover-background-color: #e9ecef;
    --city-indices-detail-forecast-border-color: #CDCDCD;
    --city-indices-detail-forecast-background-color: #FFFFFF;
    --city-indices-item-background-color: rgb(194, 194, 195);
    --weather-main-citie-dropdown-menu-background-color: rgba(255, 255, 255, 1);
    --weather-main-citie-dropdown-menu-hover-background-color: #e9ecef;
    --weather-radar-background-color: #EAF1FF;
    --severe-weather-type-item-background-color: rgba(255, 255, 255, 0.8);
    --severe-weather-news-row-background-color: rgba(0, 0, 0, 0.03);
    --severe-weather-more-page-background-color: #FFFFFF;
    --severe-weather-more-page-border-color: rgba(0, 0, 0, 0.12);
    ---imagery-radar-background-color: #EFF1F7;
    --single-imagery-selectoin-li-background-color: rgba(0, 0, 0, 0.03);
    --single-imagery-selectoin-background-color: rgba(255, 255, 255, 1);
    --single-imagery-selectoin-menu-hover-background-color: #e9ecef;
    --business-intro-p-color: rgba(97, 104, 110, 0.85);
    --business-intro-span-color: rgba(0, 0, 0, 0.9);
    --business-mosaics-main-background-color: #F2F4F8;
    --business-mosaics-main-h2-color: rgba(0, 0, 0, 1);
    --business-mosaics-main-p-color: rgba(48, 50, 52, 0.8);
    --business-mosaics-main-a-background-color: rgba(0, 0, 0, 1);
    --business-mosaics-main-a-color: rgba(255, 255, 255, 1);
    --business-advantage-background-color: rgba(242, 244, 248, 1);
    --business-advantage-item-background-color: rgba(255, 255, 255, 1);
    --business-advantage-item-cont-p-color: rgba(48, 50, 52, 0.8);
    --business-more-background-color: #FAFAFA;
    --business-more-a-background-color: rgba(0, 0, 0, 1);
    --business-tws-traffic-item-p-color: #61686E;
    --business-tws-traffic-cascade-p-color: #61686E;
    --business-tws-traffic-travel-background-color: rgba(0, 0, 0, 0.9);
    --business-tws-service-background-color: #F2F4F8;
    --business-tws-service-item-p-color: rgba(48, 50, 52, 0.8);
    --business-cascade-cont-p-color: #5C656B;
    --business-type-row-border-color: #979797;
    --business-type-item-p-color: #737A80;
    --business-type-advantage-background-color: #F2F4F8;
    --business-type-advantage-cont-p-color: rgba(48, 50, 52, 0.8);
    --text-supplement-color--2: rgba(0, 0, 0, 0.5);
    --app-top-item-background-color: #D6E2F8;
    --app-top-item-border-color: #6F7B89;
    --app-bottom-cont-a-background-color: rgba(0, 0, 0, 1);
    --app-bottom-cont-a-border-color: rgba(163, 163, 165, 1);
    --about-navigation-li-background-color: rgba(255, 255, 255, 1);
    --about-cont-page-blockquote-border-color: rgba(238, 238, 238, 1);
    --about-cont-page-pre-background-color: #f5f5f5;
    --about-cont-page-pre-border-color: #ccc;
    --about-cont-iframe-border-color: #efefef;
    --contact-content-background-color: #F5F5F5;
    --contact-content-item-background-color: rgba(255, 255, 255, 1);
    --support-main-cont-table-thead-background-color: rgba(233, 236, 239, 1);
}

.theme--dark {
    --body--background-color: #202124;
    --text-black-1: rgba(255, 255, 255, 1);
    --text-black-2: rgba(255, 255, 255, 0.55);
    --text-white-1: rgba(0, 0, 0, 1);
    --text-white-2: rgba(0, 0, 0, 0.6);
    --card-background-color: #2D2E32;
    --card-border-color: transparent;
    --indicator-txt-color: rgba(255, 255, 255, 0.65);
    --table-row-background-color: rgba(255, 255, 255, 0.06);
    --split-line-color: rgba(84, 86, 93, 0.6);
    --tabs-row-background-color: rgba(255, 255, 255, 0.06);
    --tabs-active-background-color: #636366;
    --tabs-active-border-color: transparent;
    --tabs-row-num-background-color: rgba(255, 255, 255, 0.16);
    --compontent-data-source-hover-border-color: rgba(255, 255, 255, 0.8);
    --compontent-top-icon-menu-border-color: transparent;
    --compontent-search-box-background-color: #202123;
    --compontent-search-box-input-color: rgba(255, 255, 255, 1);
    --compontent-search-box-input-placeholder-color: rgba(255, 255, 255, 0.55);
    --compontent-search-box-result-background-color: #202124;
    --compontent-submenu-menus-background-color: #4A4D53;
    --compontent-submenu-fixed-background-color: #000000;
    --compontent-submenu-fixed-border-color: transparent;
    --compontent-mobile-submenu-background-color: #4A4D53;
    --compontent-satellite-radar-switch-background-color: rgba(255, 255, 255, 0.06);
    --compontent-map-title-background-color: rgba(0, 0, 0, 0.5);
    --object-menu-icon-background-color: #ffffff;
    --object-search-list-background-color: #000000;
    --menu-panel-background-color: #202124;
    --menu-panel-top-cancel-color: rgba(255, 255, 255, 0.55);
    --menu-panel-dropdown-menu-background-color: #3D4045;
    --menu-panel-dropdown-menu-hover-background-color: #3D4045;
    --menu-panel-down-background-color: #2D2E32;
    --menu-panel-list-border-color: rgba(151, 151, 151, 0.2);
    --menu-panel-row-color: rgba(255, 255, 255, 0.65);
    --menu-panel-bottom-color: rgba(255, 255, 255, 0.65);
    --index-background-color: #202124;
    --index-search-background-color: #000000;
    --index-forecast30-txt-color: rgba(255, 255, 255, 0.55);
    --index-warning-background-color: #2D2E32;
    --index-menu-list-background-color: #3D4045;
    --index-menu-list-hover-color: rgba(255, 255, 255, 1);
    --index-menu-select-background-color: #3D4045;
    --index-menu-select-border-right-color: rgba(255, 255, 255, 0.1);
    --index-menu--dropdown-menu-background-color: #3D4045;
    --header-main-background-color: #202124;
    --header-search-background-color: #000000;
    --header-search-box-background-color: #202123;
    --header-search-box-input-btn-border-color: #3F4246;
    --header-search-box-input-placehoder-color: rgba(255, 255, 255, 0.55);
    --header-search-recent-border-color: transparent;
    --header-search-dropdown-menu-background-color: #2D2E32;
    --header-search-dropdown-menu-border-color: transparent;
    --header-search-dropdown-menu-li-border-color: rgba(255, 255, 255, 0.55);
    --city-weather-current-background-color: rgba(160, 166, 180, 0.1);
    --city-weather-hour24-wind-color: rgba(255, 255, 255, 0.5);
    --city-weaether-air-progress-color: rgba(0, 0, 0, 0.16);
    --city-weaether-indices-item-background-color: rgba(255, 255, 255, 0.01);
    --city-weaether-rank-select-border-color: rgba(255, 255, 255, 0.06);
    --city-weather30-calendar-date-background-color: rgba(160, 166, 180, 0.1);
    --city-weather30-calendar-date-hover-background-color: rgba(160, 166, 180, 0.1);
    --city-weather30-calendar-date-detail-background-color: rgba(160, 166, 180, 0.1);
    --city-weather30-calendar-date-detail-border-color: rgba(255, 255, 255, 0.2);
    --city-air-current-background-color: #2D2E32;
    --city-air-current-aqi-progress-background-color: rgba(0, 0, 0, 0.16);
    --city-air-advise-current-background-color: rgba(255, 255, 255, 0.06);
    --city-air-forecast-progress-background-color: rgba(0, 0, 0, 0.16);
    --city-air-station-border-color: rgba(0, 0, 0, 0.2);
    --city-air-station-aqi-progress-background-color: rgba(0, 0, 0, 0.16);
    --city--warning-events-defense-background-color: rgba(255, 255, 255, 0.05);
    --city-historical-last-12month-dropdown-menu-background-color: #404145;
    --city-historical-last-12month-dropdown-menu-hover-background-color: #202124;
    --city-indices-detail-forecast-border-color: rgba(0, 0, 0, 0.2);
    --city-indices-detail-forecast-background-color: rgba(255, 255, 255, 0.06);
    --city-indices-item-background-color: rgb(28, 29, 32);
    --weather-main-citie-dropdown-menu-background-color: #404145;
    --weather-main-citie-dropdown-menu-hover-background-color: #202124;
    --weather-radar-background-color: #2D2E32;
    --severe-weather-type-item-background-color: rgba(255, 255, 255, 0.1);
    --severe-weather-news-row-background-color: rgba(255, 255, 255, 0.06);
    --severe-weather-more-page-background-color: rgba(255, 255, 255, 0.1);
    --severe-weather-more-page-border-color: transparent;
    ---imagery-radar-background-color: #000000;
    --single-imagery-selectoin-li-background-color: rgba(255, 255, 255, 0.06);
    --single-imagery-selectoin-background-color: #404145;
    --single-imagery-selectoin-menu-hover-background-color: #202124;
    --business-intro-p-color: rgba(255, 255, 255, 1);
    --business-intro-span-color: rgba(255, 255, 255, 1);
    --business-mosaics-main-background-color: #2D2E32;
    --business-mosaics-main-h2-color: rgba(255, 255, 255, 1);
    --business-mosaics-main-p-color: rgba(255, 255, 255, 1);
    --business-mosaics-main-a-background-color: rgba(255, 255, 255, 1);
    --business-mosaics-main-a-color: rgba(0, 0, 0, 1);
    --business-advantage-background-color: #2D2E32;
    --business-advantage-item-background-color: rgba(255, 255, 255, 0.06);
    --business-advantage-item-cont-p-color: rgba(255, 255, 255, 0.55);
    --business-more-background-color: #000000;
    --business-more-a-background-color: rgba(255, 255, 255, 1);
    --business-tws-traffic-item-p-color: rgba(255, 255, 255, 0.55);
    --business-tws-traffic-cascade-p-color: rgba(255, 255, 255, 0.55);
    --business-tws-traffic-travel-background-color: rgba(0, 0, 0, 0.9);
    --business-tws-service-background-color: #2D2E32;
    --business-tws-service-item-p-color: rgba(255, 255, 255, 0.55);
    --business-cascade-cont-p-color: rgba(255, 255, 255, 0.55);
    --business-type-row-border-color: #53555D;
    --business-type-item-p-color: rgba(255, 255, 255, 0.55);
    --business-type-advantage-background-color: #2D2E32;
    --business-type-advantage-cont-p-color: rgba(255, 255, 255, 0.55);
    --text-supplement-color--2: rgba(255, 255, 255, 0.55);
    --app-top-item-background-color: rgba(160, 166, 180, 0.1);
    --app-top-item-border-color: transparent;
    --app-bottom-cont-a-background-color: rgba(160, 166, 180, 0.1);
    --app-bottom-cont-a-border-color: transparent;
    --about-navigation-li-background-color: #202124;
    --about-cont-page-blockquote-border-color: rgba(238, 238, 238, 1);
    --about-cont-page-pre-background-color: #2d2e32;
    --about-cont-page-pre-border-color: rgba(255, 255, 255, 0.3);
    --about-cont-iframe-border-color: rgba(255, 255, 255, 0.3);
    --contact-content-background-color: #202124;
    --contact-content-item-background-color: #2D2E32;
    --support-main-cont-table-thead-background-color: rgba(233, 236, 239, 1);
}


/* 横屏提示样式 - 只在移动设备上显示 */
.landscape-tip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

/* PC端永远不显示横屏提示 */
@media (min-width: 1024px) {
    .landscape-tip {
        display: none !important;
    }
}

/* 只在移动设备的竖屏模式下可能显示 */
@media (max-width: 1023px) and (orientation: portrait) {
    .landscape-tip {
        /* 通过JavaScript控制显示 */
    }
}

/* 移动设备横屏时隐藏提示 */
@media (max-width: 1023px) and (orientation: landscape) {
    .landscape-tip {
        display: none !important;
    }
}

.tip-content {
    text-align: center;
    color: white;
    padding: 2rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tip-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: rotate 2s infinite linear;
}

.tip-text {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.tip-subtext {
    font-size: 0.9rem;
    opacity: 0.8;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(90deg); }
}