/* =====================================================
   CSS 变量 / Design Tokens (影视深色风格)
   ===================================================== */
:root {
    --color-primary:       #e50914;
    --color-primary-dark:  #c0070f;
    --color-accent:        #00d4ff;
    --color-accent-dark:   #00a8cc;
    --color-bg:            #0a0a0a;
    --color-bg-secondary:  #111111;
    --color-card:          #1a1a1a;
    --color-card-hover:    #222222;
    --color-nav-bg:        #111111;
    --color-input-bg:      #1e1e1e;
    --color-text:          #ffffff;
    --color-text-muted:    #aaaaaa;
    --color-text-light:    #666666;
    --color-border:        #2a2a2a;
    --color-border-light:  #333333;
    --color-tag-bg:        rgba(0,212,255,0.1);
    --color-tag-text:      #00d4ff;
    --color-status-ongoing:#52C41A;
    --color-status-end:    #888888;
    --color-rank-1:        #e50914;
    --color-rank-2:        #ff7a45;
    --color-rank-3:        #ffa940;
    --radius-sm:           4px;
    --radius-md:           8px;
    --radius-lg:           12px;
    --radius-full:         999px;
    --shadow-card:         0 2px 12px rgba(0,0,0,0.5);
    --shadow-hover:        0 8px 24px rgba(0,0,0,0.7);
    --shadow-glow:         0 0 20px rgba(0,212,255,0.15);
    --font-main:           'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
    --transition:          all 0.2s ease;
}
/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:var(--font-main);background:var(--color-bg);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;transition:var(--transition);}
a:hover{color:var(--color-accent);}
img{max-width:100%;height:auto;display:block;}
ul,ol{list-style:none;}
/* Layout */
.container{max-width:1280px;margin:0 auto;padding:0 16px;}
.main-layout{display:grid;grid-template-columns:1fr 280px;gap:20px;padding:20px 0;}
.main-content{min-width:0;}
.sidebar{min-width:0;}
/* Header */
.site-header{background:var(--color-nav-bg);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,0.6);border-bottom:1px solid var(--color-border);}
.header-inner{display:flex;align-items:center;height:56px;gap:20px;}
.site-logo{font-size:1.5rem;font-weight:900;color:var(--color-primary);white-space:nowrap;flex-shrink:0;letter-spacing:-0.5px;}
.site-logo span{color:var(--color-primary);}
.main-nav{display:flex;gap:4px;flex:1;overflow:hidden;}
.main-nav a{padding:6px 12px;border-radius:var(--radius-sm);font-size:0.88rem;color:var(--color-text-muted);white-space:nowrap;transition:var(--transition);}
.main-nav a:hover,.main-nav a.active{color:var(--color-accent);background:rgba(0,212,255,0.08);}
.header-search{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.header-search input{background:var(--color-input-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-full);padding:7px 16px;font-size:0.88rem;color:var(--color-text);outline:none;width:200px;transition:var(--transition);font-family:var(--font-main);}
.header-search input::placeholder{color:var(--color-text-light);}
.header-search input:focus{border-color:var(--color-accent);box-shadow:var(--shadow-glow);}
.header-search button{background:var(--color-accent);border:none;border-radius:var(--radius-full);padding:7px 16px;color:#000;font-size:0.88rem;cursor:pointer;font-weight:600;transition:var(--transition);}
.header-search button:hover{background:var(--color-accent-dark);}
/* Hero Section */
.hero-section{background:linear-gradient(135deg,#0d0d0d 0%,#1a0a0a 50%,#0d0d0d 100%);padding:40px 0;border-bottom:1px solid var(--color-border);}
.hero-title{font-size:2.5rem;font-weight:900;color:var(--color-text);margin-bottom:8px;letter-spacing:-1px;}
.hero-title em{font-style:normal;color:var(--color-accent);}
.hero-desc{color:var(--color-text-muted);font-size:1rem;margin-bottom:24px;}
.hero-search-wrap{max-width:600px;position:relative;margin-bottom:20px;}
.hero-search-input{width:100%;height:52px;background:var(--color-input-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-full);padding:0 60px 0 24px;font-size:1rem;color:var(--color-text);outline:none;transition:var(--transition);font-family:var(--font-main);}
.hero-search-input::placeholder{color:var(--color-text-light);}
.hero-search-input:focus{border-color:var(--color-accent);box-shadow:var(--shadow-glow);}
.hero-search-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:42px;height:42px;background:var(--color-accent);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);color:#000;font-size:1.1rem;}
.hero-search-btn:hover{background:var(--color-accent-dark);transform:translateY(-50%) scale(1.05);}
.hero-cats{display:flex;flex-wrap:wrap;gap:8px;}
.hero-cat-btn{padding:5px 14px;border-radius:var(--radius-full);font-size:0.82rem;background:rgba(255,255,255,0.06);border:1px solid var(--color-border-light);color:var(--color-text-muted);cursor:pointer;transition:var(--transition);text-decoration:none;}
.hero-cat-btn:hover{border-color:var(--color-accent);color:var(--color-accent);background:rgba(0,212,255,0.08);}
/* Section Header */
.section-title{font-size:1.1rem;font-weight:700;color:var(--color-text);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--color-border);display:flex;align-items:center;gap:8px;}
.section-title::before{content:'';width:4px;height:18px;background:var(--color-accent);border-radius:2px;display:block;}
/* Video Grid - 竖版海报卡片 */
.manga-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:24px;}
.manga-card{background:var(--color-card);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:var(--transition);border:1px solid var(--color-border);display:block;}
.manga-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:var(--color-border-light);}
.manga-card-cover{position:relative;aspect-ratio:2/3;overflow:hidden;background:#1e1e1e;}
.manga-card-cover img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease;}
.manga-card:hover .manga-card-cover img{transform:scale(1.05);}
.manga-card-status{position:absolute;top:6px;left:6px;padding:2px 7px;border-radius:var(--radius-full);font-size:0.68rem;font-weight:600;color:#fff;backdrop-filter:blur(4px);}
.manga-card-status.ongoing{background:rgba(82,196,26,0.85);}
.manga-card-status.end{background:rgba(136,136,136,0.85);}
.manga-card-latest{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:linear-gradient(transparent,rgba(0,0,0,0.85));font-size:0.72rem;color:rgba(255,255,255,0.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.manga-card-score{position:absolute;bottom:6px;right:6px;background:rgba(0,0,0,0.75);color:#f39c12;font-size:0.72rem;font-weight:700;padding:2px 6px;border-radius:var(--radius-sm);}
.manga-card-body{padding:8px 10px 10px;}
.manga-card-title{font-size:0.85rem;font-weight:600;color:var(--color-text);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.4em;}
.manga-card-meta{font-size:0.75rem;color:var(--color-text-muted);margin-top:4px;}
/* Detail Page */
.manga-detail{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:20px;}
.manga-detail-header{display:flex;gap:20px;padding:20px;background:linear-gradient(135deg,#111 0%,#1a1a1a 100%);}
.manga-cover-wrap{width:160px;flex-shrink:0;}
.manga-cover-wrap img,.manga-cover-wrap>div{width:100%;aspect-ratio:2/3;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);}
.manga-info{flex:1;min-width:0;}
.manga-title{font-size:1.5rem;font-weight:800;color:var(--color-text);margin-bottom:10px;line-height:1.3;}
.manga-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.manga-tag{padding:3px 10px;border-radius:var(--radius-full);font-size:0.78rem;background:var(--color-tag-bg);border:1px solid rgba(0,212,255,0.3);color:var(--color-tag-text);}
.manga-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:0.85rem;color:var(--color-text-muted);margin-bottom:12px;}
.manga-meta span strong{color:var(--color-text);}
.manga-stats{display:flex;gap:16px;margin-bottom:14px;}
.manga-stat{text-align:center;}
.manga-stat-num{font-size:1.2rem;font-weight:700;color:var(--color-accent);}
.manga-stat-label{font-size:0.75rem;color:var(--color-text-muted);}
.manga-actions{display:flex;gap:10px;flex-wrap:wrap;}
.btn-primary{background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-full);padding:9px 22px;font-size:0.9rem;font-weight:600;cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-block;}
.btn-primary:hover{background:var(--color-primary-dark);color:#fff;transform:translateY(-1px);}
.btn-secondary{background:rgba(255,255,255,0.08);color:var(--color-text);border:1px solid var(--color-border-light);border-radius:var(--radius-full);padding:9px 22px;font-size:0.9rem;cursor:pointer;transition:var(--transition);text-decoration:none;display:inline-block;}
.btn-secondary:hover{border-color:var(--color-accent);color:var(--color-accent);}
.manga-detail-body{padding:20px;}
.manga-detail-body h2{font-size:1rem;font-weight:700;color:var(--color-text);margin:16px 0 8px;padding-left:10px;border-left:3px solid var(--color-accent);}
.manga-detail-body h2:first-child{margin-top:0;}
.manga-detail-body p{color:var(--color-text-muted);line-height:1.8;margin-bottom:8px;font-size:0.9rem;}
.manga-summary{color:var(--color-text-muted);line-height:1.8;font-size:0.9rem;}
/* Chapter Grid */
.chapter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px;}
.chapter-grid a{display:block;padding:8px 12px;background:rgba(255,255,255,0.04);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:0.82rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--transition);}
.chapter-grid a:hover{color:var(--color-accent);border-color:var(--color-accent);background:rgba(0,212,255,0.06);}
/* Sidebar */
.sidebar-widget{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:16px;margin-bottom:16px;}
.sidebar-widget-title{font-size:0.95rem;font-weight:700;color:var(--color-text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--color-border);}
.rank-list{display:flex;flex-direction:column;gap:8px;}
.rank-item{display:flex;align-items:center;gap:10px;}
.rank-num{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;flex-shrink:0;color:#fff;}
.rank-num.top1{background:var(--color-rank-1);}
.rank-num.top2{background:var(--color-rank-2);}
.rank-num.top3{background:var(--color-rank-3);}
.rank-num.other{background:var(--color-border-light);color:var(--color-text-muted);}
.rank-title{font-size:0.85rem;color:var(--color-text);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.rank-title:hover{color:var(--color-accent);}
/* Pagination */
.pagination{display:flex;justify-content:center;gap:6px;padding:20px 0;flex-wrap:wrap;}
.pagination a,.pagination span{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);font-size:0.85rem;background:var(--color-card);border:1px solid var(--color-border);color:var(--color-text-muted);transition:var(--transition);padding:0 10px;}
.pagination a:hover{background:var(--color-accent);border-color:var(--color-accent);color:#000;font-weight:600;}
.pagination .current{background:var(--color-accent);color:#000;border-color:var(--color-accent);font-weight:600;}
/* Footer */
.site-footer{background:var(--color-nav-bg);border-top:1px solid var(--color-border);color:var(--color-text-muted);text-align:center;padding:24px 0;font-size:0.82rem;margin-top:40px;}
.site-footer a{color:var(--color-text-muted);}
.site-footer a:hover{color:var(--color-accent);}
/* Mobile Nav */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--color-nav-bg);border-top:1px solid var(--color-border);z-index:200;box-shadow:0 -2px 8px rgba(0,0,0,0.4);}
.mobile-nav-inner{display:flex;height:56px;}
.mobile-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:0.68rem;color:var(--color-text-muted);cursor:pointer;transition:var(--transition);}
.mobile-nav-item.active,.mobile-nav-item:hover{color:var(--color-accent);}
.mobile-nav-item .nav-icon{font-size:1.3rem;line-height:1;}
/* CPS 变现盒子 */
.manga-cps-box{background:linear-gradient(135deg,#e50914,#ff4500);border-radius:10px;padding:14px 18px;margin:16px 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.manga-cps-title{color:#fff;font-weight:700;font-size:0.95rem;flex:1;}
.manga-cps-desc{color:rgba(255,255,255,0.85);font-size:0.82rem;flex-basis:100%;margin-top:-6px;}
.manga-cps-btn{background:#fff;color:#e50914;font-weight:700;font-size:0.88rem;padding:7px 18px;border-radius:20px;white-space:nowrap;text-decoration:none;}
.manga-cps-btn:hover{background:rgba(255,255,255,0.15);color:#fff;}
/* Responsive */
@media(max-width:1200px){.manga-grid{grid-template-columns:repeat(5,1fr);}}
@media(max-width:960px){.manga-grid{grid-template-columns:repeat(4,1fr);}.main-layout{grid-template-columns:1fr;}.sidebar{display:none;}}
@media(max-width:768px){.manga-grid{grid-template-columns:repeat(3,1fr);gap:10px;}.hero-title{font-size:1.8rem;}.header-search{display:none;}.main-nav{display:none;}.mobile-nav{display:block;}body{padding-bottom:56px;}.manga-detail-header{flex-direction:column;align-items:center;text-align:center;}.manga-cover-wrap{width:140px;}}
@media(max-width:480px){.manga-grid{grid-template-columns:repeat(3,1fr);gap:8px;}.hero-title{font-size:1.4rem;}.chapter-grid{grid-template-columns:repeat(2,1fr);}}
/* Search Page */
.search-header{background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:20px;margin-bottom:20px;}
.search-form{display:flex;gap:10px;}
.search-form input{flex:1;background:var(--color-input-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-full);padding:10px 20px;font-size:1rem;color:var(--color-text);outline:none;transition:var(--transition);font-family:var(--font-main);}
.search-form input:focus{border-color:var(--color-accent);}
.search-form button{background:var(--color-accent);color:#000;border:none;border-radius:var(--radius-full);padding:10px 24px;font-size:1rem;cursor:pointer;font-weight:600;}
/* Skeleton */
.skeleton{background:linear-gradient(90deg,#1a1a1a 25%,#222 50%,#1a1a1a 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:var(--radius-sm);}
@keyframes skeleton-loading{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
/* Fan directory extra */
.chapter-grid-fan{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin:12px 0;}
.chapter-grid-fan a{display:block;padding:6px 10px;background:rgba(255,255,255,0.04);border:1px solid var(--color-border);border-radius:4px;font-size:0.82rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chapter-grid-fan a:hover{color:var(--color-accent);border-color:var(--color-accent);}