@charset "utf-8";
/*
	MBTXW.COM Copyright (C)2008-2099 www.mbtxw.com
	Author: mbtxw.com, QQ:536205792.
    Special note: do not modify this document without permission.
*/

/* 工具评论组件样式 */
.tool-comment {
    margin:1.5rem 0;
    padding:1.5rem;
    border-radius:0.75rem;
    background-color:#ffffff;
    box-shadow:0 1px 3px rgba(0, 0, 0, 0.1);
    transition:all 0.3s ease;
}
.tool-comment:hover {box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);}
.dark .tool-comment {background-color:#1f2937;color:#e2e8f0;}

.tool-comment-header {display:flex;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #f3f4f6;}
.tool-comment-header h3 {font-size:1.25rem;font-weight:600;position:relative;padding-left:1.125rem;}
.tool-comment-header h3::before {
    content:'';
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:0.375rem;
    height:1.5rem;
    background-color:#3b82f6;
    border-radius:0.1875rem;
}
.dark .tool-comment-header {border-bottom-color:#1E1E1E;}
.dark .tool-comment-header h3::before {background-color:#374151;}

/* 星级评分样式 */
.tool-comment-star {margin-bottom:1rem;}
.tool-comment-star h4 {display:block;font-weight:600;margin-bottom:0.5rem;font-size:1rem;color:#6b7280;}
.dark .tool-comment-star h4 {color:#9ca3af;}
/* 星星样式 */
.tool-comment-star-rating {font-size:2rem;cursor:pointer;transition:color 0.2s,transform 0.2s;display:inline-block;color:#d1d5db;}
.tool-comment-star-rating .star-selection.hover, .tool-comment-star-rating .star-selection.selected {color:#ffcc00;transform:scale(1.05);}
.dark .tool-comment-star-rating .star-selection {color:#4a5568;}


.tool-comment-star-rating .star-selection.selected {
    color: #fbbf24 !important; /* 确保选中状态颜色生效 */
    transform: scale(1.05);
}

/* 评论输入区域 */
.tool-comment-textarea {
    width:100%;
    min-height:8rem;
    padding:1rem;
    border:1px solid #e2e8f0;
    border-radius:0.5rem;
    background-color:#f9fafb;
    resize:vertical;
    margin-bottom:1rem;
    transition:all 0.3s ease;
}
.tool-comment-textarea:focus {outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1);}
.dark .tool-comment-textarea {background-color:#374151;border-color:#40444A;color:#e2e8f0;}
.dark .tool-comment-textarea:focus {border-color:#9CA3AF;}

/* 匿名选项 */
.tool-comment-anonymous {display:flex;align-items:center;margin-bottom:1rem;font-size:0.875rem;cursor:pointer;color:#6b7280;}
.tool-comment-anonymous .anonymous-checkbox {width:1rem;height:1rem;margin-right:0.5rem;color:#3b82f6;}

/* 提交按钮 */
.tool-comment-submit {
    display:inline-flex;
    align-items:center;
    padding:0.625rem 1.5rem;
    background-color:#3b82f6;
    color:#ffffff;
    font-weight:500;
    border-radius:0.5rem;
    border:none;
    cursor:pointer;
    transition:all 0.3s ease;
}
.tool-comment-submit:hover {background-color:#2563eb;transform:translateY(-0.125rem);box-shadow:0 4px 6px rgba(59, 130, 246, 0.1);}
.tool-comment-submit:active {transform:translateY(0);}




/* 平均评分展示 */
.tool-comment-average {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:1.25rem;
    padding:1rem;
    margin-bottom:1.5rem;
    border-radius:0.5rem;
    background-color:#f9fafb;
}
.dark .tool-comment-average {background-color:rgba(55, 65, 81, 0.5);}

.tool-comment-average .average-text {font-size:0.875rem;}
.tool-comment-average .average-stars {font-size:1.25rem;color:#fbbf24;}

.tool-comment-average .star-value {
    font-size:2rem;
    font-weight:700;
    color:#0d6efd;
}
.dark .tool-comment-average .star-value {color:#bbbfc5;}

/*评论列表*/
.tool-comment-list {margin-bottom:1.5rem;}
.tool-comment-box {padding:1.5rem 0;border-bottom:1px solid #f3f4f6;display:flex;gap:1rem;}
.tool-comment-box:last-child {border-bottom:none;}
.dark .tool-comment-box {border-bottom-color:#1E1E1E;}

/* 头像样式 */
.tool-comment-useravatar {flex-shrink:0;width:2.5rem;}
.tool-comment-useravatar img {
    width:2.5rem;
    height:2.5rem;
    border-radius:50%;
    object-fit:cover;
    border:1px solid #e5e7eb;
}
.dark .tool-comment-useravatar img {border-color:#374151;}

/* 内容包裹容器 */
.tool-comment-info {flex-grow:1;}
.tool-comment-userinfo {display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;}

.tool-comment-username {
    font-weight:600;
    color:#576377;
}
.dark .tool-comment-username {color:#bbbfc5;}

.tool-comment-time {font-size:0.75rem;color:#6b7280;}
.tool-comment-stars {margin:0.3125rem 0;font-size:1rem;color:#fbbf24;}
.tool-comment-content {color:#9098a5;margin-top:0.3125rem;line-height:1.6;}



/* 状态提示 */
.tool-comment-loading,
.tool-comment-no-comments,
.tool-comment-load-error {padding:2rem;text-align:center;border-radius:0.5rem;background-color:#f9fafb;color:#6b7280;}

.dark .tool-comment-loading,
.dark .tool-comment-no-comments,
.dark .tool-comment-load-error {background-color:#2d3748;}

/* 加载动画 */
.tool-comment-spinner {
    display:inline-block;
    width:1.25rem;
    height:1.25rem;
    border:2px solid #3b82f6;
    border-top-color:transparent;
    border-radius:50%;
    margin-left:0.5rem;
    animation:spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 分页样式 */
.tool-comment-pagination {text-align:center;margin:1.875rem 0;padding:0.9375rem;line-height:2.5rem;}
.tool-comment-pagination a,
.tool-comment-pagination span {
    display:inline-block;
    margin:0 0.25rem;
    padding:0 0.9375rem;
    height:2.5rem;
    line-height:2.5rem;
    border-radius:0.375rem;
    text-decoration:none;
    font-size:0.875rem;
    transition:all 0.3s ease;
}

.tool-comment-pagination a {
    color:#4a5568;
    background:#ffffff;
    border:1px solid #e2e8f0;
    box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);
}
.dark .tool-comment-pagination a {color:#cbd5e0;background:#1a202c;border:1px solid #374151;box-shadow:0 1px 2px rgba(0, 0, 0, 0.3);}

.tool-comment-pagination a:hover {
    color:#1a73e8;
    border-color:#1a73e8;
    transform:translateY(-0.125rem);
    box-shadow:0 4px 6px rgba(26, 115, 232, 0.1);
}
.dark .tool-comment-pagination a:hover {color:#718096;border-color:#374151;box-shadow:0 4px 6px rgba(49, 130, 206, 0.2);}

.tool-comment-pagination span.current {
    background:#1a73e8;
    color:#ffffff;
    font-weight:600;
    box-shadow:0 4px 12px rgba(26, 115, 232, 0.2);
}
.dark .tool-comment-pagination span.current {background:#374151;box-shadow:0 4px 12px rgba(49, 130, 206, 0.3);}

.tool-comment-pagination span.disabled {
    color:#a0aec0;
    background:#f7fafc;
    border:1px solid #e2e8f0;
    cursor:not-allowed;
}
.dark .tool-comment-pagination span.disabled {color:#4a5568;background:#2d3748;border:1px solid #374151;}

.tool-comment-pagination .pageinfo {
    margin:0 0.9375rem;
    color:#718096;
    font-size:0.875rem;
    border:none;
    background:transparent;
    box-shadow:none;
}
.dark .tool-comment-pagination .pageinfo {color:#a0aec0;}

.tool-comment-pagination span:not(.current):not(.disabled):not(.pageinfo) {
    color:#718096;
    padding:0 0.5rem;
    border:none;
    background:transparent;
    box-shadow:none;
}
.dark .tool-comment-pagination span:not(.current):not(.disabled):not(.pageinfo) {color:#4a5568;}