/* =========================================
   1. 设计令牌 (全局变量配置)
   ========================================= */
:root {
    /* 极致深邃的色彩系统 */
    --bg-color: #09090b;             /* 纯粹深黑背景 */
    --text-primary: #ffffff;         /* 绝对视觉重心（时间、搜索输入）*/
    --text-secondary: #c4c4cf;       /* 次要信息（日期） — 提亮以增强可读性 */
    --text-tertiary: #6b6b7b;        /* 弱化信息（书签文字、搜索占位符） — 提亮 */
      
    /* 毛玻璃与流光参数 */
    --search-bg: rgba(255, 255, 255, 0.08);       /* 提升背板可见度 */
    --search-border: rgba(255, 255, 255, 0.14);   /* 提升边框可见度 */
    --glow-color: rgba(59, 130, 246, 0.4);        /* 搜索框流光色 (蓝色调) */

    /* 快捷链接图标背板参数 */
    --shortcut-icon-bg: rgba(255, 255, 255, 0.06);   /* 图标默认背板 — 可感知 */
    --shortcut-icon-border: rgba(255, 255, 255, 0.10); /* 图标默认边框 */
    
    /* 快捷链接间距 — 同时控制链接之间、搜索按钮与链接之间的间距 */
    --shortcut-spacing: 16px;                      /* 由 config.json 中 appearance.shortcutSpacing 控制 */
    
    /* 动态毛玻璃模糊度 — 由 config.json 中 appearance.glassBlur 控制 */
    --glass-blur: 5px;                           /* 基础模糊（背景/组件），JS 动态覆盖 */
    
    /* 5.5: 侧边栏独立毛玻璃模糊度 — 由设置面板滑块动态同步控制 */
    --sidebar-blur: 48px;                        /* 侧边栏模糊（始终高于背景模糊），JS 动态覆盖 */
    
    /* 全局圆角曲率 — 由 config.json 中 appearance.borderRadius 控制 */
    --border-radius: 12px;                       /* 基础圆角（卡片/搜索框/背板），JS 动态覆盖 */

    /* 书签悬浮效果参数 */
    --hover-glass: rgba(255, 255, 255, 0.06);    /* 悬停时的微弱背板 */
    --hover-blur: 12px;                          /* 悬停下拉模糊，由 JS 按比例自动计算 */
    
    /* 布局与动画 */
    --spacing-y: 56px;               /* 垂直信息流间距 */
    --transition-smooth: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =========================================
   2. 基础重置
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
 * 首屏兜底背景必须是纯 CSS，确保它不依赖配置、网络或 Service Worker。
 * 有上一张壁纸缓存时，HTML 上的内联 background-image 会覆盖这里的渐变。
 */
html {
    min-height: 100%;
    background-color: var(--bg-color);
    background-image:
        radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.28), transparent 42%),
        radial-gradient(circle at 82% 88%, rgba(109, 40, 217, 0.20), transparent 46%),
        linear-gradient(145deg, #101827 0%, #09090b 56%, #111827 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

html.cached-background-ready {
    background-color: var(--bg-color);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

html.cached-background-ready body {
    background-color: transparent;
}

.background-stack {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.background-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
    will-change: opacity;
}

.background-layer.is-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .background-layer {
        transition-duration: 0.01ms;
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* 让首屏直接透出 html 上的缓存壁纸或纯 CSS 兜底背景。 */
    background-color: transparent;
    color: var(--text-primary);
    min-height: 100vh;
    /* 关键修复 1：强制撑满视口宽度，为 Flex 居中提供绝对参照物 */
    width: 100vw; 
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;

    /* 背景图适配声明 */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    transition: background-image 0.8s ease-in-out, background-color 0.8s ease-in-out;
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* 升级原有的 .ambient-background */
.ambient-background {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* 加深黑底遮罩至 55%，并在顶部保留一丝微弱的蓝色环境光 */
    background: 
        radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.12), transparent 50%),
        rgba(9, 9, 11, 0.55); 
    /* 模糊度由 config.json 中 appearance.glassBlur 控制，实现免改代码调节磨砂质感 */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    pointer-events: none;
}
/* =========================================
   4. 信息流核心容器
   ========================================= */
.flow-container {
    width: 100%;
    max-width: 720px;
    padding: 0 24px;
    /* 关键修复 2：利用 margin auto 强制盒子自身在页面绝对水平居中 */
    margin: 18vh auto 0 auto; 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-y);
}

/* =========================================
   5. 时间日期排版
   ========================================= */
.datetime-module {
    text-align: center;
    user-select: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.time-text {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -3px;
    font-variant-numeric: tabular-nums;
    /* 纯色 fallback（不支持 background-clip: text 的浏览器） */
    color: #ffffff;
    /* 渐变文字效果 */
    background: linear-gradient(180deg, #ffffff 0%, #d4d4d8 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 高阶柔和文字阴影，防止亮色壁纸吃字 */
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6));
}

.date-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 400;
    min-height: 1.5em;
    /* 核心追加：确保小字在复杂背景下清晰可见 */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* =========================================
   6. 搜索框流光设计
   ========================================= */
/* 搜索模块宽度由行容器统一控制 */
.search-module {
    width: 100%;
}

.search-wrapper {
    display: flex;
    align-items: center;
    background: var(--search-bg);
    border: 1px solid var(--search-border);
    border-radius: var(--border-radius);
    padding: 8px 16px;
    transition: var(--transition-smooth);
    /* 底阴影增强层次，使搜索框从背景中"浮起" */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* 核心：聚焦时的阴影与边框过渡 */
.search-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.12),
        0 12px 32px -8px var(--glow-color);
    transform: translateY(-1px);
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 1.05rem;
    padding: 10px 0;
}

.search-input::placeholder {
    color: var(--text-secondary);
    font-weight: 300;
    opacity: 0.65;
}

.search-submit {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: color var(--transition-smooth);
}

.search-wrapper:focus-within .search-submit {
    color: var(--text-primary);
}

.advanced-search-panel {
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: calc(var(--border-radius) * 0.92);
    background: transparent;
    box-shadow: none;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                margin-top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease,
                background 0.25s ease;
}

.advanced-search-panel.active {
    max-height: 900px;
    opacity: 1;
    pointer-events: auto;
    margin-top: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}

.advanced-param-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.advanced-param-label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    line-height: 1.1;
    opacity: 0.78;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.advanced-param-input,
.advanced-param-select-trigger {
    width: 100%;
    min-width: 0;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: calc(var(--border-radius) * 0.62);
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
    padding: 0 9px;
    outline: none;
    font-size: 0.78rem;
}

.advanced-param-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    text-align: left;
}

.advanced-param-select-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.advanced-param-select-trigger svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.72;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.advanced-param-custom-select {
    position: relative;
    min-width: 0;
}

.advanced-param-custom-select.open .advanced-param-select-trigger {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
    border-bottom-color: rgba(255, 255, 255, 0.06);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.advanced-param-custom-select.open .advanced-param-select-trigger svg {
    opacity: 1;
    transform: rotate(180deg);
}

.advanced-param-options {
    max-height: 0;
    overflow-y: auto;
    padding: 0 6px;
    border: 1px solid transparent;
    border-top: 0;
    border-radius: 0 0 calc(var(--border-radius) * 0.62) calc(var(--border-radius) * 0.62);
    background: rgba(255, 255, 255, 0.065);
    box-shadow: none;
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: max-height 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.24s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.18s ease,
                opacity 0.18s ease,
                transform 0.18s ease;
    scrollbar-width: none;
}

.advanced-param-custom-select.open .advanced-param-options {
    max-height: 220px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-color: rgba(255, 255, 255, 0.22);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.advanced-param-option {
    width: 100%;
    min-height: 28px;
    border: 0;
    border-radius: calc(var(--border-radius) * 0.52);
    background: transparent;
    color: var(--text-secondary);
    padding: 0 8px;
    cursor: pointer;
    text-align: left;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.16s ease, color 0.16s ease;
}

.advanced-param-option:hover,
.advanced-param-option.selected {
    background: rgba(255, 255, 255, 0.13);
    color: var(--text-primary);
}

.advanced-param-options::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.advanced-param-options::-webkit-scrollbar-track {
    background: transparent;
}

.advanced-param-options::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
}

.advanced-param-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.65;
}

.advanced-param-input:focus,
.advanced-param-select-trigger:focus {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
}

.search-module[data-morph="minimal"]:not(.expanded) .advanced-search-panel {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

@media (max-width: 680px) {
    .advanced-search-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =========================================
   7. 快捷链接悬浮设计 (无生硬大底板)
   ========================================= */
.shortcuts-module {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--shortcut-spacing);
    width: 100%;
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s ease;
}

.loading-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
    opacity: 0.7;
}

/* 首屏加载态：始终维持最终布局的尺寸，避免异步配置到达前出现左右割裂。 */
.app-loading .search-module {
    visibility: hidden;
    pointer-events: none;
}

.app-loading .shortcuts-module {
    min-height: 64px;
    width: 560px;
    max-width: 100%;
    justify-content: center;
}

.app-loading .loading-text {
    min-height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.loading-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
}

@keyframes loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-spinner { animation: none; }
}

.shortcut-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 80px;
    cursor: pointer;
    transition: opacity 0.25s ease;
}

/* 图标背板：默认半可见，悬停时增强光晕 */
.icon-slot {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    background: var(--shortcut-icon-bg);
    border: 1px solid var(--shortcut-icon-border);
    transition: var(--transition-smooth);
    /* 微弱文字阴影，确保在亮色壁纸上也能辨识 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.text-icon {
    font-size: 1.3rem;
    font-weight: 500;
}

.item-label {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 400;
    letter-spacing: 0.5px;
    opacity: 0.95;
    transition: var(--transition-smooth);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 加强阴影，确保在任意壁纸上清晰可辨 */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}


.shortcut-item:hover .item-label {
    color: var(--text-primary);
    opacity: 1;
}

/* =========================================
   8. 隐形 Widget 预留区
   ========================================= */
.widget-slot {
    width: 100%;
    max-width: 580px;
    /* 无背景、无边框。彻底留白 */
}
/* =========================================
   9. 核心组件追加样式 (时钟)
   ========================================= */

/* =========================================
    9b. 侧边抽屉式搜索引擎选择器 (左侧滑入)
    ========================================= */

/* 引擎切换按钮 — 统一样式定义 */
.engine-indicator {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding-right: 12px;
    cursor: pointer;
    user-select: none;
}

/* --- 侧边抽屉主容器（非模态浮层） --- */
.search-engine-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    /* 5.4: 宽度 240px，适中宽度容纳分类标题 */
    width: 240px;
    max-width: 82vw;
    height: 100vh;
    /* 5.2 + 5.5: 超通透毛玻璃材质 — 模糊度绑定独立 CSS 变量，由设置面板滑块动态控制 */
    background: rgba(18, 18, 28, 0.22);
    backdrop-filter: blur(var(--sidebar-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--sidebar-blur)) saturate(180%);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overflow-x: hidden;
    /* 自定义滚动条 */
    scrollbar-width: none;
}

.search-engine-drawer::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.search-engine-drawer::-webkit-scrollbar-track {
    background: transparent;
}
.search-engine-drawer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
}

/* 抽屉滑出激活态 */
.search-engine-drawer.active {
    transform: translateX(0);
}

/* --- 5.1 + 5.4: 抽屉头部（极致紧凑 — 去除标题，拉低高度） --- */
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

/* --- 5.3 + 5.4: 固定按钮（大头针图标 · 微缩适配窄侧边栏） --- */
.drawer-pin {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.3s ease,
                border-color 0.25s ease, box-shadow 0.25s ease;
    padding: 5px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.drawer-pin svg {
    width: 14px;
    height: 14px;
    display: block;
    transition: transform 0.3s ease;
}

.drawer-pin:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    transform: scale(1.08);
}

.drawer-pin:active {
    transform: scale(0.92);
}

/* 固定激活态：高亮蓝色调 + 旋转 45° 模拟"钉入"效果 */
.drawer-pin.pinned {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.45);
    color: #93c5fd;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

.drawer-pin.pinned svg {
    transform: rotate(-45deg);
}

/* 5.4: 关闭按钮同步微缩 */
.drawer-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.3s ease;
    padding: 5px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.drawer-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.drawer-close svg {
    width: 14px;
    height: 14px;
}

/* --- 5.4: 引擎列表容器（压缩内边距，提高空间利用率） --- */
.drawer-engine-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
}

/* --- 5.4a: 分类标题（可折叠，嵌在引擎列表中作为分组视觉分隔） --- */
.drawer-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.8px;
    padding: 14px 12px 8px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
    cursor: pointer;
    opacity: 0;
    transform: translateX(-16px);
    transition: color 0.2s ease, background 0.2s ease;
    border-radius: 6px;
}

.drawer-category-header:hover {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
}

.drawer-category-header:active {
    background: rgba(255, 255, 255, 0.07);
}

/* 分类名称文字 */
.drawer-category-text {
    flex: 1;
    min-width: 0;
}

/* 折叠箭头图标 */
.drawer-category-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-left: 6px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.55;
}

.drawer-category-header:hover .drawer-category-chevron {
    opacity: 0.9;
}

/* 折叠态：箭头旋转 -90° 表示收起 */
.drawer-category-header.collapsed .drawer-category-chevron {
    transform: rotate(-90deg);
}

/* 第一个分类标题不加顶部分隔线 */
.drawer-category-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 8px;
}

/* 引擎组容器：折叠由 JS 控制，展开时 max-height 平滑过渡避免下方元素瞬移 */
.drawer-category-engines {
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer-category-engines.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: none;
}

/* 抽屉激活时触发分类标题淡入 */
.search-engine-drawer.active .drawer-category-header {
    animation: drawer-cat-fade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes drawer-cat-fade-in {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- 5.4: 单个引擎项（紧凑 padding 适配窄侧边栏） --- */
.drawer-engine-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    /* 默认隐藏动画，由 .active 父级触发 */
    opacity: 0;
    transform: translateX(-20px) scale(0.92);
}

/* 抽屉激活时触发瀑布流动画 */
.search-engine-drawer.active .drawer-engine-item {
    animation: drawer-item-cascade 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.drawer-engine-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(4px);
}

.drawer-engine-item:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.12);
}

/* --- 5.4: 引擎图标（缩小适配窄侧边栏） --- */
.drawer-engine-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    user-select: none;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    overflow: hidden;
}

.drawer-engine-item:hover .drawer-engine-icon {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 18px rgba(59, 130, 246, 0.2);
    transform: scale(1.06);
}

.drawer-engine-icon span {
    display: block;
    max-width: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 5.4: 引擎名称标签（微缩字号） --- */
.drawer-engine-name {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 当前选中引擎的标记 */
.drawer-engine-advanced-btn {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.72;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.drawer-engine-advanced-btn svg {
    width: 14px;
    height: 14px;
}

.drawer-engine-advanced-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.16);
    color: #e5e7eb;
    opacity: 1;
    transform: scale(1.06);
}

.drawer-engine-advanced-btn:active {
    transform: scale(0.94);
}

.drawer-engine-item.active-engine {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.35);
}

.drawer-engine-item.active-engine .drawer-engine-icon {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.25);
}

/* --- 瀑布流淡入+滑入关键帧 --- */
.drawer-engine-item.active-advanced {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.42);
}

.drawer-engine-item.active-advanced .drawer-engine-icon,
.drawer-engine-item.active-advanced .drawer-engine-advanced-btn {
    background: rgba(245, 158, 11, 0.22);
    border-color: rgba(245, 158, 11, 0.42);
    color: #fde68a;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.22);
}

.engine-indicator.advanced-active {
    color: #fde68a;
}

@keyframes drawer-item-cascade {
    from {
        opacity: 0;
        transform: translateX(-24px) scale(0.88);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* =========================================
   9c. 快捷链接右侧侧栏 (镜像左侧搜索引擎抽屉)
   ========================================= */

/* --- 右侧抽屉主容器 --- */
.shortcuts-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    width: 220px;
    max-width: 82vw;
    height: 100vh;
    background: rgba(18, 18, 28, 0.22);
    backdrop-filter: blur(var(--sidebar-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--sidebar-blur)) saturate(180%);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}

.shortcuts-drawer::-webkit-scrollbar {
    width: 3px;
}
.shortcuts-drawer::-webkit-scrollbar-track {
    background: transparent;
}
.shortcuts-drawer::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 3px;
}

.shortcuts-drawer.active {
    transform: translateX(0);
}

/* --- 右侧抽屉头部 --- */
.shortcuts-drawer-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

/* --- 右侧抽屉链接列表 --- */
.shortcuts-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
}

/* --- 右侧抽屉单个链接项 --- */
.shortcuts-drawer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform: translateX(20px) scale(0.92);
}

/* 抽屉激活时触发瀑布流动画（从右侧滑入） */
.shortcuts-drawer.active .shortcuts-drawer-item {
    animation: shortcuts-drawer-item-cascade 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.shortcuts-drawer-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateX(-4px);
}

.shortcuts-drawer-item:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.12);
}

/* 右侧抽屉链接图标 */
.shortcuts-drawer-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    user-select: none;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    overflow: hidden;
}

.shortcuts-drawer-item:hover .shortcuts-drawer-icon {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 4px 18px rgba(59, 130, 246, 0.2);
    transform: scale(1.06);
}

.shortcuts-drawer-icon span {
    display: block;
    max-width: 36px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右侧抽屉链接名称 */
.shortcuts-drawer-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右侧抽屉瀑布流关键帧（从右滑入） */
@keyframes shortcuts-drawer-item-cascade {
    from {
        opacity: 0;
        transform: translateX(24px) scale(0.88);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* --- "更多"快捷链接项（省略号触发器） --- */
/* 重置 button 元素的浏览器默认样式，避免白色方框 */
.shortcut-item.shortcut-more {
    background: transparent;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.shortcut-item.shortcut-more .icon-slot {
    background: rgba(255, 255, 255, 0.04);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    font-size: 1rem;
    letter-spacing: 1px;
}

.shortcut-item.shortcut-more:hover .icon-slot {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}

/* =========================================
   10. 高级感过渡动效 (Animations)
   ========================================= */

/* 动效 1：bar 模式下搜索交互时，让下方书签组轻微变淡（弱化视觉干扰）
   注意：由 JavaScript 通过 body.search-interacting 控制。
   minimal 模式下改为逐项淡化，由 JS 直接控制每个 .shortcut-item 的 opacity，
   因此毯式淡化规则仅对 bar 模式生效，避免父级 opacity 干扰子元素独立控制。 */
body.search-interacting .search-shortcuts-row[data-morph="bar"] .shortcuts-module {
    opacity: 0.35;
    filter: blur(2px);
    pointer-events: none;
    transform: translateY(4px);
}

/* 动效 2：书签图标悬停时的平滑微上移、放大与光晕扩散 */
.shortcut-item:hover .icon-slot {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(var(--hover-blur));
    -webkit-backdrop-filter: blur(var(--hover-blur));
    color: var(--text-primary);
    transform: translateY(-4px) scale(1.08);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.12); /* 柔和的环境底光 */
}

/* =========================================
   12. 搜索框形态切换 (Search Box Morphing)
   ========================================= */

/* --- 搜索模块居中布局容器 --- */
.search-module {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =========================================
   12a. 搜索+快捷链接行容器
   ========================================= */

/* 行容器：包裹搜索模块与快捷链接 */
.search-shortcuts-row {
    display: flex;
    width: 100%;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

/* 即使 data-morph 因脚本异常缺失，也必须退化为稳定的纵向布局。 */
.search-shortcuts-row:not([data-morph]) {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-y);
}

/* bar 模式：纵向排列，搜索在上 / 链接在下 */
.search-shortcuts-row[data-morph="bar"] {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-y);
}

/* minimal 模式：grid 叠加布局 — 搜索栏从左向右展开，覆盖在静止的链接上方 */
.search-shortcuts-row[data-morph="minimal"] {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    min-height: 64px;
}

/* bar 模式下搜索模块撑满行宽 */
.search-shortcuts-row[data-morph="bar"] .search-module {
    width: 100%;
    max-width: none;
}

/* minimal 模式：搜索模块与链接组共享同一 grid cell */
.search-shortcuts-row[data-morph="minimal"] > .search-module,
.search-shortcuts-row[data-morph="minimal"] > .shortcuts-module {
    grid-row: 1;
    grid-column: 1;
}

/* 搜索模块：居中（JS 动态 margin-right 偏移至链接左侧），展开后拉伸填满行宽 */
.search-shortcuts-row[data-morph="minimal"] > .search-module {
    justify-self: center;
    z-index: 2;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

/* 搜索模块完成展开后居中，宽度与链接组一致，恰好替代链接位置 */
.search-shortcuts-row[data-morph="minimal"] > .search-module.morph-expanded {
    justify-self: center;
    margin-right: 0 !important;
}

/* 快捷链接组：居中、低层级，不换行、不收缩，静止不动 */
/* 左对齐布局，使最左侧快捷链接与搜索按钮的间距 = 快捷链接之间的间距 */
.search-shortcuts-row[data-morph="minimal"] > .shortcuts-module {
    z-index: 1;
    justify-self: center;
    width: 560px;
    max-width: none;
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--shortcut-spacing);
}

/* ========================================================
    形态 A — Bar (全宽标准框)
    ======================================================== */
.search-module[data-morph="bar"] .search-wrapper {
    display: flex;
    width: 100%;
}

/* ========================================================
   形态 B — Minimal (按钮变形展开)
   原理：.search-wrapper 自身从圆形按钮 morph 为全宽搜索栏
   放大镜图标 (search-submit) 从圆心滑至右侧，内容从左侧淡入
   ======================================================== */

/* --- 折叠态：圆形按钮，仅显示放大镜图标 --- */
/* 搜索包装器宽度由 JS 内联样式精确驱动（避免 CSS % 循环依赖） */
/* 高度匹配快捷链接整体（图标+文字），使同一排视觉协调 */
.search-module[data-morph="minimal"] .search-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;            /* 放大镜居中 */
    width: 64px;                        /* 默认折叠宽度，JS 动画时覆盖 */
    height: 64px;                       /* 匹配快捷链接（44px图标+10px间距+文字） */
    min-width: 0;
    border-radius: 50%;                 /* 正圆形 */
    padding: 0;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    transition: border-radius 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.3s ease,
                border-color 0.3s ease;
}

/* 圆形按钮悬停光晕 */
.search-module[data-morph="minimal"] .search-wrapper:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.2);
}

/* 折叠态：隐藏引擎指示器与输入框（通过缩放与透明） */
.search-module[data-morph="minimal"] .engine-indicator,
.search-module[data-morph="minimal"] .search-input {
    display: flex;
    max-width: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    flex: 0 0 0;
    transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 折叠态：放大镜图标居中，颜色明亮可辨 */
.search-module[data-morph="minimal"] .search-submit {
    color: var(--text-primary);
    opacity: 0.8;
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* --- 展开态：按钮向右拉伸为全宽搜索栏 --- */
/* 宽度已由 JS 动画设为目标值，此处仅切换视觉形态与高度 */
.search-module[data-morph="minimal"].expanded .search-wrapper {
    height: 52px;                         /* 展开后收缩为标准搜索栏高度 */
    border-radius: var(--border-radius);  /* 圆形 → 圆角矩形 */
    justify-content: flex-start;          /* 内容左对齐 */
    padding: 0 16px;
    background: var(--search-bg);
    border-color: var(--search-border);
    cursor: text;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.search-module[data-morph="minimal"].expanded .search-wrapper:hover {
    background: var(--search-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* 展开态：引擎指示器与输入框淡入展开 */
.search-module[data-morph="minimal"].expanded .engine-indicator,
.search-module[data-morph="minimal"].expanded .search-input {
    max-width: 100%;
    opacity: 1;
    overflow: visible;
}

.search-module[data-morph="minimal"].expanded .engine-indicator {
    flex: 0 0 auto;
    padding-right: 12px;
}

.search-module[data-morph="minimal"].expanded .search-input {
    flex: 1;
    padding: 10px 0;
}

/* 展开态：放大镜图标滑至右侧 */
.search-module[data-morph="minimal"].expanded .search-submit {
    margin-left: auto;                    /* 推至 flex 容器最右 */
    color: var(--text-secondary);
}

/* 展开态聚焦增强 */
.search-module[data-morph="minimal"].expanded .search-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12),
                0 12px 32px -8px var(--glow-color);
}

.search-module[data-morph="minimal"].expanded .search-wrapper:focus-within .search-submit {
    color: var(--text-primary);
}

/* 形态 B 展开态 + 搜索交互时，让 shortcuts 模块变淡
   由 JS 通过 body.search-interacting 统一管理，与动效 1 共用规则 */

/* =========================================
   11. 无操作闲置沉浸模式 (Zen Mode)
    ========================================= */

/* Zen Mode 激活时：搜索框、书签组平滑淡出 */
.zen-mode .search-module,
.zen-mode .shortcuts-module {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Zen Mode 下：时间整体上移至顶部 */
.zen-mode .flow-container {
    margin-top: 4vh;
}

/* Zen Mode 下：时间文字缩小并取消渐变色 */
.zen-mode .time-text {
    font-size: 2.8rem !important;
    letter-spacing: -1px;
    /* 取消渐变色，改用纯白单色 */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: initial;
    color: var(--text-primary);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

/* Zen Mode 下：日期行字体略微缩小 */
.zen-mode .date-row {
    font-size: 0.85rem;
}

/* Zen Mode 下：取消毛玻璃背景模糊效果 */
.zen-mode .ambient-background {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 确保 Zen Mode 下时间模块始终可见 */
.zen-mode .datetime-module {
    opacity: 1;
    visibility: visible;
}

/* 为 Zen Mode 的缩小上移动画添加过渡支持 */
.flow-container {
    transition: margin-top 0.6s ease;
}

.time-text {
    transition: font-size 0.6s ease, color 0.6s ease, filter 0.6s ease, background 0.6s ease;
}

.date-row {
    transition: font-size 0.6s ease;
}

.ambient-background {
    transition: backdrop-filter 0.6s ease, -webkit-backdrop-filter 0.6s ease;
}

/* 非 Zen Mode 状态下，搜索模块平滑淡入恢复（快捷链接 transition 已在上方统一定义） */
.search-module {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* =========================================
   12. 全端响应式布局 (Media Queries)
    ========================================= */

@media screen and (max-width: 768px) {
    /* 1. 整体流式容器的边距与顶部间距调整 */
    .flow-container {
        margin-top: 12vh;
        padding: 0 16px;
        gap: 40px; /* 缩小垂直模块间距 */
    }

    /* 2. 时钟字体平滑缩小，防止在小屏上折行 */
    .time-text {
        font-size: 4.5rem;
        letter-spacing: -2px;
    }

    .date-row {
        font-size: 0.85rem;
    }

    /* 3. 搜索框自适应拉满，增加点击触控区域高度 */
    .search-module {
        width: 100%;
    }
    
    .search-wrapper {
        padding: 10px 16px; /* 增加上下 padding，方便手指点按 */
    }

    .search-input {
        font-size: 1rem;
    }

    /* 4. 书签组自动转为紧凑流动排列，彻底消除横向滚动 */
    .shortcuts-module {
        max-width: 100%;
        gap: 16px;
        /* 在移动端采用网格流式布局，保证单手大拇指的可达性 */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
        justify-items: center;
    }

    .icon-slot {
        width: 48px;  /* 移动端图标稍微放大一丁点以防误触 */
        height: 48px;
    }

    /* 5. 移动端取消 hover 的位移（避免手指点击时产生视觉跳跃） */
    .shortcut-item:active .icon-slot {
        transform: scale(0.95); /* 移动端改为点击时的微缩反馈 */
        background: rgba(255, 255, 255, 0.1);
    }

    /* 6. minimal 模式移动端适配：缩小间距与高度，grid 叠加布局由桌面端规则统一控制 */
    .search-shortcuts-row[data-morph="minimal"] > .shortcuts-module {
        width: calc(100vw - 32px);
        max-width: 560px;
        justify-content: flex-start;
        gap: var(--shortcut-spacing);
    }

    .search-shortcuts-row[data-morph="minimal"] .search-wrapper {
        height: 56px;
        width: 56px;
    }

    /* 7. 展开态移动端回退：搜索栏撑满视口宽度（JS 内联样式优先） */
    .search-module[data-morph="minimal"].expanded .search-wrapper {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================
   13. 设置面板 (Settings Panel) — 4.2 / 4.3 / 4.4
   ========================================= */

/* --- 左上角壁纸锁定按钮 --- */
.wallpaper-lock {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    width: 38px;
    height: 38px;
    border: none;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: transparent;
    opacity: 0.55;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.wallpaper-lock:hover,
.wallpaper-lock:focus-visible {
    opacity: 1;
    color: #ffffff;
    transform: scale(1.06);
}

.wallpaper-lock:active {
    transform: scale(0.9);
}

.wallpaper-lock svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.wallpaper-lock.is-locked {
    opacity: 1;
    color: #ef4444;
}

.wallpaper-lock.is-locked svg {
    fill: currentColor;
    filter: drop-shadow(0 0 5px rgba(239, 68, 68, 0.45));
}

/* --- 13a. 右上角隐形设置触发按钮 --- */
.settings-trigger {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease,
                color 0.3s ease, transform 0.4s ease;
    padding: 6px;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.settings-trigger:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-primary);
    transform: rotate(30deg);
}

.settings-trigger:active {
    transform: rotate(60deg) scale(0.92);
}

.settings-trigger svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* --- 13b. 设置面板背景遮罩 --- */
.settings-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.settings-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* --- 13c. 设置面板主容器 (右侧滑入 + 毛玻璃) --- */
.settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1002;
    width: 380px;
    max-width: 88vw;
    height: 100vh;
    background: rgba(20, 20, 28, 0.82);
    backdrop-filter: blur(32px) saturate(140%);
    -webkit-backdrop-filter: blur(32px) saturate(140%);
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    overflow-x: hidden;
    /* 自定义滚动条 */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}

.settings-panel::-webkit-scrollbar {
    width: 4px;
}
.settings-panel::-webkit-scrollbar-track {
    background: transparent;
}
.settings-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.settings-panel.open {
    transform: translateX(0);
}

/* --- 13d. 面板头部 --- */
.settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.settings-panel-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin: 0;
}

.settings-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
    padding: 6px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.settings-panel-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.settings-panel-close svg {
    width: 16px;
    height: 16px;
}

/* --- 13e. 面板内容区 --- */
.settings-panel-body {
    padding: 20px 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- 13f. 设置分组 --- */
.settings-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    user-select: none;
}

.settings-value-display {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.settings-hint {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    line-height: 1.4;
}

.settings-hint code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
    font-size: 0.75rem;
}

/* --- 13g. 文本输入框 --- */
.settings-text-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
    outline: none;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.settings-text-input:focus {
    border-color: rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.settings-text-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.7;
}

/* --- 13h. 滑动条 (Range Slider) --- */
.settings-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.10);
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.settings-slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Firefox 样式 */
.settings-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 2px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* --- 13i. JSON 导入文本域 --- */
.settings-import-group {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 24px;
    margin-top: 4px;
}

.settings-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
    resize: vertical;
    outline: none;
    line-height: 1.5;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.settings-textarea:focus {
    border-color: rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.settings-textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 0.6;
}

/* --- 13j. 导入按钮 --- */
.settings-import-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease,
                box-shadow 0.25s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    align-self: flex-start;
}

.settings-import-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.settings-import-btn:active {
    transform: scale(0.97);
}

/* 导入反馈提示 */
.settings-import-hint {
    min-height: 1.2em;
}

.settings-import-hint.success {
    color: #4ade80;
}

.settings-import-hint.error {
    color: #f87171;
}

/* --- 13k. 分区标题 --- */
.settings-section-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    margin-top: 4px;
}

.settings-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin: 0;
}

/* --- 13l. 下拉选择框 --- */
.settings-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.settings-select:focus {
    border-color: rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.settings-select option {
    background: #1a1a24;
    color: var(--text-primary);
}

/* --- 13m. Toggle 开关 --- */
.settings-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.settings-toggle {
    display: none;
}

.settings-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.settings-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: transform 0.3s ease, background 0.3s ease;
}

.settings-toggle:checked + .settings-toggle-track {
    background: rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.6);
}

.settings-toggle:checked + .settings-toggle-track::after {
    transform: translateX(20px);
    background: var(--text-primary);
}

/* --- 13n. 列表项 (搜索引擎 / 快捷链接) --- */
.settings-list-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.10) transparent;
}

/* 设置面板中搜索引擎分类标题 */
.settings-category-header {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.6px;
    padding: 12px 4px 4px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
}

.settings-category-header:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 2px;
}

.settings-list-container::-webkit-scrollbar {
    width: 4px;
}
.settings-list-container::-webkit-scrollbar-track {
    background: transparent;
}
.settings-list-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.10);
    border-radius: 4px;
}

.settings-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: background 0.2s ease, border-color 0.2s ease;
    gap: 8px;
}

.settings-list-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.settings-list-item-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.settings-list-item-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.settings-list-item-name {
    font-size: 0.82rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.settings-list-item-url {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.settings-list-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.settings-item-edit-btn,
.settings-item-del-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    padding: 0;
}

.settings-item-edit-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.3);
}

.settings-item-del-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* --- 13o. 添加按钮 --- */
.settings-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    align-self: flex-start;
}

.settings-add-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.24);
    color: var(--text-primary);
}

/* --- 13p. 编辑对话框 (Modal) --- */
.settings-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: dialog-fade-in 0.2s ease;
}

@keyframes dialog-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.settings-dialog {
    background: rgba(28, 28, 38, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: dialog-slide-up 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dialog-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.settings-dialog-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 20px 20px 0;
    margin: 0;
}

.settings-dialog-body {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-dialog-body .settings-label {
    font-size: 0.78rem;
    margin-bottom: -6px;
}

.settings-dialog-body .settings-text-input {
    font-size: 0.85rem;
}

.settings-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 20px;
}

.settings-dialog-cancel,
.settings-dialog-save {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.settings-dialog-cancel {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.settings-dialog-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
}

.settings-dialog-save {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.settings-dialog-save:hover {
    background: rgba(59, 130, 246, 0.4);
    color: var(--text-primary);
}

/* --- 13q. 文件上传 --- */
.settings-file-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-file-input {
    display: none;
}

.settings-file-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.settings-file-label:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--text-primary);
}

.settings-file-name {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* --- 13r. 导出按钮 --- */
.settings-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    align-self: flex-start;
}

.settings-export-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.settings-export-btn:active {
transform: scale(0.97);
}

.settings-cache-group {
    margin-top: 12px;
}

.settings-danger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.36);
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    align-self: flex-start;
}

.settings-danger-btn:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fee2e2;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.18);
    transform: translateY(-1px);
}

.settings-danger-btn:active {
    transform: scale(0.97);
}

/* --- 13t. Toast 轻量通知 --- */
.settings-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 10010;
    padding: 12px 28px;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.settings-toast.active {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* --- 13s. 移动端适配 --- */
@media screen and (max-width: 768px) {
    .wallpaper-lock {
        top: 12px;
        left: 12px;
        width: 32px;
        height: 32px;
        padding: 7px;
    }

    .wallpaper-lock svg {
        width: 17px;
        height: 17px;
    }

    .settings-trigger {
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        padding: 5px;
    }

    .settings-trigger svg {
        width: 17px;
        height: 17px;
    }

    .settings-panel {
        width: 100%;
        max-width: 100vw;
        border-left: none;
        border-radius: 0;
    }

    .settings-panel-header {
        padding: 20px 18px 14px;
    }

    .settings-panel-body {
        padding: 16px 18px 28px;
        gap: 20px;
    }

    .settings-dialog {
        width: 92vw;
        border-radius: 14px;
    }

    .settings-list-item-info {
        gap: 6px;
    }

    .settings-list-item-name {
        max-width: 70px;
    }

    .settings-list-item-url {
        font-size: 0.65rem;
    }
}

/* =========================================
   14. 无障碍：尊重用户运动偏好
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* 设置导航保持可见，说明文字提高对比度。 */
.settings-panel-header { position: sticky; top: 0; z-index: 3; background: #202127; }
.settings-intro { margin: 6px 0 0; color: #b9bdc9; font-size: 12px; }
.settings-nav { position: sticky; top: 89px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px; background: #202127; border-bottom: 1px solid #ffffff14; }
.settings-nav a { padding: 7px 9px; border-radius: 8px; color: #d5d8e1; background: #ffffff08; font-size: 12px; }
.settings-nav a:hover, .settings-nav a:focus-visible { background: #ffffff20; color: white; }
.settings-panel .settings-hint { color: #b9bdc9; }
.settings-section-title { scroll-margin-top: 156px; }
#setting-engine-filter { margin: 8px 0 14px; }

/* 联合搜索：保留明确的开关和复选状态。 */
button.engine-indicator { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; flex-shrink: 0; }
.joint-search-toggle { margin-right: auto; display: flex; align-items: center; gap: 6px; border: 1px solid #ffffff26; border-radius: 9px; background: #ffffff0d; color: #d5d8e1; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 12px; }
.joint-search-toggle svg { width: 16px; height: 16px; }
.joint-search-toggle[aria-pressed="true"] { background: #3b82f633; color: #bfdbfe; border-color: #60a5fa80; }
.joint-search-status { padding: 10px 14px; margin: 0; color: #b9bdc9; font-size: 12px; line-height: 1.6; }
.joint-check { display: none; width: 15px; height: 15px; border: 1px solid #ffffff60; border-radius: 4px; flex-shrink: 0; }
.joint-search-enabled .joint-check { display: inline-flex; align-items: center; justify-content: center; }
.joint-search-enabled .joint-selected .joint-check { background: #60a5fa; border-color: #60a5fa; }
.joint-search-enabled .joint-selected .joint-check::after { content: '✓'; color: #0f172a; font-size: 12px; }
.joint-search-enabled .drawer-engine-item.active-engine { background: transparent; border-color: transparent; }
.joint-search-enabled .drawer-engine-item.joint-selected { background: #3b82f622; border-color: #60a5fa55; }
.joint-search-enabled .drawer-engine-advanced-btn { display: none; }
.drawer-engine-item:focus-visible, .joint-search-toggle:focus-visible, button.engine-indicator:focus-visible { outline: 2px solid #93c5fd; outline-offset: 3px; }
.search-open-fallback { position: absolute; top: calc(100% + 12px); left: 0; right: 0; z-index: 20; padding: 14px; background: #202127; border: 1px solid #ffffff26; border-radius: 14px; color: #d5d8e1; font-size: 13px; box-shadow: 0 8px 24px #0006; }
.search-open-fallback[hidden] { display: none; }
.search-open-fallback p { margin: 0 0 10px; line-height: 1.6; }
.search-open-fallback a { display: inline-block; margin: 4px; padding: 8px 12px; border-radius: 8px; background: #3b82f633; color: #bfdbfe; }

.engine-unavailable { opacity: 0.5; cursor: not-allowed; }
.engine-unavailable-hint { display: block; font-size: 10px; color: #c5c8d2; font-weight: normal; line-height: 1.5; white-space: normal; }
.joint-search-enabled .engine-unavailable .joint-check { opacity: 0.4; }