@charset "UTF-8";
        .comment-section { background: white; border-radius: 8px; position: relative; }

        /* ==================== 评论输入卡片（可在 DOM 内移动） ==================== */
        .comment-form-wrap {
            margin-bottom: 24px;
            transition: margin 0.25s ease, padding 0.25s ease;
        }
        /* 当表单被"插入"到子评论区时，左侧留白对齐子评论内容 */
        .comment-form-wrap.in-child {
            margin-top: 10px;
            padding-left: 44px;  /* 子评论头像 32px + margin 10px ≈ 42 */
        }

        /* 卡片头部：发表评论 / 取消回复 */
        .form-header {
            display: flex; align-items: center;
            padding-bottom: 10px;
            margin-bottom: 14px;
            border-bottom: 2px solid transparent;
            position: relative;
        }
        .form-title {
            font-size: 18px; color: #409eff; font-weight: 600;
            padding-bottom: 10px;
            margin-bottom: -12px;
            border-bottom: 3px solid #409eff;
            position: relative; z-index: 1;
        }
        .form-cancel {
            margin-left: 12px;
            color: #f56c6c;
            font-size: 15px;
            cursor: pointer;
            user-select: none;
            transition: color 0.2s;
        }
        .form-cancel:hover { color: #c45656; }

        /* 浅蓝色输入卡片 */
        .form-card {
            background: linear-gradient(135deg, #f5f8fd 0%, #eef3fb 100%);
            border-radius: 8px;
            padding: 16px;
            border: 1px solid #e7edf5;
        }
        .form-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
        .form-row input {
            padding: 12px 14px;width: 100%;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            background: rgba(255,255,255,0.75);
            border-bottom: 2px solid #dfe6f1;
            transition: border-color 0.2s, background 0.2s;
        }
        .form-row input:disabled { background: rgba(255,255,255,0.5); color: #909399; }
        .form-row input:focus { outline: none; border-bottom-color: #409eff; background: #fff; }
        #nicknameDiv,#emailDiv,#websiteDiv{position: relative;}

        /* 文本域：右下角留插画位置 */
        .textarea-wrap {
            position: relative;
            margin-bottom: 14px;
        }
        textarea {
            width: 100%;
            min-height: 110px;
            padding: 12px 14px;
            padding-right: 14px;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            resize: vertical;
            background: rgba(255,255,255,0.75);
            border-bottom: 2px solid #dfe6f1;
            transition: border-color 0.2s, background 0.2s;
            font-family: inherit;
            line-height: 1.6;
        }
        textarea:disabled { background: rgba(255,255,255,0.5); color: #909399; }
        textarea:focus { outline: none; border-bottom-color: #409eff; background: #fff; }

        /* 右下角装饰插画 + 诗句（SVG 内联，零外部依赖） */
        .textarea-deco {
            position: absolute;
            right: 10px;
            bottom: 6px;
            width: 130px;
            height: 90px;
            pointer-events: none;
            opacity: 0.8;
            user-select: none;
            transition: opacity 0.25s ease;
        }
        #content:focus + .textarea-deco {
            opacity: 0.1;
        }
        .textarea-deco text {
            font-family: "KaiTi","STKaiti","楷体", serif;
            font-size: 11px;
            fill: #8a94a6;
        }

        /* 验证条 */
        .captcha-trigger {
            height: 56px;
            border: 1px solid #dfe6f1;
            border-radius: 6px;
            background: linear-gradient(135deg, #ffffff 0%, #f5f8fd 100%);
            display: flex; align-items: center;
            padding: 0 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 14px;
            position: relative;
        }
        .captcha-trigger::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:#409eff; border-radius:6px 0 0 6px; transition: background 0.3s ease; }
        .captcha-trigger:hover { border-color: #409eff; box-shadow: 0 2px 8px rgba(64,158,255,0.15); }
        .captcha-trigger.success { background: #f0f9eb; border-color: #67c23a; }
        .captcha-trigger.success::before { background: #67c23a; }
        .trigger-text { flex: 1; font-size: 15px; color: #666; padding-left: 8px; }
        .captcha-trigger.success .trigger-text { color: #67c23a; }
        .trigger-icon { width: 22px; height: 22px; color: #909399; }
        .captcha-trigger.success .trigger-icon { color: #67c23a; }

        /* 底部工具栏：快捷回复 + 提交按钮 */
        .form-toolbar {
            display: flex; align-items: center;
            justify-content: space-between;
            background: rgba(255,255,255,0.6);
            padding: 10px 14px;
            border-radius: 6px;
        }
        .quick-reply {
            display: flex; align-items: center; gap: 8px;
            font-size: 14px; color: #606266;
        }
        .quick-reply .label { color: #909399; margin-right: 1px; }
        .quick-emoji {
            font-size: 20px;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            line-height: 1;
            transition: background 0.15s, transform 0.15s;
            user-select: none;
            display: inline-flex; align-items: center; justify-content: center;
        }
        .quick-emoji:hover {
            background: rgba(64,158,255,0.12);
            transform: scale(1.2);
        }
        .emoji-picker-wrap { position: relative; }
        .emoji-btn {
            font-size: 20px;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            line-height: 1;
            transition: background 0.15s;
            user-select: none;
        }
        .emoji-btn:hover { background: rgba(64,158,255,0.12); }
        .emoji-panel {
            display: none;
            position: absolute;
            bottom: calc(100% + 6px);
            left: 0;
            background: #fff;
            border: 1px solid #e4e7ed;
            border-radius: 8px;
            padding: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
            width: 240px;
            z-index: 50;
            flex-wrap: wrap;
            gap: 2px;
        }
        .emoji-panel.show { display: flex; }
        .emoji-panel .ep-item {
            width: 28px; height: 28px;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 18px;
            cursor: pointer;
            border-radius: 4px;
            transition: background 0.1s;
        }
        .emoji-panel .ep-item:hover { background: #ecf5ff; }

        .cm-tip {
            position: absolute;
            left: 50%; bottom: calc(100% + 10px);
            transform: translate(-50%, 6px);
            background: rgba(0, 0, 0, 0.78); color: #fff;
            padding: 7px 14px; border-radius: 6px;
            font-size: 13px; line-height: 1.3;
            white-space: nowrap;
            z-index: 99; opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }
        .cm-tip::after {
            content: '';
            position: absolute; left: 50%; top: 100%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: rgba(0, 0, 0, 0.78);
            border-bottom-width: 0;
        }
        .cm-tip.show { opacity: 1; transform: translate(-50%, 0); }
        /* 兜底：万一找不到 #captchaTrigger，退回页面顶部居中 */
        .cm-tip.cm-tip-fixed { position: fixed; left: 50%; top: 80px; bottom: auto; }
        .cm-tip.cm-tip-fixed::after { display: none; }

        .submit-btn {
            background: #1a5f9b;
            color: white;
            border: none;
            padding: 10px 28px;
            border-radius: 6px;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.5; cursor: not-allowed;
            font-weight: 500;
            letter-spacing: 1px;
        }
        .submit-btn.active { opacity: 1; cursor: pointer; background: #216bb5; }
        .submit-btn.active:hover { background: #2d7fd0; box-shadow: 0 2px 8px rgba(33,107,181,0.3); }

        /* ==================== 验证码弹窗 ==================== */
        .modal-mask { position: fixed; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.5); z-index: 999; display: none; animation: fadeIn 0.3s ease; }
        .modal-mask.show { display: block; }
        @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
        .captcha-modal { position: fixed; top:50%; left:50%; transform: translate(-50%,-50%); background: white; border-radius: 8px; padding: 20px; z-index: 1000; display: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2); animation: modalIn 0.3s ease; width: 340px; }
        .captcha-modal.show { display: block; }
        @keyframes modalIn { from{opacity:0; transform:translate(-50%,-50%) scale(0.9);} to{opacity:1; transform:translate(-50%,-50%) scale(1);} }
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
        .modal-title { font-size: 16px; font-weight: 600; color: #333; }
        .refresh-btn { width: 24px; height: 24px; cursor: pointer; color: #909399; transition: transform 0.3s ease; }
        .refresh-btn:hover { transform: rotate(180deg); color: #409eff; }
        .refresh-btn.disabled { opacity: 0.5; pointer-events: none; }

        .captcha-canvas-container { position: relative; width: 300px; height: 160px; border-radius: 4px; overflow: hidden; margin-bottom: 16px; background: #eee; }
        #bgCanvas, #blockCanvas { position: absolute; top: 0; left: 0; display: block; }
        #blockCanvas { z-index: 10; }
        .canvas-error {
            position: absolute; top:0; left:0; right:0; bottom:0;
            display: none; align-items: center; justify-content: center;
            flex-direction: column; padding: 20px; text-align: center;
            background: #fff8f0; color: #ad6800; font-size: 13px; line-height: 1.6; z-index: 20;
        }
        .canvas-error.show { display: flex; }
        .canvas-error .err-title { font-weight: 600; font-size: 14px; margin-bottom: 6px; color: #e6a23c; }
        .canvas-error .err-detail { color: #888; font-size: 12px; word-break: break-all; max-height: 80px; overflow-y: auto; }
        .canvas-loading {
            position: absolute; top:0; left:0; right:0; bottom:0;
            display: flex; align-items: center; justify-content: center;
            background: #f5f7fa; color: #909399; font-size: 14px; z-index: 15;
        }
        .canvas-loading.hide { display: none; }

        .slider-container { position: relative; width: 300px; height: 40px; background: #f5f7fa; border: 1px solid #e4e7ed; border-radius: 4px; }
        .slider-track { position: absolute; top:0; left:0; height:100%; width:0; background: #e1f3d8; border-radius: 4px 0 0 4px; transition: width 0.1s ease; }
        .slider-text { position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); color:#909399; font-size:14px; pointer-events:none; z-index:2; user-select:none; }
        .slider-btn { position: absolute; top:0; left:0; width:40px; height:40px; background:white; border:1px solid #e4e7ed; border-radius:4px; cursor:grab; display:flex; align-items:center; justify-content:center; color:#666; font-size:18px; box-shadow:0 1px 3px rgba(0,0,0,0.1); z-index:3; transition: background 0.2s ease; user-select:none; }
        .slider-btn:active { cursor: grabbing; }
        .slider-container.success .slider-track { background: #67c23a; }
        .slider-container.success .slider-btn { background:#67c23a; color:white; border-color:#67c23a; }
        .slider-container.fail .slider-track { background:#fde2e2; }
        .slider-container.fail .slider-btn { background:#f56c6c; color:white; border-color:#f56c6c; }
        @keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
        .shake { animation: shake 0.3s ease; }

        @media (max-width: 600px) {
            .form-row { grid-template-columns: 1fr; }
            .captcha-modal { width: 90vw; max-width: 340px; }
            .captcha-canvas-container, .slider-container { width: 100% !important; }
            textarea { padding-right: 14px; }
            .textarea-deco { width: 95px; height: 70px; }
            .textarea-deco text { font-size: 10px; }
            .comment-form-wrap.in-child { padding-left: 0; margin-left: 42px; }
        }

        /* ==================== 楼中楼评论区样式（仿题图） ==================== */
        .comment-list { margin-top: 8px; }
        .comment-list-header {
            font-size: 16px; color: #333; font-weight: 600;
            padding-bottom: 12px; margin-bottom: 4px;
            border-bottom: 1px solid #f0f0f0;
        }
        .comment-list-header .count { color: #909399; font-weight: 400; font-size: 14px; margin-left: 4px; }

        /* 单条评论 */
        .cm-item {
            display: flex;
            padding: 18px 0;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }
        .cm-item:last-child { border-bottom: none; }

        /* 头像：圆形、渐变色首字，顶级 40px / 子评论 32px */
        .cm-avatar {
            flex-shrink: 0;
            width: 40px; height: 40px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 17px; font-weight: 600;
            margin-right: 12px;
            user-select: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
            overflow: hidden;
            background: #e8eaed;
        }
        /* 真实头像图（注册用户）：img 完全铺满圆 */
        .cm-avatar img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
        }

        /* 子评论容器：左侧一条灰色竖线（题图样式），所有回复平铺在此区域内 */
        .cm-children {
            margin-top: 12px;
            padding: 0 0 0 15px;
            border-left: 3px solid #c7cad1;
            background: transparent;
        }
        .cm-children .cm-item {
            padding: 12px 0;
            border-bottom: 1px dashed #d9d9d9;   /* 虚线分隔，和题图完全一致 */
            position: relative;
        }
        .cm-children .cm-item:last-child { border-bottom: none; }

        /* 子评论字体/头像比顶级略小 */
        .cm-children .cm-avatar { width: 32px; height: 32px; font-size: 14px; margin-right: 10px; margin-top: 2px; }
        .cm-children .cm-head { font-size: 13px; }
        .cm-children .cm-nick { font-size: 14px; }
        .cm-children .cm-floor { display: none; }
        .cm-children .cm-content { font-size: 14px; color: #444; margin-top: 6px; line-height: 1.7; }
        .cm-children .cm-meta { font-size: 12px; margin-top: 3px; gap: 8px; }
        /* 子评论里不再嵌套新的竖线（后端已扁平化，前端也不递归渲染 children） */
        .cm-children .cm-children { display: none; }

        /* 评论主体 */
        .cm-body { flex: 1; min-width: 0; }
        .cm-head {
            display: flex; align-items: center; flex-wrap: wrap;
            /*gap: 6px; line-height: 1.4;*/
        }
        .cm-head span, .cm-head a {
            margin: 0 5px 0 0;
        }
        .cm-nick {
            font-size: 14px; font-weight: 600; color: #333;
            text-decoration: none;
        }
        a.cm-nick:hover { color: #409eff; }

        /* 徽标（V / 博主 / 铁粉） */
        .cm-badge {
            display: inline-flex; align-items: center;
            height: 18px; padding: 0 5px;
            border-radius: 3px;
            font-size: 11px; font-weight: 600;
            line-height: 1;
            vertical-align: middle;
        }
        .cm-badge-tourist  { background: #9b8cff; color: #fff; }
        .cm-badge-tourist::before { content: '游客'; }
        .cm-badge-v  { background: #cddc39; color: #fff; }
        .cm-badge-v::before { content: 'V'; }
        .cm-badge-blogger { background: #ff7d00; color: #fff; }
        .cm-badge-blogger::before { content: '博主'; }
        .cm-badge-admin { background: #ff0076; color: #fff; }
        .cm-badge-admin::before { content: '管理员'; }
        .cm-badge-fan { background: #b88762; color: #fff; }
        .cm-badge-fan::before { content: '铁粉'; }

        /* 元信息行：日期·来自XX·回复 */
        .cm-meta {
            display: flex; align-items: center; gap: 10px;
            margin-top: 4px;
            font-size: 13px; color: #909399;
        }
        .cm-meta .dot { color: #dcdfe6; }
        .cm-reply-btn {
            cursor: pointer;
            color: #909399;
            padding: 2px 6px;
            border-radius: 3px;
            user-select: none;
            transition: color 0.2s, background 0.2s;
        }
        .cm-reply-btn:hover { color: #409eff; background: #ecf5ff; }

        /* 右上角楼层号 */
        .cm-floor {
            position: absolute; top: 18px; right: 0;
            font-size: 14px; color: #c0c4cc; font-weight: 500;
        }
        .cm-children .cm-floor { display: none; }

        /* 正文 */
        .cm-content {
            margin-top: 8px;
            font-size: 15px; color: #303133; line-height: 1.7;
            word-break: break-word; white-space: pre-wrap;
        }
        .cm-content .cm-at {
            color: #409eff; margin-right: 4px; font-weight: 500;
        }
        .cm-emoji { font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", sans-serif; }

        /* 空/加载/错误状态 */
        .cm-empty, .cm-loading, .cm-error {
            padding: 40px 0; text-align: center;
            color: #909399; font-size: 14px;
        }
        .cm-error { color: #f56c6c; }

        /* ============ 分页按钮组 ============ */
        .cm-pagination {
            display: flex; justify-content: center; align-items: center;
            gap: 8px;
            padding: 24px 0 8px;
        }
        .cm-page-btn {
            min-width: 36px; height: 36px;
            padding: 0 12px;
            border: 1px solid #dcdfe6;
            border-radius: 8px;
            background: #fff;
            color: #606266;
            font-size: 14px;
            cursor: pointer;
            display: inline-flex; align-items: center; justify-content: center;
            transition: all 0.2s;
            user-select: none;
        }
        .cm-page-btn:hover:not(:disabled):not(.active) {
            color: #409eff; border-color: #409eff;
        }
        .cm-page-btn.active {
            background: #409eff; color: #fff; border-color: #409eff;
            cursor: default;
        }
        .cm-page-btn:disabled {
            color: #c0c4cc; cursor: not-allowed; background: #f5f7fa;
        }
        .cm-page-total {
            padding: 0 6px;
            font-size: 14px; color: #909399;
        }

        @media (max-width: 576px) {
            .form-toolbar {
                display: block;
            }
            .quick-emoji {
                padding: 1px 0 10px 5px;
            }
            .quick-reply {
                gap: 1px;
            }
            .emoji-panel {
                right: 0;
                left: auto;
            }
        }