/* =========================================================================
 * ui-kit.css —— 统一「微信风格」外壳与基础组件（零依赖，纯 class）
 * 适用栈：纯静态 HTML / 服务端模板（Go embed）/ Vue（当普通 class 用）
 *
 * 用法：<link rel="stylesheet" href="ui-kit.css">
 *
 * 外壳骨架（flex 布局，宽度自适应内容，无需 JS 量宽）：
 *   <div class="uk-app">
 *     <aside class="uk-rail">
 *       <div class="uk-rail-brand"><i class="uk-rail-logo" style="background-image:url(logo.jpg)"></i>
 *         <span class="uk-rail-name">项目名</span></div>
 *       <a class="uk-rail-tab on" data-tab="a"><i class="uk-ic">…svg…</i><span class="uk-lb">消息</span></a>
 *       <div class="uk-rail-sp"></div>            <!-- 撑开，后面的项贴底 -->
 *       <a class="uk-rail-tab" data-tab="set"><i class="uk-ic">…svg…</i><span class="uk-lb">设置</span></a>
 *     </aside>
 *     <aside class="uk-navcol">…次级侧栏(可选)…</aside>
 *     <section class="uk-body">
 *       <header class="uk-top">…顶栏…</header>
 *       <div class="uk-content">…内容区…</div>
 *     </section>
 *   </div>
 *
 * 设计令牌分三层：① 原始层（调色板）→ ② 语义层（按用途）→ ③ 组件层（尺寸/圆角）。
 * 换肤契约（只动语义层，组件规则不写死颜色）：
 *   · 改主色   →  --uk-accent / --uk-accent-hover / --uk-accent-active / --uk-accent-subtle / --uk-accent-contrast
 *   · 改深色栏 →  --uk-rail-*
 *   · 改圆角/阴影 →  --uk-radius* / --uk-shadow*
 * 兼容：原有 --uk-* 变量名全部保留（值经原始层等价映射），旧页面无需改动。
 * 参考机制：Open Props（只发变量）/ Radix Themes（色阶 + 语义）/ W3C DTCG（令牌分层）。
 * ========================================================================= */

:root {
  /* ================= ① 原始层：调色板（只放原色，不表达用途） =================
   * 组件规则【不要】直接引用这一层；只作为 ② 语义层的取值来源。 */
  /* 品牌绿（= 微信绿家族） */
  --uk-green-50:  #eaf7ef;   /* 主色浅底（选中行 / 选中态） */
  --uk-green-500: #07c160;
  --uk-green-600: #059a4e;
  --uk-green-700: #048742;
  --uk-logo-from: #0fdc78;
  --uk-logo-to:   #0bb863;
  /* 成功色（比品牌绿偏深；用于成功按钮 / green 标签） */
  --uk-ok-500:  #16a34a;
  --uk-ok-600:  #15803d;
  --uk-ok-tint: rgba(22, 163, 74, .12);
  /* 危险色 */
  --uk-red-500:  #ef4444;
  --uk-red-600:  #dc2626;
  --uk-red-badge:#f5564a;
  --uk-red-tint: rgba(239, 68, 68, .12);
  /* 警告色 */
  --uk-amber-500:  #f59e0b;
  --uk-amber-700:  #b45309;
  --uk-amber-tint: rgba(245, 158, 11, .14);
  /* 信息色 */
  --uk-blue-500:  #3b82f6;
  --uk-blue-600:  #1d4ed8;
  --uk-blue-tint: rgba(37, 99, 235, .12);
  /* 中性灰阶 */
  --uk-white:    #ffffff;
  --uk-gray-25:  #fbfbfb;
  --uk-gray-50:  #f7f7f7;
  --uk-gray-100: #f5f5f5;
  --uk-gray-150: #f2f2f2;
  --uk-gray-200: #f0f0f0;
  --uk-gray-250: #e7e7e7;
  --uk-gray-300: #e6e6e6;
  --uk-gray-350: #e3e3e3;
  --uk-gray-400: #d9d9d9;
  --uk-gray-450: #c9c9c9;
  --uk-gray-480: #d8d8d8;
  --uk-gray-500: #9a9a9a;
  --uk-gray-600: #7f7f7f;
  --uk-gray-650: #6f6f6f;
  --uk-gray-680: #5a5a5a;
  --uk-gray-900: #191919;
  --uk-rail-900: #2e2e2e;
  --uk-gray-tint: rgba(120, 120, 120, .14);

  /* ================= ② 语义层：按用途命名（★ 换肤只改这一层） ================= */
  /* 主色 */
  --uk-accent: var(--uk-green-500);
  --uk-accent-hover: var(--uk-green-600);
  --uk-accent-active: var(--uk-green-700);
  --uk-accent-subtle: var(--uk-green-50);
  --uk-accent-contrast: var(--uk-on-solid);
  --uk-accent-d: var(--uk-accent-hover);      /* 旧名保留（= hover） */
  /* 实心色上的文字 / 图标 */
  --uk-on-solid: var(--uk-white);
  /* 状态色 */
  --uk-ok: var(--uk-ok-500);
  --uk-ok-hover: var(--uk-ok-600);
  --uk-ok-ink: var(--uk-ok-600);
  --uk-ok-subtle: var(--uk-ok-tint);
  --uk-warn: var(--uk-amber-500);
  --uk-warn-ink: var(--uk-amber-700);
  --uk-warn-subtle: var(--uk-amber-tint);
  --uk-danger: var(--uk-red-500);
  --uk-danger-hover: var(--uk-red-600);
  --uk-danger-ink: var(--uk-red-600);
  --uk-danger-subtle: var(--uk-red-tint);
  --uk-info: var(--uk-blue-500);
  --uk-info-ink: var(--uk-blue-600);
  --uk-info-subtle: var(--uk-blue-tint);
  --uk-badge: var(--uk-red-badge);
  /* 中性语义 */
  --uk-neutral-subtle: var(--uk-gray-200);
  --uk-neutral-tint: var(--uk-gray-tint);
  --uk-neutral-ink: var(--uk-gray-680);
  /* 面 / 底 */
  --uk-surface: var(--uk-white);              /* 卡片 / 输入 / 弹层底 */
  --uk-card: var(--uk-surface);
  --uk-main-bg: var(--uk-gray-100);
  --uk-side-bg: var(--uk-gray-50);
  --uk-subtle: var(--uk-gray-50);
  --uk-subtle-2: var(--uk-gray-25);
  --uk-surface-hover: var(--uk-gray-150);
  --uk-field-bg: var(--uk-gray-350);
  --uk-item-active: var(--uk-gray-400);
  --uk-group-bg: var(--uk-gray-300);
  --uk-switch-off: var(--uk-gray-450);
  /* 描边 */
  --uk-border: var(--uk-gray-250);
  --uk-border-weak: var(--uk-gray-200);
  --uk-border-strong: rgba(22, 24, 29, .1);
  /* 文字 */
  --uk-ink: var(--uk-gray-900);
  --uk-muted: var(--uk-gray-600);
  --uk-faint: var(--uk-gray-500);
  /* 深色 rail */
  --uk-rail-bg: var(--uk-rail-900);
  --uk-rail-fg: var(--uk-gray-500);
  --uk-rail-fg-hover: var(--uk-gray-300);
  --uk-rail-name: var(--uk-gray-480);
  --uk-rail-faint: var(--uk-gray-650);
  --uk-rail-hover: rgba(255, 255, 255, .08);
  --uk-rail-active: rgba(255, 255, 255, .06);
  /* 品牌渐变（logo 底） */
  --uk-logo-grad: linear-gradient(135deg, var(--uk-logo-from), var(--uk-logo-to));
  /* 效果 */
  --uk-radius: 6px;
  --uk-radius-lg: 10px;
  --uk-shadow: 0 8px 24px rgba(15, 23, 42, .10);
  --uk-shadow-card: 0 16px 36px rgba(15, 23, 42, .08);
  --uk-shadow-login: 0 12px 40px rgba(16, 24, 40, .1);
  --uk-mask-bg: rgba(8, 12, 20, .45);

  /* ================= ③ 组件层：尺寸 / 圆角等组件级尺度 ================= */
  --uk-top-h: 52px;
  --uk-rail-min-w: 64px;
  --uk-rail-logo: 34px;
  --uk-navcol-w: 172px;                       /* 次级侧栏宽（比一级 rail 略宽即可） */
  --uk-btn-radius: var(--uk-radius);
}

/* ---------- 外壳 ---------- */
.uk-app {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--uk-main-bg);
}
/* 浮层卡片式外壳（对齐微信 PC）：四周留白 + 大圆角 + 柔和阴影 */
.uk-app.uk-float {
  position: fixed;
  inset: 14px 18px;
  /* ⚠️ 必须清掉 .uk-app 的 width:100%（2026-10-16 实测）：fixed + left/right + width 三者同时给出
     属"过度约束"，浏览器会**丢弃 right** ⇒ 右内边距失效、固定层比视口宽 18px，右侧内容被裁掉。
     手机端 media query 里 inset:0 时 width:100% 恰好正确，所以只在桌面露出这个坑。 */
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: var(--uk-shadow-card);
}

/* ① 最左深色 rail：宽度随内容自适应（图标 + 右侧常显栏目名，图标列左对齐） */
.uk-rail {
  flex: 0 0 auto;
  width: max-content;
  min-width: var(--uk-rail-min-w);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 9px 10px 12px;
  background: var(--uk-rail-bg);
  user-select: none;
  overflow: hidden auto;
}
.uk-rail-brand {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  cursor: pointer;
}
.uk-rail-logo {
  width: var(--uk-rail-logo);
  height: var(--uk-rail-logo);
  border-radius: 9px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--uk-logo-grad) no-repeat center/cover;
}
.uk-rail-name {
  color: var(--uk-rail-name);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.uk-rail-sp { flex: 1; }
.uk-rail-foot { color: var(--uk-rail-faint); font-size: 11px; text-align: center; padding-top: 4px; white-space: nowrap; }
.uk-rail-tab {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--uk-radius);
  color: var(--uk-rail-fg);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.uk-rail-tab:hover { background: var(--uk-rail-hover); color: var(--uk-rail-fg-hover); }
.uk-rail-tab.on { color: var(--uk-accent); background: var(--uk-rail-active); }
.uk-rail-tab .uk-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; }
.uk-rail-tab .uk-ic svg { width: 24px; height: 24px; }
.uk-rail-tab .uk-lb { flex: none; white-space: nowrap; }
/* 通用未读/计数角标（rail 标签、列表行、顶栏均可用） */
.uk-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 5px;
  border-radius: 8px; background: var(--uk-badge); color: var(--uk-on-solid);
  font-size: 11px; line-height: 1; font-weight: 600; white-space: nowrap;
}
/* rail 未读角标 */
.uk-rail-tab .uk-badge {
  position: absolute; top: 3px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--uk-badge); color: var(--uk-on-solid);
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 600;
  box-shadow: 0 0 0 2px var(--uk-rail-bg);
}

/* ② 次级侧栏（可选，浅灰分区列表） */
.uk-navcol {
  flex: 0 0 var(--uk-navcol-w);
  width: var(--uk-navcol-w);
  display: flex;
  flex-direction: column;
  background: var(--uk-side-bg);
  border-right: 1px solid var(--uk-border);
  overflow: hidden;
}
.uk-navcol .uk-search {
  display: flex; align-items: center; gap: 6px; flex: none;
  margin: 10px 10px 6px; padding: 0 8px; height: 28px;
  background: var(--uk-field-bg); border-radius: var(--uk-radius);
}
.uk-navcol .uk-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 13px; color: var(--uk-ink); }
.uk-navcol .uk-nav { flex: 1; overflow: auto; padding: 2px 6px 16px; }
.uk-navcol .uk-grp { font-size: 12px; color: var(--uk-muted); background: var(--uk-group-bg); margin: 8px 0 2px; padding: 4px 10px; border-radius: 0; }
.uk-navcol .uk-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--uk-radius);
  color: var(--uk-ink); font-size: 13.5px; cursor: pointer;
}
.uk-navcol .uk-item:hover { background: var(--uk-field-bg); }
.uk-navcol .uk-item.on { background: var(--uk-item-active); font-weight: 500; }
.uk-navcol .uk-item .uk-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; color: var(--uk-muted); }
.uk-navcol .uk-item .uk-ic svg { width: 16px; height: 16px; }
.uk-navcol .uk-item.on .uk-ic { color: var(--uk-accent); }
/* 名称首字彩色方块（wxast 侧栏同款；<i> 默认斜体，这里强制回正） */
.uk-navcol .uk-item .av {
  width: 32px; height: 32px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--uk-on-solid); font-size: 14px; font-weight: 500; font-style: normal;
  overflow: hidden; user-select: none;
}
.uk-navcol .uk-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-navcol .uk-item .cnt { flex: none; background: var(--uk-danger); color: var(--uk-on-solid); border-radius: 9px; font-size: 11px; line-height: 16px; padding: 0 6px; }
.uk-navcol .uk-foot { padding: 12px 14px; border-top: 1px solid var(--uk-border); color: var(--uk-faint); font-size: 12px; }

/* ③ 内容区 */
.uk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--uk-main-bg); }
.uk-top {
  flex: none; height: var(--uk-top-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  background: var(--uk-card);
  border-bottom: 1px solid var(--uk-border);
}
.uk-top .uk-title { font-size: 16px; font-weight: 600; color: var(--uk-ink); }
.uk-top .uk-grow { flex: 1; }
.uk-content { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px; }

/* ---------- 基础组件 ---------- */
.uk-btn {
  box-sizing: border-box;              /* width:100%（.block）时不被内边距撑破容器 */
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 14px; border: 1px solid var(--uk-border); border-radius: var(--uk-btn-radius);
  background: var(--uk-surface); color: var(--uk-ink); font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.uk-btn:hover { background: var(--uk-surface-hover); }
.uk-btn.sm { padding: 4px 10px; font-size: 12.5px; }
.uk-btn.primary { background: var(--uk-accent); border-color: var(--uk-accent); color: var(--uk-accent-contrast); }
.uk-btn.primary:hover { background: var(--uk-accent-hover); border-color: var(--uk-accent-hover); }
.uk-btn.ghost { background: transparent; }

.uk-input, .uk-select, .uk-textarea {
  box-sizing: border-box;              /* width:100% 时不被内边距/边框撑破容器（原来会溢出 22px） */
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--uk-border); border-radius: var(--uk-radius);
  background: var(--uk-surface); color: var(--uk-ink); font-size: 13.5px; outline: none;
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus { border-color: var(--uk-accent); }

.uk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--uk-border); border-radius: 999px;
  background: var(--uk-surface); color: var(--uk-ink); font-size: 12.5px;
}
.uk-chip.click { cursor: pointer; }
.uk-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--uk-ok); flex: none; }

.uk-card {
  background: var(--uk-card); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); padding: 16px 18px;
}
.uk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.uk-kpi .t { color: var(--uk-muted); font-size: 12px; }
.uk-kpi .n { font-size: 26px; font-weight: 700; color: var(--uk-ink); margin-top: 4px; }

/* 弹层 / 遮罩 */
.uk-mask { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: var(--uk-mask-bg); }
.uk-modal { width: min(560px, 92vw); max-height: 88vh; overflow: auto; background: var(--uk-surface); border-radius: 12px; box-shadow: var(--uk-shadow); }
.uk-modal .uk-modal-hd { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--uk-border); font-weight: 600; }
.uk-modal .uk-modal-hd .uk-x { margin-left: auto; cursor: pointer; color: var(--uk-muted); font-size: 18px; line-height: 1; }
.uk-modal .uk-modal-bd { padding: 16px 18px; }

/* ---------- 登录卡（各端统一登录外观） ---------- */
.uk-login { width: 100%; max-width: 400px; background: var(--uk-surface); border: 1px solid var(--uk-border-strong); border-radius: 16px; padding: 30px 28px; box-shadow: var(--uk-shadow-login); }
.uk-login .pa-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 18px; }
.uk-login .pa-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--uk-logo-grad); }
.uk-login .pa-title { font-size: 18px; font-weight: 600; color: var(--uk-ink); }
.uk-login .pa-sub { font-size: 13px; color: var(--uk-muted); }
.uk-login .pa-field { display: block; margin-bottom: 12px; font-size: 12.5px; color: var(--uk-muted); }
.uk-login .pa-field span { display: block; margin-bottom: 5px; }
.uk-login .pa-field input { width: 100%; padding: 10px 12px; border: 1px solid var(--uk-border); border-radius: 9px; font-size: 14px; outline: none; }
.uk-login .pa-field input:focus { border-color: var(--uk-accent); }
.uk-login .pa-btn { width: 100%; justify-content: center; padding: 10px; font-size: 14.5px; }

/* ---------- 按钮变体（补 .primary/.ghost 之外） ---------- */
.uk-btn.xs { padding: 3px 8px; font-size: 12px; border-radius: 4px; }
.uk-btn.danger { background: var(--uk-danger); border-color: var(--uk-danger); color: var(--uk-on-solid); }
.uk-btn.danger:hover { background: var(--uk-danger-hover); border-color: var(--uk-danger-hover); }
.uk-btn.success { background: var(--uk-ok); border-color: var(--uk-ok); color: var(--uk-on-solid); }
.uk-btn.success:hover { background: var(--uk-ok-hover); border-color: var(--uk-ok-hover); }
.uk-btn.block { width: 100%; }
.uk-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 表单行 / 复选 ---------- */
.uk-form-row { margin-bottom: 12px; }
.uk-form-row-inline { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.uk-form-label { display: block; font-size: 12.5px; color: var(--uk-muted); margin-bottom: 5px; font-weight: 500; }
.uk-checkbox { width: 15px; height: 15px; cursor: pointer; accent-color: var(--uk-accent); }

/* ---------- 标签（状态 / 分类） ---------- */
.uk-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 1.6; font-weight: 500;
  background: var(--uk-neutral-subtle); color: var(--uk-muted);
}
.uk-tag.green { background: var(--uk-ok-subtle); color: var(--uk-ok-ink); }
.uk-tag.blue { background: var(--uk-info-subtle); color: var(--uk-info-ink); }
.uk-tag.orange { background: var(--uk-warn-subtle); color: var(--uk-warn-ink); }
.uk-tag.gray { background: var(--uk-neutral-tint); color: var(--uk-neutral-ink); }
.uk-tag.red { background: var(--uk-danger-subtle); color: var(--uk-danger-ink); }

/* 圆点状态徽章（可点） */
.uk-status { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: pointer; transition: transform .15s; }
.uk-status:hover { transform: scale(1.05); }

/* ---------- 面板（可滚动卡片，带头部条） ---------- */
.uk-panel {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--uk-card); border: 1px solid var(--uk-border); border-radius: var(--uk-radius-lg);
}
.uk-panel-hd {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--uk-subtle); border-bottom: 1px solid var(--uk-border);
  font-size: 13px; font-weight: 600; color: var(--uk-ink);
}
.uk-panel-bd { flex: 1; min-height: 0; overflow: auto; padding: 14px; }

/* ---------- 表格 ---------- */
.uk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.uk-table th {
  position: sticky; top: 0; z-index: 1; background: var(--uk-surface-hover);
  padding: 9px 12px; text-align: left; font-weight: 600; color: var(--uk-muted);
  border-bottom: 1px solid var(--uk-border); white-space: nowrap;
}
.uk-table td { padding: 9px 12px; border-bottom: 1px solid var(--uk-border-weak); vertical-align: top; background: var(--uk-card); }
.uk-table tbody tr:hover td { background: var(--uk-subtle); }
.uk-table tr.selected td { background: var(--uk-accent-subtle); }

/* ---------- 标签页 ---------- */
.uk-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--uk-border); margin-bottom: 12px; }
.uk-tab {
  padding: 8px 14px; font-size: 13px; color: var(--uk-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; transition: color .15s;
}
.uk-tab:hover { color: var(--uk-ink); }
.uk-tab.active { color: var(--uk-accent); border-bottom-color: var(--uk-accent); font-weight: 600; }

/* ---------- 开关 ---------- */
.uk-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.uk-switch input { opacity: 0; width: 0; height: 0; }
.uk-switch .slider { position: absolute; inset: 0; cursor: pointer; background: var(--uk-switch-off); border-radius: 22px; transition: .3s; }
.uk-switch .slider::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 2px; bottom: 2px;
  background: var(--uk-surface); border-radius: 50%; transition: .3s cubic-bezier(.4, 0, .2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.uk-switch input:checked + .slider { background: var(--uk-accent); }
.uk-switch input:checked + .slider::before { transform: translateX(16px); }

/* ---------- 进度条 ---------- */
.uk-progress { width: 100%; height: 6px; background: var(--uk-border); border-radius: 3px; overflow: hidden; }
.uk-progress-fill { height: 100%; background: var(--uk-accent); border-radius: 3px; transition: width .3s; }

/* ---------- 弹层补充（页脚 / 宽度） ---------- */
.uk-modal-hd h3 { font-size: 15px; font-weight: 600; margin: 0; }
.uk-modal-ft { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--uk-border); background: var(--uk-subtle-2); }
.uk-modal.wide { width: min(620px, 94vw); }

/* ---------- 提示条（右上/居中浮现） ---------- */
.uk-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  padding: 11px 22px; border-radius: var(--uk-radius); color: var(--uk-on-solid);
  font-size: 13px; font-weight: 500; z-index: 2000; box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.uk-toast.success { background: var(--uk-ok); }
.uk-toast.error { background: var(--uk-danger); }
.uk-toast.info { background: var(--uk-info); }
.uk-toast.warning { background: var(--uk-warn); }

/* =========================================================================
 * 闭环底座：注册 / 登录 / 找回密码 / 会员 / 支付 / 授权
 * 所有对外项目复用本套，禁止各自重写。登录/注册底部必须有隐私条款勾选框。
 * ========================================================================= */

/* ---------- 鉴权页外壳 ---------- */
.uk-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--uk-accent-subtle), transparent 60%),
    var(--uk-main-bg);
}
.uk-auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--uk-surface);
  border: 1px solid var(--uk-border-strong);
  border-radius: 16px;
  padding: 30px 28px;
  box-shadow: var(--uk-shadow-login);
}

/* 品牌头（各项目独立 logo/名称，仅统一结构） */
.uk-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin-bottom: 20px;
}
.uk-auth-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--uk-logo-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--uk-on-solid);
  font-size: 20px;
  font-weight: 700;
  flex: none;
}
.uk-auth-title { font-size: 19px; font-weight: 600; color: var(--uk-ink); line-height: 1.3; }
.uk-auth-sub { font-size: 13px; color: var(--uk-muted); }

/* 分段切换（密码登录 / 验证码登录；登录 / 注册） */
.uk-auth-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  background: var(--uk-neutral-subtle);
  border-radius: 10px;
}
.uk-auth-tab {
  padding: 8px 0;
  font-size: 13.5px;
  color: var(--uk-muted);
  cursor: pointer;
  border: 0;
  background: transparent;
  border-radius: 7px;
  font-weight: 500;
  transition: color .15s, background .15s;
}
.uk-auth-tab:hover { color: var(--uk-ink); }
.uk-auth-tab.active {
  background: var(--uk-surface);
  color: var(--uk-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

/* 表单字段 */
.uk-auth-field { display: block; margin-bottom: 14px; }
.uk-auth-field > label {
  display: block;
  font-size: 12.5px;
  color: var(--uk-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.uk-auth-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--uk-border);
  border-radius: 9px;
  font-size: 14px;
  outline: none;
  background: var(--uk-surface);
  color: var(--uk-ink);
  transition: border-color .15s;
}
.uk-auth-field input:focus { border-color: var(--uk-accent); }
.uk-auth-field input::placeholder { color: var(--uk-faint); }
.uk-auth-field.err input { border-color: var(--uk-danger); }
.uk-auth-help { font-size: 12px; color: var(--uk-muted); margin-top: 5px; line-height: 1.5; }
.uk-auth-error {
  font-size: 12.5px;
  color: var(--uk-danger-ink);
  background: var(--uk-danger-subtle);
  border: 1px solid var(--uk-danger);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}
.uk-auth-notice {
  font-size: 13px;
  color: var(--uk-warn-ink);
  background: var(--uk-warn-subtle);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* 行内组合：手机号 + 取码 / 验证码 + 图 */
.uk-auth-row { display: flex; gap: 8px; align-items: stretch; }
.uk-auth-row > .uk-auth-field { flex: 1; margin-bottom: 0; }
.uk-auth-row .uk-btn { flex: none; align-self: stretch; padding: 0 14px; font-size: 13px; }
.uk-auth-captcha {
  flex: none;
  width: 110px;
  height: 40px;
  border: 1px solid var(--uk-border);
  border-radius: 9px;
  background: var(--uk-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--uk-muted);
  font-size: 12.5px;
  user-select: none;
  overflow: hidden;
}
.uk-auth-captcha img { width: 100%; height: 100%; object-fit: cover; }

/* 主操作按钮 */
.uk-auth-submit {
  width: 100%;
  justify-content: center;
  padding: 11px;
  font-size: 14.5px;
  font-weight: 600;
}

/* 辅助行（忘记密码 / 切换登录注册） */
.uk-auth-aux {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 16px;
}
.uk-auth-aux a { color: var(--uk-accent); text-decoration: none; cursor: pointer; }
.uk-auth-aux a:hover { text-decoration: underline; }
.uk-auth-aux .muted { color: var(--uk-muted); }
.uk-auth-switch {
  text-align: center;
  font-size: 13px;
  color: var(--uk-muted);
  margin-top: 16px;
}
.uk-auth-switch a { color: var(--uk-accent); text-decoration: none; cursor: pointer; }
.uk-auth-switch a:hover { text-decoration: underline; }

/* ★ 隐私 & 服务条款勾选框（登录/注册底部必须有） */
.uk-terms {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;          /* 勾选框和文字必须同一行：窄窗口也不许把整句挤到下一行 */
  gap: 8px;
  margin: 16px 0 18px;
  /* 窄窗口（App 内嵌窗口 / 手机）自动缩字，保证「我已阅读并同意 … 和 …」一句放得下 */
  font-size: clamp(10px, 3vw, 12.5px);
  line-height: 1.6;
  color: var(--uk-muted);
}
.uk-terms > span { min-width: 0; white-space: nowrap; }
.uk-terms input[type="checkbox"] {
  flex: none;
  margin-top: 3px;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--uk-accent);
}
.uk-terms a { color: var(--uk-accent); text-decoration: none; }
.uk-terms a:hover { text-decoration: underline; }

/* 分隔线（或使用第三方登录） */
.uk-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--uk-faint);
  font-size: 12px;
}
.uk-divider::before,
.uk-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--uk-border);
}

/* 第三方登录按钮 */
.uk-social { display: flex; gap: 10px; justify-content: center; }
.uk-social-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--uk-border);
  background: var(--uk-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--uk-ink);
  transition: background .15s, border-color .15s;
}
.uk-social-btn:hover { background: var(--uk-surface-hover); border-color: var(--uk-border-strong); }
.uk-social-btn svg { width: 20px; height: 20px; }

/* ---------- 会员 / 定价 ---------- */
.uk-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.uk-price-card {
  position: relative;
  background: var(--uk-card);
  border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.uk-price-card:hover { transform: translateY(-2px); }
.uk-price-card.featured {
  border-color: var(--uk-accent);
  box-shadow: 0 0 0 3px var(--uk-accent-subtle);
}
.uk-price-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--uk-accent);
  color: var(--uk-accent-contrast);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.uk-price-name { font-size: 16px; font-weight: 600; color: var(--uk-ink); }
.uk-price-desc { font-size: 12.5px; color: var(--uk-muted); margin-top: 4px; min-height: 32px; }
.uk-price-amount { margin: 14px 0 4px; }
.uk-price-amount .cur { font-size: 14px; color: var(--uk-ink); vertical-align: top; margin-right: 2px; }
.uk-price-amount .num { font-size: 32px; font-weight: 700; color: var(--uk-ink); line-height: 1; }
.uk-price-amount .unit { font-size: 13px; color: var(--uk-muted); margin-left: 4px; }
.uk-price-origin { font-size: 12.5px; color: var(--uk-faint); text-decoration: line-through; margin-bottom: 12px; }
.uk-price-feats { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; }
.uk-price-feats li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  color: var(--uk-ink);
  padding: 4px 0;
}
.uk-price-feats li .tic { color: var(--uk-ok); flex: none; margin-top: 1px; }
.uk-price-feats li.off { color: var(--uk-faint); }
.uk-price-feats li.off .tic { color: var(--uk-faint); }
.uk-price-card .uk-btn { margin-top: auto; }

/* ---------- 支付 ---------- */
.uk-pay-methods { display: flex; flex-direction: column; gap: 10px; }
.uk-pay-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.uk-pay-method:hover { background: var(--uk-surface-hover); }
.uk-pay-method.on { border-color: var(--uk-accent); background: var(--uk-accent-subtle); }
.uk-pay-method .ic {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--uk-neutral-subtle);
  color: var(--uk-ink);
  font-size: 16px;
}
.uk-pay-method .meta { flex: 1; min-width: 0; }
.uk-pay-method .name { font-size: 14px; font-weight: 500; color: var(--uk-ink); }
.uk-pay-method .desc { font-size: 12px; color: var(--uk-muted); }
.uk-pay-method .radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--uk-border-strong);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uk-pay-method.on .radio { border-color: var(--uk-accent); }
.uk-pay-method.on .radio::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--uk-accent);
}
/* 支付摘要 */
.uk-pay-summary {
  background: var(--uk-subtle);
  border-radius: var(--uk-radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.uk-pay-summary .row { display: flex; justify-content: space-between; padding: 3px 0; }
.uk-pay-summary .row.total { font-weight: 600; font-size: 15px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--uk-border); color: var(--uk-ink); }
.uk-pay-summary .row .label { color: var(--uk-muted); }

/* ---------- 授权 / 同意屏（OAuth 风格） ---------- */
.uk-authz {
  width: 100%;
  max-width: 440px;
  background: var(--uk-surface);
  border: 1px solid var(--uk-border-strong);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--uk-shadow-login);
}
.uk-authz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.uk-authz-app {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--uk-logo-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--uk-on-solid);
  font-size: 18px;
  font-weight: 700;
  flex: none;
}
.uk-authz-title { font-size: 16px; font-weight: 600; color: var(--uk-ink); }
.uk-authz-tip { font-size: 12.5px; color: var(--uk-muted); margin-top: 2px; }
.uk-authz-scopes {
  background: var(--uk-subtle);
  border-radius: var(--uk-radius);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.uk-authz-scopes .h { font-size: 12.5px; color: var(--uk-muted); margin-bottom: 8px; }
.uk-authz-scopes ul { list-style: none; padding: 0; margin: 0; }
.uk-authz-scopes li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--uk-ink);
}
.uk-authz-scopes li .tic { color: var(--uk-accent); flex: none; }
.uk-authz-actions { display: flex; gap: 10px; }
.uk-authz-actions .uk-btn { flex: 1; justify-content: center; padding: 10px; }

/* ---------- 补充：输入组（带前缀/后缀图标） ---------- */
.uk-input-group {
  position: relative;
  display: flex;
  align-items: center;
}
.uk-input-group .uk-input { padding-left: 36px; }
.uk-input-group .prefix {
  position: absolute;
  left: 11px;
  color: var(--uk-faint);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.uk-input-group .prefix svg { width: 16px; height: 16px; }

/* ---------- 加载占位 ---------- */
.uk-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: uk-spin .6s linear infinite;
}
@keyframes uk-spin { to { transform: rotate(360deg); } }

/* =========================================================================
 * 电脑端 · 微信 PC 风格组件（会话列表 / 聊天窗口 / 通讯录）
 * 布局沿用 uk-app 外壳：rail + navcol(会话列表) + body(聊天区)
 * ========================================================================= */

/* ---------- 会话列表项（navcol 内） ---------- */
.uk-session {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--uk-radius);
  cursor: pointer;
  transition: background .12s;
}
.uk-session:hover { background: var(--uk-field-bg); }
.uk-session.on { background: var(--uk-item-active); }
.uk-session .av {
  width: 38px; height: 38px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--uk-on-solid); font-size: 15px; font-weight: 500; font-style: normal;
  overflow: hidden; user-select: none; position: relative;
}
.uk-session .av .uk-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--uk-badge); color: var(--uk-on-solid);
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 600;
  box-shadow: 0 0 0 2px var(--uk-side-bg);
}
.uk-session .body { flex: 1; min-width: 0; }
.uk-session .row1 { display: flex; align-items: baseline; gap: 8px; }
.uk-session .name { font-size: 14px; color: var(--uk-ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.uk-session .time { font-size: 11px; color: var(--uk-faint); flex: none; }
.uk-session .row2 { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.uk-session .last { font-size: 12px; color: var(--uk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.uk-session .muted { color: var(--uk-faint); }
.uk-session .draft { color: var(--uk-danger-ink); }
.uk-session .mute-ic { color: var(--uk-faint); flex: none; }

/* 会话列表分组标题（置顶 / 群聊 / 标签） */
.uk-session-grp {
  font-size: 11.5px; color: var(--uk-faint);
  padding: 8px 12px 4px; text-transform: uppercase; letter-spacing: .03em;
}

/* ---------- 聊天窗口（body 内） ---------- */
.uk-chat {
  display: flex; flex-direction: column;
  height: 100%; background: var(--uk-main-bg);
}
/* 聊天顶栏 */
.uk-chat-top {
  flex: none; height: var(--uk-top-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  background: var(--uk-card);
  border-bottom: 1px solid var(--uk-border);
}
.uk-chat-top .t { font-size: 15px; font-weight: 600; color: var(--uk-ink); }
.uk-chat-top .sub { font-size: 12px; color: var(--uk-muted); }
.uk-chat-top .grow { flex: 1; }
.uk-chat-top .tools { display: flex; gap: 4px; color: var(--uk-muted); }
.uk-chat-top .tools button {
  border: 0; background: transparent; cursor: pointer; color: inherit;
  width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
}
.uk-chat-top .tools button:hover { background: var(--uk-surface-hover); }

/* 消息区 */
.uk-chat-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
/* 时间分隔 */
.uk-msg-time {
  align-self: center;
  font-size: 11px; color: var(--uk-faint);
  background: var(--uk-gray-200);
  padding: 2px 8px; border-radius: 4px;
  margin: 4px 0;
}
/* 单条消息 */
.uk-msg { display: flex; gap: 8px; max-width: 70%; }
.uk-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.uk-msg .av {
  width: 36px; height: 36px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--uk-on-solid); font-size: 14px; font-weight: 500; font-style: normal;
}
.uk-msg .bubble {
  position: relative;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  background: var(--uk-surface);
  color: var(--uk-ink);
}
.uk-msg.me .bubble { background: var(--uk-accent); color: var(--uk-accent-contrast); }
/* 气泡小三角 */
.uk-msg .bubble::before {
  content: ""; position: absolute; top: 12px;
  width: 0; height: 0;
  border: 5px solid transparent;
}
.uk-msg:not(.me) .bubble::before { left: -10px; border-right-color: var(--uk-surface); }
.uk-msg.me .bubble::before { right: -10px; border-left-color: var(--uk-accent); }
.uk-msg .bubble .meta { font-size: 11px; opacity: .6; margin-top: 4px; }
/* 系统消息（居中灰条） */
.uk-msg-sys {
  align-self: center;
  font-size: 12px; color: var(--uk-faint);
  background: var(--uk-gray-200);
  padding: 3px 10px; border-radius: 4px;
}
/* 图片消息 */
.uk-msg .bubble img { max-width: 220px; border-radius: 4px; display: block; }

/* 聊天输入栏 */
.uk-chat-input {
  flex: none;
  background: var(--uk-card);
  border-top: 1px solid var(--uk-border);
  padding: 8px 14px 12px;
}
.uk-chat-input .tools {
  display: flex; gap: 4px; margin-bottom: 6px;
  color: var(--uk-muted);
}
.uk-chat-input .tools button {
  border: 0; background: transparent; cursor: pointer; color: inherit;
  width: 28px; height: 28px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
}
.uk-chat-input .tools button:hover { background: var(--uk-surface-hover); color: var(--uk-ink); }
.uk-chat-input textarea {
  width: 100%; min-height: 60px; max-height: 140px;
  border: 0; outline: none; resize: none;
  background: transparent; color: var(--uk-ink);
  font-size: 14px; line-height: 1.5;
  font-family: inherit;
}
.uk-chat-input .foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  font-size: 11px; color: var(--uk-faint);
}

/* ---------- 通讯录（navcol 列表项） ---------- */
.uk-contact {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--uk-radius);
  cursor: pointer; font-size: 13.5px; color: var(--uk-ink);
}
.uk-contact:hover { background: var(--uk-field-bg); }
.uk-contact.on { background: var(--uk-item-active); font-weight: 500; }
.uk-contact .av {
  width: 32px; height: 32px; border-radius: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--uk-on-solid); font-size: 13px; font-weight: 500; font-style: normal;
}
.uk-contact .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uk-contact .cnt { flex: none; background: var(--uk-danger); color: var(--uk-on-solid); border-radius: 9px; font-size: 11px; line-height: 16px; padding: 0 6px; }
/* 字母索引条 */
.uk-alpha-index {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1px;
  font-size: 10px; color: var(--uk-faint);
}
.uk-alpha-index span { padding: 0 4px; cursor: pointer; border-radius: 3px; }
.uk-alpha-index span:hover { background: var(--uk-field-bg); color: var(--uk-accent); }

/* =========================================================================
 * 移动端 · 微信风格框架
 * 容器：.uk-mobile （固定 375x700 预览，或 100% 适配）
 * 结构：.uk-m-nav（顶栏） + .uk-m-page（内容区） + .uk-m-tabbar（底栏）
 * ========================================================================= */

.uk-mobile {
  width: 375px;
  height: 700px;
  background: var(--uk-main-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--uk-shadow-card);
  position: relative;
}
.uk-mobile.full { width: 100%; height: 100%; border-radius: 0; }

/* ---------- 移动端顶栏 ---------- */
.uk-m-nav {
  flex: none;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--uk-card);
  border-bottom: 1px solid var(--uk-border);
  position: relative;
}
.uk-m-nav.green { background: var(--uk-accent); color: var(--uk-accent-contrast); border-bottom: 0; }
.uk-m-nav .back {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: inherit;
}
.uk-m-nav .title {
  flex: 1; text-align: center; font-size: 16px; font-weight: 600; color: inherit;
  margin: 0 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uk-m-nav .right {
  position: absolute; right: 12px; top: 0; height: 48px;
  display: flex; align-items: center; gap: 6px;
}
.uk-m-nav .right button {
  border: 0; background: transparent; cursor: pointer; color: inherit;
  width: 28px; height: 28px; border-radius: 5px; display: flex; align-items: center; justify-content: center;
}

/* ---------- 移动端内容页 ---------- */
.uk-m-page {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.uk-m-page.pad { padding: 12px; }

/* ---------- 移动端会话列表（首页） ---------- */
.uk-m-session {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--uk-card);
  border-bottom: 1px solid var(--uk-border-weak);
  cursor: pointer;
  position: relative;
}
.uk-m-session:active { background: var(--uk-surface-hover); }
.uk-m-session .av {
  width: 44px; height: 44px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--uk-on-solid); font-size: 17px; font-weight: 500; font-style: normal;
  overflow: hidden; position: relative;
}
.uk-m-session .av .uk-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--uk-badge); color: var(--uk-on-solid);
  font-size: 11px; line-height: 18px; text-align: center; font-weight: 600;
}
.uk-m-session .body { flex: 1; min-width: 0; }
.uk-m-session .row1 { display: flex; align-items: baseline; gap: 8px; }
.uk-m-session .name { font-size: 15px; color: var(--uk-ink); font-weight: 500; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uk-m-session .time { font-size: 11px; color: var(--uk-faint); flex: none; }
.uk-m-session .row2 { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.uk-m-session .last { font-size: 12.5px; color: var(--uk-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uk-m-session .mute { color: var(--uk-faint); }

/* 会话列表搜索条 */
.uk-m-search {
  padding: 8px 12px; background: var(--uk-card);
  border-bottom: 1px solid var(--uk-border-weak);
}
.uk-m-search .box {
  display: flex; align-items: center; gap: 6px;
  background: var(--uk-gray-150); border-radius: 6px;
  padding: 6px 10px; color: var(--uk-faint); font-size: 13px;
}

/* ---------- 移动端聊天气泡（复用 uk-msg 体系，移动端尺寸微调） ---------- */
.uk-mobile .uk-chat-body { padding: 12px; gap: 12px; }
.uk-mobile .uk-msg { max-width: 78%; }
.uk-mobile .uk-msg .av { width: 34px; height: 34px; font-size: 13px; }
.uk-mobile .uk-msg .bubble { font-size: 15px; padding: 8px 11px; }

/* 移动端聊天输入栏 */
.uk-mobile .uk-chat-input { padding: 6px 10px 8px; }
.uk-mobile .uk-chat-input textarea { min-height: 36px; max-height: 100px; font-size: 15px; }

/* ---------- 移动端通讯录 ---------- */
.uk-m-contact {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--uk-card);
  border-bottom: 1px solid var(--uk-border-weak);
  cursor: pointer;
}
.uk-m-contact:active { background: var(--uk-surface-hover); }
.uk-m-contact .av {
  width: 38px; height: 38px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--uk-on-solid); font-size: 15px; font-weight: 500; font-style: normal;
}
.uk-m-contact .t { flex: 1; font-size: 15px; color: var(--uk-ink); }
.uk-m-contact .arr { color: var(--uk-faint); font-size: 18px; }
/* 字母分组标题 */
.uk-m-alpha {
  padding: 4px 14px;
  font-size: 12px; color: var(--uk-faint);
  background: var(--uk-gray-100);
}

/* ---------- 移动端「我」页面 ---------- */
.uk-m-me {
  background: var(--uk-gray-100);
  min-height: 100%;
}
.uk-m-me .profile {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 16px;
  background: var(--uk-card);
  border-bottom: 1px solid var(--uk-border-weak);
}
.uk-m-me .profile .av {
  width: 56px; height: 56px; border-radius: 10px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--uk-on-solid); font-size: 22px; font-weight: 600; font-style: normal;
}
.uk-m-me .profile .info { flex: 1; }
.uk-m-me .profile .name { font-size: 18px; font-weight: 600; color: var(--uk-ink); }
.uk-m-me .profile .wxid { font-size: 12.5px; color: var(--uk-muted); margin-top: 4px; }
.uk-m-me .profile .qrcode { color: var(--uk-faint); font-size: 22px; }
/* 分组列表 */
.uk-m-list {
  background: var(--uk-card);
  margin-top: 8px;
}
.uk-m-list .item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--uk-border-weak);
  cursor: pointer;
}
.uk-m-list .item:last-child { border-bottom: 0; }
.uk-m-list .item:active { background: var(--uk-surface-hover); }
.uk-m-list .item .ic {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--uk-accent);
}
.uk-m-list .item .ic svg { width: 22px; height: 22px; }
.uk-m-list .item .t { flex: 1; font-size: 15px; color: var(--uk-ink); }
.uk-m-list .item .arr { color: var(--uk-faint); font-size: 18px; }
.uk-m-list .item .badge {
  background: var(--uk-badge); color: var(--uk-on-solid);
  font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 8px;
}

/* ---------- 移动端底部 tab bar ---------- */
.uk-m-tabbar {
  flex: none;
  height: 52px;
  display: flex;
  background: var(--uk-card);
  border-top: 1px solid var(--uk-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.uk-m-tabbar .tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: var(--uk-faint);
  font-size: 10.5px;
  position: relative;
}
.uk-m-tabbar .tab .ic { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.uk-m-tabbar .tab .ic svg { width: 24px; height: 24px; }
.uk-m-tabbar .tab.on { color: var(--uk-accent); }
.uk-m-tabbar .tab .uk-badge {
  position: absolute; top: 4px; left: 50%; margin-left: 8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--uk-badge); color: var(--uk-on-solid);
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 600;
}

/* ---------- 管理后台 · 直接用户授权 ---------- */
.uk-admin-grant {
  background: var(--uk-card); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); padding: 24px;
}
.uk-admin-grant-search { display: flex; gap: 10px; margin-bottom: 18px; }
.uk-admin-grant-search .uk-input { flex: 1; }
.uk-admin-grant-user {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--uk-brand-soft); border: 1px solid var(--uk-brand);
  border-radius: var(--uk-radius); margin-bottom: 18px;
}
.uk-admin-grant-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--uk-brand); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
  flex-shrink: 0;
}
.uk-admin-grant-user .info { flex: 1; }
.uk-admin-grant-user .name { font-weight: 600; font-size: 15px; }
.uk-admin-grant-user .meta { font-size: 12px; color: var(--uk-text-muted); margin-top: 2px; }
.uk-admin-grant-empty { padding: 22px; text-align: center; color: var(--uk-text-muted); font-size: 13px; background: var(--uk-bg-soft); border: 1px dashed var(--uk-border); border-radius: var(--uk-radius-lg); }
/* 套餐选择 */
.uk-grant-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-bottom: 14px; }
.uk-grant-plan {
  border: 2px solid var(--uk-border); border-radius: var(--uk-radius);
  padding: 12px 10px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.uk-grant-plan:hover { border-color: var(--uk-brand); }
.uk-grant-plan.on { border-color: var(--uk-brand); background: var(--uk-brand-soft); }
.uk-grant-plan .p-name { font-weight: 600; font-size: 14px; }
.uk-grant-plan .p-days { font-size: 11px; color: var(--uk-text-muted); margin-top: 3px; }
/* 自定义天数 */
.uk-grant-custom { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.uk-grant-custom .uk-input { width: 100px; }
.uk-grant-custom label { font-size: 13px; color: var(--uk-text-muted); }
/* 授权备注 */
.uk-grant-note { margin-bottom: 14px; }
.uk-grant-note textarea { width: 100%; min-height: 60px; resize: vertical; }
/* 授权结果 */
.uk-grant-result {
  padding: 14px; border-radius: var(--uk-radius); margin-top: 14px;
  background: var(--uk-bg-soft); color: var(--uk-text); font-size: 13px;
  border-left: 3px solid var(--uk-brand);
}
.uk-grant-result .row { display: flex; justify-content: space-between; padding: 3px 0; }
.uk-grant-result .row span:first-child { color: var(--uk-text-muted); }
.uk-grant-result .row span:last-child { font-weight: 600; }

/* ---------- 手动授权码激活 ---------- */
.uk-license {
  background: var(--uk-card); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); padding: 28px;
}
.uk-license-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.uk-license-head .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--uk-brand-soft); color: var(--uk-brand);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.uk-license-head h3 { margin: 0; font-size: 18px; }
.uk-license-head p { margin: 2px 0 0; font-size: 13px; color: var(--uk-text-muted); }
.uk-license-form { display: flex; gap: 10px; }
.uk-license-form .uk-input { flex: 1; letter-spacing: 2px; font-family: monospace; text-transform: uppercase; }
.uk-license-tip { margin-top: 10px; font-size: 12px; color: var(--uk-text-muted); }
.uk-license-tip a { color: var(--uk-brand); text-decoration: none; }
/* 授权状态徽章 */
.uk-lic-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.uk-lic-state.on { background: #e8f5e9; color: #2e7d32; }
.uk-lic-state.off { background: #f5f5f5; color: #999; }
.uk-lic-state .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- 购买赠送（用户端，自动开通授权） ---------- */
.uk-gift {
  background: var(--uk-card); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); padding: 24px;
}
.uk-gift-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.uk-gift-head .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, #ff9800, #ff5722); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.uk-gift-head h3 { margin: 0; font-size: 18px; }
.uk-gift-head p { margin: 2px 0 0; font-size: 13px; color: var(--uk-text-muted); }
/* 套餐网格 */
.uk-gift-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.uk-gift-plan {
  border: 2px solid var(--uk-border); border-radius: var(--uk-radius);
  padding: 16px 12px; text-align: center; cursor: pointer;
  transition: border-color .15s, transform .1s; position: relative;
}
.uk-gift-plan:hover { transform: translateY(-1px); }
.uk-gift-plan.on { border-color: var(--uk-brand); background: var(--uk-brand-soft); }
.uk-gift-plan .p-name { font-weight: 700; font-size: 15px; }
.uk-gift-plan .p-days { font-size: 11px; color: var(--uk-text-muted); margin-top: 4px; }
.uk-gift-plan .p-price { font-size: 20px; font-weight: 700; color: var(--uk-brand); margin-top: 8px; }
.uk-gift-plan .p-price small { font-size: 12px; font-weight: 400; }
.uk-gift-plan .p-original { font-size: 11px; color: #bbb; text-decoration: line-through; }
.uk-gift-plan.featured { border-color: #ff9800; }
.uk-gift-plan.featured::before {
  content: '推荐'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #ff9800, #ff5722); color: #fff;
  font-size: 10px; padding: 2px 10px; border-radius: 100px; white-space: nowrap;
}
/* 开通手机号 */
.uk-gift-phone { margin-bottom: 16px; }
.uk-gift-phone label { display: block; font-size: 13px; color: var(--uk-text-muted); margin-bottom: 6px; }
.uk-gift-phone .uk-input { font-size: 15px; }
.uk-gift-phone .tip { font-size: 12px; color: var(--uk-text-muted); margin-top: 6px; line-height: 1.5; }
.uk-gift-phone .tip b { color: var(--uk-brand); }
/* 支付方式内嵌 */
.uk-gift .uk-pay-methods { margin-bottom: 14px; }
.uk-gift .uk-pay-method { padding: 12px; }
/* 支付按钮 */
.uk-gift-submit { width: 100%; padding: 14px; font-size: 16px; }
/* 成功结果 */
.uk-gift-success { text-align: center; padding: 20px 0; }
.uk-gift-success .check {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  background: #e8f5e9; color: #2e7d32;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.uk-gift-success h4 { margin: 0 0 6px; font-size: 18px; }
.uk-gift-success .desc { color: var(--uk-text-muted); font-size: 13px; line-height: 1.8; }
.uk-gift-success .info {
  margin-top: 16px; padding: 14px; background: var(--uk-bg-soft);
  border-radius: var(--uk-radius); text-align: left; font-size: 13px;
}
.uk-gift-success .info .row { display: flex; justify-content: space-between; padding: 4px 0; }
.uk-gift-success .info .row span:first-child { color: var(--uk-text-muted); }

/* ---------- 推广分享 / 分成收益 ---------- */
.uk-share {
  background: var(--uk-card); border: 1px solid var(--uk-border);
  border-radius: var(--uk-radius-lg); padding: 24px;
}
.uk-share-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.uk-share-head h3 { margin: 0; font-size: 18px; }
.uk-share-head .sub { margin: 2px 0 0; font-size: 13px; color: var(--uk-text-muted); }
/* 收益统计三栏 */
.uk-share-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.uk-share-stat {
  background: var(--uk-bg-soft); border-radius: var(--uk-radius); padding: 16px; text-align: center;
}
.uk-share-stat .num { font-size: 24px; font-weight: 700; color: var(--uk-text); margin-bottom: 4px; }
.uk-share-stat .label { font-size: 12px; color: var(--uk-text-muted); }
.uk-share-stat.highlight { background: linear-gradient(135deg, var(--uk-brand), #4caf50); color: #fff; }
.uk-share-stat.highlight .num, .uk-share-stat.highlight .label { color: #fff; }
/* 分享链接行 */
.uk-share-link { display: flex; gap: 10px; margin-bottom: 16px; }
.uk-share-link .uk-input { flex: 1; font-size: 13px; background: var(--uk-bg-soft); }
/* 二维码占位 */
.uk-share-qr {
  width: 140px; height: 140px; margin: 0 auto 12px;
  background: var(--uk-bg-soft); border: 1px solid var(--uk-border);
  border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0px;
}
.uk-share-qr .center { background: var(--uk-card); padding: 8px; border-radius: 8px; color: var(--uk-brand); font-size: 20px; font-weight: 700; }
/* 推广明细列表 */
.uk-share-list { margin-top: 18px; }
.uk-share-list h4 { margin: 0 0 10px; font-size: 14px; color: var(--uk-text-muted); }
.uk-share-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--uk-border); font-size: 14px;
}
.uk-share-item:last-child { border-bottom: none; }
.uk-share-item .who { flex: 1; }
.uk-share-item .who .name { font-weight: 600; }
.uk-share-item .who .meta { font-size: 12px; color: var(--uk-text-muted); margin-top: 2px; }
.uk-share-item .amount { color: var(--uk-brand); font-weight: 700; }
.uk-share-item .amount.pending { color: var(--uk-text-muted); }
/* 提现按钮行 */
.uk-share-withdraw { display: flex; gap: 10px; margin-top: 16px; }

/* ---------- 移动端 ---------- */
@media (max-width: 900px) {
  .uk-app.uk-float { inset: 0; border-radius: 0; box-shadow: none; }
  .uk-rail { display: none; }
  .uk-navcol { display: none; }
  .uk-auth { padding: 16px 12px; }
  .uk-auth-card { padding: 24px 20px; }
}