/**
 * h5-theme-us.css —— 美式简约三主题层（2026-10-26）
 * ============================================================
 * 职责：
 *   1. 三主题（白天 light / 夜间 dark / 跟随系统 system）由
 *      html[data-theme="light|dark"] 驱动，跟随系统由
 *      h5-theme-switch.js 解析 matchMedia 后同样落到 data-theme。
 *   2. 美式简约配色：深海军蓝 + 灰白基调、高对比度、干净排版。
 *      白天：底 #F5F7FA 灰白 / 主色 #1E5AA8 深蓝（品牌色已在编译
 *      产物中以字面量同步替换，本文件负责结构色）。
 *      夜间：底 #0B1624 深海军蓝 / 卡片 #12233A / 文字 #E7EDF5。
 *   3. 修复顶部 Web3.0 嵌入区（#h5-indexdown-embed）夜间白框。
 *   4. 安卓端顶部白板与客服入口（#opsSupportButton）安全区修复。
 *   5. 全站美学令牌：圆角 / 阴影 / 字体渲染 / 图片清晰度。
 *   6. 主题切换控件样式（.us-theme-switch，由 JS 注入）。
 * 加载顺序：index.css → h5-fullscreen-layout.css → h5-adaptive.css → 本文件（最后，覆盖优先）。
 * 约束：纯覆盖层，不改动任何 DOM 结构与业务逻辑。
 */

/* ============================================================
   0. 设计令牌（Design Tokens）
   ============================================================ */
:root {
  --us-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

  /* 美式主色（白天） */
  --us-primary: #1e5aa8;
  --us-primary-strong: #17497f;
  --us-primary-soft: #e8f0fa;

  /* 白天底色（灰白基调） */
  --us-bg: #f5f7fa;
  --us-surface: #ffffff;
  --us-surface-2: #eef1f5;
  --us-text: #1f2937;
  --us-text-2: #5b6779;
  --us-border: #dde3ea;

  /* 圆角 / 阴影令牌（全站统一） */
  --us-radius-sm: 8px;
  --us-radius-md: 12px;
  --us-radius-lg: 16px;
  --us-shadow-sm: 0 1px 3px rgba(15, 42, 74, 0.08);
  --us-shadow-md: 0 4px 14px rgba(15, 42, 74, 0.10);
  --us-shadow-lg: 0 12px 32px rgba(15, 42, 74, 0.14);
}

/* 夜间令牌（深海军蓝基调） */
html[data-theme="dark"] {
  --us-primary: #3d82d6;
  --us-primary-strong: #2e77d0;
  --us-primary-soft: #14283f;

  --us-bg: #0b1624;
  --us-surface: #12233a;
  --us-surface-2: #0f1d30;
  --us-text: #e7edf5;
  --us-text-2: #93a4bc;
  --us-border: rgba(255, 255, 255, 0.09);

  --us-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --us-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.42);
  --us-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* ============================================================
   1. 基础排版与字体渲染（全站画质）
   ============================================================ */
html,
body {
  font-family: var(--us-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 图片清晰度：禁止浏览器对缩放图做最近邻插值造成的颗粒感 */
img,
uni-image img,
uni-image > div {
  image-rendering: auto;
  -webkit-user-drag: none;
}

/* ============================================================
   2. 主题切换过渡（防突兀色块：仅在切换瞬间启用过渡）
   ============================================================ */
html.us-anim body,
html.us-anim uni-page-body,
html.us-anim .container,
html.us-anim .containers,
html.us-anim .card-box,
html.us-anim .data-card,
html.us-anim .serve-box,
html.us-anim .new-user-box,
html.us-anim .list-item,
html.us-anim .stat-card,
html.us-anim .tab-bar,
html.us-anim .tab-item,
html.us-anim .input-wrap,
html.us-anim .draw-wrap,
html.us-anim .header-box,
html.us-anim #h5-indexdown-embed,
html.us-anim #h5-indexdown-embed section {
  transition: background-color 0.32s ease, color 0.32s ease,
    border-color 0.32s ease, box-shadow 0.32s ease !important;
}

/* ============================================================
   3. 白天模式（html[data-theme="light"]）
   美式灰白基调：编译产物品牌色已替换为深蓝系，这里做结构统一
   ============================================================ */
html[data-theme="light"] body,
html[data-theme="light"] uni-page-body {
  background-color: var(--us-bg) !important;
  color: var(--us-text) !important;
}

html[data-theme="light"] .card-box,
html[data-theme="light"] .data-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .serve-box,
html[data-theme="light"] .new-user-box {
  box-shadow: var(--us-shadow-sm) !important;
}

html[data-theme="light"] .header-box {
  background: rgba(245, 247, 250, 0.92) !important;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
}

/* ============================================================
   4. 夜间模式（html[data-theme="dark"]）
   自 h5-adaptive.css 旧 @media dark 段整体迁移并重配为美式深蓝
   ============================================================ */

/* --- 4.1 页面底色与正文色 --- */
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] uni-app,
html[data-theme="dark"] uni-page,
html[data-theme="dark"] uni-page-wrapper,
html[data-theme="dark"] uni-page-body {
  background-color: var(--us-bg) !important;
}
html[data-theme="dark"] body,
html[data-theme="dark"] uni-page-body {
  color: var(--us-text) !important;
}

/* --- 4.2 主容器深色化：背景图与深色底 multiply 压暗 --- */
html[data-theme="dark"] .container,
html[data-theme="dark"] .containers,
html[data-theme="dark"] uni-page-body > .container,
html[data-theme="dark"] uni-page-body > uni-view.container {
  background-color: var(--us-bg) !important;
  background-blend-mode: multiply !important;
}

/* --- 4.3 卡片类载体转深 --- */
html[data-theme="dark"] .card-box,
html[data-theme="dark"] .new-user-box,
html[data-theme="dark"] .data-card,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .serve-box,
html[data-theme="dark"] .tab-bar,
html[data-theme="dark"] .tab-item:not(.active),
html[data-theme="dark"] .input-wrap,
html[data-theme="dark"] .dialog-item,
html[data-theme="dark"] .data-item,
html[data-theme="dark"] .tui-modal-box,
html[data-theme="dark"] .modal-btns,
html[data-theme="dark"] .draw-wrap {
  background-color: var(--us-surface) !important;
  border-color: var(--us-border) !important;
}

/* --- 4.4 文字打捞 --- */
html[data-theme="dark"] .color-black {
  color: var(--us-text) !important;
}
html[data-theme="dark"] .color-gray {
  color: var(--us-text-2) !important;
}
/* .color-title 是深色渐变文字（background-clip:text），夜间换浅色 */
html[data-theme="dark"] .color-title {
  background: linear-gradient(270deg, #e7edf5 50%, #e7edf5) !important;
}
html[data-theme="dark"] .title,
html[data-theme="dark"] .name,
html[data-theme="dark"] .label,
html[data-theme="dark"] .desc,
html[data-theme="dark"] .dialog-label,
html[data-theme="dark"] .dialog-value,
html[data-theme="dark"] .tab-text,
html[data-theme="dark"] .data-label,
html[data-theme="dark"] .data-value,
html[data-theme="dark"] .data-info,
html[data-theme="dark"] .data-icon,
html[data-theme="dark"] .serve-label,
html[data-theme="dark"] .serve-title,
html[data-theme="dark"] .serve-info,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .no-message,
html[data-theme="dark"] .info-wrap,
html[data-theme="dark"] .hot-text,
html[data-theme="dark"] .wd-full {
  color: var(--us-text) !important;
}
/* 卡片内裸文本打捞：排除 .color-* 品牌色（红涨绿跌/高亮等保留） */
html[data-theme="dark"] .card-box span:not([class*="color-"]),
html[data-theme="dark"] .card-box div:not([class*="color-"]),
html[data-theme="dark"] .data-card span:not([class*="color-"]),
html[data-theme="dark"] .data-card div:not([class*="color-"]),
html[data-theme="dark"] .list-item span:not([class*="color-"]),
html[data-theme="dark"] .list-item div:not([class*="color-"]),
html[data-theme="dark"] .stat-card span:not([class*="color-"]),
html[data-theme="dark"] .stat-card div:not([class*="color-"]),
html[data-theme="dark"] .serve-box span:not([class*="color-"]),
html[data-theme="dark"] .serve-box div:not([class*="color-"]),
html[data-theme="dark"] .dialog-item span,
html[data-theme="dark"] .dialog-item div,
html[data-theme="dark"] .tui-modal-box span:not([class*="color-"]),
html[data-theme="dark"] .tui-modal-box div:not([class*="color-"]) {
  color: var(--us-text) !important;
}
/* 输入框：深底浅字 */
html[data-theme="dark"] .input-wrap input,
html[data-theme="dark"] uni-input-input,
html[data-theme="dark"] .input {
  color: var(--us-text) !important;
  caret-color: var(--us-text) !important;
}
/* 分隔线压暗 */
html[data-theme="dark"] .line {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
/* 例外保护：banner/轮播图上的文字保持深字（背景图未反转） */
html[data-theme="dark"] .swiper-box .title,
html[data-theme="dark"] .swiper-box uni-view,
html[data-theme="dark"] .swiper-container .title,
html[data-theme="dark"] .new-user-box .title {
  color: #222 !important;
}
/* --- 4.5 头部深色化（夜间玻璃拟态，深蓝基调） --- */
html[data-theme="dark"] .header-box {
  background: rgba(9, 16, 28, 0.92) !important;
  color: var(--us-text) !important;
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
}
html[data-theme="dark"] .header-box .title,
html[data-theme="dark"] .header-box .left,
html[data-theme="dark"] .header-box .flexa,
html[data-theme="dark"] .header-box div {
  color: var(--us-text) !important;
}
html[data-theme="dark"] .header-box .left .img {
  filter: invert(1) brightness(1.35);
}
/* --- 4.6 底部 tabBar 深色化（原覆盖层未覆盖，夜间白条问题） --- */
html[data-theme="dark"] uni-tabbar,
html[data-theme="dark"] uni-tabbar .uni-tabbar,
html[data-theme="dark"] .uni-tabbar,
html[data-theme="dark"] .uni-tabbar-bottom {
  background-color: #0d1b2c !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] uni-tabbar .uni-tabbar__label,
html[data-theme="dark"] .uni-tabbar__label {
  color: var(--us-text-2) !important;
}
html[data-theme="dark"] uni-tabbar .uni-tabbar__item.uni-tabbar__item-active .uni-tabbar__label,
html[data-theme="dark"] .uni-tabbar__item.uni-tabbar__item-active .uni-tabbar__label {
  color: var(--us-primary) !important;
}

/* ============================================================
   5. 顶部 Web3.0 嵌入区（#h5-indexdown-embed）
   任务二：夜间白框修复 + 白天美式灰白统一
   （嵌入脚本运行时注入的 #h5-indexdown-embed{background:#fff}
     优先级低于本文件 html[data-theme] 前缀规则）
   ============================================================ */
html[data-theme="dark"] #h5-indexdown-embed {
  background: transparent !important;
  color: var(--us-text) !important;
}
/* 所有白色/浅色 section 与容器统一压暗 */
html[data-theme="dark"] #h5-indexdown-embed section,
html[data-theme="dark"] #h5-indexdown-embed .container,
html[data-theme="dark"] #h5-indexdown-embed .card-grid,
html[data-theme="dark"] #h5-indexdown-embed .feature-row,
html[data-theme="dark"] #h5-indexdown-embed .dapp-body,
html[data-theme="dark"] #h5-indexdown-embed .partner-block,
html[data-theme="dark"] #h5-indexdown-embed .block-figure,
html[data-theme="dark"] #h5-indexdown-embed .own-visual,
html[data-theme="dark"] #h5-indexdown-embed [class*="--help"],
html[data-theme="dark"] #h5-indexdown-embed [class*="card"] {
  background-color: var(--us-surface) !important;
  background-image: none !important;
  color: var(--us-text) !important;
  border-color: var(--us-border) !important;
  box-shadow: var(--us-shadow-sm) !important;
}
/* 深色下标题与正文提亮 */
html[data-theme="dark"] #h5-indexdown-embed h1,
html[data-theme="dark"] #h5-indexdown-embed h2,
html[data-theme="dark"] #h5-indexdown-embed h3,
html[data-theme="dark"] #h5-indexdown-embed p,
html[data-theme="dark"] #h5-indexdown-embed li,
html[data-theme="dark"] #h5-indexdown-embed .body-copy,
html[data-theme="dark"] #h5-indexdown-embed .feature-text p {
  color: var(--us-text) !important;
}
html[data-theme="dark"] #h5-indexdown-embed .text-blue,
html[data-theme="dark"] #h5-indexdown-embed [class*="text-blue"] {
  color: #5b9bff !important;
}
/* 合作伙伴 logo 卡：夜间保留浅色小芯片，避免深色 logo 在深底上消失 */
html[data-theme="dark"] #h5-indexdown-embed .logo-card,
html[data-theme="dark"] #h5-indexdown-embed .logo-card--img {
  background-color: #e9eef5 !important;
  border-radius: var(--us-radius-sm) !important;
}
/* 图标与插图底板透明化（原为浅蓝/白色底块） */
html[data-theme="dark"] #h5-indexdown-embed .feature-icon,
html[data-theme="dark"] #h5-indexdown-embed .feature-icon-img,
html[data-theme="dark"] #h5-indexdown-embed .dapp-figure-wrap {
  background-color: transparent !important;
}
/* 白天模式：嵌入区底色改为灰白透明融合（去掉纯白硬边） */
html[data-theme="light"] #h5-indexdown-embed {
  background: transparent !important;
}
html[data-theme="light"] #h5-indexdown-embed section {
  background-color: transparent !important;
}
html[data-theme="light"] #h5-indexdown-embed .card-grid,
html[data-theme="light"] #h5-indexdown-embed .logo-card {
  box-shadow: var(--us-shadow-sm) !important;
  border-radius: var(--us-radius-md) !important;
}

/* ============================================================
   6. 安卓端自适应修复（任务三）
   ============================================================ */
/* 6.1 顶部嵌入区：图片/视频自适应收缩，杜绝溢出白板 */
#h5-indexdown-embed {
  overflow: visible;
}
#h5-indexdown-embed img,
#h5-indexdown-embed video,
#h5-indexdown-embed .feature-icon-img,
#h5-indexdown-embed .block-figure img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}
#h5-indexdown-embed video {
  width: 100% !important;
  border-radius: var(--us-radius-md);
  background: #0b1624;
}
#h5-indexdown-embed .feature-icon-img {
  width: 52px;
  height: 52px;
}
/* 6.2 小屏断点：嵌入区留白收紧，防止横向溢出 */
@media screen and (max-width: 480px) {
  #h5-indexdown-embed .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #h5-indexdown-embed h1,
  #h5-indexdown-embed .title-interest {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.3 !important;
  }
}
/* 6.3 平板/宽屏断点：内容限宽居中（与 h5-adaptive.css 对齐） */
@media screen and (min-width: 768px) {
  #h5-indexdown-embed .container {
    max-width: 720px !important;
  }
}
@media screen and (min-width: 1024px) {
  #h5-indexdown-embed .container {
    max-width: 960px !important;
  }
}

/* ============================================================
   7. 客服悬浮入口（#opsSupportButton，任务三）
   全路由可见 + 手势条安全区补偿 + tabbar 之上
   ============================================================ */
#opsSupportButton {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  right: max(16px, env(safe-area-inset-right, 0px)) !important;
}
#opsSupportBox {
  bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
}
@media screen and (max-width: 380px) {
  #opsSupportButton {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
}
/* 夜间：客服面板深色化（脚本注入的浅紫样式优先级较低，可安全覆盖） */
html[data-theme="dark"] #opsSupportBox {
  background: var(--us-surface) !important;
  border-color: var(--us-border) !important;
  box-shadow: var(--us-shadow-lg) !important;
  color: var(--us-text) !important;
}
html[data-theme="dark"] #opsSupportBox .ops-header {
  background: linear-gradient(135deg, #0f2036 0%, #163a66 100%) !important;
}
html[data-theme="dark"] #opsSupportMessages,
html[data-theme="dark"] #opsSupportBox .ops-tools,
html[data-theme="dark"] #opsSupportForm,
html[data-theme="dark"] #opsSupportBox .ops-emoji-panel,
html[data-theme="dark"] #opsSupportBox .ops-quick-panel,
html[data-theme="dark"] #opsSupportBox .ops-order-panel {
  background: var(--us-surface-2) !important;
}
html[data-theme="dark"] #opsSupportBox .ops-content {
  background: #1a2f4a !important;
  color: var(--us-text) !important;
  border-color: var(--us-border) !important;
}
html[data-theme="dark"] #opsSupportBox .ops-meta,
html[data-theme="dark"] #opsSupportBox .ops-empty,
html[data-theme="dark"] #opsSupportBox .ops-typing {
  color: var(--us-text-2) !important;
  background: transparent !important;
}
html[data-theme="dark"] #opsSupportInput {
  background: #0f1d30 !important;
  border-color: var(--us-border) !important;
  color: var(--us-text) !important;
}
html[data-theme="dark"] #opsSupportBox .ops-tool {
  background: #14283f !important;
  border-color: var(--us-border) !important;
  color: var(--us-text) !important;
}
html[data-theme="dark"] #opsSupportBox .ops-emoji-panel button {
  background: #14283f !important;
}
/* 客服面板：访客未登录提示条（由 ops-support-float.js 注入） */
.us-support-login-tip {
  margin: 10px 14px 0;
  padding: 10px 12px;
  border-radius: var(--us-radius-sm);
  background: var(--us-primary-soft);
  color: var(--us-primary) !important;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.us-support-login-tip a {
  color: var(--us-primary) !important;
  font-weight: 700;
  text-decoration: underline;
}

/* ============================================================
   8. 全站美学统一（任务四）：圆角 / 阴影 / 发丝线
   ============================================================ */
.card-box,
.data-card,
.stat-card,
.serve-box,
.new-user-box,
.tui-modal-box,
.input-wrap,
.dialog-item {
  border-radius: var(--us-radius-md);
}
.right1 {
  border-radius: 999px;
}
.draw-wrap {
  border-radius: 0 var(--us-radius-lg) var(--us-radius-lg) 0;
}
/* 高分屏发丝线更细腻 */
.line {
  border-bottom-width: 0.5px;
}
/* 弹窗/抽屉阴影统一 */
.tui-modal-box,
.draw-wrap,
.uni-popup {
  box-shadow: var(--us-shadow-lg) !important;
}

/* ============================================================
   9. 主题切换控件（.us-theme-switch，由 h5-theme-switch.js 注入）
   ============================================================ */
#usThemeSwitch {
  position: fixed !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147482900 !important;
  display: flex !important;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid var(--us-border) !important;
  box-shadow: var(--us-shadow-md) !important;
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  opacity: 0.82;
  transition: opacity 0.2s ease;
}
#usThemeSwitch:hover,
#usThemeSwitch:focus-within {
  opacity: 1;
}
#usThemeSwitch .us-ts-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #5b6779;
  font-size: 15px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
#usThemeSwitch .us-ts-btn.active {
  background: var(--us-primary);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(30, 90, 168, 0.35);
}
html[data-theme="dark"] #usThemeSwitch {
  background: rgba(18, 35, 58, 0.88) !important;
  border-color: var(--us-border) !important;
}
html[data-theme="dark"] #usThemeSwitch .us-ts-btn {
  color: #93a4bc;
}
/* 宽屏时弱化为小尺寸，避免干扰内容 */
@media screen and (min-width: 1024px) {
  #usThemeSwitch {
    opacity: 0.6;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
  }
  #usThemeSwitch .us-ts-btn {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
  }
}

/* ============================================================
   10. 打印：合约草案文书（后台手动生成合约共用视觉）
   ============================================================ */
@media print {
  .us-contract-sheet {
    color: #111 !important;
    background: #fff !important;
  }
}