html {
    font-size: 16px !important;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
    background: url('https://api.dujin.org/bing/1920.php') no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    overflow-x: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
body.night {
    position: relative;
}
body.night::before {
    content: '';
    position: fixed;
    left: 0; top: 0; right: 0; bottom: 0;
    z-index: 1;
    background: rgba(24,26,32,0.72);
    pointer-events: none;
}
body.night .container,
body.night .search-section,
body.night .footer,
body.night .settings-panel,
body.night .search-bar-glass,
body.night .footer-info,
body.night .footer-info a,
body.night .footer-btn {
    color: #fff !important;
    background: none !important;
    box-shadow: none !important;
}
#glass-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
    transition: backdrop-filter 0.3s, background 0.3s;
    backdrop-filter: blur(8px) saturate(1.2);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    background: rgba(255,255,255,0.10);
}
body.input-focus #glass-bg {
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    background: rgba(255,255,255,0.18);
}
#glass-bg.fadeout {
    opacity: 0;
    backdrop-filter: blur(0) saturate(1.2);
    -webkit-backdrop-filter: blur(0) saturate(1.2);
    transition: opacity 0.3s, backdrop-filter 0.3s, -webkit-backdrop-filter 0.3s;
}
body.focus-fadeout {
    opacity: 0;
    transition: opacity 0.3s;
}
#search-history-list {
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-backdrop-filter: blur(28px) saturate(1.2);
    background: rgba(255,255,255,0.18);
    border-radius: 1em;
    box-shadow: 0 4px 16px rgba(0,0,0,0.13);
    transition: opacity 0.5s, transform 0.5s, backdrop-filter 0.3s, background 0.3s;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    max-height: calc(2.4em * 5 + 0.2em * 4 + 1.2em); /* 5条+间距+padding */
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
#search-history-list::-webkit-scrollbar {
    display: none;
}
#search-history-list.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.search-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6em 1.2em 0.6em 1.2em;
    margin-bottom: 0.2em;
    font-size: 1.08em;
    border-radius: 0.7em;
    background: none;
    transition: background 0.18s, backdrop-filter 0.18s, -webkit-backdrop-filter 0.18s;
    min-width: 0;
    word-break: break-all;
}
.search-history-item:last-child {
    margin-bottom: 0;
}
.search-history-item:hover {
    background: rgba(255,255,255,0.32);
    backdrop-filter: blur(32px) saturate(1.3);
    -webkit-backdrop-filter: blur(32px) saturate(1.3);
}
body.night .search-history-item:hover {
    background: rgba(40,40,60,0.32);
}
.search-history-item span {
    flex: 1 1 auto;
    margin-right: 0.8em;
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-history-del {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    width: 1.6em;
    height: 1.6em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin-left: 0.5em;
    margin-right: -0.2em;
}
.search-history-del img {
    width: 1.2em;
    height: 1.2em;
    display: block;
}

.settings-panel {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.98);
    min-width: 320px;
    max-width: 90vw;
    min-height: 180px;
    background: rgba(255,255,255,0.55);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    border-radius: 1.5em;
    padding: 1.2em 1.5em 1em 1.5em;
    z-index: 1001;
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s, transform 0.7s;
    animation: panel-fade-in 0.7s ease-out;
}
.settings-panel.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
    transition: opacity 0.7s, transform 0.7s;
}
@keyframes panel-fade-in {
    from { opacity: 0; transform: translate(-50%, -60%) scale(0.95);}
    to { opacity: 1; transform: translate(-50%, -50%) scale(1);}
}

/* 基础动画定义 */
body.input-focus .search-section {
    transform: translateY(-2.2em);
    transition: transform 0.5s cubic-bezier(.4,1.4,.6,1);
}
body.input-focus .time-section {
    transform: translateY(-2.2em);
    opacity: 0.6;
    transition: transform 0.5s cubic-bezier(.4,1.4,.6,1), opacity 0.5s cubic-bezier(.4,1.4,.6,1);
}
.search-section, .time-section {
    transition: transform 0.5s cubic-bezier(.4,1.4,.6,1), opacity 0.5s cubic-bezier(.4,1.4,.6,1);
}

.lang-select {
    font-size: 1em;
    padding: 0.3em 2.2em 0.3em 2.2em;
    border-radius: 0.7em;
    border: 1px solid #ddd;
    background: #fff;
    color: #222;
    outline: none;
    min-width: 8em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    appearance: none;
    -webkit-appearance: none;
    background-position: 0.7em center;
    background-repeat: no-repeat;
    background-size: 1.4em 1.4em;
    transition: border 0.2s, box-shadow 0.2s;
}
.lang-select:focus, .lang-select:hover {
    border: 1.5px solid var(--theme-color, #0099ff);
    box-shadow: 0 4px 16px rgba(0,153,255,0.08);
}

.top-toast {
    position: fixed;
    top: -4em;
    left: 50%;
    transform: translateX(-50%);
    min-width: 14em;
    max-width: 90vw;
    display: flex;
    align-items: center;
    gap: 1em;
    background: rgba(255,255,255,0.82);
    color: #222;
    border-radius: 1.6em;
    box-shadow: 0 4px 18px rgba(0,0,0,0.13);
    padding: 0.55em 1.6em 0.55em 1.1em;
    z-index: 3000;
    font-size: 1.08em;
    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
    opacity: 0;
    pointer-events: none;
    transition: top 0.5s cubic-bezier(.4,2,.6,1), opacity 0.3s, background 0.3s, color 0.3s;
}
.top-toast.show {
    top: 1.3em;
    opacity: 1;
    pointer-events: auto;
}
.toast-icon {
    width: 1.7em;
    height: 1.7em;
    border-radius: 0.85em;
    background: rgba(0,0,0,0.08);
    object-fit: cover;
    flex-shrink: 0;
}
body.night .top-toast {
    background: rgba(40, 40, 60, 0.82);
    color: #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
body.night .toast-icon {
    background: rgba(255,255,255,0.13);
}
@media (max-width: 600px) {
    .top-toast {
        min-width: 9em;
        font-size: 0.98em;
        padding: 0.35em 1em 0.35em 0.7em;
    }
    .toast-icon {
        width: 1.2em;
        height: 1.2em;
        border-radius: 0.6em;
    }
}

.search-input {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
}

body:not(.mobile-ua) .time {
    font-size: 3.2em !important;
}
body:not(.mobile-ua) .date {
    font-size: 1.25em !important;
}
body:not(.mobile-ua) .weather {
    font-size: 1em !important;
}
body:not(.mobile-ua) .search-input {
    font-size: 1.1em !important;
    min-width: 280px !important;
    width: 35vw !important;
    max-width: 800px !important;
    padding: 0.3em 1em !important;
}
body:not(.mobile-ua) .engine-btn,
body:not(.mobile-ua) .search-btn {
    width: 2.5em !important;
    height: 2.5em !important;
    font-size: 1.1em !important;
}
body:not(.mobile-ua) #engine-icon {
    width: 1.4em !important;
    height: 1.4em !important;
}
body:not(.mobile-ua) .search-bar-glass {
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.3em 0.4em !important;
}
body:not(.mobile-ua) .search-section {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 2em !important;
    box-sizing: border-box !important;
}

body.mobile-ua .time {
    font-size: 2em !important;
}
body.mobile-ua .date {
    font-size: 1em !important;
}
body.mobile-ua .weather {
    font-size: 0.8em !important;
}
body.mobile-ua .search-input {
    font-size: 1.1em !important;
    min-width: 0 !important;
    width: 65vw !important;
    max-width: 85vw !important;
    padding: 0.2em 0.8em !important;
}
body.mobile-ua .search-bar-glass {
    padding: 0.15em 0.3em !important;
    border-radius: 1.6em !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
    max-width: 92vw !important;
}
body.mobile-ua .engine-btn,
body.mobile-ua .search-btn {
    width: 2.2em !important;
    height: 2.2em !important;
    font-size: 1.2em !important;
    flex-shrink: 0 !important;
    margin: 0 0.15em !important;
}
body.mobile-ua #engine-icon {
    width: 1.7em !important;
    height: 1.7em !important;
}

body.mobile-ua .search-section {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 1em !important;
    box-sizing: border-box !important;
}

@media (max-width: 700px) {
    .engine-list {
        width: 85vw;
        max-height: 70vh;
        overflow-y: auto;
        left: 50%;
        transform: translateX(-50%);
        grid-template-columns: repeat(1, 1fr);
        padding: 0.8em;
        gap: 0.5em;
        backdrop-filter: blur(20px) saturate(1.2);
        -webkit-backdrop-filter: blur(20px) saturate(1.2);
        background: rgba(255,255,255,0.15);
        border-radius: 1.2em;
    }

    .engine-list::-webkit-scrollbar {
        width: 6px;
    }

    .engine-list::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.1);
        border-radius: 3px;
    }

    .engine-list::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3);
        border-radius: 3px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .engine-list::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.5);
    }

    body.night .engine-list::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1);
    }

    body.night .engine-list::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
    }

    body.night .engine-list::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.3);
    }
}

/* 移动端UA样式同步 */
body.mobile-ua.input-focus .search-section {
    transform: translateY(-2.2em) !important;
    transition: transform 0.5s cubic-bezier(.4,1.4,.6,1), opacity 0.5s cubic-bezier(.4,1.4,.6,1) !important;
}

body.mobile-ua.input-focus .time-section {
    transform: translateY(-2.2em) !important;
    opacity: 0.6 !important;
    transition: transform 0.5s cubic-bezier(.4,1.4,.6,1), opacity 0.5s cubic-bezier(.4,1.4,.6,1) !important;
}

body.mobile-ua.input-focus .search-bar-glass {
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    background: rgba(255,255,255,0.25) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
}

body.mobile-ua.night.input-focus .search-bar-glass {
    background: rgba(30,35,45,0.75) !important;
}

body.mobile-ua.input-focus #glass-bg {
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    background: rgba(255,255,255,0.18) !important;
}

body.mobile-ua.night.input-focus #glass-bg {
    background: rgba(20,25,35,0.65) !important;
}