/* ==========================================================================
   iChemSafe 化工安全人 · 前台 UI 设计系统
   依据：IChemSafe_UI_设计规范.md（品牌蓝 / 青绿辅助 / 浅蓝灰底 / 白色卡片）
   作用域：body.ui-site —— 仅作用于前台 index 应用，不影响 admin 后台与安装程序。
   加载：在 public.css、less.less 之后引入；legacy 布局骨架与业务脚本保持原样，
        本文件统一视觉、间距、状态与响应式表现。
   ========================================================================== */

/* 1. 设计令牌 ------------------------------------------------------------- */
:root {
    /* 品牌 */
    --color-primary: #155EEF;
    --color-primary-hover: #004EEB;
    --color-primary-soft: #EAF1FE;
    --color-secondary: #089E8B;
    --color-secondary-soft: #E4F5F1;
    --color-secondary-strong: #067A6C;
    --color-heading: #0B2347;

    /* 文本 */
    --color-text: #344054;
    --color-text-secondary: #667085;
    --color-text-disabled: #98A2B3;

    /* 面 */
    --color-page-bg: #F3F7FC;
    --color-surface: #FFFFFF;
    --color-border: #D9E4F2;
    --color-border-strong: #D0D5DD;

    /* 状态 */
    --color-success: #12B76A;
    --color-warning: #F79009;
    --color-danger: #F04438;
    --color-info: #2E90FA;
    --color-success-soft: #E6F7EF;
    --color-warning-soft: #FEF3E2;
    --color-warning-border: #FBDBA7;
    --color-warning-strong: #B54708;
    --color-danger-strong: #B42318;
    --color-danger-soft: #FEECEB;
    --color-danger-border: #FBC9C5;
    --color-danger-hover: #D92D20;
    --color-primary-border: #B7C7F6;
    --color-info-soft: #E7F1FE;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-card: 12px;
    --radius-panel: 16px;
    --radius-feature: 20px;
    --radius-pill: 999px;

    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 28px rgba(16, 24, 40, .12);
    --shadow-card: 0 1px 3px rgba(16, 24, 40, .05);

    /* 间距 */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* 布局 */
    --container-max: 1440px;
    --header-height: 64px;
    --content-gap: 24px;
    --page-gutter: 24px;

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-size-body: 16px;
    --font-size-small: 14px;
    --line-height-body: 1.6;

    /* 兼容旧命名（less.less / 既有内联样式仍在引用） */
    --color-card-bg: #FFFFFF;
    --color-text-primary: #0B2347;
    --color-text-muted: #667085;
    --color-text-placeholder: #98A2B3;
    --color-border-hover: #D0D5DD;
    --color-primary-dark: #0B2347;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-hover: 0 12px 28px rgba(16, 24, 40, .12);
}

/* 2. 作用域与旧版尺寸变量复位 -------------------------------------------- */
.ui-site {
    /* 旧样式以 vw 计算 --box / --margin-* / --font-size-*，此处换算为固定像素，
       使全站排版脱离视口宽度波动，统一到设计规范的 px 体系。 */
    --box: min(var(--container-max), calc(100% - 2 * var(--page-gutter)));
    --font-size-12: 12px;   --font-size-13: 13px;   --font-size-14: 14px;
    --font-size-16: 16px;   --font-size-18: 18px;   --font-size-20: 20px;
    --font-size-22: 22px;   --font-size-24: 24px;   --font-size-28: 28px;
    --font-size-32: 32px;
    --margin-1: 1px;  --margin-2: 2px;  --margin-3: 4px;  --margin-5: 6px;
    --margin-7: 8px;  --margin-8: 8px;  --margin-9: 8px;  --margin-10: 12px;
    --margin-12: 12px; --margin-15: 16px; --margin-20: 16px; --margin-23: 24px;
    --margin-25: 24px; --margin-30: 24px; --margin-35: 32px; --margin-36: 32px;
    --margin-40: 32px; --margin-43: 40px; --margin-45: 40px; --margin-48: 48px;
    --margin-50: 48px; --margin-55: 48px; --margin-60: 48px; --margin-65: 64px;
    --margin-70: 64px; --margin-75: 64px; --margin-80: 80px; --margin-85: 80px;
    --margin-90: 80px; --margin-95: 96px; --margin-100: 96px;
    margin: 0;
    background: var(--color-page-bg);
    color: var(--color-text);
    font: var(--font-size-body)/var(--line-height-body) var(--font-family);
    font-variant-numeric: tabular-nums;
    -webkit-text-size-adjust: 100%;
}

/* 3. 基础重置与排版 ------------------------------------------------------ */
.ui-site *,
.ui-site *::before,
.ui-site *::after { box-sizing: border-box; }

.ui-site img,
.ui-site video,
.ui-site canvas { max-width: 100%; height: auto; }
.ui-site img { border: 0; object-fit: cover; }
.ui-site img.is-placeholder { object-fit: contain; background: var(--color-page-bg); }

.ui-site h1,
.ui-site h2,
.ui-site h3,
.ui-site h4,
.ui-site h5 { color: var(--color-heading); font-weight: 600; line-height: 1.35; }
.ui-site h1 { font-size: 32px; }
.ui-site h2 { font-size: 24px; }
.ui-site h3 { font-size: 18px; }
.ui-site p { margin: 0; }

.ui-site a { color: inherit; text-decoration: none; font-size: inherit; }
.ui-site a:hover { color: var(--color-primary); }
.ui-site strong, .ui-site b { font-weight: 600; }
.ui-site em, .ui-site i { font-style: normal; }
.ui-site ul, .ui-site ol { list-style: none; margin: 0; padding: 0; }
.ui-site hr { border: 0; border-top: 1px solid var(--color-border); }

.ui-site :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.ui-site .ui-skip {
    position: absolute; left: 16px; top: -80px; z-index: 100000;
    padding: 12px 24px; border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--color-surface); color: var(--color-primary);
    box-shadow: var(--shadow-md);
}
.ui-site .ui-skip:focus { top: 0; }

.ui-site ::selection { background: var(--color-primary-soft); color: var(--color-heading); }

/* 页面骨架：内容不足一屏时，页脚始终贴住视口底部 */
.ui-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}
.ui-site > main {
    flex: 1 0 auto;
    min-width: 0;
}

/* 仅供屏幕阅读器使用的文字 */
.ui-site .ui-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 4. 表单控件 ------------------------------------------------------------ */
.ui-site :is(input, select, textarea, button) { font-family: inherit; font-size: 14px; }
.ui-site input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]),
.ui-site select,
.ui-site textarea {
    width: 100%;
    max-width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color .2s, box-shadow .2s;
}
.ui-site textarea { min-height: 96px; line-height: 1.6; resize: vertical; }
.ui-site select { appearance: none; padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center;
}
.ui-site :is(input, select, textarea):focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(21, 94, 239, .12);
    outline: none;
}
.ui-site input::placeholder,
.ui-site textarea::placeholder { color: var(--color-text-disabled); }
.ui-site button { cursor: pointer; font-family: inherit; }
.ui-site :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .6; }
.ui-site label { color: var(--color-text); }

/* 5. 表格 ---------------------------------------------------------------- */
.ui-site table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-site th, .ui-site td { padding: 12px; border-bottom: 1px solid var(--color-border); text-align: left; }
.ui-site th { color: var(--color-text-secondary); font-weight: 600; background: var(--color-page-bg); }
.ui-site tbody tr:hover { background: var(--color-page-bg); }
.ui-site .Table-scroll, .ui-site .table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 6. 布局容器与通用工具类 ------------------------------------------------ */
.ui-site .box {
    width: min(var(--container-max), calc(100% - 2 * var(--page-gutter)));
    max-width: var(--container-max);
    margin-inline: auto;
}
.ui-site .flex { display: flex; }
.ui-site .flex-wrap { flex-wrap: wrap; }
.ui-site .between { justify-content: space-between; align-items: center; }
.ui-site .center { text-align: center; }
.ui-site .self { align-self: center; }
.ui-site .over { overflow: hidden; }
.ui-site .BgWhite { background: var(--color-surface); }
.ui-site .w100 { width: 100%; }
.ui-site .pointer { cursor: pointer; }
.ui-site .Mt20 { margin-top: 20px; }
.ui-site .Mt30 { margin-top: 24px; }
.ui-site .NoMt30 { margin-top: 0; }
.ui-site .MinHeight { min-height: 1px; }
.ui-site :is(.radiused, .radiuseds) { border-radius: var(--radius-card); }
.ui-site .PublicMain { margin-bottom: 48px; }

/* 面包屑 + 页面标题 */
.ui-site .ui-page-heading { margin: 32px auto 24px; }
.ui-site .ui-page-heading p { margin-bottom: 8px; color: var(--color-text-secondary); font-size: 13px; }
.ui-site .ui-page-heading p a { color: var(--color-text-secondary); }
.ui-site .ui-page-heading p a:hover { color: var(--color-primary); }
.ui-site .ui-page-heading p span { color: var(--color-text-disabled); }
.ui-site .ui-page-heading p > span:last-child { color: var(--color-text); }
.ui-site .ui-page-heading h1 { font-size: 32px; font-weight: 700; }

/* 列表结果条 */
.ui-site .ui-result-count {
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-secondary); font-size: 13px;
}
.ui-site .ui-result-count b,
.ui-site .ui-result-count strong { color: var(--color-primary); font-weight: 600; }

/* 7. 顶部导航 ------------------------------------------------------------ */
.ui-site > header {
    position: relative;
    background: var(--color-surface);
}

/* 7.1 公告条（后台公告跑马灯，窄条呈现） */
.ui-site header .Top {
    background: var(--color-page-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 0;
}
.ui-site header .top-inner { min-height: 30px; gap: 24px; }
.ui-site header .top-welcome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ui-site header .top-welcome-icon { width: 15px; height: 15px; flex-shrink: 0; object-fit: contain; }
.ui-site header .top-welcome-marquee { position: relative; overflow: hidden; max-width: 760px; }
.ui-site header .top-welcome-track { display: flex; gap: 48px; white-space: nowrap; animation: ui-top-marquee 18s linear infinite; }
.ui-site header .top-welcome:hover .top-welcome-track { animation-play-state: paused; }
.ui-site header .top-welcome-text { color: var(--color-text-secondary); font-size: 13px; }
@keyframes ui-top-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* 7.2 头部主行：品牌 + 主导航 + 全站检索 + 账户 */
.ui-site header .Head { padding: 0; border-bottom: 1px solid var(--color-border); }
.ui-site header .head-inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-height); }
/* display: block 看着是多余的（h1 默认就是 block），但它是在压制一条旧规则，别删：
   less.less 的 @media (max-width:800px) 里有 `header .Head h1 { display: none }` —— 旧版手机端
   另有一行 `.Head.wap_show` 专门放 logo，所以主行的 h1 要藏掉；那行已随改版删除，这条却留下了。
   漏掉 display 的后果是 H5 下整个 logo 不显示，且 h1 不再是 flex 项，「登录」顶上成为第一项、
   靠左排并在右侧空出 logo 的宽度（表现为「按钮贴左、右边空一大块」）。
   该选择器权重 (0,1,2) 低于这里的 (0,2,1)，重申即可覆盖。 */
.ui-site header .head-brand { display: block; flex-shrink: 0; margin: 0; }
.ui-site header .head-brand a { display: block; }
.ui-site header .head-brand img { height: 38px; width: auto; object-fit: contain; }

/* 7.3 主导航
   nowrap 是硬约束：栏目由后台配置，条数一多就会把头部挤成两行（整行高度翻倍、
   末尾栏目掉到品牌下方）。这里宁可让导航条自身横向滚动，也不允许换行。
   字号 / 内边距按 1440px 容器预算取值：品牌 160 + 导航 ≈678 + 检索 300 + 账户 ≈230 + 间距 60。 */
.ui-site header nav.head-nav {
    display: flex; align-items: center; flex-wrap: nowrap; gap: 0 2px; min-width: 0; flex: 0 1 auto;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    background: transparent; border: 0;
}
.ui-site header nav.head-nav::-webkit-scrollbar { display: none; }
.ui-site header .head-nav a {
    position: relative; display: inline-block; flex: 0 0 auto;
    padding: 12px 8px 15px;
    color: var(--color-text); font-size: 14px; white-space: nowrap;
}
.ui-site header .head-nav a::after {
    content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px;
    height: 2px; background: transparent; border-radius: 2px;
}
.ui-site header .head-nav a:hover { color: var(--color-primary); background: transparent; }
.ui-site header .head-nav a:hover::after { background: var(--color-primary); }
.ui-site header .head-nav a.active { color: var(--color-primary); font-weight: 600; background: transparent; }
.ui-site header .head-nav a.active::after { background: var(--color-primary); }
/* 上面给了 a 具体 display，会盖掉 [hidden] 的默认样式；7.5.3 的「更多」收起要靠 hidden 生效 */
.ui-site header .head-nav a[hidden] { display: none; }

/* 7.4 头部检索（胶囊输入框 + 嵌在右端的圆形搜索按钮）
   外框宽度定死 300px：旧版 240px（空间不足还会被压到 186px）留给关键词输入区只有 ~76px，
   占位符「搜索关键词」都显示不全。300px 按 1440px 容器预算取值（见 7.3），输入区 ~136px，
   检索范围固定占 100px，切换分类时关键词输入区与按钮位置保持稳定。
   不参与 flex 收缩（flex-shrink: 0）：头部空间不够时由主导航收进「更多」下拉（见 7.5.3），
   而不是把检索框压小——否则 initNavOverflow 量到的 nav 宽度会随检索框被压而变化，收起数量来回抖。 */
.ui-site header .head-search { flex: 0 0 auto; width: 300px; margin-left: auto; }
/* 桌面端把「账户 / 语言 / 菜单」推到右边的其实是上面检索框的 margin-left:auto。
   登录 / 注册 / 忘记密码三页不渲染检索框（见 layout/header.html 的 empty($hide_header_search)），
   不补这条的话主导航和账户会一起挤在品牌右边、右端空一大块。
   所以这条只在「无检索框」时生效：正常页面若给 .head-actions 也加 auto，
   两个 auto 会平分空白，把 300px 的检索框从右端挤到中间。 */
.ui-site header.head-no-search .head-actions { margin-left: auto; }
.ui-site .Search {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 4px 4px 12px;
    background: var(--color-page-bg);
    border: 1px solid transparent; border-radius: var(--radius-pill);
    transition: background-color .2s, border-color .2s, box-shadow .2s;
}
/* 必须解除旧版 less.less 里 `header .Search { overflow: hidden }` 的裁切：
   那行是给旧版方形蓝色搜索按钮切圆角用的，而 7.5.2 的检索范围面板是绝对定位、落在胶囊
   下方，被 overflow 裁掉后「触发器样式正常、点开却什么都看不见」。新版按钮自己带
   border-radius:50%、胶囊又有 4px 内边距，已经不需要父级裁切。 */
.ui-site header .Search { overflow: visible; }
.ui-site .Search:focus-within { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(21, 94, 239, .12); }
/* 搜索按钮绝对定位、嵌在输入框右端（就是要 el-input 后缀图标那个位置），
   关键词输入区因此占满整条胶囊，图标落在它内部右侧，不再是一个并排的独立控件。
   .Submit 要有 position: relative 当定位参照 —— 它的 padding box 边界就是输入框的边界。
   这里故意不写 top：绝对定位元素缺省使用「静态位置」，而 .Submit 是 align-items:center 的
   flex 容器，静态位置会把它竖直居中（见 CSS Flexbox 4.1 对绝对定位子项的说明），正是想要的。 */
.ui-site .Search .Submit { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ui-site .Search .Text {
    flex: 1; min-width: 0; height: 32px; min-height: 32px;
    /* 注意：本块的 border / background-color / min-height 写不过 §4 那条全局输入框规则
       （:172 的 5 个 :not() 链，权重 (0,6,1) 对这里的 (0,3,0)），搜索框里那个白色描边小方框是它给的。
       保留这几条是因为它们表达的才是本意（输入框应当融进胶囊），等那条规则收窄后即会生效。 */
    border: 0; background-color: transparent; box-shadow: none;
    color: var(--color-text); font-size: 14px;
    /* padding-right 是本次唯一需要真正生效的：把搜索图标嵌进输入框右端，右侧得留出位置。
       权重压不过那条全局规则，只能加 !important——首页 hero 检索框压同一条规则时也是这么做的，见 7.8。
       只用长写、不用 padding 简写：这样上下 8px 与左 12px 仍按那条规则走，不会顺带改掉输入框内部留白。
       数值 = 图标的 right 10px + 按钮宽 30px；H5 按钮放大到 34px，对应 44px，见 25.2。 */
    padding-right: 40px !important;
}
.ui-site .Search .Text:focus { box-shadow: none; }
.ui-site .Search .Button {
    position: absolute; right: 10px;
    flex-shrink: 0; width: 30px; height: 30px; min-height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-primary); border: 0; border-radius: 50%;
}
.ui-site .Search .Button:hover { background: var(--color-primary-hover); }
.ui-site .Search .Button img { width: 15px; height: 15px; object-fit: contain; filter: brightness(0) invert(1); }

/* 7.5 账户与语言 */
.ui-site header .head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ui-site header .head-link { padding: 6px 2px; color: var(--color-text); font-size: 15px; }
.ui-site header .head-link:hover { color: var(--color-primary); }
.ui-site header .head-link--primary {
    padding: 8px 20px; color: #fff; font-weight: 600;
    background: var(--color-primary); border-radius: var(--radius-md);
}
.ui-site header .head-link--primary:hover { color: #fff; background: var(--color-primary-hover); }
/* 未登录时的「登录 / 注册」：外层包一层，让这两个按钮自成一组（组内 10px、组间沿用 .head-actions 的 gap）。
   没有这层包裹时四个控件等距排开，「注册」和「切换语言」看起来像同一组。 */
.ui-site header .head-auth { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ui-site header .user-avatar { width: 24px; height: 24px; border-radius: var(--radius-pill); object-fit: cover; }
.ui-site header .level-badge {
    padding: 2px 8px; font-size: 12px; line-height: 18px; font-style: normal;
    color: var(--color-secondary); background: var(--color-secondary-soft);
    border-radius: var(--radius-pill); white-space: nowrap;
}
.ui-site header .level-badge.level-vip { color: var(--color-primary); background: var(--color-primary-soft); }
.ui-site header .level-badge.level-enterprise { color: var(--color-warning-strong); background: #FEF3E2; }

/* 7.5.1 头部下拉（语言 / 账户）：开合行为统一在 site-ui.js 的 initHeadPops 里，
   选择器用 data-head-pop* 而不是具体类名，两个下拉共用同一套外观。 */
.ui-site header [data-head-pop] { position: relative; display: inline-flex; flex-shrink: 0; min-width: 0; }
.ui-site header [data-head-pop-trigger] {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 4px 8px;
    color: var(--color-text-secondary); font-size: 13px; background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
    transition: color .2s, background-color .2s, border-color .2s;
}
.ui-site header [data-head-pop-trigger]:hover { color: var(--color-primary); background: var(--color-page-bg); }
.ui-site header [data-head-pop].is-open [data-head-pop-trigger] { color: var(--color-primary); background: var(--color-page-bg); border-color: var(--color-border); }
.ui-site header [data-head-pop].is-busy [data-head-pop-trigger] { opacity: .55; pointer-events: none; }
.ui-site :is(header, .ui-hero-search) .head-pop-arrow { width: 14px; height: 14px; flex-shrink: 0; object-fit: contain; transition: transform .2s; }
.ui-site :is(header, .ui-hero-search) [data-head-pop].is-open .head-pop-arrow { transform: rotate(180deg); }
.ui-site :is(header, .ui-hero-search) [data-head-pop-menu] {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200;
    display: grid; gap: 2px; min-width: 150px; padding: 6px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.ui-site :is(header, .ui-hero-search) [data-head-pop-menu][hidden] { display: none; }
.ui-site header :is(.lang-option, .user-option) {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 32px; padding: 6px 10px;
    color: var(--color-text); font-size: 13px; text-align: left; white-space: nowrap;
    background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
    transition: color .2s, background-color .2s;
}
.ui-site header :is(.lang-option, .user-option):hover { color: var(--color-primary); background: var(--color-primary-soft); }
.ui-site header .lang-option[aria-current="true"] { color: var(--color-primary); font-weight: 600; }
.ui-site header .lang-option[aria-current="true"]::after { content: "\2713"; font-size: 12px; font-weight: 600; }
/* 18px：地球换成 24 视窗的内联 SVG 后，尺寸小则 1.5 的描边渲染不足 1px、发虚；
   同时比 14px 的箭头大一点，作为触发器的主图标更立得住（手机上再放到 20px） */
.ui-site header .lang-icon { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }

/* 账户下拉：头像旁显示昵称与当前会员等级；窄屏只收起昵称，等级始终可见 */
.ui-site header .user-identity { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.ui-site header .user-level { display: inline-flex; flex-shrink: 0; font-weight: 600; }
.ui-site header .user-nick { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); font-size: 14px; }
.ui-site header .user-menu { min-width: 180px; }
.ui-site header .user-menu-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 6px 10px 10px; margin-bottom: 2px; border-bottom: 1px solid var(--color-border);
}
.ui-site header .user-menu-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-heading); font-size: 13px; font-weight: 600; }
.ui-site header .user-option--upgrade { justify-content: flex-start; color: var(--color-warning-strong); font-weight: 600; }
.ui-site header .user-option--upgrade:hover { color: var(--color-warning-strong); background: var(--color-warning-soft); }
.ui-site header .user-option--upgrade svg { flex-shrink: 0; }

/* 7.5.2 检索范围下拉（替换原生 <select>）
   原生 select 的展开面板由操作系统绘制，样式不可控（圆角、行高、选中态都跟站内不一致），
   这里换成「触发器 + 自绘面板」：外观对齐 Element Plus 的 select 下拉 —— 面板白底、
   1px 边框 + 轻投影、选项 34px 高、选中项主色加粗并在右侧带对勾。
   开合行为沿用 7.5.1 的 data-head-pop 机制（点击外部 / Esc 收起、同时只开一个、箭头旋转），
   选中后写回隐藏域 search_type 的逻辑在 header.html 的内联脚本里。 */
.ui-site :is(header, .ui-hero-search) .head-scope { flex-shrink: 0; }
.ui-site :is(header, .ui-hero-search) .head-scope-trigger {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0;
    color: var(--color-text-secondary); font-size: 13px; white-space: nowrap;
    background: transparent; border: 0; cursor: pointer; transition: color .2s;
}
/* 头部固定预留最长中文分类的宽度，翻译后的长文本省略，箭头位置固定。 */
.ui-site header .head-scope { flex: 0 0 100px; width: 100px; }
.ui-site header .head-scope-trigger { width: 100%; justify-content: space-between; gap: 6px; }
.ui-site header .head-scope-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
/* 触发器在检索胶囊内部，去掉 7.5.1 通用触发器在 hover / 展开时的底色与描边 */
.ui-site :is(header, .ui-hero-search) .head-scope-trigger:hover,
.ui-site :is(header, .ui-hero-search) .head-scope.is-open .head-scope-trigger {
    color: var(--color-primary); background: transparent; border-color: transparent;
}
.ui-site :is(header, .ui-hero-search) .head-scope-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
.ui-site :is(header, .ui-hero-search) .head-scope .head-pop-arrow { width: 12px; height: 12px; }
.ui-site :is(header, .ui-hero-search) .head-scope-menu {
    left: 0; right: auto; min-width: 176px; padding: 5px; gap: 0;
    max-height: 274px; overflow-y: auto; overscroll-behavior: contain;
    transform-origin: center top; animation: head-scope-in .12s ease-out;
}
.ui-site :is(header, .ui-hero-search) .head-scope-option {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 34px; padding: 0 12px;
    color: var(--color-text); font-size: 13px; text-align: left; white-space: nowrap;
    background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer;
    transition: color .2s, background-color .2s;
}
.ui-site :is(header, .ui-hero-search) .head-scope-option:hover,
.ui-site :is(header, .ui-hero-search) .head-scope-option:focus-visible { color: var(--color-primary); background: var(--color-primary-soft); outline: none; }
.ui-site :is(header, .ui-hero-search) .head-scope-option[aria-selected="true"] { color: var(--color-primary); font-weight: 600; }
.ui-site :is(header, .ui-hero-search) .head-scope-option[aria-selected="true"]::after { content: "\2713"; font-size: 12px; font-weight: 600; }
@keyframes head-scope-in {
    from { opacity: 0; transform: translateY(-4px) scaleY(.97); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ui-site :is(header, .ui-hero-search) .head-scope-menu { animation: none; }
}

/* 7.5.3 主导航溢出「更多」下拉
   栏目条数/文案变长导致主导航放不下时，尾部栏目收进这里（收放数量由 site-ui.js 的
   initNavOverflow 按 nav 的实际溢出量计算），外观沿用 7.5.1 的 [data-head-pop-menu] 面板，
   只把触发器做成导航栏目的样子，菜单项做成 Element Plus 那样的列表项。 */
.ui-site header .head-nav-more[hidden] { display: none; }
.ui-site header .head-nav-more-trigger {
    gap: 4px; min-height: 0; padding: 12px 8px 15px;
    border: 0; border-radius: 0; color: var(--color-text); font-size: 14px;
}
.ui-site header .head-nav-more-trigger:hover,
.ui-site header .head-nav-more.is-open .head-nav-more-trigger { color: var(--color-primary); background: transparent; }
.ui-site header .head-nav-more .head-pop-arrow { width: 12px; height: 12px; }
.ui-site header .head-nav-more-menu { min-width: 168px; }
.ui-site header .head-nav-more-menu a {
    display: flex; align-items: center; min-height: 32px; padding: 6px 10px;
    color: var(--color-text); font-size: 13px; white-space: nowrap;
    border-radius: var(--radius-sm); transition: color .2s, background-color .2s;
}
.ui-site header .head-nav-more-menu a:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.ui-site header .head-nav-more-menu a.active { color: var(--color-primary); font-weight: 600; }
.ui-site header .head-nav-more-menu a[hidden] { display: none; }

/* 7.6 移动端头部与抽屉（不使用底部 TabBar） */
.ui-site header .wap_nav { display: none; }
.ui-site .wap_nav_sw_nav { display: none; }

/* 7.7 滚动吸顶
   旧版（less.less `header.fix nav`）只把 <nav> 固定到视口顶部，而新版导航位于头部主行内、
   本身没有底色，滚动后会变成「只有文字浮在内容上」。这里改为整行头部吸顶并补白底与阴影，
   同时取消旧版对 nav 的固定定位。
   选择器必须写成 `body.ui-site > header`：组件内部也有 <header>（如首页 .ui-panel-head），
   裸标签选择器会一并命中，使面板头部同样 sticky/z-index:1000；它与站点头部层级相同而 DOM
   更靠后，于是盖住站点头部的下边框与投影，看起来像"header 被遮挡"。 */
.ui-site > header {
    position: sticky; top: 0; z-index: 1000;
    background: var(--color-surface);
}
.ui-site > header.fix nav { position: static; width: auto; z-index: auto; }
.ui-site > header.fix .Top { display: none; }
.ui-site > header.fix .Head { box-shadow: var(--shadow-md); }
/* 8. 页脚 ---------------------------------------------------------------- */
.ui-site footer {
    margin-top: 48px;
    color: #CBD5E1;
    background: var(--color-heading);
}
.ui-site footer .Footer { display: flex; align-items: center; gap: 40px; padding: 20px 0; }
.ui-site footer .foot-brand { flex-shrink: 0; }
.ui-site footer .foot-brand h1 { margin: 0; }
.ui-site footer .foot-brand img { height: 34px; width: auto; object-fit: contain; }
.ui-site footer .foot-nav { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }
.ui-site footer .foot-nav a { color: #E2E8F0; font-size: 14px; }
.ui-site footer .foot-nav a:hover { color: #FFFFFF; }
.ui-site footer .foot-nav i { color: #3B4967; font-style: normal; font-size: 12px; }
.ui-site footer .foot-aside { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.ui-site footer .foot-slogan { color: #94A3B8; font-size: 13px; letter-spacing: .14em; }
.ui-site footer .foot-qr { display: flex; align-items: center; gap: 8px; }
.ui-site footer .foot-qr img { width: 40px; height: 40px; padding: 2px; background: #FFFFFF; border-radius: var(--radius-sm); object-fit: contain; }
.ui-site footer .foot-qr span { color: #94A3B8; font-size: 12px; }
.ui-site footer .Copyright { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .08); color: #94A3B8; font-size: 13px; }
.ui-site footer .foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.ui-site footer .foot-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ui-site footer .Copyright a { color: #CBD5E1; margin-left: 8px; }
/* 9. 通用组件 ------------------------------------------------------------ */

/* 9.1 按钮 */
.ui-site :is(.Btn, .Button, .btn, .Click, .btn-primary, .contact-submit) {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 40px; padding: 8px 20px;
    color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4;
    background: var(--color-primary); border: 1px solid var(--color-primary);
    border-radius: var(--radius-md); text-align: center; cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.ui-site :is(.Btn, .Button, .btn, .Click, .btn-primary, .contact-submit):hover {
    color: #fff; background: var(--color-primary-hover); border-color: var(--color-primary-hover);
}
.ui-site .Btn.center { display: flex; width: 100%; }
.ui-site .btn { width: auto; }
.ui-site .btn-back { color: var(--color-text); background: var(--color-surface); border-color: var(--color-border-strong); }
.ui-site .btn-back:hover { color: var(--color-primary); background: var(--color-page-bg); border-color: var(--color-primary); }
.ui-site :is(.btn-success, .btn-download) { background: var(--color-success); border-color: var(--color-success); }
.ui-site :is(.btn-success, .btn-download):hover { background: #0E9B58; border-color: #0E9B58; }
.ui-site :is(.btn-danger, .btn-fail) { background: var(--color-danger); border-color: var(--color-danger); }
.ui-site :is(.btn-danger, .btn-fail):hover { background: #D92D20; border-color: #D92D20; }
.ui-site :is(.btn-disabled, .layui-btn-disabled) { background: var(--color-text-disabled); border-color: var(--color-text-disabled); pointer-events: none; }
.ui-site .doc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 6px 14px !important;
    color: var(--color-primary) !important;
    font-size: 14px !important; line-height: 1.4 !important;
    background: var(--color-primary-soft) !important;
    border: 1px solid transparent !important; border-radius: var(--radius-md) !important;
    text-decoration: none !important;
}
.ui-site .doc-btn:hover { color: #fff !important; background: var(--color-primary) !important; }

/* 9.2 卡片与面板 */
.ui-site :is(.BgWhite.radiused, .BgWhite.radiuseds, .Main, .FourMain, .card,
             .level-card, .benefit-group-card, .invoice-card, .order-card,
             .stat-chart-card, .contact-card, .page-wrap) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.ui-site .stat-chart-card { padding: 20px !important; box-shadow: var(--shadow-card) !important; }
.ui-site .stat-chart-title { color: var(--color-heading); font-size: 15px !important; font-weight: 600 !important; margin-bottom: 12px !important; }

/* 9.3 标签 / 状态标记 */
.ui-site :is(.New, .group-badge, .badge-pill, .member-tag) {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; font-size: 12px; line-height: 18px;
    color: var(--color-primary); background: var(--color-primary-soft);
    border-radius: var(--radius-pill); white-space: nowrap;
}
.ui-site .New i { font-size: 12px; }
.ui-site :is(.Pay, .Free) { display: inline-flex; margin-right: 6px; vertical-align: middle; }
.ui-site :is(.Pay, .Free) i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; font-size: 12px; font-weight: 600;
    border-radius: var(--radius-sm);
}
.ui-site .Pay i { color: #fff; background: var(--color-warning); }
.ui-site .Free i { color: #fff; background: var(--color-success); }
.ui-site :is(.Pay, .Free) i:last-child { display: none; }
.ui-site .status-badge, .ui-site .payment-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; font-size: 13px; line-height: 20px;
    border-radius: var(--radius-pill); white-space: nowrap;
}
.ui-site .status-badge.paid, .ui-site .status-badge.invoiced,
.ui-site .payment-status.success { color: var(--color-success); background: #E7F8EF; }
.ui-site .status-badge.pending { color: var(--color-warning-strong); background: #FEF3E2; }
.ui-site .status-badge.cancelled, .ui-site .payment-status.error { color: var(--color-danger); background: #FDECEB; }
.ui-site .status-badge:not([class*="paid"]):not([class*="pending"]):not([class*="cancelled"]):not([class*="invoiced"]) {
    color: var(--color-text-secondary); background: var(--color-page-bg);
}
.ui-site .end { color: var(--color-warning-strong); font-size: 13px; }

/* 9.4 元信息 / 摘要 / 正文 */
.ui-site .PubTimer { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; color: var(--color-text-secondary); font-size: 13px; }
.ui-site .PubTimer img { width: 14px; height: 14px; margin-right: 0; object-fit: contain; opacity: .75; }
.ui-site .PubTimer em { white-space: nowrap; }
.ui-site .PubList { color: var(--color-text-secondary); font-size: 14px; line-height: 1.8; }
.ui-site .CnEn { color: var(--color-heading); font-size: 16px; line-height: 1.5; }
.ui-site .Tit {
    display: flex; align-items: center; gap: 8px;
    margin: 24px 0 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading); font-size: 18px; font-weight: 600;
}
.ui-site .Tit::before {
    content: ""; width: 3px; height: 16px; flex-shrink: 0;
    background: var(--color-primary); border-radius: 2px;
}
.ui-site .Table dl { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.ui-site .Table dl:last-child { border-bottom: 0; }
.ui-site .Table dt { flex-shrink: 0; min-width: 96px; color: var(--color-text-secondary); font-size: 14px; }
.ui-site .Table dd { flex: 1; min-width: 0; color: var(--color-text); font-size: 14px; }

/* 9.5 列表行 */
.ui-site :is(.DowmList, .invoice-list, .order-cards) > div + div { margin-top: 12px; }
.ui-site .DowmList > .BgWhite { padding: 20px 24px; }
.ui-site .DowmList dl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ui-site .DowmList dl dt { color: var(--color-heading); font-size: 18px; font-weight: 600; }
.ui-site .DowmList dl dt i { margin-right: 2px; color: var(--color-warning-strong); font-size: 14px; }
.ui-site .DowmList dl dd h2 { font-size: 15px; font-weight: 500; }
.ui-site .DowmList dl h3 { padding: 2px 10px; font-size: 13px; color: var(--color-warning-strong); background: #FEF3E2; border-radius: var(--radius-pill); }
.ui-site .DowmList .take, .ui-site .take { display: flex; align-items: center; gap: 12px; }
.ui-site .take img { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-pill); object-fit: cover; }
.ui-site .DowmList .ask { color: var(--color-text-secondary); font-size: 13px; }
.ui-site .DowmList .income h2, .ui-site .DowmList .income i { color: var(--color-success); }
.ui-site .DowmList .expense h2, .ui-site .DowmList .expense i { color: var(--color-danger); }

/* 9.6 分页 */
.ui-site .page, .ui-site #pages, .ui-site .pagination { display: flex; justify-content: center; margin-top: 24px; }
.ui-site .page ul, .ui-site .pagination ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-site .page ul li a, .ui-site .page ul li span,
.ui-site .pagination ul li a, .ui-site .pagination ul li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; min-height: 40px; padding: 0 10px;
    color: var(--color-text-secondary); font-size: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.ui-site .page ul li a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.ui-site .page ul li.active span, .ui-site .pagination ul li.active span {
    color: #fff; background: var(--color-primary); border-color: var(--color-primary);
}
/* 分页省略号：只显示 ...，不画按钮边框 */
.ui-site .page ul li.ellipsis > span,
.ui-site .pagination ul li.ellipsis > span {
    min-width: auto; min-height: auto;
    padding: 0 2px;
    color: var(--color-text-disabled);
    background: transparent;
    border-color: transparent;
}

/* 9.7 空状态 / 加载 */
.ui-site :is(.empty-state, #NoHave) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 48px 24px !important;
    color: var(--color-text-secondary) !important;
    background: var(--color-surface);
    border: 1px dashed var(--color-border); border-radius: var(--radius-card);
    text-align: center !important; width: 100% !important;
}
.ui-site :is(.empty-state, #NoHave) :is(p, dd) { color: var(--color-text-secondary) !important; font-size: 15px !important; line-height: 1.7; }
.ui-site :is(.empty-state, #NoHave) img { width: 96px; max-width: 60%; margin: 0 auto; opacity: .8; object-fit: contain; }
.ui-site .empty-tip { color: var(--color-text-secondary) !important; font-size: 15px !important; }
.ui-site .empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.ui-site .empty-actions .btn-go-orders { color: var(--color-primary); font-weight: 600; }
.ui-site .loading, .ui-site .pdf-loading { color: var(--color-text-secondary); font-size: 14px; text-align: center; padding: 24px; }
.ui-site .spinner {
    width: 28px; height: 28px; margin: 0 auto 8px;
    border: 3px solid var(--color-border); border-top-color: var(--color-primary);
    border-radius: 50%; animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* 9.8 选项卡 */
.ui-site :is(.DownNav, .register-tabs, .Reward .Where > .box > .flex) { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-site :is(.DownNav, .register-tabs) { padding: 8px; }
.ui-site :is(.DownNav, .register-tabs, .Reward .Where) a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 8px 18px;
    color: var(--color-text-secondary); font-size: 15px;
    border-radius: var(--radius-md);
}
.ui-site :is(.DownNav, .register-tabs, .Reward .Where) a:hover { color: var(--color-primary); background: var(--color-page-bg); }
.ui-site :is(.DownNav, .register-tabs, .Reward .Where) a.Active,
.ui-site :is(.DownNav, .register-tabs, .Reward .Where) a.cur {
    color: #fff; font-weight: 600; background: var(--color-primary);
}

/* 9.9 侧栏分类树 */
.ui-site .MainNav { padding: 20px; background: var(--color-surface); }
.ui-site .MainNav > h1 { margin: 0 0 12px; padding: 0 4px 12px; border-bottom: 1px solid var(--color-border); font-size: 18px; }
.ui-site .MainNav .scroll { display: block; max-height: 620px; overflow-y: auto; overflow-x: hidden; }
.ui-site .MainNav dl { border-bottom: 1px solid var(--color-border); }
.ui-site .MainNav dl:last-child { border-bottom: 0; }
.ui-site .MainNav dl a { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--radius-md); font-size: 15px; }
.ui-site .MainNav dl a:hover { background: var(--color-page-bg); }
.ui-site .MainNav dl.Active > a, .ui-site .MainNav dl a.cur { color: var(--color-primary); font-weight: 600; background: var(--color-primary-soft); }
.ui-site .MainNav :is(.cat-root, .AddCk, .sub-item, .sub-sub) { border-bottom: 1px solid var(--color-border); }
.ui-site .MainNav :is(.cat-title, .sub-item-row) { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.ui-site .MainNav .nav-link { flex: 1; min-width: 0; padding: 10px 8px; border-radius: var(--radius-md); font-size: 15px; }
.ui-site .MainNav .nav-link:hover { background: var(--color-page-bg); }
.ui-site .MainNav .nav-link.cur { color: var(--color-primary); font-weight: 600; background: var(--color-primary-soft); }
.ui-site .MainNav .toggle-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex-shrink: 0; cursor: pointer;
    color: var(--color-text-disabled); transition: transform .2s;
}
.ui-site .MainNav .toggle-arrow::before { content: ""; width: 0; height: 0; border: 5px solid transparent; border-left-color: currentColor; margin-left: 3px; }
.ui-site .MainNav .sub-item.open > .sub-item-row > .toggle-arrow { transform: rotate(90deg); }
.ui-site .MainNav .sub-sub dd a { display: block; padding: 8px 12px 8px 32px; font-size: 14px; color: var(--color-text-secondary); border-radius: var(--radius-md); }
.ui-site .MainNav .sub-sub dd a:hover { color: var(--color-primary); background: var(--color-page-bg); }
.ui-site .MainNav .sub-sub dd a.cur { color: var(--color-primary); font-weight: 600; }

/* 9.10 详情页侧栏 / 吸顶 */
.ui-site .IndexSticky { position: sticky; top: 16px; }
.ui-site .IndexSticky .Fixed { margin-top: 16px; padding: 20px; }
.ui-site .IndexSticky .Fixed:first-child { margin-top: 0; }

/* 10. 弹层与支付 --------------------------------------------------------- */
.ui-site :is(.unlock-mask, .upgrade-mask, .upgrade-confirm-mask, .confirm-mask, .invoice-modal-overlay) {
    position: fixed; inset: 0; z-index: 12000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(11, 35, 71, .48);
    overflow-y: auto;
}
.ui-site :is(.unlock-pay-dialog, .upgrade-pay-dialog, .buy-pay-dialog, .invoice-modal) {
    position: relative; width: min(560px, 100%); max-height: calc(100vh - 48px);
    padding: 24px; overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-panel); box-shadow: var(--shadow-lg);
}
.ui-site .invoice-modal { width: min(640px, 100%); }
.ui-site :is(.unlock-close, .upgrade-close, .invoice-modal-close) {
    position: absolute; top: 12px; right: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    color: var(--color-text-secondary); font-size: 22px; line-height: 1;
    background: transparent; border: 0; border-radius: var(--radius-md);
}
.ui-site :is(.unlock-close, .upgrade-close, .invoice-modal-close):hover { color: var(--color-heading); background: var(--color-page-bg); }
.ui-site :is(.unlock-pay-title, .upgrade-pay-title, .buy-pay-title, .upgrade-title, .invoice-modal-title) {
    margin: 0 0 16px; color: var(--color-heading); font-size: 18px; font-weight: 600;
}
.ui-site :is(.upgrade-subtitle, .header-desc) { margin-top: 6px; color: var(--color-text-secondary); font-size: 13px; }

/* 10.1 支付方式选择 */
.ui-site :is(.upgrade-pay-info, .buy-pay-info) {
    display: flex; flex-direction: column; gap: 8px;
    padding: 16px; margin-bottom: 16px;
    background: var(--color-page-bg); border-radius: var(--radius-md);
}
.ui-site :is(.upgrade-pay-row, .buy-pay-info p) { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; }
.ui-site :is(.upgrade-pay-label, .s-label) { color: var(--color-text-secondary); flex-shrink: 0; }
.ui-site :is(.upgrade-pay-name, .upgrade-pay-price, .confirm-name, .confirm-price) { color: var(--color-heading); font-weight: 600; }
.ui-site .upgrade-pay-price, .ui-site .confirm-price { color: var(--color-danger); font-size: 18px; }
.ui-site :is(.upgrade-pay-methods, .buy-pay-methods) { display: flex; flex-direction: column; gap: 12px; }
.ui-site :is(.upgrade-pay-method, .buy-pay-method) { display: block; cursor: pointer; }
.ui-site :is(.pay-method-card, .buy-pay-method-card) {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    transition: border-color .2s, box-shadow .2s;
}
.ui-site :is(.upgrade-pay-method, .buy-pay-method):hover :is(.pay-method-card, .buy-pay-method-card) { border-color: var(--color-primary); }
.ui-site :is(.upgrade-pay-method, .buy-pay-method).active :is(.pay-method-card, .buy-pay-method-card),
.ui-site :is(.upgrade-pay-method, .buy-pay-method).selected :is(.pay-method-card, .buy-pay-method-card) {
    border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(21, 94, 239, .12);
}
.ui-site :is(.pay-method-icon, .buy-pay-method-icon) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    color: #fff; font-size: 18px; border-radius: var(--radius-md); background: var(--color-primary);
}
.ui-site .wechat-icon { background: #07C160; font-family: "layui-icon", sans-serif; }
.ui-site :is(.pay-method-body, .buy-pay-method-body) { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.ui-site :is(.pay-method-name, .buy-pay-method-name) { color: var(--color-heading); font-size: 15px; font-weight: 600; }
.ui-site :is(.pay-method-desc, .buy-pay-method-sub) { color: var(--color-text-secondary); font-size: 13px; }
.ui-site .pay-method-balance { color: var(--color-text); font-size: 13px; }
.ui-site :is(.upgrade-pay-actions, .upgrade-insufficient-actions, .confirm-actions) { display: flex; gap: 12px; margin-top: 20px; }
.ui-site :is(.upgrade-confirm-btn, .upgrade-insufficient-btn, .confirm-btn) {
    flex: 1; min-height: 44px; padding: 10px 16px;
    font-size: 15px; font-weight: 600; border-radius: var(--radius-md); border: 1px solid transparent;
}
.ui-site :is(.upgrade-confirm-btn, .upgrade-insufficient-btn, .confirm-btn).cancel {
    color: var(--color-text); background: var(--color-surface); border-color: var(--color-border-strong);
}
.ui-site :is(.upgrade-confirm-btn, .upgrade-insufficient-btn, .confirm-btn).cancel:hover { background: var(--color-page-bg); }
.ui-site :is(.upgrade-confirm-btn, .upgrade-insufficient-btn, .confirm-btn):is(.confirm, .primary) { color: #fff; background: var(--color-primary); }
.ui-site :is(.upgrade-confirm-btn, .upgrade-insufficient-btn, .confirm-btn):is(.confirm, .primary):hover { background: var(--color-primary-hover); }

/* 10.2 二维码与结果态 */
.ui-site .upgrade-qrcode-wrap { margin-top: 16px; text-align: center; }
.ui-site .upgrade-qrcode { display: inline-block; padding: 12px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ui-site .upgrade-qrcode-tip { margin-top: 12px; color: var(--color-text-secondary); font-size: 13px; }
.ui-site .upgrade-qrcode-countdown { margin-top: 6px; color: var(--color-warning-strong); font-size: 13px; }
.ui-site .upgrade-qrcode-retry { margin-top: 12px; color: var(--color-primary); font-size: 14px; background: none; border: 0; }
.ui-site :is(.upgrade-success-wrap, .success-message) { padding: 24px; text-align: center; }
.ui-site :is(.upgrade-success-icon, .icon-success) {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 12px;
    color: #fff; font-size: 26px; background: var(--color-success); border-radius: 50%;
}
.ui-site .icon-error { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 12px; color: #fff; font-size: 26px; background: var(--color-danger); border-radius: 50%; }
.ui-site :is(.upgrade-success-title, .processing-message h2) { margin: 0 0 8px; color: var(--color-heading); font-size: 18px; }
.ui-site .upgrade-success-text, .ui-site .unionpay-result-container .message { color: var(--color-text-secondary); font-size: 14px; }
.ui-site .upgrade-empty { padding: 32px; color: var(--color-text-secondary); font-size: 14px; text-align: center; }
.ui-site .upgrade-insufficient-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 12px; color: #fff; font-size: 22px; background: var(--color-warning); border-radius: 50%; }
.ui-site :is(.upgrade-insufficient-title, .buy-insufficient-title) { margin: 0 0 8px; color: var(--color-heading); font-size: 17px; text-align: center; }
.ui-site :is(.upgrade-insufficient-text, .buy-insufficient-text) { color: var(--color-text-secondary); font-size: 14px; line-height: 1.7; text-align: center; }

/* 10.3 会员升级弹窗的专用布局定义在 layout/upgrade-modal.html，保持各入口一致。 */

/* 11. 表单与上传 --------------------------------------------------------- */
.ui-site .Form { padding: 24px; }
.ui-site .Form .List { display: flex; flex-direction: column; gap: 16px; }
.ui-site .Form .List .text { width: 100%; min-height: 44px; }
.ui-site .Form .Button { width: 100%; min-height: 44px; }
.ui-site .form-group { margin-bottom: 16px; }
.ui-site .form-label { display: block; margin-bottom: 6px; color: var(--color-text); font-size: 14px; font-weight: 500; }
.ui-site .form-label.required::after { content: " *"; color: var(--color-danger); }
.ui-site .form-input, .ui-site .form-textarea { width: 100%; min-height: 42px; padding: 10px 12px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: 14px; }
.ui-site .form-textarea { min-height: 80px; }
.ui-site .form-msg { display: block; margin-top: 4px; color: var(--color-danger); font-size: 12px; }
.ui-site .radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-site .radio-item { padding: 8px 16px; color: var(--color-text-secondary); font-size: 14px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; }
.ui-site .radio-item.active { color: var(--color-primary); font-weight: 600; background: var(--color-primary-soft); border-color: var(--color-primary); }
.ui-site .email-notice { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; margin-bottom: 16px; color: var(--color-warning-strong); font-size: 13px; background: #FEF3E2; border-radius: var(--radius-md); }
.ui-site .icon-warn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: #fff; font-size: 12px; background: var(--color-warning); border-radius: 50%; }
.ui-site .btn-cancel { padding: 10px 20px; color: var(--color-text); font-size: 15px; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); }
.ui-site .btn-cancel:hover { background: var(--color-page-bg); }
.ui-site :is(.invoice-modal-footer, .form-action) { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); }

/* 上传控件 */
.ui-site :is(.img-box, .img-section, .up-section) { width: 100%; }
.ui-site .z_photo { display: flex; flex-wrap: wrap; gap: 12px; }
.ui-site .z_file { position: relative; width: 104px; height: 104px; overflow: hidden; background: var(--color-page-bg); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); cursor: pointer; }
.ui-site .z_file:hover { border-color: var(--color-primary); }
.ui-site .add-img, .ui-site .up-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-site .z_file .file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ui-site .close-upimg { position: absolute; top: 4px; right: 4px; z-index: 2; }
.ui-site .upload-loading { padding: 6px 10px; margin-top: 8px; color: var(--color-primary); font-size: 13px; background: var(--color-primary-soft); border-radius: var(--radius-sm); }

/* 12. 首页 --------------------------------------------------------------- */
/* 说明：§4 全局表单控件中的 input 选择器带 5 层 :not()，权重高达 0-6-1，
   首屏检索框需要 !important 才能覆盖；其余选择器均为常规权重。 */

/* 12.1 首屏：品牌 + 全站检索 + 化工安全态势 */
.ui-site .ui-hero {
    position: relative; isolation: isolate; padding: 0 0 26px;
    background: linear-gradient(120deg, #0B2347 0%, #16407A 54%, #0B2347 100%);
}
.ui-site .ui-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ui-site .ui-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-site .ui-hero-photo { opacity: 1; object-position: center 46%; }
.ui-site .ui-hero-slides { position: absolute; inset: 0; }
.ui-site .ui-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.ui-site .ui-hero-slide.is-active { opacity: .55; }
.ui-site .ui-hero-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(96deg, rgba(7, 20, 46, .96) 0%, rgba(7, 22, 48, .90) 36%, rgba(8, 24, 52, .66) 68%, rgba(8, 24, 52, .44) 100%),
        linear-gradient(0deg, rgba(7, 20, 46, .72) 0%, rgba(7, 20, 46, 0) 52%);
}

.ui-site .ui-hero-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    gap: 44px; align-items: center; padding: 46px 0 6px;
}
.ui-site .ui-hero-copy { max-width: 720px; }
.ui-site .ui-hero-eyebrow { color: rgba(233, 241, 253, .82); font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.ui-site .ui-hero-copy h1 { margin-top: 16px; color: #FFFFFF; font-size: 46px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; }
.ui-site .ui-hero-copy h1 em { color: #7FA9FF; font-style: normal; }
.ui-site .ui-hero-sub { margin-top: 16px; color: rgba(233, 241, 253, .88); font-size: 20px; line-height: 1.6; }

.ui-site .ui-hero-search {
    /* 固定宽度：检索范围文案长短、首屏栏宽变化都不再改变检索框宽度（窄屏由 max-width 兜底） */
    display: flex; align-items: stretch; gap: 8px; width: 660px; max-width: 100%; margin-top: 28px; padding: 6px;
    background: rgba(255, 255, 255, .98); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
}
/* 定宽 144px：容纳最长分类（6 字，如「化学品数据库」= 90px 文案 + 12px 间距 + 12px 箭头 + 28px 内边距）。
   若只按 min-width 走，「设备与安全」（5 字，需 127px）会顶破 124px 的预留值，切换分类时输入区随之左右偏移。 */
.ui-site .ui-hero-search-scope { position: relative; display: flex; align-items: center; flex: 0 0 144px; width: 144px; }
.ui-site .ui-hero-search-scope .head-scope-trigger {
    justify-content: space-between; gap: 12px; width: 100%; min-width: 0;
    height: 48px; min-height: 48px; padding: 0 14px;
    color: var(--color-text-secondary); background-color: transparent;
    border: 0; border-radius: var(--radius-sm); font-size: 15px;
    cursor: pointer;
}
/* 与头部一致：译文/超长文案在定宽内省略，箭头位置固定，不再撑开触发器 */
.ui-site .ui-hero-search-scope .head-scope-label {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.ui-site .ui-hero-search-scope .head-scope-menu {
    top: calc(100% + 12px); min-width: max(176px, 100%);
}
.ui-site .ui-hero-search-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.ui-site .ui-hero-search-icon { position: absolute; left: 12px; width: 19px; height: 19px; color: var(--color-text-disabled); pointer-events: none; }
.ui-site .ui-hero-search-field input {
    width: 100% !important; height: 48px !important; min-height: 48px !important;
    padding: 0 14px 0 42px !important;
    color: var(--color-text) !important; background: transparent !important;
    border: 0 !important; border-radius: var(--radius-md) !important; box-shadow: none !important;
    font-size: 17px;
}
.ui-site .ui-hero-search-field input::placeholder { color: var(--color-text-disabled); }
.ui-site .ui-hero-search-submit {
    flex: 0 0 auto; min-width: 108px; min-height: 48px; padding: 0 24px;
    color: #FFFFFF; background: var(--color-primary); border: 0; border-radius: var(--radius-md);
    font-size: 16px; font-weight: 600; letter-spacing: .04em; cursor: pointer; transition: background-color .2s;
}
.ui-site .ui-hero-search-submit:hover { background: var(--color-primary-hover); }

.ui-site .ui-hero-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.ui-site .ui-hero-terms-label { color: rgba(233, 241, 253, .72); font-size: 14px; }
.ui-site .ui-hero-term {
    padding: 6px 12px; color: #E4EDFB; font-size: 13px;
    background: rgba(255, 255, 255, .12); border: 1px solid transparent;
    border-radius: var(--radius-md); transition: background-color .2s, color .2s;
}
.ui-site .ui-hero-term:hover { color: #FFFFFF; background: rgba(255, 255, 255, .24); }

/* 12.2 首屏态势卡（深色玻璃卡，压在首屏背景图上） */
.ui-site .ui-situation {
    padding: 20px 22px 16px; color: #DCE7F9;
    background: rgba(9, 26, 54, .82);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-panel);
    box-shadow: 0 20px 44px rgba(2, 10, 26, .42);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ui-site .ui-situation-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui-site .ui-situation-head h2 { color: #FFFFFF; font-size: 20px; }
.ui-site .ui-situation-asof { color: rgba(226, 235, 250, .62); font-size: 12px; }
.ui-site .ui-situation-summary {
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 18px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.ui-site .ui-situation-total { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ui-site .ui-situation-total strong { color: #FFFFFF; font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ui-site .ui-situation-unit { display: flex; align-items: flex-start; gap: 16px; }
.ui-site .ui-situation-unit-top { color: rgba(232, 240, 252, .92); font-size: 15px; line-height: 1.3; }
.ui-site .ui-trend { display: inline-flex; flex-direction: column; gap: 1px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-site .ui-trend.is-up { color: #FF9081; }
.ui-site .ui-trend.is-down { color: #74E8AE; }
.ui-site .ui-trend.is-flat { color: rgba(226, 235, 250, .72); }
.ui-site .ui-trend-note { color: rgba(226, 235, 250, .52); font-size: 11px; font-weight: 400; }
.ui-site .ui-situation-block + .ui-situation-block { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); }
.ui-site .ui-situation-block--types {
    margin-top: 0; padding-top: 0; padding-left: 18px;
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, .12);
}
.ui-site .ui-situation-subtitle { color: rgba(226, 235, 250, .74); font-size: 12px; font-weight: 600; letter-spacing: .06em; }
.ui-site .ui-situation-types { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.ui-site .ui-donut {
    position: relative; flex-shrink: 0; width: 96px; height: 96px; border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 27%);
    mask: radial-gradient(circle, transparent 0 26%, #000 27%);
}
.ui-site .ui-donut span { display: none; }
.ui-site .ui-type-legend { display: grid; gap: 9px; flex: 1; min-width: 0; }
.ui-site .ui-type-legend li { display: flex; align-items: center; gap: 8px; color: rgba(232, 240, 252, .9); font-size: 12px; }
.ui-site .ui-type-legend i { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; }
.ui-site .ui-type-legend span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-site .ui-type-legend b { color: #FFFFFF; font-variant-numeric: tabular-nums; }
.ui-site .ui-region-list { display: grid; gap: 9px; margin-top: 10px; }
.ui-site .ui-region-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 34px 46px; align-items: center; gap: 8px; font-size: 12px; }
.ui-site .ui-region-name { color: rgba(232, 240, 252, .9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-site .ui-region-bar { height: 8px; background: rgba(255, 255, 255, .14); border-radius: var(--radius-pill); overflow: hidden; }
.ui-site .ui-region-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #4D8BEF 0%, #2E90FA 100%); }
.ui-site .ui-region-count { color: #FFFFFF; text-align: right; font-variant-numeric: tabular-nums; }
.ui-site .ui-region-pct { color: rgba(226, 235, 250, .62); text-align: right; font-variant-numeric: tabular-nums; }
.ui-site .ui-situation .ui-empty { color: rgba(226, 235, 250, .62); }
.ui-site .ui-situation-more {
    display: flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 14px; padding-top: 12px;
    color: #A8C4F2; font-size: 13px; font-weight: 500;
    border-top: 1px solid rgba(255, 255, 255, .12); transition: color .2s;
}
.ui-site .ui-situation-more span { transition: transform .2s; }
.ui-site .ui-situation-more:hover { color: #FFFFFF; }
.ui-site .ui-situation-more:hover span { transform: translateX(3px); }
/* 12.3 首屏焦点条（后台轮播的标题 / 跳转 / 视频） */
.ui-site .ui-hero-focus {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12);
}
.ui-site .ui-hero-focus-label { color: rgba(226, 235, 250, .58); font-size: 12px; letter-spacing: .1em; }
.ui-site .ui-focus-item {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px;
    padding: 4px 12px; color: #D5E3F8; font-size: 12px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-md); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.ui-site .ui-focus-item:hover { color: #FFFFFF; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
.ui-site .ui-focus-item.is-active { color: #FFFFFF; background: rgba(21, 94, 239, .6); border-color: rgba(255, 255, 255, .34); }
.ui-site .ui-focus-item svg { width: 11px; height: 11px; flex-shrink: 0; }
/* 12.4 核心业务入口 */
.ui-site .ui-entries { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ui-site .ui-entry {
    display: flex; align-items: center; gap: 12px; padding: 18px 16px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ui-site .ui-entry:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ui-site .ui-entry-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; color: #FFFFFF; border-radius: var(--radius-card); }
.ui-site .ui-entry-icon svg { width: 22px; height: 22px; }
.ui-site .ui-entry-icon--danger { background: var(--color-danger); }
.ui-site .ui-entry-icon--success { background: var(--color-success); }
.ui-site .ui-entry-icon--primary { background: var(--color-primary); }
.ui-site .ui-entry-icon--info { background: #7F56D9; }
.ui-site .ui-entry-icon--secondary { background: var(--color-secondary); }
.ui-site .ui-entry-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ui-site .ui-entry-text strong { color: var(--color-heading); font-size: 16px; font-weight: 600; }
.ui-site .ui-entry-text small { color: var(--color-text-secondary); font-size: 13px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-site .ui-entry-arrow { flex-shrink: 0; color: var(--color-text-disabled); font-size: 18px; }
.ui-site .ui-entry:hover .ui-entry-arrow { color: var(--color-primary); }
/* 12.5 宣传位（内容来自后台配置） */
.ui-site .ui-promo { margin-top: 24px; }
.ui-site .ui-promo-inner {
    display: flex; flex-direction: column; gap: 8px; padding: 26px 32px;
    background: linear-gradient(120deg, #0B2347 0%, #16407A 60%, #0B2347 100%);
    border-radius: var(--radius-panel);
}
.ui-site .ui-promo-inner :is(h1, h2, h3) { color: #FFFFFF; font-size: 22px; font-weight: 600; line-height: 1.4; }
.ui-site .ui-promo-inner :is(h1, h2, h3) em { display: block; margin-top: 6px; color: #9FC0F2; font-size: 14px; font-weight: 400; }
.ui-site .ui-promo-inner p { color: #CBD9F0; font-size: 14px; line-height: 1.7; }
.ui-site .ui-promo-inner a { color: #8FC0FF; }

/* 12.6 内容矩阵 */
.ui-site .ui-home-grid {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.06fr) minmax(0, .96fr);
    gap: 24px; align-items: start; margin-top: 24px;
}
.ui-site .ui-home-grid > * { min-width: 0; }
.ui-site .ui-home-col { display: grid; gap: 24px; align-content: start; }
.ui-site .ui-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.ui-site .ui-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--color-border); }
.ui-site .ui-panel-head h2 { font-size: 20px; }
.ui-site .ui-panel-more { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; color: var(--color-text-secondary); font-size: 13px; white-space: nowrap; }
.ui-site .ui-panel-more:hover { color: var(--color-primary); }
.ui-site .ui-panel-more span { font-size: 15px; line-height: 1; }
.ui-site .ui-empty { padding: 28px 20px; color: var(--color-text-secondary); font-size: 14px; text-align: center; }
.ui-site .ui-empty--sm { padding: 10px 0; font-size: 13px; text-align: left; }

/* 最新事故：等级徽标 + 标题 / 元信息 / 伤亡统计 */
.ui-site .ui-incident-list li + li { border-top: 1px solid var(--color-border); }
.ui-site .ui-incident-list a {
    display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 14px; align-items: start;
    padding: 18px 22px; transition: background-color .2s;
}
.ui-site .ui-incident-list a:hover { background: var(--color-page-bg); }
.ui-site .ui-incident-top { grid-column: 1; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-site .ui-level {
    min-width: 66px; padding: 3px 8px; color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 20px;
    text-align: center; border-radius: var(--radius-sm);
}
.ui-site .ui-level--special { background: #7A271A; }
.ui-site .ui-level--major { background: var(--color-danger-strong); }
.ui-site .ui-level--large { background: var(--color-warning-strong); }
.ui-site .ui-level--general { background: var(--color-primary); }
.ui-site .ui-tag { padding: 2px 8px; color: var(--color-text-secondary); font-size: 12px; background: var(--color-page-bg); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ui-site .ui-tag--success { color: var(--color-secondary-strong); background: var(--color-secondary-soft); border-color: #A3E2D8; }
.ui-site .ui-tag--warning { color: var(--color-warning-strong); background: var(--color-warning-soft); border-color: var(--color-warning-border); }
.ui-site .ui-incident-title {
    grid-column: 2; grid-row: 1; margin: 0; color: var(--color-heading); font-size: 16px; font-weight: 600; line-height: 1.45;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    text-wrap: pretty;
}
.ui-site .ui-incident-meta { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; color: var(--color-text-secondary); font-size: 13px; }
.ui-site .ui-incident-meta span + span::before { content: "·"; margin-right: 8px; color: var(--color-text-disabled); }
.ui-site .ui-incident-stats { grid-column: 2; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; color: var(--color-text); font-size: 13px; }
.ui-site .ui-incident-stats span { display: inline-flex; align-items: center; gap: 6px; }
.ui-site .ui-incident-stats svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-text-disabled); }
.ui-site .ui-incident-stats b { color: var(--color-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-site .ui-incident-stats span:first-child b { color: var(--color-danger-strong); }

/* 热门化学品：三列卡片。栏目窄（卡内可用文字宽度约 85~110px），
   因此卡内每一行都按「单行不折断」处理：放得下走一行，放不下整块换行或省略，
   不出现「浏览 / 2688」「会员资 / 源」这类把词拆成两行的情况。 */
.ui-site .ui-chemical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 22px 20px; }
.ui-site .ui-chemical-grid > li { min-width: 0; }
.ui-site .ui-chemical-card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color .2s, box-shadow .2s; }
.ui-site .ui-chemical-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.ui-site .ui-chemical-glyph { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 38px; color: var(--color-text-disabled); }
.ui-site .ui-chemical-glyph svg { width: 42px; height: 32px; }
/* margin-bottom:auto：名称之后的空白全部吃掉，让 CAS 与底栏在各卡片间对齐 */
.ui-site .ui-chemical-name {
    margin-bottom: auto; color: var(--color-heading); font-size: 14px; font-weight: 600; line-height: 1.45;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow-wrap: break-word; text-wrap: pretty;
}
.ui-site .ui-mono { color: var(--color-text-secondary); font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace; font-size: 12px; }
/* CAS 号 / 分子式：只占一行（有 CAS 显示 CAS，否则退回分子式），
   过长时末尾省略，悬停看完整值，绝不在号码中间断行 */
.ui-site .ui-chemical-meta { display: flex; align-items: center; min-width: 0; }
.ui-site .ui-chemical-meta .ui-mono {
    max-width: 100%; font-size: 11px; line-height: 1.5; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-site .ui-chemical-meta .ui-mono b { margin-right: 3px; color: var(--color-text-disabled); font-family: var(--font-family); font-size: 10px; font-weight: 500; letter-spacing: 0; }
/* 底栏：价格标签与浏览量各自不折行，宽度不够时整块换到下一行 */
.ui-site .ui-chemical-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; }
.ui-site .ui-chemical-foot .ui-tag { flex-shrink: 0; padding: 1px 6px; font-size: 11px; line-height: 1.7; white-space: nowrap; }
.ui-site .ui-chemical-views { display: inline-flex; align-items: center; flex-shrink: 0; gap: 3px; color: var(--color-text-secondary); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-site .ui-chemical-views svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--color-text-disabled); }

/* 热门安全工具：三列卡片。图标改为置顶，标题与说明可用整卡宽度，
   否则左侧图标占去 48px 后只剩 40px 左右，工具名会被挤成「惰性化 / 计算」。 */
.ui-site .ui-tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px 22px 20px; }
.ui-site .ui-tool-grid > li { min-width: 0; }
.ui-site .ui-tool-card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color .2s, box-shadow .2s; }
.ui-site .ui-tool-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.ui-site .ui-tool-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-md); }
.ui-site .ui-tool-icon svg { width: 17px; height: 17px; }
.ui-site .ui-tool-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
/* 行数上限按真实标题长度定（实际 5~20 字、约 7 字/行）：3 行基本不会触发，
   只用于兜住后台偶发的超长标题，避免把整行卡片撑高 */
.ui-site .ui-tool-name {
    margin-bottom: auto; color: var(--color-heading); font-size: 14px; font-weight: 600; line-height: 1.45;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow-wrap: break-word; text-wrap: pretty;
}
.ui-site .ui-tool-desc {
    color: var(--color-text-secondary); font-size: 12px; line-height: 1.5;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow-wrap: break-word;
}
.ui-site .ui-tool-meta { margin-top: auto; color: var(--color-text-disabled); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 首页卡片网格的窄屏回退：≤1000px 时中间栏只有 360~460px，三列会把卡片压到
   70~85px，故降为两列（与 H5 下的表现一致）。 */
@media (max-width: 1000px) {
    .ui-site .ui-chemical-grid, .ui-site .ui-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .ui-site .ui-chemical-grid, .ui-site .ui-tool-grid { gap: 10px; padding: 12px 16px 16px; }
}

/* 最新标准 · 文库 */
.ui-site .ui-doc-list li + li { border-top: 1px solid var(--color-border); }
.ui-site .ui-doc-list a { display: flex; align-items: center; gap: 12px; padding: 14px 22px; transition: background-color .2s; }
.ui-site .ui-doc-list a:hover { background: var(--color-page-bg); }
.ui-site .ui-doc-tag { flex-shrink: 0; max-width: 92px; padding: 3px 8px; color: #FFFFFF; font-size: 12px; font-weight: 500; background: var(--color-primary); border-radius: var(--radius-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-site .ui-doc-title { flex: 1; min-width: 0; color: var(--color-heading); font-size: 14px; font-weight: 500; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-site .ui-doc-list a:hover .ui-doc-title { color: var(--color-primary); }
.ui-site .ui-doc-date { flex-shrink: 0; color: var(--color-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 全国化工事故地图 */
.ui-site .ui-map-wrap { position: relative; padding: 6px 0 12px; }
.ui-site .ui-map { width: 100%; height: 292px; }
.ui-site .ui-map-total { margin-left: auto; margin-right: 10px; color: var(--color-text-secondary); font-size: 12px; white-space: nowrap; }
.ui-site .ui-map-total b { color: var(--color-primary); font-variant-numeric: tabular-nums; }
.ui-site .ui-map-legend {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    display: grid; gap: 12px; min-width: 122px; padding: 14px 16px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
}
.ui-site .ui-map-legend[hidden] { display: none; }
.ui-site .ui-map-legend li { display: flex; align-items: center; gap: 10px; color: var(--color-text); font-size: 14px; }
.ui-site .ui-map-legend i { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; }
.ui-site .ui-map-fallback { display: flex; align-items: center; justify-content: center; height: 100%; padding: 20px; color: var(--color-text-secondary); font-size: 13px; text-align: center; }

/* 行业安全服务 */
.ui-site .ui-service-body { display: flex; gap: 16px; padding: 18px 22px 22px; }
.ui-site .ui-service-photo { display: block; width: 132px; height: 132px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-md); }
.ui-site .ui-service-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* 标题 14px：桌面下「为企业提供专业的化工安全解决方案」可一行放下，不再把「案」挤到第二行 */
.ui-site .ui-service-title { color: var(--color-heading); font-size: 14px; font-weight: 600; line-height: 1.55; text-wrap: pretty; }
.ui-site .ui-service-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; }
.ui-site .ui-service-list a { position: relative; display: block; padding: 2px 0 2px 12px; color: var(--color-text); font-size: 13px; line-height: 1.5; }
.ui-site .ui-service-list a::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; background: var(--color-secondary); border-radius: 50%; }
.ui-site .ui-service-list a:hover { color: var(--color-primary); }
.ui-site .ui-service-btn {
    align-self: flex-start; min-height: 38px; padding: 7px 24px;
    color: #FFFFFF; font-size: 14px; font-weight: 600;
    background: var(--color-primary); border-radius: var(--radius-md);
    transition: background-color .2s;
}
.ui-site .ui-service-btn:hover { color: #FFFFFF; background: var(--color-primary-hover); }

/* 最新动态 */
.ui-site .ui-panel--feed { margin-top: 24px; }
.ui-site .ui-feed-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.ui-site .ui-feed-list li { border-top: 1px solid var(--color-border); }
.ui-site .ui-feed-list li:nth-child(-n+2) { border-top: 0; }
.ui-site .ui-feed-list a { display: flex; align-items: center; gap: 10px; padding: 14px 22px; transition: background-color .2s; }
.ui-site .ui-feed-list a:hover { background: var(--color-page-bg); }
.ui-site .ui-feed-tag { flex-shrink: 0; padding: 3px 8px; color: var(--color-secondary-strong); font-size: 12px; background: var(--color-secondary-soft); border-radius: var(--radius-sm); }
.ui-site .ui-feed-title { flex: 1; min-width: 0; color: var(--color-text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-site .ui-feed-list a:hover .ui-feed-title { color: var(--color-primary); }
.ui-site .ui-feed-date { flex-shrink: 0; color: var(--color-text-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }

/* 12.7 轮播视频播放层 */
.ui-site .ui-video-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 20, 40, .78); }
.ui-site .ui-video-modal[hidden] { display: none; }
.ui-site .ui-video-dialog { position: relative; width: min(960px, 100%); }
.ui-site .ui-video-dialog video { display: block; width: 100%; max-height: 76vh; background: #000000; border-radius: var(--radius-card); }
.ui-site .ui-video-close { position: absolute; top: -42px; right: 0; width: 34px; height: 34px; color: #FFFFFF; background: rgba(255, 255, 255, .16); border: 0; border-radius: 50%; font-size: 14px; cursor: pointer; }
.ui-site .ui-video-close:hover { background: rgba(255, 255, 255, .32); }

/* 12.8 其它页面仍在使用的首页遗留模块 */
.ui-site .PubName { padding: 16px 24px; color: var(--color-heading); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.ui-site .PubName span { font-size: 18px; font-weight: 600; }
.ui-site .PubName > .flex > img { display: none; }
.ui-site .PubName > a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; color: var(--color-text-secondary); background: var(--color-page-bg); border-radius: var(--radius-sm); }
.ui-site .HotWord { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ui-site .IndexSix .swiper-slide { height: calc((100% - 25px) / 2) !important; }
/* 13. 列表页 ------------------------------------------------------------- */
.ui-site .PublicMain > .box > .flex.between.wap-flex-wrap { gap: 24px; align-items: flex-start; }
.ui-site :is(.MainLeft, .MainRight, .MainNav, .MainTool, .MainLibrary, .MainCourse, .AccRight, .RewardMain) { min-width: 0; }
.ui-site .PublicMain .MainLeft, .ui-site .PublicMain .w975 { flex: 1 1 auto; width: auto; }
.ui-site .PublicMain .MainRight, .ui-site .PublicMain .w475 { flex: 0 0 360px; width: 360px; }
.ui-site .PublicMain .MainNav.w415 { flex: 0 0 300px; width: 300px; }
.ui-site .PublicMain :is(.MainTool, .MainLibrary, .MainCourse).w1035 { flex: 1 1 auto; width: auto; }
.ui-site :is(.MainLeft, .MainRight, .AccRight) > .BgWhite:not(.DownNav) { padding: 24px; }
.ui-site .PublicMain .MainLeft.Accent { padding: 24px; }

/* 列表条目容器 */
.ui-site .Accent { display: flex; flex-direction: column; }
.ui-site .Accent > dl { border-bottom: 1px solid var(--color-border); }
.ui-site .Accent > dl:last-of-type { border-bottom: 0; }
.ui-site .Accent dl a { display: flex; gap: 20px; padding: 20px 0; }
.ui-site .Accent dl dt { width: 200px; height: 132px; flex-shrink: 0; overflow: hidden; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .Accent dl dt img { width: 100%; height: 100%; object-fit: cover; }
.ui-site .Accent dl dd { flex: 1; min-width: 0; }
.ui-site .Accent dl dd h2 { margin-bottom: 8px; font-size: 18px; line-height: 1.5; }
.ui-site .Accent dl dd h2 a:hover { color: var(--color-primary); }
.ui-site .Accent dl dd :is(h2, .CnEn) { white-space: normal; overflow-wrap: anywhere; }

.ui-site .Chem > .flex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ui-site .Chem dl { align-self: stretch; width: auto; margin: 0; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ui-site .Chem dl a { display: flex; gap: 16px; }
.ui-site .Chem dl dt { width: 128px; height: 128px; flex-shrink: 0; overflow: hidden; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .Chem dl dt img { width: 100%; height: 100%; object-fit: contain; }
.ui-site .Chem dl dd { flex: 1; min-width: 0; }
.ui-site .Chem dl dd h2 { white-space: normal; overflow-wrap: anywhere; }

.ui-site .MainTool.MainMent > .flex { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ui-site .MainTool.MainMent > .flex > dl { width: auto; margin: 0; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ui-site .MainTool.MainMent dl dd { width: 100%; padding: 0; }
.ui-site .MainTool.MainMent dl dd h2 { white-space: normal; }
.ui-site .MainTool .equip-cover { width: 120px; height: 90px; flex-shrink: 0; margin: 0; overflow: hidden; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .MainTool .equip-cover img { width: 100%; height: 100%; object-fit: cover; }
.ui-site .MainTool .equip-info { flex: 1; min-width: 0; }
.ui-site .MainTool dd.flex { display: flex; gap: 12px; align-items: flex-start; }

.ui-site .MainLibrary > .flex, .ui-site .MainCourse > .flex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ui-site .MainLibrary > .flex > dl, .ui-site .MainCourse > .flex > dl { width: auto; margin: 0; padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ui-site .MainLibrary dl a, .ui-site .MainCourse dl a { display: flex; gap: 16px; }
.ui-site .MainLibrary dl dt { width: 100px; height: 120px; flex-shrink: 0; overflow: hidden; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .MainLibrary dl dt img { width: 100%; height: 100%; object-fit: contain; }
.ui-site .MainLibrary dl dd, .ui-site .MainCourse dl dd { flex: 1; min-width: 0; width: auto; }
.ui-site .MainLibrary dl dd h2, .ui-site .MainCourse dl dd h2 { white-space: normal; overflow-wrap: anywhere; }

/* 筛选面板 */
.ui-site .MoreForm { display: flex; flex-wrap: wrap; gap: 12px; }
.ui-site .MoreForm .layui-inline { margin: 0 !important; min-width: 0; }
.ui-site .MoreForm :is(.w33, .w475) { flex: 1 1 200px; }
.ui-site :is(.layui-input, .layui-select, .select) {
    width: 100%; max-width: 100%; min-height: 40px; height: auto; padding: 8px 12px;
    color: var(--color-text); background-color: var(--color-surface);
    border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
    line-height: 1.4;
}
.ui-site :is(.layui-input, .layui-select):focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(21, 94, 239, .12); }
.ui-site .xm-tips { color: var(--color-text-secondary); }
.ui-site .field-clear-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; line-height: 18px; color: var(--color-text-disabled); text-align: center; background: var(--color-page-bg); border-radius: 50%; cursor: pointer; }
.ui-site .wap_show_show { color: var(--color-primary); font-size: 14px; }

/* 事故地图 */
.ui-site .incident-map-wrap { overflow: hidden; }
.ui-site .incident-map-wrap > .flex { padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.ui-site #incident-map { width: 100%; height: 350px; }
.ui-site #map-filter-hint { display: flex; align-items: center; gap: 8px; padding: 10px 20px; color: var(--color-danger); font-size: 13px; background: #FDECEB; border-top: 1px solid #FBC4C4; }
.ui-site #map-filter-clear { color: var(--color-primary); }

/* 14. 详情页 ------------------------------------------------------------- */
.ui-site .ContMain { padding: 32px; }
.ui-site .ContMain .Name { padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.ui-site .ContMain .Name :is(h1, h2) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 28px; line-height: 1.5; }
.ui-site .ContMain .Name :is(h1, h2) span { overflow-wrap: anywhere; }
.ui-site .ContMain .Name .PubTimer { margin-top: 12px; }
.ui-site .ContPub { margin-top: 8px; }
.ui-site .MainTest { max-width: 860px; margin-inline: auto; padding-bottom: 8px; color: var(--color-text); font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
.ui-site .MainTest :is(h1, h2, h3, h4) { margin: 24px 0 12px; }
.ui-site .MainTest p { margin: 12px 0; }
.ui-site .MainTest img, .ui-site .MainTest video, .ui-site .MainTest iframe { max-width: 100%; height: auto; margin: 12px 0; border-radius: var(--radius-md); }
.ui-site .MainTest table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; }
.ui-site .MainTest blockquote { margin: 16px 0; padding: 12px 20px; color: var(--color-text-secondary); background: var(--color-page-bg); border-left: 3px solid var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.ui-site .MainTest pre, .ui-site .MainTest code { background: var(--color-page-bg); border-radius: var(--radius-sm); }
.ui-site .MainTest pre { padding: 16px; overflow-x: auto; }
.ui-site .MainTest a { color: var(--color-primary); text-decoration: underline; }
.ui-site .Table.flex.between.flex-wrap { gap: 16px; }
.ui-site .Video dl { display: flex; flex-wrap: wrap; gap: 16px; }
.ui-site .Video dt { width: 220px; height: 140px; flex-shrink: 0; overflow: hidden; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .Video dt img { width: 100%; height: 100%; object-fit: cover; }
.ui-site .Video dd { flex: 1; min-width: 220px; }

/* 详情页侧栏：解锁 / 下载 */
.ui-site .MainRight .IndexSelect { padding: 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.ui-site :is(.Unlock, .UnlockPop) { text-align: center; }
.ui-site .member-tag { margin: 0 4px 8px 0; }
.ui-site .payment-options { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ui-site .UnlockPop { display: block; padding: 12px 20px; color: #fff; font-size: 15px; font-weight: 600; background: var(--color-primary); border-radius: var(--radius-md); cursor: pointer; }
.ui-site .UnlockPop:hover { background: var(--color-primary-hover); }
.ui-site .UnlockPop.wallet-pay { background: var(--color-secondary); }
.ui-site .Unlock dl { color: var(--color-text); }
.ui-site .Unlock dl dt span:not([class]) { color: var(--color-danger-strong); font-weight: 700; }
.ui-site .Fixed dl { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.ui-site .Fixed dl:last-child { border-bottom: 0; }
.ui-site .Fixed dt { color: var(--color-text-secondary); font-size: 13px; margin-bottom: 6px; }
.ui-site .Fixed dd a { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary); font-size: 14px; }

/* 15. 求助悬赏 ----------------------------------------------------------- */
.ui-site .Reward { padding-bottom: 24px; }
.ui-site .Reward .Where { padding: 8px; margin-bottom: 24px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.ui-site .Reward .Where > .box > .flex { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-site .RewardMain { flex: 1 1 auto; width: auto; }
.ui-site .RewardNav { flex: 0 0 360px; width: 360px; }
.ui-site .Reward .RewardMain .Main { padding: 24px; }
.ui-site .Reward .RewardMain .Main + .Main { margin-top: 16px; }
.ui-site .Reward .RewardMain .Main :is(h1, h2) { font-size: 20px; }
.ui-site .Reward .RewardMain :is(.Adoption, .adoption) { padding: 4px 12px; color: var(--color-success); font-size: 13px; background: #E7F8EF; border-radius: var(--radius-pill); cursor: pointer; }
.ui-site .Reward .take { display: flex; align-items: center; gap: 12px; padding: 8px 0 16px; border-bottom: 1px solid var(--color-border); }
.ui-site .Reward .take img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ui-site .Reward .Answer .BgWhite { padding: 20px; }
.ui-site .Reward .Answer .textarea { width: 100%; min-height: 120px; }
.ui-site .Reward .Answer .Bold { display: flex; justify-content: flex-end; padding-top: 12px; }
.ui-site .Reward .Answer .PayCk { display: inline-flex; align-items: center; min-height: 40px; padding: 0 24px; color: #fff; font-size: 15px; background: var(--color-primary); border-radius: var(--radius-md); cursor: pointer; }
.ui-site .RewardNav .RewardNume { padding: 20px; }
.ui-site .RewardNav .RewardNume > a, .ui-site .RewardNav :is(.PopTxt, .PopDelete) { display: block; padding: 12px 16px; color: #fff; font-size: 15px; font-weight: 600; text-align: center; background: var(--color-primary); border-radius: var(--radius-md); cursor: pointer; }
.ui-site .RewardNav .TowBtn { margin-top: 12px; }
.ui-site .RewardNav .TowBtn a { padding: 10px 16px; color: var(--color-text-secondary); font-size: 14px; background: var(--color-page-bg); }
.ui-site .RewardNav .TowBtn a:hover { color: var(--color-primary); }
.ui-site .AddAdd { margin-top: 16px; overflow: hidden; }
.ui-site .AddAdd .BgWhite { padding: 20px; }
.ui-site .AddAdd .Ranking dl, .ui-site .AddAdd .AskList dl { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.ui-site .AddAdd .Ranking dl:last-child, .ui-site .AddAdd .AskList dl:last-child { border-bottom: 0; }
.ui-site .AddAdd .Ranking dd h2, .ui-site .AddAdd .AskList dd h2 { font-size: 15px; font-weight: 500; }
.ui-site #gallery { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.ui-site .pswp-gallery__item img { border-radius: var(--radius-md); }
.ui-site .Mask { position: fixed; inset: 0; z-index: 11000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(11, 35, 71, .48); }
.ui-site .Mask.cur { display: flex; }
.ui-site .Mask > .box { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; background: var(--color-surface); border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); }

/* 16. 服务范围 ----------------------------------------------------------- */
.ui-site #Service { padding-bottom: 24px; }
.ui-site #Service > .box > .flex { gap: 24px; align-items: flex-start; }
.ui-site .contact-card { padding: 24px; }
.ui-site .contact-head { margin-bottom: 16px; color: var(--color-heading); font-size: 20px; font-weight: 600; }
.ui-site .contact-form { display: flex; flex-direction: column; gap: 16px; }
.ui-site .contact-tip { color: var(--color-text-secondary); font-size: 13px; }

/* 17. 事故统计 ----------------------------------------------------------- */
.ui-site .stat-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 16px 20px; margin-bottom: 24px; background: var(--color-surface); }
.ui-site .stat-upgrade-banner { padding: 32px 24px; margin-bottom: 24px; color: #fff; background: linear-gradient(120deg, var(--color-heading), #17407C); border-radius: var(--radius-panel); }
.ui-site .stat-upgrade-banner :is(h2, .banner-title) { color: #fff; font-size: 22px; line-height: 1.35; }
.ui-site .stat-upgrade-banner :is(p, .banner-desc) { margin-top: 8px; color: #C9D6EA; font-size: 15px; }
.ui-site .banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.ui-site .banner-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 24px; font-size: 15px; font-weight: 600; border-radius: var(--radius-md); }
.ui-site .banner-btn.primary { color: #fff; background: var(--color-primary); }
.ui-site .banner-btn.primary:hover { color: #fff; background: var(--color-primary-hover); }
.ui-site .banner-btn.ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
.ui-site .banner-btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.ui-site .stat-charts-wrap { position: relative; }
.ui-site .stat-charts-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.ui-site .stat-chart-updating { margin-top: 8px; color: var(--color-warning-strong); font-size: 12px; text-align: center; }

/* 18. 登录 / 注册 / 找回密码 -------------------------------------------- */
.ui-site .LoginMain {
    width: min(460px, calc(100% - 32px));
    margin: 64px auto; overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border); border-radius: var(--radius-panel);
    box-shadow: var(--shadow-md);
}
.ui-site .LoginMain .Title { padding: 32px 32px 0; background: transparent; color: var(--color-heading); font-size: 24px; font-weight: 700; text-align: center; }
.ui-site .LoginMain > .BgWhite { padding: 24px 32px 32px; }
.ui-site .LoginMain dl { margin-bottom: 16px; }
.ui-site .LoginMain dl dt { margin-bottom: 6px; color: var(--color-text); font-size: 14px; }
.ui-site .LoginMain dl dd { width: 100%; }
.ui-site .LoginMain .text { width: 100%; min-height: 44px; }
.ui-site .LoginMain .Btn { width: 100%; min-height: 44px; }

/* 注册页图形验证码行（.captcha-row）：图片贴在输入框内的右端，高度恒等于输入框高度，
   与下面「验证码」行的 #sms_code + 获取验证码按钮（.postion + .Button{position:absolute}）同一套机制。

   原先图片写死内联的 height:2.7vw/width:7vw，两个毛病都来自 vw：
   宽屏下 2.7vw 超过输入框高度（图片顶出输入框），H5 下 2.7vw 在 390px 只有 10px 高、字号 30 的验证码看不清；
   而且 240×75 的原图被拉成 7:2.7 ≈ 2.6 的比例，失真。根因是输入框高度本身不是定值 ——
   它由 less.less 的 padding: var(--margin-25)（= 1.302vw，≤800px 换成 .333rem）撑高，
   1000px 以上随视口线性增长、以下被上面那条 min-height:44px 兜平，所以照 vw 硬配比例必然对不上。

   这里改为让图片取输入框的高度：dd 用 flex 让输入框成为唯一流内子项
   （不用 flex 的话输入框作为行内块会在基线下方多出几像素，dd 会比输入框高），
   图片绝对定位 top:0/bottom:0，高度就等于 dd 的高度、也就是输入框高度，任何宽度下都一致；
   宽度给 auto，由原图 240:75 = 3.2 的比例自动得出，永不失真。全程不写死任何像素高度。 */
.ui-site .LoginMain .captcha-row { position: relative; display: flex; }
.ui-site .LoginMain .captcha-row > .text {
    flex: 1 1 auto; min-width: 0;
    /* 右侧给验证码让位 = 验证码高度 × 3.2 + 间距（高度估算同下）。
       必须 !important：§4 那条全局输入框规则的权重是 (0,6,1)，压过这里的 (0,4,0)，
       不加就是死声明（同 7.4 的说明）。 */
    padding-right: calc(max(44px, 2 * var(--margin-25, 6px) + 20px) * 3.2 + 10px) !important;
}
.ui-site .LoginMain .captcha-row > img {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: block; height: 100%; width: auto;
    border-radius: var(--radius-sm); cursor: pointer;
}

/* 「获取验证码」按钮（注册页 / 忘记密码页手机、邮箱共 3 处，都是 dd.postion + input.text + button.Button）。
   与上面图形验证码同一套尺寸办法：上下贴边 → 高度恒等于输入框高度，右侧圆角取 var(--margin-5)
   与输入框的 .radiused() 一致，内边距改成固定值 → 宽度不再随视口变。

   原来它是 less.less 的 .Button：position:absolute; right:0，而内边距 padding: var(--margin-15) var(--margin-20)
   是 vw 驱动的，于是桌面端约 42px 高（比 54~67px 的输入框矮一截、还顶对齐），
   H5 下靠 ≤800 那条触摸目标规则强制 min-height:44px 才勉强和 44px 输入框齐平 ——
   同一个按钮在两种屏幕下高度来源不同、宽度也跟着 vw 变，就是「时大时小」的来源。 */
.ui-site .LoginMain .postion { display: flex; } /* 输入框作为行内块会在基线下多出几像素，dd 会比输入框高 */
.ui-site .LoginMain .postion > .text {
    /* 右侧给按钮让位：16px×2 内边距 + 「获取验证码」5 字 70px ≈ 102px，
       留到 132px 是为了倒计时文案变长后（「60s后重新获取」约 125px）文字仍不会钻到按钮下面。
       必须 !important：§4 那条全局输入框规则的权重是 (0,6,1)，压过这里的 (0,4,0)（同 7.4 的说明）。 */
    padding-right: 132px !important;
}
.ui-site .LoginMain .postion > .Button {
    position: absolute; top: 0; right: 0; bottom: 0;
    min-height: 0;   /* 压掉 ≤800 的触摸目标 min-height:44px：高度已由上下贴边决定，两者叠加会互相打架 */
    margin: 0; padding: 0 16px;
    display: inline-flex; align-items: center; justify-content: center;
    white-space: nowrap;
    border-radius: 0 var(--margin-5, 6px) var(--margin-5, 6px) 0;
}

/* 「您的身份」共用一个 dl.flex 行，dt 会被折成两行（截图里的「您的身 / 份」）：
   上面 .LoginMain dl dd { width: 100% } 让 dd 吃满整行，dt 于是被压到最小内容宽度，
   而中文可在任意字间断行、min-content 只有一个字。禁止 dt 收缩并禁止折行即可，
   剩余宽度仍由 dd 占据（选项之间那个 --margin-80 的大间距在窄屏下会跟着缩小）。 */
.ui-site .LoginMain dl.flex > dt { flex: 0 0 auto; white-space: nowrap; }
/* dt 不再折行后，标签会和右侧的「公司 / 个人」贴在一起，这里补出行内间距。
   用 gap 而不是给 dt 加 margin-right：dd 是 width:100%，多出的这段会由 dd 收缩吸收，
   两者仍正好占满整行（dt 已被上面的规则设成不可收缩，所以只会压到 dd）。 */
.ui-site .LoginMain dl.flex { gap: var(--space-4); }
.ui-site .register-tabs { margin-bottom: 20px; padding: 4px; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .register-tabs .tab { flex: 1; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: var(--color-text-secondary); font-size: 15px; border-radius: var(--radius-md); }
.ui-site .register-tabs .tab.cur { color: #fff; font-weight: 600; background: var(--color-primary); box-shadow: none; }
.ui-site .LoginMain dl.ClickShow, .ui-site .LoginMain dl.None { display: block; }
.ui-site .LoginMain .flex.between { margin-top: 16px; color: var(--color-text-secondary); font-size: 14px; }
.ui-site .LoginMain .flex.between a { color: var(--color-primary); }
.ui-site .LoginMain .flex.between p { color: var(--color-text-secondary); }

/* 19. 个人中心 ----------------------------------------------------------- */
.ui-site .Account { margin-bottom: 48px; }
.ui-site .Account > .flex.between.wap-flex-wrap { gap: 24px; align-items: flex-start; }
.ui-site .Account .AccLeft { flex: 0 0 260px; width: 260px; }
.ui-site .Account .AccRight { flex: 1 1 auto; width: auto; min-width: 0; }
.ui-site .Account .AccLeft > .BgWhite { padding: 20px; }
.ui-site .Account .AccLeft .User dl { text-align: center; }
.ui-site .Account .AccLeft .User dt img { width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover; }
.ui-site .Account .AccLeft .User dd p { margin-bottom: 10px; color: var(--color-heading); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ui-site .Account .AccLeft .User dd .flex { justify-content: center; gap: 12px; }
.ui-site .Account .AccLeft .User dd .flex a { color: var(--color-text-secondary); font-size: 13px; }
.ui-site .Account .AccLeft .User dd .flex a:hover { color: var(--color-primary); }
.ui-site .Account .AccLeft .Nav { padding: 8px; }
.ui-site .Account .AccLeft .Nav dl a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; color: var(--color-text); font-size: 15px; border-radius: var(--radius-md); }
.ui-site .Account .AccLeft .Nav dl a:hover { color: var(--color-primary); background: var(--color-page-bg); }
.ui-site .Account .AccLeft .Nav dl a dt { display: flex; align-items: center; gap: 10px; }
.ui-site .Account .AccLeft .Nav dl a dt img { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }
.ui-site .Account .AccLeft .Nav dl a dt img:last-of-type,
.ui-site .Account .AccLeft .Nav dl a dd img:last-of-type { display: none; }
.ui-site .Account .AccLeft .Nav dl a:hover dt img:first-of-type,
.ui-site .Account .AccLeft .Nav dl a.Active dt img:first-of-type { display: none; }
.ui-site .Account .AccLeft .Nav dl a:hover dt img:last-of-type,
.ui-site .Account .AccLeft .Nav dl a.Active dt img:last-of-type { display: inline-block; }
.ui-site .Account .AccLeft .Nav dl a dd img { width: 14px; height: 14px; object-fit: contain; opacity: .5; }

.ui-site .HelpMon { padding: 24px; }
.ui-site .HelpMon h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 16px; color: var(--color-heading); font-size: 30px; font-weight: 700; }
.ui-site .HelpMon h1 em { color: var(--color-text-secondary); font-size: 14px; font-weight: 400; }
.ui-site .HelpMon .flex.between { flex-wrap: wrap; gap: 12px; align-items: center; }
.ui-site .HelpMon .self { display: inline-flex; gap: 16px; }
.ui-site .HelpMon .self a { color: var(--color-text-secondary); font-size: 14px; }
.ui-site .HelpMon .self a:hover, .ui-site .HelpMon .self a.active { color: var(--color-primary); }
.ui-site .HelpMon .Click { padding: 8px 20px; }

.ui-site .AccRight > .BgWhite.page-header { padding: 24px; }
.ui-site .AccRight .header-inner h1 { font-size: 24px; }
.ui-site .AccRight .current-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 14px; background: var(--color-primary-soft); border-radius: var(--radius-pill); }
.ui-site .AccRight .status-label { color: var(--color-text-secondary); font-size: 13px; }
.ui-site .AccRight .status-value { color: var(--color-primary); font-size: 14px; font-weight: 600; }
.ui-site .AccRight > .BgWhite { margin-bottom: 16px; overflow-x: auto; }

/* 20. 会员中心 / 订单 / 发票 ------------------------------------------- */
.ui-site .level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.ui-site .level-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ui-site .level-card .card-header { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--color-border); }
.ui-site .level-card .level-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; color: var(--color-primary); background: var(--color-primary-soft); border-radius: var(--radius-md); }
.ui-site .level-card .level-name { margin: 0; color: var(--color-heading); font-size: 18px; font-weight: 600; }
.ui-site .level-card .card-body { flex: 1; padding: 20px; }
.ui-site .level-card .level-price { display: flex; align-items: baseline; gap: 4px; color: var(--color-danger); }
.ui-site .level-card .level-price .currency { font-size: 16px; }
.ui-site .level-card .level-price .amount { font-size: 32px; font-weight: 700; }
.ui-site .level-card .level-duration { margin-top: 8px; color: var(--color-text-secondary); font-size: 13px; }
.ui-site .level-card .card-footer { padding: 0 20px 20px; }
.ui-site .level-card .btn-buy { width: 100%; min-height: 44px; }
.ui-site .benefit-matrix-wrap { padding: 20px; overflow-x: auto; }

.ui-site .benefit-groups { display: flex; flex-direction: column; gap: 16px; }
.ui-site .benefit-group-card { padding: 0; overflow: hidden; }
.ui-site .benefit-group-card .group-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.ui-site .benefit-group-card .group-title { margin: 0; color: var(--color-heading); font-size: 18px; font-weight: 600; }
.ui-site .benefit-group-card .group-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 20px; }
.ui-site .benefit-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .benefit-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; color: var(--color-primary); background: var(--color-surface); border-radius: var(--radius-md); }
.ui-site .benefit-info { flex: 1; min-width: 0; }
.ui-site .benefit-name { color: var(--color-text); font-size: 14px; }
.ui-site .benefit-value { color: var(--color-heading); font-size: 15px; font-weight: 600; white-space: nowrap; }
.ui-site .benefit-value :is(.val-unlimited) { color: var(--color-success); }
.ui-site .benefit-value :is(.val-none) { color: var(--color-text-disabled); }

.ui-site .order-cards { display: flex; flex-direction: column; gap: 16px; }
.ui-site .order-card { padding: 20px 24px; }
.ui-site .order-card .order-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.ui-site .order-card .order-title { margin: 0; color: var(--color-heading); font-size: 18px; font-weight: 600; }
.ui-site .order-card .order-top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ui-site .order-card .invoice-btn { color: var(--color-primary); font-size: 14px; }
.ui-site .order-card .order-bottom { padding-top: 12px; }
.ui-site .order-detail-row, .ui-site .invoice-detail-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 24px; }
.ui-site .detail-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ui-site .d-label { color: var(--color-text-secondary); font-size: 13px; }
.ui-site .d-value { color: var(--color-text); font-size: 14px; overflow-wrap: anywhere; }
.ui-site .order-summary { padding: 16px; margin-bottom: 16px; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.ui-site .summary-item { display: flex; flex-direction: column; gap: 4px; }
.ui-site .s-value { color: var(--color-heading); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ui-site .s-value.price { color: var(--color-danger); }

.ui-site .invoice-list { display: flex; flex-direction: column; gap: 16px; }
.ui-site .invoice-card { display: flex; gap: 20px; padding: 20px 24px; }
.ui-site .invoice-left { flex-shrink: 0; display: flex; align-items: center; justify-content: center; min-width: 96px; }
.ui-site .invoice-amount { color: var(--color-danger); font-size: 22px; font-weight: 700; }
.ui-site .invoice-right { flex: 1; min-width: 0; }
.ui-site .invoice-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.ui-site .invoice-title { margin: 0; color: var(--color-heading); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }

/* 21. 支付 / 提现 -------------------------------------------------------- */
.ui-site .payment-container { width: min(560px, calc(100% - 32px)); margin: 48px auto; padding: 32px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-md); }
.ui-site .payment-header { text-align: center; margin-bottom: 24px; }
.ui-site .payment-header h2 { font-size: 22px; }
.ui-site .order-info { padding: 20px; margin-bottom: 20px; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .order-info .label { color: var(--color-text-secondary); font-size: 13px; }
.ui-site .order-info .order-no { color: var(--color-text); font-size: 14px; overflow-wrap: anywhere; }
.ui-site .order-info .amount { margin: 4px 0 12px; color: var(--color-danger); font-size: 28px; font-weight: 700; }
.ui-site .mock-notice { padding: 12px 16px; margin-bottom: 16px; color: var(--color-warning-strong); font-size: 13px; background: #FEF3E2; border-radius: var(--radius-md); }
.ui-site .action-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.ui-site .action-buttons .btn { flex: 1 1 160px; }
.ui-site .pay-btn { width: 100%; min-height: 46px; color: #fff; font-size: 16px; font-weight: 600; background: var(--color-primary); border: 0; border-radius: var(--radius-md); }
.ui-site .pay-btn:hover { background: var(--color-primary-hover); }
.ui-site #qrcode-container { padding: 16px; margin-bottom: 16px; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ui-site .unionpay-result-container { width: min(520px, calc(100% - 32px)); margin: 64px auto; padding: 40px 32px; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-md); }
.ui-site .unionpay-result-container .order-no { margin: 8px 0 20px; color: var(--color-text-secondary); font-size: 14px; }

/* 22. 文档预览 ----------------------------------------------------------- */
.ui-site :is(.preview-header, .preview-footer) { background: var(--color-surface); border-color: var(--color-border); }
.ui-site .preview-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--color-border); }
.ui-site .doc-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-site .doc-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 8px; color: var(--color-primary); font-size: 12px; font-weight: 600; background: var(--color-primary-soft); border-radius: var(--radius-sm); }
.ui-site .doc-name { color: var(--color-heading); font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-site .preview-header .actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ui-site .preview-body { padding: 20px; background: var(--color-page-bg); }
.ui-site .preview-iframe { width: 100%; min-height: 70vh; border: 0; border-radius: var(--radius-md); background: #fff; }
.ui-site .page-canvas-wrap { position: relative; max-width: 900px; margin: 0 auto; padding: 16px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.ui-site .page-canvas-wrap canvas { display: block; width: 100%; height: auto; }
.ui-site .lock-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: rgba(255, 255, 255, .92); border-radius: var(--radius-md); }
.ui-site .lock-icon { font-size: 32px; }
.ui-site .lock-title { color: var(--color-heading); font-size: 18px; font-weight: 600; }
.ui-site .lock-desc { color: var(--color-text-secondary); font-size: 14px; }
.ui-site .btn-unlock { margin-top: 8px; color: #fff; background: var(--color-primary); border-radius: var(--radius-md); }
.ui-site .no-preview-wrap { display: flex; justify-content: center; padding: 32px 0; }
.ui-site .no-preview-box { padding: 40px 32px; text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-card); }
.ui-site .no-preview-box :is(.icon) { font-size: 32px; margin-bottom: 12px; }
.ui-site .no-preview-box :is(.title) { color: var(--color-heading); font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.ui-site .no-preview-box :is(.desc) { color: var(--color-text-secondary); font-size: 13px; margin-bottom: 16px; }

/* 视频未解锁占位 */
.ui-site .video-locked-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 280px; padding: 32px; text-align: center; background: var(--color-page-bg); border-radius: var(--radius-md); }
.ui-site .video-area-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; color: var(--color-primary); background: var(--color-surface); border-radius: 50%; }
.ui-site .vlp-text { color: var(--color-heading); font-size: 16px; font-weight: 600; }
.ui-site .vlp-subtext { color: var(--color-text-secondary); font-size: 13px; }
.ui-site .vlp-lock-icon { color: var(--color-text-disabled); }

/* 23. 充值与提现表单 ----------------------------------------------------- */
.ui-site .Charge { padding: 24px; }
.ui-site .Form.Chart { padding: 24px; }
.ui-site .Form.Chart .List { display: flex; flex-direction: column; gap: 16px; }
.ui-site #preview-box { display: flex; align-items: center; gap: 12px; }
.ui-site #preview-box img { border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.ui-site .delete-icon { color: var(--color-danger); font-size: 13px; }

/* 24. 安装程序（沿用前台布局时） ---------------------------------------- */
.ui-site .layui-form-label { width: auto; padding: 0 16px 0 0; color: var(--color-text); text-align: right; font-size: 14px; }
.ui-site .layui-input-block { margin-left: 0; flex: 1; min-width: 0; }
.ui-site .layui-form-item { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ui-site .layui-form-item .tips { margin-left: 12px; color: var(--color-text-secondary); font-size: 12px; }
.ui-site .bg { padding: 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }

/* 25. 响应式：桌面 / 平板 / H5 ------------------------------------------- */
/* 说明：模板既有 wap_show + wap_nav_sw_nav.header-show 的移动端机制在 800px 切换，
   因此结构性断点沿用 800px，保证导航抽屉、搜索与栏目布局在同一高度整体切换。 */

/* 25.1 窄桌面 / 平板（≤1280px）：主导航收进抽屉、内容两列 */
@media (max-width: 1280px) {
    .ui-site header nav.head-nav { display: none; }
    /* 导航收进抽屉后不再需要「更多」溢出菜单（site-ui.js 同步 hidden，这里兜住首屏） */
    .ui-site header .head-nav-more { display: none; }
    .ui-site header .head-search { width: min(320px, 34vw); max-width: none; }
    /* 图标按钮组（语言 / 导航）：与「登录/注册」明确分成两种材质 —— 这里是同尺寸（36×36）、
       无边框的图标按钮，「登录/注册」是带文字的同高按钮（见 25.2）。原先汉堡是「白底 + 1px 描边方框」、
       语言是透明位图图标，一个比主 CTA 还重、一个几乎没有存在感，并排看就是散的。
       语言文字在本断点已收起（见 25.1.1），箭头失去了指向对象，这里一并隐藏。 */
    .ui-site header .lang-switcher { margin-left: 4px; }
    .ui-site header .lang-trigger,
    .ui-site header .wap_nav {
        position: relative;
        display: inline-flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; min-height: 36px; padding: 0;
        color: var(--color-text-secondary); background: transparent;
        border: 1px solid transparent; border-radius: var(--radius-md);
        transition: color .2s, background-color .2s;
    }
    /* 只向上下各扩 4px，把触摸目标补到 44px；左右不外扩，免得与相邻按钮的可点区重叠 */
    .ui-site header .lang-trigger::after,
    .ui-site header .wap_nav::after { content: ''; position: absolute; inset: -4px 0; }
    .ui-site header .lang-trigger:hover,
    .ui-site header .wap_nav:hover,
    .ui-site header .lang-switcher.is-open .lang-trigger {
        color: var(--color-primary); background: var(--color-page-bg); border-color: transparent;
    }
    .ui-site header .lang-trigger .lang-icon { width: 20px; height: 20px; }
    .ui-site header .lang-trigger .head-pop-arrow { display: none; }

    .ui-site header .wap_nav { flex-direction: column; gap: 5.4px; }
    /* 线条取 currentColor：默认次级灰、hover / 展开时随按钮一起变主色，与地球图标同源同变色。
       position: static 用来抵消 less.less（≤800px）里旧版 .first-rotate/.last-rotate 的
       position: relative + top(4px/-5px)：那套偏移是配旧按钮尺寸写的，叠在新版的 translateY 上会让
       叉号两笔各偏 4~5px、合不到同一个交点（展开态才看得出来，闭合态无感）。 */
    .ui-site header .wap_nav span {
        display: block; position: static; width: 22px; height: 1.6px; margin: 0;
        background: currentColor; border-radius: 2px;
        /* width 是给中间那根线（.mid-width 收成 0）留的，否则它会瞬间消失而不是缩没 */
        transition: transform .25s ease, opacity .2s ease, width .25s ease;
    }
    /* 位移量 7px = 线高 1.6px + gap 5.4px，改这两个值时必须同步改这里，否则叉号合不拢 */
    .ui-site header .wap_nav span.first-rotate { transform: translateY(7px) rotate(45deg); }
    .ui-site header .wap_nav span.mid-width { width: 0; opacity: 0; }
    .ui-site header .wap_nav span.last-rotate { transform: translateY(-7px) rotate(-45deg); }

    /* 全屏导航抽屉 */
    .ui-site .wap_nav_sw_nav.header-show {
        display: block; position: fixed; inset: 0; z-index: 99999;
        width: 100%; height: 100dvh; padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
        overflow-y: auto; background: var(--color-surface);
    }
    .ui-site .wap_nav_sw_nav > a { display: block; padding: 16px; font-size: 16px; border-bottom: 1px solid var(--color-border); }
    .ui-site .wap_nav_sw_nav > a.cur { color: var(--color-primary); font-weight: 600; }

    .ui-site .PublicMain .MainRight, .ui-site .PublicMain .w475 { flex-basis: 320px; width: 320px; }
    .ui-site .PublicMain .MainNav.w415 { flex-basis: 260px; width: 260px; }
    .ui-site .ui-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 0 0; }
    .ui-site .ui-hero-copy { max-width: none; }
    .ui-site .ui-situation-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .ui-site .ui-entries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ui-site .ui-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-site .ui-home-grid > .ui-home-col:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-site .MainTool.MainMent > .flex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-site .Accent dl dt { width: 168px; height: 112px; }
    .ui-site .RewardNav { flex-basis: 300px; width: 300px; }
    .ui-site .stat-charts-grid > * { width: calc(50% - 8px) !important; }
}

/* 25.1.1 窄桌面（≤1487px）：容器缩到 1233~1392px，再压一档导航
   （检索框外框宽度不在此压：300px 已是最舒适的取值，见 7.4；导航放不下的尾部栏目由 7.5.3 的
   「更多」下拉承接，不再靠横向滚动去挤检索框） */
@media (max-width: 1487px) {
    .ui-site header .head-inner { gap: 16px; }
    .ui-site header .head-nav a { padding: 12px 6px 15px; font-size: 13px; }
    .ui-site header .head-nav a::after { left: 6px; right: 6px; }
    .ui-site header .head-nav-more-trigger { padding: 12px 6px 15px; font-size: 13px; }
    /* 曾经压到 200px，结果「搜索范围 + 关键词 + 按钮」互相挤到显示不全，故不再改宽度 */
    .ui-site header .head-search { /* width: 200px; */ }
    /* 收起语言名与昵称，头像旁仍显示完整会员等级 */
    .ui-site header .lang-trigger span { display: none; }
    .ui-site header .user-nick { display: none; }
}

/* 25.2 H5（≤800px）：单列内容流、顶部导航、无底部 TabBar */
@media (max-width: 800px) {
    .ui-site { --page-gutter: 16px; --header-height: 56px; --content-gap: 16px; font-size: 15px; }
    .ui-site .box { width: calc(100% - 32px); }

    /* 顶部：公告条隐藏；头部两行（品牌 + 账户 / 全站检索） */
    .ui-site header .Top { display: none; }
    /* 手机端吸顶。滚到顶部时是「品牌行 + 检索行」两行；滚过头部后由下面那条规则收起检索行，
       只剩 56px 的品牌行常驻，滚回顶部检索行再出现。
       这里原来是 position: static，注释理由是「两行头部较高、避免遮挡内容」——但 sticky 与 fixed 不同，
       它仍占文档流位置，不会盖住正文，所以那个顾虑不成立。 */
    .ui-site > header { position: sticky; top: 0; z-index: 1000; }
    /* 滚过头部后 my.js 会给 body>header 加 .fix（桌面端靠它隐藏公告条、加阴影），顺带收起检索行。
       收的是 DOM 而不是让它滚出视口：若真让检索行随流滚走，就得把它移出吸顶容器，而它在桌面端
       夹在导航与账户之间、不能移出，只能再复制一份表单——两个 #searchForm 会撞 id 和下面那段绑定逻辑。
       高度突变不会引起抖动：my.js 的 needFix() 按「正文位置」而非 scrollTop 判断，见该文件 218-222 行的说明。 */
    .ui-site header.fix .head-search { display: none; }
    /* 抽屉打开时把整个头部抬到抽屉（z-index 99999）之上。header 改成 sticky 后会生成层叠上下文，
       其中 .Head 的 z-index:100000 只在 header 内部有效，压不住作为 header 兄弟节点的抽屉，
       后果是展开后的叉号被抽屉盖住、点不到，抽屉关不掉。 */
    .ui-site.fix > header { z-index: 100001; }
    /* 抽屉打开时 less.less 的 body.fix 会隐藏 .Head，这里保留新版单行头部并固定在顶部，
       使其中的汉堡（打开后为叉号）始终可见、可再次点击关闭抽屉 */
    .ui-site.fix header .Head {
        display: block; position: fixed; top: 0; left: 0; right: 0;
        z-index: 100000; background: var(--color-surface);
    }
    .ui-site header .head-inner { flex-wrap: wrap; gap: 10px; padding: 10px 0; }
    .ui-site header .head-brand { order: 1; flex: 1 1 0; min-width: 0; }
    /* max-width + object-fit：空间不够时让 logo 等比缩小（留白居中在左侧），而不是把整行挤到换行。
       没有这条兜底时 logo 占宽固定（width: auto 由原图比例决定），一旦按钮变宽就会触发 head-inner 换行。 */
    .ui-site header .head-brand img { height: 32px; max-width: 100%; object-fit: contain; object-position: left center; }
    .ui-site header .head-actions { order: 2; gap: 6px; }
    /* 手机端检索框独占一行、按容器满宽收缩 */
    .ui-site header .head-search { order: 3; flex: 1 1 100%; width: 100%; max-width: none; min-width: 0; margin-left: 0; }
    /* 间距节奏：登录/注册 组内 6px、与图标按钮组之间 12px（6px gap + 6px margin）、两个图标按钮之间 6px。
       原先「登录」是裸文字（padding 仅 6px 2px，可点区远小于 44px），「注册」是孤零零一个实心块，
       两者不是一个体系；现在做成一对同高 36px 的按钮，与右侧 36px 图标按钮同一行高。 */
    .ui-site header .lang-switcher { margin-left: 6px; }
    .ui-site header .head-auth { gap: 6px; }
    .ui-site header .head-link {
        display: inline-flex; align-items: center; justify-content: center;
        height: 36px; padding: 0 16px;
        font-size: 14px; font-weight: 600;
        border: 1px solid transparent; border-radius: var(--radius-md);
        transition: color .2s, background-color .2s, border-color .2s;
    }
    /* 「登录」= 次级：白底 + 主色字 + 淡主色描边；「注册」= 主级：实心主色（背景与文字色沿用 7.5 的既有规则） */
    .ui-site header .head-link:not(.head-link--primary) {
        color: var(--color-primary); background: var(--color-surface); border-color: var(--color-primary-border);
    }
    .ui-site header .head-link:not(.head-link--primary):active { background: var(--color-primary-soft); }
    .ui-site header .head-link--primary { padding: 0 18px; }
    .ui-site header .head-link--primary:active { background: var(--color-primary-hover); }
    /* 手机端检索范围下拉：选项加高到 40px 便于点按，面板不超出视口 */
    .ui-site :is(header, .ui-hero-search) .head-scope-option { min-height: 40px; font-size: 14px; }
    .ui-site :is(header, .ui-hero-search) .head-scope-menu { min-width: 200px; max-width: calc(100vw - 32px); }
    .ui-site .Search .Button { width: 34px; height: 34px; min-height: 34px; }
    /* 按钮在这个断点放大到 34px，right 仍是 10px，所以输入框右侧要让到 10 + 34 = 44px（见 7.4）。
       同样要 !important：不加的话会被 7.4 里 40px 那条 !important 反过来盖住——
       !important 之间比的是权重与先后，这条在后面，所以生效。 */
    .ui-site .Search .Text { padding-right: 44px !important; }

    /* 通用：内容单列 */
    .ui-site .ui-page-heading { margin: 24px auto 16px; }
    .ui-site .ui-page-heading h1 { font-size: 24px; }
    .ui-site .PublicMain { margin-bottom: 32px; }
    .ui-site .PublicMain > .box > .flex.between.wap-flex-wrap { flex-direction: column; gap: 16px; }
    .ui-site :is(.MainLeft,.MainRight,.MainNav,.MainTool,.MainLibrary,.MainCourse,.RewardMain,.RewardNav,.AccRight),
    .ui-site :is(.w975,.w475,.w415,.w1035) { flex: 1 1 auto; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
    .ui-site .IndexSticky { position: static; }
    .ui-site .MainNav .scroll { max-height: 280px; }

    /* 首页 */
    .ui-site .ui-hero { padding-bottom: 20px; }
    .ui-site .ui-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 0 0; }
    .ui-site .ui-hero-copy h1 { font-size: 30px; }
    .ui-site .ui-hero-sub { font-size: 15px; }
    .ui-site .ui-hero-search { flex-wrap: wrap; }
    .ui-site .ui-hero-search-scope,
    .ui-site .ui-hero-search-field,
    .ui-site .ui-hero-search-submit { flex: 1 1 100%; }
    .ui-site .ui-hero-search-scope .head-scope-trigger { min-width: 0; }
    .ui-site .ui-hero-search-submit { min-height: 46px; }
    .ui-site .ui-hero-focus { margin-top: 24px; padding-top: 14px; }
    .ui-site .ui-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ui-site .ui-entry { gap: 10px; padding: 14px; }
    .ui-site .ui-entry-icon { width: 34px; height: 34px; }
    .ui-site .ui-entry-icon svg { width: 19px; height: 19px; }
    .ui-site .ui-situation { padding: 18px; }
    .ui-site .ui-situation-total strong { font-size: 34px; }
    .ui-site .ui-situation-summary { grid-template-columns: 1fr; gap: 16px; }
    .ui-site .ui-situation-block--types { padding-left: 0; border-left: 0; }
    .ui-site .ui-situation-types { gap: 12px; }
    .ui-site .ui-home-grid { grid-template-columns: 1fr; gap: 16px; }
    .ui-site .ui-home-grid > .ui-home-col:last-child { grid-column: auto; grid-template-columns: 1fr; }
    .ui-site .ui-home-col { gap: 16px; }
    .ui-site .ui-map { height: 220px; }
    .ui-site .ui-service-body { flex-direction: column; }
    .ui-site .ui-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-site .ui-service-photo { width: 100%; height: 150px; }
    .ui-site .ui-feed-list { grid-template-columns: minmax(0, 1fr); }
    .ui-site .ui-feed-list li:nth-child(2) { border-top: 1px solid var(--color-border); }
    .ui-site .ui-promo-inner { padding: 20px; }
    .ui-site .ui-promo-inner :is(h1, h2, h3) { font-size: 18px; }
    .ui-site .ui-panel--feed { margin-top: 16px; }
    /* 列表与详情 */
    .ui-site .Accent dl a { flex-direction: column; gap: 12px; }
    .ui-site .Accent dl dt { width: 100%; height: 180px; }
    .ui-site .MainTool .equip-cover { width: 96px; height: 72px; }
    .ui-site .Chem > .flex { grid-template-columns: 1fr; gap: 16px; }
    .ui-site .Chem dl { padding: 16px; }
    .ui-site .Chem dl dt { width: 96px; height: 96px; }
    .ui-site .MainTool.MainMent > .flex { grid-template-columns: 1fr; }
    .ui-site .MainLibrary > .flex, .ui-site .MainCourse > .flex { grid-template-columns: 1fr; }
    .ui-site .MainLibrary dl dt { width: 76px; height: 96px; }
    .ui-site .ContMain { padding: 20px 16px; }
    .ui-site .PublicMain .MainLeft.Accent { padding: 16px; }
    .ui-site .ContMain .Name h2 { font-size: 24px; }
    .ui-site .MainTest { font-size: 15px; line-height: 1.85; }
    .ui-site .Video dl { flex-direction: column; }
    .ui-site .Video dt { width: 100%; height: 180px; }
    .ui-site .Table dl { flex-direction: column; gap: 4px; }
    .ui-site .Table dt { min-width: 0; }

    /* 悬赏 / 服务 / 统计 */
    .ui-site .RewardNav .RewardNume { position: static; }
    .ui-site .AddAdd :is(.Ranking, .AskList) { padding: 16px; }
    .ui-site #Service > .box > .flex { flex-direction: column; }
    .ui-site .stat-charts-grid > * { width: 100% !important; }
    .ui-site .stat-upgrade-banner { padding: 24px 20px; }
    .ui-site .stat-upgrade-banner :is(h2, .banner-title) { font-size: 20px; }

    /* 个人中心 / 会员 / 支付 */
    .ui-site .Account > .flex.between.wap-flex-wrap { flex-direction: column; }
    .ui-site .Account .AccLeft { flex: 1 1 auto; width: 100%; }
    .ui-site .Account .AccLeft .Nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
    .ui-site .Account .AccLeft .Nav dl a { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ui-site .Account .AccLeft .Nav dl a dd { display: none; }
    .ui-site .LoginMain { margin: 24px auto; }
    .ui-site .LoginMain .Title { padding: 24px 20px 0; font-size: 22px; }
    .ui-site .LoginMain > .BgWhite { padding: 20px; }
    .ui-site .level-grid { grid-template-columns: 1fr; }
    .ui-site .benefit-group-card .group-body { grid-template-columns: 1fr; }
    .ui-site .invoice-card { flex-direction: column; gap: 12px; }
    .ui-site .invoice-left { justify-content: flex-start; }
    .ui-site .payment-container, .ui-site .unionpay-result-container { margin: 24px auto; padding: 24px 20px; }
    .ui-site :is(.unlock-mask, .upgrade-confirm-mask, .confirm-mask, .invoice-modal-overlay, .Mask) { padding: 16px; }
    .ui-site :is(.unlock-pay-dialog, .upgrade-pay-dialog, .buy-pay-dialog, .invoice-modal, .Mask > .box) { padding: 20px; }

    /* 预览 */
    .ui-site .preview-body { padding: 12px; }
    .ui-site .preview-iframe { min-height: 60vh; }
    .ui-site .page-canvas-wrap { padding: 8px; }

    /* 触摸目标 */
    .ui-site :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-height: 44px; }
    .ui-site :is(.Btn,.Button,.btn,.Click,.UnlockPop,.banner-btn,.pay-btn,.upgrade-buy,.doc-btn) { min-height: 44px; }
    .ui-site .page ul li a, .ui-site .page ul li span { min-width: 44px; min-height: 44px; }

    /* 页脚 */
    .ui-site footer { margin-top: 32px; padding-bottom: env(safe-area-inset-bottom); }
    .ui-site footer .Footer { flex-direction: column; align-items: center; gap: 16px; padding: 24px 0; }
    .ui-site footer .foot-nav { justify-content: center; }
    .ui-site footer .foot-aside { flex-direction: column; gap: 12px; }
    .ui-site footer .foot-legal { flex-direction: column; justify-content: center; text-align: center; }
}

/* 25.3 窄屏（≤520px） */
@media (max-width: 520px) {
    /* 窄屏优先保第一行不换行：字号与文字内边距各收一档，高度保持 36px 不变（换高度会打破与图标的对齐）。
       收到 12/14 而不是更小：再收下去按钮会显得局促，剩下的宽度缺口交给 logo 等比缩放（见 25.2）。 */
    .ui-site header .head-auth { gap: 4px; }
    .ui-site header .head-link { padding: 0 12px; font-size: 13px; }
    .ui-site header .head-link--primary { padding: 0 14px; }
    .ui-site header .user-name span { max-width: 72px; }
    .ui-site .Chem dl, .ui-site .MainLibrary > .flex > dl, .ui-site .MainCourse > .flex > dl { padding: 14px; }
    .ui-site .LoginMain .Title { padding: 20px 16px 0; }
    .ui-site .MainNav { padding: 16px; }
    .ui-site .page ul { gap: 6px; }
    .ui-site .ContMain { padding: 16px 12px; }
}

/* 25.4 宽屏（≥1440px）：容器不再拉伸，仅放大区块留白 */
@media (min-width: 1440px) {
    :root { --page-gutter: 32px; }
    .ui-site .ui-hero-inner { padding: 52px 0 6px; }
    .ui-site .ui-hero-copy h1 { font-size: 50px; }
}

/* 26. 可访问性与动效降级 ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .ui-site *, .ui-site *::before, .ui-site *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .ui-site header .top-welcome-track { animation: none !important; }
    .ui-site .ui-shortcut:hover { transform: none; }
}

@media print {
    .ui-site > header, .ui-site footer, .ui-site .wap_nav_sw_nav, .ui-site .ui-skip { display: none !important; }
    .ui-site, .ui-site .box { width: auto; background: #fff; }
}

/* 27. 与旧样式高优先级选择器的对接 -------------------------------------- */
/* less.less 在 .PublicMain 与 .PublicMain.incident-detail 下为详情页定义了更高优先级的选择器
   （字号、灰底 dt、行上边框、蓝色圆点等），这里用同级选择器重申设计系统取值。 */
.ui-site .ui-page-heading--crumb { margin-bottom: 16px; }
.ui-site .ui-page-heading + .Mt30,
.ui-site .ui-page-heading + .Mt20,
.ui-site .ui-page-heading + .ContMain,
.ui-site .ui-page-heading + .PublicMain { margin-top: 0; }
.ui-site .ui-page-heading--crumb p { margin-bottom: 0; }

.ui-site .PublicMain .MainLeft.ContMain { padding: 32px; }
.ui-site .PublicMain .MainLeft.ContMain .Name :is(h1, h2) { font-size: 28px; }
.ui-site .PublicMain .MainLeft.ContMain .Name b { font-size: 15px; opacity: .8; }
.ui-site .PublicMain .MainLeft.ContMain .Tit { margin: 24px 0 16px; padding: 0 0 10px; font-size: 18px; }
.ui-site .PublicMain .MainLeft.ContMain .Table { border-bottom: 0; font-size: 15px; }
.ui-site .PublicMain .MainLeft.ContMain .Table dl { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--color-border); }
.ui-site .PublicMain .MainLeft.ContMain .Table dl:last-child { border-bottom: 0; }
.ui-site .PublicMain .MainLeft.ContMain .Table dl dt { width: auto; min-width: 112px; padding: 0; color: var(--color-text-secondary); background: transparent; font-size: 14px; }
.ui-site .PublicMain .MainLeft.ContMain .Table dl dd { padding: 0; color: var(--color-text); }
.ui-site .PublicMain .MainLeft.ContMain .Table dl dd p { opacity: 1; line-height: 1.8; }
.ui-site .PublicMain .MainLeft.ContMain .Table dl dd a { display: inline-flex; align-items: center; gap: 4px; color: var(--color-primary); }
.ui-site .Table dl dd a::before, .ui-site .Fixed dl dd a::before { content: none; display: none; }
.ui-site .Table > dl:last-child, .ui-site .Table.flex.between.flex-wrap > dl { border-bottom: 0; }

@media (max-width: 800px) {
    .ui-site .ui-page-heading--crumb { margin: 24px auto 12px; }
    .ui-site .PublicMain .MainLeft.ContMain { padding: 20px 16px; }
    .ui-site .PublicMain .MainLeft.ContMain .Name :is(h1, h2) { font-size: 24px; }
    .ui-site .PublicMain .MainLeft.ContMain .Table dl { flex-direction: column; gap: 4px; }
    .ui-site .PublicMain .MainLeft.ContMain .Table dl dt { min-width: 0; }
}