/* ============================================================
   知行教务云 · 学员端 v2 界面层（1:1 照抄 ui-kit.html 设计稿）
   作用域：.p-shell.v2
   依据：uikit.css「手机页面（375×812）」+ uikit-pages.js 12 页蓝本
   规则：结构完全按设计稿（.mh 渐变头 / .bd 内容 / .mc 白卡 / .nv 导航 / .tb 底栏），
        颜色与圆角跟随 --ds-* 令牌（三套皮肤自动生效）
   ============================================================ */

/* ---------- 1. 设计稿变量别名（映射到 DS 令牌，随皮肤切换） ---------- */
.p-shell.v2 {
  --cta: var(--ds-cta);
  --cta2: var(--ds-cta-2);
  --cta-soft: var(--ds-cta-soft);
  --brand: var(--ds-brand);
  --brand-soft: var(--ds-brand-soft);
  --ok: var(--ds-success);
  --warn: var(--ds-warning);
  --bad: var(--ds-danger);
  --t1: var(--ds-t1); --t2: var(--ds-t2); --t3: var(--ds-t3); --t4: var(--ds-t4);
  --line: var(--ds-line); --line-soft: #EEF1F6; --fill: var(--ds-fill);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: #F2F5F9;
  color: var(--t1);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-skin="ink"] .p-shell.v2 { background: #F7F5EE; }
html[data-skin="sun"] .p-shell.v2 { background: #FFF9F2; }

/* ---------- 2. 骨架（对应设计稿 .mp .sb/.nv/.bd/.tb） ---------- */
.p-shell.v2 .pSbar {
  height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; font-size: 11px; font-weight: 700;
  color: var(--t2);
}
.p-shell.v2 .pSbar.d { color: #fff; }

.p-shell.v2 .pMain {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 导航条：设计稿 .nv（42 高，16/700） */
.p-shell.v2 .nv {
  height: 46px; flex: 0 0 46px;
  display: flex; align-items: center; gap: 9px;
  padding: 0 15px;
  font-size: 16px; font-weight: 700;
  position: sticky; top: 0; z-index: 12;
  background: #F2F5F9;
}
html[data-skin="ink"] .p-shell.v2 .nv { background: #F7F5EE; }
html[data-skin="sun"] .p-shell.v2 .nv { background: #FFF9F2; }
.p-shell.v2 .nv .back {
  width: 30px; height: 30px; margin-left: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 500; color: var(--t2);
  background: transparent; border: 0; border-radius: 50%;
}
.p-shell.v2 .nv .back:active { background: rgba(15,23,42,.06); }

/* 内容区：设计稿 .bd（左右 15） */
.p-shell.v2 .bd {
  padding: 0 15px 22px;
  display: block;
}

/* 渐变头：设计稿 .mh */
.p-shell.v2 .mh {
  background: linear-gradient(160deg, var(--cta), var(--cta2));
  color: #fff;
  padding: 6px 15px 16px;
  position: relative;
  overflow: hidden;
}
html[data-skin="ink"] .p-shell.v2 .mh { background: linear-gradient(160deg, #0E5C4A, #16735C); }
html[data-skin="sun"] .p-shell.v2 .mh { background: linear-gradient(160deg, #F2601F, #FFA23A); }

/* 白卡：设计稿 .mc */
.p-shell.v2 .mc {
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 3px 14px rgba(15, 23, 42, .06);
  padding: 12px;
  position: relative;
}
.p-shell.v2 .mc + .mc { margin-top: 10px; }
html[data-skin="ink"] .p-shell.v2 .mc { border-radius: 6px; box-shadow: none; border: 1px solid #E4DFD1; }
html[data-skin="sun"] .p-shell.v2 .mc { border-radius: 16px; box-shadow: 0 6px 18px rgba(146,64,14,.10); }

/* 卡片标题 / 次要文字 */
.p-shell.v2 .mt { font-size: 14.5px; font-weight: 700; color: var(--t1); }
.p-shell.v2 .ms { font-size: 11px; color: #94A3B8; line-height: 1.5; }

/* 标签：设计稿 .tg（19 高 / r5 / 10.5-600） */
.p-shell.v2 .tg {
  display: inline-flex; align-items: center; height: 19px; padding: 0 7px;
  border-radius: 5px; font-size: 10.5px; font-weight: 600;
  background: var(--fill); color: var(--t3); white-space: nowrap;
}
.p-shell.v2 .tg.ok { background: #E9F8EF; color: #15803D; }
.p-shell.v2 .tg.wa { background: #FFF7ED; color: #9A3412; }
.p-shell.v2 .tg.er { background: #FEF2F2; color: var(--bad); }
.p-shell.v2 .tg.in { background: #E0F2FE; color: #0369A1; }

/* 底部 Tab：设计稿 .tb（60 高） */
.p-shell.v2 .p-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background: #fff !important;
  border: 0 !important;
  border-top: 1px solid var(--line-soft) !important;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, .04) !important;
  display: flex !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.p-shell.v2 .p-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 10px; color: #9AA6B8 !important;
  background: transparent !important; border: 0 !important;
  padding: 0 !important; margin: 0 !important;
}
.p-shell.v2 .p-tab.on { color: var(--cta) !important; font-weight: 700; }
.p-shell.v2 .p-tabi { height: 22px; display: flex; align-items: center; }
.p-shell.v2 .p-tabi svg { width: 22px; height: 22px; }
.p-shell.v2 .p-tabl { font-size: 10px; line-height: 1.2; }

/* ---------- 3. 兼容映射：老类 → 设计稿外观 ---------- */
/* 老卡片 → .mc */
.p-shell.v2 .p-card {
  background: #fff;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: 0 3px 14px rgba(15, 23, 42, .06) !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
}
html[data-skin="ink"] .p-shell.v2 .p-card { border-radius: 6px !important; box-shadow: none !important; border: 1px solid #E4DFD1 !important; }
html[data-skin="sun"] .p-shell.v2 .p-card { border-radius: 16px !important; box-shadow: 0 6px 18px rgba(146,64,14,.10) !important; }
/* 老卡片标题 → .mt */
.p-shell.v2 .p-card-h,
.p-shell.v2 .o-sec {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  display: flex; align-items: center;
  margin-bottom: 10px !important;
  padding: 0 !important;
  border: 0 !important;
}
.p-shell.v2 .p-card-h::before,
.p-shell.v2 .o-sec::before { content: none !important; display: none !important; }

/* 老渐变头 → .mh 视觉 */
.p-shell.v2 .o-usercard,
.p-shell.v2 .o-hero {
  background: linear-gradient(160deg, var(--cta), var(--cta2)) !important;
  color: #fff !important;
  border-radius: 0 0 22px 22px !important;
  padding: 14px 15px 18px !important;
  margin: 0 -15px 12px !important;
  box-shadow: none !important;
  overflow: hidden;
}
.p-shell.v2 .o-usercard .o-orb1,
.p-shell.v2 .o-usercard .o-orb2,
.p-shell.v2 .o-hero .o-orb1,
.p-shell.v2 .o-hero .o-orb2 { display: none !important; }

/* 老 bento 双列 → 单列白卡 */
.p-shell.v2 .o-bento { display: block !important; }
.p-shell.v2 .o-tile {
  background: #fff !important;
  border-radius: 13px !important;
  box-shadow: 0 3px 14px rgba(15, 23, 42, .06) !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
}

/* 老宫格 → 设计稿四格（品牌软底 40 圆角 + 文字 10.5） */
.p-shell.v2 .o-gi { display: flex; flex-direction: column; align-items: center; gap: 0; }
.p-shell.v2 .o-ico {
  width: 40px !important; height: 40px !important;
  border-radius: 13px !important;
  background: var(--brand-soft) !important;
  background-image: none !important;
  color: var(--brand) !important;
  box-shadow: none !important;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 4px !important;
}
.p-shell.v2 .o-ico svg { width: 17px !important; height: 17px !important; }
.p-shell.v2 .o-lbl { font-size: 10.5px !important; color: var(--t2) !important; font-weight: 400 !important; }

/* 老列表行 → 设计稿行（无底色，底线分隔） */
.p-shell.v2 .o-row,
.p-shell.v2 .p-reg {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.p-shell.v2 .o-row:last-child,
.p-shell.v2 .p-reg:last-child { border-bottom: 0 !important; }
.p-shell.v2 .o-rt { font-size: 12.5px !important; font-weight: 600 !important; color: var(--t1) !important; }
.p-shell.v2 .o-rs { font-size: 11px !important; color: var(--t4) !important; margin-top: 2px; }
.p-shell.v2 .o-rico {
  width: 32px !important; height: 32px !important; flex: 0 0 32px;
  border-radius: 10px !important;
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}

/* 老按钮 → 设计稿按钮（小圆角 999 胶囊 / 26 高） */
.p-shell.v2 .o-pill-btn,
.p-shell.v2 .p-btn {
  height: 30px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  color: var(--t2) !important;
  box-shadow: none !important;
}
.p-shell.v2 .o-pill-btn.solid,
.p-shell.v2 .p-btn:not(.p-btn-sm) {
  background: var(--cta) !important;
  border-color: var(--cta) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cta) 26%, transparent) !important;
}
.p-shell.v2 .p-btn-sm { height: 26px !important; padding: 0 10px !important; font-size: 11.5px !important; }
.p-shell.v2 .o-chip,
.p-shell.v2 .p-chip,
.p-shell.v2 .p-tag {
  height: 20px; padding: 0 8px;
  border-radius: 5px !important;
  font-size: 10.5px !important; font-weight: 600;
  display: inline-flex; align-items: center;
  background: var(--fill) !important; color: var(--t3) !important;
  border: 0 !important;
}
.p-shell.v2 .o-chip.ok, .p-shell.v2 .p-tag.ok { background: #E9F8EF !important; color: #15803D !important; }
.p-shell.v2 .o-chip.idle { background: #F1F5F9 !important; color: #94A3B8 !important; }
.p-shell.v2 .p-tag.warn { background: #FFF7ED !important; color: #9A3412 !important; }

/* 老统计格 → 设计稿四数据格 */
.p-shell.v2 .o-stat4 { display: grid; gap: 0; }
.p-shell.v2 .o-stat4 > div { text-align: center; }
.p-shell.v2 .o-stat4 b { font-size: 16px !important; font-weight: 800 !important; display: block; line-height: 1.3; }
.p-shell.v2 .o-stat4 span { font-size: 11px !important; opacity: .78; }

/* 头像 */
.p-shell.v2 .o-uava {
  width: 50px !important; height: 50px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .22) !important;
  border: 1.5px solid rgba(255, 255, 255, .42) !important;
  font-size: 18px !important; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* 空态 */
.p-shell.v2 .p-empty {
  text-align: center;
  padding: 26px 12px;
  font-size: 12px;
  color: var(--t4);
  background: transparent !important;
  line-height: 1.7;
}

/* 输入 / 文件 */
.p-shell.v2 input,
.p-shell.v2 select,
.p-shell.v2 textarea {
  font-family: inherit;
  border-radius: 11px !important;
  border: 1px solid var(--line) !important;
  background: #fff !important;
  font-size: 13px !important;
}
.p-shell.v2 input:focus,
.p-shell.v2 select:focus,
.p-shell.v2 textarea:focus {
  outline: none;
  border-color: var(--cta) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 14%, transparent) !important;
}

/* ---------- 4. v2 专用组件 ---------- */
/* 底栏浮动留白 */
.p-shell.v2 .pMain { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

/* 今日任务行 */
.pv-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.pv-row:last-child { border-bottom: 0; }
.pv-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.pv-t { font-size: 12.5px; font-weight: 600; color: var(--t1); }
.pv-s { font-size: 11px; color: #94A3B8; margin-top: 1px; }

/* 四宫格 */
.pv-g4 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px 8px; text-align: center;
}
.pv-g4 > div { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.pv-g4 .ic {
  width: 40px; height: 40px; border-radius: 13px;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.pv-g4 .ic svg { width: 17px; height: 17px; }
.pv-g4 .lb { font-size: 10.5px; color: var(--t2); line-height: 1.3; }

/* 进度条 */
.pv-bar { height: 4px; background: var(--line-soft); border-radius: 9px; overflow: hidden; }
.pv-bar > i { display: block; height: 100%; border-radius: 9px; background: var(--cta); }

/* 主行动按钮（44 pill） */
.pv-cta {
  height: 44px; border-radius: 999px;
  background: var(--cta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14.5px; font-weight: 700;
  border: 0; width: 100%;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cta) 28%, transparent);
}
.pv-cta:active { transform: scale(.985); }

/* 顶部倒计时条（设计稿首页 .mh 内） */
.pv-count {
  margin-top: 12px;
  background: rgba(255, 255, 255, .16);
  border-radius: 11px;
  padding: 10px 12px;
  display: flex; align-items: center;
}

/* 统计环 */
.pv-ring {
  position: relative; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pv-ring > span {
  position: absolute; inset: 6px;
  background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}

/* 章节进度环（学习中心） */
.pv-porg {
  width: 52px; height: 52px; border-radius: 50%;
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pv-porg > span {
  position: absolute; inset: 6px; background: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}

/* 隐藏旧的全局品牌头（v2 内嵌 .mh 取代） */
.p-shell.v2 .p-header { display: none !important; }

/* 修复 ds.css 对 p-shell 的强制底色覆盖 */
.p-shell.v2 { background: #F2F5F9 !important; }
html[data-skin="ink"] .p-shell.v2 { background: #F7F5EE !important; }
html[data-skin="sun"] .p-shell.v2 { background: #FFF9F2 !important; }

/* ---------- 5. 运行态补充 ---------- */
.p-shell.v2 .p-loading {
  padding: 120px 0;
  text-align: center;
  color: var(--t4);
  font-size: 13px;
}
.p-shell.v2 .p-loading::before {
  content: "";
  display: block;
  width: 26px; height: 26px;
  margin: 0 auto 12px;
  border: 2.5px solid var(--line);
  border-top-color: var(--cta);
  border-radius: 50%;
  animation: pvSpin .8s linear infinite;
}
@keyframes pvSpin { to { transform: rotate(360deg); } }

/* 学员端 AI 浮窗避开底栏 */
.p-shell.v2 ~ #dsAiFab,
body.portal-mode #dsAiFab { bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important; }

/* 设置行（我的页）→ 设计稿行样式 */
.p-shell.v2 .o-setrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--t1);
  cursor: pointer;
}
.p-shell.v2 .o-setrow:last-child { border-bottom: 0; }
.p-shell.v2 .o-setrow .o-sico {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
}
.p-shell.v2 .o-setrow .o-sico svg { width: 15px; height: 15px; }
.p-shell.v2 .o-setrow .o-st { flex: 1; font-size: 12.5px; font-weight: 500; }
.p-shell.v2 .o-setrow .o-chev { color: var(--t4); font-size: 15px; }

/* 我的页各功能卡：统一设计稿卡片密度 */
.p-shell.v2 .p-card .p-reg { padding: 10px 0 !important; }
.p-shell.v2 .p-card .p-reg > div > div:first-child { font-size: 13px !important; }

/* 深色题库模板（后台可选）保持原样 */
.p-shell.v2 section[style*="linear-gradient(160deg, #0F172A"] { border-radius: 13px !important; }

/* 弹层（答题/模考）在 v2 下用设计稿圆角 */
.p-shell.v2 .p-modal,
.p-shell.v2 .p-sheet { border-radius: 18px 18px 0 0 !important; }