* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background-color: #f4f6f8; color: #333; line-height: 1.6; }
a { text-decoration: none; color: inherit; }
a:hover { color: #e74c3c; }
.container { width: 92%; max-width: 1100px; margin: 0 auto; }
header { background: #1a252f; color: #fff; padding: 12px 0; border-bottom: 3px solid #e74c3c; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 22px; font-weight: bold; color: #e74c3c; text-transform: uppercase; }
.logo span { color: #fff; }
nav ul { display: flex; list-style: none; gap: 18px; }
nav ul li a { color: #cfd8dc; font-size: 14px; font-weight: 500; }
.breadcrumb { padding: 12px 0; font-size: 13px; color: #666; }
.breadcrumb a { color: #2980b9; }
.main-wrapper { display: flex; gap: 20px; margin-bottom: 30px; }
.main-content { flex: 3; }
.sidebar { flex: 1; background: #fff; padding: 15px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); height: fit-content; }
.block-title { font-size: 16px; font-weight: 700; text-transform: uppercase; border-left: 4px solid #e74c3c; padding-left: 10px; margin-bottom: 15px; color: #2c3e50; }
.novel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; }
.novel-item { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); transition: transform 0.2s; }
.novel-item:hover { transform: translateY(-3px); }
.novel-item img { width: 100%; height: 190px; object-fit: cover; display: block; }
.novel-item .info { padding: 8px; }
.novel-item .title { font-size: 13px; font-weight: 600; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.novel-item .chap { font-size: 11px; color: #888; margin-top: 4px; }
.detail-box { background: #fff; padding: 20px; border-radius: 4px; display: flex; gap: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 20px; }
.detail-cover { width: 180px; height: 250px; object-fit: cover; border-radius: 4px; }
.detail-meta h1 { font-size: 20px; margin-bottom: 8px; color: #2c3e50; }
.meta-line { font-size: 13px; color: #555; margin-bottom: 6px; }
.btn-read-now { display: inline-block; background: #e74c3c; color: #fff; padding: 8px 18px; border-radius: 3px; font-size: 14px; font-weight: bold; margin-top: 10px; }
.chapter-list { background: #fff; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.chapter-list ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chapter-list li a { font-size: 13px; color: #34495e; }
.reader-box { background: #fff; padding: 30px; border-radius: 4px; max-width: 800px; margin: 0 auto 30px auto; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.reader-header { text-align: center; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 20px; }
.reader-header h2 { font-size: 22px; color: #2c3e50; }
.reader-content p { font-size: 17px; line-height: 1.8; color: #2c2c2c; margin-bottom: 18px; text-align: justify; }
.reader-nav { display: flex; justify-content: space-between; margin: 20px 0; }
.btn-page { background: #3498db; color: #fff; padding: 6px 14px; border-radius: 3px; font-size: 13px; }
footer { background: #1a252f; color: #95a5a6; padding: 25px 0; font-size: 12px; margin-top: auto; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-links a { color: #bdc3c7; margin-left: 12px; }
@media (max-width: 768px) { .main-wrapper, .detail-box { flex-direction: column; } .detail-cover { width: 100%; height: auto; } .chapter-list ul { grid-template-columns: 1fr; } }