:root {
    --black: #1a1a1a;
    --dark: #2d2d2d;
    --gray-dark: #4a4a4a;
    --gray: #7a7a7a;
    --gray-light: #b0b0b0;
    --gray-bg: #f5f5f0;
    --white: #ffffff;
    --yellow: #f5a623;
    --yellow-dark: #d4891a;
    --yellow-light: #fff7e6;
    --red: #e03a3a;
    --red-dark: #c42d2d;
    --red-light: #ffeaea;
    --border: #e0e0e0;
    --shadow: 0 2px 12px rgba(0,0,0,0.06);
    --shadow-hover: 0 6px 20px rgba(0,0,0,0.12);
    --radius: 10px;
    --radius-sm: 6px;
    --transition: 0.25s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'PingFang SC','Microsoft YaHei','Hiragino Sans GB',sans-serif;
    background: var(--gray-bg); color: var(--dark); line-height: 1.6;
}

.navbar {
    background: var(--white); border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
    position: sticky; top:0; z-index:100; padding:0 20px; height:60px; display:flex; align-items:center; justify-content:center;
}
.navbar-container {
    width:100%; max-width:1300px; display:flex; align-items:center; justify-content:space-between; gap:15px;
}
.navbar__logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--black); font-weight:800; font-size:1.4rem; }
.navbar__logo-icon {
    width:38px; height:38px; background:linear-gradient(135deg, var(--yellow), var(--red)); border-radius:8px;
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem;
}
.navbar__logo-text span { color:var(--red); }
.navbar__categories { display:flex; gap:6px; list-style:none; }
.navbar__categories a {
    text-decoration:none; color:var(--gray-dark); padding:6px 14px; border-radius:20px; font-size:0.9rem; font-weight:500; transition:var(--transition);
}
.navbar__categories a:hover,.navbar__categories a.active { background:var(--yellow-light); color:var(--yellow-dark); }
.navbar__categories a.active { background:var(--yellow); color:#fff; }
.navbar__search {
    display:flex; align-items:center; background:var(--gray-bg); border-radius:25px; padding:0 16px; height:40px; min-width:180px; max-width:280px;
}
.navbar__search input { border:none; background:transparent; outline:none; width:100%; font-size:0.9rem; }
.navbar__search button {
    background:var(--red); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.navbar__search button:hover { background:var(--red-dark); }
.navbar__toggle { display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; }

.main-wrapper { max-width:1300px; margin:20px auto; padding:0 20px; display:flex; flex-direction:column; gap:28px; }
.content-row { display:flex; gap:24px; }
.content-left { flex:1; display:flex; flex-direction:column; gap:28px; }
.sidebar-right { width:280px; flex-shrink:0; display:flex; flex-direction:column; gap:20px; }

.section-card { background:var(--white); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid var(--border); }
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.section-title { font-size:1.15rem; font-weight:700; color:var(--black); display:flex; align-items:center; gap:8px; }
.section-title::before { content:''; display:inline-block; width:4px; height:22px; background:var(--yellow); border-radius:2px; }
.section-more { text-decoration:none; color:var(--red); font-size:0.85rem; font-weight:500; }
.section-more:hover { color:var(--red-dark); }

.comic-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:16px; }
.comic-card {
    background:#fff; border-radius:var(--radius); overflow:hidden; transition:var(--transition); border:1px solid var(--border); text-decoration:none; color:inherit; display:block;
}
.comic-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--yellow); }
.comic-card__cover { width:100%; aspect-ratio:3/4; background-size:cover; background-position:center; position:relative; background-color:#ddd; }
.comic-card__cover img{
    width: 100%;
    height: 100%;
}
.comic-card__cover .badge { position:absolute; top:8px; left:8px; background:var(--red); color:#fff; font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:12px; }
.badge--new { background:var(--yellow); } .badge--hot { background:var(--red); }
.comic-card__body { padding:12px; }
.comic-card__title { font-weight:700; font-size:0.9rem; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.comic-card__meta { font-size:0.75rem; color:var(--gray); display:flex; justify-content:space-between; }
.comic-card__rating { color:var(--red); font-weight:600; }

.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; }
.tag {
    display:inline-block; padding:6px 14px; border-radius:18px; font-size:0.8rem; text-decoration:none; font-weight:500;
    transition:var(--transition); border:1px solid var(--border); color:var(--gray-dark); background:#fff;
}
.tag:hover { background:var(--yellow-light); border-color:var(--yellow); color:var(--yellow-dark); }
.tag--active { background:var(--yellow); color:#fff; border-color:var(--yellow); }

.text-list { list-style:none; display:flex; flex-direction:column; gap:12px; }
.text-list li { display:flex; align-items:center; gap:12px; cursor:pointer; padding:6px 8px; border-radius:var(--radius-sm); transition:var(--transition); }
.text-list li:hover { background:#fafafa; color:var(--red); }
.text-rank {
    width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.75rem; color:#fff; flex-shrink:0;
}
.rank-1 { background:var(--red); } .rank-2 { background:#f08080; } .rank-3 { background:#f0a050; } .rank-other { background:#aaa; }
.text-info { display:flex; flex-direction:column; }
.text-info .title { font-weight:600; font-size:0.9rem; } .text-info .author { font-size:0.75rem; color:var(--gray); }

.preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.preview-item { padding:18px; border-radius:var(--radius); background:#fafafa; border:1px solid var(--border); transition:var(--transition); cursor:pointer; }
.preview-item:hover { background:#fff; box-shadow:var(--shadow); border-color:var(--yellow); }
.preview-item h4 { font-weight:700; color:var(--black); margin-bottom:6px; }
.preview-author { font-size:0.8rem; color:var(--gray); margin-bottom:8px; }
.preview-desc { font-size:0.85rem; color:var(--gray-dark); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:12px; }
.read-btn { display:inline-block; padding:5px 18px; background:var(--red); color:#fff; border-radius:15px; text-decoration:none; font-size:0.8rem; }
.read-btn:hover { background:var(--red-dark); }

.comment-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.comment-item { display:flex; gap:12px; padding:16px; border-radius:var(--radius); background:#fafafa; border:1px solid var(--border); transition:var(--transition); }
.comment-item:hover { background:#fff; box-shadow:var(--shadow); }
.comment-avatar { width:42px; height:42px; border-radius:50%; background:var(--yellow); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.comment-body { flex:1; }
.comment-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.comment-name { font-weight:700; font-size:0.85rem; } .comment-time { font-size:0.7rem; color:var(--gray); }
.comment-badge { font-size:0.65rem; background:var(--yellow-light); color:var(--yellow-dark); padding:2px 8px; border-radius:10px; }
.comment-text { font-size:0.82rem; color:var(--gray-dark); }
.comment-actions { display:flex; gap:12px; margin-top:6px; font-size:0.75rem; color:var(--gray); }
.comment-actions span { cursor:pointer; } .comment-actions span:hover { color:var(--red); }

.footer { background:var(--black); color:#ccc; padding:40px 20px 24px; margin-top:30px; }
.footer-inner { max-width:1300px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:30px; }
.footer-col h4 { color:#fff; margin-bottom:12px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:6px; }
.footer-col ul li a { color:#aaa; text-decoration:none; font-size:0.8rem; }
.footer-col ul li a:hover { color:var(--yellow); }
.footer-bottom { max-width:1300px; margin:20px auto 0; padding-top:16px; border-top:1px solid #333; text-align:center; font-size:0.75rem; color:#888; }

@media (max-width:1024px) {
    .content-row { flex-direction:column; }
    .sidebar-right { width:100%; flex-direction:row; flex-wrap:wrap; }
    .sidebar-right .section-card { flex:1; min-width:220px; }
    .preview-grid,.comment-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .navbar { height:52px; padding:0 12px; }
    .navbar__categories { display:none; position:absolute; top:52px; left:0; right:0; background:#fff; flex-direction:column; padding:12px; box-shadow:var(--shadow); border-radius:0 0 var(--radius) var(--radius); z-index:99; }
    .navbar__categories.open { display:flex; }
    .navbar__toggle { display:block; }
    .navbar__search { max-width:200px; }
    .comic-grid { grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); }
    .preview-grid,.comment-grid { grid-template-columns:1fr; }
    .sidebar-right { flex-direction:column; }
}