/* ==========================================================================
   律智云 · App 端视觉层　Linear 规格
   全部规则限定 body.mobile，桌面端零影响。
   暗色原生 · 单强调色 · 月光边框 · 字重 510
   ========================================================================== */

/* ==========================================================================
   主题层：语义表面令牌
   ==========================================================================
   颜色一律走令牌，规则里不写死具体色值 —— 这样同一套布局能同时跑浅色和
   深色。之前把深色值直接写进 body.mobile 的规则里，等于把主题焊死在移动端，
   既没法切浅色，桌面端也用不上。

   命名按「用途」而不是「颜色」：
     --sf-1   卡片/面板底          --sf-2   输入框、次级面
     --sf-hi  悬停/按下           --bd     分割线、卡片边
     --bd-2   更明显的边（输入框）  --shell-1/2  顶栏、底部导航底
   ========================================================================== */

:root {
  --hero-a: #1E2C55; --hero-b: #0C1424;
  --login-a: #1B2748; --login-b: #080D18;
  /* 浅色（默认，保持桌面现状不变） */
  --sf-1: #FFFFFF;
  --sf-2: #F7F9FC;
  --sf-hi: #F0F3F9;
  --bd: #E8EDF5;
  --bd-2: #DFE5EF;
  --shell-1: rgba(255, 255, 255, .86);
  --shell-2: rgba(255, 255, 255, .92);
  --elev-1: #FFFFFF;
  --elev-2: #F7F9FC;
  --elev-3: #EEF2F8;
  --sheet-mask: rgba(12, 20, 40, .46);
  --hero-grad: radial-gradient(420px 220px at 90% -20%, rgba(59, 91, 219, .34), transparent 62%),
               linear-gradient(158deg, #1E2C55 0%, #0C1424 100%);
  --login-grad: radial-gradient(400px 240px at 86% -20%, rgba(59, 91, 219, .34), transparent 60%),
                linear-gradient(158deg, #1B2748 0%, #080D18 100%);
  --hero-line: rgba(255, 255, 255, .14);
  --hero-tx-2: #9CAECF;
  --grip: #DFE5EF;
  --code-bg: #FFFFFF;
  /* 语义色（浅色） */
  --tx: #161E33; --tx-2: #28324A; --tx-3: #5A6680; --tx-4: #9AA7BC;
  --ac: var(--brand-600); --ac-2: var(--brand-500); --ac-3: var(--brand-600);
  --panel: #FFFFFF; --surf: #F7F9FC; --surf-2: #EEF2F8;
  /* 墨蓝主卡上的文字两组主题都一样 —— 那张卡本身永远是深色 */
  --hero-tx: #F7F8F8;
}


[data-theme="dark"] {
  --hero-a: #16181C; --hero-b: #0B0C0E;
  --login-a: #14161A; --login-b: #08090A;
  /* 深色。这些值同时作用于桌面与 App —— 桌面也能切深色了 */
  --sf-1: rgba(255, 255, 255, .024);
  --sf-2: rgba(255, 255, 255, .03);
  --sf-hi: rgba(255, 255, 255, .05);
  --bd: rgba(255, 255, 255, .06);
  --bd-2: rgba(255, 255, 255, .09);
  --shell-1: rgba(15, 16, 17, .82);
  --shell-2: rgba(15, 16, 17, .88);
  --elev-1: #191A1B;
  --elev-2: #1F2023;
  --elev-3: #28282C;
  --sheet-mask: rgba(0, 0, 0, .72);
  --hero-line: rgba(255, 255, 255, .1);
  --hero-tx-2: #93A4C6;
  --grip: rgba(255, 255, 255, .16);
  --code-bg: rgba(255, 255, 255, .05);

  /* 语义色（深色） */
  --tx: #F7F8F8; --tx-2: #D0D6E0; --tx-3: #8A8F98; --tx-4: #62666D;
  --ac: #5E6AD2; --ac-2: #7170FF; --ac-3: #828FFF;
  --panel: #0F1011; --surf: #191A1B; --surf-2: #28282C;
  --hero-tx: #F7F8F8;

  /* 底与容器 */
  --bg: #08090A;
  --bg-soft: #0F1011;
  --card: #191A1B;
  --card-2: #1F2023;
  --ink-panel: #0B0C0E;
  --ink-panel-2: #131416;

  /* 中性阶梯整体翻转：数字越大越亮 */
  --ink-25: #131416;
  --ink-50: #1A1B1D;
  --ink-100: #202124;
  --ink-150: #25262A;
  --ink-200: #2C2D31;
  --ink-300: #3A3B40;
  --ink-400: #62666D;
  --ink-500: #8A8F98;
  --ink-600: #B4B8BE;
  --ink-700: #D0D6E0;
  --ink-800: #E3E6EA;
  --ink-900: #F7F8F8;

  /* 品牌：暗底上提亮一档，否则看不出是强调色 */
  --brand-50: rgba(94, 106, 210, .14);
  --brand-100: rgba(94, 106, 210, .22);
  --brand-200: rgba(94, 106, 210, .34);
  --brand-300: rgba(113, 112, 255, .5);
  --brand-400: #7170FF;
  --brand-500: #7170FF;
  --brand-600: #5E6AD2;
  --brand-700: #828FFF;
  --brand-2: #7170FF;
  --brand-3: #828FFF;

  /* 金色点缀在暗底上放宽到冷紫，避免与蓝紫撞色 */
  --gold-100: rgba(94, 106, 210, .14);
  --gold-200: rgba(113, 112, 255, .28);
  --gold-300: #8E9BFF;
  --gold-400: #7170FF;
  --gold-500: #5E6AD2;
  --gold-600: #4A55B8;

  /* 语义色：只留色相，底色压成半透明 */
  --ok-bg: rgba(39, 166, 68, .13);      --ok-bd: rgba(39, 166, 68, .3);
  --warn-bg: rgba(217, 136, 15, .13);   --warn-bd: rgba(217, 136, 15, .3);
  --danger-bg: rgba(229, 72, 77, .13);  --danger-bd: rgba(229, 72, 77, .3);
  --info-bg: rgba(94, 106, 210, .13);   --info-bd: rgba(94, 106, 210, .3);
  --violet-bg: rgba(94, 106, 210, .13); --violet-bd: rgba(94, 106, 210, .3);
  --ok: #3DD68C; --warn: #F2C879; --danger: #FF6369;
  --info: #828FFF; --violet: #828FFF;

  /* 暗底上投影几乎不可见，层级改由边框与透明度表达 */
  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: 0 24px 48px -24px rgba(0, 0, 0, .8);
  --sh-xl: 0 32px 64px -28px rgba(0, 0, 0, .9);
  --sh-brand: none;
  --sh-inset: none;
}

/* 尺寸与字阶：与主题无关，只跟屏幕有关 */
body.mobile {
  --m-gut: 16px;
  --m-pad: 16px;
  --m-top: 52px;
  --m-tab: 56px;
  /* 底部安全区。
     浏览器里由 env(safe-area-inset-bottom) 提供；但**安卓 WebView 不实现这个变量**（恒为 0），
     而 App 的 web-view 是铺到屏幕最底部的 —— 结果底部导航被系统手势条/三键导航压住，
     图标变暗、文字看不见。所以在外壳里换一个固定值顶替。
     等外壳层把 web-view 的下边界让开（setStyle({ bottom })），这个顶替就可以去掉。 */
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-tap: 38px;

  --r-a: 6px;
  --r-b: 8px;
  --r-c: 12px;
  --r-d: 16px;

  /* 移动端字号规格。
     手机上视距约 30cm，正文 15px 是舒适下限；标题只在层级上拉开，
     不靠一味放大 —— 26px 的标题在 390 宽里一行放不下七个字，
     折行后整块重心就散了。 */
  --f-h1: 22px; --ls-h1: -.6px;   /* 页面主标题 */
  --f-h2: 17px; --ls-h2: -.35px;  /* 顶栏标题 */
  --f-h3: 16.5px; --ls-h3: -.25px; /* 卡片标题：必须大于控件内文字 */
  --f-bd: 15px;                   /* 正文 */
  --f-sm: 13px;                   /* 次要信息 */
  --f-xs: 11px;                   /* 标签、脚注 */
  --lh-t: 1.38;                   /* 标题行高 */
  --lh-b: 1.66;                   /* 正文行高 */
  /* 状态栏安全区。套壳 App 已把 webview 整体下移，这里是给
     带刘海的浏览器 / 小程序 webview 兜底，取不到值时为零。 */
  --m-safe-t: env(safe-area-inset-top, 0px);
}


/* ============================ 基础层 ============================ */

body.mobile {
  background: var(--bg);
  color: var(--tx-2);
  -webkit-font-smoothing: antialiased;
}

/* 卡片：近透明底 + 月光边框。暗底上阴影几乎不可见，
   层级靠白透明度阶梯表达，不靠阴影堆叠。 */
body.mobile .card {
  background: var(--sf-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-b);
  box-shadow: none;
}
body.mobile .card-pad { padding: var(--m-pad) }
body.mobile .card-head {
  padding: 14px var(--m-pad) 12px;
  border-bottom: 1px solid var(--bd);
  gap: 8px; flex-wrap: wrap;
}
/* 标题前的线性图标在手机上只有十几像素，看不清也不成体系，收起 */
body.mobile .card-head > svg:first-child { display: none }
body.mobile .card-head h3 {
  font-size: var(--f-h3); font-weight: 510;
  letter-spacing: var(--ls-h3); color: var(--tx);
}
body.mobile .card-head .right { margin-left: auto; gap: 6px }
body.mobile .divider { background: var(--bd); margin: 14px 0 }
body.mobile .grid { gap: 12px }

/* 文字层级：主 / 次 / 弱 / 最弱，四级足够 */
body.mobile h1, body.mobile h2, body.mobile h3 { color: var(--tx) }
body.mobile .muted { color: var(--tx-3) }
body.mobile .small { font-size: var(--f-sm) }
body.mobile .tiny { font-size: var(--f-xs) }

/* ==========================================================================
   一、外壳：顶栏 · 底部导航 · 页面留白
   ========================================================================== */

/* 顶栏只回答「我在哪」。桌面那套还挂着 AI 接口徽章、多端、刷新，
   七件东西挤在 54px 里，标题被截断，用户也不知道这一屏在看什么。 */
body.mobile .topbar {
  /* 高度里含状态栏安全区 —— 带刘海的浏览器 / 小程序 webview 下，
     内容不会贴着系统状态栏；套壳 App 由外壳下移，这里取到 0，不重复占位 */
  height: calc(var(--m-top) + var(--m-safe-t));
  padding: var(--m-safe-t) 6px 0 4px;
  gap: 4px;
  background: var(--shell-1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--bd);
  box-shadow: none;
}
body.mobile .topbar .hamburger {
  width: var(--m-tap); height: var(--m-tap);
  border-radius: var(--r-a); color: var(--tx-2);
  display: flex; align-items: center; justify-content: center;
}
body.mobile .topbar .hamburger:active { background: var(--sf-hi) }
body.mobile .tb-title {
  font-size: var(--f-h2); font-weight: 510;
  letter-spacing: var(--ls-h2); color: var(--tx);
  /* 顶栏右侧有外观、铃铛、刷新、头像四个按钮，标题必须能自己收窄，
     否则长标题（如「案件台账与档案」）会把按钮挤出屏幕 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.mobile .topbar > div:first-of-type { min-width: 0 }
body.mobile .tb-chip { display: none }      /* 配置信息，不是日常动作 */
body.mobile .tb-right { gap: 2px; margin-left: auto }
body.mobile .tb-right .btn-sm { display: none }
body.mobile .tb-right .btn-icon {
  width: var(--m-tap); height: var(--m-tap);
  border-radius: var(--r-a); color: var(--tx-2);
}
body.mobile .tb-right .btn-icon:active { background: var(--sf-hi) }
body.mobile .tb-user {
  width: var(--m-tap); height: var(--m-tap); padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-a);
}
body.mobile .tb-user:active { background: var(--sf-hi) }
body.mobile .tb-user .avatar { width: 28px; height: 28px; border-radius: 8px }

/* App 壳内的底部留白顶替值。34px 是折中：
   手势导航条约 24px、三键导航约 48px 都够把图标抬出遮罩区。 */
html.in-app body.mobile { --m-safe-b: 34px }

/* 底部导航：手机上唯一的全局导航，要立得住 */
body.mobile .tabbar {
  height: calc(var(--m-tab) + var(--m-safe-b));
  padding-bottom: var(--m-safe-b);
  background: var(--shell-2);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--bd);
  box-shadow: none;
}
body.mobile .tabbar .tab {
  padding: 7px 2px 9px; gap: 3px; min-height: 0;
  font-size: 10.5px; font-weight: 510; letter-spacing: .01em;
  color: var(--tx-4);
}
body.mobile .tabbar .tab .ic { height: 23px; align-items: center }
body.mobile .tabbar .tab.on { color: var(--ac-3); font-weight: 510 }
body.mobile .tabbar .tab.on .ic { transform: none }
body.mobile .tabbar .tab:active { background: transparent; opacity: .6 }
body.mobile .tabbar .nav-badge {
  top: 2px; margin-left: 4px;
  border-color: var(--panel);
  background: var(--danger); color: #fff;
}

/* 页面留白：左右 16，模块间 14，底部让开导航 + 安全区 */
body.mobile .view {
  padding: 12px var(--m-gut)
           calc(var(--m-tab) + var(--m-safe-b) + 20px);
}
/* 集团水印在手机上会压在正文与按钮上，降到几乎不可见 */
body.mobile .lz-watermark { opacity: .018 }
body.mobile .login .lz-watermark { display: none }

/* ==========================================================================
   二、工作台
   ========================================================================== */

/* 主卡。桌面把两个按钮绝对定位在右上角，移动端改成静态后它们挤到了标题
   前面 —— 读起来像先有按钮再有问题。用 flex 排序把动作放回内容之后。 */
body.mobile .hero-card {
  display: flex; flex-direction: column;
  padding: 20px 18px 18px;
  border-radius: var(--r-d);
  background:
    radial-gradient(420px 220px at 90% -20%, rgba(94, 106, 210, .28), transparent 62%),
    linear-gradient(158deg, var(--hero-a) 0%, var(--hero-b) 100%);
  border: 1px solid var(--bd-2);
  box-shadow: none;
}
body.mobile .hero-card > .hero-actions { order: 1; margin: 18px 0 0; gap: 8px }
body.mobile .hero-card .hero-actions .btn { flex: 1; justify-content: center }
body.mobile .hero-card h2 {
  font-size: var(--f-h1); font-weight: 510;
  letter-spacing: var(--ls-h1); color: var(--tx);
  margin-bottom: 8px;
}
body.mobile .hero-card p {
  font-size: var(--f-sm); line-height: 1.7;
  color: var(--tx-3); letter-spacing: -.1px;
}
body.mobile .hero-card p b { color: var(--ac-3); font-weight: 510 }
body.mobile .hero-meta {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--bd);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}
body.mobile .hero-meta div {
  font-size: 10.5px; letter-spacing: .02em;
  color: var(--tx-4); font-weight: 510; min-width: 0;
}
/* 「接口来源」的值是「本组织自建（享客多律智云总部）」这类长串，
   最初不限高会折成三行、把两列撑得高低不齐；改成单行省略又切得太狠 ——
   「总部主接口 · DeepSeek」被切成「总部主接口 · Deep…」，信息丢了。
   放宽到最多两行：既看得全，又靠行数上限保证两列不会无节制地跑高。 */
body.mobile .hero-meta b {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  margin-top: 5px;
  font-size: 15px; font-weight: 510; letter-spacing: -.2px; color: var(--tx);
  min-width: 0; white-space: normal; overflow: hidden;
}

/* 信息格是 5 项，但网格是 2 列 —— 桌面端排成 2 + 2 + 1，
   最后那个「逾期预警」孤零零占左边半格，右半边空着，看着像排版出错。
   而它本身是「要留意」的信号，不该缩在角落里当普通数据。
   手机端让它通栏：标签在左、数值在右，成为一条完整的提示行。 */
body.mobile .hero-meta > div:last-child {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 2px; padding-top: 11px;
  border-top: 1px solid var(--hero-line);
}
body.mobile .hero-meta > div:last-child b {
  margin-top: 0; -webkit-line-clamp: 1;
  font-size: 16px;
}
/* 逾期数值的颜色原来写在行内（逾期 #ff9a9d、不逾期 #fff），只对深墨蓝主卡成立：
   浅色主题下主卡是浅色玻璃，白字等于隐形。改成类名，由各主题分别给色。 */
body.mobile .hero-meta .hm-over { color: var(--hero-tx) }
body.mobile .hero-meta .hm-over.on { color: #FF9A9D }

/* 指标卡：桌面 4 列、手机被压成一列 4 张，每张只有一个数字，纵向能拉一屏多。
   改成 2×2 —— 一屏放完，两组数字形成对比，比一列单调强读得多。 */
body.mobile .m-kpi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.mobile .m-kpi .stat {
  padding: 14px 14px 13px;
  background: var(--sf-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-b);
  box-shadow: none;
}
body.mobile .m-kpi .stat .k {
  font-size: 10.5px; letter-spacing: .02em;
  color: var(--tx-4); font-weight: 510;
}
/* 23px 在 2×2 的小卡里已经压住标签了，降到 20px；
   金额那格是「3,382.8 万」，六位数加单位，字再大就得换行 */
body.mobile .m-kpi .stat .v {
  font-size: 20px; font-weight: 510; letter-spacing: -.4px;
  color: var(--tx); line-height: 1.25; margin: 6px 0 4px;
}
body.mobile .m-kpi .stat { padding: 13px 13px 12px }
body.mobile .m-kpi .stat .v small { font-size: 11.5px }
body.mobile .m-kpi .stat .v small { font-size: 12px; font-weight: 400; color: var(--tx-3) }
body.mobile .m-kpi .stat .x { font-size: 10.5px; line-height: 1.5; color: var(--tx-4) }

/* 快捷入口：两列小卡，一屏扫完 */
body.mobile .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
body.mobile .quick-card {
  padding: 13px 13px 14px;
  background: var(--sf-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-b);
}
body.mobile .quick-card:active { background: var(--sf-hi) }
body.mobile .quick-card b {
  font-size: 14px; font-weight: 510; letter-spacing: -.15px; color: var(--tx);
}
body.mobile .quick-card span {
  font-size: 10.5px; line-height: 1.5; color: var(--tx-4); margin-top: 4px;
}

/* 期限条目：行高给足，手指才点得准 */
body.mobile .deadline-item {
  padding: 12px 0; gap: 11px;
  border-bottom: 1px solid var(--bd);
}
body.mobile .deadline-item:last-child { border-bottom: none }
body.mobile .deadline-item .d b { font-size: 15px; font-weight: 510; color: var(--tx) }
body.mobile .deadline-item .t b { font-size: 15px; font-weight: 510; color: var(--tx) }
body.mobile .deadline-item .t span { font-size: 10.5px; line-height: 1.5; color: var(--tx-4) }

/* ==========================================================================
   三、表单 · 按钮 · 标签
   ========================================================================== */

body.mobile .input, body.mobile .select, body.mobile .textarea {
  font-size: 16px;                 /* ≥16px 才不触发 iOS 聚焦缩放 */
  min-height: 46px; padding: 12px 14px;
  border-radius: var(--r-a);
  background: var(--sf-2);
  border: 1px solid var(--bd-2);
  color: var(--tx);
  box-shadow: none;
}
body.mobile .input::placeholder, body.mobile .textarea::placeholder { color: var(--tx-4) }
body.mobile .input:focus, body.mobile .select:focus, body.mobile .textarea:focus {
  border-color: var(--ac-2);
  background: var(--sf-hi);
  box-shadow: 0 0 0 3px rgba(113, 112, 255, .18);
}
body.mobile .textarea { min-height: 96px }
body.mobile .field { margin-bottom: 15px }
body.mobile .field > label {
  font-size: var(--f-sm); font-weight: 510;
  color: var(--tx-3); margin-bottom: 8px;
}
body.mobile .field-hint { font-size: 10.5px; line-height: 1.6; color: var(--tx-4) }

/* 按钮：主操作实心强调色，次要按钮近透明底 + 月光边框 */
body.mobile .btn {
  min-height: 42px; border-radius: var(--r-a);
  font-weight: 510; letter-spacing: -.1px;
}
body.mobile .btn:active { transform: scale(.985) }
body.mobile .btn-sm { min-height: 34px; border-radius: var(--r-a); font-size: var(--f-sm) }
body.mobile .btn-lg { min-height: 50px; font-size: 16px }
body.mobile .btn-block { width: 100% }
body.mobile .btn-primary {
  background: var(--ac); color: #fff; border-color: transparent;
}
body.mobile .btn-ghost, body.mobile .btn-soft {
  background: var(--sf-2);
  border: 1px solid var(--bd-2);
  color: var(--tx-2);
}
body.mobile .btn-ghost:active, body.mobile .btn-soft:active {
  background: var(--sf-hi);
}
body.mobile .btn-gold {
  background: rgba(94, 106, 210, .16);
  border: 1px solid rgba(113, 112, 255, .34);
  color: var(--ac-3);
}

/* 标签：透明底 + 细边，不用实心色块 —— 暗底上色块会喧宾夺主 */
body.mobile .tag {
  background: var(--sf-2);
  border: 1px solid var(--bd);
  color: var(--tx-3);
  border-radius: var(--r-a);
  font-size: 10.5px; font-weight: 510; padding: 2px 8px;
}
body.mobile .tag.red   { background: rgba(229, 72, 77, .13); border-color: rgba(229, 72, 77, .3); color: #FF8A8E }
body.mobile .tag.green { background: rgba(39, 166, 68, .13); border-color: rgba(39, 166, 68, .3); color: #6EE787 }
body.mobile .tag.amber { background: rgba(217, 136, 15, .13); border-color: rgba(217, 136, 15, .3); color: #F2C879 }
body.mobile .tag.blue,
body.mobile .tag.violet { background: rgba(113, 112, 255, .13); border-color: rgba(113, 112, 255, .3); color: var(--ac-3) }

/* 提示条：暗底上降饱和，只留一条左侧色条 */
body.mobile .alert {
  border-radius: var(--r-b); padding: 12px 14px;
  font-size: var(--f-sm); line-height: 1.65;
  border: 1px solid var(--bd);
  background: var(--sf-1);
  color: var(--tx-2);
}
body.mobile .alert.info  { border-left: 2px solid var(--ac-2); color: var(--tx-2) }
body.mobile .alert.warn  { border-left: 2px solid var(--warn); color: #F2C879 }
body.mobile .alert.err   { border-left: 2px solid var(--danger); color: #FF8A8E }
body.mobile .alert.ok    { border-left: 2px solid var(--ok); color: #6EE787 }

/* 空态 */
body.mobile .empty { padding: 42px 20px; color: var(--tx-4) }
body.mobile .empty .ic {
  background: var(--sf-2);
  border: 1px solid var(--bd);
  color: var(--tx-4);
}
body.mobile .empty b { color: var(--tx-2); font-size: var(--f-bd); font-weight: 510 }
body.mobile .empty span { font-size: var(--f-sm); line-height: 1.65; color: var(--tx-4) }

/* ==========================================================================
   四、列表（表格卡片模式）
   ========================================================================== */

body.mobile .tbl.cards tr {
  background: var(--sf-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-b);
  padding: 14px 15px; margin-bottom: 9px;
  box-shadow: none;
}
body.mobile .tbl.cards tr:active { background: var(--sf-hi) }
body.mobile .tbl.cards td {
  font-size: var(--f-sm); line-height: 1.6; padding: 4px 0;
  color: var(--tx-2); border: none;
}
body.mobile .tbl.cards td::before {
  width: 56px; font-size: 10.5px; color: var(--tx-4);
}
/* 首列当卡片标题：去掉字段名，底下一条分割线 */
body.mobile .tbl.cards td[data-label="案件"] {
  padding: 0 0 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--bd);
}
body.mobile .tbl.cards td[data-label="案件"] .nm {
  font-size: 16px; font-weight: 510; letter-spacing: -.2px; color: var(--tx);
}
body.mobile .tbl.cards td[data-label="操作"] { justify-content: flex-end; padding-top: 9px }

/* 筛选条：三个下拉原本挤在一行，右侧还塞着「共 N 条」和操作按钮，
   留给每个下拉的内容区不足 20px —— 连「全部」都显示不全。
   改成操作按钮独占一行（App 里主操作通栏本来就该这样），
   三个下拉平分剩下的整行，各有一百来像素，放得下完整选项名。 */
body.mobile .filters {
  padding: 13px; gap: 9px;
  background: var(--sf-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-b);
}
body.mobile .filters .input { flex: 1 1 100%; min-height: 44px }
body.mobile .filters .select {
  flex: 1 1 0; min-width: 0; min-height: 44px;
  padding: 9px 25px 9px 11px; font-size: 12.5px;
}
body.mobile .filters .btn { flex: 1 1 100%; justify-content: center; min-height: 44px }
/* 「共 N 条」原来跟三个下拉挤在同一行，被压到最右边一个小角。
   给它独占一行、右对齐 —— 它是统计信息，不该和筛选控件抢宽度。 */
body.mobile .filters .small.muted {
  flex: 1 1 100%; margin: 2px 0 0;
  text-align: right; font-size: 10.5px; color: var(--tx-4);
}

/* ==========================================================================
   五、弹窗 → 底部抽屉
   ========================================================================== */
/* 网页弹窗是屏幕正中一个白框，App 的动作面板从底部升起。
   这是两者最直观的差别之一，纯 CSS 就能改过来。 */
body.mobile .modal-mask {
  align-items: flex-end;
  padding: 0;
  background: var(--sheet-mask);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.mobile .modal {
  width: 100%; max-width: 100%; max-height: 92vh;
  background: var(--panel);
  border: 1px solid var(--bd-2);
  border-bottom: none;
  border-radius: var(--r-d) var(--r-d) 0 0;
  /* 留出底部安全区。原来写的是 env(safe-area-inset-bottom) ——
     安卓 WebView 不实现这个变量（恒为 0），而 App 的 web-view 铺到屏幕最底边，
     于是抽屉的按钮条被系统手势条压住，且被压住的那片触摸事件归系统，
     表现为「按钮点不到、往下也划不动」。
     改用 --m-safe-b：浏览器里它等于 env()，App 壳里换成固定值。 */
  padding-bottom: var(--m-safe-b);
  animation: m-sheet-in .28s cubic-bezier(.16, 1, .3, 1);
  box-shadow: none;
}
/* 抓手条 —— 有它才像能拖下来的原生面板 */
body.mobile .modal::before {
  content: ""; display: block; flex: none;
  width: 36px; height: 4px; margin: 9px auto 0;
  border-radius: 99px; background: var(--grip);
}
body.mobile .modal-head { border-bottom: 1px solid var(--bd) }
/* 右侧抽屉（案件详情、存储配置）在手机上是整屏高，底部同样收着一条 .modal-foot。
   原因与 .modal 相同，一并留出安全区。
   宽度不动 —— 手机上它是 min(600px, 94vw)，右侧露出的那条缝是刻意的层级提示。 */
body.mobile .drawer { padding-bottom: var(--m-safe-b) }
body.mobile .modal-head h3 { font-size: var(--f-h3); font-weight: 510; color: var(--tx) }
body.mobile .modal-head .sub { color: var(--tx-4); font-size: var(--f-sm) }
body.mobile .modal-foot { border-top: 1px solid var(--bd) }
@keyframes m-sheet-in { from { transform: translateY(100%) } to { transform: none } }

/* 通知面板：与抽屉同一套语言 */
body.mobile .bell-panel {
  background: var(--panel);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-c);
}
body.mobile .toast {
  background: var(--elev-3);
  border: 1px solid var(--bd-2);
  color: var(--tx);
}

/* ==========================================================================
   六、登录页 —— App 里第一屏就该能登录
   ========================================================================== */
/* 桌面是「左营销长页 + 右登录卡」。手机一屏只有约 640px 高，
   正文没读完就要滚，登录框落在第二屏；而 App 的登录页不该让人先读文案。
   这里把营销内容收起，只留品牌区 + 表单，整屏不滚动。 */
body.mobile .login {
  height: 100vh; height: 100dvh; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--bg);
}
body.mobile .login-hero {
  flex: 0 0 auto;
  padding: calc(48px + env(safe-area-inset-top, 0px)) 26px 62px;
  justify-content: flex-start;
  background:
    radial-gradient(400px 240px at 86% -20%, rgba(94, 106, 210, .30), transparent 60%),
    linear-gradient(158deg, var(--login-a) 0%, var(--login-b) 100%);
  border-radius: 0 0 26px 26px;
  border-bottom: 1px solid var(--bd);
}
body.mobile .login-brand { margin-bottom: 22px }
body.mobile .login-hero h1 {
  font-size: 25px; line-height: 1.36; margin-bottom: 11px;
  font-weight: 510; letter-spacing: -1px; color: var(--tx);
  text-wrap: balance;   /* 长标题折行时两行长度均分 */
}
body.mobile .login-hero h1 em { font-style: normal; color: var(--ac-3) }
/* 品牌描述是装修里配的长文案，手机上最多两行 ——
   再多就把登录框挤出首屏，而用户来这一屏是登录，不是读介绍。 */
body.mobile .login-hero .sub {
  font-size: var(--f-sm); line-height: 1.7; color: var(--tx-3);
  margin-bottom: 0; letter-spacing: -.1px;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}
/* 卖点 / 组织链路 / 页脚：桌面上是说服力，手机上是路障，收起 */
body.mobile .login-points,
body.mobile .login-chain,
body.mobile .login-foot { display: none }

body.mobile .login-panel {
  /* 不能用 flex:1 撑开 —— 它会把页脚那三个胶囊顶到屏幕底部，
     中间空出一大块。让它按内容高度走，页面就紧凑了。
     仍保留 overflow-y:auto，小屏 / 横屏时表单不至于够不到。 */
  flex: 0 1 auto; min-height: 0;
  display: block; padding: 0 18px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* 表单卡上浮，压住品牌区的圆角 —— 两个色块咬合，比上下拼接更像一张卡 */
body.mobile .login-box {
  margin-top: -24px;
  padding: 24px 20px 20px;
  background: var(--panel);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-d);
  box-shadow: var(--sh-lg);
}
/* 品牌区已经有 Logo，卡片里再来一个是重复 */
body.mobile .login-mark { display: none }
body.mobile .login-head { margin-bottom: 22px }
body.mobile .login-head h2 {
  font-size: 20px; font-weight: 510; letter-spacing: -.4px; color: var(--tx);
}
body.mobile .login-box .tip {
  white-space: normal; font-size: 10.5px;
  line-height: 1.6; color: var(--tx-4);
}
body.mobile .login-box .field { margin-bottom: 14px }
body.mobile .login-box .btn-lg { margin-top: 6px }
body.mobile .login-box .divider { background: var(--bd) }

/* 演示账号快切：桌面上是一堆药丸标签，手机上收成横向滚动一行 */
body.mobile .quick-users {
  display: flex; flex-wrap: nowrap; gap: 7px;
  overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
body.mobile .quick-users::-webkit-scrollbar { display: none }
body.mobile .quick-users .quick-user {
  flex: none; font-size: var(--f-sm);
  background: var(--sf-2);
  border: 1px solid var(--bd);
  color: var(--tx-3); border-radius: 99px; padding: 6px 12px;
}
body.mobile .login-site-link { font-size: var(--f-sm); color: var(--ac-3) }

/* ==========================================================================
   七、侧栏抽屉 · 个人中心 · 通讯录 · 其余页面
   ========================================================================== */

/* 侧栏在手机上是从左侧划出的抽屉，底色比页面暗一档，边界靠月光线 */
body.mobile .sidebar {
  background: var(--panel);
  border-right: 1px solid var(--bd);
  box-shadow: none;
  /* 侧栏是 inset:0 auto 0 0 —— 整屏高，底部的 .sb-foot（用户卡 / 退出 / 版权）
     正好落在系统导航栏下面，退出按钮会被压住点不到。留出安全区。 */
  padding-bottom: var(--m-safe-b);
}
body.mobile .sb-brand { border-bottom: 1px solid var(--bd) }
body.mobile .sb-org { border-bottom: 1px solid var(--bd) }
body.mobile .sb-label { color: var(--tx-4) }
body.mobile .sb-label-t { font-size: 10.5px; letter-spacing: .06em; font-weight: 510 }
body.mobile .sb-item {
  font-size: var(--f-bd); color: var(--tx-2);
  border-radius: var(--r-a); margin: 1px 8px; padding: 10px 11px;
}
body.mobile .sb-item.active {
  background: rgba(113, 112, 255, .13);
  color: var(--ac-3); font-weight: 510;
}
body.mobile .sb-item:active { background: var(--sf-hi) }
body.mobile .sb-foot { border-top: 1px solid var(--bd) }
body.mobile .nav-mask { background: var(--sheet-mask) }

/* 个人中心 */
body.mobile .pf-hero {
  background:
    radial-gradient(360px 200px at 88% -20%, rgba(94, 106, 210, .26), transparent 62%),
    linear-gradient(158deg, var(--hero-a) 0%, var(--hero-b) 100%);
  border: 1px solid var(--bd-2);
  border-radius: var(--r-c);
}
body.mobile .pf-hero-body { gap: 13px }
body.mobile .pf-avatar { border: 1px solid var(--bd-2) }
body.mobile .pf-hero-info h2 {
  font-size: 20px; font-weight: 510; letter-spacing: -.4px; color: var(--tx);
}
body.mobile .pf-hero-sub { color: var(--tx-3); font-size: var(--f-sm) }
/* 桌面上「我的数据」本来就是 3 列，mobile.css 把它改成了 2 列 ——
   6 项就摊成 3 行，占掉小半屏。390 宽下 3 列每格约 102px，
   标签（10.5px × 4 字 ≈ 42px）和数值（20px）都放得下，改回 3 列。 */
body.mobile .pf-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.mobile .pf-stats > * {
  background: var(--sf-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-b);
}
body.mobile .pf-stats .v { font-weight: 510; letter-spacing: -.4px; color: var(--tx) }
body.mobile .pf-stats .k { color: var(--tx-4) }
body.mobile .pf-grid { gap: 12px }
body.mobile .pf-bio { color: var(--tx-3) }

/* 通讯录 */
body.mobile .ct-wrap { gap: 12px }
body.mobile .ct-left, body.mobile .ct-right {
  background: var(--sf-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-b);
}
body.mobile .ct-search { border-bottom: 1px solid var(--bd) }
body.mobile .ct-item { border-bottom: 1px solid var(--bd) }
body.mobile .ct-item.on { background: rgba(113, 112, 255, .1) }
body.mobile .ct-line { max-width: 84% }
body.mobile .ct-line .b {
  background: var(--sf-hi);
  border: 1px solid var(--bd);
  color: var(--tx); border-radius: var(--r-b);
}
body.mobile .ct-line.me .b {
  background: var(--ac); border-color: transparent; color: #fff;
}
body.mobile .ct-msgs { max-height: 56vh }
body.mobile .ct-bar { border-top: 1px solid var(--bd) }
body.mobile .ct-bar .input { min-height: 42px }
body.mobile .ct-chat-head { border-bottom: 1px solid var(--bd) }

/* 日历 / 统计 / GEO：暗底上的容器统一去掉实心白与投影 */
body.mobile .cal-bar, body.mobile .cal-legend, body.mobile .cal-grid, body.mobile .cal-week,
body.mobile .geo-hero, body.mobile .device, body.mobile .mp-stage {
  background: var(--sf-1);
  border: 1px solid var(--bd);
  box-shadow: none;
}
body.mobile .cal-cell { border-radius: var(--r-a) }
body.mobile .cal-cell.on { background: rgba(113, 112, 255, .16); border-color: rgba(113, 112, 255, .3) }
body.mobile .cal-d { border-radius: var(--r-a); font-weight: 510 }
body.mobile .geo-kpi {
  background: var(--sf-1);
  border: 1px solid var(--bd);
  border-radius: var(--r-b);
}
body.mobile .geo-kpi .v { font-weight: 510; letter-spacing: -.4px; color: var(--tx) }

/* 轻量控件：芯片 / 开关 / 复选 / 头像 */
body.mobile .chip {
  background: var(--sf-2);
  border: 1px solid var(--bd-2);
  color: var(--tx-3); border-radius: 99px;
  font-weight: 510;
}
body.mobile .chip.on {
  background: rgba(113, 112, 255, .16);
  border-color: rgba(113, 112, 255, .4);
  color: var(--ac-3); box-shadow: none;
}
body.mobile .chip.on.gold {
  background: rgba(113, 112, 255, .16);
  border-color: rgba(113, 112, 255, .4);
  color: var(--ac-3); box-shadow: none;
}
body.mobile .switch i { background: var(--ink-300) }
body.mobile .switch input:checked + i { background: var(--ac) }
body.mobile .check { color: var(--tx-2) }
body.mobile .check input { accent-color: var(--ac-2) }
body.mobile .check.on {
  background: rgba(113, 112, 255, .13);
  border-color: rgba(113, 112, 255, .3);
  color: var(--ac-3);
}
body.mobile .avatar { border: 1px solid var(--bd-2) }
body.mobile .progress { background: var(--sf-hi) }
body.mobile .progress i { background: linear-gradient(90deg, var(--ac), var(--ac-2)) }
body.mobile .skeleton {
  background: linear-gradient(90deg, var(--sf-2) 25%, var(--sf-hi) 50%, var(--sf-2) 75%);
  background-size: 200% 100%;
}
body.mobile .kv dt { color: var(--tx-4) }
body.mobile .kv dd { color: var(--tx-2) }
body.mobile .home-link, body.mobile a { color: var(--ac-3) }

/* ==========================================================================
   八、清理为浅色底设计的残留
   ========================================================================== */
/* 这些装饰在浅色底上是「点睛」，搬到暗色底就成了脏点 ——
   一个 .85 不透明度的浅色大圆压在暗卡上，整张卡看起来是白的，
   连底色都像没生效。所以暗色下必须逐个收掉。 */

/* 指标卡右上角的浅色装饰圆 */
body.mobile .stat::after { display: none }
/* 悬停位移在触屏上没有意义，还会让卡片跳一下 */
body.mobile .stat:hover { box-shadow: none; transform: none }

/* 登录页：面板是浅色底，会把暗色表单卡衬成一块突兀的白 */
body.mobile .login-panel { background: transparent }
body.mobile .login-box { background: var(--card) }

/* 其余浅底容器统一透明化，让 body 的暗色透上来 */
body.mobile .cal-wrap,
body.mobile .stat,
body.mobile .login-notice,
body.mobile .pf-hero-bg { background-color: transparent }

/* 卡片标题区有一条白色渐变（components.css 的 .card-head），
   底色虽然改暗了，这一条仍会把标题带整块衬白。后台页面还有一份同款。 */
body.mobile .card-head,
body.mobile #admin-body .card > .card-head {
  background: transparent;
  border-bottom: 1px solid var(--bd);
}
body.mobile .card-head .icobox {
  background: rgba(113, 112, 255, .13);
  box-shadow: inset 0 0 0 1px rgba(113, 112, 255, .3);
}
body.mobile .card-head .icobox svg { color: var(--ac-3) }
body.mobile .card-head > svg { color: var(--ac-3) }

/* 以下 8 处是硬编码的 #fff（不是令牌），变量重映射管不到，只能逐条点名。
   已用脚本扫过全部页面的计算样式，除此之外没有其它浅色残留。 */
body.mobile .mod-card,
body.mobile .cal-nav,
body.mobile .cal-cell,
body.mobile .pf-avatar,
body.mobile .hd-row {
  background: var(--sf-1);
  border-color: var(--bd);
}
body.mobile .cal-cell.danger { background: rgba(229, 72, 77, .12) }
body.mobile .cal-cell.out { opacity: .45 }
body.mobile .cal-cell:hover { background: var(--sf-hi) }
/* 个人中心主卡的装饰底：暗色下与卡片自身的渐变撞在一起，直接去掉 */
body.mobile .pf-hero-bg { display: none }

/* ------------------------------ 深色底卡片内的文字 ------------------------------ */
/* 主卡（工作台问候卡、个人中心主卡、登录页品牌区）的底色**永远是深墨蓝**，
   不跟主题走。而 --tx 在浅色主题下是深色 —— 继承进去就成了深字压深底，
   整块内容一个字也看不见。
   所以这三处的文字必须用与主题无关的固定浅色。 */
body.mobile .hero-card,
body.mobile .hero-card h2,
body.mobile .hero-meta b,
body.mobile .pf-hero,
body.mobile .pf-hero-info h2,
body.mobile .login-hero,
body.mobile .login-hero h1 { color: var(--hero-tx) }
body.mobile .hero-card p,
body.mobile .pf-hero-sub { color: var(--hero-tx-2) }
body.mobile .hero-card p b { color: var(--brand-300) }
body.mobile .hero-meta div { color: #7B8CAF }
body.mobile .hero-meta { border-top-color: var(--hero-line) }
body.mobile .pf-hero .pf-bio { color: var(--hero-tx-2) }

/* ------------------------------ 侧栏底部用户卡 ------------------------------ */
/* 头像是用户上传的照片，容器没定死尺寸时会被压成一条缝，
   只露出上半张脸。这里把容器与图片都定死并裁成圆。 */
body.mobile .pf-mini-av {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%; overflow: hidden;
}
body.mobile .pf-mini-av .avatar,
body.mobile .pf-mini-av img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 个人中心的头像：容器是个圆角方块、图片比它高，只露出上半张脸。
   两者尺寸对齐 + object-fit:cover 才能真正裁出人像。 */
body.mobile .pf-avatar {
  width: 64px; height: 64px; flex: none;
  border-radius: 18px; overflow: hidden;
  display: block;
}
/* 图片被别处定成了固定像素高（实测 82px），比容器还高，
   于是溢出的部分被 overflow:hidden 裁掉 —— 屏幕上只剩额头。
   这里必须 !important：对方是写死的像素值，靠选择器权重打不过，
   而且这是实打实的尺寸冲突，不存在「更优雅的覆盖方式」。 */
body.mobile .pf-avatar img,
body.mobile .pf-avatar .avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  /* 用 center top：这类头像是统一采集的半身照，人物重心在画面上方，
     居中取景会把西装当主体、把头部截掉。经实测（元素截图确认画面里
     是「西装+衬衫」而非人脸）钉在顶部才露得出人脸。 */
  object-position: center top;
  border-radius: 0;
  display: block;
}
/* 头像是用背景图渲染的（avatarHTML 里设 background-image），
   不是 <img>。容器尺寸对了但没设 background-size，图片就按原尺寸铺、
   超出部分被裁掉 —— 表现就是「只露出额头」。 */
body.mobile .pf-avatar {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.mobile .pf-mini-av,
body.mobile .tb-user .avatar {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 资料表单：恢复一行两列。
   mobile.css 把 .g2/.g3/.g4 一律压成单列（那对卡片是对的），
   但表单字段宽度本来就够并排 —— 单列后「昵称/真实姓名/职务/手机号」
   一行一个，一屏只放得下两个，纵向白白拉长一倍。 */
body.mobile .pf-main .grid.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
}
/* 字段字号从 16px 降到 15px。16px 是为了避开 iOS 聚焦缩放的下限，
   App 内嵌 webview 不存在这个行为，15px 更贴合整页的字阶。 */
body.mobile .pf-main .field > label { font-size: 12.5px; margin-bottom: 6px }
body.mobile .pf-main .field .input {
  font-size: 15px; min-height: 44px; padding: 10px 14px;
}
body.mobile .pf-main .field-hint { font-size: 10.5px; line-height: 1.55; margin-top: 5px }
body.mobile .pf-main .field { margin-bottom: 14px }

/* ------------------------------ 个人中心主卡 ------------------------------ */
/* 桌面端这套主卡是「头像压在卡片上沿」的错位设计：
   .pf-hero-body 用 margin-top:-46px 把内容上提，再靠
   .pf-hero-info / .pf-hero-act 各自 padding-top:50px 把文字压回来。
   手机端主卡改成纵向排列后，这个负边距没有对应的补偿了 ——
   整个内容块（含头像）被拽到卡片外面，头像正好钻进顶栏底下，
   看上去就是「只露出一半」。所以这里必须把错位归零。 */
body.mobile .pf-hero-body {
  margin-top: 0;
  padding: 18px 16px 16px;
}
body.mobile .pf-hero-info,
body.mobile .pf-hero-act { padding-top: 0 }
body.mobile .pf-hero-info h2 { font-size: 18px; letter-spacing: -.3px }
/* 版式改成 grid —— flex 排不出「昵称通栏、身份行只占右列」这种混合。
   目标：
     ┌─────────────────────────────────────┐
     │ [头像]  ⊙ 平台管理员  ☆ 平台负责人   │
     │         ⌂ 享客多律智云总部           │
     │         [总部超级管理员] [总部]      │
     │  田新强 [昵称]                       │
     │  [ 上传头像 ]    [ 移除头像 ]        │
     └─────────────────────────────────────┘
   头像跨第 1、2 行、身份行与徽章在右列、昵称与动作各自通栏。
   头像缩到 64px：右列才有 248px，够「平台管理员 平台负责人」并排一行。 */
body.mobile .pf-hero-body {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
  /* profile.css 的 @media(max-width:700px) 把这一块设成了 text-align:center，
     那是为「头像在上、内容居中」的旧版式准备的，这里必须拉回左对齐 */
  text-align: left;
}
body.mobile .pf-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 64px; height: 64px;
  border-radius: 18px;
}
/* 圆角与外层容器同步收一档，否则 19px 的圆角在 64px 方块上会削掉太多 */
body.mobile .pf-avatar .avatar-text,
body.mobile .pf-avatar .avatar-img,
body.mobile .pf-avatar-mask { border-radius: 15px }
body.mobile .pf-avatar .avatar-text { font-size: 26px !important }

/* 把信息块的盒子「拆掉」—— 里面的昵称/身份行/简介/徽章要各自落到网格的不同格子里，
   套在一个盒子里的活它们只能整块移动 */
body.mobile .pf-hero-info { display: contents }

/* 身份行：右列 · 第 1 行 —— 带图标、一行排完、整体居中。
   上一版为了挤进 248px 把「身份/职务/组织」三个图标丢掉了，这是错的：
   图标是区分这三项是什么的视觉锚点，去掉后整行变成一串排在一起的词。
   宽度不够应该收文字，不该动图标。
   现在恢复图标，改为「收字号 + 收图标与文字的间距 + 收项间距」来腾宽度。 */
body.mobile .pf-hero-sub {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 4px;
  line-height: 1.45;
  overflow: hidden;
}
/* app-type.css 也用了 !important 钉 13.5px，而且它比本文件后加载 ——
   同等特异性下它赢。所以这里既带 !important，选择器再多一层 .pf-hero-body
   把特异性抬到 (0,3,1) 压过它的 (0,2,1)。具体字号由实测决定。 */
body.mobile .pf-hero-body .pf-hero-sub { font-size: 10.5px !important }
body.mobile .pf-hero-sub span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
  gap: 2px;   /* 图标与文字挨紧，省下的宽度都留给字号 */
}
/* 组织名最长，放开收缩权、超长省略 —— 兜住「一行」这个硬要求 */
body.mobile .pf-hero-sub span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 徽章：右列 · 第 2 行 · 在右列内居中 */
body.mobile .pf-hero-tags {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  flex-wrap: wrap; justify-content: center;
  gap: 6px; margin: 0;
}
/* 昵称：通栏，落在头像下方 */
body.mobile .pf-hero-info h2 {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 7px; margin: 2px 0 0;
}
body.mobile .pf-bio { grid-column: 1 / -1; grid-row: 4; margin: 0 }
body.mobile .pf-hero-act {
  grid-column: 1 / -1;
  grid-row: 5;
  flex-direction: row;
  gap: 9px;
  width: 100%;
  margin: 2px 0 0;
}
body.mobile .pf-hero-act .btn { flex: 1; justify-content: center }

/* 卡片模式下把第一列当标题行：隐去字段名、加一条分隔线。
   案件表首列是「案件」、日志表首列是「时间」，都适用 ——
   写成通用规则，以后新增的卡片表不必各写一遍。 */
body.mobile .tbl.cards td:first-child {
  display: block; padding: 0 0 9px; margin-bottom: 5px;
  border-bottom: 1px solid var(--bd);
  font-weight: 510; color: var(--ink-600);
}
body.mobile .tbl.cards td:first-child::before { display: none }

/* ------------------------------ AI 结果卡的操作条 ------------------------------ */
/* 桌面端这四个按钮靠右排列，窄到放不下就折行 —— 手机上是 3 + 1，
   最后一个「存到案件」被单独甩到第二行右边，看着像没对齐。
   手机端改成一行平分：四个等宽，图标居中，任何宽度都不折行。 */
body.mobile .result-acts {
  flex-wrap: nowrap;
  width: 100%;
  gap: 6px;
  margin-top: 4px;
}
body.mobile .result-acts > .btn,
body.mobile .result-acts > .dl-wrap {
  flex: 1 1 0;
  min-width: 0;
}
body.mobile .result-acts > .dl-wrap > .btn { width: 100% }
body.mobile .result-acts > .btn {
  justify-content: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 12.5px;
  letter-spacing: -.02em;
}
body.mobile .result-acts > .btn svg { flex: none }
body.mobile .result-acts .dl-wrap .caret { margin-left: 2px }
/* 结果卡标题区在手机上是整块宽度，操作条自然换到自己一行 */
body.mobile .result-head { flex-wrap: wrap; gap: 7px }
body.mobile .result-head h3 { min-width: 0; flex: 1 1 100% }

/* 全站普查出的另外几处折行，一并收掉。
   .row 是通用布局类（表单、表头都在用），不能一刀切给它 nowrap ——
   所以只匹配「一行里全是按钮」的那种：:has(> .btn + .btn) 要求至少两个
   相邻按钮，带输入框的行自然被排除。:has() 不被支持时整条规则失效，
   退化成原有表现，不会误伤。 */
body.mobile .row:has(> .btn + .btn) { flex-wrap: nowrap; gap: 8px }
body.mobile .row:has(> .btn + .btn) > .btn {
  flex: 1 1 0; min-width: 0; justify-content: center;
}

/* 案件期限预警卡：标签 + 「查看全部」在窄屏被挤成两行 */
body.mobile .card-head .right {
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
body.mobile .card-head .right > .btn { flex: none }

/* 排期页右侧「今天 / 加任务」同理 */
body.mobile .cal-sidehead { flex-wrap: nowrap; gap: 6px }
body.mobile .cal-sidehead > .btn { flex: 1 1 0; min-width: 0; justify-content: center }

/* 详情页 / 弹窗底部的按钮条同理：手机上一律一行平分 */
body.mobile .modal-foot {
  flex-wrap: nowrap;
  gap: 8px;
}
body.mobile .modal-foot > .btn { flex: 1 1 0; min-width: 0; justify-content: center }

/* ------------------------------ 头像（兜底全覆盖） ------------------------------ */
/* 头像在平台上有多套实现：主卡是 .pf-avatar + .avatar-img、顶栏与侧栏是
   .avatar 或 .avatar-text，尺寸分别在 profile.css / base.css / 内联样式里写死
   （实测遇到过 88px 与 82px !important 两种）。一个个点名改，总会漏。
   这里用一条兜底规则把所有头像图片统一成「填满容器 + cover + 居中」，
   容器自身的圆角与 overflow 负责裁形。 */
body.mobile .avatar-img,
body.mobile .avatar > img,
body.mobile [class*="avatar"] > img,
body.mobile .pf-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit;
  display: block;
}
/* 容器不再留内边距：64px 的容器里再抠掉 3px，图片只剩 56px，
   本来就小的头像更看不清。让图片铺满整个容器。 */
body.mobile .pf-avatar { padding: 0 !important }
body.mobile .tb-user .avatar,
body.mobile .pf-mini-av .avatar {
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   字阶统一收口
   ==========================================================================
   实测 11 个页面后发现的真问题不是「倒挂」，而是**碎片化**：
   同一个角色在不同页面字号不一样 ——
     小节标题 5 档（17/15/13.5/13/12.5）、控件文字 3 档、按钮文字 3 档、
     表格数据 3 档、辅助说明 3 档。
   逐个页面调永远调不齐，因为每个页面各自写了一套数。这里按**角色**
   把字号钉死，全站只保留下面这 7 档：

     20  页面主标题 · 指标数值
     16  卡片标题
     15  导航菜单项 · 表单主按钮
     14  控件内文字 · 表格数据 · 正文
     13  字段标签 · 小节标题 · 次级按钮
     11.5 辅助说明
     11  标签徽章 · 指标标签 · 分组标题
   ========================================================================== */
body.mobile .card-head h3,
body.mobile .sec-title h3,
body.mobile .view .card h2 { font-size: 16px }

body.mobile .field > label,
body.mobile .filters + .small { font-size: 13px }
body.mobile .tree-node b,
body.mobile .cal-title { font-size: 13px }

body.mobile .input,
body.mobile .select,
body.mobile .textarea,
body.mobile select,
body.mobile option { font-size: 14px }

body.mobile .view .btn { font-size: 13.5px }
body.mobile .view .btn-lg { font-size: 15px }
body.mobile .view .btn-sm { font-size: 13px }

body.mobile .view td,
body.mobile .kv dd,
body.mobile .deadline-item .t b,
body.mobile .tbl.cards td { font-size: 13.5px }

body.mobile .field-hint,
body.mobile .stat .x,
body.mobile .empty span { font-size: 11.5px }
body.mobile .small.muted { font-size: 12px }

body.mobile .tag,
body.mobile .chip { font-size: 11px }
body.mobile .stat .k { font-size: 11px }
body.mobile .sidebar .sb-label-t { font-size: 11px }

body.mobile .sb-item { font-size: 15px }
body.mobile .tabbar .tab { font-size: 10.5px }

/* ------------------------------ 字阶层级（收口） ------------------------------ */
/* 这里统一把「控件内文字」压到标题之下。
   mobile.css 把输入控件定成 16px（为避开 iOS 聚焦缩放），而卡片标题只有 15.5px，
   结果下拉里的「民事」比它所在卡片的标题还大 —— 用户一眼就觉得层级搞反了。
   App 内嵌 webview 不会触发 iOS 那套聚焦缩放，所以这里可以安全降到 15px。 */
body.mobile .input,
body.mobile .select,
body.mobile .textarea,
body.mobile .filters .select { font-size: 15px }
body.mobile .field > label,
body.mobile .filters + .small { font-size: 13px }
body.mobile .field-hint { font-size: 11px }
/* 下拉里的选中值在部分安卓 webview 上会继承系统字号而偏大，显式压回来 */
body.mobile select,
body.mobile option { font-size: 15px }

/* 启动页与骨架在暗色下重给一版 */
body.mobile .boot { background: radial-gradient(900px 520px at 22% -10%, #1A1D24 0%, transparent 62%), var(--bg) }
body.mobile .boot-text { color: var(--tx-4) }
body.mobile .loading-line { background: var(--sf-hi) }