/* 评论区 —— 极简风格（扁平、无渐变、无阴影、无炫技动效，主色 #409eff 克制使用） */

/* 头部 */
.xu5-comments-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 24px;
   background: #fff;
   border-bottom: 1px solid #eee;
}

.xu5-comments-title {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 1.2rem;
   font-weight: 600;
   color: #1a1a1a;
}

.xu5-comments-title .comments-count {
   font-size: 0.7em;
   font-weight: 500;
   color: #888;
   background: #f2f3f5;
   padding: 3px 10px;
   border-radius: 4px;
}

.comment-sort-select {
   padding: 6px 12px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   background: #fff;
   color: #555;
   font-size: 14px;
   cursor: pointer;
   transition: border-color 0.15s;
}

.comment-sort-select:hover,
.comment-sort-select:focus {
   outline: none;
   border-color: #409eff;
}

/* 加载更多 */
.xu5-load-more-comments {
   text-align: center;
   padding: 18px;
   border-top: 1px solid #eee;
   background: #fff;
}

.xu5-load-more-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 22px;
   background: #fff;
   border: 1px solid #409eff;
   border-radius: 4px;
   color: #409eff;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.15s, color 0.15s;
}

.xu5-load-more-btn:hover {
   background: #409eff;
   color: #fff;
}

.xu5-load-more-btn .btn-count {
   font-size: 12px;
   opacity: 0.75;
}

/* 空状态 */
.xu5-comments-empty {
   text-align: center;
   padding: 48px 24px;
   background: #fff;
}

.xu5-comments-empty .empty-icon {
   font-size: 3em;
   margin-bottom: 12px;
   opacity: 0.35;
}

.xu5-comments-empty .empty-text {
   font-size: 15px;
   color: #aaa;
   font-weight: 500;
}

/* 列表去点 */
.xu5-tutorial-comments ul,
.xu5-tutorial-comments ol,
.xu5-tutorial-comments li,
.xu5-tutorial-comments .comment-list {
   list-style: none !important;
   margin: 0;
   padding: 0;
}

/* 评论项 */
.xu5-tutorial-comments .xu5-comment-item {
   padding: 14px 18px;
   padding-left: 52px;
   position: relative;
   transition: border-color 0.15s;
   margin-bottom: 8px;
   background: #fff;
   border-radius: 6px;
   border: 1px solid #ddd;
   list-style: none !important;
   counter-increment: comment-counter;
}

.xu5-tutorial-comments .xu5-comment-item:hover {
   border-color: #d8d8d8;
}

.xu5-tutorial-comments .xu5-comment-item:last-child {
   margin-bottom: 0;
}

/* 楼层号 - 扁平 */
.xu5-tutorial-comments .floor-number {
   position: absolute;
   left: 14px;
   top: 14px;
   font-size: 13px;
   font-weight: 600;
   color: #409eff;
   background: #f0f6ff;
   width: 30px;
   height: 30px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.xu5-tutorial-comments .children .floor-number {
   display: none !important;
}

/* 顶级评论楼层号（::before 计数器） */
.xu5-tutorial-comments .xu5-comment-item::before {
   display: none !important;
}

.xu5-tutorial-comments > .comment-list {
   counter-reset: comment-counter;
}

.xu5-tutorial-comments > .comment-list > .xu5-comment-item::before {
   content: '#' counter(comment-counter);
   position: absolute;
   left: 14px;
   top: 14px;
   font-size: 13px;
   font-weight: 600;
   color: #409eff;
   background: #f0f6ff;
   width: 30px;
   height: 30px;
   border-radius: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* 作者评论 - 改为克制的主题蓝，不再用绿色 */
.xu5-tutorial-comments .bypostauthor > .xu5-comment-item {
   border: 1px solid #cfe3ff;
   background: #f7faff;
}

.xu5-tutorial-comments .bypostauthor > .xu5-comment-item::before {
   background: #409eff;
   color: #fff;
}

.xu5-tutorial-comments .bypostauthor .xu5-comment-author::after {
   content: '作者';
   display: inline-block;
   margin-left: 6px;
   background: #409eff;
   color: #fff;
   font-size: 11px;
   padding: 1px 7px;
   border-radius: 3px;
   font-weight: 500;
}

/* 评论头部 */
.xu5-tutorial-comments .xu5-comment-header {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   margin-bottom: 6px;
   gap: 8px;
}

.xu5-tutorial-comments .xu5-comment-author {
   font-weight: 600;
   font-size: 14px;
   color: #1a1a1a;
}

.xu5-tutorial-comments .xu5-comment-date {
   color: #999;
   font-size: 12px;
   font-weight: 400;
}

.xu5-tutorial-comments .xu5-comment-await {
   color: #e6a23c;
   font-size: 12px;
   font-weight: 500;
}

/* 评论内容 */
.xu5-tutorial-comments .xu5-comment-content {
   margin: 0;
}

.xu5-tutorial-comments .xu5-comment-content p {
   margin: 0;
   font-size: 14px;
   line-height: 1.6;
   color: #333;
   font-weight: 400;
}

/* 回复按钮 - 扁平文字链 */
.xu5-tutorial-comments .xu5-comment-reply {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   color: #409eff;
   text-decoration: none;
   font-size: 12px;
   font-weight: 500;
   margin-top: 6px;
   transition: color 0.15s;
}

.xu5-tutorial-comments .xu5-comment-reply:hover {
   color: #337ecc;
   text-decoration: underline;
}

/* 嵌套评论 */
.xu5-tutorial-comments .children {
   margin-left: 28px;
   margin-top: 8px;
   position: relative;
   list-style: none !important;
}

.xu5-tutorial-comments .children .children {
   margin-left: 0 !important;
}

.xu5-tutorial-comments .children::before {
   display: none;
}

.xu5-tutorial-comments .children .xu5-comment-item {
   background: #fafbfc;
   border-radius: 6px;
   margin-bottom: 8px;
   border: 1px solid #ddd;
   position: relative;
   list-style: none !important;
   padding: 12px 16px;
}

.xu5-tutorial-comments .children .xu5-comment-item::before {
   display: none !important;
}

.xu5-tutorial-comments .children .xu5-comment-item:hover {
   border-color: #d8d8d8;
}

.xu5-tutorial-comments .children .xu5-comment-item:last-child {
   margin-bottom: 0;
}

/* 回复标记 */
.xu5-tutorial-comments .xu5-reply-to {
   color: #409eff;
   font-size: 13px;
   font-weight: 500;
   margin-right: 5px;
}

.xu5-tutorial-comments .xu5-reply-to .reply-name {
   color: #409eff;
}

/* 评论表单 - 极简 */
.xu5-tutorial-comments form.comment-form {
   background: #fafbfc;
   padding: 24px;
   border-top: 1px solid #eee;
   position: relative;
   margin-top: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
}

.xu5-tutorial-comments form.comment-form .comment-reply-title,
.xu5-tutorial-comments .comment-reply-title,
#reply-title {
   display: none !important;
}

.xu5-tutorial-comments form.comment-form .comment-form-comment {
   position: relative;
   width: 100%;
}

.xu5-tutorial-comments form.comment-form textarea {
   padding-bottom: 36px;
}

.xu5-tutorial-comments .char-counter {
   position: absolute;
   bottom: 14px;
   right: 14px;
   font-size: 12px;
   color: #aaa;
   pointer-events: none;
}

.xu5-tutorial-comments .char-counter.warning {
   color: #e6a23c;
}

.xu5-tutorial-comments .char-counter.error {
   color: #f56c6c;
}

.xu5-tutorial-comments form.comment-form label {
   display: block;
   margin-bottom: 6px;
   font-weight: 500;
   font-size: 14px;
   color: #555;
}

.xu5-tutorial-comments form.comment-form input,
.xu5-tutorial-comments form.comment-form textarea {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid #e0e0e0;
   border-radius: 4px;
   margin-bottom: 0;
   font-size: 14px;
   font-family: inherit;
   background: #fff;
   transition: border-color 0.15s;
   box-sizing: border-box;
}

.xu5-tutorial-comments form.comment-form input:focus,
.xu5-tutorial-comments form.comment-form textarea:focus {
   outline: none;
   border-color: #409eff;
}

.xu5-tutorial-comments form.comment-form textarea {
   min-height: 96px;
   resize: vertical;
}

.xu5-tutorial-comments form.comment-form input[type="submit"] {
   background: #409eff;
   color: #fff;
   border: none;
   padding: 10px 24px;
   border-radius: 4px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: background 0.15s;
}

.xu5-tutorial-comments form.comment-form input[type="submit"]:hover {
   background: #337ecc;
}

/* 提示信息 */
.xu5-tutorial-comments .comment-notes {
   width: 100%;
   background: #f7faff;
   border: 1px solid #e8f0fe;
   border-radius: 4px;
   padding: 10px 12px;
   font-size: 13px;
   color: #666;
}

.xu5-tutorial-comments .required {
   color: #f56c6c;
}

.xu5-tutorial-comments form.comment-form > p {
   width: 100%;
   margin: 0;
}

.xu5-tutorial-comments form.comment-form > p.comment-form-author,
.xu5-tutorial-comments form.comment-form > p.comment-form-email {
   width: calc(50% - 7px);
   flex: 0 0 calc(50% - 7px);
}

/* Toast 提示框 */
#comment-toast {
   display: none;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #303133;
   color: #fff;
   padding: 18px 40px;
   border-radius: 8px;
   font-size: 1.1rem;
   z-index: 9999;
   transition: opacity 0.3s;
   width: auto;
   max-width: 90vw;
   text-align: center;
}

/* 移动端 */
@media (max-width: 768px) {
   .xu5-tutorial-comments {
      margin: 32px 0;
      border-radius: 8px;
   }

   .xu5-comments-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 18px;
   }

   .xu5-tutorial-comments form.comment-form > p.comment-form-author,
   .xu5-tutorial-comments form.comment-form > p.comment-form-email {
      width: 100%;
      flex: 0 0 100%;
   }

   .xu5-tutorial-comments .floor-number {
      display: none !important;
   }

   .xu5-tutorial-comments .xu5-comment-item {
      padding: 14px 16px;
      padding-left: 16px;
   }

   .xu5-tutorial-comments > .comment-list > .xu5-comment-item::before {
      display: none !important;
   }

   .xu5-tutorial-comments .xu5-comment-header {
      gap: 6px;
      margin-bottom: 8px;
   }

   .xu5-tutorial-comments .xu5-comment-author {
      font-size: 13px;
   }

   .xu5-tutorial-comments .xu5-comment-date {
      font-size: 11px;
   }

   .xu5-tutorial-comments .children {
      margin-left: 14px;
   }

   .xu5-tutorial-comments .children .children {
      margin-left: 0 !important;
   }

   .xu5-tutorial-comments .children .xu5-comment-item {
      padding: 12px;
   }

   .xu5-tutorial-comments form.comment-form {
      padding: 18px;
   }

   .xu5-tutorial-comments .xu5-reply-to {
      display: block;
      font-size: 12px;
      margin-top: 2px;
   }
}

@media (max-width: 500px) {
   #comment-toast {
      font-size: 1rem !important;
      padding: 12px 8vw !important;
      border-radius: 8px !important;
      max-width: 94vw !important;
   }
}

@media (max-width: 480px) {
   .xu5-tutorial-comments .xu5-comment-item {
      padding: 14px 16px;
   }
   .xu5-tutorial-comments form.comment-form {
      padding: 16px;
   }
}

/* 桌面端楼层号定位 */
@media (min-width: 769px) {
   .xu5-tutorial-comments .floor-number {
      position: absolute;
      left: 14px;
      top: 14px;
      width: 30px;
      height: 30px;
   }

   .xu5-tutorial-comments .children .floor-number {
      display: none !important;
   }
}