/* novel.css — 小说详情/评分/评论/章节目录 */
/* ============================================================
   小说详情页
   ============================================================ */
.novel-hero{
    display:flex;gap:40px;background:var(--surface);
    padding:36px;border:1px solid var(--border);
    border-radius:var(--radius-xl);margin-bottom:36px;box-shadow:var(--shadow-sm);
}
.novel-cover-wrap{flex-shrink:0;width:200px;}
.novel-cover-wrap img,.novel-cover-wrap .cover-placeholder{
    width:100%;aspect-ratio:3/4;border-radius:var(--radius);
    object-fit:cover;background:var(--bg-subtle);
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);box-shadow:var(--shadow);
}
.novel-info{flex:1;min-width:0;}
.novel-info h1{margin:0 0 16px;font-size:clamp(22px, 3.5vw, 32px);font-weight:700;letter-spacing:-0.01em;}

.novel-meta-line,.novel-stats-line{
    display:flex;gap:6px;margin:0 0 12px;color:var(--muted);
    font-size:13.5px;flex-wrap:wrap;align-items:center;
}
.novel-meta-line span+span::before,.novel-stats-line span+span::before{
    content:'·';margin:0 10px;color:var(--border-strong);
}
.novel-stats-line .stat-num{color:var(--text);font-weight:600;}
.author-link{color:var(--text);font-weight:600;transition:color var(--transition);}
.author-link:hover{color:var(--primary);}

.novel-desc{color:var(--text-2);font-size:14.5px;line-height:1.85;margin:18px 0;white-space:pre-line;}
.novel-tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;}
.tag,.novel-tag{padding:3px 10px;border-radius:999px;background:var(--bg-subtle);color:var(--text-2);font-size:12px;border:1px solid var(--border);}
.novel-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}
.favorite-form{display:inline;}
.fav-active{border-color:var(--jade);color:var(--jade);}

/* 小说页状态徽章 */
.status-badge{
    display:inline-flex;align-items:center;padding:2px 9px;
    border-radius:999px;font-size:12px;font-weight:500;
}
.status-badge.ongoing{background:var(--jade-soft);color:var(--jade);border:1px solid color-mix(in srgb, var(--jade) 20%, transparent);}
.status-badge.completed{background:var(--success);color:#fff;}
.status-badge.on-hold{background:var(--warning-soft);color:var(--warning);border:1px solid color-mix(in srgb, var(--warning) 30%, transparent);}
.status-badge.unknown{background:var(--bg-subtle);color:var(--muted);}

/* ============================================================
   评分组件
   ============================================================ */
.rating-block{
    display:flex;align-items:center;gap:14px;padding:14px 18px;
    background:var(--primary-soft);border:1px solid var(--primary-border);
    border-radius:var(--radius);margin:18px 0;
}
.rating-avg{font-size:30px;font-weight:700;color:var(--primary);line-height:1;letter-spacing:-0.02em;}
.rating-meta{display:flex;flex-direction:column;gap:4px;flex:1;}
.rating-count{font-size:12.5px;color:var(--text-2);}

.rating-widget{
    display:flex;align-items:center;gap:14px;padding:14px 18px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);
}
.rating-widget-label{font-size:14px;color:var(--text);font-weight:500;flex:1;}
.rating-widget-stars{display:inline-flex;align-items:center;gap:4px;}
.rating-widget-stars .rate-star{background:transparent;border:none;padding:4px;cursor:pointer;color:var(--border-strong);transition:all var(--transition);-webkit-tap-highlight-color:transparent;}
.rating-widget-stars .rate-star svg{width:22px;height:22px;transition:all var(--transition);}
.rating-widget-stars .rate-star:hover{transform:scale(1.15);}
.rating-widget-stars .rate-star.active{color:var(--gold);}
.rating-widget-stars .rate-star.active svg{fill:var(--gold);}

.rating-widget-guest{padding:14px 18px;background:var(--bg-subtle);border:1px dashed var(--border-strong);border-radius:var(--radius);text-align:center;color:var(--muted);font-size:14px;}
.rating-widget-guest a{color:var(--primary);font-weight:500;}

.rating-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);background:var(--btn-inverse-bg);color:var(--btn-inverse-fg);padding:10px 22px;border-radius:999px;font-size:14px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all var(--transition);z-index:120;}
.rating-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* 小说页评分摘要（星星 + 均分 + 人数） */
.rating-summary{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.rating-stars{display:inline-flex;align-items:center;gap:2px;}
.rating-stars .star{width:18px;height:18px;fill:inherit;}
.rating-stars .star.full{color:var(--gold);fill:currentColor;}
.rating-stars .star.half{color:var(--gold);}
.rating-stars .star.empty{color:var(--gold);fill:none;stroke:currentColor;}

/* 评分组件：交互式星星 */
.rating-stars-interactive{display:inline-flex;align-items:center;gap:4px;}
.rating-stars-interactive .rate-star{
    background:transparent;border:none;padding:4px;cursor:pointer;
    color:var(--border-strong);transition:all var(--transition);
    -webkit-tap-highlight-color:transparent;
    line-height:1;
}
.rating-stars-interactive .rate-star svg{width:26px;height:26px;transition:all var(--transition);}
.rating-stars-interactive .rate-star:hover{transform:scale(1.15);}
.rating-stars-interactive .rate-star:hover svg{color:var(--gold);}
.rating-stars-interactive .rate-star.active{color:var(--gold);}
.rating-stars-interactive .rate-star.active svg{fill:var(--gold);color:var(--gold);}
.rating-widget-hint{font-size:13px;color:var(--muted);white-space:nowrap;}
/* 评后锁定状态 */
.rating-widget.rated .rating-stars-interactive{pointer-events:none;}
.rating-widget.rated .rating-widget-hint{font-weight:600;}

/* ============================================================
   评论区（小说页）
   ============================================================ */
.comments-section{margin-top:52px;}

.comment-form{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:18px;margin-bottom:28px;
}
.comment-form textarea{
    width:100%;border:1px solid var(--border);border-radius:var(--radius);
    padding:11px 14px;font-family:inherit;font-size:14px;line-height:1.7;
    background:var(--bg-subtle);color:var(--text);resize:vertical;min-height:90px;
    transition:border-color var(--transition),box-shadow var(--transition);
}
.comment-form textarea:focus{
    outline:none;border-color:var(--primary);
    box-shadow:0 0 0 3px var(--primary-glow);
    background:var(--surface);
}
.comment-form-foot{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:12px;gap:12px;
}
.comment-hint{font-size:13px;color:var(--muted);}

.comment-login-hint{
    padding:22px;text-align:center;
    background:var(--bg-subtle);border:1px dashed var(--border-strong);
    border-radius:var(--radius);color:var(--muted);font-size:14px;
    margin-bottom:28px;
}
.comment-login-hint a{color:var(--primary);font-weight:500;}

.comment-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0;}
.comment-item{
    display:flex;gap:12px;padding:18px 0;
    border-bottom:1px solid var(--border);
}
.comment-item:first-child{border-top:1px solid var(--border);}
.comment-item-mark{background:var(--primary-soft);border-radius:var(--radius);padding:4px;margin:-4px;}

.comment-avatar{
    width:34px;height:34px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg, var(--primary), var(--primary-hover));
    color:#fff;display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:700;
    box-shadow:0 1px 3px var(--primary-glow);
}
.comment-avatar.sm{width:28px;height:28px;font-size:11px;}

.comment-body{flex:1;min-width:0;}
.comment-meta{
    display:flex;align-items:center;flex-wrap:wrap;gap:8px;
    margin-bottom:8px;font-size:13px;
}
.comment-meta strong{font-weight:600;color:var(--text);font-size:13.5px;}
.comment-time{color:var(--muted);font-size:12.5px;}
.badge{
    display:inline-flex;align-items:center;gap:3px;
    padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:500;
}
.badge-mark{background:var(--primary-soft);color:var(--primary);border:1px solid var(--primary-border);}
.badge-review{background:#fff4e5;color:#c2410c;border:1px solid #fed7aa;}
.comment-review-title{font-weight:600;font-size:14px;color:var(--text);margin:6px 0 2px;}

.comment-mark-quote{
    display:block;margin:8px 0;padding:10px 14px;
    background:var(--bg-subtle);border-left:3px solid var(--primary);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    color:var(--text-2);font-size:13.5px;line-height:1.7;
    text-decoration:none;transition:background var(--transition);
}
.comment-mark-quote:hover{background:var(--border);color:var(--text);}
.comment-mark-text{display:block;margin-bottom:4px;}
.comment-mark-chapter{display:block;font-size:12px;color:var(--muted);}

.comment-text{
    font-size:14px;line-height:1.8;color:var(--text);
    word-break:break-word;overflow-wrap:break-word;
}

.comment-reply-btn{
    background:transparent;border:none;cursor:pointer;
    font-family:inherit;font-size:13px;color:var(--muted);
    padding:4px 0;margin-top:8px;
    transition:color var(--transition);
}
.comment-reply-btn:hover{color:var(--primary);}

.comment-reply-form{
    margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
}
.comment-reply-form textarea{min-height:70px;}

.reply-list{
    list-style:none;padding:0;margin:12px 0 0 0;
    display:flex;flex-direction:column;gap:0;
    border-left:2px solid var(--border);margin-left:10px;padding-left:14px;
}
.reply-item{
    display:flex;gap:10px;padding:12px 0;
    border-bottom:1px solid var(--border);
}
.reply-item:last-child{border-bottom:none;}

.comment-pagination{
    display:flex;justify-content:center;gap:6px;margin-top:28px;
}

/* ============================================================
   章节目录
   ============================================================ */
.chapter-catalog{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:28px;
}
.volume-list{margin-bottom:8px;}
.volume-item{margin-bottom:24px;}
.volume-item:last-child{margin-bottom:0;}
.volume-title{
    display:flex;align-items:center;gap:10px;
    margin:0 0 18px;padding:0;
    font-size:17px;font-weight:700;color:var(--text);
    border-bottom:none;
}
.volume-title::before{
    content:'';width:3px;height:18px;
    background:var(--primary);border-radius:2px;flex-shrink:0;
}
.volume-title span:first-child{flex:1;}
.volume-count{font-size:12.5px;color:var(--muted);font-weight:400;}
.volume-chapters{
    counter-reset:ch;
    display:grid;grid-template-columns:repeat(2, 1fr);
    column-gap:44px;row-gap:2px;
    padding:0;
    list-style:none;
}
.volume-chapters li{list-style:none;}
.volume-chapters a{
    counter-increment:ch;
    display:flex;align-items:center;gap:10px;
    padding:9px 14px 10px 0;
    font-size:14px;color:var(--text);
    text-decoration:none;border-radius:6px;
    border-bottom:1px dashed color-mix(in srgb, var(--border) 60%, transparent);
    transition:all .25s ease,border-color .25s ease;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    line-height:1.65;
}
.volume-chapters a::before{
    content:counter(ch);
    font-size:12px;font-weight:500;
    color:var(--muted);min-width:26px;
    text-align:right;font-variant-numeric:tabular-nums;
    flex-shrink:0;
    transition:color .25s,transform .25s;
}
.volume-chapters a:hover{
    background:var(--primary-soft);color:var(--primary);
    padding-left:8px;
    border-bottom-color:color-mix(in srgb, var(--primary) 50%, transparent);
}
.volume-chapters a:hover::before{
    color:var(--primary);transform:scale(1.2);
}

/* ============================================================
   章节目录 - 移动端响应式
   窄屏改为单列，允许标题换行，避免两列挤压导致显示错乱
   ============================================================ */
@media(max-width:768px){
    .chapter-catalog{padding:18px 16px;}
    .volume-chapters{
        grid-template-columns:1fr;
        column-gap:0;
        row-gap:0;
    }
    .volume-chapters a{
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        padding:11px 10px;
        line-height:1.5;
    }
    .volume-chapters a::before{
        min-width:24px;
        align-self:flex-start;
        margin-top:2px;
    }
    .volume-chapters a:hover{
        padding-left:10px;
    }
}