/* ==========================================================================
   出海一件事 · 移动端 H5 —— 视觉升级层（theme.css）
   --------------------------------------------------------------------------
   定位：叠加在 h5.css 之上的「皮肤」，不改任何 DOM 结构与交互逻辑。
      · h5.css   = 布局与组件基线（保底可用的样子）
      · theme.css = 色彩、圆角、阴影、间距节奏、动效（看起来值钱的部分）
   引入顺序：h5.css → theme.css。改视觉只改本文件；改结构与交互仍去 h5.css / app.js。
   遵守 7 条移动端硬约束：单列、安全区、触控 ≥44px、层级 ≤2 跳、键盘避让、
     状态齐全、rpx 无关（H5 用 px + 系统缩放）。
   ========================================================================== */

:root {
  /* 品牌色阶：主色不动（#175CD3），补深/浅两端做层次 */
  --brand:    #175CD3;
  --brand-2:  #2E7BF6;   /* 高光端，用于渐变起点 */
  --brand-3:  #0B3B8C;   /* 阴影端，用于渐变落点 */
  --brand-t:  #E8F0FE;   /* 极浅底，用于选中态背景 */

  /* 中性色阶：比基线更细腻，避免大片 #667085 造成灰蒙 */
  --ink:   #101828;
  --ink2:  #344054;
  --ink3:  #5B6675;
  --ink4:  #98A2B3;
  --line:  #E7EBF0;
  --hair:  #F1F4F8;
  --bg:    #F3F5F9;
  --white: #FFFFFF;

  /* 语义色 */
  --danger: #D92D20;
  --warn:   #B54708;
  --ok:     #067647;

  /* 圆角阶梯 */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* 阴影阶梯：一层贴地 + 一层弥散，比单层更立体也更贵气 */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --sh-2: 0 2px 6px rgba(16, 24, 40, .045), 0 12px 26px rgba(16, 24, 40, .06);
  --sh-3: 0 6px 18px rgba(16, 24, 40, .08), 0 22px 48px rgba(16, 24, 40, .10);
  --sh-brand: 0 6px 18px rgba(23, 92, 211, .22);

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* 全局底色：从纯灰改带一点冷的雾面，让白卡片更"浮" */
html, body { background: var(--bg); }
body { letter-spacing: .1px; }

/* ==========================================================================
   1. 顶部渐变头：加光斑 + 更长的落点，避免整块死蓝
   ========================================================================== */
.hd.grad {
  background:
    radial-gradient(120% 78% at 8% -6%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 58%),
    radial-gradient(90% 60% at 100% 0%, rgba(120, 190, 255, .30), rgba(120, 190, 255, 0) 62%),
    linear-gradient(168deg, var(--brand-2) 0%, var(--brand) 44%, var(--brand-3) 100%);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: 0 10px 28px rgba(11, 59, 140, .20);
}

.hd-logo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.hd-t1 { letter-spacing: -.3px; }

/* 企业身份卡：半透明玻璃，比原来的平涂更有层次 */
.idcard {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
}
.idcard .n { font-weight: 600; letter-spacing: -.1px; }

/* 搜索框：纯白胶囊 + 品牌投影，视觉重心落在这里 */
.search {
  height: 42px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(9, 32, 74, .18);
}
.search:focus-within { box-shadow: 0 4px 16px rgba(9, 32, 74, .22), 0 0 0 3px rgba(255, 255, 255, .28); }

/* 铃铛：白描边圆钮 */
.bell {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background .15s;
}
.bell:active { background: rgba(255, 255, 255, .28); }
.bell b { box-shadow: 0 0 0 2px rgba(23, 92, 211, .55); }

/* ==========================================================================
   2. 通用卡片：统一 16 圆角与双层阴影，去掉硬边框
   ========================================================================== */
.card,
.grid,
.tcard,
.me-stat,
.cell,
.chips,
.tbar,
.review,
.ref,
.warnbox {
  border-radius: var(--r);
  box-shadow: var(--sh-2);
}

.card { padding: 15px 14px; }
.tcard { padding: 15px 14px; margin-bottom: 10px; }

/* 卡片内第一行与内容的呼吸 */
.card > .row:first-child { margin-bottom: 2px; }

/* ==========================================================================
   3. 区块标题：左侧品牌竖条 + 更紧的字距，扫读时定位更快
   ========================================================================== */
.sec-hd { padding: 0 2px 10px; align-items: baseline; }
.sec-t {
  font-size: 16px; font-weight: 650; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 8px;
}
.sec-t::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  flex: 0 0 3px;
}
.sec-more {
  font-size: 12px; color: var(--ink3);
  display: inline-flex; align-items: center; gap: 2px;
  padding: 4px 2px;   /* 触控热区补偿 */
}
.sec-more:active { color: var(--brand); }
.sec-badge {
  font-size: 11px; color: var(--danger); background: #FEF3F2;
  padding: 2px 7px; border-radius: 5px; margin-right: 8px; font-weight: 500;
}

/* ==========================================================================
   4. 待办统计位：数字放大 + 语义色 + 细分隔
   ========================================================================== */
.stat-row { padding: 15px 0 13px; border-bottom: 1px solid var(--hair); }
.stat b {
  font-size: 25px; font-weight: 650; letter-spacing: -.8px;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.stat span { font-size: 11.5px; color: var(--ink3); margin-top: 5px; }
.stat + .stat::before { background: linear-gradient(180deg, transparent, var(--line), transparent); }

/* 待办条目：整行可点，按压有反馈 */
.todo-i { padding: 13px 0; transition: background .12s; }
.todo-i:active { background: #FAFBFD; }
.todo-i .tt { font-size: 14.5px; font-weight: 500; letter-spacing: -.1px; }
.todo-i .ar { color: #C8D0DA; font-weight: 300; }

/* ==========================================================================
   5. 宫格：图标容器加统一内高光，削弱"彩色方块拼贴"的廉价感
   ========================================================================== */
.grid { padding: 10px 4px 14px; }
.gi { padding: 8px 0 6px; }
.gi .ic {
  width: 46px; height: 46px; border-radius: 15px;
  font-size: 16.5px; font-weight: 600;
  /* 只叠渐变，不改 JS 写入的背景色，保留各格识别色 */
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 2px 8px rgba(16, 24, 40, .05);
  transition: transform .14s cubic-bezier(.22, .8, .28, 1);
}
.gi:active .ic { transform: scale(.94); }
.gi span { font-size: 11.5px; color: var(--ink2); margin-top: 8px; letter-spacing: -.1px; }

/* ==========================================================================
   6. 政策 / 任务列表：标题更重、摘要更轻、标签更小
   ========================================================================== */
.pol-i, .m-item { padding: 14px 0; }
.pol-t, .tcard .t { font-weight: 550; letter-spacing: -.15px; }
.pol-s { color: var(--ink3); -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.tag {
  font-size: 10.5px; padding: 2px 7px; border-radius: 5px;
  font-weight: 500; letter-spacing: .1px;
}

/* 时间与辅助信息再轻一档，主次更分明 */
.mut { color: var(--ink4); }
.time { color: var(--ink4); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   7. 按钮：主按钮加品牌投影，次按钮去描边改浅底
   ========================================================================== */
.btn { border-radius: var(--r-sm); font-weight: 500; transition: transform .12s, box-shadow .15s, background .15s; }
.btn.primary {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: var(--sh-brand);
  border-color: transparent;
}
.btn.primary:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(23, 92, 211, .2); }
.btn.ghost { background: #fff; border-color: var(--line); color: var(--ink2); }
.btn.dis { box-shadow: none; opacity: .45; background: #D6DCE4; border-color: transparent; }

/* ==========================================================================
   8. 底部 tabBar：选中态加顶部指示条，未选中压低对比
   ========================================================================== */
.tabbar {
  border-top: 1px solid var(--hair);
  box-shadow: 0 -8px 24px rgba(16, 24, 40, .05);
}
.tabbar .ti {
  position: relative; color: #8A94A6; font-size: 10px; font-weight: 500;
  transition: color .16s;
}
.tabbar .ti svg { width: 23px; height: 23px; transition: transform .16s; }
.tabbar .ti.on { color: var(--brand); font-weight: 600; }
.tabbar .ti.on svg { transform: translateY(-1px); }
.tabbar .ti.on::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2.5px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
}
.tabbar .ti:active { background: #FAFBFD; }
.tabbar .dot { box-shadow: 0 0 0 2px #fff; }

/* ==========================================================================
   9. 聊天气泡与依据卡：进一步拉开 AI 与我的区分
   ========================================================================== */
.bub {
  border-radius: 14px; border-top-left-radius: 5px;
  box-shadow: var(--sh-1); line-height: 1.72;
}
.msg.me .bub {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  box-shadow: 0 4px 12px rgba(23, 92, 211, .2);
  border-radius: 14px; border-top-right-radius: 5px; color: #fff;
}
.ref { border-radius: 12px; box-shadow: var(--sh-1); }
.qchip { border-radius: 14px; box-shadow: var(--sh-1); }

/* ==========================================================================
   10. 面层、弹层、骨架：跟随新圆角与新阴影
   ========================================================================== */
.sheet { border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -12px 40px rgba(16, 24, 40, .18); }
.toast { border-radius: var(--r-sm); box-shadow: var(--sh-3); }
.sk { border-radius: var(--r-sm); box-shadow: var(--sh-1); }
.empty .ei { box-shadow: var(--sh-1); }

/* 吸底操作栏与滚动内容之间加一条渐隐，避免内容"贴"在按钮上 */
.bar { background: rgba(255, 255, 255, .92); box-shadow: 0 -1px 0 var(--hair); }

/* ==========================================================================
   11. 动效：卡片错峰入场 + 按压反馈（纯 CSS，不介入 JS）
   ========================================================================== */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.scr > .card,
.scr > .grid,
.scr > .sec-hd,
.scr > .tcard,
.scr > .review,
.scr > .warnbox {
  animation: riseIn .38s cubic-bezier(.22, .8, .28, 1) both;
}
.scr > *:nth-child(1) { animation-delay: .01s; }
.scr > *:nth-child(2) { animation-delay: .05s; }
.scr > *:nth-child(3) { animation-delay: .09s; }
.scr > *:nth-child(4) { animation-delay: .13s; }
.scr > *:nth-child(5) { animation-delay: .17s; }
.scr > *:nth-child(n+6) { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .scr > * { animation: none !important; }
  * { transition: none !important; }
}

/* ==========================================================================
   12. 我的页：统计卡上浮，压住渐变头，做出层叠关系
   ========================================================================== */
.me-stat { margin: -18px 12px 0; padding: 14px 0; box-shadow: var(--sh-3); }
.me-stat b { font-size: 20px; font-weight: 650; letter-spacing: -.4px; }
.me-stat .i:active { background: #FAFBFD; border-radius: 10px; }
.cell { padding: 14px 14px; }
.cell:active { background: #FAFBFD; }
.cell .ic { border-radius: 10px; }
.cell .t { font-weight: 500; letter-spacing: -.1px; }

/* ==========================================================================
   13. 桌面评审态（宽屏）保持手机观感，只在外围加一层纸感
   ========================================================================== */
@media (min-width: 481px) {
  body { background: #E6EAF0; }
  #app {
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .06), 0 24px 64px rgba(16, 24, 40, .16);
    border-radius: 4px;
    overflow: hidden;
  }
}

/* ==========================================================================
   14. 精修：白色导航分隔、分段控件、我的页层叠
   ========================================================================== */
/* 白底导航与内容之间用极轻的投影分隔，避免"粘贴感" */
.hd:not(.grad) { box-shadow: 0 1px 0 var(--hair), 0 4px 14px rgba(16, 24, 40, .03); }

/* 政策详情页签（.seg）：从方角描边盒改成分段胶囊 */
.seg {
  background: #EDF1F6; border: 0; border-radius: 12px;
  padding: 3px; margin: 12px 12px 0;
}
.seg div {
  border-radius: 9px; font-size: 13px; font-weight: 500;
  color: var(--ink3); transition: background .15s, color .15s, box-shadow .15s;
}
.seg div.on {
  background: #fff; color: var(--brand); font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .10);
}

/* 我的页统计卡：上移量收到 14px，让圆角完整露出 */
.me-stat { margin-top: -14px; border-radius: var(--r); }

/* 待办分组标题：状态点收紧 + 数字弱化 */
.grp-hd { padding: 6px 2px 8px; }
.grp-hd em { font-size: 10.5px; }

/* 非刘海屏 env(safe-area-inset-top) 为 0，白底导航会贴住屏幕顶边，
   补一个最小内边距；刘海屏仍以 env 值为准，不会重复留白。 */
@media (max-width: 480px) {
  .hd:not(.grad) { padding-top: calc(6px + var(--sat)); }
  .hd:not(.grad) .nav { min-height: 46px; }
}