:root { /* 定义页面全局设计变量。 */
    --font-sans: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; /* 定义正文无衬线字体栈。 */
    --font-serif: "Source Han Serif SC", "STSong", "Songti SC", serif; /* 定义标题衬线字体栈。 */
    --color-ink: #10263b; /* 定义主文字颜色。 */
    --color-muted: #5a7087; /* 定义辅助文字颜色。 */
    --color-line: rgba(16, 38, 59, 0.10); /* 定义边框与分隔线颜色。 */
    --color-surface: rgba(247, 250, 253, 0.90); /* 定义主卡片背景颜色。 */
    --color-surface-strong: rgba(252, 254, 255, 0.96); /* 定义强化卡片背景颜色。 */
    --color-panel-dark: rgba(26, 54, 82, 0.93); /* 定义左侧栏主背景颜色，回到更明确的冷蓝灰主色。 */
    --color-panel-dark-soft: rgba(48, 84, 118, 0.89); /* 定义左侧栏次级背景颜色，保持冷色调同时降低压迫感。 */
    --color-accent: #3b678f; /* 定义主强调色。 */
    --color-accent-soft: rgba(59, 103, 143, 0.12); /* 定义浅强调色背景。 */
    --color-success: #2a6f63; /* 定义成功态颜色。 */
    --color-danger: #a45252; /* 定义失败态颜色。 */
    --color-info: #3e6486; /* 定义信息态颜色。 */
    --radius-large: 20px; /* 定义大圆角尺寸。 */
    --radius-medium: 14px; /* 定义中圆角尺寸。 */
    --radius-small: 10px; /* 定义小圆角尺寸。 */
    --shadow-soft: 0 30px 56px rgba(15, 31, 47, 0.10); /* 定义主阴影样式。 */
    --shadow-light: 0 16px 32px rgba(15, 31, 47, 0.07); /* 定义浅阴影样式。 */
    --page-width: min(1380px, calc(100vw - 40px)); /* 定义页面最大宽度。 */
} /* 结束页面全局设计变量定义。 */

*, *::before, *::after { /* 统一盒模型计算方式。 */
    box-sizing: border-box; /* 让宽高计算包含边框与内边距。 */
} /* 结束统一盒模型计算方式定义。 */

html { /* 定义根节点滚动行为。 */
    scroll-behavior: smooth; /* 让页面内部跳转更平滑。 */
} /* 结束根节点滚动行为定义。 */

body { /* 定义页面整体外观。 */
    margin: 0; /* 清理浏览器默认外边距。 */
    min-height: 100vh; /* 让页面至少铺满整个视口高度。 */
    font-family: var(--font-sans); /* 应用统一正文字体。 */
    color: var(--color-ink); /* 应用统一主文字颜色。 */
    background: linear-gradient(180deg, #e5edf4 0%, #edf3f8 48%, #f5f8fb 100%); /* 应用冷色商务风背景渐变。 */
} /* 结束页面整体外观定义。 */

a { /* 定义全局链接基础样式。 */
    color: inherit; /* 让链接默认继承文字颜色。 */
} /* 结束全局链接基础样式定义。 */

button, input, select { /* 定义表单控件字体继承。 */
    font: inherit; /* 让表单控件继承全局字体设置。 */
} /* 结束表单控件字体继承定义。 */

[hidden], .is-hidden { /* 定义隐藏态通用样式。 */
    display: none !important; /* 在隐藏态时直接移出布局流。 */
} /* 结束隐藏态通用样式定义。 */

.page-background { /* 定义页面统一背景层。 */
    position: fixed; /* 让背景层固定在视口内。 */
    inset: 0; /* 让背景层覆盖整个视口。 */
    overflow: hidden; /* 裁剪超出视口的背景元素。 */
    pointer-events: none; /* 让背景层不拦截任何交互事件。 */
    z-index: 0; /* 把背景层压到内容层之下。 */
} /* 结束页面统一背景层定义。 */

.page-background-grid { /* 定义背景网格纹理层。 */
    position: absolute; /* 让背景网格相对背景层定位。 */
    inset: 0; /* 让背景网格覆盖整个背景层。 */
    background-image: linear-gradient(rgba(32, 58, 84, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 58, 84, 0.045) 1px, transparent 1px); /* 输出横纵网格线。 */
    background-size: 56px 56px; /* 定义网格线之间的间距。 */
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.08) 100%); /* 让网格纹理更轻。 */
} /* 结束背景网格纹理层定义。 */

.page-background-glow { /* 定义背景柔光块基础样式。 */
    position: absolute; /* 让柔光块绝对定位。 */
    width: 34rem; /* 定义柔光块宽度。 */
    height: 34rem; /* 定义柔光块高度。 */
    border-radius: 50%; /* 让柔光块呈圆形。 */
    filter: blur(28px); /* 让柔光块边缘柔化。 */
    opacity: 0.5; /* 降低柔光块透明度。 */
} /* 结束背景柔光块基础样式定义。 */

.page-background-glow-left { /* 定义左上角柔光块。 */
    top: -10rem; /* 让左上角柔光块向上偏移。 */
    left: -8rem; /* 让左上角柔光块向左偏移。 */
    background: radial-gradient(circle, rgba(59, 103, 143, 0.24) 0%, rgba(59, 103, 143, 0) 72%); /* 输出冷蓝色左上角柔光。 */
} /* 结束左上角柔光块定义。 */

.page-background-glow-right { /* 定义右下角柔光块。 */
    right: -12rem; /* 让右下角柔光块向右偏移。 */
    bottom: -12rem; /* 让右下角柔光块向下偏移。 */
    background: radial-gradient(circle, rgba(132, 165, 194, 0.22) 0%, rgba(132, 165, 194, 0) 72%); /* 输出雾蓝色右下角柔光。 */
} /* 结束右下角柔光块定义。 */

.page-main { /* 定义页面主体内容容器。 */
    position: relative; /* 让主体内容相对页面定位。 */
    z-index: 1; /* 把主体内容置于背景层之上。 */
    width: var(--page-width); /* 应用统一页面宽度。 */
    margin: 0 auto; /* 让主体内容水平居中。 */
    padding: 24px 0 40px; /* 给主体内容增加上下留白。 */
} /* 结束页面主体内容容器定义。 */

.home-shell { /* 定义首页布局容器。 */
    min-height: calc(100vh - 64px); /* 让首页内容在视觉上接近整屏居中。 */
    display: grid; /* 使用网格布局居中首页卡片。 */
    place-items: center; /* 让首页卡片水平垂直同时居中。 */
} /* 结束首页布局容器定义。 */

.home-card, .panel, .auth-warning { /* 定义首页卡片、通用卡片与提示卡片外观。 */
    background: var(--color-surface); /* 使用半透明浅色卡片背景。 */
    border: 1px solid rgba(255, 255, 255, 0.62); /* 应用冷白色描边。 */
    border-radius: var(--radius-large); /* 应用大圆角。 */
    box-shadow: var(--shadow-soft); /* 应用柔和阴影。 */
    backdrop-filter: blur(14px); /* 应用克制的毛玻璃效果。 */
} /* 结束首页卡片、通用卡片与提示卡片外观定义。 */

.home-card { /* 定义首页欢迎卡片。 */
    width: min(460px, 100%); /* 限制首页欢迎卡片宽度。 */
    padding: 42px 34px; /* 给首页欢迎卡片增加留白。 */
    display: flex; /* 使用弹性布局纵向堆叠内容。 */
    flex-direction: column; /* 让首页欢迎卡片内容纵向排列。 */
    gap: 24px; /* 定义首页欢迎卡片内部间距。 */
    align-items: center; /* 让首页欢迎卡片内容居中。 */
} /* 结束首页欢迎卡片定义。 */

.not-found-card { /* 定义 404 页面卡片样式。 */
    width: min(560px, 100%); /* 让 404 页面卡片比首页欢迎卡片稍宽，容纳更多说明文案和操作按钮。 */
    text-align: center; /* 让 404 页面卡片内的标题、文案和按钮整体居中。 */
} /* 结束 404 页面卡片样式定义。 */

.not-found-eyebrow { /* 定义 404 页面顶部错误编号样式。 */
    margin: 0; /* 清理默认外边距。 */
    color: var(--color-accent); /* 使用强调色突出 404 错误编号。 */
    font-size: 0.84rem; /* 使用较小字号承载顶部辅助编号。 */
    letter-spacing: 0.34em; /* 拉开字距强化编号的视觉节奏。 */
    text-transform: uppercase; /* 统一把顶部辅助编号转成大写样式。 */
} /* 结束 404 页面顶部错误编号样式定义。 */

.not-found-copy { /* 定义 404 页面说明文案样式。 */
    margin: 0; /* 清理默认外边距。 */
    color: var(--color-muted); /* 使用辅助文字颜色，避免说明文案喧宾夺主。 */
    line-height: 1.8; /* 提高行高，让 404 页面说明文案更易读。 */
} /* 结束 404 页面说明文案样式定义。 */

.not-found-actions { /* 定义 404 页面按钮区样式。 */
    width: 100%; /* 让 404 页面按钮区占满卡片可用宽度。 */
    justify-content: center; /* 让 404 页面操作按钮水平居中排列。 */
} /* 结束 404 页面按钮区样式定义。 */

.not-found-request-id { /* 定义 404 页面请求编号样式。 */
    margin: 0; /* 清理默认外边距。 */
    color: var(--color-muted); /* 使用辅助文字颜色展示请求编号。 */
    font-size: 0.82rem; /* 收窄请求编号字号，避免抢占主标题视觉焦点。 */
    line-height: 1.6; /* 适度拉开请求编号行高，保持整体可读性。 */
} /* 结束 404 页面请求编号样式定义。 */

.home-title { /* 定义首页欢迎标题。 */
    margin: 0; /* 清理默认外边距。 */
    font-family: var(--font-serif); /* 使用更稳重的标题字体。 */
    font-size: clamp(2.2rem, 5vw, 3.4rem); /* 让首页欢迎标题自适应缩放。 */
    font-weight: 700; /* 增强首页欢迎标题字重。 */
    letter-spacing: 0.03em; /* 轻微拉开首页欢迎标题字距。 */
    text-align: center; /* 让首页欢迎标题居中显示。 */
} /* 结束首页欢迎标题定义。 */

.home-login-form, .stack-form { /* 定义首页登录表单和纵向表单布局。 */
    width: 100%; /* 让表单占满可用宽度。 */
    display: flex; /* 使用弹性布局堆叠表单控件。 */
    flex-direction: column; /* 让表单控件纵向排列。 */
    gap: 14px; /* 定义表单控件间距。 */
} /* 结束首页登录表单和纵向表单布局定义。 */

.field, .workspace-stage-copy, .panel-header { /* 定义字段容器与面板头部纵向布局。 */
    display: flex; /* 使用弹性布局堆叠内部内容。 */
    flex-direction: column; /* 让内部内容纵向排列。 */
    gap: 8px; /* 定义内部内容间距。 */
} /* 结束字段容器与面板头部纵向布局定义。 */

.field-row, .panel-grid, .action-row, .workspace-sidebar-actions, .filter-form { /* 定义多列与操作区弹性布局。 */
    display: flex; /* 使用弹性布局横向排列内容。 */
    gap: 14px; /* 定义内部元素间距。 */
    flex-wrap: wrap; /* 允许在窄屏下自动换行。 */
} /* 结束多列与操作区弹性布局定义。 */

.field-row > *, .filter-form > * { /* 定义并排输入项的伸缩规则。 */
    flex: 1 1 0; /* 让并排输入项平均分配宽度。 */
    min-width: 0; /* 允许并排输入项在窄屏下收缩。 */
} /* 结束并排输入项伸缩规则定义。 */

.filter-form-admin { /* 定义管理员筛选表单的网格布局。 */
    display: grid; /* 使用网格布局让筛选字段更整齐。 */
    grid-template-columns: minmax(240px, 1.8fr) repeat(3, minmax(140px, 1fr)) auto; /* 定义管理员筛选表单各字段列宽。 */
    align-items: end; /* 让筛选按钮和输入字段底部对齐。 */
} /* 结束管理员筛选表单的网格布局定义。 */

.filter-form-admin > * { /* 定义管理员筛选表单直接子元素的宽度规则。 */
    min-width: 0; /* 允许管理员筛选表单子元素在窄屏下收缩。 */
} /* 结束管理员筛选表单直接子元素宽度规则定义。 */

.filter-submit-shell { /* 定义管理员筛选按钮容器。 */
    display: flex; /* 使用弹性布局承载筛选按钮。 */
    align-items: flex-end; /* 让筛选按钮贴齐输入控件底部。 */
    justify-content: flex-end; /* 让筛选按钮在大屏下靠右显示。 */
} /* 结束管理员筛选按钮容器定义。 */

.filter-submit-shell .button { /* 定义管理员筛选按钮容器内按钮的尺寸规则。 */
    min-width: 132px; /* 给筛选按钮保留稳定的按钮宽度。 */
} /* 结束管理员筛选按钮容器内按钮尺寸规则定义。 */

.field-label, .info-label, .workspace-stage-label, .panel-label { /* 定义标签与辅助标题样式。 */
    margin: 0; /* 清理默认外边距。 */
    color: var(--color-accent); /* 应用强调色。 */
    font-size: 0.84rem; /* 定义较小字号。 */
    letter-spacing: 0.14em; /* 拉开字距以增强秩序感。 */
    text-transform: uppercase; /* 转换为大写强化层级。 */
} /* 结束标签与辅助标题样式定义。 */

.field-input { /* 定义输入框与下拉框样式。 */
    width: 100%; /* 让输入控件占满可用宽度。 */
    padding: 13px 14px; /* 给输入控件增加内边距。 */
    border: 1px solid rgba(25, 56, 84, 0.12); /* 应用冷色轻量边框。 */
    border-radius: var(--radius-small); /* 应用小圆角。 */
    background: rgba(250, 252, 255, 0.92); /* 应用冷白输入背景。 */
    color: var(--color-ink); /* 应用主文字颜色。 */
    outline: none; /* 移除浏览器默认焦点描边。 */
    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 应用聚焦过渡效果。 */
} /* 结束输入框与下拉框样式定义。 */

.field-input:focus { /* 定义输入控件聚焦态样式。 */
    border-color: rgba(59, 103, 143, 0.46); /* 在聚焦时切换到冷色强调边框。 */
    box-shadow: 0 0 0 4px rgba(59, 103, 143, 0.10); /* 在聚焦时显示轻量外发光。 */
} /* 结束输入控件聚焦态样式定义。 */

.checkbox-field { /* 定义复选框字段样式。 */
    display: inline-flex; /* 让复选框与文本横向排列。 */
    align-items: center; /* 让复选框与文本垂直居中。 */
    gap: 10px; /* 定义复选框与文本间距。 */
    color: var(--color-muted); /* 应用辅助文字颜色。 */
} /* 结束复选框字段样式定义。 */

.button { /* 定义按钮基础样式。 */
    appearance: none; /* 移除浏览器默认按钮外观。 */
    border: 1px solid transparent; /* 预留边框位置。 */
    border-radius: var(--radius-small); /* 让按钮呈更克制的圆角矩形。 */
    padding: 11px 18px; /* 给按钮增加点击面积。 */
    font-weight: 600; /* 提升按钮字重。 */
    text-decoration: none; /* 去掉链接按钮下划线。 */
    cursor: pointer; /* 在悬浮时显示可点击光标。 */
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; /* 定义按钮悬浮过渡。 */
} /* 结束按钮基础样式定义。 */

.button:hover:not(:disabled) { /* 定义可用按钮悬浮态。 */
    transform: translateY(-1px); /* 在悬浮时轻微上浮。 */
    box-shadow: 0 10px 20px rgba(29, 38, 49, 0.12); /* 在悬浮时增加阴影。 */
} /* 结束可用按钮悬浮态定义。 */

.button:disabled { /* 定义禁用按钮状态。 */
    opacity: 0.48; /* 降低禁用按钮透明度。 */
    cursor: not-allowed; /* 在禁用时显示不可用光标。 */
    box-shadow: none; /* 禁用状态下移除悬浮阴影。 */
} /* 结束禁用按钮状态定义。 */

.button-primary { /* 定义主按钮样式。 */
    background: linear-gradient(135deg, #17314c 0%, #3e6486 100%); /* 应用深海军蓝到钢蓝色的主按钮渐变。 */
    color: #f3f7fb; /* 应用冷白按钮文字颜色。 */
} /* 结束主按钮样式定义。 */

.button-secondary { /* 定义次按钮样式。 */
    background: rgba(59, 103, 143, 0.10); /* 应用浅冷色背景。 */
    border-color: rgba(59, 103, 143, 0.18); /* 应用浅冷色边框。 */
    color: var(--color-ink); /* 应用主文字颜色。 */
} /* 结束次按钮样式定义。 */

.button-ghost { /* 定义幽灵按钮样式。 */
    background: transparent; /* 使用透明背景。 */
    border-color: rgba(16, 38, 59, 0.12); /* 应用冷色轻量边框。 */
    color: var(--color-muted); /* 应用辅助文字颜色。 */
} /* 结束幽灵按钮样式定义。 */

.workspace-shell { /* 定义工作台左右分栏布局。 */
    display: grid; /* 使用网格布局划分左右区域。 */
    grid-template-columns: 280px minmax(0, 1fr); /* 定义左侧标签栏与右侧内容区宽度。 */
    gap: 20px; /* 定义左右区域间距。 */
    min-height: calc(100vh - 64px); /* 让工作台在视觉上接近全屏。 */
} /* 结束工作台左右分栏布局定义。 */

.workspace-sidebar { /* 定义工作台左侧栏样式。 */
    padding: 24px; /* 给左侧栏增加内边距。 */
    background: linear-gradient(180deg, var(--color-panel-dark) 0%, var(--color-panel-dark-soft) 100%); /* 应用深色商务渐变背景。 */
    border: 1px solid rgba(255, 255, 255, 0.34); /* 给左侧栏补一层浅色描边，减少深色块的突兀感。 */
    border-radius: var(--radius-large); /* 应用大圆角。 */
    box-shadow: var(--shadow-soft); /* 应用柔和阴影。 */
    backdrop-filter: blur(18px); /* 给左侧栏增加更轻的毛玻璃效果，让背景过渡更柔和。 */
    display: flex; /* 使用弹性布局纵向排列左侧内容。 */
    flex-direction: column; /* 让左侧内容纵向排列。 */
    gap: 22px; /* 定义左侧内容间距。 */
    color: #f7fbff; /* 应用更明亮的浅色文字，提升左侧栏可读性。 */
} /* 结束工作台左侧栏样式定义。 */

.workspace-kicker, .workspace-user { /* 定义左侧栏辅助文字。 */
    margin: 0; /* 清理默认外边距。 */
    color: rgba(226, 239, 250, 0.84); /* 应用偏冷的浅蓝辅助文字。 */
} /* 结束左侧栏辅助文字定义。 */

.workspace-title { /* 定义左侧栏标题。 */
    margin: 6px 0 0; /* 定义左侧栏标题外边距。 */
    font-family: var(--font-serif); /* 应用稳重标题字体。 */
    font-size: 2rem; /* 定义左侧栏标题字号。 */
    line-height: 1.16; /* 收紧左侧栏标题行高。 */
} /* 结束左侧栏标题定义。 */

.workspace-tab-nav { /* 定义左侧标签导航。 */
    display: flex; /* 使用弹性布局纵向排列标签。 */
    flex-direction: column; /* 让标签纵向排列。 */
    gap: 10px; /* 定义标签间距。 */
} /* 结束左侧标签导航定义。 */

.sidebar-tab { /* 定义左侧标签按钮样式。 */
    width: 100%; /* 让标签按钮铺满左侧栏宽度。 */
    padding: 14px 16px; /* 给标签按钮增加内边距。 */
    border: 1px solid rgba(176, 211, 236, 0.24); /* 使用冷蓝边框提升左侧标签可见度。 */
    border-radius: var(--radius-medium); /* 应用中圆角。 */
    background: rgba(172, 208, 234, 0.10); /* 使用冷蓝透明底色保持原有冷色风格。 */
    color: inherit; /* 继承浅色文字。 */
    text-align: left; /* 让标签文字左对齐。 */
    cursor: pointer; /* 在悬浮时显示可点击光标。 */
    box-shadow: inset 0 1px 0 rgba(219, 238, 252, 0.10); /* 给左侧标签增加偏冷的内高光。 */
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; /* 定义标签过渡效果。 */
} /* 结束左侧标签按钮样式定义。 */

.sidebar-tab:hover, .sidebar-tab.is-active { /* 定义左侧标签悬浮态与激活态。 */
    background: rgba(188, 223, 246, 0.22); /* 在悬浮与激活时显示更亮的冷蓝浅底。 */
    border-color: rgba(197, 229, 250, 0.38); /* 在悬浮与激活时增强冷蓝边框。 */
    box-shadow: 0 12px 24px rgba(17, 41, 64, 0.18); /* 在悬浮与激活时补一层更贴近冷色主视觉的阴影。 */
    transform: translateX(2px); /* 在悬浮与激活时轻微右移。 */
} /* 结束左侧标签悬浮态与激活态定义。 */

.workspace-sidebar-actions .button { /* 定义左侧栏底部按钮的通用样式。 */
    width: 100%; /* 让左侧栏底部按钮占满可用宽度。 */
    display: inline-flex; /* 使用弹性布局让按钮内部内容稳定居中。 */
    align-items: center; /* 让左侧栏底部按钮文字垂直居中。 */
    justify-content: center; /* 让左侧栏底部按钮文字水平居中。 */
} /* 结束左侧栏底部按钮的通用样式定义。 */

.workspace-sidebar-actions .button-secondary { /* 定义左侧栏次按钮的增强可见样式。 */
    background: rgba(188, 223, 246, 0.18); /* 给左侧栏次按钮使用冷蓝浅底。 */
    border-color: rgba(203, 232, 250, 0.32); /* 给左侧栏次按钮使用冷蓝浅边框。 */
    color: #f7fbff; /* 让左侧栏次按钮使用高对比浅色文字。 */
} /* 结束左侧栏次按钮的增强可见样式定义。 */

.workspace-sidebar-actions .button-ghost { /* 定义左侧栏幽灵按钮的增强可见样式。 */
    background: rgba(160, 202, 229, 0.08); /* 给左侧栏幽灵按钮补一层冷蓝底色，避免整体偏灰。 */
    border-color: rgba(186, 221, 244, 0.26); /* 给左侧栏幽灵按钮使用冷蓝浅边框。 */
    color: rgba(236, 246, 255, 0.94); /* 让左侧栏幽灵按钮使用偏冷的浅色文字。 */
} /* 结束左侧栏幽灵按钮的增强可见样式定义。 */

.workspace-stage { /* 定义工作台右侧内容区。 */
    display: flex; /* 使用弹性布局纵向排列内容。 */
    flex-direction: column; /* 让右侧内容纵向排列。 */
    gap: 18px; /* 定义右侧内容间距。 */
} /* 结束工作台右侧内容区定义。 */

.workspace-stage-header { /* 定义工作台顶部标题区。 */
    display: flex; /* 使用弹性布局横向排列标题与反馈。 */
    justify-content: space-between; /* 让标题与反馈分布在两侧。 */
    gap: 18px; /* 定义标题与反馈之间的间距。 */
    align-items: flex-start; /* 让标题与反馈顶部对齐。 */
} /* 结束工作台顶部标题区定义。 */

.workspace-stage-title, .metric-value { /* 定义工作台主标题与数据标题样式。 */
    margin: 0; /* 清理默认外边距。 */
    font-family: var(--font-serif); /* 应用稳重标题字体。 */
    color: var(--color-ink); /* 应用主文字颜色。 */
} /* 结束工作台主标题与数据标题样式定义。 */

.workspace-stage-title { /* 定义当前板块标题。 */
    font-size: clamp(1.8rem, 3vw, 2.5rem); /* 让当前板块标题自适应缩放。 */
    line-height: 1.16; /* 收紧当前板块标题行高。 */
} /* 结束当前板块标题定义。 */

.panel-title { /* 定义各数据子板块标题样式。 */
    margin: 0; /* 清理默认外边距。 */
    font-family: var(--font-sans); /* 使用更克制的无衬线字体。 */
    font-size: 1rem; /* 进一步收敛各数据子板块标题字号。 */
    font-weight: 600; /* 适度降低子板块标题字重避免视觉过冲。 */
    line-height: 1.45; /* 拉开子板块标题行高避免长标题拥挤。 */
    letter-spacing: 0; /* 去掉过大的字距以压缩标题体量。 */
    overflow-wrap: anywhere; /* 允许较长标题在可用宽度内自然换行。 */
    color: var(--color-ink); /* 应用主文字颜色。 */
} /* 结束各数据子板块标题样式定义。 */

.panel-copy { /* 定义子板块说明文案样式。 */
    font-size: 0.88rem; /* 收窄子板块说明文案字号避免喧宾夺主。 */
} /* 结束子板块说明文案样式定义。 */

.workspace-stage-desc, .panel-copy, .metric-copy, .result-meta, .auth-warning-title, .info-value { /* 定义说明与辅助文本样式。 */
    margin: 0; /* 清理默认外边距。 */
    color: var(--color-muted); /* 应用辅助文字颜色。 */
    line-height: 1.7; /* 提升说明文字行高。 */
} /* 结束说明与辅助文本样式定义。 */

.workspace-global-feedback { /* 定义顶部全局反馈区域。 */
    min-width: min(360px, 100%); /* 为顶部反馈区域预留合适宽度。 */
} /* 结束顶部全局反馈区域定义。 */

.auth-warning, .panel { /* 定义提示卡片与通用卡片布局。 */
    padding: 24px; /* 给卡片增加统一留白。 */
    display: flex; /* 使用弹性布局堆叠卡片内容。 */
    flex-direction: column; /* 让卡片内容纵向排列。 */
    gap: 16px; /* 定义卡片内部间距。 */
} /* 结束提示卡片与通用卡片布局定义。 */

.panel-grid { /* 定义通用面板网格布局。 */
    display: grid; /* 使用网格布局排列卡片。 */
    gap: 18px; /* 定义卡片之间的间距。 */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 默认按两列布局排列卡片。 */
} /* 结束通用面板网格布局定义。 */

.panel-grid-wide { /* 定义较窄信息卡的双列布局。 */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 保持两列布局展示摘要卡片。 */
} /* 结束较窄信息卡的双列布局定义。 */

.admin-top-grid { /* 定义管理员控制台顶部置顶区布局。 */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 让四个置顶子版块按每排两个的方式排列。 */
} /* 结束管理员控制台顶部置顶区布局定义。 */

.panel-grid-stack { /* 定义需要上下纵向堆叠的面板网格布局。 */
    grid-template-columns: minmax(0, 1fr); /* 让子板块改为单列上下排列。 */
} /* 结束需要上下纵向堆叠的面板网格布局定义。 */

.workspace-panel { /* 定义板块内容面板默认隐藏态。 */
    display: none; /* 默认不显示所有板块内容。 */
    gap: 18px; /* 预留板块内部间距。 */
} /* 结束板块内容面板默认隐藏态定义。 */

.workspace-panel.is-active { /* 定义当前激活板块。 */
    display: flex; /* 让当前激活板块显示并启用布局。 */
    flex-direction: column; /* 让当前激活板块内容纵向排列。 */
} /* 结束当前激活板块定义。 */

.summary-card { /* 定义业务查询顶部摘要卡片。 */
    background: var(--color-surface-strong); /* 使用更亮的卡片背景。 */
} /* 结束业务查询顶部摘要卡片定义。 */

.metric-value { /* 定义关键数字展示样式。 */
    font-size: clamp(1.7rem, 2.8vw, 2.3rem); /* 让关键数字自适应缩放。 */
    line-height: 1.14; /* 收紧关键数字行高。 */
} /* 结束关键数字展示样式定义。 */

.info-grid { /* 定义信息项网格布局。 */
    display: grid; /* 使用网格布局展示信息项。 */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 默认使用两列布局。 */
    gap: 12px; /* 定义信息项之间的间距。 */
} /* 结束信息项网格布局定义。 */

.info-item { /* 定义单条信息项外观。 */
    padding: 14px; /* 给信息项增加内边距。 */
    border: 1px solid rgba(16, 38, 59, 0.08); /* 应用冷色轻量边框。 */
    border-radius: var(--radius-medium); /* 应用中圆角。 */
    background: rgba(248, 251, 255, 0.84); /* 应用冷白信息项背景。 */
    display: flex; /* 使用弹性布局纵向排列标题和值。 */
    flex-direction: column; /* 让信息项内容纵向排列。 */
    gap: 6px; /* 定义信息项内部间距。 */
} /* 结束单条信息项外观定义。 */

.info-value { /* 定义信息项数值。 */
    color: var(--color-ink); /* 应用主文字颜色。 */
    font-weight: 600; /* 提升信息项数值字重。 */
    word-break: break-word; /* 允许较长信息自动换行。 */
} /* 结束信息项数值定义。 */

.panel-scroll-box { /* 定义卡片内部滚动区域。 */
    max-height: 320px; /* 给资料类展示区域设置内部滚动高度。 */
    overflow: auto; /* 让资料类展示区域在内容超出时内部滚动。 */
    padding-right: 4px; /* 给资料类展示区域预留滚动条内侧空间。 */
    overscroll-behavior: contain; /* 避免资料类展示区域滚动时把滚动事件继续传给页面。 */
    scrollbar-gutter: stable; /* 给资料类展示区域预留稳定滚动条槽位。 */
} /* 结束卡片内部滚动区域定义。 */

.feedback-box { /* 定义反馈提示基础样式。 */
    min-height: 24px; /* 预留反馈区域高度，避免布局跳动。 */
} /* 结束反馈提示基础样式定义。 */

.feedback-box.is-filled { /* 定义有内容时的反馈提示样式。 */
    padding: 12px 14px; /* 给反馈提示增加内边距。 */
    border-radius: var(--radius-small); /* 应用小圆角。 */
    border: 1px solid rgba(16, 38, 59, 0.08); /* 应用冷色轻量边框。 */
    background: rgba(248, 251, 255, 0.76); /* 应用冷白反馈背景。 */
} /* 结束有内容时的反馈提示样式定义。 */

.feedback-box.is-success { /* 定义成功反馈样式。 */
    color: var(--color-success); /* 应用成功态文字颜色。 */
    border-color: rgba(31, 122, 84, 0.18); /* 应用成功态边框颜色。 */
    background: rgba(31, 122, 84, 0.08); /* 应用成功态背景颜色。 */
} /* 结束成功反馈样式定义。 */

.feedback-box.is-error { /* 定义错误反馈样式。 */
    color: var(--color-danger); /* 应用错误态文字颜色。 */
    border-color: rgba(176, 77, 63, 0.18); /* 应用错误态边框颜色。 */
    background: rgba(176, 77, 63, 0.08); /* 应用错误态背景颜色。 */
} /* 结束错误反馈样式定义。 */

.feedback-box.is-info { /* 定义信息反馈样式。 */
    color: var(--color-info); /* 应用信息态文字颜色。 */
    border-color: rgba(62, 100, 134, 0.18); /* 应用信息态边框颜色。 */
    background: rgba(62, 100, 134, 0.08); /* 应用信息态背景颜色。 */
} /* 结束信息反馈样式定义。 */

.result-toolbar { /* 定义查询结果摘要与复制按钮的工具栏布局。 */
    display: flex; /* 使用弹性布局横向排列账单摘要与复制按钮。 */
    align-items: center; /* 让账单摘要与复制按钮垂直居中。 */
    justify-content: space-between; /* 让账单摘要与复制按钮分布在两侧。 */
    gap: 14px; /* 定义账单摘要与复制按钮之间的间距。 */
    flex-wrap: wrap; /* 允许在窄屏下自动换行。 */
} /* 结束查询结果摘要与复制按钮工具栏布局定义。 */

.result-toolbar .result-meta { /* 定义查询结果工具栏内账单摘要的伸缩规则。 */
    flex: 1 1 320px; /* 让账单摘要优先占据主要宽度。 */
} /* 结束查询结果工具栏内账单摘要伸缩规则定义。 */

.result-json { /* 定义 JSON 结果展示区。 */
    margin: 0; /* 清理默认外边距。 */
    padding: 18px; /* 给 JSON 结果展示区增加内边距。 */
    border-radius: var(--radius-medium); /* 应用中圆角。 */
    background: rgba(12, 26, 40, 0.96); /* 应用深海军蓝背景突出结构化内容。 */
    color: #edf4fb; /* 应用冷白文字。 */
    font-family: "Consolas", "SFMono-Regular", monospace; /* 应用等宽字体。 */
    font-size: 0.92rem; /* 定义结构化内容字号。 */
    line-height: 1.65; /* 提升结构化内容可读性。 */
    overflow: auto; /* 允许较长内容滚动。 */
    white-space: pre-wrap; /* 允许自动换行。 */
    word-break: break-word; /* 允许长字段断行。 */
} /* 结束 JSON 结果展示区定义。 */

.compact-result { /* 定义较短结果框的最小高度。 */
    min-height: 120px; /* 为 API Key 展示区预留空间。 */
    max-height: 220px; /* 为 API Key 展示区设置内部滚动高度。 */
    overscroll-behavior: contain; /* 避免 API Key 展示区滚动时把滚动事件继续传给页面。 */
    scrollbar-gutter: stable; /* 给 API Key 展示区预留稳定滚动条槽位。 */
} /* 结束较短结果框最小高度定义。 */

.table-shell { /* 定义表格容器。 */
    max-height: 360px; /* 给表格容器设置内部滚动高度。 */
    overflow: auto; /* 允许表格在窄屏下滚动。 */
    border: 1px solid rgba(16, 38, 59, 0.08); /* 应用冷色轻量边框。 */
    border-radius: var(--radius-medium); /* 应用中圆角。 */
    overscroll-behavior: contain; /* 避免表格容器滚动时把滚动事件继续传给页面。 */
    scrollbar-gutter: stable both-edges; /* 给表格容器预留稳定滚动条槽位。 */
} /* 结束表格容器定义。 */

.data-table { /* 定义表格基础样式。 */
    width: 100%; /* 让表格占满可用宽度。 */
    border-collapse: collapse; /* 合并表格边框。 */
    background: rgba(248, 251, 255, 0.80); /* 应用冷白表格背景。 */
} /* 结束表格基础样式定义。 */

.data-table th, .data-table td { /* 定义表格单元格样式。 */
    padding: 12px 14px; /* 给表格单元格增加内边距。 */
    border-bottom: 1px solid rgba(16, 38, 59, 0.08); /* 应用底部分隔线。 */
    text-align: left; /* 让单元格内容左对齐。 */
    vertical-align: top; /* 让多行内容顶部对齐。 */
    font-size: 0.93rem; /* 定义表格字号。 */
} /* 结束表格单元格样式定义。 */

.data-table th { /* 定义表头样式。 */
    background: rgba(236, 243, 249, 0.96); /* 应用冷灰蓝表头背景。 */
    color: var(--color-muted); /* 应用辅助文字颜色。 */
    font-weight: 600; /* 提升表头字重。 */
    position: sticky; /* 让表头在内部滚动时保持可见。 */
    top: 0; /* 把表头固定在表格滚动容器顶部。 */
    z-index: 1; /* 提升表头层级，避免被表体覆盖。 */
} /* 结束表头样式定义。 */

#admin-users-body tr { /* 定义管理员用户列表行的交互效果。 */
    cursor: pointer; /* 在悬浮时显示可点击光标。 */
    transition: background 0.2s ease; /* 定义行背景过渡效果。 */
} /* 结束管理员用户列表行交互效果定义。 */

#admin-users-body tr:hover, #admin-users-body tr.is-selected { /* 定义管理员用户行悬浮态与选中态。 */
    background: rgba(59, 103, 143, 0.12); /* 在悬浮与选中时显示浅冷色背景。 */
} /* 结束管理员用户行悬浮态与选中态定义。 */

.summary-list { /* 定义管理员摘要列表布局。 */
    display: grid; /* 使用网格布局排列摘要项。 */
    gap: 10px; /* 定义摘要项之间的间距。 */
    max-height: none; /* 明确配置摘要与服务运行信息不启用内部滚动。 */
    overflow: visible; /* 明确配置摘要与服务运行信息直接完整展示。 */
} /* 结束管理员摘要列表布局定义。 */

.summary-item { /* 定义管理员摘要项样式。 */
    display: flex; /* 使用弹性布局分隔标题和值。 */
    justify-content: space-between; /* 让标题和值左右分布。 */
    gap: 14px; /* 定义标题和值之间的间距。 */
    padding: 12px 14px; /* 给摘要项增加内边距。 */
    border: 1px solid rgba(16, 38, 59, 0.08); /* 应用冷色轻量边框。 */
    border-radius: var(--radius-small); /* 应用小圆角。 */
    background: rgba(248, 251, 255, 0.82); /* 应用冷白背景。 */
} /* 结束管理员摘要项样式定义。 */

.summary-item dt, .summary-item dd { /* 定义管理员摘要项内部文本样式。 */
    margin: 0; /* 清理默认外边距。 */
} /* 结束管理员摘要项内部文本样式定义。 */

.summary-item dt { /* 定义管理员摘要项标题样式。 */
    color: var(--color-muted); /* 应用辅助文字颜色。 */
} /* 结束管理员摘要项标题样式定义。 */

.summary-item dd { /* 定义管理员摘要项数值样式。 */
    color: var(--color-ink); /* 应用主文字颜色。 */
    font-weight: 600; /* 提升管理员摘要项数值字重。 */
    text-align: right; /* 让管理员摘要项数值右对齐。 */
    word-break: break-word; /* 允许较长内容自动换行。 */
} /* 结束管理员摘要项数值样式定义。 */

.modal-shell { /* 定义管理员所选用户操作弹窗遮罩层。 */
    position: fixed; /* 让管理员所选用户操作弹窗固定覆盖整个视口。 */
    inset: 0; /* 让管理员所选用户操作弹窗覆盖整个视口区域。 */
    display: flex; /* 使用弹性布局让管理员所选用户操作弹窗居中。 */
    align-items: center; /* 让管理员所选用户操作弹窗垂直居中。 */
    justify-content: center; /* 让管理员所选用户操作弹窗水平居中。 */
    padding: 24px; /* 给管理员所选用户操作弹窗预留边缘留白。 */
    z-index: 40; /* 提升管理员所选用户操作弹窗层级，确保浮在页面内容上方。 */
} /* 结束管理员所选用户操作弹窗遮罩层定义。 */

.modal-backdrop { /* 定义管理员所选用户操作弹窗背景层。 */
    position: absolute; /* 让管理员所选用户操作弹窗背景层绝对定位。 */
    inset: 0; /* 让管理员所选用户操作弹窗背景层覆盖整个遮罩层。 */
    background: rgba(12, 27, 41, 0.42); /* 应用半透明冷深色背景弱化页面其余区域。 */
    backdrop-filter: blur(8px); /* 给管理员所选用户操作弹窗背景层增加柔和模糊。 */
} /* 结束管理员所选用户操作弹窗背景层定义。 */

.modal-dialog { /* 定义管理员所选用户操作居中弹窗。 */
    position: relative; /* 让管理员所选用户操作居中弹窗位于背景层之上。 */
    z-index: 1; /* 提升管理员所选用户操作居中弹窗层级。 */
    width: min(760px, calc(100vw - 32px)); /* 限制管理员所选用户操作居中弹窗宽度。 */
    max-height: calc(100vh - 48px); /* 限制管理员所选用户操作居中弹窗高度。 */
    overflow: auto; /* 让管理员所选用户操作居中弹窗在内容过高时内部滚动。 */
    scrollbar-gutter: stable; /* 给管理员所选用户操作居中弹窗预留稳定滚动条槽位。 */
} /* 结束管理员所选用户操作居中弹窗定义。 */

.modal-header { /* 定义管理员所选用户操作弹窗头部布局。 */
    display: flex; /* 使用弹性布局排列标题区与关闭按钮。 */
    align-items: flex-start; /* 让标题区与关闭按钮顶部对齐。 */
    justify-content: space-between; /* 让标题区与关闭按钮分布在两侧。 */
    gap: 16px; /* 定义标题区与关闭按钮之间的间距。 */
} /* 结束管理员所选用户操作弹窗头部布局定义。 */

.modal-close-button { /* 定义管理员所选用户操作弹窗关闭按钮样式。 */
    flex: 0 0 auto; /* 让管理员所选用户操作弹窗关闭按钮保持固有宽度。 */
} /* 结束管理员所选用户操作弹窗关闭按钮样式定义。 */

.support-float { /* 定义右下角客服悬浮入口。 */
    position: fixed; /* 让客服悬浮入口固定在视口右下角。 */
    right: 22px; /* 设置客服悬浮入口与右边缘的距离。 */
    bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px)); /* 让客服悬浮入口真正贴近底边并兼容安全区。 */
    z-index: 20; /* 让客服悬浮入口浮于内容之上。 */
    width: fit-content; /* 让客服悬浮入口只占按钮本身宽度，避免隐藏二维码撑大悬浮区域。 */
} /* 结束右下角客服悬浮入口定义。 */

.support-float-button { /* 定义客服悬浮按钮样式。 */
    border: none; /* 去掉默认边框。 */
    border-radius: 18px; /* 应用更克制的圆角。 */
    padding: 12px 16px; /* 给客服悬浮按钮增加内边距。 */
    background: linear-gradient(135deg, #17314c 0%, #3e6486 100%); /* 应用冷色商务渐变背景。 */
    color: #f3f7fb; /* 应用冷白文字颜色。 */
    display: inline-flex; /* 使用弹性布局横向排列图标与文字。 */
    align-items: center; /* 让图标与文字垂直居中。 */
    gap: 10px; /* 定义图标与文字间距。 */
    box-shadow: 0 18px 30px rgba(15, 31, 47, 0.18); /* 给客服悬浮按钮增加阴影。 */
    position: relative; /* 让客服悬浮按钮保持在二维码面板之上。 */
    z-index: 1; /* 提升客服悬浮按钮层级，确保按钮始终可点。 */
} /* 结束客服悬浮按钮样式定义。 */

.support-float-icon { /* 定义客服悬浮按钮图标。 */
    width: 26px; /* 定义图标宽度。 */
    height: 26px; /* 定义图标高度。 */
    border-radius: 50%; /* 让图标呈圆形。 */
    display: inline-flex; /* 使用弹性布局让图标文字居中。 */
    align-items: center; /* 让图标文字垂直居中。 */
    justify-content: center; /* 让图标文字水平居中。 */
    background: rgba(255, 255, 255, 0.12); /* 应用半透明冷白背景。 */
} /* 结束客服悬浮按钮图标定义。 */

.support-float-panel { /* 定义客服二维码面板。 */
    position: absolute; /* 让客服二维码面板脱离布局流，避免隐藏时仍然占据悬浮区域。 */
    right: 0; /* 让客服二维码面板与按钮右侧对齐。 */
    bottom: calc(100% + 12px); /* 让客服二维码面板显示在按钮上方。 */
    width: 240px; /* 定义客服二维码面板宽度。 */
    padding: 12px; /* 给客服二维码面板增加内边距。 */
    border-radius: 20px; /* 应用圆角。 */
    background: rgba(248, 251, 255, 0.98); /* 应用冷白背景。 */
    box-shadow: var(--shadow-light); /* 应用轻量阴影。 */
    border: 1px solid rgba(16, 38, 59, 0.08); /* 应用冷色轻量边框。 */
    opacity: 0; /* 默认隐藏客服二维码面板。 */
    visibility: hidden; /* 默认让客服二维码面板不可见。 */
    pointer-events: none; /* 在隐藏态下让客服二维码面板不接收鼠标事件，避免扩大误触区域。 */
    transform: translateY(10px) scale(0.98); /* 默认让客服二维码面板轻微下移并缩小。 */
    transform-origin: bottom right; /* 让客服二维码面板从按钮右下角方向展开。 */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; /* 定义客服二维码面板显示过渡。 */
} /* 结束客服二维码面板定义。 */

.support-float:hover .support-float-panel, .support-float:focus-within .support-float-panel { /* 定义客服二维码面板悬浮显示态。 */
    opacity: 1; /* 在悬浮或聚焦时显示客服二维码面板。 */
    visibility: visible; /* 在悬浮或聚焦时恢复客服二维码面板可见性。 */
    pointer-events: auto; /* 在悬浮或聚焦时恢复客服二维码面板的交互能力。 */
    transform: translateY(0) scale(1); /* 在悬浮或聚焦时恢复客服二维码面板位置和大小。 */
} /* 结束客服二维码面板悬浮显示态定义。 */

.support-float-image { /* 定义客服二维码图片。 */
    display: block; /* 让客服二维码图片以块级元素展示。 */
    width: 100%; /* 让客服二维码图片铺满面板宽度。 */
    height: auto; /* 保持客服二维码图片比例。 */
    border-radius: 14px; /* 应用圆角。 */
} /* 结束客服二维码图片定义。 */

@media (max-width: 1120px) { /* 定义中等屏幕下的布局调整。 */
    .workspace-shell { /* 调整工作台整体布局。 */
        grid-template-columns: minmax(0, 1fr); /* 在中等屏幕下改为单列布局。 */
    } /* 结束工作台整体布局调整。 */

    .workspace-sidebar { /* 调整左侧栏布局。 */
        gap: 16px; /* 缩小左侧栏内容间距。 */
    } /* 结束左侧栏布局调整。 */

    .workspace-tab-nav { /* 调整左侧标签导航布局。 */
        flex-direction: row; /* 在中等屏幕下改为横向标签布局。 */
        flex-wrap: wrap; /* 允许标签自动换行。 */
    } /* 结束左侧标签导航布局调整。 */

    .sidebar-tab { /* 调整标签按钮宽度。 */
        width: auto; /* 让标签按钮根据内容自适应宽度。 */
        flex: 1 1 calc(50% - 10px); /* 让标签按钮在中等屏幕下两列排布。 */
    } /* 结束标签按钮宽度调整。 */

    .workspace-stage-header { /* 调整工作台顶部标题区布局。 */
        flex-direction: column; /* 在中等屏幕下纵向排列标题与反馈。 */
    } /* 结束工作台顶部标题区布局调整。 */

    .modal-header { /* 调整中等屏幕下的管理员所选用户操作弹窗头部布局。 */
        flex-direction: column; /* 在中等屏幕下让弹窗头部改为纵向排列。 */
    } /* 结束中等屏幕下的管理员所选用户操作弹窗头部布局调整。 */

    .panel-grid, .info-grid { /* 调整面板网格与信息网格布局。 */
        grid-template-columns: minmax(0, 1fr); /* 在中等屏幕下改为单列布局。 */
    } /* 结束面板网格与信息网格布局调整。 */

    .filter-form-admin { /* 调整中等屏幕下的管理员筛选表单布局。 */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 在中等屏幕下让管理员筛选表单双列显示。 */
    } /* 结束中等屏幕下的管理员筛选表单布局调整。 */

    .filter-submit-shell { /* 调整中等屏幕下的筛选按钮容器布局。 */
        justify-content: flex-start; /* 在中等屏幕下让筛选按钮从当前列左侧开始排列。 */
    } /* 结束中等屏幕下的筛选按钮容器布局调整。 */

    .filter-submit-shell .button { /* 调整中等屏幕下的筛选按钮宽度。 */
        width: 100%; /* 在中等屏幕下让筛选按钮占满当前列宽。 */
    } /* 结束中等屏幕下的筛选按钮宽度调整。 */
} /* 结束中等屏幕下的布局调整定义。 */

@media (max-width: 720px) { /* 定义小屏幕下的布局调整。 */
    .page-main { /* 调整页面主体宽度。 */
        width: min(100vw - 20px, 100%); /* 收窄页面主体边距。 */
        padding-top: 12px; /* 缩小顶部留白。 */
    } /* 结束页面主体宽度调整。 */

    .home-card, .panel, .auth-warning, .workspace-sidebar { /* 调整卡片与左侧栏内边距。 */
        padding: 18px; /* 在小屏幕下收缩内边距。 */
    } /* 结束卡片与左侧栏内边距调整。 */

    .modal-shell { /* 调整小屏幕下的管理员所选用户操作弹窗遮罩层留白。 */
        padding: 12px; /* 在小屏幕下收窄弹窗周围留白。 */
    } /* 结束小屏幕下的管理员所选用户操作弹窗遮罩层留白调整。 */

    .modal-dialog { /* 调整小屏幕下的管理员所选用户操作居中弹窗尺寸。 */
        width: min(100vw - 24px, 100%); /* 在小屏幕下让弹窗更贴合视口宽度。 */
        max-height: calc(100vh - 24px); /* 在小屏幕下重新限制弹窗高度。 */
    } /* 结束小屏幕下的管理员所选用户操作居中弹窗尺寸调整。 */

    .field-row, .action-row, .workspace-sidebar-actions, .filter-form { /* 调整横向操作区布局。 */
        flex-direction: column; /* 在小屏幕下改为纵向排列。 */
    } /* 结束横向操作区布局调整。 */

    .filter-form-admin { /* 调整小屏幕下的管理员筛选表单布局。 */
        grid-template-columns: minmax(0, 1fr); /* 在小屏幕下让管理员筛选表单改为单列布局。 */
    } /* 结束小屏幕下的管理员筛选表单布局调整。 */

    .filter-submit-shell { /* 调整小屏幕下的筛选按钮容器布局。 */
        justify-content: flex-start; /* 在小屏幕下让筛选按钮从整行左侧开始排列。 */
    } /* 结束小屏幕下的筛选按钮容器布局调整。 */

    .filter-submit-shell .button { /* 调整小屏幕下的筛选按钮宽度。 */
        width: 100%; /* 在小屏幕下让筛选按钮占满整行宽度。 */
    } /* 结束小屏幕下的筛选按钮宽度调整。 */

    .sidebar-tab { /* 调整小屏幕下标签按钮布局。 */
        flex: 1 1 100%; /* 让标签按钮在小屏幕下单列显示。 */
    } /* 结束小屏幕下标签按钮布局调整。 */

    .support-float { /* 调整客服悬浮入口位置。 */
        right: 14px; /* 缩小与右边缘的距离。 */
        bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 8px)); /* 在小屏幕下继续让客服悬浮入口贴近底边并兼容安全区。 */
    } /* 结束客服悬浮入口位置调整。 */

    .support-float-button { /* 调整客服悬浮按钮。 */
        padding: 11px 14px; /* 缩小客服悬浮按钮内边距。 */
    } /* 结束客服悬浮按钮调整。 */

    .support-float-panel { /* 调整客服二维码面板宽度。 */
        width: min(240px, calc(100vw - 28px)); /* 在小屏幕下避免二维码面板超出视口。 */
    } /* 结束客服二维码面板宽度调整。 */
} /* 结束小屏幕下的布局调整定义。 */