/* ===== 根容器样式 ===== */
.ui-root {
    font-family: 'Georgia', 'Noto Serif SC', serif; /* 衬线字体：Georgia > 思源宋体 > 系统衬线 */
    background: linear-gradient(160deg, #fdf6f9 0%, #f5f0ff 100%); /* 160度渐变：浅粉到淡紫 */
    color: #3a2d40; /* 深紫灰色文字 */
    padding: 14px 12px 24px 12px; /* 内边距上14右12下24左12 */
    border-radius: 18px; /* 18px圆角 */
    max-width: 780px; /* 最大宽度780px */
    margin: 0 auto; /* 水平居中 */
    box-shadow: 0 4px 32px rgba(180, 140, 200, 0.13); /* 柔和紫色阴影 */
}

/* ===== 顶部标签栏 ===== */
.ui-root .tb {
    display: flex; /* 弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 8px; /* 子元素间距8px */
    justify-content: center; /* 水平居中 */
    padding: 10px 8px; /* 内边距上下10左右8 */
    background: linear-gradient(90deg, #fce4f0 0%, #ede0ff 100%); /* 90度渐变：粉到紫 */
    border-radius: 14px; /* 14px圆角 */
    margin-bottom: 16px; /* 下外边距16px */
    border: 1px solid #e8c8e0; /* 1px实线边框 粉紫色 */
    box-shadow: 0 2px 10px rgba(210, 160, 220, 0.10); /* 轻微阴影 */
}

/* 标签项 */
.ui-root .ti {
    font-size: 13px; /* 文字大小 */
    color: #7a5580; /* 紫灰色文字 */
    background: rgba(255, 255, 255, 0.72); /* 半透明白色背景 */
    border-radius: 20px; /* 大圆角药丸形状 */
    padding: 4px 14px; /* 内边距上下4左右14 */
    border: 1px solid #e0c0d8; /* 浅粉紫边框 */
    letter-spacing: 0.04em; /* 字间距 */
}

/* ===== 正文区域 ===== */
.ui-root .mt {
    padding: 4px 6px 16px 6px; /* 内边距上4右6下16左6 */
    line-height: 1.95; /* 行高1.95倍 */
    font-size: 15px; /* 文字大小 */
    color: #3a2d40; /* 深紫灰色 */
    letter-spacing: 0.03em; /* 字间距 */
}

/* 正文段落 */
.ui-root .mt p {
    margin: 0 0 10px 0; /* 底部外边距10px */
    text-indent: 2em; /* 首行缩进2字符 */
}

/* ===== 折叠块容器 ===== */
.ui-root .sb {
    background: rgba(255, 255, 255, 0.68); /* 半透明白色背景 */
    border: 1px solid #e8d0ee; /* 浅紫边框 */
    border-radius: 14px; /* 14px圆角 */
    margin-bottom: 12px; /* 下外边距12px */
    overflow: hidden; /* 隐藏溢出（配合圆角） */
    box-shadow: 0 2px 12px rgba(190, 150, 210, 0.08); /* 轻微紫色阴影 */
    transition: box-shadow 0.3s; /* 阴影过渡0.3秒 */
}

/* 折叠块悬停效果 */
.ui-root .sb:hover {
    box-shadow: 0 4px 20px rgba(190, 150, 210, 0.16); /* 增强阴影 */
}

/* ===== 折叠摘要 ===== */
.ui-root .st {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 8px; /* 子元素间距8px */
    padding: 11px 16px; /* 内边距上下11左右16 */
    font-size: 14px; /* 文字大小 */
    font-weight: normal; /* 正常字重 */
    color: #6a4070; /* 紫色文字 */
    cursor: pointer; /* 手型指针 */
    background: linear-gradient(90deg, #f9eef6 0%, #f0e8ff 100%); /* 90度渐变：粉到紫 */
    border-bottom: 1px solid #e8d0ee; /* 底部边框 */
    list-style: none; /* 移除默认标记 */
    letter-spacing: 0.06em; /* 增加字间距 */
    user-select: none; /* 禁止选中文字 */
}

/* 隐藏默认三角标记 */
.ui-root .st::-webkit-details-marker {
    display: none;
}

/* 自定义右三角符号 */
.ui-root .st::before {
    content: '▸'; /* 右三角 */
    color: #c090d0; /* 浅紫色 */
    font-size: 13px; /* 大小 */
    transition: transform 0.25s; /* 旋转过渡0.25秒 */
    display: inline-block; /* 行内块显示 */
}

/* 展开状态三角旋转90度 */
.ui-root details[open] > .st::before {
    transform: rotate(90deg); /* 旋转90度 */
}

/* ===== 展开内容区域 ===== */
.ui-root .ug {
    padding: 12px 16px 8px 16px; /* 内边距上12右16下8左16 */
    display: grid; /* 网格布局 */
    gap: 7px; /* 网格间距7px */
}

/* 网格项：标签-内容对 */
.ui-root .ir {
    display: grid; /* 网格布局 */
    grid-template-columns: 68px 1fr; /* 两列：68px固定 + 剩余空间 */
    gap: 8px; /* 网格间距8px */
    align-items: start; /* 顶部对齐 */
    font-size: 13.5px; /* 文字大小 */
}

/* 标签列 */
.ui-root .il {
    color: #a070b0; /* 紫灰色 */
    font-size: 12.5px; /* 文字大小 */
    padding-top: 1px; /* 顶部微调 */
    letter-spacing: 0.05em; /* 字间距 */
}

/* 内容列 */
.ui-root .iv {
    color: #3a2d40; /* 深紫灰 */
    line-height: 1.7; /* 行高1.7倍 */
}

/* 标签块样式 */
.ui-root .rr {
    background: rgba(240, 230, 255, 0.45); /* 半透明淡紫背景 */
    border-radius: 8px; /* 8px圆角 */
    padding: 4px 8px; /* 内边距上下4左右8 */
}

/* 只读/注释文字 */
.ui-root .rf {
    pointer-events: none; /* 禁止点击 */
    color: #8060a0; /* 紫灰色 */
    font-style: italic; /* 斜体 */
    font-size: 13px; /* 文字大小 */
}

/* 区块标题 */
.ui-root .rt {
    font-size: 13px; /* 文字大小 */
    color: #a070b0; /* 紫灰色 */
    letter-spacing: 0.08em; /* 较大字间距 */
    padding: 8px 16px 6px 16px; /* 内边距上8右16下6左16 */
    border-top: 1px dashed #e0c8e8; /* 顶部虚线分隔 */
    margin-top: 4px; /* 上外边距4px */
}

/* ===== 卡片网格区域 ===== */
.ui-root .rc {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* 响应式列：最小220px */
    gap: 10px; /* 网格间距10px */
    padding: 0 14px 14px 14px; /* 内边距上0右14下14左14 */
}

/* 卡片项 */
.ui-root .rk {
    background: linear-gradient(135deg, #fdf0f8 0%, #f3eeff 100%); /* 135度渐变：粉到紫 */
    border: 1px solid #e0c8e8; /* 浅紫边框 */
    border-radius: 12px; /* 12px圆角 */
    padding: 10px 12px; /* 内边距上下10左右12 */
    font-size: 12.5px; /* 文字大小 */
    line-height: 1.75; /* 行高1.75倍 */
    box-shadow: 0 2px 8px rgba(180, 140, 200, 0.08); /* 轻微阴影 */
    transition: transform 0.2s, box-shadow 0.2s; /* 移动和阴影过渡0.2秒 */
}

/* 卡片悬停效果 */
.ui-root .rk:hover {
    transform: translateY(-2px); /* 向上移动2px */
    box-shadow: 0 6px 18px rgba(180, 140, 200, 0.16); /* 增强阴影 */
}

/* 卡片头部 */
.ui-root .rh {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 7px; /* 子元素间距7px */
    margin-bottom: 6px; /* 下外边距6px */
    border-bottom: 1px solid #e8d0f0; /* 底部边框 */
    padding-bottom: 6px; /* 底部内边距6px */
}

/* 卡片标题 */
.ui-root .rn {
    font-size: 14px; /* 文字大小 */
    color: #6a3a80; /* 深紫色 */
    letter-spacing: 0.05em; /* 字间距 */
}

/* 卡片徽章 */
.ui-root .rb {
    font-size: 11px; /* 文字大小 */
    background: linear-gradient(90deg, #f0d0ff, #ffd0ea); /* 90度渐变：紫到粉 */
    color: #7a4888; /* 紫色文字 */
    border-radius: 10px; /* 10px圆角 */
    padding: 1px 8px; /* 内边距上下1左右8 */
    border: 1px solid #e0b8f0; /* 浅紫边框 */
}

/* 卡片内容行 */
.ui-root .rl {
    color: #5a4060; /* 紫灰色 */
    font-size: 12px; /* 文字大小 */
    margin-bottom: 3px; /* 下外边距3px */
}

/* ===== 进度条相关 ===== */
/* 进度条容器 */
.ui-root .fl {
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    gap: 4px; /* 子元素间距4px */
    margin: 5px 0; /* 上下外边距5px */
}

/* 进度条标签 */
.ui-root .fa {
    font-size: 11.5px; /* 文字大小 */
    color: #a070b0; /* 紫灰色 */
}

/* 进度条行 */
.ui-root .fw {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 7px; /* 子元素间距7px */
}

/* 进度条背景 */
.ui-root .fb {
    flex: 1; /* 占据剩余空间 */
    height: 7px; /* 高度7px */
    background: #f0e0f8; /* 淡紫色背景 */
    border-radius: 10px; /* 10px圆角 */
    border: 1px solid #ddc0f0; /* 紫色边框 */
    overflow: hidden; /* 隐藏溢出 */
}

/* 进度条填充 */
.ui-root .ff {
    height: 100%; /* 高度100% */
    background: linear-gradient(90deg, #f0a0d0 0%, #c080e8 100%); /* 90度渐变：粉到紫 */
    border-radius: 10px; /* 10px圆角 */
    transition: width 0.4s ease; /* 宽度变化过渡0.4秒 */
}

/* 进度数值 */
.ui-root .fn {
    font-size: 11px; /* 文字大小 */
    color: #a070b0; /* 紫灰色 */
    white-space: nowrap; /* 禁止换行 */
}

/* 斜体辅助文字 */
.ui-root .fi {
    font-style: italic; /* 斜体 */
    color: #8860a8; /* 紫灰色 */
    font-size: 11.5px; /* 文字大小 */
}

/* ===== 笔记区域 ===== */
.ui-root .nc {
    padding: 14px 16px; /* 内边距上下14左右16 */
}

/* 笔记头部 */
.ui-root .nh {
    margin-bottom: 10px; /* 下外边距10px */
    border-bottom: 1px dashed #e0c8e8; /* 底部虚线 */
    padding-bottom: 8px; /* 底部内边距8px */
}

/* 笔记标题行 */
.ui-root .nr {
    display: flex; /* 弹性布局 */
    align-items: baseline; /* 基线对齐 */
    gap: 8px; /* 子元素间距8px */
    margin-bottom: 4px; /* 下外边距4px */
}

/* 笔记主标题 */
.ui-root .nn {
    font-size: 17px; /* 较大字号 */
    color: #5a2870; /* 深紫色 */
    letter-spacing: 0.08em; /* 较大字间距 */
}

/* 笔记徽章 */
.ui-root .ng {
    font-size: 12px; /* 文字大小 */
    color: #c080c0; /* 浅紫色 */
    background: #fce8ff; /* 淡紫背景 */
    border-radius: 8px; /* 8px圆角 */
    padding: 1px 8px; /* 内边距上下1左右8 */
    border: 1px solid #e8c0f0; /* 紫色边框 */
}

/* 笔记副标题 */
.ui-root .na {
    font-size: 12px; /* 文字大小 */
    color: #a080b0; /* 紫灰色 */
}

/* 笔记信息行 */
.ui-root .ni {
    font-size: 12.5px; /* 文字大小 */
    color: #8060a0; /* 紫灰色 */
    letter-spacing: 0.04em; /* 字间距 */
}

/* 标签组 */
.ui-root .nt {
    display: flex; /* 弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 6px; /* 子元素间距6px */
    margin-bottom: 10px; /* 下外边距10px */
}

/* 标签项 */
.ui-root .nx {
    font-size: 12px; /* 文字大小 */
    background: linear-gradient(90deg, #ffe0f5, #ead8ff); /* 90度渐变：粉到紫 */
    color: #7040a0; /* 紫色文字 */
    border-radius: 12px; /* 12px圆角 */
    padding: 2px 11px; /* 内边距上下2左右11 */
    border: 1px solid #e0b8f0; /* 浅紫边框 */
    letter-spacing: 0.03em; /* 字间距 */
}

/* 引用块 */
.ui-root .nw {
    font-size: 13px; /* 文字大小 */
    color: #7a5090; /* 紫色文字 */
    background: linear-gradient(90deg, rgba(255, 230, 245, 0.6), rgba(235, 220, 255, 0.6)); /* 半透明渐变 */
    border-left: 3px solid #d090e8; /* 左侧紫色强调边框 */
    border-radius: 0 10px 10px 0; /* 右侧圆角 */
    padding: 7px 12px; /* 内边距上下7左右12 */
    margin-bottom: 10px; /* 下外边距10px */
    font-style: italic; /* 斜体 */
    line-height: 1.7; /* 行高1.7倍 */
}

/* 网格容器 */
.ui-root .nig {
    display: grid; /* 网格布局 */
    gap: 7px; /* 网格间距7px */
    margin-bottom: 12px; /* 下外边距12px */
}

/* ===== 双列折叠块 ===== */
.ui-root .dr {
    display: grid; /* 网格布局 */
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    gap: 10px; /* 网格间距10px */
    margin-top: 4px; /* 上外边距4px */
}

/* 左右折叠块 */
.ui-root .dl,
.ui-root .dd {
    background: rgba(255, 255, 255, 0.75); /* 半透明白色背景 */
    border: 1px solid #e0c8f0; /* 浅紫边框 */
    border-radius: 11px; /* 11px圆角 */
    overflow: hidden; /* 隐藏溢出 */
    transition: box-shadow 0.2s; /* 阴影过渡0.2秒 */
}

/* 折叠块悬停效果 */
.ui-root .dl:hover,
.ui-root .dd:hover {
    box-shadow: 0 3px 14px rgba(180, 130, 210, 0.14); /* 增强阴影 */
}

/* 双列折叠摘要 */
.ui-root .ds {
    padding: 8px 12px; /* 内边距上下8左右12 */
    font-size: 13px; /* 文字大小 */
    color: #7050a0; /* 紫色文字 */
    cursor: pointer; /* 手型指针 */
    background: linear-gradient(90deg, #f8e8ff 0%, #f0e0ff 100%); /* 90度渐变：淡紫 */
    list-style: none; /* 移除默认标记 */
    user-select: none; /* 禁止选中文字 */
    letter-spacing: 0.04em; /* 字间距 */
    border-bottom: 1px solid #e8d0f8; /* 底部边框 */
}

/* 隐藏默认三角标记 */
.ui-root .ds::-webkit-details-marker {
    display: none;
}

/* 自定义加减符号 */
.ui-root .ds::before {
    content: '⊕ '; /* 加号 */
    color: #c090d8; /* 浅紫色 */
    font-size: 13px; /* 大小 */
}

/* 展开状态变为减号 */
.ui-root details[open] > .ds::before {
    content: '⊖ '; /* 减号 */
}

/* 双列展开内容 */
.ui-root .dc {
    padding: 8px 10px; /* 内边距上下8左右10 */
    display: grid; /* 网格布局 */
    gap: 5px; /* 网格间距5px */
}

/* 双列网格项 */
.ui-root .di {
    display: grid; /* 网格布局 */
    grid-template-columns: 40px 1fr; /* 两列：40px固定 + 剩余空间 */
    gap: 6px; /* 网格间距6px */
    font-size: 12px; /* 文字大小 */
    align-items: start; /* 顶部对齐 */
    border-bottom: 1px dotted #eed8f8; /* 底部点状分隔线 */
    padding-bottom: 4px; /* 底部内边距4px */
}

/* 最后一个项移除底部边框 */
.ui-root .di:last-child {
    border-bottom: none;
}

/* 双列标签 */
.ui-root .dk {
    color: #b080c8; /* 浅紫色 */
    font-size: 11.5px; /* 文字大小 */
    padding-top: 1px; /* 顶部微调 */
}

/* 双列内容 */
.ui-root .dv {
    color: #4a3058; /* 深紫灰 */
    line-height: 1.65; /* 行高1.65倍 */
}

/* ===== 特殊区块 ===== */
.ui-root .tx {
    padding: 12px 16px; /* 内边距上下12左右16 */
}

/* 带装饰的特殊区块 */
.ui-root .ts {
    background: linear-gradient(135deg, #fff5fb 0%, #f5f0ff 100%); /* 135度渐变：粉到紫 */
    border: 1px solid #e8d0ee; /* 浅紫边框 */
    border-radius: 12px; /* 12px圆角 */
    padding: 12px 14px; /* 内边距上下12左右14 */
    position: relative; /* 为伪元素定位 */
    overflow: hidden; /* 隐藏溢出 */
}

/* 背景装饰图标 */
.ui-root .ts::before {
    content: '🎬'; /* 电影场记板emoji */
    position: absolute; /* 绝对定位 */
    right: 14px; /* 右侧14px */
    top: 10px; /* 顶部10px */
    font-size: 22px; /* 大小 */
    opacity: 0.18; /* 极淡透明度 */
}

/* 区块标题 */
.ui-root .tt {
    font-size: 13px; /* 文字大小 */
    color: #9060a8; /* 紫色文字 */
    margin-bottom: 8px; /* 下外边距8px */
    letter-spacing: 0.06em; /* 字间距 */
    border-bottom: 1px dashed #e0c0e8; /* 底部虚线 */
    padding-bottom: 6px; /* 底部内边距6px */
}

/* 区块正文 */
.ui-root .tp {
    font-size: 13.5px; /* 文字大小 */
    color: #4a3058; /* 深紫灰 */
    line-height: 1.85; /* 行高1.85倍 */
    margin: 0; /* 移除外边距 */
    text-indent: 2em; /* 首行缩进2字符 */
}

/* ===== 带计数器的动作列表 ===== */
.ui-root .al {
    list-style: none; /* 移除默认列表标记 */
    padding: 12px 14px; /* 内边距上下12左右14 */
    margin: 0; /* 移除外边距 */
    display: grid; /* 网格布局 */
    gap: 8px; /* 网格间距8px */
    counter-reset: action-counter; /* 重置计数器 */
}

/* 动作项 */
.ui-root .ax {
    padding: 10px 16px 10px 42px; /* 内边距上10右16下10左42（为计数器留空间） */
    border-radius: 11px; /* 11px圆角 */
    font-size: 13.5px; /* 文字大小 */
    cursor: pointer; /* 手型指针 */
    line-height: 1.6; /* 行高1.6倍 */
    border: 1px solid transparent; /* 透明边框，悬停时显示 */
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s; /* 多属性过渡0.2秒 */
    counter-increment: action-counter; /* 计数器递增 */
    position: relative; /* 为伪元素定位 */
}

/* 计数器圆点 */
.ui-root .ax::before {
    content: counter(action-counter); /* 显示计数器值 */
    position: absolute; /* 绝对定位 */
    left: 13px; /* 左侧13px */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中校正 */
    width: 20px; /* 宽度20px */
    height: 20px; /* 高度20px */
    border-radius: 50%; /* 圆形 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    font-size: 11px; /* 文字大小 */
    font-weight: normal; /* 正常字重 */
    line-height: 20px; /* 行高与高度一致 */
    text-align: center; /* 文字居中 */
}

/* 动作项悬停效果 */
.ui-root .ax:hover {
    transform: translateX(4px); /* 向右移动4px */
    box-shadow: 0 4px 16px rgba(180, 130, 210, 0.15); /* 增强阴影 */
}

/* 动作项类型1：粉红主题 */
.ui-root .a1 {
    background: linear-gradient(90deg, #fff0f5 0%, #ffe8f8 100%); /* 粉红渐变 */
    border-color: #f0c0d8; /* 粉红边框 */
    color: #8a3060; /* 深粉色文字 */
}

.ui-root .a1::before {
    background: linear-gradient(135deg, #f8a0c8, #e870a8); /* 深粉渐变圆点 */
    color: #fff5f8; /* 白色文字 */
}

.ui-root .a1:hover {
    background: linear-gradient(90deg, #ffe0ee 0%, #ffd5f0 100%); /* 悬停加深的粉红渐变 */
    border-color: #e8a0c8; /* 加深边框 */
}

/* 动作项类型2：紫色主题 */
.ui-root .a2 {
    background: linear-gradient(90deg, #f5f0ff 0%, #ede0ff 100%); /* 紫色渐变 */
    border-color: #d0b8f0; /* 紫色边框 */
    color: #5a3080; /* 深紫色文字 */
}

.ui-root .a2::before {
    background: linear-gradient(135deg, #c8a0f0, #a060e0); /* 紫色渐变圆点 */
    color: #f8f0ff; /* 白色文字 */
}

.ui-root .a2:hover {
    background: linear-gradient(90deg, #ece0ff 0%, #e0d0ff 100%); /* 悬停加深的紫色渐变 */
    border-color: #c0a0e8; /* 加深边框 */
}

/* 动作项类型3：蓝色主题 */
.ui-root .a3 {
    background: linear-gradient(90deg, #f0f8ff 0%, #e8f0ff 100%); /* 蓝色渐变 */
    border-color: #b8d0f0; /* 蓝色边框 */
    color: #2a4878; /* 深蓝色文字 */
}

.ui-root .a3::before {
    background: linear-gradient(135deg, #90b8f0, #5088d8); /* 蓝色渐变圆点 */
    color: #f0f6ff; /* 白色文字 */
}

.ui-root .a3:hover {
    background: linear-gradient(90deg, #e0f0ff 0%, #d8e8ff 100%); /* 悬停加深的蓝色渐变 */
    border-color: #a0c0e8; /* 加深边框 */
}

/* 动作项类型4：橙色主题 */
.ui-root .a4 {
    background: linear-gradient(90deg, #fffaf0 0%, #fff5e0 100%); /* 橙色渐变 */
    border-color: #f0d8a0; /* 橙色边框 */
    color: #7a5818; /* 深橙色文字 */
}

.ui-root .a4::before {
    background: linear-gradient(135deg, #f0d070, #d8a830); /* 橙色渐变圆点 */
    color: #fff8e8; /* 白色文字 */
}

.ui-root .a4:hover {
    background: linear-gradient(90deg, #fff0d8 0%, #ffead0 100%); /* 悬停加深的橙色渐变 */
    border-color: #e8c880; /* 加深边框 */
}

/* ===== 滚动折叠块 ===== */
.ui-root .ss {
    background: rgba(255, 255, 255, 0.55); /* 半透明白色背景 */
    border: 1px solid #e8d0f0; /* 浅紫边框 */
    border-radius: 11px; /* 11px圆角 */
    margin: 10px 14px; /* 上下10px左右14px外边距 */
    overflow: hidden; /* 隐藏溢出 */
    transition: box-shadow 0.2s; /* 阴影过渡0.2秒 */
}

.ui-root .ss:last-child {
    margin-bottom: 14px; /* 最后一个的下外边距14px */
}

.ui-root .ss:hover {
    box-shadow: 0 3px 14px rgba(180, 130, 210, 0.12); /* 悬停增强阴影 */
}

/* 滚动折叠摘要 */
.ui-root .su {
    padding: 9px 14px; /* 内边距上下9左右14 */
    font-size: 13px; /* 文字大小 */
    color: #7050a0; /* 紫色文字 */
    cursor: pointer; /* 手型指针 */
    background: linear-gradient(90deg, #f5e8ff 0%, #efe0ff 100%); /* 淡紫渐变 */
    list-style: none; /* 移除默认标记 */
    user-select: none; /* 禁止选中文字 */
    letter-spacing: 0.05em; /* 字间距 */
    border-bottom: 1px solid #e8d0f0; /* 底部边框 */
}

/* 隐藏默认三角标记 */
.ui-root .su::-webkit-details-marker {
    display: none;
}

/* 自定义右三角符号 */
.ui-root .su::before {
    content: '▸ '; /* 右三角 */
    color: #c090d8; /* 浅紫色 */
    font-size: 12px; /* 大小 */
    transition: transform 0.22s; /* 旋转过渡0.22秒 */
    display: inline-block; /* 行内块显示 */
}

/* 展开状态三角旋转90度 */
.ui-root details[open] > .su::before {
    transform: rotate(90deg); /* 旋转90度 */
}

/* 滚动内容容器 */
.ui-root .ms {
    max-height: 200px; /* 最大高度200px */
    overflow-y: auto; /* 垂直滚动 */
    padding: 10px 12px; /* 内边距上下10左右12 */
    display: grid; /* 网格布局 */
    gap: 8px; /* 网格间距8px */
}

/* 自定义滚动条样式 */
.ui-root .ms::-webkit-scrollbar {
    width: 4px; /* 滚动条宽度4px */
}

.ui-root .ms::-webkit-scrollbar-track {
    background: #f5eeff; /* 淡紫色轨道 */
    border-radius: 10px; /* 10px圆角 */
}

.ui-root .ms::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d0a0e8, #b878d8); /* 紫色渐变滑块 */
    border-radius: 10px; /* 10px圆角 */
}

/* 滚动列表项 */
.ui-root .me {
    display: grid; /* 网格布局 */
    grid-template-columns: 52px 64px 80px 1fr; /* 四列固定宽度 */
    gap: 6px; /* 网格间距6px */
    font-size: 12px; /* 文字大小 */
    align-items: start; /* 顶部对齐 */
    background: linear-gradient(90deg, rgba(255, 240, 252, 0.7), rgba(245, 235, 255, 0.7)); /* 半透明渐变 */
    border-radius: 9px; /* 9px圆角 */
    padding: 7px 10px; /* 内边距上下7左右10 */
    border: 1px solid #eed8f8; /* 浅紫边框 */
    transition: background 0.2s; /* 背景过渡0.2秒 */
}

.ui-root .me:hover {
    background: linear-gradient(90deg, rgba(255, 228, 248, 0.9), rgba(238, 225, 255, 0.9)); /* 悬停加深背景 */
}

/* 简化版列表项（两列） */
.ui-root .ae {
    grid-template-columns: 60px 1fr; /* 两列：60px固定 + 剩余空间 */
}

/* 列表项标签 */
.ui-root .mr {
    font-size: 11px; /* 文字大小 */
    color: #c080d0; /* 浅紫色 */
    background: rgba(220, 180, 240, 0.25); /* 半透明背景 */
    border-radius: 6px; /* 6px圆角 */
    padding: 1px 5px; /* 内边距上下1左右5 */
    text-align: center; /* 文字居中 */
    white-space: nowrap; /* 禁止换行 */
}

/* 时间戳列 */
.ui-root .mti {
    font-size: 11.5px; /* 文字大小 */
    color: #a080b8; /* 紫灰色 */
    white-space: nowrap; /* 禁止换行 */
}

/* 类别列 */
.ui-root .mp {
    font-size: 11.5px; /* 文字大小 */
    color: #9070a8; /* 紫灰色 */
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出 */
    text-overflow: ellipsis; /* 溢出显示省略号 */
}

/* 内容列 */
.ui-root .mv {
    font-size: 12.5px; /* 文字大小 */
    color: #4a3058; /* 深紫灰 */
    line-height: 1.65; /* 行高1.65倍 */
}

/* ===== 移动端适配 ===== */
@media (max-width: 768px) {
    /* 根容器调整 */
    .ui-root {
        padding: 10px 6px 20px 6px; /* 减小左右内边距 */
        border-radius: 14px; /* 减小圆角 */
    }
    
    /* 标签栏调整 */
    .ui-root .tb {
        gap: 6px; /* 减小间距 */
        padding: 8px 6px; /* 减小内边距 */
    }
    
    /* 标签项调整 */
    .ui-root .ti {
        font-size: 12px; /* 减小字号 */
        padding: 3px 10px; /* 减小内边距 */
    }
    
    /* 正文调整 */
    .ui-root .mt {
        font-size: 14px; /* 减小字号 */
    }
    
    /* 卡片网格改为单列 */
    .ui-root .rc {
        grid-template-columns: 1fr; /* 单列 */
        padding: 0 10px 12px 10px; /* 减小左右内边距 */
    }
    
    /* 双列折叠块改为单列 */
    .ui-root .dr {
        grid-template-columns: 1fr; /* 单列 */
    }
    
    /* 滚动列表项改为两列 */
    .ui-root .me {
        grid-template-columns: 48px 1fr; /* 两列 */
        gap: 5px; /* 减小间距 */
    }
    
    /* 隐藏某些列以节省空间 */
    .ui-root .mti,
    .ui-root .mp {
        display: none; /* 隐藏时间戳和类别 */
    }
    
    /* 动作项调整 */
    .ui-root .ax {
        font-size: 13px; /* 减小字号 */
        padding: 9px 14px 9px 40px; /* 调整内边距 */
    }
    
    /* 笔记标题调整 */
    .ui-root .nn {
        font-size: 15px; /* 减小字号 */
    }
    
    /* 标签-内容网格调整 */
    .ui-root .ir {
        grid-template-columns: 58px 1fr; /* 标签列宽度减小 */
    }
    
    /* 折叠摘要调整 */
    .ui-root .st {
        font-size: 13.5px; /* 减小字号 */
        padding: 10px 13px; /* 减小内边距 */
    }
    
    /* 双列网格项调整 */
    .ui-root .di {
        grid-template-columns: 36px 1fr; /* 标签列宽度减小 */
    }
}

/* ===== 隐藏元素 ===== */
cot {
    display: none !important; /* 强制隐藏 <cot> 元素 */
}