/* ============ 全局重置 ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input { font-family:inherit; outline:none; }

/* ============ 主题变量 ============ */
:root {
    --bg-mask: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.05) 100%);
    --glass-bg: rgba(255,255,255,0.55);
    --glass-border: rgba(255,255,255,0.7);
    --glass-shadow: 0 8px 32px rgba(31,38,135,0.15);
    --glass-blur: 22px;
    --glass-saturate: 180%;
    --text-main: #1a1a2e;
    --text-sub: #444;
    --accent: #5b8def;
    --accent-grad: linear-gradient(135deg,#5b8def 0%,#b76cff 100%);
    --cat-bg: rgba(255,255,255,0.5);
    --cat-border: rgba(91,141,239,0.35);
    --site-hover: rgba(91,141,239,0.12);
}
.theme-night {
    --bg-mask: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.4) 100%);
    --glass-bg: rgba(20,28,48,0.6);
    --glass-border: rgba(120,160,255,0.3);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);
    --glass-blur: 22px;
    --glass-saturate: 160%;
    --text-main: #f0f4ff;
    --text-sub: #b8c5e0;
    --accent: #6ea8ff;
    --accent-grad: linear-gradient(135deg,#6ea8ff 0%,#c084fc 100%);
    --cat-bg: rgba(25,35,60,0.55);
    --cat-border: rgba(110,168,255,0.4);
    --site-hover: rgba(110,168,255,0.18);
}

/* ============ 壁纸 ============ */
#wallpaper {
    position:fixed; inset:0; z-index:-2;
    background-size:cover; background-position:center; background-repeat:no-repeat;
    transition:background-image .6s ease;
}
#wallpaper-mask {
    position:fixed; inset:0; z-index:-1;
    background:var(--bg-mask);
    transition:background .4s;
}

/* ============ 苹果毛玻璃通用类 ============ */
.glass {
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* ============ 顶部栏 ============ */
.topbar {
    display:flex; justify-content:space-between; align-items:flex-start;
    padding:24px 32px; gap:16px; flex-wrap:wrap;
    position:relative; z-index:20;
}
.widgets { display:flex; gap:16px; flex-wrap:wrap; }
.widget {
    border-radius:16px;
    padding:10px 18px;
    color:var(--text-main);
    min-width:120px;
}
.clock-widget { cursor:pointer; transition:transform .2s; }
.clock-widget:hover { transform:translateY(-2px); }
.clock-time { font-size:26px; font-weight:600; letter-spacing:1px; line-height:1.1; }
.clock-date { font-size:12px; color:var(--text-sub); margin-top:2px; }
.weather-widget { display:flex; align-items:center; gap:10px; }
.weather-icon { font-size:24px; }
.weather-temp { font-size:18px; font-weight:600; }
.weather-city { font-size:11px; color:var(--text-sub); }

.topbar-actions { display:flex; gap:10px; }
.icon-btn {
    width:42px; height:42px; border-radius:50%;
    font-size:18px; color:var(--text-main);
    display:flex; align-items:center; justify-content:center;
    transition:transform .2s, background .2s;
}
.icon-btn:hover { transform:translateY(-2px) scale(1.05); background:var(--accent-grad); color:#fff; }

/* ============ 主区 ============ */
.main { max-width:1280px; margin:0 auto; padding:24px 32px 80px; position:relative; z-index:10; }

/* ============ 搜索栏 ============ */
.search-section { margin:32px auto 48px; max-width:760px; position:relative; z-index:30; }
.search-box {
    display:flex; align-items:center;
    border-radius:48px;
    padding:6px 6px 6px 8px;
    transition:box-shadow .25s, border-color .25s;
    position:relative;
    z-index:31;
}
.search-box:focus-within {
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(91,141,239,0.18), var(--glass-shadow);
}
.engine-select { position:relative; z-index:35; }
.engine-current {
    display:flex; align-items:center; gap:8px;
    padding:8px 14px; border-radius:32px;
    cursor:pointer; user-select:none;
    color:var(--text-main); font-size:14px;
    transition:background .2s;
}
.engine-current:hover { background:var(--site-hover); }
.engine-current img { width:20px; height:20px; border-radius:4px; }
.caret { font-size:10px; color:var(--text-sub); }

/* 下拉菜单 - 提高层级避免被遮挡 */
.engine-dropdown {
    position:absolute; top:calc(100% + 8px); left:0;
    min-width:180px; list-style:none; z-index:200;
    border-radius:14px;
    padding:8px; display:none;
    box-shadow:0 12px 40px rgba(0,0,0,0.25);
}
.engine-dropdown.show {
    display:block;
    animation:fadeDown .2s;
}
.engine-dropdown li {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:10px; cursor:pointer;
    color:var(--text-main); font-size:14px;
}
.engine-dropdown li:hover { background:var(--site-hover); }
.engine-dropdown li img { width:20px; height:20px; border-radius:4px; }

#search-input {
    flex:1; border:none; background:transparent;
    font-size:16px; color:var(--text-main);
    padding:10px 14px; height:44px;
}
#search-input::placeholder { color:var(--text-sub); opacity:0.7; }
.search-btn {
    width:44px; height:44px; border-radius:50%;
    background:var(--accent-grad); color:#fff;
    font-size:16px; flex-shrink:0;
    transition:transform .15s;
}
.search-btn:hover { transform:scale(1.06); }

.hot-search {
    display:flex; flex-wrap:wrap; gap:8px;
    margin-top:14px; padding:0 8px;
    position:relative; z-index:10;
}
.hot-search .hot-tag {
    padding:5px 12px; border-radius:14px;
    color:var(--text-sub); font-size:12px; cursor:pointer;
    transition:all .2s;
}
.hot-search .hot-tag:hover { color:var(--accent); transform:translateY(-1px); }
.hot-search .hot-rank { color:#ff6b6b; font-weight:600; margin-right:4px; }

/* ============ 导航分类方框 ============ */
.nav-section {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
    gap:20px;
    position:relative;
    z-index:5;
}
.cat-box {
    border-radius:18px;
    padding:18px 20px 22px;
    transition:transform .25s, box-shadow .25s, border-color .25s;
    animation:fadeUp .5s both;
}
.cat-box:hover {
    transform:translateY(-3px);
    border-color:var(--accent);
    box-shadow:0 12px 36px rgba(91,141,239,0.22);
}
.cat-header {
    display:flex; align-items:center; gap:8px;
    padding-bottom:12px; margin-bottom:14px;
    border-bottom:1px dashed var(--cat-border);
}
.cat-icon { font-size:20px; }
.cat-name {
    font-size:16px; font-weight:600; color:var(--text-main);
    letter-spacing:0.5px;
}
.cat-sites {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(76px, 1fr));
    gap:6px;
}
.site-card {
    display:flex; flex-direction:column; align-items:center;
    padding:12px 6px; border-radius:12px;
    text-align:center; transition:background .2s, transform .2s;
}
.site-card:hover { background:var(--site-hover); transform:translateY(-2px); }
.site-logo {
    width:36px; height:36px; border-radius:9px; margin-bottom:6px;
    object-fit:contain; background:rgba(255,255,255,0.4);
    padding:3px;
    transition:transform .2s;
}
.site-card:hover .site-logo { transform:scale(1.1); }
.site-name {
    font-size:12px; color:var(--text-sub);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width:72px;
}

/* ============ 返回顶部 ============ */
.back-top {
    position:fixed; right:28px; bottom:28px;
    width:44px; height:44px; border-radius:50%;
    background:var(--accent-grad); color:#fff;
    font-size:20px; z-index:40;
    box-shadow:0 6px 20px rgba(91,141,239,0.4);
    opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
.back-top.show { opacity:1; pointer-events:auto; }
.back-top:hover { transform:translateY(-3px); }

/* ============ 通用面板（壁纸/AI） ============ */
.panel {
    position:fixed; top:50%; right:-440px;
    transform:translateY(-50%);
    width:400px; max-width:92vw; max-height:80vh;
    border-radius:20px;
    z-index:100;
    transition:right .3s ease;
    display:flex; flex-direction:column;
}
.panel.show { right:24px; }
.panel-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 22px; border-bottom:1px solid var(--glass-border);
}
.panel-header h3 { font-size:16px; color:var(--text-main); }
.panel-close {
    width:30px; height:30px; border-radius:50%;
    font-size:22px; color:var(--text-sub); line-height:1;
}
.panel-close:hover { background:var(--site-hover); color:var(--accent); }
.panel-body { padding:20px 22px; overflow-y:auto; flex:1; }
.panel-label { display:block; font-size:13px; color:var(--text-sub); margin:10px 0 6px; }
.panel-input {
    width:100%; padding:10px 12px; border-radius:10px;
    border:1px solid var(--glass-border); background:rgba(255,255,255,0.4);
    color:var(--text-main); font-size:14px;
}
.theme-night .panel-input { background:rgba(0,0,0,0.2); }
.panel-file {
    display:block; font-size:13px; color:var(--text-sub);
    padding:8px 0;
}
.panel-btn {
    padding:8px 18px; border-radius:10px; margin-top:10px; margin-right:8px;
    background:var(--accent-grad); color:#fff; font-size:13px;
    transition:transform .15s;
}
.panel-btn:hover { transform:translateY(-1px); }
.panel-btn-sec { background:var(--glass-bg); color:var(--text-main); border:1px solid var(--glass-border); }

/* 壁纸预设 */
.wp-preset {
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.wp-preset .wp-item {
    aspect-ratio:16/10; border-radius:10px;
    background-size:cover; background-position:center;
    cursor:pointer; border:2px solid transparent;
    transition:border-color .2s, transform .2s;
}
.wp-preset .wp-item:hover { transform:scale(1.03); }
.wp-preset .wp-item.active { border-color:var(--accent); }

/* AI 面板 */
.ai-messages {
    height:340px; overflow-y:auto; padding:6px 4px;
    display:flex; flex-direction:column; gap:10px;
}
.ai-msg {
    max-width:88%; padding:10px 14px; border-radius:14px;
    font-size:14px; line-height:1.55; word-wrap:break-word;
}
.ai-bot {
    align-self:flex-start;
    background:rgba(255,255,255,0.5);
    border:1px solid var(--glass-border);
    color:var(--text-main);
}
.theme-night .ai-bot { background:rgba(0,0,0,0.25); }
.ai-user {
    align-self:flex-end;
    background:var(--accent-grad); color:#fff;
}
.ai-input-wrap { display:flex; gap:8px; margin-top:14px; }
.ai-input-wrap input {
    flex:1; padding:10px 14px; border-radius:10px;
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.4); color:var(--text-main);
    font-size:14px;
}
.theme-night .ai-input-wrap input { background:rgba(0,0,0,0.2); }
.ai-input-wrap .panel-btn { margin-top:0; }

/* ============ 动画 ============ */
@keyframes fadeUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeDown { from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ============ 响应式 ============ */
@media (max-width:720px) {
    .topbar { padding:16px; }
    .main { padding:16px 16px 80px; }
    .nav-section { grid-template-columns:1fr; }
    .clock-time { font-size:20px; }
    .widget { padding:8px 12px; min-width:auto; }
    .icon-btn { width:38px; height:38px; font-size:16px; }
    .search-section { margin:20px auto 32px; }
    .engine-dropdown { min-width:160px; }
}