:root {
    --black: #1a1a1a;
    --dark: #2d2d2d;
    --gray-dark: #4a4a4a;
    --gray: #7a7a7a;
    --gray-light: #b0b0b0;
    --gray-bg: #f0f0f0;
    --white: #ffffff;
    --blue: #2c7be5;
    --blue-dark: #1a5bbf;
    --blue-light: #e8f0fe;
    --blue-accent: #4d94ff;
    --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; min-height: 100vh;
}

.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(--blue), var(--blue-accent));
    border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem;
}
.navbar__logo-text span { color:var(--blue); }
.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(--blue-light); color:var(--blue); }
.navbar__categories a.active { background:var(--blue); 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(--blue); border:none; color:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.navbar__search button:hover { background:var(--blue-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(--blue); border-radius:2px; }
.section-more { text-decoration:none; color:var(--blue); font-size:0.85rem; font-weight:500; }
.section-more:hover { color:var(--blue-dark); }

.comic-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(155px,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); }
.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(--blue); color:#fff; font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:12px; }
.badge--new { background:#34c759; } .badge--hot { background:#ff3b30; }
.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(--blue); 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(--blue-light); border-color:var(--blue); color:var(--blue); }
.tag--active { background:var(--blue); color:#fff; border-color:var(--blue); }

.sidebar-right .section-card h3 { font-weight:700; margin-bottom:12px; color:var(--black); font-size:1rem; }
.author-list { list-style:none; display:flex; flex-direction:column; gap:10px; }
.author-list li { display:flex; align-items:center; gap:10px; }
.author-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; color:#fff; background:var(--blue); }
.author-name { font-weight:500; font-size:0.85rem; }
.author-works { font-size:0.7rem; color:var(--gray); }
.notice-item { padding:8px 0; border-bottom:1px dashed var(--border); }
.notice-item:last-child { border-bottom:none; }
.notice-title { font-weight:500; font-size:0.82rem; }
.notice-date { font-size:0.7rem; color:var(--gray); }
.app-download { text-align:center; }
.app-download p { font-size:0.8rem; color:var(--gray-dark); margin-bottom:12px; }
.app-btn { display:inline-block; background:var(--blue); color:#fff; padding:8px 20px; border-radius:20px; text-decoration:none; font-weight:500; }
.app-btn:hover { background:var(--blue-dark); }

/* 试读网格一行2条 */
.preview-grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.preview-item {
    display:flex; gap:16px; padding:16px; border-radius:var(--radius); background:#fafafa; border:1px solid var(--border); transition:var(--transition);
}
.preview-item:hover { background:#fff; box-shadow:var(--shadow); }
.preview-cover { width:100px; height:130px; border-radius:6px; background-size:cover; background-position:center; flex-shrink:0; background-color:#eee; }
.preview-cover img{
    width:100%;
    height: 100%;
}
.preview-info h4 { font-weight:700; margin-bottom:4px; }
.preview-info .author { font-size:0.8rem; color:var(--gray); margin-bottom:6px; }
.preview-info .desc { font-size:0.85rem; color:var(--gray-dark); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.preview-info .read-btn { display:inline-block; margin-top:8px; padding:5px 16px; background:var(--blue); color:#fff; border-radius:15px; text-decoration:none; font-size:0.8rem; }
.preview-info .read-btn:hover { background:var(--blue-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); }
.comment-item:hover { background:#fff; box-shadow:var(--shadow); }
.comment-avatar { width:42px; height:42px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.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(--blue-light); color:var(--blue); 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(--blue); }

.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:#fff; }
.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:200px; }
    .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-item { flex-direction:column; }
    .preview-cover { width:100%; height:160px; }
    .preview-grid, .comment-grid { grid-template-columns:1fr; }
    .sidebar-right { flex-direction:column; }
}