:root {
    --color-blue: #70a1d7;
    --color-green: #a1de93;
    --color-yellow: #f7f48b;
    --color-red: #f47c7c;
    --color-blue-dark: #5a8bc4;
    --color-blue-light: #e8f1fa;
    --color-green-light: #edf9ea;
    --color-yellow-light: #fffef5;
    --color-red-light: #fef0f0;
    --text-dark: #2c3e50;
    --text-mid: #4a5568;
    --text-light: #6b7280;
    --bg-white: #ffffff;
    --bg-light: #f8fafb;
    --bg-card: #ffffff;
    --border-color: #e8ecf1;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --max-width: 1320px;
    --nav-height: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
    background-color: #f5f6f8; color: var(--text-dark); line-height: 1.6;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh;
}

.top-nav { width: 100%; background: var(--bg-white); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); height: var(--nav-height); }
.top-nav-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 20px; gap: 16px; }
.nav-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--color-blue), #5a9fd4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-logo-icon svg { width: 22px; height: 22px; fill: #fff; }
.nav-left h1 { font-size: 1.35rem; font-weight: 700; color: var(--text-dark); letter-spacing: -0.02em; white-space: nowrap; margin: 0; line-height: 1; }
.nav-left h1 span { color: var(--color-blue); }
.nav-center { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; flex-shrink: 1; justify-content: center; }
.nav-center::-webkit-scrollbar { display: none; }
.nav-center a { display: inline-block; padding: 8px 14px; text-decoration: none; color: var(--text-mid); font-size: 0.9rem; font-weight: 500; border-radius: 20px; white-space: nowrap; transition: var(--transition); letter-spacing: 0.01em; }
.nav-center a:hover, .nav-center a:focus-visible { color: var(--color-blue); background: var(--color-blue-light); outline: none; }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-login { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; background: var(--color-blue); color: #fff; border: none; border-radius: 22px; cursor: pointer; font-size: 0.9rem; font-weight: 600; white-space: nowrap; transition: var(--transition); letter-spacing: 0.02em; text-decoration: none; }
.btn-login:hover { background: var(--color-blue-dark); box-shadow: 0 4px 14px rgba(112, 161, 215, 0.4); transform: translateY(-1px); }
.btn-login svg { width: 16px; height: 16px; fill: currentColor; }

.main-container { max-width: var(--max-width); margin: 0 auto; display: flex; gap: 24px; padding: 24px 20px; }
.content-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.sidebar-right { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--nav-height) + 24px); align-self: flex-start; max-height: calc(100vh - var(--nav-height) - 48px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #d0d5dc transparent; }
.sidebar-right::-webkit-scrollbar { width: 4px; } .sidebar-right::-webkit-scrollbar-thumb { background: #d0d5dc; border-radius: 4px; } .sidebar-right::-webkit-scrollbar-track { background: transparent; }

.section-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: var(--transition); }
.section-card:hover { box-shadow: var(--shadow-md); }
.section-title { font-size: 1.2rem; font-weight: 700; color: var(--text-dark); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--color-blue-light); position: relative; display: flex; align-items: center; gap: 10px; letter-spacing: 0.01em; }
.section-title::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 50px; height: 2px; background: var(--color-blue); border-radius: 2px; }
.section-title .title-icon { width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 0.75rem; }
.title-icon.hot { background: #fef0f0; color: var(--color-red); } .title-icon.rec { background: #edf9ea; color: #4a9e3f; } .title-icon.info { background: #e8f1fa; color: var(--color-blue); } .title-icon.rank { background: #fffef5; color: #c7940a; }

.hot-comics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.comic-card { background: var(--bg-card); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-color); transition: var(--transition); cursor: pointer; display: flex; flex-direction: column; }
.comic-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #d0dce8; }
.comic-card-img-wrap { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #eef1f5; }
.comic-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.comic-card:hover .comic-card-img-wrap img { transform: scale(1.06); }
.comic-card-badge { position: absolute; top: 8px; left: 8px; padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; z-index: 2; }
.badge-hot { background: var(--color-red); color: #fff; } .badge-new { background: var(--color-green); color: #1a5c1a; } .badge-top { background: var(--color-yellow); color: #5c3d00; }
.comic-card-info { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.comic-card-info h3 { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.comic-card-info .meta-line { font-size: 0.7rem; color: var(--text-light); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.comic-card-info .type-tag { display: inline-block; padding: 3px 8px; background: var(--color-blue-light); color: var(--color-blue); border-radius: 10px; font-size: 0.68rem; font-weight: 600; align-self: flex-start; letter-spacing: 0.02em; }

.sidebar-card { background: var(--bg-card); border-radius: var(--radius-md); padding: 18px 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: var(--transition); }
.sidebar-card:hover { box-shadow: var(--shadow-md); }
.sidebar-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 14px; color: var(--text-dark); display: flex; align-items: center; gap: 8px; letter-spacing: 0.01em; }
.sidebar-card h3 .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot.blue { background: var(--color-blue); } .dot.green { background: var(--color-green); } .dot.yellow { background: var(--color-yellow); } .dot.red { background: var(--color-red); }
.rank-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); transition: var(--transition); cursor: pointer; font-size: 0.85rem; }
.rank-list li:hover { background: #f8fafc; }
.rank-num { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; letter-spacing: 0.03em; }
.rank-num.top1 { background: #fef0f0; color: var(--color-red); } .rank-num.top2 { background: #fff8ec; color: #e0962c; } .rank-num.top3 { background: #fffef5; color: #b8941f; } .rank-num.normal { background: #f5f6f8; color: #7b8794; }
.rank-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-info .rank-title { font-weight: 600; color: var(--text-dark); font-size: 0.84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-info .rank-sub { font-size: 0.7rem; color: var(--text-light); }
.rank-change { font-weight: 700; font-size: 0.75rem; flex-shrink: 0; } .rank-change.up { color: #e53e3e; } .rank-change.down { color: #38a169; }

.total-read-card { background: linear-gradient(135deg, #f8faff 0%, #e8f1fa 100%); border-radius: var(--radius-md); padding: 20px 16px; text-align: center; border: 1px solid #dce8f5; }
.total-read-card .big-number { font-size: 2.2rem; font-weight: 800; color: var(--color-blue); letter-spacing: -0.03em; line-height: 1; }
.total-read-card .big-number-label { font-size: 0.8rem; color: var(--text-mid); margin-top: 4px; }
.total-read-card .update-time { font-size: 0.7rem; color: var(--text-light); margin-top: 8px; }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.stat-item { background: #fafbfc; border-radius: var(--radius-sm); padding: 14px 8px; border: 1px solid #eef1f5; }
.stat-item .stat-num { font-size: 1.3rem; font-weight: 700; color: var(--text-dark); letter-spacing: -0.02em; }
.stat-item .stat-label { font-size: 0.7rem; color: var(--text-light); margin-top: 2px; }
.stat-item:nth-child(1) .stat-num { color: var(--color-blue); } .stat-item:nth-child(2) .stat-num { color: var(--color-green); } .stat-item:nth-child(3) .stat-num { color: var(--color-red); }

.comic-detail-block { display: flex; gap: 20px; flex-wrap: wrap; }
.comic-detail-cover { width: 180px; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 3/4; box-shadow: var(--shadow-md); }
.comic-detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comic-detail-text { flex: 1; min-width: 240px; }
.comic-detail-text h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; color: var(--text-dark); }
.comic-detail-text .detail-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.comic-detail-text .detail-meta span { padding: 5px 12px; border-radius: 14px; font-size: 0.75rem; font-weight: 500; background: #f5f6f8; color: var(--text-mid); }
.comic-detail-text .detail-meta span.tag-type { background: #fef0f0; color: var(--color-red); }
.comic-detail-text p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 8px; }

.characters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.character-card { background: #fafbfc; border-radius: var(--radius-md); padding: 16px; text-align: center; border: 1px solid #eef1f5; transition: var(--transition); }
.character-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.character-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; display: block; border: 3px solid #fff; box-shadow: var(--shadow-sm); background: #e8ecf1; }
.character-card h4 { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.character-card .char-role { font-size: 0.72rem; color: var(--color-blue); font-weight: 600; margin-bottom: 6px; }
.character-card p { font-size: 0.75rem; color: var(--text-light); line-height: 1.5; }

.comment-list { display: flex; flex-direction: column; gap: 14px; }
.comment-item { background: #fafcfd; border-radius: var(--radius-md); padding: 16px 18px; border: 1px solid #eef2f6; transition: var(--transition); }
.comment-item:hover { border-color: #d8e2ed; box-shadow: var(--shadow-sm); }
.comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-user { font-weight: 600; font-size: 0.85rem; color: var(--text-dark); }
.comment-time { font-size: 0.7rem; color: var(--text-light); margin-left: auto; }
.comment-body { font-size: 0.84rem; color: var(--text-mid); line-height: 1.7; }
.comment-comic-ref { color: var(--color-blue); font-weight: 500; }

.platform-intro p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 10px; }
.platform-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.feature-item { text-align: center; padding: 16px 10px; background: #fafcfd; border-radius: var(--radius-sm); border: 1px solid #eef2f6; }
.feature-item .feat-icon { font-size: 1.8rem; margin-bottom: 6px; }
.feature-item .feat-label { font-weight: 600; font-size: 0.82rem; color: var(--text-dark); }
.feature-item .feat-desc { font-size: 0.7rem; color: var(--text-light); margin-top: 2px; }

.download-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.download-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 14px; border-radius: var(--radius-md); text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: var(--transition); border: 2px solid transparent; cursor: pointer; text-align: center; letter-spacing: 0.01em; }
.download-btn.android { background: #f0faf0; border-color: #c8e6c9; color: #2e6b2f; } .download-btn.android:hover { background: #e3f5e3; box-shadow: 0 4px 16px rgba(161,222,147,0.45); transform: translateY(-2px); }
.download-btn.ios { background: #f5f5f7; border-color: #d4d4d8; color: #1d1d1f; } .download-btn.ios:hover { background: #e8e8ed; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.download-btn.pc { background: #f0f4f8; border-color: #c8d6e5; color: #3a4f63; } .download-btn.pc:hover { background: #e3ecf4; box-shadow: 0 4px 16px rgba(112,161,215,0.35); transform: translateY(-2px); }
.download-btn.mac { background: #f5f5f7; border-color: #d4d4d8; color: #1d1d1f; } .download-btn.mac:hover { background: #e8e8ed; box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-2px); }
.download-btn .app-icon { width: 28px; height: 28px; flex-shrink: 0; }
.download-btn .dl-label { font-size: 0.75rem; font-weight: 500; color: inherit; opacity: 0.8; }

.footer-nav { width: 100%; background: #2c3e50; color: #c0ccda; padding: 32px 20px 20px; margin-top: 32px; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; }
.footer-col h4 { color: #fff; font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.02em; }
.footer-col a { display: block; color: #b0bec5; text-decoration: none; font-size: 0.82rem; padding: 4px 0; transition: var(--transition); }
.footer-col a:hover { color: var(--color-yellow); }
.footer-bottom { max-width: var(--max-width); margin: 20px auto 0; padding-top: 18px; border-top: 1px solid #3d5068; text-align: center; font-size: 0.78rem; color: #8899aa; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }
.footer-bottom a { color: #b0bec5; text-decoration: none; font-weight: 500; transition: var(--transition); white-space: nowrap; }
.footer-bottom a:hover { color: var(--color-yellow); text-decoration: underline; }

@media (max-width: 1200px) { .hot-comics-grid { grid-template-columns: repeat(4, 1fr); } .sidebar-right { width: 300px; } .download-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 992px) { .hot-comics-grid { grid-template-columns: repeat(3, 1fr); } .main-container { flex-direction: column; } .sidebar-right { width: 100%; position: static; max-height: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .sidebar-right>* { grid-column: span 2; } .sidebar-right .sidebar-card:nth-child(1) { grid-column: span 1; } .sidebar-right .sidebar-card:nth-child(2) { grid-column: span 1; } .sidebar-right .total-read-card { grid-column: span 1; } .sidebar-right .sidebar-card:last-child { grid-column: span 1; } .nav-center a { padding: 6px 10px; font-size: 0.78rem; } .characters-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
@media (max-width: 768px) { .hot-comics-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sidebar-right { grid-template-columns: 1fr; gap: 12px; } .sidebar-right>* { grid-column: span 1 !important; } .download-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .comic-detail-block { flex-direction: column; align-items: center; text-align: center; } .comic-detail-cover { width: 140px; } .comic-detail-text .detail-meta { justify-content: center; } .characters-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .top-nav-inner { padding: 0 10px; gap: 8px; } .nav-left h1 { font-size: 1.1rem; } .nav-center a { padding: 5px 8px; font-size: 0.72rem; border-radius: 14px; } .btn-login { padding: 7px 14px; font-size: 0.78rem; } .nav-logo-icon { width: 30px; height: 30px; } .section-card { padding: 16px; } .section-title { font-size: 1rem; } .stats-row { grid-template-columns: repeat(3, 1fr); gap: 6px; } .stat-item { padding: 10px 4px; } .stat-item .stat-num { font-size: 1rem; } .footer-inner { flex-direction: column; gap: 16px; } .platform-features { grid-template-columns: repeat(2, 1fr); } .comment-body { font-size: 0.78rem; } }
@media (max-width: 480px) { .hot-comics-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .comic-card-info { padding: 6px 8px 10px; } .comic-card-info h3 { font-size: 0.78rem; } .comic-card-info .meta-line { font-size: 0.65rem; } .download-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .download-btn { padding: 14px 8px; font-size: 0.75rem; } .characters-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .character-card { padding: 10px; } .character-avatar { width: 60px; height: 60px; } .nav-center { gap: 1px; } .nav-center a { padding: 4px 6px; font-size: 0.68rem; } .btn-login { padding: 6px 10px; font-size: 0.7rem; } }