/* =======================================================
 * 不找了导航 - 全端统一尺寸版样式 (等距强迫症完美版)
 * ======================================================= */

:root {
    --bg-body: #f5f6f8;
    --bg-white: #ffffff;
    --bg-topbar: #3d4556;
    --bg-footer: #3d4556;
    --bg-friend-box: #343b4b;
    --text-main: #334155; 
    --text-sub: #475569;   
    --text-desc: #94a3b8;  
    --color-primary: #3b82f6;
    --color-success: #10b981; 
    --max-width: 1330px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; outline: none; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* 统一容器边距 */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }

/* --- 1. 顶部黑色条 --- */
.top-bar { background-color: var(--bg-topbar); color: #b8c4d8; font-size: 11px; padding: 8px 0; letter-spacing: 0.5px; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }

.direct-switch { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.direct-switch span { font-size: 11px; color: #b8c4d8; transition: color 0.3s; }
.direct-switch:hover span { color: #fff; }
.switch-track { position: relative; width: 28px; height: 14px; border-radius: 10px; background-color: #64748b; transition: 0.3s; }
.switch-track.active { background-color: var(--color-success); }
.switch-dot { position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); }
.switch-track.active .switch-dot { transform: translateX(14px); }

/* --- 2. 头部导航 --- */
.site-header { background: var(--bg-white); padding: 14px 0; border-bottom: 1px solid #ebebeb; }
.header-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

.logo-area { display: flex; align-items: center; gap: 10px; order: 1; }
.logo-icon { width: 40px; height: 40px; border-radius: 50%; background-color: #fbd38d; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.logo-icon img { width: 100%; height: 100%; object-fit: cover; }
.logo-text h1 { font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1.2; letter-spacing: 0.2px; }
.logo-text p { font-size: 11px; color: #94a3b8; white-space: nowrap; letter-spacing: 0.2px; }

.header-nav { display: flex; gap: 16px; align-items: center; order: 2; }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nav-item img { width: 22px; height: 22px; object-fit: contain; }
.nav-item span { font-size: 12px; font-weight: 500; color: var(--text-sub); letter-spacing: 0.3px; }





/* --- 3. 搜索框与多源下拉菜单 --- */
.header-search { order: 3; width: 100%; margin-top: 16px; }
#search-box-pill {
    display: flex; align-items: center; width: 100%; height: 44px; 
    background: var(--bg-white); border: 2px solid #e5e7eb; border-radius: 12px;
    padding: 0 10px; transition: 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    position: relative; /* 🌟 核心修改1：加入相对定位，作为下拉框100%宽度的绝对基准 */
}
#search-box-pill:focus-within { border-color: var(--color-primary); }

.search-btn-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: #999; cursor: pointer; }
.search-btn-icon:hover { color: var(--color-primary); }
#main-search { flex: 1; height: 100%; border: none; background: transparent; font-size: 14px; font-weight: 500; outline: none; padding: 0 8px; }

/* 下拉菜单机制 */
.search-engine-selector { height: 100%; display: flex; align-items: center; } /* 🌟 核心修改2：移除了这里的 position: relative */
.engine-dropdown {
    position: absolute; top: 48px; left: 0; width: 100%; /* 🌟 核心修改3：左间距0，宽度强行100%对齐搜索框边缘 */
    background: var(--bg-white);
    border: 2px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 8px; list-style: none; display: none; 
    grid-template-columns: repeat(6, 1fr); /* 🌟 核心修改4：强制网格布局，一行6个，超过自动换行 */
    gap: 6px;
    z-index: 100;
}
.engine-dropdown.show { display: grid; } /* 🌟 核心修改5：显示模式改为网格(grid) */
.engine-item {
    display: flex; align-items: center; justify-content: center; gap: 4px; padding: 8px 2px; cursor: pointer;
    border-radius: 8px; font-size: 12px; color: var(--text-main); transition: 0.2s;
    white-space: nowrap; overflow: hidden; text-overflow: clip; /* 紧凑排版适配手机端 */
}
.engine-item:hover { background: #f3f4f6; }
.engine-item img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }

/* --- 4. 推荐横幅 (防广告插件屏蔽) --- */
.recommend-board { display: block; margin-top: 14px; } 
.recommend-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.recommend-item { border-radius: 8px; overflow: hidden; display: flex; justify-content: center; align-items: center; transition: 0.2s; }
.recommend-item img { width: 100%; height: auto; object-fit: cover; display: block; }
.recommend-placeholder { height: 55px; background-color: #f8fafc; border: 1px dashed #cbd5e1; color: #94a3b8; font-size: 12px; font-weight: 500; letter-spacing: 0.5px; }

/* --- 5. 分类与卡片网格 --- */
.main-content { flex-grow: 1; padding-top: 20px; padding-bottom: 20px; }
.category-section { margin-bottom: 24px; }
.category-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; padding: 0 4px; }
.category-title { font-size: 14.5px; font-weight: 600; color: #4b5563; line-height: 1; letter-spacing: 0.3px; }
.category-desc { font-size: 11px; color: var(--text-desc); margin-bottom: 1px; letter-spacing: 0.2px; }

.app-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }

/* 🌟 核心修复区开始 🌟 */
.app-card {
    display: flex; align-items: center; gap: 8px; background: var(--bg-white); 
    border-radius: 8px; padding: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.03); 
    border: none; transition: 0.2s; cursor: pointer;
    /* 核心！必须限制卡片的最小宽度为0，否则它会被内部超长文字强行撑宽！ */
    min-width: 0; 
}
.app-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.app-card-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.app-card-icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
.app-card-icon span { font-size: 13px; font-weight: 600; color: var(--color-primary); }

.app-card-name { 
    /* 核心！文字区域主动吸收剩余空间，且允许缩进隐藏 */
    flex: 1; 
    min-width: 0; 
    display: block;
    
    font-size: 13px; font-weight: 500; color: var(--text-sub); 
    
    /* 核心！超出直接截断隐藏 (去掉了省略号) */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: clip; 
    
    letter-spacing: 0.3px; 
}
/* 🌟 核心修复区结束 🌟 */

/* 🌟 查看更多卡片样式 (白底、右箭头紧贴字体版) */
.app-card-more {
    display: flex; align-items: center; justify-content: flex-start; gap: 6px; /* ⬅️ gap:6px 保证箭头和文字紧挨着 */
    background: var(--bg-white); border-radius: 8px; padding: 8px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.03); transition: 0.2s; 
    cursor: pointer; text-decoration: none; min-width: 0;
}
.app-card-more:hover {
    transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); 
}
.app-card-more .app-card-icon i {
    font-size: 14px; color: #8ba4c7; transition: 0.2s;
}
.app-card-more .more-text {
    font-size: 13px; font-weight: 500; color: #8ba4c7; transition: 0.2s;
}
.app-card-more .more-arrow {
    font-size: 11.5px; color: #8ba4c7; transition: 0.2s; margin-top: 1px;
}

/* 鼠标悬停整体变主题蓝 */
.app-card-more:hover .app-card-icon i,
.app-card-more:hover .more-text,
.app-card-more:hover .more-arrow {
    color: var(--color-primary);
}

/* --- 6. 页脚 --- */
.site-footer { background: var(--bg-footer); padding: 16px 0 24px 0; color: #a0aec0; font-size: 11.5px; position: relative; }
.friend-links-container { margin-bottom: 16px; } 
.friend-links-box { background: var(--bg-friend-box); border-radius: 8px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; line-height: 1.4; }
.friend-links-box a { font-size: 11px; color: #e5e7eb; font-weight: 500; transition: color 0.2s; }
.friend-links-box a:hover { color: #fff; }

.footer-meta { 
    display: flex !important; 
    flex-direction: column; 
    align-items: center; /* 手机端默认居中堆叠 */
    gap: 10px; 
    line-height: 1.6; 
    color: #9ca3af; 
    letter-spacing: 0.5px;
    width: 100% !important; /* 强制占满整行宽度 */
}
.footer-links { text-align: center; }
.footer-copyright { text-align: center; }
.footer-meta a { margin: 0 4px; transition: color 0.2s; }
.footer-meta a:hover { color: #fff; text-decoration: underline; }

/* 响应式排版 */
@media (min-width: 640px) { 
    .app-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } 
}
@media (min-width: 768px) {
    .container { padding: 0 24px; }
    .header-inner { flex-wrap: nowrap; }
    .header-search { order: 2; flex: 1; max-width: 480px; margin: 0 24px; }
    .header-nav { order: 3; }
    
    .app-grid { grid-template-columns: repeat(6, 1fr); }
    
    .recommend-row { grid-template-columns: repeat(4, 1fr); } 
    
    .main-content { padding-top: 20px; } 
    
    .footer-meta { 
        flex-direction: row; 
        justify-content: space-between;
        align-items: center;
    }
}
@media (min-width: 1024px) {
    .app-grid { grid-template-columns: repeat(8, 1fr); }
}

/* --- 7. 分类页分页器样式 --- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 32px; margin-bottom: 10px; }
.page-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--bg-white); border: 1px solid #e5e7eb; border-radius: 8px; font-size: 13.5px; color: var(--text-sub); transition: 0.2s; cursor: pointer; text-decoration: none;}
.page-btn:hover:not(.disabled) { border-color: var(--color-primary); color: var(--color-primary); background: #eff6ff; }
.page-btn.disabled { background: #f8fafc; color: #cbd5e1; cursor: not-allowed; border-color: #f1f5f9; }
.page-info { font-size: 13px; color: var(--text-desc); font-weight: 500; }

/* =======================================================
 * 🌟 新增：首页影视搜索下拉结果框专属样式 (优化无滚动条版)
 * ======================================================= */
.video-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 420px;
    overflow-y: auto;
    /* 隐藏 Firefox 和 IE 的滚动条 */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
/* 隐藏 Chrome、Safari 和 Edge 的滚动条 */
.video-search-results::-webkit-scrollbar { 
    display: none; 
}

.vs-item {
    display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9;
    cursor: pointer; transition: 0.2s; text-decoration: none; color: inherit;
    align-items: center;
}
.vs-item:last-child { border-bottom: none; }

/* 🌟 优化 Hover 特效：去掉挤压边框，改为背景微变 + 标题/图标变色 */
.vs-item:hover { 
    background: #f8fafc; 
}
.vs-item:hover .vs-title {
    color: var(--color-primary);
}
.vs-item:hover .fa-play {
    color: var(--color-primary) !important;
}

.vs-pic { width: 45px; height: 60px; border-radius: 6px; object-fit: cover; background: #e2e8f0; flex-shrink: 0; }
.vs-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; }
/* 标题增加了过渡动画，变蓝时更丝滑 */
.vs-title { font-size: 14.5px; font-weight: 600; color: #1e293b; margin: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.vs-desc { font-size: 12px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-loading, .vs-empty { padding: 30px 20px; text-align: center; color: #94a3b8; font-size: 13.5px; }

/* =======================================================
 * 🌟 网站上锁与密码解锁弹窗专属样式 (左右横向排版)
 * ======================================================= */

/* 上锁状态的直达按钮 (保留淡红色调，提醒用户注意) */
.btn-locked {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border-color: #fecaca !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.05) !important;
}
.btn-locked:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
}

/* 解锁弹窗定制样式 (使用 Grid 实现左图右文) */
.unlock-modal-card {
    text-align: left; /* 改为左对齐更利于阅读 */
    width: 320px !important; /* 🌟 稍微放宽以适应左右布局 */
    max-width: 90vw;
    padding: 24px 20px !important;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 100px 1fr; /* 左侧二维码100px，右侧自适应撑满 */
    grid-template-areas: 
        "header header"
        "qr desc"
        "qr input";
    gap: 12px 16px; /* 行间距12px，列间距16px */
    align-items: center; /* 垂直居中对齐 */
}

/* 顶部标题横跨两列 */
.unlock-header {
    grid-area: header;
    display: flex;
    justify-content: center; /* 标题依然居中 */
    align-items: center;
    width: 100%;
    margin-bottom: 4px; /* 减小标题下边距 */
}
.unlock-title {
    font-size: 16px; 
    color: #1e293b;
    font-weight: 600;
    margin: 0;
    text-align: center;
    width: 100%;
}
.unlock-title i {
    margin-right: 6px;
    color: var(--color-primary);
}
.unlock-close-btn {
    display: none !important; /* 完全隐藏右上角的关闭按钮 */
}

/* 二维码容器样式 (固定在左下区域) */
.unlock-qr-container {
    grid-area: qr;
    width: 100px; /* 进一步缩小二维码以节省空间 */
    height: 100px;
    margin: 0; /* 移除居中 */
    padding: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.unlock-qr-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

/* 提示文字区 (右侧上方) */
.unlock-desc {
    grid-area: desc;
    font-size: 12px; 
    color: #64748b;
    margin: 0; 
    line-height: 1.5;
    text-align: left;
    align-self: end; /* 靠下对齐，贴近输入框 */
}
.unlock-highlight {
    color: #0f172a;
    font-weight: 600;
    background: #f1f5f9;
    padding: 2px 4px;
    border-radius: 4px;
    margin: 0 2px;
}

/* 输入框与按钮组 (右侧下方) */
.unlock-input-group {
    grid-area: input;
    display: flex;
    flex-direction: column; /* 上下堆叠 */
    gap: 8px; /* 缩减组件间距 */
    width: 100%; 
    margin: 0;
    align-self: start; /* 靠上对齐，贴近提示字 */
}
.unlock-input {
    width: 100% !important;
    height: 32px !important; /* 降低高度使整体更精致 */
    text-align: center !important; 
    padding: 0 10px !important;
    font-size: 13px !important; 
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 0 !important;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    outline: none;
    transition: 0.2s;
}
.unlock-input:focus {
    border-color: var(--color-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.unlock-submit-btn {
    width: 100%; 
    height: 32px; /* 与输入框等高 */
    padding: 0;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.unlock-submit-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(59,130,246,0.2);
}

/* =======================================================
 * 🌟 首页极简切换选项卡 (完美融入普通分类版)
 * ======================================================= */
.hero-tabs-header { display: flex; align-items: flex-end; margin-bottom: 12px; padding: 0 4px; gap: 16px; }
.hero-tab-btn { font-size: 13px; font-weight: 500; color: #94a3b8; cursor: pointer; transition: 0.2s; line-height: 1; user-select: none; }
.hero-tab-btn:hover { color: #64748b; }
.hero-tab-btn.active { font-size: 14.5px; font-weight: 600; color: #4b5563; letter-spacing: 0.3px; }

.hero-tab-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--text-desc); line-height: 1; }
.hero-action-btn { cursor: pointer; transition: 0.2s; display: none; align-items: center; gap: 4px; color: var(--text-sub); }
.hero-action-btn:hover { color: var(--color-primary); }

.app-card { position: relative; } 

.app-card-dashed { display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; border-radius: 8px; padding: 8px; border: 1px dashed #cbd5e1; color: #94a3b8; font-size: 13px; font-weight: 500; cursor: pointer; transition: 0.2s; height: 100%; min-height: 42px; }
.app-card-dashed:hover { border-color: var(--color-primary); color: var(--color-primary); background: #f8fafc; }

/* =======================================================
 * 🌟 用户系统弹窗专属样式 (极致小清新重构版)
 * ======================================================= */
.auth-modal-card { max-width: 320px; text-align: center; padding: 32px 24px; }
.auth-title { font-size: 16px; color: var(--text-main); margin: 0 0 6px 0; font-weight: 600; letter-spacing: 0.5px; }
.auth-desc { font-size: 12px; color: var(--text-desc); margin-bottom: 24px; letter-spacing: 0.2px; }

.auth-input-group { text-align: left; margin-bottom: 20px; }

/* 🌟 低调输入框：纯白背景 + 细边框，彻底取消发光 */
.auth-input { 
    width: 100%; height: 44px; border-radius: 8px; font-size: 14px; padding: 0 14px; 
    border: 1px solid #cbd5e1; outline: none; background: #ffffff; color: #1e293b;
    transition: 0.2s ease;
}
.auth-input::placeholder { color: #cbd5e1; font-weight: 400; }
.auth-input:focus { border-color: #94a3b8; background: #ffffff; box-shadow: none; } /* 仅低调加深边框，绝不发光 */

.auth-input.mb-12 { margin-bottom: 12px; }
.auth-input.mb-0 { margin-bottom: 0; }

/* 🌟 恢复小清新按钮：浅蓝底淡蓝字，克制极简 */
.auth-btn { 
    border-radius: 8px; font-size: 14px; height: 44px; width: 100%; 
    background: #eff6ff; color: #8baee2; border: none; 
    cursor: pointer; font-weight: 500; transition: 0.2s ease; letter-spacing: 0.5px;
}
.auth-btn:hover { background: #e0f2fe; color: #6e99d8; }

.auth-tip { margin-top: 16px; font-size: 11.5px; color: #cbd5e1; letter-spacing: 0.2px;}

.custom-modal-card { max-width: 320px; padding: 32px 24px; text-align: center; }

/* =======================================================
 * 🌟 私密云端收藏夹专属样式 (小红叉与编辑抖动动画)
 * ======================================================= */
.fav-item-card { position: relative; }

/* 悬浮在卡片右上角的小红叉 (默认隐藏) */
.fav-delete-btn {
    position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
    background: #ffffff; border-radius: 50%; color: #ef4444; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: 0.2s; border: 1px solid #fee2e2;
}
.fav-delete-btn:hover { transform: scale(1.1); background: #fef2f2; color: #dc2626; }

/* 定义抖音同款图标微抖动动画 */
@keyframes jiggle {
    0% { transform: rotate(-1deg); }
    50% { transform: rotate(1.5deg); }
    100% { transform: rotate(-1deg); }
}

/* 处于编辑模式时，卡片开始抖动 */
.fav-edit-mode .fav-item-card { animation: jiggle 0.3s infinite; }

/* =======================================================
 * 🌟 全局弹窗基础底层样式 (毛玻璃与极简动画)
 * ======================================================= */
.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(15, 23, 42, 0.3); backdrop-filter: blur(3px); /* 柔和的毛玻璃遮罩 */
    z-index: 3000; display: none; align-items: center; justify-content: center; 
    opacity: 0; transition: opacity 0.3s ease; cursor: pointer;
}
.modal-overlay.active { display: flex; opacity: 1; }

.modal-card { 
    background: #ffffff; border-radius: 16px; 
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); /* 极度柔和的弥散阴影 */
    border: 1px solid rgba(255,255,255,0.8);
    transform: translateY(10px) scale(0.98); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    cursor: default;
}
.modal-overlay.active .modal-card { transform: translateY(0) scale(1); }

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--text-main); letter-spacing: 0.5px;}

/* 精致的小圆角关闭按钮 */
.modal-close { 
    background: #f8fafc; border: none; width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #94a3b8; cursor: pointer; transition: 0.3s; 
}
.modal-close:hover { background: #f1f5f9; color: var(--text-sub); transform: rotate(90deg); }

/* =======================================================
 * 🌟 搜索页样式 (Simple Search)
 * ======================================================= */

:root {
    --simple-color: #0f1729;
    --simple-hover: #324257;
    --simple-grey-color: #616a76;
    --simple-body-bg-color: #f5f5f5;
    --simple-card-bg-color: #ffffff;
    --simple-border-radius-s: 4px;
    --simple-border-radius-m: 8px;
    --simple-border-radius-l: 4px;
    --simple-border-radius-xl: 8px;
    --spacing: 0.25rem;
}

.d-flex { display: flex; }
.d-block { display: block; }
.d-grid { display: grid; }
.d-none { display: none; }
.d-initial { display: initial; }

.p-relative { position: relative; }
.p-absolute { position: absolute; }
.p-sticky { position: sticky; }

.align-items-center { align-items: center; }
.flex-direction-column { flex-direction: column; }
.text-align-center { text-align: center; }
.justify-content-center { justify-content: center; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }

/* 搜索框样式 */
.simple-search {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto 80px;
}

.bookmark .simple-search {
    padding: 100px 20px;
    background: unset !important;
}

.search-wrap {
    max-width: 800px;
    margin: 0 auto;
    flex: 1;
}

.simple-search-menu {
    color: var(--simple-grey-color);
}

.simple-search-menu ul {
    white-space: nowrap;
    margin-bottom: 5px;
}

.simple-search-menu li {
    padding: 0px 10px 10px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
}

.active-search-menu {
    color: var(--simple-color) !important;
}

.active-search-menu:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 3px;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    z-index: 1;
    border-radius: 2px;
    background-color: var(--simple-color);
    box-shadow: 0 5px 10px 0 rgba(16, 110, 253, .3);
}

.simple-search form {
    position: relative;
    box-shadow: 0 6px 6px 0px rgba(0, 0, 0, .05);
    border-radius: 14px;
}

.simple-search input {
    height: 50px;
    width: 100%;
    padding: 5px 15px;
    border-radius: 14px;
    background-color: var(--simple-card-bg-color);
    border: 2px solid var(--simple-color);
    font-size: 16px;
}

.simple-search input::placeholder {
    color: var(--simple-grey-color);
}

.simple-search button {
    position: absolute;
    height: 42px;
    width: 42px;
    top: 50%;
    right: 4px;
    color: #FFF;
    background-color: var(--simple-color);
    transform: translate(0, -50%);
    border-radius: 12px;
}

.simple-search button i {
    font-size: 20px;
}

.search-group {
    display: none;
}

.search-group li {
    padding: 10px 10px 0;
    color: var(--simple-grey-color);
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
}

.active-search-item {
    position: relative;
    color: var(--simple-color) !important;
    font-weight: 600;
}

.active-search-item:before {
    content: '';
    border-width: 8px 8px 0px 8px;
    border-style: solid;
    border-color: var(--simple-color) transparent transparent;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -8px;
}

.active-search-group {
    display: flex;
    overflow: auto;
    white-space: nowrap;
}

.active-search-group::-webkit-scrollbar,
.simple-search-menu ul::-webkit-scrollbar {
    height: 0px;
}