@charset "utf-8";
/*!
 * base.css —— 公共基础样式（首页 + 报名页共用）
 * ---------------------------------------------------------------------------
 * 【尺寸换算规则】
 *   设计稿导出尺寸为 1500px 宽，对应 375px 逻辑宽度，即 **设计稿像素 ÷ 4 = CSS 像素**。
 *   本文件统一使用 rem 表达尺寸，**1rem = 100px @375 视口**，
 *   所以：设计稿像素 ÷ 4 ÷ 100 = rem 值。
 *   例：设计稿里输入框高 154px → 154 ÷ 4 = 38.5px → 0.385rem。
 *
 * 【适配范围】
 *   移动端 H5 优先，**不提供任何 PC 端响应式布局**；PC（真桌面）上只把整页
 *   限制为「最大 640px 宽的居中列」，视作放大版的手机页面。
 *   · 手机 / 平板（触屏）：一律「按视口宽度等比缩放」，1rem = 视口宽 ÷ 3.75，
 *     body 宽 100%，任何视口宽度下内容都铺满，**不做 375px 锁定、两侧不留底色**。
 *   · 真桌面（鼠标 fine + 支持悬停）：1rem 锁到 640 ÷ 3.75 = 170.666667px，
 *     body 最大 640px 并居中，两侧露出页面底色。
 *
 *   ⚠ 判据必须用「输入设备」而不是「视口宽度」：
 *     部分 WebView（WiFi 认证门户、App 内置浏览器、手机浏览器勾了「桌面版网站」）
 *     会忽略 <meta viewport>，把布局视口强制成 980~1024px。这种「被放宽的视口」与
 *     真正的宽桌面窗口在宽度上完全无法区分，一旦按宽度做任何锁定（锁 375 或限 640），
 *     浏览器都会把这部分宽度再整体缩一次，表现为「内容挤成中间一小条」或
 *     「内容比正常小一号」。用 pointer / hover 判断则不受视口宽度影响；
 *     并且判据写成「只有 fine+hover 才限制」是**失败安全**的 ——
 *     环境若不支持这两个媒体特性（老 WebView），自动走「铺满视口」，手机上是正确表现。
 *
 *   ⚠ 另一个坑（「改了 CSS 页面却没变化」的元凶）：
 *     js/common.js 的 setRem() 会用 **inline style** 写 html.style.fontSize，
 *     内联样式优先级高于本文件的媒体查询，所以 CSS 里做任何 rem 锁定/解锁都会被
 *     JS 覆盖。rem 基准的最终裁决在 JS，本文件的 vw 与下面的媒体查询只是它执行前的兜底。
 *     **两处的判据与数值必须保持一致**（MAX_WIDTH = 640 / DESKTOP_MQ）。
 *
 * 【设计稿取色】（均从设计稿 / 切图原图采样得到，非目测）
 *   页面底色 #04103A · 卡片底 #101855 · 卡片描边 #908DFF
 *   标签条底色 #2451C2 · 输入框 #FFFFFF · 输入框文字 #666666
 * ---------------------------------------------------------------------------
 */

/* ===========================================================================
   1. 重置
   =========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, form {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

img { display: block; max-width: 100%; border: 0; }

/* 表单控件统一：去掉浏览器默认外观，样式完全由本项目控制 */
button, input, select, textarea {
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* ===========================================================================
   2. rem 适配
   =========================================================================== */
/* 基准：1rem = 视口宽度 ÷ 3.75（375 宽时恰好 100px），任何视口宽度都铺满。
   JS（js/common.js 的 setRem）执行后会以同一公式写 inline font-size，
   这里用 vw 是**它执行之前的兜底**，同时保证 JS 被禁用时页面依然正常。
   用 vw 而不是 body{width:375px}：vw 天然跟随视口，不存在「锁死宽度」的隐患。 */
html {
  font-size: 26.66667vw;
  background: #04103A;
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  /* 100% 而不是 3.75rem —— 这里不加无条件的 max-width，视口多宽内容就多宽。
     这样被 WebView 放宽到 980px 时 body 也是 980px，浏览器缩放后视觉正常；
     一旦无条件锁成 375px，就会缩成屏幕中间一条。
     最大宽度只在下面「真桌面」的媒体查询里限制，那才不会被误伤。 */
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  /* 全站字体：阿里巴巴普惠体 3.0（fonts.css 中以 @font-face 引入的子集化 woff2）
     后面依次是 iOS / Android / Windows 的中文系统字体兜底：
     字体文件加载失败或个别字符缺字时自动回落，不会出现方框或空白 */
  font-family: "Alibaba PuHuiTi 3.0", -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, sans-serif;
  font-size: .14rem;
  line-height: 1.5;
  color: #fff;
  background-color: #04103A;
  /* iOS 橡皮筋滚动时不露出浏览器默认底色 */
  overscroll-behavior-y: none;
}

/* ---- 真桌面（鼠标 + 悬停）：整页限制最大宽度 640px 并居中 --------------------
   1rem 与 body 宽同步锁到 640px（640 ÷ 3.75 = 170.666667），
   版面比例与手机上完全一致，只是整体放大到 640px 宽，两侧露页面底色。
   判据为什么用 pointer/hover 见文件头部【适配范围】。
   ⚠ 本块的数值必须与 js/common.js 的 MAX_WIDTH / DESKTOP_MQ 一致；
     否则 JS 写下的 inline font-size 会覆盖本块（rem 基准以 JS 为准）。 */
@media (min-width: 640px) and (pointer: fine) and (hover: hover) {
  html { font-size: 170.666667px; }
  body { max-width: 640px; }
}

/* 星空点缀层：3 层不同步长的圆点渐变叠加，打散网格感 */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 24px 36px, rgba(255, 255, 255, .50), transparent 100%),
    radial-gradient(1px 1px at 132px 96px, rgba(150, 215, 255, .42), transparent 100%),
    radial-gradient(1px 1px at 68px 184px, rgba(255, 255, 255, .28), transparent 100%),
    radial-gradient(1px 1px at 190px 240px, rgba(190, 170, 255, .32), transparent 100%);
  background-size: 200px 260px, 168px 214px, 144px 268px, 216px 300px;
}

/* 页面内容层：压在星空之上 */
.page { position: relative; z-index: 1; }

/* 说明：原顶部导航栏（.navbar / .navbar__back / .navbar__title / .navbar__more）
   已按要求移除，相关样式一并删除。顶部留白改由各页面自行控制：
   首页 = .hero 的 padding-top，报名页 = .page 的 padding-top，
   两者均叠加 env(safe-area-inset-top) 以避开刘海屏状态栏。 */

/* ===========================================================================
   4. 通用卡片
   =========================================================================== */
.card {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(144, 141, 255, .85);
  border-radius: .12rem;
  background: #101855;
}

/* ===========================================================================
   5. 章节徽章
   徽章图片宽高由各页面样式指定（切图自带渐变与描边，无需 CSS 复刻）。
   徽章纵向压在卡片上边缘上：上半部分悬空、下半部分压住卡片。
   =========================================================================== */
.sec { position: relative; }

.sec__head {
  position: relative;
  z-index: 2;
  text-align: center;
  /* 徽章纵向压在卡片上边缘上：向下负边距 = 徽章高度的 1/2
     （具体数值由 index.css / apply.css 按各自徽章高度覆写） */
  margin-bottom: -.17rem;
}
/* 徽章用 block + auto 居中：避免 inline-block 在行盒里产生基线间隙，
   使「徽章高 ÷ 2」与负边距精确对应。 */
.sec__badge {
  position: relative;
  display: block;
  margin: 0 auto;
  line-height: 0;
}
/* 徽章切图：宽度必须跟随 .sec__badge 的 rem 宽度，**不能依赖 HTML 上的 width 属性**。
   HTML 属性是固定 px（如 width="170"），在真桌面（1rem = 640 ÷ 3.75 = 170.666667px）上
   容器 .sec__badge 已是 1.7rem = 290.13px，而固定 170px 的图会贴容器左边、
   视觉上偏左 (290.13 - 170) ÷ 2 ≈ 60px，表现为「徽章和卡片不对中」。
   与 .btn__img{width:1.99rem} 同理：凡 rem 布局的切图都要在 CSS 里按 rem 定宽。 */
.sec__badge > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 徽章上的文字（切图只有底框、无文字时使用） */
.sec__badge-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .16rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  letter-spacing: .02rem;
}

/* ===========================================================================
   6. 表单字段
   设计稿实测节奏（CSS px）：
     标签条高 18 · 标签条→输入框 13 · 输入框高 38.5 · 字段间距 14.5
   即单个字段块 = 18 + 13 + 38.5 = 69.5px
   =========================================================================== */
.field + .field { margin-top: .145rem; }

.field {
  position: relative;
}

/* 标签条：蓝色斜切渐隐条（取自切图 Fill 1.png：左端斜切、向右渐隐）
   注意：这里必须用 block + fit-content，不能用 inline-block。
   inline-block 会落在父级行盒的基线上，行盒下方会多出约 3px 的下沉间隙
   （字体 descent 撑开），导致字段实际节奏变成 87px 而不是设计稿的 84px，
   11 个字段累计偏移可达 39px。 */
.field__label {
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  height: .18rem;
  padding: 0 .24rem 0 .22rem;
  /* 标签条有最小宽度，不是纯「文字 + 左右内边距」。
     取证：apply.png 的第 1/2/3 个字段标签分别是「* 参会身份」「* 姓名」「* 性别」，
     文字宽度差了近 40px，但设计稿里三条的渐变**完全重合**（亮段都是 css 50.2~145.2，
     尾端都归零在 x≈169）；user.png 的「报名会议」（4 字，自然宽 101）同样拉到 x≈172。
     ⇒ 设计稿给了一个 ≈128px 的最小宽度。
     不加 min-width 时 apply 的第 1 条只有 110.73 宽（右缘 153.73，设计 169），
     少 15px；user 的「报名会议」只有 101 宽，少 28px。 */
  min-width: 1.28rem;
  font-size: .14rem;
  line-height: .18rem;
  color: #fff;
  white-space: nowrap;
  /* 蓝色斜切标签条的底：从**不透明**一直线性渐隐到全透明。
     ⚠ 曾经写成「.98 → 60% 处 .62 → 100% 全透明」的三段式，那是错的：
       它会让前 60% 一直保持很亮、最后 40% 才快速衰减，
       而设计稿实测是均匀的线性衰减。取证（设计稿 4x 原图逐像素）：
         · user.png 「报名会议」条：x=52 处 rgb(40,93,215)，x=172 处到面板底色；
           取 a(x)=(色−底)/(峰值−底)，在 8%/60%/83%/92% 处分别为
           1.00/0.42/0.18/0.07 —— 与 a=1−x 完全吻合（对比三段式会算出 0.98/0.62/0.26/0.14）。
         · apply.png 同一色块：x=190(4x) rgb(40,93,216) → x=680 到卡片底色
           (16,24,85)，中点 x=440 实测 (28,58,150)，算出 a=0.496，而 1−x=0.49。
       三份设计稿（apply / index / user）里这个填充色都是 rgb(40,93,215)。 */
  background: linear-gradient(90deg,
    rgba(40, 93, 215, 1) 0%,
    rgba(40, 93, 215, 0) 100%);
  /* 左侧斜切：上沿内收，形成设计稿里的平行四边形斜角 */
  clip-path: polygon(.11rem 0, 100% 0, 100% 100%, 0 100%);
}
/* 必填星号 */
.field__label .req { color: #fff; }

.field__body { margin-top: .13rem; }

/* 校验错误提示：绝对定位在「本字段底部 → 下一字段顶部」的既有间隙里，
   因此报错出现时**不会撑高字段、不改变行距**（否则 11 个字段会累计下移数十像素）。
   字段间隙 14.5px，提示行高 11 × 1.2 = 13.2px，恰好放得下；
   卡片下内边距 13.5px 也能容纳最后一个字段的提示。 */
.field__tip {
  position: absolute;
  top: 100%;
  left: .02rem;
  right: 0;
  display: none;
  font-size: .11rem;
  line-height: 1.2;
  color: #FF7A8A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field.is-error .field__tip { display: block; }
.field.is-error .ctrl,
.field.is-error .ctrl-row,
.field.is-error .sel__trigger {
  border-color: #FF7A8A;
  background: #FFF4F5;
}

/* ===========================================================================
   7. 输入控件
   =========================================================================== */
.ctrl {
  display: block;
  width: 100%;
  height: .385rem;
  padding: 0 .14rem;
  font-size: .14rem;
  color: #222;
  background: #fff;
  border: 1px solid transparent;
  border-radius: .06rem;
}
.ctrl::placeholder { color: #666; }

textarea.ctrl {
  height: auto;
  min-height: .8rem;
  padding: .1rem .14rem;
  line-height: 1.6;
  resize: none;
}

/* 下拉选择：外层包一层以放置自绘箭头 */
.ctrl-select { position: relative; }
.ctrl-select .ctrl { padding-right: .38rem; }
/* 下拉未选择时视为 placeholder 色 */
.ctrl-select .ctrl:invalid { color: #666; }
.ctrl-select__arrow {
  position: absolute;
  top: 50%;
  right: .16rem;
  width: 0;
  height: 0;
  margin-top: -.03rem;
  border-left: .055rem solid transparent;
  border-right: .055rem solid transparent;
  border-top: .075rem solid #7C7C7C;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   自定义下拉选择（JS 增强；JS 未执行时自动回退为上面的原生样式）
   DOM：.ctrl-select > select + .ctrl-select__arrow 由 JS 追加
        .sel__trigger（当前值 + 箭头）与 .sel__panel（选项面板）
   原生 select 仍保留在表单里，作为取值 / 校验 / 序列化的数据源。
   --------------------------------------------------------------------------- */
/* 增强后：原生下拉只留数据，不参与视觉 */
.ctrl-select.is-enhanced > .ctrl {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ctrl-select.is-enhanced > .ctrl-select__arrow { display: none; }
/* 面板打开时抬升层级，避免被下方卡片盖住 */
.ctrl-select.is-open { z-index: 60; }

.sel__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: .385rem;
  padding: 0 .14rem;
  font-size: .14rem;
  line-height: 1;
  color: #222;
  text-align: left;
  background: #fff;
  border: 1px solid #E4E8F2;
  border-radius: .06rem;
  transition: border-color .15s, box-shadow .15s;
}
/* 未选择时显示 placeholder 文案，用灰字 */
.sel__trigger.is-placeholder { color: #666; }
/* 聚焦态：淡蓝描边 + 柔光，视觉上更「活泼」但不抢眼 */
.ctrl-select.is-open .sel__trigger {
  border-color: #7FB2FF;
  box-shadow: 0 0 0 .02rem rgba(127, 178, 255, .22);
}
.sel__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 自绘箭头：细线条 chevron（比实心三角更精致），展开时旋转 180° */
.sel__arrow {
  flex: 0 0 auto;
  width: .085rem;
  height: .085rem;
  margin-left: .1rem;
  border-right: .018rem solid #8A93A6;
  border-bottom: .018rem solid #8A93A6;
  border-radius: .01rem;
  transform: rotate(45deg) translate(-.015rem, -.015rem);
  transition: transform .2s ease;
}
.ctrl-select.is-open .sel__arrow {
  border-color: #4C8DF6;
  transform: rotate(-135deg) translate(-.015rem, -.015rem);
}

.sel__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  max-height: 2.4rem;
  margin-top: .04rem;
  padding: .04rem 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: .08rem;
  box-shadow: 0 .06rem .2rem rgba(8, 20, 60, .22);
}
/* 下方空间不足时向上展开（由 JS 判断后加 sel--up） */
.ctrl-select.sel--up .sel__panel {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: .04rem;
}
.ctrl-select.is-open .sel__panel {
  display: block;
  animation: selPanelIn .16s ease-out;
}
@keyframes selPanelIn {
  from { opacity: 0; transform: translateY(-.04rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.sel__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .36rem;
  padding: 0 .14rem;
  font-size: .14rem;
  line-height: 1;
  color: #333;
  cursor: pointer;
}
.sel__opt + .sel__opt { border-top: 1px solid #F3F5FA; }
.sel__opt.is-active {
  color: #2F5EF0;
  font-weight: 500;
  background: #F4F7FF;
}
/* 当前选中项的对勾 */
.sel__opt.is-active::after {
  content: "";
  flex: 0 0 auto;
  width: .05rem;
  height: .1rem;
  margin-left: .1rem;
  border-right: .018rem solid #2F5EF0;
  border-bottom: .018rem solid #2F5EF0;
  transform: rotate(45deg) translate(-.01rem, -.02rem);
}

/* 输入框 + 内置按钮（手机号 / 获取验证码） */
.ctrl-row {
  display: flex;
  align-items: center;
  height: .385rem;
  padding-right: .05rem;
  background: #fff;
  border: 1px solid transparent;
  border-radius: .06rem;
}
.ctrl-row .ctrl {
  flex: 1;
  height: 100%;
  padding-right: 0;
  border: 0;
  background: transparent;
}
.ctrl-row.is-error { border-color: #FF7A8A; }

.code-btn {
  flex: 0 0 auto;
  height: .26rem;
  padding: 0 .13rem;
  font-size: .13rem;
  line-height: .26rem;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(180deg, #7FB2FF 0%, #4C8DF6 100%);
  border-radius: .13rem;
}
.code-btn.is-disabled {
  background: #C6D0DE;
  pointer-events: none;
}

/* ===========================================================================
   8. 单选 / 多选
   =========================================================================== */
/* 横向单选项（性别）
   设计稿实测：圆环外径 12.5，圆环 1 左沿 40.5、圆环 2 左沿 120.5（间距 80），
   文字与圆环同基线，行盒高约 14（即 line-height 收成 1，不留半行距）。
   选中样式与「会议预约」的勾选框保持一致：描边 #98A2B3、
   选中时蓝底 #1F6FE5 + 白色对勾（不再用「白底圆点」，改为勾选表达）。
   注：圆环维持 12.5px 不改尺寸，因此行盒高度仍是文字的 14px，
      表单整体节奏与设计稿完全一致，不会因换样式而位移。 */
.radio-row {
  display: flex;
  align-items: center;
  gap: .505rem;
  border: 1px solid transparent;
  border-radius: .06rem;
}
.radio {
  display: flex;
  align-items: center;
  font-size: .14rem;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}
.radio input { position: absolute; width: 0; height: 0; opacity: 0; }
.radio__dot {
  position: relative;
  flex: 0 0 auto;
  width: .125rem;
  height: .125rem;
  margin-right: .03rem;
  border: .015rem solid #98A2B3;
  border-radius: 50%;
  transition: background .15s, border-color .15s;
}
/* 选中：与会议预约多选完全同色（#1F6FE5） */
.radio input:checked + .radio__dot {
  background: #1F6FE5;
  border-color: #1F6FE5;
}
/* 选中对勾（与 .choice--check 的对勾同比例、同色，仅按 12.5 圆环等比缩小）
   居中方式与 apply.css 的 .choice--check 完全一致：
   转 -45° 后对勾的视觉包围盒会下偏 √2/4 × (高度 − 边框宽度)，
   这里补 √2/4 × (.026rem − .015rem) = .00389rem ≈ .0039rem，勾才真正落在圆环正中。
   （transform 列表从右往左生效，顺序不能换，推导详见 apply.css 里的说明） */
.radio input:checked + .radio__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .05rem;
  height: .026rem;
  border-left: .015rem solid #fff;
  border-bottom: .015rem solid #fff;
  transform: translate(-50%, -50%) translateY(-.0039rem) rotate(-45deg);
}

/* ===========================================================================
   9. 主按钮
   切图 btn.png（398x106 @2x = 199x53 CSS px）只有按钮底与辉光，**不含文字**，
   实心条位于图片顶部 34.5px 高，下方 18.5px 是辉光。
   因此按钮文字需要单独用 .btn__text 叠加，并垂直居中对齐到实心条上。
   =========================================================================== */
.btn {
  position: relative;
  display: block;
  /* 定宽：<a> 的 display:block 会撑满整行，这里锁定为切图宽度以保持居中不变形
     （原 <button> 自带收缩特性，改用 <a> 后必须显式声明） */
  width: 1.99rem;
  margin: 0 auto;
  padding: 0;
  line-height: 0;
  background: none;
  /* 移动端点击时不显示高亮半透明块，避免与按钮辉光叠加显脏 */
  -webkit-tap-highlight-color: transparent;
}
.btn__img { width: 1.99rem; height: auto; }

.btn__text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: .345rem;                       /* = 切图内实心条高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .17rem;
  font-weight: 600;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: .005rem;
  text-shadow: 0 .01rem .03rem rgba(8, 34, 130, .55);
  pointer-events: none;
}

/* ===========================================================================
   10. 弹窗 / 轻提示
   =========================================================================== */
.mask {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 .4rem;
  background: rgba(0, 0, 0, .55);
}
.mask.is-show { display: flex; }

.dialog {
  width: 100%;
  max-width: 2.75rem;
  padding: .26rem .2rem .16rem;
  text-align: center;
  background: #fff;
  border-radius: .14rem;
  animation: dialogIn .18s ease-out;
}
@keyframes dialogIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
.dialog__icon {
  width: .5rem;
  height: .5rem;
  margin: 0 auto .14rem;
  border-radius: 50%;
}
.dialog__icon--ok {
  background: #E8F7EE;
  position: relative;
}
.dialog__icon--ok::after {
  content: "";
  position: absolute;
  top: .20rem;
  left: .17rem;
  width: .14rem;
  height: .08rem;
  border-left: .03rem solid #17B26A;
  border-bottom: .03rem solid #17B26A;
  transform: rotate(-45deg);
}
.dialog__icon--err {
  background: #FDECEF;
  position: relative;
}
.dialog__icon--err::before,
.dialog__icon--err::after {
  content: "";
  position: absolute;
  top: .24rem;
  left: .13rem;
  width: .24rem;
  height: .028rem;
  background: #F04438;
  border-radius: .02rem;
}
.dialog__icon--err::before { transform: rotate(45deg); }
.dialog__icon--err::after  { transform: rotate(-45deg); }

.dialog__title {
  font-size: .17rem;
  font-weight: 600;
  color: #1A1A1A;
}
.dialog__text {
  margin-top: .08rem;
  font-size: .13rem;
  line-height: 1.6;
  color: #666;
  word-break: break-word;
}
.dialog__foot {
  display: flex;
  margin-top: .2rem;
  border-top: 1px solid #EEE;
}
/* 多按钮时 flex:1 等宽平分 → 两个按钮左右各占一半、天然对齐 */
.dialog__btn {
  flex: 1;
  height: .46rem;
  font-size: .16rem;
  color: #8A8A8A;
}
/* 主操作按钮（蓝字加粗）；不写 --primary 的即次要按钮（灰字） */
.dialog__btn--primary {
  color: #2F5EF0;
  font-weight: 600;
}
.dialog__btn + .dialog__btn {
  border-left: 1px solid #EEE;
}

/* 轻提示 toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  z-index: 1000;
  max-width: 3rem;
  padding: .1rem .18rem;
  font-size: .13rem;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  background: rgba(0, 0, 0, .8);
  border-radius: .08rem;
  opacity: 0;
  transform: translate(-50%, .1rem);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}