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

: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: 1200px;
}

*, *::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; }