﻿html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.backgroundpage {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}
.bg_page { height: 100%; width: 100%; object-fit: cover; }

/* ===== 右上角信息块（时间 + 标语） ===== */
#top-info {
    position: fixed;
    top: 15px;
    right: 20px;
    z-index: 990;                 /* 低于切换栏(999) 和下拉(100) */
    text-align: right;
    pointer-events: none;         /* 不影响点击 */
}
#top-time {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    color: #fff;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 6px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.top-yiyan {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(6px);
    padding: 4px 16px;
    border-radius: 16px;
    line-height: 1.4;
}
.top-yiyan-main { font-weight: 500; margin: 0; }
.top-yiyan-sub { font-size: 0.75em; opacity: 0.8; margin: 0; }

/* 移动端：右上角避免遮挡左侧切换按钮 */
/* 移动端适配：避免时间/一言遮挡回到顶部按钮 */
@media screen and (max-width: 600px) {
    #top-info {
        top: auto;
        bottom: 15px;
        left: 10px;             /* 左下角显示 */
        right: auto;
        text-align: left;
    }
    #top-time {
        font-size: 0.85rem;
        padding: 4px 12px;
    }
    .top-yiyan {
        font-size: 0.7rem;
        padding: 3px 10px;
    }
    #back-to-top {
        bottom: 80px;           /* 上移一些，避免与极窄屏幕底部重叠 */
        right: 15px;
    }
}

/* ===== 搜索区域（完全垂直居中） ===== */
.box_first {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;      /* 垂直居中 */
    height: 100vh;
    position: relative;
}

#search-box {
    width: 90%;
    max-width: 700px;
    margin: 0 auto;               /* 移除之前的 33vh 上偏移 */
    position: relative;
}

.logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 120px;              /* 可根据需要调整最大高度 */
    object-fit: contain;         /* 完整显示，比例不变 */
    margin: 0 auto 20px;        /* 居中，与搜索框间距 */
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

/* 搜索表单（玻璃效果） */
#search-form {
    display: flex; align-items: stretch; width: 100%;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 16px;
    overflow: visible;            /* 下拉菜单不被裁剪 */
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s;
    position: relative;
}
#search-form:focus-within {
    box-shadow: 0 8px 32px rgba(59,130,246,0.2);
    border-color: rgba(59,130,246,0.4);
}

#engine-icon {
    display: flex; align-items: center; padding: 0 16px;
    background: rgba(255,255,255,0.08); cursor: pointer;
    user-select: none; color: #fff; font-size: 1.3rem; gap: 6px;
    border-right: 1px solid rgba(255,255,255,0.15);
    transition: background 0.2s; z-index: 5;
}
#engine-icon:hover { background: rgba(255,255,255,0.2); }
.arrow { font-size: 0.7rem; opacity: 0.7; }

#search-input {
    flex: 1; padding: 16px 20px; font-size: 1.05rem;
    background: transparent; border: none; color: #fff; outline: none;
    font-weight: 500;
}
#search-input::placeholder { color: rgba(255,255,255,0.6); }

#search-botton {
    flex-shrink: 0;
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4f8cf7, #3b6eeb);
    border: none;
    cursor: pointer;
    transition: filter 0.3s;
    border-radius: 0 16px 16px 0;    /* ← 新增右侧圆角，与搜索框一致 */
}

#search-botton:hover { filter: brightness(1.1); }
#search-botton img { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(0,0,0,0.2)); }

#engine-dropdown {
    position: absolute; top: 100%; left: 0;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
    border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    z-index: 100; min-width: 140px; overflow: hidden;
    display: none;
}
.engine-option {
    padding: 12px 20px; cursor: pointer; font-size: 14px; color: #2d3436;
    transition: background 0.2s;
}
.engine-option:hover { background: #f0f4ff; }

#suggestions {
    position: absolute; top: calc(100% + 10px); left: 0; width: 100%;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(20px);
    border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    display: none; z-index: 99; overflow: hidden;
}
#suggestions-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px 8px; font-size: 13px; color: #636e72;
    border-bottom: 1px solid #eee;
}
#clear-history { background: none; border: none; color: #3b82f6; cursor: pointer; font-size: 13px; }
#suggestion-wrap { list-style: none; padding: 6px 0; margin: 0; }
#suggestion-wrap li {
    padding: 12px 18px; cursor: pointer; display: flex;
    justify-content: space-between; align-items: center;
    font-size: 14px; color: #2d3436; font-weight: 500;
    transition: background 0.2s;
}
#suggestion-wrap li:hover { background: #f5f7fa; }
#suggestion-wrap li .delete-history {
    color: #b2bec3; font-size: 16px; line-height: 1; cursor: pointer;
    padding: 0 4px; transition: color 0.2s;
}
#suggestion-wrap li .delete-history:hover { color: #e74c3c; }

/* 语言/皮肤切换栏 */
.switch-bar {
    position: fixed; top: 15px; left: 20px; z-index: 999;
    display: flex; gap: 8px;
}
.switch-bar a, .switch-bar button {
    background: rgba(255,255,255,0.25); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.4); color: #fff;
    padding: 4px 12px; border-radius: 20px; font-size: 14px;
    cursor: pointer; text-decoration: none; font-weight: bold;
}
.switch-bar a:hover, .switch-bar button:hover { background: rgba(255,255,255,0.5); }

/* Cookie 弹窗 */
#cookie-bar {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: rgba(0,0,0,0.85); color: #eee; padding: 14px 20px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 10000; flex-wrap: wrap; gap: 10px;
}
#cookie-bar span { flex: 1 1 250px; }
#cookie-bar button {
    background: #3b82f6; color: #fff; border: none; padding: 6px 20px;
    border-radius: 6px; cursor: pointer; flex-shrink: 0; white-space: nowrap;
    position: relative; z-index: 10001;
}

/* 回到顶部 */
#back-to-top {
    position: fixed; bottom: 30px; right: 30px; width: 44px; height: 44px;
    border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.4); display: none; align-items: center;
    justify-content: center; color: #fff; font-size: 22px; cursor: pointer; z-index: 99;
}
#back-to-top.show { display: flex; }

/* 移动端微调 */
@media screen and (max-width: 1000px) {
    #search-box { width: 92%; }
    #search-input { font-size: 0.95rem; padding: 14px 16px; }
    #engine-icon { padding: 0 12px; font-size: 1.1rem; }
    #search-botton { width: 48px; }
}