/* ============================================================
   境外人员数字监督平台 · 移动端 UI
   设计 tokens 取自 Figma（考核 1:4 / AI问答 14:10），颜色精确还原
   ============================================================ */

:root {
  /* surfaces */
  --ow-background: #F8F8F8;
  --ow-surface: #F5F5F5;
  --ow-card: #FFFFFF;
  --ow-placeholder: #D9D9D9;

  /* brand reds（两种红，勿合并） */
  --ow-primary: #CE2013;
  --ow-primary-deep: #C42A1E;

  /* text */
  --ow-foreground: #000000;
  --ow-muted: #505050;
  --ow-on-primary: #FFFFFF;
  --ow-on-primary-soft: #F3F3F3;

  /* borders / radii */
  --ow-border: #C42A1E;
  --ow-radius-sm: 0.125rem;
  --ow-radius-md: 0.9375rem;
  --ow-radius-lg: 1.8125rem;

  --ow-font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 移动端自适应基准：设计稿 412px 宽 = 16px 根字号
   视口 <412px 时等比缩放（3.8835vw ≈ 16/412），≥412px 固定 16px 保持 1:1 */
html { font-size: min(3.8835vw, 16px); }

html, body { height: 100%; }

body {
  font-family: var(--ow-font-family);
  background: var(--ow-background);
  color: var(--ow-foreground);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; }
ul { list-style: none; }

/* 内联图标（兜底用）默认样式 */
.ic {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* 设计稿 PNG 资源图标 */
.img-icon {
  display: block;
  flex: 0 0 auto;
  object-fit: fill;
  /* 让单色图标可以跟随父级 currentColor 重新着色 */
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================ 手机容器 ============================ */
.stage { height: 100%; }

.phone {
  position: relative;
  width: 100%;
  max-width: 25.75rem;
  height: 100dvh;
  margin: 0 auto;
  background: var(--ow-background);
  overflow: hidden;
}

.view {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.view.is-active { display: flex; }

/* ============================ 考核首页 ============================ */
.home-header {
  flex: 0 0 auto;
  background: var(--ow-primary);
  color: var(--ow-on-primary);
  padding: 3rem 0.875rem 0.75rem;
}

.home-title {
  margin: 0 0 1.4375rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4375rem;
  text-align: center;
  white-space: nowrap;
}

.location {
  display: flex;
  align-items: center;
  gap: 0.0625rem;
  margin-bottom: 0.3125rem;
  font-size: 0.75rem;
  line-height: 0.9375rem;
}

.search {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.25rem 0 0.75rem;
  background: var(--ow-card);
  border: 1px solid var(--ow-border);
  border-radius: 4.375rem;
}
.search .ic-search { color: var(--ow-muted); margin-right: 0.375rem; }
.search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.75rem;
  color: var(--ow-foreground);
  font-family: inherit;
}
.search input::placeholder { color: var(--ow-muted); }
.search button {
  height: 1.625rem;
  width: 3.9375rem;
  padding: 0 0.875rem;
  border: none;
  border-radius: 1.3125rem;
  background: var(--ow-primary-deep);
  color: var(--ow-on-primary);
  font-size: 0.75rem;
  cursor: pointer;
}

.content-sheet {
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--ow-surface);
  border-radius: var(--ow-radius-md) var(--ow-radius-md) 0 0;
  padding: 1.4375rem 0.875rem 7rem;
}

.section-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.375rem;
  color: var(--ow-foreground);
}

/* ---- 必办事项 ---- */
.todo-list {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  /* 必办事项两个按钮之间的纵向空隙：原 0.25rem → 增加 50% = 0.375rem */
  gap: 0.375rem;
}

.list-card {
  display: flex;
  align-items: center;
  /* 必办事项按钮高度：原 2.5rem → 增加 15% = 2.875rem */
  height: 2.875rem;
  background: var(--ow-card);
  border-radius: 1.625rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.list-card:active { transform: scale(.985); }

.list-circle {
  /* 必办事项按钮内的红色圆形：原 2.125rem → 等比放大 15% = 2.44375rem */
  width: 2.44375rem;
  height: 2.44375rem;
  margin-left: 0.1875rem;
  border-radius: 50%;
  background: var(--ow-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}

/* 红色圆内的白色 icon（出境信息填报 / 行前考核）随圆等比放大 15%：
   原图 14×13 / 15×15px → 17×17px（约 1.08rem） */
.list-circle .img-icon {
  width: 1.08rem;
  height: 1.08rem;
}

.list-text {
  flex: 1;
  margin-left: 0.625rem;
  font-size: 0.75rem;
  color: var(--ow-foreground);
}

/* 列表右侧 chevron 旋转 180° 调整为合理视觉朝向 */
.list-arrow {
  width: 0.4375rem;
  height: 0.75rem;
  margin-right: 0.9375rem;
  transform: rotate(180deg);
}

/* ---- 行前教育 ---- */
.education { margin-top: 1.375rem; }

.sub-title {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.0625rem;
  color: var(--ow-foreground);
}
.sub-title-video { margin-top: 1.125rem; }

.audio-list {
  margin-top: 0.5625rem;
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
}
.audio-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 3.9375rem;
}
.audio-cover {
  width: 4rem;
  height: 3.9375rem;
  flex: 0 0 auto;
  border-radius: var(--ow-radius-md);
  background: var(--ow-placeholder);
  color: rgba(255,255,255,.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.audio-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.audio-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ow-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.audio-sub {
  font-size: 0.75rem;
  color: var(--ow-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.play-btn {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  border: none;
  border-radius: 50%;
  background: var(--ow-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease;
  overflow: hidden;
}
.play-btn:active { transform: scale(.9); }
.play-btn .img-icon { width: 1.5rem; height: 1.5rem; }
.play-btn .ic { width: 0.6875rem; height: 0.6875rem; color: var(--ow-on-primary); }

.refresh-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.625rem auto 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ow-muted);
  font-size: 0.75rem;
  line-height: 0.6875rem;
  cursor: pointer;
}
.refresh-link.is-spinning .ic { animation: spin .5s ease; }

@keyframes spin { to { transform: rotate(360deg); } }

.video-grid {
  margin-top: 1.125rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 0.75rem;
}
.video-card { cursor: pointer; }
.video-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.6875rem;
  margin-bottom: 0.4375rem;
  border-radius: var(--ow-radius-md);
  background: var(--ow-placeholder);
  color: rgba(255,255,255,.9);
}
.video-cover .ic { width: 2.125rem; height: 2.125rem; }
.video-card .video-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ow-foreground);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-card .video-sub {
  display: block;
  font-size: 0.6875rem;
  color: var(--ow-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================ 子页顶栏 ============================ */
.sub-header {
  flex: 0 0 auto;
  position: relative;
  height: 5.375rem;
  background: var(--ow-background);
}
.back-btn {
  position: absolute;
  left: 0.875rem;
  top: 2.9375rem;
  width: 1.625rem;
  height: 1.625rem;
  border: none;
  border-radius: 50%;
  background: var(--ow-card);
  color: var(--ow-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  pointer-events: auto;
  z-index: 5;
}
/* zhankai 素材经转置渲染即为左向箭头，返回按钮无需再旋转 */
.back-btn .img-icon { transform: none; }
.sub-title-center {
  position: absolute;
  top: 3.0625rem;
  left: 0;
  right: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.375rem;
  text-align: center;
}

/* ============================ AI问答 · 412×917 1:1
   坐标与尺寸取自 Figma 节点 69:449（带底部导航栏版本）：
   - 顶栏: 返回圆 r=13 @(27,60) + 标题 1.25rem/500 @y=49
   - 对话: 仅一条欢迎气泡 (14,108) 333×56（初始空对话状态）
   - 快捷 chip1 (14.5,670.5) 147×33 / chip2 (14.5,713.5) 208×33，间距 0.625rem
   - 输入栏 (14.5,768.5) 383×57 r=28.5，麦克风红圆 cx=369 cy=797 r=25
   - 底部导航栏 (14,837) 384×58，激活「AI问答」tab
   - 垂直节奏: 气泡底 164 → chip1 顶 670.5 → chip2 顶 713.5 → 输入栏 768.5 → 导航栏 837
============================================================ */

.chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* 顶栏高 86，欢迎气泡 y=108 → 顶部 padding 1.375rem */
  padding: 1.375rem 0.875rem 0;
}
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bubble {
  max-width: 20.8125rem;
  padding: 0.5rem 0.6875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: var(--ow-radius-md);
  white-space: pre-wrap;
  word-break: break-word;
}
.bubble.assistant {
  align-self: flex-start;
  background: var(--ow-placeholder);
  color: var(--ow-foreground);
  border-top-left-radius: var(--ow-radius-sm);
}
.bubble.user {
  align-self: flex-end;
  background: var(--ow-primary-deep);
  color: var(--ow-on-primary-soft);
  border-top-right-radius: var(--ow-radius-sm);
}

.bubble.typing { display: flex; gap: 0.3125rem; align-items: center; padding: 0.75rem 0.875rem; }
.bubble.typing span {
  width: 0.4375rem; height: 0.4375rem; border-radius: 50%;
  background: #9a9a9a; animation: blink 1.2s infinite;
}
.bubble.typing span:nth-child(2) { animation-delay: .2s; }
.bubble.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.quick-chips {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  /* 69:449：两 chip 垂直排列 y=670.5/713.5（高 33），底部到输入栏 1.375rem */
  padding: 0 0.875rem 1.375rem;
}
.quick-chips button {
  height: 2.0625rem;
  padding: 0 0.75rem;
  background: var(--ow-card);
  border: 1px solid var(--ow-placeholder);
  border-radius: 0.9062rem;
  font-size: 0.875rem;
  color: var(--ow-foreground);
  cursor: pointer;
  white-space: nowrap;
}
.quick-chips button:active { background: #f4f4f4; }

.chat-input {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 3.5625rem;
  /* 69:449：输入栏 (14.5,768.5) 383×57 r=28.5 描边 #C42A1E
     底部导航栏占 bottom 22 + 高 58 = 5rem，输入栏底距导航栏顶 0.7188rem → margin-bottom 5.7188rem */
  margin: 0 0.875rem 5.7188rem;
  padding-left: 1.25rem;
  background: var(--ow-card);
  border: 1px solid var(--ow-border);
  border-radius: 1.7812rem;
}
.chat-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  line-height: 1.125rem;
  text-align: center;
  color: var(--ow-foreground);
  font-family: inherit;
}
.chat-input input::placeholder { color: var(--ow-muted); }
.mic-btn {
  /* 69:449：红色麦克风圆 cx=369 cy=797 r=25（视觉圆） */
  width: 3.125rem;
  height: 3.125rem;
  flex: 0 0 auto;
  margin-right: 0.1875rem;
  border: none;
  border-radius: 50%;
  background: var(--ow-primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease;
  overflow: hidden;
}
.mic-btn:active { transform: scale(.92); }
.mic-btn.is-listening { animation: pulse 1s infinite; }
/* 69:449：麦克风素材无镜像（matrix 全为正） */
.mic-icon { width: 1.4375rem; height: 1.75rem; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(196,42,30,.4); }
  70% { box-shadow: 0 0 0 12px rgba(196,42,30,0); }
  100% { box-shadow: 0 0 0 0 rgba(196,42,30,0); }
}

/* ============================ 个人中心 ============================ */
.profile-body {
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--ow-surface);
  padding: 1.25rem 0.875rem 7rem;
}
.profile-hero {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem;
  background: var(--ow-card);
  border-radius: var(--ow-radius-md);
  margin-bottom: 0.875rem;
}
.avatar {
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--ow-primary);
  color: var(--ow-on-primary);
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: 1.125rem; font-weight: 600; }
.profile-role { font-size: 0.8125rem; color: var(--ow-muted); margin-top: 0.25rem; }
.badge {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--ow-primary-deep);
  background: rgba(196,42,30,.08);
  padding: 0.25rem 0.625rem;
  border-radius: 1.25rem;
}

.profile-menu {
  background: var(--ow-card);
  border-radius: var(--ow-radius-md);
  overflow: hidden;
  margin-bottom: 0.875rem;
}
.profile-menu li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.profile-menu li:last-child { border-bottom: none; }
.profile-menu li:active { background: #fafafa; }
.pm-icon {
  width: 1.875rem; height: 1.875rem;
  border-radius: 0.5rem;
  background: rgba(206,32,19,.08);
  color: var(--ow-primary-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-arrow { margin-left: auto; transform: rotate(180deg); opacity: .55; }

.logout {
  width: 100%;
  height: 3rem;
  border: none;
  border-radius: var(--ow-radius-md);
  background: var(--ow-card);
  color: var(--ow-primary-deep);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* ============================ 悬浮底部导航 ============================ */
.bottom-nav {
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 1.375rem;
  height: 3.625rem;
  background: var(--ow-card);
  border-radius: var(--ow-radius-lg);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  display: flex;
  padding: 0.3125rem 0.375rem;
  z-index: 20;
  transition: transform .3s ease, opacity .3s ease;
}
.bottom-nav.hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }

.active-pill {
  position: absolute;
  left: 0.375rem;
  top: 0.3125rem;
  width: calc((100% - 0.75rem) / 3);
  height: 3rem;
  background: var(--ow-background);
  border: 1px solid var(--ow-border);
  border-radius: 6.25rem;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  transform: translateX(calc(var(--tab-index, 0) * 100%));
}

.nav-tab {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1875rem;
  border: none;
  background: transparent;
  color: var(--ow-muted);
  font-size: 0.75rem;
  line-height: 1.0625rem;
  cursor: pointer;
}
/* 正负型图标切换：激活显示「红」正型，非激活显示「灰」负型（不做灰度滤镜，避免混淆正负型） */
.nav-tab .tab-icon {
  display: block;
  flex: 0 0 auto;
  transition: opacity .25s ease;
}
.nav-tab .tab-icon-inactive { display: block; }
.nav-tab .tab-icon-active { display: none; }
.nav-tab.is-active { color: var(--ow-primary-deep); }
.nav-tab.is-active .tab-icon-inactive { display: none; }
.nav-tab.is-active .tab-icon-active { display: block; }
/* 个人中心激活态使用独立红色素材（assets/icon-wode-active.svg） */

/* ============================ 出境信息填报 ============================ */
/* 页面整体红色渐变（Figma paint0_linear：CE2013 → CE453A → F5F5F5 → 透明） */
.view-form {
  background: linear-gradient(180deg, #CE2013 0%, rgba(206, 69, 58, .6) 17.37%, #F5F5F5 41.83%, rgba(255, 255, 255, 0) 100%);
}

.form-header {
  flex: 0 0 auto;
  position: relative;
  height: 7.1875rem;
  background: transparent;
}

.form-title-center {
  position: absolute;
  top: 3.0625rem;
  left: 0;
  right: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.375rem;
  text-align: center;
  color: #FFFFFF;
}

.form-back-btn {
  background: #FFFFFF;
  color: #000000;
  pointer-events: auto;
  z-index: 5;
}

.form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: transparent;
  padding: 0.875rem 0.875rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.form-card {
  flex: 0 0 auto;
  background: var(--ow-card);
  border-radius: var(--ow-radius-md);
  padding: 1rem 0.875rem 0;
}

.form-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ow-foreground);
  line-height: 1.25rem;
  margin-bottom: 0.5rem;
}

.form-row {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  border-bottom: 1px solid #F5F5F5;
  position: relative;
}

.form-row.form-row-last {
  border-bottom: none;
}

.form-label {
  flex: 0 0 4.6875rem;
  font-size: 0.8125rem;
  color: var(--ow-foreground);
  line-height: 1.125rem;
}

.form-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.8125rem;
  color: var(--ow-foreground);
  font-family: inherit;
  text-align: left;
  height: 2.5rem;
  line-height: 1.125rem;
  padding: 0;
}

.form-input::placeholder {
  color: #C2C2C2;
}

.form-input[readonly] {
  cursor: pointer;
}

.form-select {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  position: relative;
}

.form-select .form-input {
  flex: 1;
}

.form-caret {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}

.form-caret svg {
  display: block;
  transition: transform .2s ease;
}
.form-select.is-open .form-caret svg { transform: rotate(180deg); }

/* ============================ 弹层（document.body 容器） ============================ */
.form-pop {
  position: fixed;
  z-index: 9999;
  display: none;
  background: var(--ow-card);
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.form-pop.is-open { display: block; }

/* 自定义下拉面板 */
.form-select-panel {
  max-height: 13.75rem;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.form-select-option {
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--ow-foreground);
  cursor: pointer;
  line-height: 1.125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-select-option:hover,
.form-select-option:active { background: #F5F5F5; }
.form-select-option.is-active { background: rgba(206,32,19,.08); color: var(--ow-primary); }

/* ============================ 日历弹层 ============================ */
.form-calendar { padding: 0.625rem 0.5rem 0.375rem; }
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.125rem 0.375rem 0.5rem;
}
.cal-title { font-size: 0.875rem; font-weight: 600; color: var(--ow-foreground); }
.cal-nav {
  width: 1.625rem; height: 1.625rem;
  border: none; background: transparent;
  font-size: 1.125rem; line-height: 1;
  color: var(--ow-foreground);
  border-radius: 50%;
  cursor: pointer;
}
.cal-nav:active { background: #F5F5F5; }
.cal-nav:disabled { color: #C2C2C2; cursor: not-allowed; }
.cal-week,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}
.cal-week { font-size: 0.6875rem; color: var(--ow-muted); padding: 0.25rem 0; }
.cal-week span { padding: 0.125rem 0; }
.cal-cell {
  font-size: 0.8125rem;
  color: var(--ow-foreground);
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  margin: 0.0625rem 0;
}
.cal-cell.cal-empty { visibility: hidden; cursor: default; }
.cal-cell.is-today { color: var(--ow-primary); font-weight: 600; }
.cal-cell.is-disabled { color: #C2C2C2; cursor: not-allowed; }
.cal-cell:not(.cal-empty):not(.is-disabled):hover { background: #F5F5F5; }
.cal-cell.is-selected { background: var(--ow-primary); color: #FFFFFF; }
.cal-cell.is-selected:hover { background: var(--ow-primary); }
.cal-actions {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0.25rem 0.125rem;
  border-top: 1px solid #F5F5F5;
  margin-top: 0.25rem;
}
.cal-actions button {
  border: none;
  background: transparent;
  font-size: 0.75rem;
  color: var(--ow-primary);
  padding: 0.375rem 0.5rem;
  cursor: pointer;
}
.cal-actions button:active { opacity: .7; }

.form-submit {
  flex: 0 0 auto;
  width: 100%;
  height: 2.75rem;
  border: none;
  border-radius: 1.375rem;
  background: var(--ow-primary);
  color: var(--ow-on-primary);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
  margin-top: 0.25rem;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease, background .15s ease;
}
.form-submit:active { opacity: .85; transform: scale(.99); }
.form-submit.is-disabled {
  background: #E4A8A4;
  color: #FFFFFF;
  cursor: not-allowed;
  opacity: .9;
  pointer-events: none;
}
.form-row.is-error .form-input { color: #CE2013; }
.form-row.is-error::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.0625rem;
  background: #CE2013;
}

/* 94:149 行前考核：考核中不显示底部导航栏（沉浸式）—— 仅在 .bottom-nav.is-hidden 时生效，
   由 app.js 在切到 view-exam 时挂上，离开时移除，避免影响首页等其他页面的底部导航 */
.bottom-nav.is-hidden { display: none; }

/* ============================ 行前考核 ============================ */
/* 94:149 设计稿 1:1 复刻：
   - 整体 412×917，红渐变顶部 + F8F8F8 内容区
   - 状态栏 + 顶栏 5.375rem：左 0.875rem 返回圆 r=13 / 中 1.25rem 标题 / 进度 14,137 90×7 r=3.5
   - 题目卡 (14,176) 385×421 r=15
   - 4 个选项 339×58 r=29，垂直间距 1.0625rem（#EBEBEB）
   - 提交按钮 (14,629) 384×58 r=29，禁用色 #E4A8A4 / 启用色 #CE2013
============================================================ */

.view-exam {
  /* 整个 view 不显示底部导航 */
}

.view-exam .bottom-nav,
.view.is-active.view-exam ~ .bottom-nav { /* 兼容旧结构 */ }

.exam-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #CE2013 0%,
    rgba(206, 69, 58, 0.6) 17.37%,
    #F5F5F5 41.83%,
    rgba(255, 255, 255, 0) 100%);
  z-index: 0;
  pointer-events: none;
}

.exam-header {
  position: relative;
  flex: 0 0 auto;
  /* 94:149：顶栏到 137 进度条底 ＋ 下方卡片顶 11rem 约 40 留白 */
  height: 9.875rem;
  padding: 3rem 0.875rem 0;
  z-index: 1;
}

.exam-back-btn {
  background: #FFFFFF;
  color: #000000;
  pointer-events: auto;
  z-index: 5;
}

.exam-title {
  /* 94:149：1.25rem/500 居中，颜色 #FFFFFF */
  color: #FFFFFF;
}

.exam-progress-row {
  /* 94:149：进度区位于顶栏底部
     - 标签文字 y117-131：「题目」+「1」黑色 +「/5」灰色（0.875rem，同一行）
     - 进度条 y137：90×7 r=3.5，蓝色起点小圆头 0.375rem */
  position: absolute;
  left: 0.875rem;
  right: 0.875rem;
  bottom: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.exam-progress-label {
  display: flex;
  align-items: baseline;
}

.exam-type {
  /* 94:149：题型标签「题目」黑色 */
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 0.875rem;
  color: #000000;
}

.exam-count-cur {
  /* 94:149：当前题号「1」黑色，紧跟在「题目」后 */
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 0.875rem;
  color: #000000;
}

.exam-count-total {
  /* 94:149：总题数「/15」灰色 #505050 */
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 0.875rem;
  color: #505050;
}

.exam-progress-track {
  position: relative;
  width: 5.625rem;
  height: 0.4375rem;
  background: #FFFFFF;
  border-radius: 0.2188rem;
  overflow: hidden;
}

.exam-progress-fill {
  /* 94:149：蓝色进度填充，左端圆头；宽度由 JS 按 (当前题/总题) 比例设置，
     最小 0.375rem（未答起点小圆头） */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.375rem;
  min-width: 0.375rem;
  background: #3BC1F2;
  border-radius: 0.2188rem 0 0 0.2188rem;
  transition: width .3s ease;
}

.exam-body {
  position: relative;
  flex: 1 1 auto;
  /* 允许在矮屏时收缩到内容高度以下，从而启用内部滚动（flex 滚动关键） */
  min-height: 0;
  overflow-y: auto;
  background: transparent;
  padding: 1.125rem 0.875rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 1;
}

.exam-card {
  /* 作为 exam-body 的 flex 子项，禁止压缩，保证卡片与选项尺寸不因矮屏被压扁 */
  flex: 0 0 auto;
  background: var(--ow-card);
  border-radius: var(--ow-radius-md);
  /* 94:149 卡片内精确留白：
     题号 y208（顶 2rem）/ 题目 y221（距题号 ~0.375rem）/ 选项 y280（距题目 2.125rem）
     选项底 y563 到卡片底 y597 = 2.125rem */
  padding: 2rem 1.5rem 2.125rem;
  display: flex;
  flex-direction: column;
}

.exam-question {
  /* 94:149：题目正文黑色 0.875rem，位于卡片顶部 */
  font-size: 0.875rem;
  font-weight: 400;
  color: #000000;
  line-height: 1.375rem;
  margin-bottom: 2.125rem;
  white-space: pre-wrap;
}

.exam-options {
  display: flex;
  flex-direction: column;
  gap: 1.0625rem;
}

.exam-option {
  display: flex;
  align-items: center;
  gap: 0.8125rem;
  /* 文本可换行：保留单行最小高度（3.625rem ≈ 58px），超出时自动向下撑开 */
  min-height: 3.625rem;
  padding: 0.6875rem 1.375rem;
  background: #EBEBEB;
  border-radius: 1.8125rem;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
  user-select: none;
}

.exam-option:active { transform: scale(.99); }

.exam-option .opt-letter {
  /* 94:149：选项序号「A. / B. / C. / D.」带句点，
     裸字 0.75rem，置于选项左内侧（距左 ~1.3125rem） */
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ow-foreground);
  line-height: 1.25rem;
  /* 序号固定单行，避免换行错位 */
  white-space: nowrap;
}

.exam-option .opt-text {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--ow-foreground);
  line-height: 1.375rem;
  /* 选项文本按容器宽度自动换行，匹配界面尺寸；极长无空格词也能断开 */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.exam-option.is-selected {
  background: var(--ow-primary);
}

.exam-option.is-selected .opt-letter {
  color: #FFFFFF;
}

.exam-option.is-selected .opt-text {
  color: #FFFFFF;
}

.exam-actions {
  /* 行前考核 · 题目2（未答）布局：左 107px 灰底【上一题】+ 右 270px 粉底【下一题/提交答案】，间距 7px
     题目1（未答）布局：仅显示【下一题】并占满整行（由 .exam-prev[hidden] 隐藏左按钮实现） */
  flex: 0 0 auto;
  display: flex;
  gap: 0.4375rem;
}

.exam-prev {
  /* 设计稿 105:513：左 14px / 宽 107px / 高 58px / r=29，#EBEBEB 灰底，#000 文字 */
  flex: 0 0 6.6875rem;
  height: 3.625rem;
  border: none;
  border-radius: 1.8125rem;
  background: #EBEBEB;
  color: #000000;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease, background .15s ease;
}
.exam-prev:active { opacity: .85; transform: scale(.99); }
.exam-prev[hidden] { display: none; }

.exam-submit {
  /* 设计稿 105:513：右 128px / 宽 270px / 高 58px / r=29
     题目1（未答）布局：【上一题】隐藏后，本按钮通过 flex:1 自动占满整行 */
  flex: 1 1 auto;
  min-width: 0;
  height: 3.625rem;
  border: none;
  border-radius: 1.8125rem;
  background: var(--ow-primary);
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.125rem;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease, background .15s ease;
}

.exam-submit:active { opacity: .85; transform: scale(.99); }

.exam-submit.is-disabled {
  background: #E4A8A4;
  color: #FFFFFF;
  cursor: not-allowed;
  opacity: .9;
  pointer-events: none;
}

/* 返回按钮内的黑色左向箭头（设计稿 94:149 精确路径） */
.back-btn svg {
  display: block;
  flex: 0 0 auto;
}

/* ============================ 考核结果弹层 ============================ */
/* 考核结束时覆盖在答题页上方：半透明遮罩 + 居中白色卡片 */
.exam-result {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.exam-result[hidden] { display: none; }

.exam-result-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  animation: exam-fade .2s ease;
}

.exam-result-card {
  position: relative;
  width: 100%;
  max-width: 20rem;
  background: var(--ow-card);
  border-radius: var(--ow-radius-md);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  box-shadow: 0 20px 45px rgba(0, 0, 0, .18);
  animation: exam-pop .3s cubic-bezier(.34, 1.56, .64, 1);
}

.exam-result-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exam-result-icon svg { display: block; }

.exam-result-card.is-passed .exam-result-icon {
  background: rgba(206, 32, 19, .1);
  color: var(--ow-primary);
}

.exam-result-card.is-failed .exam-result-icon {
  background: #F0F0F0;
  color: #8F8F8F;
}

.exam-result-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5rem;
  color: var(--ow-foreground);
  margin-bottom: 0.5rem;
}

.exam-result-score {
  font-size: 0.875rem;
  color: var(--ow-muted);
  line-height: 1.25rem;
}

.exam-result-desc {
  font-size: 0.8125rem;
  color: var(--ow-muted);
  line-height: 1.25rem;
  margin-top: 0.25rem;
}

.exam-result-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.exam-result-btn {
  flex: 1;
  height: 2.875rem;
  border: none;
  border-radius: 1.4375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: 0.0625rem;
  transition: opacity .15s ease, transform .12s ease;
}

.exam-result-btn:active { opacity: .85; transform: scale(.98); }

.exam-result-retry {
  background: var(--ow-primary);
  color: #FFFFFF;
}

.exam-result-home {
  background: #F0F0F0;
  color: var(--ow-foreground);
}

@keyframes exam-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes exam-pop {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================ Toast ============================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 6.75rem;
  transform: translateX(-50%) translateY(16px);
  max-width: 78%;
  padding: 0.625rem 1.125rem;
  border-radius: 1.25rem;
  background: rgba(0,0,0,.78);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================ 多端适配 ============================ */
@media (min-width: 768px) {
  body {
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.75rem;
    background: radial-gradient(circle at 50% 20%, #f0eceb 0%, #e3e1e0 60%, #d8d5d4 100%);
  }
  .stage { height: auto; }
  .phone {
    width: 25.75rem;
    height: min(57.3125rem, 92vh);
    border-radius: 2.5rem;
    box-shadow: 0 40px 80px rgba(0,0,0,.22), 0 0 0 10px #fff, 0 0 0 11px rgba(0,0,0,.04);
  }
}

@media (max-width: 359px) {
  .home-title { font-size: 1.125rem; }
}