* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}
:after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

:root { 
    --main-width: 1400px; 
    --theme-yellow: #facc15; 
    --bg-dark: #0c0c0c;
    --input-bg: #1a1a1a;
}

html, body { 
    background-color: var(--bg-dark) !important; 
    background-image: linear-gradient(#161616 1px, transparent 1px), 
                      linear-gradient(90deg, #161616 1px, transparent 1px) !important;
    background-size: 35px 35px !important;
    color: #fff !important; 
    margin: 0; padding: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Microsoft YaHei", sans-serif;
}

a {
  text-decoration: none
}
img {
  border: 0;
  vertical-align: middle;
}
.container { max-width: var(--main-width); width: 100%; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }

/* --- 3. 头部导航布局 --- */
.site-header { 
    height: 60px; background: #000 !important; 
    border-bottom: 1px solid rgba(255,255,255,0.05);
    position: sticky; top: 0; z-index: 1000;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }

/* 左侧：Logo + 导航 */
.header-left { display: flex; align-items: center; gap: 20px; }
.logo { color: var(--theme-yellow); font-size: 24px; font-weight: 900; text-decoration: none; letter-spacing: -1px; }
.logo-sep { width: 2px; height: 18px; background: #ff4d4d; margin: 0 5px; display: inline-block; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: #d4d4d8; text-decoration: none; font-size: 15px; font-weight: 500; transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--theme-yellow); }

/* 右侧组：搜索 + 观看历史 (实现PC端靠拢) */
.header-right-group { display: flex; align-items: center; gap: 15px; }

/* PC端搜索框样式 */
.pc-search-form {
    display: flex;
    align-items: center;
    width: 100%;
}
.search-wrapper { position: relative; }
.search-bar { 
    background: var(--input-bg); border-radius: 20px; 
    display: flex; align-items: center; padding: 0 15px; 
    height: 34px; width: 260px; border: 1px solid #333;
}
.search-bar input { background: none; border: none; color: #fff; outline: none; flex: 1; font-size: 13px; }
.search-bar button { background: none; border: none; color: #9ca3af; cursor: pointer; }

/* PC 搜索下拉面板 */
.pc-search-dropdown {
    display: none; position: absolute; top: 45px; right: 0; width: 320px;
    background: #161616; border: 1px solid #333; border-radius: 12px;
    padding: 15px; z-index: 1100; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* 观看记录按钮 */
.history-btn { 
    display: flex; align-items: center; gap: 6px; color: #d4d4d8; 
    cursor: pointer; font-size: 14px; transition: 0.3s; white-space: nowrap;
}
.history-btn:hover { color: var(--theme-yellow); }
.pc-history-dropdown {
    display: none; position: absolute; top: 50px; right: 0; width: 300px;
    background: #161616; border: 1px solid #333; border-radius: 12px;
    padding: 15px; z-index: 1100; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

/* --- 4. 下载模块 --- */
.app-section { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; margin-bottom: 5px; }
.app-card {
    display: flex; align-items: center; justify-content: space-between;
    background: #16161e; border: 1px solid #222; padding: 12px 18px; border-radius: 4px;
    background-image: radial-gradient(#2a2b36 1px, transparent 0); background-size: 4px 4px;
    box-shadow: 4px 4px 0px #000;
}
.pixel-btn {
    text-decoration: none; color: #000 !important; font-weight: 900; font-size: 12px;
    padding: 5px 12px; border: 2px solid #000; box-shadow: 2px 2px 0px 0px #000; background: var(--theme-yellow);
}

/* ============================================================
   5. 移动端优化 (一行排布 & 独立功能)
   ============================================================ */
#mobile-search-overlay, #history-modal-overlay { display: none; }

@media (max-width: 767px) {
    .site-header { height: 54px !important; }
    .header-inner { padding: 0 10px; gap: 10px; }
    .logo-sep, .nav-links, .history-btn span { display: none !important; }
    .logo { font-size: 19px !important; flex-shrink: 0; }
    
    /* 移动端搜索栏居中并撑开 */
    .header-right-group { flex: 1; gap: 10px; }
    .search-wrapper { flex: 1; }
    .search-bar { width: 100% !important; height: 32px !important; padding: 0 12px !important; }
    .search-bar button { display: none !important; } /* 移动端不显示内部放大镜 */
    .history-btn i { font-size: 20px; color: #aaa; }

    /* 缩小间距 */
    .app-section { margin-top: 10px; padding: 0 10px; gap: 8px; }
    .app-card { padding: 10px; }
    .app-card div div:last-child { display: none; }

    /* 全屏搜索层 */
    #mobile-search-overlay { position: fixed; inset: 0; background: var(--bg-dark); z-index: 2000; padding: 15px; }
    .m-search-head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
    .m-search-input-wrap { flex: 1; background: var(--input-bg); height: 40px; border-radius: 20px; display: flex; align-items: center; padding: 0 15px; border: 1px solid #333; }

    /* 历史记录 Modal */
    #history-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 2000; align-items: center; justify-content: center; }
    .history-modal { width: 85%; max-width: 320px; background: #1a1a17; border-radius: 12px; padding: 20px; border: 1px solid #333; }
}

/* 通用样式 */
.search-title { display: flex; justify-content: space-between; font-size: 14px; color: #666; margin-bottom: 12px; font-weight: bold; }
.hot-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hot-item { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13px; color: #bbb; }
.hot-num { font-style: italic; font-weight: bold; width: 18px; text-align: center; }
.hot-num-1 { color: #ff4d4d; } .hot-num-2 { color: #ff8c00; } .hot-num-3 { color: #facc15; }




/* 底部固定导航样式 */
.footer-nav {
    position: fixed; bottom: 0; left: 0; right: 0; height: 55px;
    background: #0c0b09; border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 9999; padding-bottom: env(safe-area-inset-bottom);
}
.footer-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    color: #999; text-decoration: none; font-size: 11px;
}
.footer-nav-item i { font-size: 18px; margin-bottom: 3px; }
.footer-nav-item.active { color: #facc15; }

/* PC端隐藏底部导航 */
@media (min-width: 768px) { .footer-nav { display: none !important; } }