/* ==========================================================
   全局样式（移动端优先）
   阶段1：统一布局（顶部导航 / 主内容 / 底部页脚）
   设计变量均为占位，用户后续替换
   ========================================================== */

/* ---------- 设计变量 ---------- */
/* 说明（优化与排版组 · 视觉规范 v1）：原变量名与取值一律保持不变（向后兼容既有样式）；
   以下为补全的令牌层，供后续把散落的硬编码色值 / 圆角 / 阴影逐步收敛过来。 */
:root {
  /* —— 原有变量（保持不变） —— */
  --color-primary: #2f6bff;
  --color-primary-dark: #1e4fd6;
  --color-text: #1f2937;
  --color-text-muted: #6b7280;
  --color-bg: #f5f7fa;
  --color-card: #ffffff;
  --color-border: #e5e7eb;
  --color-danger: #dc2626;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.06);

  /* —— 令牌补全：主色族 —— */
  --color-primary-soft: #eef4ff;
  --color-primary-line: #c7d9ff;

  /* —— 令牌补全：文字 / 线条 / 底色 —— */
  --color-text-strong: #0f172a;
  --color-text-sub: #374151;
  --color-text-weak: #94a3b8;
  --color-border-strong: #cbd5e1;
  --color-line-dashed: #e5e7eb;
  --color-bg-soft: #f9fafb;
  --color-bg-mute: #f1f5f9;

  /* —— 令牌补全：语义色 —— */
  --color-success: #16a34a;
  --color-success-text: #15803d;
  --color-success-soft: #ecfdf5;
  --color-success-line: #a7f3d0;
  --color-warning: #d97706;
  --color-warning-text: #b45309;
  --color-warning-soft: #fffbeb;
  --color-warning-line: #fde68a;
  --color-danger-soft: #fef2f2;
  --color-danger-text: #b91c1c;
  --color-danger-line: #fecaca;
  --color-price: #e02e2e;
  --color-gold: #d97706;   /* 合伙人专属金（全站唯一） */
  --color-lead: #6d28d9;   /* 主管标识紫 */
  --color-lead-soft: #ede9fe;
  --color-indigo: #4f46e5; /* 推广/素材类卡片靛蓝，与主蓝区分 */

  /* —— 令牌补全：圆角阶梯 —— */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* —— 令牌补全：阴影阶梯 —— */
  --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 4px 14px rgba(15, 23, 42, 0.1);
  --shadow-pop: 0 12px 32px rgba(15, 23, 42, 0.18);

  /* —— 令牌补全：焦点样式（全站统一） —— */
  --focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.12);
}

/* ---------- 基础重置（避免横向滚动） ---------- */
* { box-sizing: border-box; max-width: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; /* z-index 仅作用于定位元素 */
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 14px;
}
.brand { font-weight: 700; font-size: 17px; color: var(--color-text); white-space: nowrap; }
.top-nav { display: flex; gap: 12px; align-items: center; }
.nav-link { font-size: 14px; color: var(--color-text-muted); white-space: nowrap; }
.nav-link.is-active { color: var(--color-primary); font-weight: 600; }
.nav-link.is-disabled { color: var(--color-border-strong); }

/* ---------- 主内容（用 dvh 适配移动端动态视口） ---------- */
.page-container {
  padding: 14px;
  min-height: calc(100dvh - 150px); /* calc 内运算符两侧留空格 */
}

/* ---------- 首屏 ---------- */
.hero {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
  border-radius: var(--radius);
  color: #fff; padding: 28px 18px; text-align: center;
  box-shadow: var(--shadow);
}
.hero h1 { margin: 10px 0 6px; font-size: 22px; }
.hero-sub { margin: 0 0 16px; font-size: 14px; opacity: .92; }
.badge {
  display: inline-block; font-size: 12px;
  background: rgba(255, 255, 255, .2);
  padding: 2px 10px; border-radius: 999px;
}

/* ---------- 区块与卡片 ---------- */
.section { margin-top: 20px; }
.section-title { font-size: 17px; margin: 0 0 10px; }
.card-list { display: grid; gap: 10px; }
.card {
  background: var(--color-card); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow);
  font-size: 14px; color: var(--color-text);
}
.muted-note { color: var(--color-text-muted); font-size: 13px; margin-top: 14px; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer;
  border-radius: 999px; padding: 10px 22px;
  font-size: 15px; font-family: inherit;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:active { background: var(--color-primary-dark); }
.btn-block { width: 100%; margin-top: 4px; }
.btn-ghost {
  background: transparent; border: 1px solid var(--color-text-sub);
  color: var(--color-border);
}
.btn-sm { padding: 5px 12px; font-size: 13px; }

/* ---------- 底部页脚 ---------- */
.site-footer {
  margin-top: 24px;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  text-align: center; color: var(--color-text-muted); font-size: 12px;
  border-top: 1px solid var(--color-border); background: var(--color-card);
}
.footer-links { display: flex; justify-content: center; gap: 10px; margin: 0 0 6px; }
.footer-copy, .footer-phase { margin: 2px 0; }
.footer-icp { margin: 2px 0 0; }
.footer-icp a { color: var(--color-text-muted); text-decoration: none; }

/* ---------- 后台登录页 ---------- */
.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 16px;
}
.login-box {
  width: 100%; max-width: 360px;
  background: var(--color-card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 20px;
}
.login-title { margin: 0 0 4px; font-size: 20px; text-align: center; }
.login-sub, .login-tip { color: var(--color-text-muted); font-size: 12px; text-align: center; }
.login-tip { margin-top: 14px; }
.login-form { margin-top: 16px; display: grid; gap: 12px; }
.form-item { display: grid; gap: 6px; }
.form-item input,
.login-form input,
.coupon-row input,
.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%; padding: 10px 12px; font-size: 15px;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-bg-soft); font-family: inherit;
}
.form-item input:focus,
.login-form input:focus,
.coupon-row input:focus,
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  outline: 2px solid var(--color-primary); outline-offset: 1px; /* 保留焦点样式（无障碍） */
  border-color: var(--color-primary);
}
.form-error { color: var(--color-danger); font-size: 13px; text-align: center; margin: 10px 0 0; }

/* ---------- 后台 ---------- */
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--color-text); color: #fff;
}
.admin-brand { font-size: 15px; font-weight: 600; }
.stat-card { display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: 13px; color: var(--color-text-muted); }
.stat-value { font-size: 20px; font-weight: 700; }

/* ---------- 平板及以上（仍是移动端优先的渐进增强） ---------- */
@media (min-width: 768px) {
  .page-container { max-width: 720px; margin: 0 auto; }
  .card-list { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 桌面端：后台/工作台横向拉大（2026-10-09 团队反馈#4） ----------
   原最大 720px 在电脑上太窄，KPI 考核表、团队看板等宽表格被挤压。
   仅对 header 里带 .page-wide 的容器生效（admin/workbench 顶栏），
   前台营销页保持窄版不受影响。 */
@media (min-width: 1024px) {
  .page-container.page-wide { max-width: 1280px; }
}

/* ==========================================================
   阶段2新增：前台页面骨架组件（占位，用户后续替换）
   ========================================================== */

/* ---------- 按钮：浅色与幽灵变体、禁用态 ---------- */
.btn-light { background: #fff; color: var(--color-primary); }
.btn-ghost-light {
  background: #fff; border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 列表卡片（首页/项目列表通用） ---------- */
.list-card { display: flex; flex-direction: column; gap: 4px; color: inherit; }
.list-card:active { background: var(--color-primary-soft); }
.list-title { font-size: 15px; font-weight: 600; }
.list-meta { font-size: 12px; color: var(--color-text-muted); }
.list-price { font-size: 16px; font-weight: 700; color: var(--color-price); }
.more-link { display: inline-block; margin-top: 10px; font-size: 14px; }

/* ---------- 详情页：吸底购买栏 ---------- */
.detail-hero { text-align: left; }
.page-with-buybar { padding-bottom: 76px; } /* 给吸底栏留出空间 */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--color-card); border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(15, 23, 42, .06);
}
.buy-bar-info { display: flex; flex-direction: column; }
.buy-price { font-size: 18px; font-weight: 700; color: var(--color-price); }
.buy-sold { font-size: 12px; color: var(--color-text-muted); }

/* ---------- 收银台：订单行 / 优惠码 / 支付方式 ---------- */
.order-card .kv:first-of-type { border-top: 1px dashed var(--color-border); }
.kv {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--color-border);
  font-size: 14px;
}
.kv:last-of-type { border-bottom: none; }
.kv span { color: var(--color-text-muted); flex-shrink: 0; }
.kv b { text-align: right; font-weight: 600; }
.price-text { color: var(--color-price); }
:root { --color-price: var(--color-price); } /* 价格用红色：符合国内电商习惯 */

.coupon-row { display: flex; align-items: center; gap: 10px; }
.coupon-row input:disabled { background: var(--color-bg-mute); color: var(--color-text-muted); }
.coupon-note { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }

.pay-method {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 14px; margin-bottom: 10px;
  font-size: 15px; box-shadow: var(--shadow);
}
.pay-method input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--color-primary); flex-shrink: 0;
}
.pay-tag {
  margin-left: auto; font-size: 12px; color: var(--color-primary);
  border: 1px solid var(--color-primary); border-radius: 999px; padding: 0 8px;
}
form .btn-block { margin-top: 8px; }

/* ---------- 支付成功页 ---------- */
.success-card { text-align: center; padding: 28px 18px; }
.success-icon {
  width: 64px; height: 64px; line-height: 64px; margin: 0 auto 12px;
  border-radius: 50%; background: var(--color-success); color: #fff; font-size: 32px;
}
.success-card .kv { text-align: left; }
.action-row { display: flex; gap: 10px; }
.action-row .btn { flex: 1; text-align: center; }

/* ---------- 登录页 / 个人中心 ---------- */
.login-card .muted-note { margin-bottom: 12px; }
.small { font-size: 12px; }
.user-card { display: flex; align-items: center; gap: 12px; }
.user-card p { margin: 2px 0 0; }
.user-avatar {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%; background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}

/* ---------- 项目详情：大纲列表 ---------- */
.outline { margin: 0; padding-left: 20px; font-size: 14px; }
.outline li { margin: 4px 0; }

/* ==========================================================
   阶段3新增：真实数据展示与后台管理组件
   ========================================================== */

/* ---------- 标签（项目类型 / 状态） ---------- */
.tag {
  display: inline-block; padding: 1px 8px; margin-left: 6px;
  border-radius: 999px; font-size: 12px; vertical-align: middle;
}
.tag-student { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.tag-partner { background: var(--color-warning-soft); color: var(--color-warning-text); }
.tag-on { background: var(--color-success-soft); color: var(--color-success-text); }
.tag-off { background: var(--color-bg-mute); color: var(--color-text-muted); }
.tag-lead { background: var(--color-lead-soft); color: var(--color-lead); }
/* 问题5：客资四态——已付款待开通（橙） */
.tag-lead-paid { background: var(--color-warning-soft); color: var(--color-warning); }

/* ---------- 首页：导师卡片 / 试听卡片 ---------- */
.mentor-card { display: flex; align-items: center; gap: 12px; }
.mentor-card p { margin: 2px 0 0; }
.trial-card { text-align: center; }
.trial-card .btn { margin-top: 10px; }
.pre-line { white-space: pre-line; }

/* ---------- 后台：导航 / 表格 / 操作 ---------- */
/* 优化23（2026-10-10）：后台改「左侧分组导航」—— 原 23 项顶栏平铺，收进 6 个分组 */
.admin-shell { display: flex; align-items: flex-start; min-height: 100dvh; }
.admin-side {
  flex: 0 0 198px; width: 198px; align-self: flex-start;
  background: var(--color-text); color: #fff;
  padding: 14px 10px 18px;
  position: sticky; top: 0; height: 100dvh; overflow-y: auto;
}
.admin-side-brand {
  font-size: 14px; font-weight: 600; color: #fff;
  padding: 4px 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, .16); margin-bottom: 10px;
}
.admin-side-nav { display: block; }
.admin-side-group { margin-bottom: 12px; }
.admin-side-title { font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .5); padding: 0 8px 4px; }
.admin-side-link { display: block; padding: 7px 9px; border-radius: 8px; font-size: 13px; color: rgba(255, 255, 255, .84); white-space: nowrap; }
.admin-side-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-side-link.is-active { background: var(--color-primary); color: #fff; font-weight: 600; }
.admin-side-logout { display: block; margin-top: 6px; padding: 0 4px; }
.admin-side-logout .btn { width: 100%; color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .32); }
.admin-body { flex: 1 1 auto; min-width: 0; }
.admin-menu-toggle { display: none; }
.admin-menu-btn { display: none; }

@media (max-width: 1023px) {
  .admin-shell { display: block; }
  .admin-menu-btn {
    display: block; position: sticky; top: 0; z-index: 40;
    background: var(--color-text); color: #fff;
    padding: 11px 14px; font-size: 14px; cursor: pointer;
  }
  .admin-side { display: none; position: static; width: auto; flex: none; height: auto; max-height: none; }
  .admin-menu-toggle:checked ~ .admin-shell .admin-side { display: block; }
}

.admin-topbar { flex-wrap: wrap; row-gap: 6px; }
.admin-nav { display: flex; align-items: center; gap: 12px; margin-left: auto; margin-right: 10px; }
.admin-nav a, .admin-nav span { font-size: 14px; color: var(--color-border-strong); white-space: nowrap; }
.admin-nav a.is-active { color: #fff; font-weight: 600; border-bottom: 2px solid var(--color-primary-line); }
.admin-nav .is-disabled { color: var(--color-text-muted); }
.admin-footer {
  padding: 14px; text-align: center; font-size: 12px;
  color: var(--color-text-muted); border-top: 1px solid var(--color-border);
}
.table-wrap {
  overflow-x: auto; /* 表格过宽时内部横向滚动，不影响页面本身 */
  background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.admin-table th, .admin-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--color-border); }
.admin-table th { background: var(--color-bg-soft); color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.admin-table td { white-space: nowrap; }
.admin-table .empty-cell { text-align: center; color: var(--color-text-muted); padding: 24px 10px; }
.ops { display: flex; align-items: center; gap: 10px; }
.ops a { font-size: 13px; }
.inline-form { display: inline; }
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--color-primary); font-size: 13px; font-family: inherit;
}
.admin-form textarea { resize: vertical; }
@media (max-width: 767px) {
  .admin-nav { width: 100%; order: 3; margin: 0; overflow-x: auto; }
}

/* ==========================================================
   阶段4新增：模拟支付与订单展示
   ========================================================== */
.pay-amount { font-size: 30px; font-weight: 700; color: var(--color-price); margin: 8px 0 14px; }
.success-card .btn-block { margin-top: 12px; }
.tag-paid { background: var(--color-warning-soft); color: var(--color-warning); }
.tag-refunded { background: var(--color-danger-soft); color: var(--color-danger-text); }

/* ==========================================================
   阶段5新增：双身份登录 / 学员中心 / 合伙人中心 / 后台操作
   ========================================================== */

/* ---------- 登录页身份入口（双 Tab） ---------- */
.role-tabs { display: flex; gap: 8px; margin: 14px 0 4px; }
.role-tab {
  flex: 1; padding: 9px 0; border-radius: 999px;
  border: 1px solid var(--color-border); background: #fff;
  color: var(--color-text-muted); font-size: 14px;
  cursor: pointer; font-family: inherit;
}
.role-tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
.role-tab.is-active.tab-partner { background: var(--color-warning); border-color: var(--color-warning); }
.form-ok { color: var(--color-success-text); font-size: 13px; margin: 8px 0 0; }
.section-gap { margin-top: 10px; }

/* ---------- 首页合伙人计划入口 ---------- */
.hero-extra { display: inline-block; margin-top: 12px; color: #fff; font-size: 13px; opacity: .92; }

/* ---------- 合伙人主题（金色，区别于学员版） ---------- */
.partner-hero { background: linear-gradient(135deg, var(--color-warning-text), var(--color-warning)); }
.tag-unlock { background: var(--color-warning-soft); color: var(--color-warning-text); margin-left: 6px; }
.promo-row { display: flex; gap: 8px; margin-top: 8px; }
.promo-row input {
  flex: 1; min-width: 0; padding: 9px 10px; font-size: 13px;
  border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-soft);
}
.copy-btn {
  flex-shrink: 0; border: 1px solid var(--color-primary); background: #fff;
  color: var(--color-primary); border-radius: 999px; padding: 6px 14px;
  font-size: 13px; cursor: pointer; font-family: inherit;
}
.copy-btn:active { background: var(--color-primary); color: #fff; }

/* ---------- 近30天趋势（轻量条形图） ---------- */
.trend-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; }
.trend-date { width: 42px; color: var(--color-text-muted); flex-shrink: 0; }
.trend-track { flex: 1; background: var(--color-bg-mute); border-radius: 999px; height: 10px; overflow: hidden; }
.trend-bar { display: block; height: 10px; background: linear-gradient(90deg, var(--color-warning), var(--color-warning-line)); border-radius: 999px; }
.trend-val { color: var(--color-text-muted); flex-shrink: 0; }

/* ---------- 海报位 ---------- */
.poster-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.poster-slot img { border-radius: var(--radius); border: 1px dashed var(--color-border); }
.poster-slot p { margin: 4px 0 0; text-align: center; }

/* ---------- 后台提示条与操作 ---------- */
.banner-ok {
  background: var(--color-success-soft); border: 1px solid var(--color-success-line); color: var(--color-success-text);
  padding: 12px 14px; border-radius: var(--radius); font-size: 14px; margin-top: 10px;
}
.banner-err {
  background: var(--color-danger-soft); border: 1px solid var(--color-danger-line); color: var(--color-danger-text);
  padding: 12px 14px; border-radius: var(--radius); font-size: 14px; margin-top: 10px;
}
.banner-ops { display: inline-flex; gap: 8px; margin-left: 8px; }
.banner-ok .copy-btn { border-color: var(--color-success); color: var(--color-success); }
.link-btn.danger { color: var(--color-danger); }
.bought-cell { white-space: normal !important; max-width: 220px; }

/* ---------- 朋友圈素材库（独立步骤） ---------- */
/* 后台：列表配图缩略图、草稿标签、页头行、编辑页图片管理 */
.admin-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.admin-head-row .section-title { margin: 0; }
.moment-thumbs img {
  width: 32px; height: 32px; object-fit: cover; border-radius: 4px;
  margin-right: 4px; vertical-align: middle; border: 1px solid var(--color-border);
}
.tag-draft { background: var(--color-bg-mute); color: var(--color-text-muted); }
.img-manage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.img-manage-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 12px; color: var(--color-text-muted);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 6px; cursor: pointer;
}
.img-manage-item img { width: 100%; height: 72px; object-fit: cover; border-radius: 6px; }

/* 前台：合伙人中心素材卡片 */
.moment-head { display: flex; align-items: center; gap: 6px; }
.tag-new {
  background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 600;
  border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
}
.moment-content {
  font-size: 14px; line-height: 1.7; margin: 8px 0;
  white-space: pre-wrap; word-break: break-word;
}
.moment-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.moment-imgs img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--color-border);
}
.moment-ops {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px; flex-wrap: wrap;
}
.moment-ops .muted-note { margin: 0; }

/* ---------- 第一批修复：订单重复购买标注 ---------- */
.tag-repeat { background: var(--color-warning-soft); color: var(--color-warning); margin-top: 2px; display: inline-block; }

/* ---------- 第二批：详情页双状态（需求6） ---------- */
.badge-unlock-partner {
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning)); color: #fff;
  border-color: transparent; font-weight: 600;
}
.badge-unlock-student {
  background: var(--color-success-soft); color: var(--color-success-text); font-weight: 600;
}
.detail-hero .badge { margin-right: 6px; }
.buy-bar-unlocked {
  background: var(--color-success-soft); border-top: 1px solid var(--color-success-line);
}
.course-empty { text-align: center; padding: 18px 0; font-size: 14px; }

/* ---------- 第二批：富文本渲染区（需求7） ---------- */
.rich-body { line-height: 1.8; word-break: break-word; }
.rich-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; }
.rich-body video, .rich-body .rich-video { max-width: 100%; width: 100%; max-width: 640px; border-radius: 8px; margin: 8px 0; display: block; }
.rich-body p { margin: 8px 0; }
.rich-body h1, .rich-body h2, .rich-body h3, .rich-body h4 { margin: 14px 0 8px; }
.rich-body ul, .rich-body ol { padding-left: 22px; margin: 8px 0; }
.rich-body blockquote {
  border-left: 3px solid var(--color-border); color: var(--color-text-muted);
  padding: 4px 12px; margin: 8px 0; background: var(--color-bg-soft); border-radius: 0 6px 6px 0;
}
.rich-body table { border-collapse: collapse; margin: 8px 0; max-width: 100%; }
.rich-body th, .rich-body td { border: 1px solid var(--color-border); padding: 6px 10px; font-size: 14px; }
.rich-body pre {
  background: var(--color-text); color: var(--color-bg-soft); padding: 12px; border-radius: 8px;
  overflow-x: auto; font-size: 13px;
}

/* ---------- 第二批：学员案例卡片与相册（需求8） ---------- */
.case-list { display: flex; flex-direction: column; gap: 12px; }
.case-head { display: flex; align-items: center; gap: 8px; }
.case-content {
  font-size: 14px; line-height: 1.7; margin: 8px 0;
  white-space: pre-wrap; word-break: break-word; color: var(--color-text);
}
.case-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 4px; }
.case-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--color-border);
  cursor: zoom-in; transition: opacity .15s;
}
.case-img:hover { opacity: .85; }

/* 灯箱（点击案例截图放大） */
.lightbox-mask {
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: rgba(15, 23, 42, .82); align-items: center; justify-content: center;
  padding: 20px; cursor: zoom-out;
}
.lightbox-mask.is-open { display: flex; }
.lightbox-mask img {
  max-width: 94vw; max-height: 88vh; border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
}
/* 灯箱右上角 × 关闭（第十一轮问题2） */
.lightbox-close {
  position: absolute; top: 14px; right: 18px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(15, 23, 42, .55);
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 4px 0;
}
.lightbox-close:hover { background: rgba(15, 23, 42, .8); }

/* ---------- 第二批：试听板块（需求9） ---------- */
.trial-video video { width: 100%; max-width: 640px; border-radius: 8px; margin-top: 8px; }

/* ---------- 第二批：后台补充组件 ---------- */
.flash-ok { border-left: 4px solid var(--color-success); color: #166534; background: var(--color-success-soft); }
.flash-err { border-left: 4px solid var(--color-danger); color: var(--color-danger-text); background: var(--color-danger-soft); }
.btn-danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.btn-danger:hover { background: var(--color-danger-line); }
.cell-ellipsis { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-ops { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cell-ops .inline-form { display: inline; }
.tbl-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; vertical-align: middle; border: 1px solid var(--color-border); }

/* ---------- 第三批：素材编辑页仿朋友圈九宫格 ---------- */
.img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 420px; margin-top: 6px; }
.img-cell {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 10px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-bg-soft);
}
.img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.img-cell.img-add {
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: var(--color-text-weak); cursor: pointer; background: var(--color-bg-mute);
  border: 1px dashed var(--color-border-strong);
}
.img-cell.img-add:hover { background: var(--color-border); color: var(--color-text-muted); }
.img-del { position: absolute; top: 4px; right: 4px; cursor: pointer; }
.img-del input { display: none; }
.img-del span {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(17, 24, 39, .68); color: #fff; font-size: 14px; line-height: 1;
}
.img-del input:checked + span { background: var(--color-danger); content: '删'; }
.img-del input:checked ~ span::after { content: ''; }
/* 第一批需求1：九宫格即时上传占位格 */
.img-cell.img-uploading {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--color-text-muted); background: var(--color-bg-soft);
  border: 1px dashed var(--color-border-strong);
}

/* ---------- 第三批：看板时间筛选与图表 ---------- */
.range-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.range-bar a.range-chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--color-border);
  color: var(--color-text); text-decoration: none; font-size: 13px; background: #fff;
}
.range-bar a.range-chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.range-custom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.range-custom input[type="date"] { padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 6px; font-size: 13px; }
.chart-box { width: 100%; height: 320px; }
.chart-half { width: 100%; height: 300px; }
.stat-refund { color: var(--color-danger-text); font-size: 12px; }

/* ---------- 第二轮第一批：详情页重排 / 卡片角标 / 大纲预览 / 已购卡片 ---------- */
/* 需求1：详情横幅价格行（未解锁视角） */
.hero-price { margin-top: 10px; font-size: 22px; font-weight: 700; color: var(--color-price, var(--color-price)); }
.hero-price-note { font-size: 12px; font-weight: 400; color: rgba(255,255,255,.75); }
/* 需求1：课程大纲（预览限制 / 已解锁完整展示） */
.outline-card { display: flex; flex-direction: column; gap: 2px; }
.outline-module { font-weight: 700; font-size: 14px; padding: 7px 2px 3px; color: var(--color-text); }
.outline-module::before { content: "▸ "; color: var(--color-primary); }
.outline-item { font-size: 13px; color: var(--color-text-muted); padding: 2px 2px 2px 20px; }
.outline-lock {
  margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: var(--color-warning-soft); color: var(--color-warning); border: 1px dashed var(--color-warning-line); text-align: center;
}
/* 需求3：卡片「已购/已解锁」角标（列表卡/首页热门卡/个人中心已购卡通用） */
.card-owned { position: relative; overflow: hidden; }
.owned-badge {
  position: absolute; top: 0; right: 0; z-index: 2;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 5px 10px; border-radius: 0 10px 0 10px; color: #fff;
}
.owned-student { background: var(--color-success); }           /* 学员已购：绿 */
.owned-partner { background: var(--color-warning); }           /* 合伙人已解锁：金 */
.price-owned { color: var(--color-success) !important; font-size: 13px !important; font-weight: 600 !important; }
/* 需求5：灯箱加载失败提示 */
.lightbox-error { color: var(--color-danger-line); font-size: 14px; }

/* ==========================================================
   第三批：后台交互优化 / UI 现代化 / 前台 Logo + 客服入口
   ========================================================== */

/* ---------- 需求4：后台表单页现代化（卡片容器 / 标签在上 / 圆角 / 间距 / 按钮体系） ---------- */
.form-card { padding: 18px 16px; }
/* 包A：以下三条原与详情页 .form-row（横排）同名冲突、被其覆盖，故更名为 .form-row-stack（竖排：标签在上）。
   当前观感不变；是否把后台表单页恢复为竖排见《包A-查验清单》建议项 */
.form-row-stack { display: grid; gap: 6px; margin-bottom: 16px; }
.form-row-stack:last-of-type { margin-bottom: 0; }
.form-row-stack .muted-note { margin-top: 2px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--color-text); }
.form-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-card select,
.form-card textarea,
.admin-form input,
.admin-form select,
.admin-form textarea {
  width: 100%; padding: 11px 12px; font-size: 15px;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: #fff; color: var(--color-text); font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus,
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, .12);
}
.form-card textarea, .admin-form textarea { resize: vertical; line-height: 1.6; }
.form-card input[type="file"] {
  padding: 9px; background: var(--color-bg-soft); border: 1px dashed var(--color-border-strong); border-radius: 10px;
  font-size: 13px; color: var(--color-text-muted);
}
.form-ops { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
/* 筛选栏统一现代化 */
.filter-bar { padding: 12px 14px; }
.filter-bar label { font-size: 13px; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.filter-bar input[type="text"], .filter-bar select {
  padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px;
  font-size: 13px; background: #fff; font-family: inherit;
}
.range-custom select, .range-custom input[type="text"] {
  padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px;
  font-size: 13px; background: #fff; font-family: inherit;
}

/* ---------- 需求3b/需求4：描边按钮体系（编辑蓝 / 上下架橙 / 删除红 / 主操作蓝实心） ---------- */
.btn-outline-blue { background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary); }
.btn-outline-blue:active { background: var(--color-primary); color: #fff; }
.btn-outline-orange { background: #fff; border: 1px solid var(--color-warning); color: var(--color-warning); }
.btn-outline-orange:active { background: var(--color-warning); color: #fff; }
.btn-outline-red { background: #fff; border: 1px solid var(--color-danger); color: var(--color-danger); }
.btn-outline-red:active { background: var(--color-danger); color: #fff; }

/* ---------- 需求1：订单行锚点高亮 / 行内归属二选一 / 留存凭据展示 ---------- */
tr.row-hl { animation: rowFlash 2.2s ease-out 1; }
@keyframes rowFlash { 0% { background: var(--color-warning-soft); } 100% { background: transparent; } }
tr.row-pending-choice { background: var(--color-warning-soft); box-shadow: inset 3px 0 0 var(--color-warning); }
.choice-row td {
  background: var(--color-warning-soft); padding: 12px 14px;
  border-bottom: 1px solid var(--color-border); white-space: normal;
}
.choice-box { font-size: 13px; color: var(--color-warning-text); line-height: 1.7; }
.choice-ops { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.cred-text { font-weight: 600; letter-spacing: .3px; }
.copy-mini { padding: 2px 10px; font-size: 12px; margin-left: 6px; }
.cred-note { display: inline-block; margin-top: 2px; font-size: 11px; color: var(--color-warning-text); }
.user-link { font-weight: 600; }
.crumb { font-size: 13px; margin: 0 0 6px; }
.crumb a { color: var(--color-text-muted); }

/* ---------- 需求6a：前台导航 Logo（后台可上传；无则占位图标） ---------- */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.brand-logo-ph {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary));
  color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 需求6b：前台右下角悬浮「联系客服」按钮 + 弹出卡片 ---------- */
/* F包优化24（2026-10-10）：悬浮球支持「拖动移动 + 位置记忆 + 可收起」，
   并自动避开详情页吸底的「立即购买」栏（位置由 /js/main.js 计算写入 left/top）。 */
.service-fab {
  position: fixed; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 300;
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: grab;
  background: linear-gradient(135deg, #07c160, var(--color-success)); color: #fff;
  box-shadow: 0 6px 18px rgba(7, 193, 96, .4);
  display: flex; align-items: center; justify-content: center;
  touch-action: none; -webkit-user-select: none; user-select: none;
  transition: width .18s, height .18s, opacity .18s, box-shadow .18s;
}
.service-fab:active { transform: scale(.95); }
.service-fab svg { width: 26px; height: 26px; fill: currentColor; pointer-events: none; }
.service-fab.is-dragging { transition: none; cursor: grabbing; transform: scale(1.04); }
.service-fab.is-collapsed { width: 36px; height: 36px; opacity: .62; box-shadow: 0 4px 12px rgba(7, 193, 96, .32); }
.service-fab.is-collapsed svg { width: 18px; height: 18px; }
.service-fab.is-collapsed:hover { opacity: .9; }
.service-card {
  position: fixed; right: 14px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 301;
  width: min(300px, calc(100vw - 28px)); background: var(--color-card);
  border-radius: 16px; box-shadow: 0 12px 40px rgba(15, 23, 42, .22);
  padding: 16px; display: none;
}
.service-card.is-open { display: block; }
.service-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.service-title { font-size: 15px; font-weight: 700; margin: 0; }
.service-close {
  border: none; background: none; font-size: 20px; line-height: 1;
  color: var(--color-text-muted); cursor: pointer; padding: 0 4px;
}
.service-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-top: 1px dashed var(--color-border);
}
.service-row .svc-label { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }
.service-row .svc-value { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; word-break: break-all; }
.service-qrcode {
  width: 100%; border: 1px solid var(--color-border); border-radius: 10px; margin-top: 6px;
}
.service-tip { font-size: 12px; color: var(--color-text-muted); margin: 8px 0 0; text-align: center; }
/* 卡片底部：悬浮球操作（收起 / 位置提示） */
.service-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border);
}
.service-drag-hint { font-size: 12px; color: var(--color-text-muted); }
.service-collapse {
  border: 1px solid var(--color-border); background: var(--color-bg-soft);
  color: var(--color-text-sub); border-radius: 999px; padding: 5px 12px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
}
.service-collapse:hover { background: var(--color-bg-mute); color: var(--color-text); }

/* ---------- 需求6：网站设置页预览 ---------- */
.logo-preview { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-preview img {
  width: 64px; height: 64px; object-fit: contain;
  border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-soft); padding: 4px;
}
.logo-preview .qrcode-preview { width: 96px; height: 96px; object-fit: cover; padding: 0; }
.logo-ph {
  font-size: 13px; color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong); border-radius: 10px; padding: 14px 18px; background: var(--color-bg-soft);
}
.clear-row { margin-top: 8px; }

/* ---------- 新一轮第二批：开通成功行内提示 / 归属账号链接 / 运营备注标签 / 备注弹层 ---------- */
/* 开通成功、退款提示贴在该订单行内（choice-row 复用）+ 成功态配色 */
.choice-row td.banner-inline-ok,
.choice-box.banner-inline-ok { color: var(--color-success-text); }
.choice-row:has(.banner-inline-ok) td { background: var(--color-success-soft); }
.choice-box.banner-inline-ok .muted-note { color: var(--color-success); }
.choice-box.banner-inline-ok .copy-btn { border-color: var(--color-success); color: var(--color-success); }
/* 归属账号可点击进入用户详情 */
.cred-link { font-weight: 700; color: var(--color-primary); text-decoration: none; }
.cred-link:active { opacity: .7; }
/* 运营备注小标签（列表手机号旁、详情页） */
.tag.note-tag {
  background: var(--color-primary-soft); color: var(--color-indigo); border: 1px solid #c7d2fe;
  margin-left: 6px; font-weight: 500;
}
/* 运营备注编辑弹层 */
.modal-mask {
  position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-mask[hidden] { display: none; }
.modal-box {
  background: var(--color-card); border-radius: 14px; padding: 18px;
  width: min(420px, 100%); box-shadow: 0 16px 44px rgba(15, 23, 42, .28);
}
.modal-box h3 { margin: 0 0 8px; font-size: 16px; }
.note-label { display: block; font-size: 13px; color: var(--color-text-muted); margin: 6px 0; }
.modal-ops { display: flex; gap: 10px; margin-top: 12px; }
/* 详情页备注表单行 */
.form-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ================= 新一轮第三批：课程内容交付系统（后台课程管理 + 前台学习页） ================= */

/* ---- 后台：项目编辑页标签区 ---- */
.tab-btn {
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  padding: 9px 14px; font-size: 15px; color: var(--color-text-muted); font-weight: 600;
}
.tab-btn.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---- 后台：课程管理（章节 / 课时） ---- */
.course-summary { font-size: 14px; }
.chapter-block { border-left: 3px solid var(--color-primary); }
.chapter-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.chapter-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chapter-title { font-size: 15px; }
.chapter-meta { font-size: 12px; color: var(--color-text-muted); }
.chapter-ops { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lesson-list { margin: 10px 0; border-top: 1px dashed var(--color-border); }
.lesson-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 4px; border-bottom: 1px dashed var(--color-border);
}
.lesson-row:last-child { border-bottom: none; }
.lesson-title { font-weight: 600; flex: 1; min-width: 140px; }
.lesson-ops { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.lesson-dur { font-size: 12px; color: var(--color-text-muted); }
.tag.tag-free { background: var(--color-warning-soft); color: var(--color-warning); border: 1px solid var(--color-warning-line); }
.lesson-type-tag, .tag.lesson-type-video, .tag.lesson-type-image, .tag.lesson-type-richtext {
  font-size: 11px; padding: 1px 7px; border-radius: 5px; border: 1px solid;
}
.lesson-type-tag.lesson-type-video, .tag.lesson-type-video { background: var(--color-primary-soft); color: var(--color-indigo); border-color: #c7d2fe; }
.lesson-type-tag.lesson-type-image, .tag.lesson-type-image { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.lesson-type-tag.lesson-type-richtext, .tag.lesson-type-richtext { background: var(--color-success-soft); color: var(--color-success-text); border-color: var(--color-success-line); }
.modal-box.modal-wide { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; }
.check-label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.check-label input { width: auto; }
.video-up-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lesson-video-preview { width: 100%; max-width: 420px; border-radius: 8px; margin: 8px 0; display: block; background: #000; }

/* ---- 前台：独立学习页 ---- */
.learn-page { padding: 12px 0 30px; }
.learn-top { padding: 14px; margin-bottom: 12px; }
.learn-back { font-size: 13px; color: var(--color-text-muted); display: inline-block; margin-bottom: 6px; }
.learn-course-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 17px; }
.learn-course-meta { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.learn-buy { margin-top: 10px; }
.badge-unlock-partner-mini { background: var(--color-warning-soft); color: var(--color-warning-text); border: 1px solid var(--color-warning-line); }
.badge-unlock-student-mini { background: var(--color-success-soft); color: var(--color-success-text); border: 1px solid var(--color-success-line); }

.learn-layout { display: flex; gap: 12px; align-items: flex-start; flex-direction: column; }
.learn-side { width: 100%; padding: 0; overflow: hidden; }
.learn-side-head { padding: 11px 14px; font-weight: 700; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); }
.learn-chapter { border-bottom: 1px solid var(--color-border); }
.learn-chapter-head {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: none; border: none; cursor: pointer; padding: 10px 14px; font-size: 14px; font-weight: 600;
  color: var(--color-text);
}
.lc-caret { color: var(--color-text-muted); flex-shrink: 0; width: 12px; }
.lc-title { flex: 1; min-width: 0; }
.lc-count { font-size: 12px; color: var(--color-text-muted); flex-shrink: 0; }
.learn-chapter.is-collapsed .learn-lessons { display: none; }
.learn-lessons { padding: 0 0 6px; }
.learn-lesson {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 26px;
  font-size: 13px; color: var(--color-text); text-decoration: none; border-left: 3px solid transparent;
}
.learn-lesson:active { background: var(--color-bg-mute); }
.learn-lesson.is-current { background: var(--color-primary-soft); border-left-color: var(--color-primary); font-weight: 600; }
.learn-lesson.is-locked { color: var(--color-text-muted); }
.ll-index { color: var(--color-text-muted); font-size: 12px; flex-shrink: 0; }
.ll-title { flex: 1; min-width: 0; }
.ll-lock { flex-shrink: 0; }
.ll-type { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; }
.ll-dur { font-size: 11px; color: var(--color-text-muted); flex-shrink: 0; }

.learn-main { width: 100%; padding: 16px; }
.learn-lesson-head { border-bottom: 1px solid var(--color-border); padding-bottom: 10px; margin-bottom: 12px; }
.learn-lesson-title { font-size: 17px; margin: 0 0 6px; }
.learn-lesson-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.learn-video { width: 100%; border-radius: 10px; background: #000; display: block; }
.learn-images { display: flex; flex-direction: column; gap: 10px; }
.learn-image { width: 100%; border-radius: 10px; border: 1px solid var(--color-border); cursor: zoom-in; }
.learn-empty { text-align: center; padding: 24px 10px; }
.learn-richtext { line-height: 1.8; }
/* 问题1：富文本图片可点击放大（接入灯箱），悬停给放大镜提示 */
.learn-richtext img { cursor: zoom-in; }

/* ---------- 问题4：试看限制（图文截断转化块 / 视频试看结束弹层） ---------- */
.preview-fade-tail { color: var(--color-text-weak); letter-spacing: 4px; }
.preview-end-block { position: relative; margin-top: -8px; }
.preview-end-block .preview-fade {
  height: 90px; border-radius: 0 0 10px 10px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 78%);
}
.preview-end-block .preview-end-tip {
  text-align: center; padding: 10px 12px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.preview-end-block .preview-end-tip b { font-size: 15px; }
.preview-end-block .preview-end-tip span { color: var(--color-text-muted); font-size: 13px; }
.preview-end-mask {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px);
}
.preview-end-box {
  background: #fff; border-radius: 14px; padding: 26px 26px 22px; width: min(400px, 88vw);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); text-align: center;
}
.preview-end-box h3 { margin: 0 0 10px; font-size: 18px; }
.preview-end-box p { margin: 0 0 16px; color: var(--color-text-sub); font-size: 14px; line-height: 1.7; }
.preview-end-ops { display: flex; gap: 10px; justify-content: center; }

/* 桌面端：左侧目录固定、右侧内容自适应 */
@media (min-width: 860px) {
  .learn-layout { flex-direction: row; }
  .learn-side { width: 320px; flex-shrink: 0; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; }
  .learn-main { flex: 1; min-width: 0; }
}

/* ---------- 第四轮需求7：详情页免费试看课时列表 ---------- */
.free-lesson-list { display: flex; flex-direction: column; }
.free-lesson-item {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 4px; border-bottom: 1px dashed var(--color-border);
  text-decoration: none; color: inherit;
}
.free-lesson-item:last-child { border-bottom: none; }
.free-lesson-item .fl-title { flex: 1 1 auto; min-width: 0; }
.free-lesson-item .fl-type { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.free-lesson-item .fl-go { font-size: 13px; color: var(--color-primary); white-space: nowrap; }
.free-lesson-item:active { background: var(--color-primary-soft); }

/* ---------- 第四轮需求11：业绩看板时间筛选与可点数字 ---------- */
.range-tabs { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.range-tab {
  padding: 6px 14px; border-radius: 16px; font-size: 13px; text-decoration: none;
  color: var(--color-text-muted); background: var(--color-bg-mute); border: 1px solid transparent;
}
.range-tab.is-active { background: var(--color-primary); color: #fff; font-weight: 600; }
.stat-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; }
.stat-link .stat-go { font-size: 12px; color: var(--color-primary); }
.stat-link:active { background: var(--color-primary-soft); }

/* ---------- file input 全局兜底（上传弹窗修复） ----------
 * 根因：display:none 的 file input 调 .click() 时，部分 Edge/Chrome 不弹系统文件窗。
 * 兜底：强制所有 file input 变为 1px 透明定位（无论 JS 给它设了 display:none 还是
 * hidden 属性，包括 wangEditor 内部 jQuery hide() 创建的选择框），.click() 均可稳定弹窗。
 * 对真实布局无影响（1px 绝对定位 + opacity:0，用户不可见不可点）。 */
input[type="file"] {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
}

/* 第七轮七-6（2026-10-04）：原生可见上传控件的豁免类
 * 根因：上面这条全局兜底把【所有】file input 都变成 1px 透明不可点，
 * 误伤了「不靠 JS、直接点击选择文件」的页面上传控件（公众号挂载二维码、打粉佐证），
 * 甲方视角 = 点不开文件夹、也拖不进文件。需要原生可见可点的 file input 加 class="file-native"。 */
input[type="file"].file-native {
  position: static !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid var(--color-border, var(--color-border)) !important;
  border-radius: 8px !important;
  background: #fff !important;
  font-size: 13px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* ============ P4：合伙人我的订单详情弹层 + 长订单号换行 ============ */
.wrap-all { word-break: break-all; white-space: normal; min-width: 110px; }
.order-no-link { background: none; border: 0; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; text-decoration: underline; }
.order-no-link:hover { color: var(--color-primary-dark); }
.order-detail-mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: none; align-items: flex-start; justify-content: center; z-index: 90; padding: 40px 16px; }
.order-detail-mask.is-open { display: flex; }
.order-detail-box { background: #fff; border-radius: 14px; width: min(430px, 100%); max-height: 82vh; overflow-y: auto; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.order-detail-box h3 { margin: 0 0 10px; font-size: 16px; }
.order-detail-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--color-border); font-size: 13px; }
.order-detail-kv span { color: var(--color-text-muted); flex-shrink: 0; }
.order-detail-kv b { word-break: break-all; text-align: right; font-weight: 600; }
.order-detail-close { margin-top: 14px; width: 100%; }

/* ============ P6：今日开通清单（防漏发） ============ */
.pwd-checklist { border: 1px solid var(--color-warning-line); background: var(--color-warning-soft); }
.pwd-checklist summary { cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pwd-checklist summary::marker { color: var(--color-warning); }

/* ============ P8：后台幽灵按钮统一改有底色（仅 /admin，前台不动） ============ */
/* 原样式透明底+浅灰白字在白卡片上几乎不可读；统一改为浅色底+深色字次要按钮，主按钮蓝色不动 */
.admin-page .btn-ghost {
  background: var(--color-primary-soft); border: 1px solid #c7d2fe; color: var(--color-indigo);
}
.admin-page .btn-ghost:active { background: var(--color-lead-soft); }
.admin-page .btn-ghost-light {
  background: var(--color-bg-mute); border: 1px solid var(--color-border-strong); color: var(--color-text-sub);
}
.admin-page .btn-ghost-light:active { background: var(--color-border); }
/* 行内文字链按钮（设为学员/备注/停用/客资等）也补上浅蓝底，视觉更实 */
.admin-page .link-btn {
  background: var(--color-primary-soft); border: 1px solid var(--color-primary-line); color: var(--color-primary-dark);
  padding: 3px 10px; border-radius: 6px; font-size: 12px;
}
.admin-page .link-btn:active { background: var(--color-primary-soft); }
.admin-page .link-btn.danger {
  background: var(--color-danger-soft); border-color: var(--color-danger-line); color: var(--color-danger-text);
}
.admin-page .link-btn.danger:active { background: var(--color-danger-soft); }

/* ============ 拖拽上传区（文件选择对话框失效环境的兜底通道） ============ */
.drop-zone {
  margin: 8px 0; padding: 14px 12px;
  border: 2px dashed #c7d2fe; border-radius: 8px;
  background: var(--color-primary-soft); color: var(--color-text-muted);
  font-size: 13px; text-align: center;
  transition: border-color .15s, background .15s;
}
.drop-zone.is-dragover {
  border-color: var(--color-indigo); background: var(--color-primary-soft); color: var(--color-indigo);
}
.img-grid.is-dragover { outline: 2px dashed var(--color-indigo); outline-offset: 2px; border-radius: 8px; }
#l-rt-editor.is-dragover, #l-extra-editor.is-dragover, #intro-editor.is-dragover {
  outline: 2px dashed var(--color-indigo); outline-offset: -2px;
}

/* ============ 团队工作台（A 批）+ 员工管理 ============ */
.cred-code { font-family: Consolas, monospace; background: var(--color-bg-mute); border: 1px solid var(--color-border); border-radius: 6px; padding: 2px 6px; }
.staff-ops { display: flex; gap: 6px; flex-wrap: wrap; }
/* 第八轮八-3：员工对外联系方式（交付老师给学员看的微信号/手机/企微二维码） */
.contact-box summary { cursor: pointer; font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.contact-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 220px; }
.contact-form label { font-size: 12px; color: var(--color-text-sub); display: flex; flex-direction: column; gap: 3px; }
.contact-form input[type="text"] { padding: 5px 8px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 12px; }
.contact-qr-preview { align-items: flex-start; }
.contact-qr-preview img { width: 78px; height: 78px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
/* 交付老师卡片（学员中心） */
.deliver-card { border: 1px solid #c7d2fe; background: var(--color-primary-soft); border-radius: 12px; padding: 12px 14px; margin-top: 8px; }
.deliver-card .deliver-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.deliver-card .deliver-body { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* 第五批优化38：二维码必须完整显示（原 cover 会裁掉边缘导致扫不出）+ 点击放大指针 */
.deliver-card .deliver-body img.deliver-qr {
  width: 128px; height: 128px; object-fit: contain; border-radius: 10px;
  border: 1px solid var(--color-border); background: #fff; cursor: zoom-in;
}
.js-zoom-img { cursor: zoom-in; }
.img-save-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--color-text); }
.img-save-error { margin: 6px 0 0; font-size: 13px; color: var(--color-danger-line); }
.qr-inline { display: inline-flex; align-items: center; gap: 4px; }
.qr-inline img.qr-thumb { width: 40px; height: 40px; object-fit: contain; cursor: zoom-in; }
.deliver-card .deliver-lines { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-text-sub); }
.deliver-qr-tip { font-size: 12px; color: var(--color-text-muted); }
.wb-user-chip { font-size: 13px; color: var(--color-text-sub); background: var(--color-bg-mute); border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.wb-status-card { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.wb-status-card b { font-size: 14px; }

/* ---------- A包（2026-10-10）：首页按部门/角色出指标 ---------- */
.stat-hint { font-style: normal; font-size: 11px; color: var(--color-text-sub, #71717a); margin-left: 4px; }
.wb-dept-card { border-left: 3px solid #6d28d9; }
.wb-dept-stats { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 4px 0; }
.wb-dept-item { display: flex; flex-direction: column; min-width: 96px; }
.wb-dept-label { font-size: 12px; color: var(--color-text-sub, #71717a); }
.wb-dept-value { font-size: 20px; line-height: 1.3; }
.wb-dept-hint { margin: 2px 0 0; font-size: 12px; }
.wb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.wb-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.wb-card:hover { border-color: var(--color-indigo); box-shadow: 0 2px 10px rgba(79, 70, 229, .08); }
.wb-card-title { margin: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.wb-card .muted-note { margin: 0; flex: 1; }
.wb-card.wb-disabled { opacity: .62; }
.wb-go { font-size: 13px; color: var(--color-indigo); font-weight: 600; }
.wb-card.wb-disabled .wb-go { color: var(--color-text-weak); font-weight: 400; }

/* ---------- 团队工作台 B 批：素材卡片 ---------- */
.mat-card { margin-bottom: 14px; }
.mat-thumbs { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.mat-thumbs img { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }

/* 后台员工管理：操作后定位高亮（5 秒后渐隐） */
tr.row-focus > td { background: var(--color-warning-soft); transition: background .9s ease; }
tr.row-focus-fade > td { background: transparent; }
/* 操作结果直接显示在被操作行下方（问题3：不再只靠页顶横幅） */
tr.row-inline-msg > td {
  background: var(--color-success-soft); color: var(--color-success-text); font-size: 13px;
  padding: 7px 12px; border-top: 1px dashed var(--color-success-line);
}
.tag-role { background: var(--color-primary-soft); color: var(--color-indigo); border-color: #c7d2fe; }

/* 素材筛选：日期标签 + 统计条 */
.filter-date-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-sub); }
.mat-stats {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 14px; font-size: 13px; color: var(--color-text-sub);
}
.mat-stats-main { font-size: 18px; color: var(--color-primary-dark); margin: 0 2px; }
.mat-stats-sub b { color: var(--color-text-strong); margin: 0 2px; }

/* ---------- B 批（问题2 改版）：分发工作台紧凑卡片 ---------- */
.dc-card {
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px;
}
.dc-body { display: flex; gap: 14px; }
.dc-thumb {
  position: relative; width: 76px; height: 76px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: var(--color-bg-mute);
  border: 1px solid var(--color-border); cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
}
.dc-thumb img, .dc-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-thumb-badge {
  position: absolute; right: 4px; bottom: 4px; font-size: 11px;
  background: rgba(15,23,42,.72); color: #fff; border-radius: 6px; padding: 0 5px; line-height: 16px;
}
.dc-thumb-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 30px; height: 30px; border-radius: 50%; background: rgba(15,23,42,.6);
  color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.dc-thumb-empty { font-size: 11px; color: var(--color-text-weak); }
.dc-main { flex: 1; min-width: 0; }
.dc-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.dc-title { font-size: 14px; }
.dc-head-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dc-copy {
  margin: 5px 0 4px; font-size: 13px; color: var(--color-text-sub);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.dc-meta { margin: 0 0 8px; font-size: 12px; color: var(--color-text-weak); }
.dc-plats { display: flex; gap: 6px; flex-wrap: wrap; }
.dc-chip { font-size: 12px; border-radius: 999px; padding: 2px 10px; line-height: 18px; border: 1px solid transparent; }
.chip-free { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-line); }
.chip-taken { background: var(--color-bg-mute); color: var(--color-text-muted); border-color: var(--color-border); }
.chip-taken-done { background: var(--color-bg-soft); color: var(--color-text-weak); border-color: var(--color-border); text-decoration: line-through; }
.chip-mine { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-line); font-weight: 600; }
.chip-mine-done { background: var(--color-primary-soft); color: var(--color-primary-dark); border-color: var(--color-primary-line); font-weight: 600; }
.dc-ops {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border-top: 1px dashed var(--color-border); margin-top: 10px; padding-top: 10px;
}
.dc-op-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dc-op-form label { font-size: 13px; color: var(--color-text-sub); }
.dc-hint { font-size: 12px; color: var(--color-text-weak); }
.dc-ops-feedback { flex-direction: column; align-items: stretch; gap: 8px; }
.dc-fb-label { font-size: 13px; color: var(--color-text-sub); white-space: nowrap; }
.dc-ops-done { gap: 8px; font-size: 13px; color: var(--color-text-sub); }
/* 预览弹层 */
.dc-lightbox {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
}
.dc-lightbox-mask { position: absolute; inset: 0; background: rgba(15,23,42,.62); }
.dc-lightbox-inner {
  position: relative; background: #fff; border-radius: 14px; padding: 16px 18px;
  max-width: 90vw; max-height: 92vh; overflow: auto; text-align: center;
}
.dc-lightbox-title { display: block; font-size: 14px; margin-bottom: 10px; }
/* F包优化20（2026-10-10）：预览灯箱右上角常驻 × 关闭按钮。
   原底部「关闭」按钮在内容超高时会被滚出视野，用户以为"没有退出按钮"。
   要点：× 必须放在滚动容器 .dc-lightbox-inner 之外（作为 .dc-lightbox 的直接子元素），
   否则容器内滚动时它同样会被滚走 —— 放外层后固定在视口右上角，永远可见。 */
.dc-lb-close {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; padding: 0 0 4px 0;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(15, 23, 42, .6);
  color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dc-lb-close:hover { background: rgba(15, 23, 42, .88); }

/* ---------- 素材预览灯箱升级（2026-10-09 团队反馈#3/#5：大图自适应横竖版 + 下载按钮） ---------- */
.dc-img-list { display: flex; flex-direction: column; gap: 18px; align-items: center; max-height: 64vh; overflow: auto; padding: 2px; }
.dc-img-item { text-align: center; }
.dc-img-item img {
  display: block; width: auto; height: auto; margin: 0 auto;
  max-width: min(820px, 86vw); max-height: 56vh;
  border-radius: 10px; border: 1px solid #e4e4e7; background: #fff;
}
.dc-img-ops { margin-top: 6px; }
.dc-lb-ops { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.dc-lb-ops-top { margin: 0 0 12px; }
.dc-lb-hevc-tip {
  max-width: min(680px, 86vw); margin: 10px auto 0; padding: 10px 12px;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 10px;
  font-size: 13px; line-height: 1.7; color: #92400e; text-align: left;
}
/* 我的分发记录卡片内操作行（2026-10-09 团队反馈#6：素材直达） */
.dc-rec-ops { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

/* ---------- 问题1/4/6：素材编号徽章 / 退回原因 / 平台占用明细 / 统计条分组 ---------- */
.code-badge {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 600; color: var(--color-primary-dark); background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-line); border-radius: 6px; padding: 1px 7px; letter-spacing: .3px;
}
.reject-note {
  margin: 4px 0 2px; font-size: 13px; color: var(--color-danger-text); background: var(--color-danger-soft);
  border-left: 3px solid var(--color-danger); border-radius: 0 6px 6px 0; padding: 5px 10px;
}
.mat-plat-detail { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.mplat { font-size: 12px; border-radius: 6px; padding: 2px 8px; line-height: 18px; border: 1px solid transparent; }
.mplat-free { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-line); }
.mplat-taken { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-line); font-weight: 600; }
.mplat-done { background: var(--color-bg-mute); color: var(--color-text-sub); border-color: var(--color-border-strong); }
/* 统计条分组（问题5：我的今日 / 素材库存） */
.mat-stats-group {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-right: 16px; margin-right: 4px; border-right: 1px solid var(--color-border);
}
.mat-stats-group:last-child { border-right: none; padding-right: 0; }
.mat-stats-title {
  font-size: 12px; font-weight: 600; color: var(--color-text-muted); background: var(--color-bg-mute);
  border-radius: 6px; padding: 2px 8px;
}
.mat-stats-item { font-size: 13px; color: var(--color-text-sub); }
/* 分发台账统计条（第八轮八-2：位于筛选栏下方，口径随筛选走） */
.stats-bar { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.stats-bar > .muted-note { margin-right: auto; }
.mat-stats-item b { font-size: 16px; margin: 0 2px; }

/* ---------- 问题2：分发台双区 + 平台占用表格 + 平台筛选 ---------- */
.zone-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 18px 0 10px; padding-left: 10px; border-left: 4px solid var(--color-primary);
}
.zone-name { font-size: 16px; font-weight: 700; color: var(--color-text); }
.zone-desc { font-size: 13px; color: var(--color-text-muted); }
.zone-actions { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* 问题8：我的分发记录日期选择器归位（标题旁，选中态高亮 + 选完自动跳转） */
.zone-date-hi { color: var(--color-primary-dark); }
.zone-actions .btn.is-on { background: var(--color-primary-soft); border-color: var(--color-primary-line); color: var(--color-primary-dark); font-weight: 700; }
.mine-date-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
/* B 包（优化2/3）：我的分发记录编号搜索 + 素材发布标签展示/点选 */
.mine-code-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.mine-tags {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px;
  background: var(--color-primary-soft); color: var(--color-primary-dark);
  font-size: 12px; line-height: 18px; word-break: break-all;
}
.tag-pick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.tag-pick-btn {
  background: var(--color-bg-mute); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; color: var(--color-text-sub);
  cursor: pointer; font-family: inherit;
}
.tag-pick-btn:hover { border-color: var(--color-primary-line); color: var(--color-primary-dark); }
.pending-jump { color: var(--color-warning-text); font-weight: 600; text-decoration: none; }
.pending-jump:hover { text-decoration: underline; }
.zone-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.plat-filter-label { font-size: 13px; color: var(--color-text-sub); }
.plat-filter { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.plat-check {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--color-text-sub);
  background: var(--color-bg-mute); border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 11px; cursor: pointer;
}
.plat-check.is-on { background: var(--color-primary-soft); border-color: var(--color-primary-line); color: var(--color-primary-dark); font-weight: 600; }
.plat-check input { margin: 0; }
.plat-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 12.5px; }
.plat-table th {
  text-align: left; font-weight: 500; color: var(--color-text-weak); padding: 2px 8px 4px 0; white-space: nowrap;
  border-bottom: 1px solid var(--color-bg-mute);
}
.plat-table td { padding: 4px 8px 4px 0; color: var(--color-text-sub); vertical-align: middle; }
.plat-name { font-weight: 600; color: var(--color-text); white-space: nowrap; }
.plat-extra { font-size: 11px; color: var(--color-text-weak); font-style: normal; }
.plat-date { white-space: nowrap; color: var(--color-text-weak); }
.plat-row-dim { opacity: .42; }
.plat-st { border-radius: 6px; padding: 1px 7px; line-height: 17px; white-space: nowrap; border: 1px solid transparent; }
.plat-st-free { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-line); }
.plat-st-taken { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-line); font-weight: 600; }
.plat-st-done { background: var(--color-bg-mute); color: var(--color-text-sub); border-color: var(--color-border-strong); }
.plat-st-mine { background: var(--color-warning-soft); color: var(--color-warning-text); border-color: var(--color-warning-line); font-weight: 700; }
.plat-st-minedone { background: var(--color-primary-soft); color: var(--color-primary-dark); border-color: var(--color-primary-line); font-weight: 700; }
.dc-card-mine { border-left: 3px solid var(--color-primary-line); }
.dc-card-mine.is-pending { border-left-color: var(--color-warning-line); background: #fffdf5; }
.dc-card-mine.is-done { border-left-color: var(--color-primary-line); }

/* ==================== 包2：取消领取灰色留痕（下架联动/放弃/管理员取消） ==================== */
.dc-card-mine.is-cancelled { border-left-color: var(--color-border-strong); background: var(--color-bg-soft); opacity: .68; }
.dc-card-mine.is-cancelled .dc-title { color: var(--color-text-muted); }
.tag-cancelled { background: var(--color-bg-mute); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.row-cancelled { opacity: .6; background: var(--color-bg-soft); }

/* 包3 #5+#6：部门详情下钻页 + 团队看板按部门分组（全员出列） */
.section-sub { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 700; color: var(--color-text); margin: 16px 0 8px; flex-wrap: wrap; }
.dept-block { margin-bottom: 6px; }
.dept-tabs { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.dept-tab { padding: 5px 12px; font-size: 13px; color: var(--color-text-sub); border: 1px solid var(--color-border); border-radius: 8px; background: #fff; text-decoration: none; }
.dept-tab.is-on { background: var(--color-primary-soft); border-color: var(--color-primary-line); color: var(--color-primary-dark); font-weight: 700; }
.row-idle td { background: var(--color-bg-soft); color: var(--color-text-weak); }
.row-risk td { background: var(--color-danger-soft); }
.wl-link { color: var(--color-primary-dark); font-weight: 700; text-decoration: none; }
.wl-link:hover { text-decoration: underline; }

/* ==================== 本轮验收问题1：素材停止分发（下架/撤回重审）提示 ==================== */
.tag-stale { background: var(--color-danger-soft); color: var(--color-danger-text); border: 1px solid var(--color-danger-line); font-weight: 700; }
.stale-banner {
  background: var(--color-warning-soft); border: 1px solid var(--color-warning-line); border-left: 4px solid var(--color-warning);
  border-radius: 10px; padding: 12px 16px; margin: 12px 0 16px;
}
.stale-banner-head { font-size: 14px; color: var(--color-warning-text); font-weight: 700; margin-bottom: 6px; }
.stale-banner-body { font-size: 13px; color: #78350f; line-height: 1.7; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stale-banner-list { margin: 8px 0 0; padding-left: 20px; font-size: 12px; color: var(--color-warning-text); line-height: 1.8; }
/* 第二批优化25：横幅可关闭（× 在右上角）；关闭提示文案 */
.stale-banner { position: relative; }
.stale-banner-head { padding-right: 36px; }
.stale-banner-close {
  position: absolute; top: 8px; right: 10px;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  border: 1px solid var(--color-warning-line); border-radius: 8px;
  background: #fff; color: var(--color-warning-text);
  font-size: 16px; font-family: inherit; cursor: pointer;
}
.stale-banner-close:hover { background: var(--color-warning-soft); }
.stale-dismiss-hint { font-size: 12px; font-weight: 400; color: #92400e; margin-left: 4px; }
/* 第二批优化26：我的分发记录状态筛选条（待回传/已落地/素材已下架/已取消） */
.mine-status-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; }
.mine-status-label { font-size: 13px; color: var(--color-text-sub); font-weight: 600; }
.mine-status-bar .btn b { font-weight: 700; }
.stale-note { color: var(--color-warning-text) !important; font-weight: 600; }
.oc-hint { color: var(--color-warning-text); font-size: 12px; align-self: center; }

/* ==================== C 批：数据漏斗条（不依赖图表库，纯 CSS） ==================== */
.funnel-bar { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.funnel-row { display: flex; align-items: center; gap: 12px; }
.funnel-label { width: 48px; flex: 0 0 48px; font-size: 13px; color: var(--color-text-sub); font-weight: 600; text-align: right; }
.funnel-track { flex: 1; height: 26px; background: var(--color-bg-mute); border-radius: 6px; overflow: hidden; }
.funnel-fill { height: 100%; border-radius: 6px; transition: width .3s ease; min-width: 4px; }
.funnel-f1 { background: linear-gradient(90deg, #34d399, var(--color-success)); }
.funnel-f2 { background: linear-gradient(90deg, var(--color-primary-line), var(--color-primary)); }
.funnel-f3 { background: linear-gradient(90deg, var(--color-warning-line), var(--color-warning)); }
.funnel-val { flex: 0 0 auto; min-width: 96px; font-size: 13px; color: var(--color-text-strong); font-weight: 600; }

/* C 批：进粉号匹配 / 核对状态小徽标 */
.powder-locked { background: var(--color-primary-soft); color: var(--color-primary-dark); border-color: var(--color-primary-line); }

/* ==================== 第五轮：加急 / 新旧标签 / 领取区状态机（问题2/4/6/7） ==================== */
.urg-badge {
  display: inline-block; background: var(--color-danger-soft); color: var(--color-danger-text); border: 1px solid var(--color-danger-line);
  border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 700; margin-right: 6px;
  animation: urg-pulse 1.8s ease-in-out infinite;
}
@keyframes urg-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.35); } 50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); } }
.dc-card.is-urgent { border: 1px solid var(--color-danger-line); box-shadow: 0 0 0 2px rgba(239,68,68,.06) inset; }

.age-tag { border-radius: 6px; padding: 1px 7px; font-size: 12px; border: 1px solid transparent; white-space: nowrap; }
.age-today { background: var(--color-success-soft); color: var(--color-success); border-color: var(--color-success-line); font-weight: 600; }
.age-yesterday { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning-line); font-weight: 600; }
.age-older { background: var(--color-bg-mute); color: var(--color-text-muted); border-color: var(--color-border-strong); }
.age-full { background: var(--color-border); color: var(--color-text-sub); border-color: var(--color-border-strong); font-weight: 700; }

.mat-stats-help { font-size: 12px; color: var(--color-text-weak); }
.urgent-stat b { color: var(--color-danger-text); }

.dc-ops-full { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--color-success-soft); border-top: 1px dashed var(--color-success-line); }
.full-done { color: var(--color-success); font-weight: 700; font-size: 13px; }

.filter-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.urg-check.is-on { background: var(--color-danger-soft); border-color: var(--color-danger-line); color: var(--color-danger-text); }

.js-fb-input.is-bad { border-color: var(--color-danger); background: var(--color-danger-soft); }
.fb-tip { display: block; width: 100%; font-size: 12px; margin-top: 6px; }
.fb-tip-bad { color: var(--color-danger-text); font-weight: 600; }

/* ==================== 第五轮：每日报表（问题5） ==================== */
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px; }
.kpi-card { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.kpi-card.kpi-warn { border-color: var(--color-warning-line); background: var(--color-warning-soft); }
.kpi-label { font-size: 13px; color: var(--color-text-muted); }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--color-text-strong); line-height: 1.1; }
.kpi-slash { color: var(--color-border-strong); font-style: normal; font-weight: 400; }
.kpi-sub { font-size: 12px; color: var(--color-text-weak); }
.kpi-urg { color: var(--color-danger-text); font-weight: 700; }

.dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dept-card { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 14px 16px; }
.dept-card-wide { grid-column: span 3; }
.dept-h { font-size: 15px; margin: 0 0 10px; color: var(--color-text-strong); border-left: 3px solid var(--color-primary); padding-left: 8px; }
.dept-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--color-text-sub); }
.row-total td { background: var(--color-bg-soft); }

/* ==================== 第五轮：每日总结详情 / 公众号挂载（问题1/8） ==================== */
.detail-h { font-size: 15px; margin: 0 0 10px; color: var(--color-text-strong); }
.detail-body { white-space: pre-wrap; line-height: 1.8; color: var(--color-text); font-size: 14px; background: var(--color-bg-soft); border-radius: 8px; padding: 14px 16px; border: 1px solid var(--color-bg-mute); }
/* 问题1：摘要列长文本不再压行——最多两行截断，超出省略（点「查看详情」看全文），消除字体重叠与横向滚动条 */
.daily-brief { max-width: 320px; color: var(--color-text-sub); font-size: 13px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.brief-more { color: var(--color-text-weak); font-size: 12px; }

.tab-bar { display: flex; gap: 6px; margin: 10px 0 14px; border-bottom: 1px solid var(--color-border); }
.tab { padding: 8px 16px; font-size: 14px; color: var(--color-text-sub); border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; }
.tab.is-active { background: #fff; border-color: var(--color-border); color: var(--color-primary-dark); font-weight: 700; margin-bottom: -1px; }

.qr-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; border: 1px solid var(--color-border); vertical-align: middle; }
.qr-big { width: 130px; height: 130px; object-fit: contain; border-radius: 8px; border: 1px solid var(--color-border); background: #fff; }
.mount-now { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; }
.mount-timeline { list-style: none; margin: 0; padding: 0; }
.mount-timeline li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed var(--color-bg-mute); }
.mount-timeline li:last-child { border-bottom: none; }
.mount-timeline li.is-current { background: var(--color-success-soft); border-radius: 8px; padding: 12px; }
.mt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border-strong); margin-top: 6px; flex: 0 0 10px; }
.mount-timeline li.is-current .mt-dot { background: var(--color-success); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.mt-body { flex: 1; min-width: 0; }
.mt-line { margin: 0 0 4px; font-size: 13px; color: var(--color-text-sub); }
.mt-qr { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; }

@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dept-grid { grid-template-columns: 1fr; }
  .dept-card-wide { grid-column: span 1; }
}

/* ---------- 我的推广：业绩大数字卡（问题1 改版：业绩显眼） ---------- */
.promo-hero {
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-success-soft) 100%);
  border: 1px solid var(--color-primary-soft); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px;
}
.promo-hero-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--color-text-sub); margin-bottom: 12px;
}
.promo-hero-bar a { font-weight: 600; }
.promo-hero-bar input[type="date"] { width: 148px; }
.promo-cards { display: flex; gap: 12px; flex-wrap: wrap; }
.promo-card {
  flex: 1; min-width: 140px; background: #fff; border: 1px solid var(--color-border);
  border-radius: 12px; padding: 14px 10px; text-align: center;
}
.promo-card .num { font-size: 30px; font-weight: 800; line-height: 1.25; }
.promo-card .lbl { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.promo-blue .num { color: var(--color-primary-dark); }
.promo-red .num { color: var(--color-danger); }
.promo-green .num { color: var(--color-success-text); }
.promo-sub {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--color-border);
  font-size: 13px; color: var(--color-text-sub); display: flex; gap: 16px; flex-wrap: wrap;
}

/* ==================== 第八轮八-4：行政物资台账 ==================== */
.asset-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
@media (max-width: 720px) { .asset-form-grid { grid-template-columns: 1fr; } }
.asset-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.asset-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 16px; font-size: 14px; color: var(--color-text); }
.asset-meta .k { color: var(--color-text-muted); font-size: 13px; }
.asset-timeline { list-style: none; margin: 0; padding: 0; }
.asset-timeline li { position: relative; padding: 0 0 14px 18px; border-left: 2px solid var(--color-border); margin-left: 6px; }
.asset-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.asset-timeline li::before {
  content: ''; position: absolute; left: -6px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary);
}
.asset-timeline .tl-time { color: var(--color-text-muted); font-size: 12px; }
.asset-timeline .tl-text { font-size: 14px; color: var(--color-text-strong); font-weight: 600; }
.asset-timeline .tl-note { font-size: 13px; color: var(--color-text-sub); }

/* ==================== 第十轮：资产台账整洁化 + 后台整页溢出修复 ==================== */
/* 问题2 根因：后台 18 个导航链接都是 nowrap 的 flex 子项，
   窄窗口（实测 830px）下 nav 内容宽 1226px 会把 <body> 一起撑宽 → 整页横向滚动、导航错位。
   修法：nav 内部允许换行。 */
.admin-nav { flex-wrap: wrap; row-gap: 4px; justify-content: flex-end; }
.page-container { min-width: 0; }

/* 页头：标题 + 右侧操作按钮 */
.head-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.head-bar .btn { flex: 0 0 auto; }

/* 筛选栏统一形态（替代各页内联 flex 写法） */
.filter-bar { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px; }
.filter-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-text-sub); }
.filter-bar select, .filter-bar input[type=text] {
  padding: 5px 8px; border: 1px solid var(--color-border-strong); border-radius: 6px;
  font-family: inherit; font-size: 13px; color: var(--color-text-strong); background: #fff;
}
.filter-bar .grow { flex: 1 1 200px; }
.filter-bar .grow input { flex: 1 1 auto; width: 100%; }
.filter-bar .chk { white-space: nowrap; }

/* 类别页签（第十轮问题1）：角标显示该类数量，点一下只看该类 */
.tab-bar.asset-tabs { gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.asset-tabs a.tab { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.asset-tabs a.tab:hover { color: var(--color-primary-dark); }
.asset-tabs .tab b {
  font-size: 12px; font-weight: 700; color: var(--color-text-sub); background: var(--color-bg-mute);
  border-radius: 9px; padding: 0 7px; min-width: 22px; text-align: center;
}
.asset-tabs .tab.is-active b { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* 表格滚动容器：稳定收住宽表，不再把父级撑开 */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 560px; }

/* 资产表（6 列）：第一列=名称 + 副行（编号 / 规格 / SN / 存放） */
.asset-table td { vertical-align: top; }
.asset-cell { display: flex; flex-direction: column; gap: 3px; white-space: normal; min-width: 220px; }
.asset-cell .an-name { font-weight: 700; color: var(--color-text-strong); font-size: 13.5px; }
.asset-cell .an-sub { font-size: 12px; color: var(--color-text-muted); line-height: 1.8; white-space: normal; word-break: break-all; }

/* ==========================================================
   包4 #12-③：每日朋友圈发布留痕（工作台 / 后台共用）
   ========================================================== */
/* 左：今日进度 / 右：登记表单 —— 宽屏两栏，窄屏单栏 */
.mp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }
@media (min-width: 900px) { .mp-grid { grid-template-columns: 320px 1fr; } }

/* 大数字（已发条数） */
.mp-count { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 6px; }
.mp-count .mp-big { font-size: 34px; line-height: 1; color: var(--color-text-strong); }

/* 进度条（条数 / 达标下限） */
.mp-progress { height: 8px; border-radius: 999px; background: var(--color-bg-mute); overflow: hidden; margin-bottom: 12px; }
.mp-progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary-line), var(--color-primary)); border-radius: 999px; transition: width .3s; }

/* 早 / 中 / 晚 三个时段格 */
.mp-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-slot {
  border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-soft);
  padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.mp-slot.is-on { background: var(--color-success-soft); border-color: var(--color-success-line); }
.mp-slot-l { font-size: 13px; font-weight: 700; color: var(--color-text-sub); }
.mp-slot b { font-size: 17px; color: var(--color-text-strong); }
.mp-slot-h { font-size: 11px; color: var(--color-text-weak); }

/* 状态提示条 */
.mp-tip { font-size: 13px; border-radius: 10px; padding: 9px 11px; margin: 12px 0 0; line-height: 1.7; }
.mp-tip-ok { background: var(--color-success-soft); color: var(--color-success-text); border: 1px solid var(--color-success-line); }
.mp-tip-warn { background: var(--color-warning-soft); color: var(--color-warning-text); border: 1px solid var(--color-warning-line); }
.mp-tip-bad { background: var(--color-danger-soft); color: var(--color-danger-text); border: 1px solid var(--color-danger-line); }

/* 登记表单 */
.mp-form { display: grid; gap: 10px; margin-top: 10px; }
.mp-form label { font-size: 13px; color: var(--color-text-sub); display: flex; flex-direction: column; gap: 5px; }
.mp-form input[type="time"], .mp-form input[type="text"], .mp-form select, .mp-form textarea {
  padding: 6px 8px; border: 1px solid var(--color-border-strong); border-radius: 8px; font-size: 14px;
  font-family: inherit; background: #fff; width: 100%; max-width: 520px;
}
.mp-form textarea { resize: vertical; }
.mp-form button[type="submit"] { justify-self: start; margin-top: 2px; }

/* 截图缩略图行（时间线内） */
.mp-shots { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.mp-shots img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--color-border); background: #fff;
}

/* 后台台账：完成率卡片行 */
.mp-dept-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .mp-dept-cards { grid-template-columns: 1fr 1fr; } }
.mp-dept-card { border: 1px solid var(--color-border); border-radius: 10px; padding: 12px 14px; background: var(--color-bg-soft); }
.mp-dept-card .mp-rate { font-size: 26px; font-weight: 700; color: var(--color-text-strong); }
.mp-dept-card .mp-rate-sub { font-size: 12px; color: var(--color-text-muted); }

/* 顶栏「主管」徽章（第十一轮问题3，紫色） */
.wb-badge-lead {
  display: inline-block; margin-left: 4px; padding: 1px 7px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--color-lead-soft); color: var(--color-lead); border: 1px solid #c4b5fd;
  vertical-align: middle;
}

/* ==================== 包4 #12-⑤：未成交客户分层 / 真实顾虑 / 跟进（SOP 4.2 步骤3） ==================== */
/* 客户分层徽章：A 高意向（红·优先复追）/ B 中意向（橙·持续培育）/ C 低意向（灰·长期观望） */
.tag.lead-a { background: var(--color-danger-soft); color: var(--color-danger-text); border: 1px solid var(--color-danger-line); font-weight: 700; }
.tag.lead-b { background: var(--color-warning-soft); color: var(--color-warning); border: 1px solid var(--color-warning-line); }
.tag.lead-c { background: var(--color-bg-mute); color: var(--color-text-sub); border: 1px solid var(--color-border); }

/* 真实顾虑标签（客户透露的顾虑点） */
.tag.concern-tag { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid var(--color-danger-soft); margin-left: 4px; }

/* 待跟进 / 逾期未跟进（逾期用强提示：督导复追重点） */
.tag.due-today { background: var(--color-primary-soft); color: var(--color-primary-dark); border: 1px solid var(--color-primary-line); }
.tag.due-overdue { background: var(--color-danger-soft); color: var(--color-danger-text); border: 1px solid var(--color-danger-line); font-weight: 700; }

/* 顾虑多选（客资弹层 / 用户详情页） */
.concern-picker {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 4px 0 10px; padding: 8px 10px;
  background: var(--color-bg-soft); border: 1px solid var(--color-border); border-radius: 8px;
}
.concern-item { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-text-sub); cursor: pointer; }
.concern-item input { width: auto; margin: 0; }

/* 顾虑分布标签云（客户分层台账页） */
.concern-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.concern-cloud .tag { font-size: 13px; padding: 4px 10px; }
.concern-cloud .tag b { margin-left: 4px; }

/* KPI 考核（包4 #12-⑥）：取分方式与状态标签 */
.tag.kpi-auto { background: #e0f2fe; color: #0369a1; border: 1px solid #7dd3fc; }
.tag.kpi-manual { background: var(--color-warning-soft); color: var(--color-warning-text); border: 1px solid var(--color-warning-line); }
.tag.kpi-warn { background: var(--color-danger-soft); color: var(--color-danger-text); border: 1px solid var(--color-danger-line); }

/* ==========================================================
   包A 第二轮 · 组件统一层（2026-10-07）
   原则：只收敛写法与视觉，不改结构与业务。本节为同类组件的唯一权威定义处，
   前面各批次遗留的同类写法在此统一覆盖（旧类名继续可用，无需改模板）。
   ========================================================== */

/* ---------- 1. 焦点样式（全站唯一） ---------- */
.form-item input:focus, .form-item select:focus, .form-item textarea:focus,
.login-form input:focus, .coupon-row input:focus,
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus,
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* ---------- 2. 次要按钮：白底 + 主色描边 + 主色字（原 light / ghost-light / outline-blue 三种写法合一） ---------- */
.btn-light, .btn-ghost-light, .btn-outline-blue {
  background: #fff;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.btn-light:active, .btn-ghost-light:active, .btn-outline-blue:active {
  background: var(--color-primary-soft);
}

/* ---------- 3. 危险按钮：白底 + 危险色描边 + 危险色字（原 danger / outline-red 合一） ---------- */
.btn-danger, .btn-outline-red {
  background: #fff;
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
}
.btn-danger:hover, .btn-outline-red:hover { background: var(--color-danger-soft); }
.btn-danger:active, .btn-outline-red:active { background: var(--color-danger); color: #fff; }

/* ---------- 4. 加急/警示按钮（保留橙色语义，形状对齐描边体系） ---------- */
.btn-outline-orange { background: #fff; border: 1px solid var(--color-warning); color: var(--color-warning); }
.btn-outline-orange:active { background: var(--color-warning); color: #fff; }

/* ---------- 5. 文字链按钮与小复制按钮（统一字号/形状） ---------- */
.link-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--color-primary); font-size: 13px; font-family: inherit; }
.link-btn.danger { color: var(--color-danger); }
.copy-btn, .copy-mini {
  border: 1px solid var(--color-primary); background: #fff; color: var(--color-primary);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.copy-mini { padding: 2px 10px; font-size: 12px; margin-left: 6px; }

/* ---------- 6. 提示条统一：浅底 + 描边 + 左侧 4px 色条（原 banner / flash / mp-tip 三套合一） ---------- */
.banner-ok, .flash-ok, .mp-tip-ok {
  background: var(--color-success-soft); color: var(--color-success-text);
  border: 1px solid var(--color-success-line); border-left: 4px solid var(--color-success);
  border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; line-height: 1.7;
}
.banner-err, .flash-err, .mp-tip-bad {
  background: var(--color-danger-soft); color: var(--color-danger-text);
  border: 1px solid var(--color-danger-line); border-left: 4px solid var(--color-danger);
  border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; line-height: 1.7;
}
.mp-tip-warn {
  background: var(--color-warning-soft); color: var(--color-warning-text);
  border: 1px solid var(--color-warning-line); border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md); padding: 10px 12px; font-size: 13px; line-height: 1.7;
}
/* banner 内的操作按钮沿用统一形状 */
.banner-ops { display: inline-flex; gap: 8px; margin-left: 8px; }

/* ---------- 7. 页头统一（head-bar / admin-head-row 对齐方式一致） ---------- */
.head-bar, .admin-head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.head-bar .section-title, .admin-head-row .section-title { margin: 0; font-size: 17px; }

/* ---------- 第三批（2026-10-10）：交付联系方式复制 / 保存图片 / 交付管理页 ---------- */
/* 优化1：联系方式「点击复制」——可选中（选中后手机长按也能复制），成功/失败反馈统一 */
.js-copy {
  cursor: pointer; user-select: text; -webkit-user-select: text;
  border-bottom: 1px dashed var(--color-primary-line);
}
.js-copy.is-copied { color: var(--color-success); border-bottom-color: transparent; }
/* 复制结果轻提示（失败时告诉用户「长按选中复制」而不是假装成功） */
.copy-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 4000; max-width: calc(100vw - 40px);
  background: rgba(15, 23, 42, .92); color: #fff; font-size: 13px; line-height: 1.5;
  padding: 9px 14px; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .3);
  text-align: center; pointer-events: none;
}
.copy-toast.is-bad { background: rgba(153, 27, 27, .94); }

/* 优化5：合伙人素材配图「保存图片」按钮 + 保存引导浮层 */
.moment-save-btn {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--color-primary-line); background: var(--color-card); color: var(--color-primary);
  font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.moment-save-btn:active { transform: scale(.97); }
.img-save-mask {
  position: fixed; inset: 0; z-index: 4000; background: rgba(15, 23, 42, .88);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px;
}
.img-save-mask img {
  max-width: min(92vw, 560px); max-height: 66vh; border-radius: 10px; background: #fff;
  -webkit-touch-callout: default; user-select: auto;
}
.img-save-box { background: #fff; border-radius: 12px; padding: 12px 14px; max-width: min(92vw, 560px); text-align: center; }
.img-save-box p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: #334155; }
.img-save-box .img-save-ops { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* 优化2：交付管理页 —— 页头操作 + 联系方式行内维护表单 */
.head-bar-ops { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.inline-contact-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 0; min-width: 0; }
.inline-contact-form label { min-width: 92px; }
.inline-contact-form input[type="text"] { width: 130px; }
.inline-contact-form select { padding: 5px 8px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 12px; }

/* 第四批优化36：联系方式可多条自由搭配（类型 + 账号），后台两处表单共用 */
.contact-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.contact-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.contact-row select { padding: 5px 8px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 12px; min-width: 76px; }
.contact-row input[type="text"] { flex: 1; min-width: 120px; padding: 5px 8px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 12px; }
.contact-row .link-btn { flex: none; }
.inline-contact-form [data-contact-add] { align-self: flex-start; }

/* 优化3：素材配图单元格（图 + 「保存图片」按钮成组，网格不被撑乱） */
.moment-imgs .moment-img-cell { display: flex; flex-direction: column; gap: 4px; }
.moment-imgs .moment-img-cell .moment-save-btn { width: 100%; justify-content: center; }

/* ==========================================================================
   第六批 #39：下单合同签署（前台展示 + 我的合同 + 后台凭证）
   ========================================================================== */
.contract-card { padding: 0; overflow: hidden; }
.contract-scroll { max-height: 320px; overflow-y: auto; padding: 14px 16px; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border); }
.contract-scroll:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.contract-scroll-tip { margin: 0; padding: 8px 16px; font-size: 12px; text-align: center; color: var(--color-warning-text); background: var(--color-warning-soft); }
.contract-body { font-size: 13px; line-height: 1.9; color: var(--color-text); }
.contract-body p { margin: 0 0 4px; }
.contract-body .contract-blank { height: 6px; margin: 0; }
.contract-body-static { padding: 16px; max-height: none; background: #fff; }
.agree-line { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 4px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.agree-line input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; flex: none; }
.agree-line a { color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; }
.agree-note { margin-top: 2px !important; }
#checkout-submit:disabled { opacity: .55; cursor: not-allowed; }

.contract-entry { display: block; text-decoration: none; }
.contract-entry b { display: block; font-size: 15px; margin-bottom: 2px; }
.contract-list { display: flex; flex-direction: column; gap: 10px; }
.contract-item { display: block; text-decoration: none; }
.contract-item-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.contract-item-main b { font-size: 15px; }
.contract-item-sub { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.contract-cred { background: var(--color-bg-soft); }
.contract-cred-row { display: flex; gap: 10px; font-size: 13px; padding: 3px 0; }
.contract-cred-row > span { flex: 0 0 92px; color: var(--color-text-muted); }
.contract-cred-row > b { flex: 1; word-break: break-all; }
.contract-hash { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .3px; }
.contract-ops { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
@media print {
  .site-header, .site-footer, .service-card, .service-fab, .contract-ops,
  .admin-topbar, .admin-side, .admin-menu-btn, .admin-footer { display: none !important; }
  .page-container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; page-break-inside: avoid; }
  .contract-body-static { max-height: none !important; }
}

/* ==========================================================================
   第七批 #40：财务收支（看板卡片 / 表单 / 台账）
   ========================================================================== */
.fin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.fin-card { display: flex; flex-direction: column; gap: 2px; border-left: 4px solid var(--color-border-strong); }
.fin-card-label { font-size: 13px; color: var(--color-text-muted); }
.fin-card-value { font-size: 22px; font-weight: 700; letter-spacing: -.3px; }
.fin-card-value small { font-size: 12px; font-weight: 400; color: var(--color-text-muted); }
.fin-card-sub { font-size: 12px; color: var(--color-text-muted); }
.fin-card-in { border-left-color: #2563eb; }
.fin-card-in .fin-card-value { color: #1d4ed8; }
.fin-card-pre { border-left-color: #b45309; }
.fin-card-pre .fin-card-value { color: #b45309; }
.fin-card-out { border-left-color: #f59e0b; }
.fin-card-out .fin-card-value { color: #b45309; }
.fin-card-total { border-left-color: #7c3aed; }
.fin-card-total .fin-card-value { color: #6d28d9; }
.fin-card-profit { border-left-color: #047857; }
.fin-card-profit .fin-card-value { color: #047857; }
.fin-card-loss { border-left-color: #dc2626; }
.fin-card-loss .fin-card-value { color: #dc2626; }
.fin-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.fin-form { margin-top: 8px; }
.fin-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 10px; }
.fin-form-grid .form-label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.fin-form-grid input, .fin-form-grid select { padding: 7px 9px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 13px; }
.fin-form-grid .fin-span2 { grid-column: span 2; }
@media (max-width: 560px) { .fin-form-grid .fin-span2 { grid-column: span 1; } }
tr.is-void td { color: var(--color-text-muted); background: var(--color-bg-mute); }
tr.is-void td b { color: var(--color-text-muted); }

/* 分页（后台台账 / 工作台台账共用） */
.pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.pager-item { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px;
  border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 13px; color: var(--color-text-sub); text-decoration: none; }
.pager-item.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }

/* ==========================================================
   首页转化重构（2026-10-16）
   新增：.hero-actions / .hero-trust / .steps / .guarantee-grid
        .cta-card / .home-cta-bar
   全部沿用既有设计令牌，不覆盖旧类名语义
   ========================================================== */

/* ---------- 首屏：行动按钮组 ---------- */
.hero h1 { margin: 12px 0 8px; font-size: 24px; line-height: 1.35; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hero-actions .btn { min-width: 132px; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; opacity: .95;
}
.hero-trust li { display: inline-flex; align-items: center; gap: 5px; }
.hero-trust li::before { content: "✓"; font-weight: 700; }

/* ---------- 三步流程 ---------- */
.steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.step-card { display: flex; align-items: flex-start; gap: 12px; }
.step-card b { font-size: 15px; }
.step-card .muted-note { margin: 2px 0 0; }
.step-no {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px;
  background: var(--color-primary-soft); color: var(--color-primary);
  font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- 服务保障 ---------- */
.guarantee-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guarantee-card b { font-size: 15px; }
.guarantee-card .muted-note { margin: 4px 0 0; }
@media (min-width: 640px) { .guarantee-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 底部行动区 ---------- */
.cta-card {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-line);
  border-radius: var(--radius);
  padding: 18px 16px; text-align: center;
}
.cta-card b { font-size: 16px; }
.cta-card .muted-note { margin: 6px 0 14px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cta-actions .btn { min-width: 132px; }

/* ---------- 移动端吸底操作栏（仅小屏） ---------- */
.home-cta-bar { display: none; }
.page-home { padding-bottom: 0; }
@media (max-width: 639px) {
  .home-cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; gap: 8px; align-items: center;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--color-card);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(15, 23, 42, .06);
  }
  .home-cta-bar .home-cta-main { flex: 1 1 auto; }
  .home-cta-bar .home-cta-sub { flex: 0 0 auto; padding: 10px 16px; }
  /* 给吸底栏留出空间，避免遮挡页脚与内容 */
  .page-home { padding-bottom: 68px; }
}