:root {
    --main: #2f9e62;
    --sub: rgba(20, 20, 25, 0.7);
    --bg: #2b2b31;
    --card: #33333a;
    --text: #ccc;
    --logo-accent: #42c77a;
    --notice-bg: rgba(0,0,0,0.2);
}

/* ================= 404 Error Page ================= */
.error-page { min-height: 420px; padding: 38px 15px 48px; display: flex; align-items: center; }
.error-panel { width: 100%; background: linear-gradient(135deg, rgba(51,51,58,0.98), rgba(34,34,40,0.98)); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; box-shadow: 0 12px 35px rgba(0,0,0,0.28); overflow: hidden; display: grid; grid-template-columns: minmax(180px, 320px) 1fr; }
.error-code { background: rgba(0,0,0,0.22); color: var(--main); font-size: 112px; line-height: 1; font-weight: 800; letter-spacing: 0; display: flex; align-items: center; justify-content: center; padding: 48px 20px; text-shadow: 0 8px 22px rgba(47,158,98,0.35); }
.error-copy { padding: 46px 42px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.error-header { justify-content: flex-start; margin-bottom: 14px; }
.error-message { color: #ddd; font-size: 17px; margin-bottom: 18px; }
.error-path { background: #222228; border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.error-path span { color: #888; font-size: 13px; white-space: nowrap; }
.error-path code { color: #fff; font-family: Consolas, Monaco, monospace; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.error-btn { height: 42px; padding: 0 18px; border-radius: 8px; background: #222228; border: 1px solid rgba(255,255,255,0.07); color: #ddd; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 600; }
.error-btn.primary { background: var(--main); border-color: var(--main); color: #fff; }
.error-btn:hover { color: #fff; border-color: rgba(47,158,98,0.8); box-shadow: 0 5px 14px rgba(47,158,98,0.24); }

@media(max-width:768px){
    .error-page { min-height: 360px; padding: 24px 10px 34px; align-items: flex-start; }
    .error-panel { grid-template-columns: 1fr; border-radius: 8px; }
    .error-code { font-size: 72px; padding: 28px 16px 22px; }
    .error-copy { padding: 24px 18px 28px; }
    .error-message { font-size: 15px; }
    .error-path { align-items: flex-start; flex-direction: column; gap: 6px; }
    .error-path code { width: 100%; }
    .error-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .error-btn { width: 100%; }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; width: 100%; line-height: 1.5; }
a { text-decoration: none; color: inherit; transition: color 0.2s ease; }

.container { width: 100%; max-width: 1400px; margin: auto; }
.main-content { padding: 0 15px; }
.seo-h1 { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================= Header & 搜索栏 ================= */
header { background: transparent; width: 100%; }
.header-top { padding: 18px 15px; }
.header-wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; }

.logo-block { display: inline-flex; flex-direction: column; line-height: 1; }
.logo-main { font-size: 36px; font-weight: 700; font-family: Arial, sans-serif; letter-spacing: 0.5px; }
.logo-main .w { color: #fff; }
.logo-main .m { color: var(--main); }
.logo-main .dot { color: #fff; margin: 0 2px; }
.logo-main .v { color: var(--logo-accent); }
.logo-sub { font-size: 19px; color: #ababab; margin-top: 5px; font-weight: normal; letter-spacing: 0.5px; }

.right { display: flex; align-items: center; gap: 12px; flex-grow: 1; justify-content: flex-end; min-width: 0; }
.search-form { position: relative; width: min(440px, 100%); margin: 0; flex-shrink: 1; }
.search-form .search-leading-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #7d8b82; z-index: 2; font-size: 19px; pointer-events: none; }
.search-form input { width: 100%; height: 50px; padding: 0 112px 0 46px; background: #202622; border: 1px solid #465249; color: #f1f5f2; border-radius: 8px; position: relative; z-index: 1; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.search-form input::placeholder { color: #87928b; }
.search-form input:focus { background: #242b26; border-color: var(--logo-accent); box-shadow: 0 0 0 3px rgba(66,199,122,.16); }
.search-form button { position: absolute; right: 5px; top: 5px; height: 40px; min-width: 96px; padding: 0 16px; border: 0; background: var(--main); color: #fff; border-radius: 6px; cursor: pointer; z-index: 2; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.search-form button i { position: static; color: inherit; font-size: 17px; }
.search-form button:hover { background: #278653; box-shadow: 0 5px 14px rgba(47,158,98,.28); }
.search-form button:active { transform: translateY(1px); }
.search-form button:focus-visible, .publish-link:focus-visible { outline: 2px solid #8be8b2; outline-offset: 3px; }

.publish-link { min-height: 50px; padding: 7px 12px; border: 1px solid rgba(66,199,122,.5); border-radius: 8px; color: #effff5; background: rgba(47,158,98,.13); white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; font-size: 18px; transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.publish-link:hover { color: #fff; background: rgba(47,158,98,.24); border-color: var(--logo-accent); box-shadow: 0 6px 16px rgba(0,0,0,.2); transform: translateY(-1px); }
.publish-copy { display: flex; flex-direction: column; line-height: 1.12; }
.publish-copy strong { font-size: 14px; letter-spacing: 0; }
.publish-copy small { color: #91d9ae; font-size: 11px; letter-spacing: 0; margin-top: 3px; }
.publish-arrow { color: #91d9ae; font-size: 14px; }
.mobile-publish { display: none; }

/* ================= 导航系统 ================= */
.nav { background: var(--main); width: 100%; }
.nav ul { display: flex; list-style: none; flex-wrap: wrap; }
.nav a { display: block; padding: 12px 28px; font-size: 18px; color: #fff; font-weight: 600; transition: background .2s; white-space: nowrap; }
.nav a.active, .nav a:hover { background: rgba(255,255,255,.15); }

.sub-nav { width: 100%; max-width: 1400px; margin: 0 auto; background: var(--sub); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.03); }
.sub-nav .sub-wrap { display: flex; list-style: none; flex-wrap: wrap; justify-content: flex-start; }
.sub-nav a { display: block; padding: 12px 24px; color: #dbdbdb; font-size: 14px; font-weight: 500; transition: all 0.25s ease; white-space: nowrap; }
.sub-nav a.active, .sub-nav a:hover { background: rgba(47,158,98,0.2); color: #fff; box-shadow: inset 0 -2px 0 var(--main); }

/* ================= 跑马灯公告 ================= */
.notice-bar { width: 100%; max-width: 1400px; margin: 0 auto; background: var(--notice-bg); border-bottom: 1px solid rgba(255,255,255,0.03); padding: 8px 15px; }
.notice-wrap { display: flex; align-items: center; gap: 12px; width: 100%; }
.notice-icon-box { display: inline-flex; align-items: center; color: #42c77a; flex-shrink: 0; }
.notice-icon-box i { font-size: 18px; animation: ann-fade 2s infinite ease-in-out; }
.notice-marquee-container { flex-grow: 1; overflow: hidden; position: relative; height: 22px; display: flex; align-items: center; }
.notice-marquee-content { display: inline-block; white-space: nowrap; position: absolute; padding-left: 100%; animation: marquee 25s linear infinite; font-size: 14px; color: #aaa; }
.notice-marquee-content:hover { animation-play-state: paused; }
.notice-marquee-content a { color: #fff; border-bottom: 1px dotted #fff; margin-left: 5px; }
.notice-marquee-content a:hover { color: var(--logo-accent); border-color: var(--logo-accent); }

@keyframes marquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }
@keyframes ann-fade { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ================= 公共广告区一：顶部双开横幅 ================= */
.top-banner-bar { width: 100%; max-width: 1400px; margin: 0 auto; padding: 12px 15px 0 15px; }
.top-banner-wrap { display: flex; gap: 15px; width: 100%; }
.top-banner-item { flex: 1; height: 90px; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; overflow: hidden; display: block; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.3s ease; }
.top-banner-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; filter: brightness(0.95); }
.top-banner-item:hover { border-color: var(--main); box-shadow: 0 6px 15px rgba(47,158,98,0.35); }
.top-banner-item:hover img { transform: scale(1.02); filter: brightness(1.1); }

/* ================= 公共广告区二：高质感文字广告链接 ================= */
.text-links-bar { width: 100%; max-width: 1400px; margin: 0 auto; background: rgba(0,0,0,0.2); padding: 14px 15px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.links-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.links-wrap a { flex: 1 1 calc(10% - 10px); min-width: 115px; text-align: center; font-size: 14px; color: #d1d1d6; background: #050505; border: 1px solid rgba(255,255,255,0.05); padding: 10px 12px; border-radius: 6px; font-weight: 500; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.links-wrap a:hover { color: #fff; background: linear-gradient(135deg, var(--main), #42c77a); border-color: rgba(255,255,255,0.2); transform: translateY(-2px); box-shadow: 0 5px 12px rgba(47,158,98,0.4); }

/* ================= 公共广告区三：APP/棋牌 6列图标链接 ================= */
.app-ads-bar { width: 100%; max-width: 1400px; margin: 0 auto; background: rgba(0,0,0,0.15); padding: 15px; border-bottom: 1px solid rgba(0,0,0,0.2); }
.app-ads-wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; }
.app-ad-item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 80px; text-align: center; cursor: pointer; }
.app-icon-box { width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(135deg, #3a3a44, #222228); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 4px 8px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; position: relative; overflow: hidden; }
.app-icon-box i { font-size: 28px; color: #eee; }
.app-ad-item span { font-size: 12px; color: #999; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.app-ad-item:hover .app-icon-box { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(47,158,98,0.3); border-color: var(--main); }
.app-ad-item:hover span { color: #fff; }


/* ==========================================================================
   【全局复用合并】公共内容区块组件及网格单元 (原 index.css 核心代码移入)
   ========================================================================== */

.section { margin: 30px 0; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-title { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 19px; margin: 0; font-weight: 600; }
.section-title i { color: var(--main); font-size: 22px; }
.more-link { font-size: 14px; color: #999; white-space: nowrap; }
.more-link:hover { color: var(--main); }

/* 公共卡片悬浮播放/阅读徽章效果 */
.play-icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; opacity: 0; transition: .2s; z-index: 4; }
.video-card:hover .play-icon, .book-card:hover .play-icon { opacity: 1; }

/* 封面上的半透明通用状态小标签 */
.img-tag-top-right { position: absolute; top: 6px; right: 6px; font-size: 11px; color: #fff; background: rgba(0,0,0,0.65); padding: 2px 6px; border-radius: 4px; z-index: 3; font-weight: 500; }
.img-tag-left, .img-tag-right { position: absolute; bottom: 6px; font-size: 12px; color: #fff; background: rgba(0,0,0,0.65); padding: 3px 7px; border-radius: 4px; display: flex; align-items: center; gap: 4px; z-index: 3; }
.img-tag-left { left: 6px; } .img-tag-right { right: 6px; }
.img-tag-left i { font-size: 13px; color: #8bd17c; } .img-tag-right i { font-size: 13px; color: #fff; }
.book-bottom-bar { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 5px 8px; display: flex; align-items: center; gap: 4px; z-index: 3; font-size: 12px; color: #fff; }
.book-bottom-bar i { font-size: 13px; color: #8bd17c; }

/* 1. 视频模块：4列16:9网格 */
.video-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.video-card { background: var(--card); border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,.25); display: block; }
.video-cover-box { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.video-cover-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-info { padding: 12px 10px; }
.video-info h3 { font-size: 15px; font-weight: normal; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-card:hover h3 { color: var(--main); }

/* 2. 漫画/小说通用模块：复用经典的 6列2:3 竖版书名网格 */
.book-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; }
.book-card { background: var(--card); border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,.25); display: block; }
.book-cover-box { position: relative; width: 100%; aspect-ratio: 2/3; overflow: hidden; }
.book-cover-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-info { padding: 12px 10px; text-align: center; }
.book-info h3 { font-size: 14px; font-weight: normal; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-card:hover h3 { color: var(--main); }


/* ================= 公共精简题材 TAGS 模块 ================= */
.bottom-tags-section { background: rgba(0,0,0,0.15); border-top: 1px solid rgba(255,255,255,0.04); padding: 20px 0; margin-top: 40px; width: 100%; }
.tags-block-wrap { display: flex; flex-direction: column; }
.tags-row { display: flex; align-items: center; gap: 12px; }
.tags-row-title { font-size: 14px; color: #fff; font-weight: 600; min-width: 75px; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tags-row-title i { color: var(--main); font-size: 16px; }
.tags-items-container { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.tags-items-container a { font-size: 12px; color: #aaa; background: #222228; border: 1px solid rgba(255,255,255,0.03); padding: 3px 10px; border-radius: 4px; transition: all 0.2s ease; }
.tags-items-container a:hover { color: #fff; background: var(--main); border-color: var(--main); box-shadow: 0 3px 8px rgba(47,158,98,0.3); }

/* ================= Footer 底部 ================= */
footer { background: #222228; border-top: 2px solid var(--main); padding: 25px 15px 20px 15px; width: 100%; }
.footer-wrap { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.f-content-area { flex-grow: 1; text-align: center; max-width: 1000px; }
.f-warning-cn { font-size: 15.5px; color: #bbb; line-height: 1.6; margin-bottom: 8px; font-weight: 500; }
.f-warning-en { font-size: 14px; color: #998; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.3px; }
.f-copyright { font-size: 15px; color: #aaa; margin-bottom: 8px; }
.f-maps { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.f-maps a { color: #5f9f76; font-size: 14.5px; }
.f-maps a:hover { color: var(--logo-accent); }

/* ================= 返回顶部 ================= */
.back-top { position: fixed; right: 30px; bottom: 30px; width: 50px; height: 50px; border-radius: 50%; background: rgba(47, 158, 98, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; z-index: 99; box-shadow: 0 4px 15px rgba(47,158,98,0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.back-top:hover { background: rgba(66, 199, 122, 1); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(66,199,122,0.6); border-color: rgba(255,255,255,0.3); }

/* ================= 全局公共响应式断点 (完美继承栅格多端自适应) ================= */
@media(max-width:1440px){ .sub-nav, .notice-bar, .bottom-tags-section, .text-links-bar, .app-ads-bar { border-radius: 0; width: 100%; } }
@media(max-width:1200px) { 
    .video-grid { grid-template-columns: repeat(3, 1fr); } 
    .book-grid { grid-template-columns: repeat(5, 1fr); } 
}
@media(max-width:992px){ 
    .search-form { width: 100%; } 
    .footer-wrap { flex-direction: column; align-items: center; text-align: center; gap: 20px; }
    .book-grid { grid-template-columns: repeat(4, 1fr); }
}
@media(max-width:768px){
    .header-top { padding: 15px 10px; }
    .header-wrap { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
    .logo-block { order: 1; } .logo-main { font-size: 30px; }
    .mobile-publish { display: inline-flex; order: 2; min-height: 40px; padding: 7px 10px; font-size: 14px; gap: 6px; margin-left: auto; }
    .right { order: 3; width: 100%; display: block; } .desktop-publish { display: none; }
    .search-form { width: 100%; }
    .search-form input { height: 48px; padding-right: 104px; }
    .search-form button { height: 38px; min-width: 90px; }
    .nav ul { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; } .nav a { padding: 12px 0; font-size: 15px; }
    .sub-nav .sub-wrap { display: grid; grid-template-columns: repeat(5, 1fr); text-align: center; } .sub-nav a { padding: 10px 0; font-size: 13px; }
    
    /* 广告移动端 */
    .top-banner-wrap { flex-direction: column; gap: 8px; }
    .top-banner-item { height: 65px; }
    .text-links-bar { padding: 10px 8px; }
    .links-wrap { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    .links-wrap a { width: 100% !important; min-width: 0 !important; padding: 8px 4px !important; font-size: 12px !important; border-radius: 4px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; }
    .app-ads-bar { padding: 10px 8px; }
    .app-ads-wrap { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 10px 4px !important; }
    .app-ad-item { width: 100% !important; gap: 3px !important; }
    .app-icon-box { width: 60px !important; height: 60px !important; border-radius: 8px !important; }
    .app-icon-box i { font-size: 18px !important; }
    .app-ad-item span { font-size: 14px !important; transform: scale(0.9); display: inline-block; }

    /* 内容网格移动端流式缩放 */
    .video-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } 
    .book-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .img-tag-left, .img-tag-right { background: none !important; padding: 0 !important; bottom: 4px !important; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); }
    .img-tag-left { left: 5px !important; } .img-tag-right { right: 5px !important; }

    .bottom-tags-section { padding: 20px 10px; }
    .tags-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .f-warning-cn { font-size: 13.5px; } .f-warning-en { font-size: 12px; }
    .back-top { right: 15px; bottom: 15px; width: 42px; height: 42px; font-size: 18px; }
}