/* ==========================================================================
   律智云 · App 端玻璃拟态层（浅色）
   ==========================================================================
   按参考图重做：极光渐变底 + 磨砂玻璃面 + 胶囊控件 + 渐变主按钮。

   与 app-ui.css 的分工：
     app-ui.css    —— App 的**版面**（顶栏、底部导航、留白、字阶），主题无关
     theme-dark.css —— 深色主题的颜色补丁
     本文件        —— 浅色主题的颜色与质感，也就是参考图那套语言

   全部限定 [data-theme="light"] body.mobile，所以：
     · 深色主题不受影响（仍是那套精密的暗色）
     · 桌面端不受影响（桌面保持原有的浅色商务风）
   ========================================================================== */

[data-theme="light"] body.mobile {
  /* 玻璃面 */
  --gl-1: rgba(255, 255, 255, .62);   /* 卡片 */
  --gl-2: rgba(255, 255, 255, .44);   /* 次级面 */
  --gl-3: rgba(255, 255, 255, .72);   /* 输入框、按钮 */
  --gl-bd: rgba(255, 255, 255, .78);  /* 玻璃高光边 */
  --gl-bd2: rgba(148, 181, 214, .42); /* 可见的结构边 */

  /* 文字：深藏青，不用纯黑 —— 纯黑压在蓝底上会发脏 */
  --gl-ink: #0F172A;
  --gl-ink2: #475569;
  --gl-ink3: #8296AE;

  /* 强调：薄荷 → 天蓝 → 蓝，与参考图的按钮一致 */
  --gl-a1: #34D399;
  --gl-a2: #38BDF8;
  --gl-a3: #3B82F6;
  --gl-grad: linear-gradient(135deg, #34D399 0%, #38BDF8 48%, #3B82F6 100%);
  --gl-grad-soft: linear-gradient(140deg, rgba(52, 211, 153, .16), rgba(59, 130, 246, .16));
  --gl-sh: 0 10px 30px -14px rgba(59, 110, 180, .30);
  --gl-sh-btn: 0 10px 24px -8px rgba(56, 189, 248, .62);
}

/* ------------------------------ 极光渐变底 ------------------------------ */
/* 参考图的底不是纯色，是三团柔光叠出来的。fixed 让它随滚动不动，
   卡片滑动时才像浮在光上；否则滚到底会看到渐变被拉长。 */
[data-theme="light"] body.mobile {
  background:
    radial-gradient(820px 560px at 8% -6%, #D6F0FF 0%, transparent 56%),
    radial-gradient(760px 600px at 96% 8%, #D5F6EA 0%, transparent 58%),
    radial-gradient(900px 680px at 50% 104%, #E2EBFF 0%, transparent 62%),
    linear-gradient(180deg, #F4FAFF 0%, #EAF3FF 100%);
  background-attachment: fixed;
  color: var(--gl-ink);
}
/* 内容区本身透明，让渐变透上来 */
[data-theme="light"] body.mobile .main,
[data-theme="light"] body.mobile .view { background: transparent }

/* ------------------------------ 顶栏与底部导航 ------------------------------ */
[data-theme="light"] body.mobile .topbar,
[data-theme="light"] body.mobile .tabbar {
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-color: rgba(255, 255, 255, .85);
}
[data-theme="light"] body.mobile .topbar { box-shadow: 0 1px 0 rgba(148, 181, 214, .16) }
[data-theme="light"] body.mobile .tabbar { box-shadow: 0 -1px 0 rgba(148, 181, 214, .14) }
[data-theme="light"] body.mobile .tb-title { color: var(--gl-ink) }
[data-theme="light"] body.mobile .topbar .hamburger,
[data-theme="light"] body.mobile .tb-right .btn-icon { color: var(--gl-ink2) }
[data-theme="light"] body.mobile .topbar .hamburger:active,
[data-theme="light"] body.mobile .tb-right .btn-icon:active { background: rgba(148, 181, 214, .18) }
[data-theme="light"] body.mobile .tabbar .tab { color: var(--gl-ink3) }
[data-theme="light"] body.mobile .tabbar .tab.on { color: var(--gl-a3) }
/* 当前项记号：从金色改成参考图那道薄荷→蓝的渐变 */
[data-theme="light"] body.mobile .tabbar .tab.on::before {
  background: var(--gl-grad);
}
[data-theme="light"] body.mobile .tabbar .nav-badge {
  border-color: #fff;
  background: #EF5A5A;
}

/* ------------------------------ 卡片：磨砂玻璃 ------------------------------ */
[data-theme="light"] body.mobile .card {
  background: var(--gl-1);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid var(--gl-bd);
  border-radius: 20px;
  box-shadow: var(--gl-sh);
}
[data-theme="light"] body.mobile .card-head {
  border-bottom: 1px solid rgba(148, 181, 214, .22);
}
[data-theme="light"] body.mobile .card-head h3 { color: var(--gl-ink) }
/* 标题前的金线改成渐变短条，与按钮同一套语言 */
[data-theme="light"] body.mobile .card-head h3::before {
  background: var(--gl-grad);
  width: 3.5px; height: 14px; border-radius: 99px;
}
[data-theme="light"] body.mobile .card-pad { color: var(--gl-ink2) }
[data-theme="light"] body.mobile .muted,
[data-theme="light"] body.mobile .small.muted { color: var(--gl-ink3) }

/* ------------------------------ 表单：胶囊 ------------------------------ */
/* 参考图里的输入框是通体圆角的胶囊，边上带一圈淡蓝描边 */
[data-theme="light"] body.mobile .input,
[data-theme="light"] body.mobile .select {
  background: var(--gl-3);
  border: 1.5px solid var(--gl-bd2);
  border-radius: 999px;
  color: var(--gl-ink);
  box-shadow: inset 0 1px 2px rgba(148, 181, 214, .12);
}
[data-theme="light"] body.mobile .textarea {
  background: var(--gl-3);
  border: 1.5px solid var(--gl-bd2);
  border-radius: 18px;
  color: var(--gl-ink);
}
[data-theme="light"] body.mobile .input::placeholder,
[data-theme="light"] body.mobile .textarea::placeholder { color: var(--gl-ink3) }
[data-theme="light"] body.mobile .input:focus,
[data-theme="light"] body.mobile .select:focus,
[data-theme="light"] body.mobile .textarea:focus {
  border-color: var(--gl-a2);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, .16);
}
[data-theme="light"] body.mobile .field > label { color: var(--gl-ink2) }
[data-theme="light"] body.mobile .field-hint { color: var(--gl-ink3) }
/* 下拉箭头在浅蓝底上要够清楚 */
[data-theme="light"] body.mobile .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E86A4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}

/* ------------------------------ 按钮 ------------------------------ */
/* 主操作是薄荷→蓝的渐变胶囊 + 一层同色投影，像参考图的「立即登录」 */
[data-theme="light"] body.mobile .btn { border-radius: 999px }
[data-theme="light"] body.mobile .btn-sm { border-radius: 999px }
[data-theme="light"] body.mobile .btn-primary {
  background: var(--gl-grad);
  border: none;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--gl-sh-btn);
}
[data-theme="light"] body.mobile .btn-primary:active {
  box-shadow: 0 4px 14px -6px rgba(56, 189, 248, .7);
}
[data-theme="light"] body.mobile .btn-ghost,
[data-theme="light"] body.mobile .btn-soft {
  background: var(--gl-3);
  border: 1.5px solid var(--gl-bd2);
  color: var(--gl-ink2);
}
[data-theme="light"] body.mobile .btn-ghost:active,
[data-theme="light"] body.mobile .btn-soft:active { background: rgba(255, 255, 255, .92) }
[data-theme="light"] body.mobile .btn-gold {
  background: var(--gl-grad-soft);
  border: 1.5px solid rgba(56, 189, 248, .34);
  color: var(--gl-a3);
}

/* ------------------------------ AI 结果卡的操作按钮 ------------------------------ */
/* 四个按钮原来都是同一种灰白玻璃，看不出哪个是主操作、哪个是辅助。
   按「动作性质」分色，但保持同一套低饱和语言，不抢正文：
     复制 / 下载  —— 中性蓝灰（无副作用的搬运动作）
     复核分析     —— 青色（分析类）
     存到案件     —— 薄荷→蓝渐变实心（会写入数据，是这一屏的归宿）
   这样一眼就能看出「点哪个会留下东西」。 */
[data-theme="light"] body.mobile .result-acts .btn {
  border-radius: 999px;
  font-weight: 500;
}
[data-theme="light"] body.mobile .result-acts [data-r="copy"],
[data-theme="light"] body.mobile .result-acts [data-r="dl"] {
  background: rgba(148, 181, 214, .16);
  border: 1px solid rgba(148, 181, 214, .3);
  color: #40597A;
}
[data-theme="light"] body.mobile .result-acts [data-r="copy"]:active,
[data-theme="light"] body.mobile .result-acts [data-r="dl"]:active {
  background: rgba(148, 181, 214, .28);
}
[data-theme="light"] body.mobile .result-acts [data-r="ana"] {
  background: rgba(56, 189, 248, .14);
  border: 1px solid rgba(56, 189, 248, .38);
  color: #1E7BC4;
}
[data-theme="light"] body.mobile .result-acts [data-r="ana"]:active {
  background: rgba(56, 189, 248, .24);
}
[data-theme="light"] body.mobile .result-acts [data-r="case"] {
  background: var(--gl-grad);
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(56, 189, 248, .7);
}
[data-theme="light"] body.mobile .result-acts [data-r="case"]:active {
  box-shadow: 0 3px 10px -6px rgba(56, 189, 248, .8);
}

/* ------------------------------ 工作台主卡 ------------------------------ */
/* 参考图的卡片是浅色玻璃，不是深墨蓝。主卡跟着换成柔光渐变，
   文字随之变深 —— app-ui.css 里把它钉成了浅色（那是为深色主题准备的），
   这里用更高的特异性改回来。 */
[data-theme="light"] body.mobile .hero-card,
[data-theme="light"] body.mobile .pf-hero {
  background:
    radial-gradient(420px 240px at 92% -18%, rgba(52, 211, 153, .28), transparent 62%),
    linear-gradient(140deg, rgba(226, 244, 255, .95) 0%, rgba(224, 250, 240, .95) 100%);
  border: 1px solid var(--gl-bd);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  box-shadow: var(--gl-sh);
}
[data-theme="light"] body.mobile .hero-card h2,
[data-theme="light"] body.mobile .hero-meta b,
[data-theme="light"] body.mobile .pf-hero,
[data-theme="light"] body.mobile .pf-hero-info h2 { color: var(--gl-ink) }
[data-theme="light"] body.mobile .hero-card p,
[data-theme="light"] body.mobile .pf-hero-sub { color: var(--gl-ink2) }
[data-theme="light"] body.mobile .hero-card p b { color: var(--gl-a3); font-weight: 600 }
[data-theme="light"] body.mobile .hero-meta { border-top-color: rgba(148, 181, 214, .3) }
[data-theme="light"] body.mobile .hero-meta div { color: var(--gl-ink3) }
/* 逾期数值。深色主题给的是 #FF9A9D 淡粉 —— 那是配深墨蓝底的，
   放到浅色玻璃上对比度很低；而 app-ui.css 里「不逾期」用 --hero-tx（浅色），
   在浅底上更是完全看不见。这里按浅底重新给：不逾期用正文色，逾期用实红。 */
[data-theme="light"] body.mobile .hero-card .hero-meta .hm-over { color: var(--gl-ink) }
[data-theme="light"] body.mobile .hero-card .hero-meta .hm-over.on { color: #C0392B }
/* 主卡上的两个动作：一个渐变实心、一个玻璃描边 */
[data-theme="light"] body.mobile .hero-card .hero-actions .btn-gold {
  background: var(--gl-grad); border: none; color: #fff;
  box-shadow: var(--gl-sh-btn);
}
[data-theme="light"] body.mobile .hero-card .hero-actions .btn-ghost {
  background: rgba(255, 255, 255, .7);
  border: 1.5px solid var(--gl-bd2);
  color: var(--gl-ink2);
}

/* ------------------------------ 指标卡 · 快捷入口 · 标签 ------------------------------ */
[data-theme="light"] body.mobile .m-kpi .stat,
[data-theme="light"] body.mobile .stat {
  background: var(--gl-1);
  border: 1px solid var(--gl-bd);
  border-radius: 18px;
  box-shadow: var(--gl-sh);
}
/* 浅色下不需要那个装饰圆（它会盖住数字），直接去掉 */
[data-theme="light"] body.mobile .stat::after { display: none }
[data-theme="light"] body.mobile .m-kpi .stat .k,
[data-theme="light"] body.mobile .stat .k { color: var(--gl-ink3) }
[data-theme="light"] body.mobile .m-kpi .stat .v,
[data-theme="light"] body.mobile .stat .v { color: var(--gl-ink) }
[data-theme="light"] body.mobile .m-kpi .stat .v small { color: var(--gl-ink3) }
[data-theme="light"] body.mobile .m-kpi .stat .x,
[data-theme="light"] body.mobile .stat .x { color: var(--gl-ink3) }

[data-theme="light"] body.mobile .quick-card {
  background: var(--gl-1);
  border: 1px solid var(--gl-bd);
  border-radius: 18px;
  box-shadow: var(--gl-sh);
}
[data-theme="light"] body.mobile .quick-card:active { background: rgba(255, 255, 255, .9) }
[data-theme="light"] body.mobile .quick-card b { color: var(--gl-ink) }
[data-theme="light"] body.mobile .quick-card span { color: var(--gl-ink3) }

/* ------------------------------ 标签 · 芯片 · 列表 ------------------------------ */
[data-theme="light"] body.mobile .tag {
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--gl-bd2);
  color: var(--gl-ink2);
  border-radius: 999px;
}
[data-theme="light"] body.mobile .tag.red   { background: rgba(239, 90, 90, .12);  border-color: rgba(239, 90, 90, .3);  color: #D94141 }
[data-theme="light"] body.mobile .tag.green { background: rgba(52, 211, 153, .16); border-color: rgba(52, 211, 153, .4); color: #12916A }
[data-theme="light"] body.mobile .tag.amber { background: rgba(245, 176, 65, .16); border-color: rgba(245, 176, 65, .4); color: #A9711A }
[data-theme="light"] body.mobile .tag.blue,
[data-theme="light"] body.mobile .tag.violet { background: rgba(56, 189, 248, .14); border-color: rgba(56, 189, 248, .38); color: #1E7BC4 }

[data-theme="light"] body.mobile .deadline-item { border-bottom-color: rgba(148, 181, 214, .24) }
[data-theme="light"] body.mobile .deadline-item .d b,
[data-theme="light"] body.mobile .deadline-item .t b { color: var(--gl-ink) }
[data-theme="light"] body.mobile .deadline-item .t span { color: var(--gl-ink3) }

[data-theme="light"] body.mobile .tbl.cards tr {
  background: var(--gl-1);
  border: 1px solid var(--gl-bd);
  border-radius: 18px;
  box-shadow: var(--gl-sh);
}
[data-theme="light"] body.mobile .tbl.cards tr:active { background: rgba(255, 255, 255, .9) }
[data-theme="light"] body.mobile .tbl.cards td { color: var(--gl-ink2) }
[data-theme="light"] body.mobile .tbl.cards td::before { color: var(--gl-ink3) }
[data-theme="light"] body.mobile .tbl.cards td[data-label="案件"] { border-bottom-color: rgba(148, 181, 214, .24) }
[data-theme="light"] body.mobile .tbl.cards td[data-label="案件"] .nm { color: var(--gl-ink) }

[data-theme="light"] body.mobile .filters {
  background: var(--gl-1);
  border: 1px solid var(--gl-bd);
  border-radius: 18px;
  box-shadow: var(--gl-sh);
}
[data-theme="light"] body.mobile .filters .small.muted { color: var(--gl-ink3) }

/* ------------------------------ 弹窗抽屉 · 侧栏 ------------------------------ */
[data-theme="light"] body.mobile .modal-mask { background: rgba(30, 58, 95, .34) }
[data-theme="light"] body.mobile .modal {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--gl-bd);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 46px -20px rgba(30, 70, 130, .34);
}
[data-theme="light"] body.mobile .modal::before { background: rgba(148, 181, 214, .5) }
[data-theme="light"] body.mobile .modal-head { border-bottom-color: rgba(148, 181, 214, .24) }
[data-theme="light"] body.mobile .modal-head h3 { color: var(--gl-ink) }
[data-theme="light"] body.mobile .modal-foot { border-top-color: rgba(148, 181, 214, .24) }

/* ------------------------------ 侧栏抽屉（深色） ------------------------------ */
/* 浅色玻璃侧栏试过两版都不行：它和背后的页面几乎同色，菜单读不出来，
   而「当前组织」卡里的金色字（为深色侧栏配的）压在浅底上直接消失。
   反过来做更省事也更好看 —— 侧栏用深墨蓝，与浅色主界面形成明确的层级，
   文字、金色点缀、选中态全都自然成立。 */
[data-theme="light"] body.mobile .sidebar {
  background: linear-gradient(180deg, #17253F 0%, #0D1626 100%);
  border-right: none;
  box-shadow: 12px 0 36px -18px rgba(8, 20, 40, .58);
}
/* 品牌区与组织卡原来是两条边框紧挨着，看起来像双线。去掉上面那条，
   由组织卡自己的外框划界。 */
[data-theme="light"] body.mobile .sb-brand {
  border-bottom: none;
  padding-bottom: 12px;
}
[data-theme="light"] body.mobile .sb-org {
  margin: 0 12px 12px;
  padding: 12px 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
}
[data-theme="light"] body.mobile .sb-org .t { color: #7E90AB }
[data-theme="light"] body.mobile .sb-org .n { color: #F2F6FC }
[data-theme="light"] body.mobile .sb-org .c { color: #93A5C1 }

[data-theme="light"] body.mobile .sb-label { border-color: rgba(255, 255, 255, .07) }
[data-theme="light"] body.mobile .sb-label-t { color: #7688A5 }
[data-theme="light"] body.mobile .sb-label .arw { color: #5E6E8A }
[data-theme="light"] body.mobile .sb-item { color: #C4D0E3 }
[data-theme="light"] body.mobile .sb-item .ic { color: #8296B4 }
[data-theme="light"] body.mobile .sb-item.active {
  background: linear-gradient(135deg, rgba(52, 211, 153, .26), rgba(59, 130, 246, .3));
  color: #FFFFFF;
}
[data-theme="light"] body.mobile .sb-item.active .ic { color: #8ED8FF }
[data-theme="light"] body.mobile .sb-foot { border-top: 1px solid rgba(255, 255, 255, .08) }
[data-theme="light"] body.mobile .sb-foot .nm { color: #DDE6F3 }
[data-theme="light"] body.mobile .sb-foot .nm span { color: #7E90AB }
[data-theme="light"] body.mobile .sb-foot .out { color: #8296B4 }
[data-theme="light"] body.mobile .sb-copy { color: #64748B }

/* ==========================================================================
   登录页 —— 直接对着参考图做
   ========================================================================== */
/* 参考图的品牌区**没有独立底色**：Logo、大标题、副标题直接浮在极光上，
   下面是玻璃表单卡。而 app-ui.css 里品牌区是深墨蓝块（那是深色主题的做法），
   浅色下要整体拆掉，只留内容。 */
/* 整页垂直居中。
   原来内容只占上面三分之二，下面空一大块 —— 内容区是固定高度页面的上半段，
   底部就永远是空的。居中后上下留白对称，与页面高度自然匹配，也不用猜
   具体机型有多高。 */
[data-theme="light"] body.mobile .login {
  background: transparent;
  justify-content: center;
}
/* 居中之后顶部不再需要那么大的固定留白，否则会整体偏低 */
[data-theme="light"] body.mobile .login-hero {
  padding-top: calc(var(--m-safe-t, 0px) + 16px);
}
[data-theme="light"] body.mobile .login-hero {
  background: transparent;
  border-bottom: none;
  border-radius: 0;
  /* 顶部：安全区 + 40px。参考图的品牌区离顶也就这么多，
     再往下压会把表单推出首屏；再往上顶会贴住状态栏。 */
  padding: calc(var(--m-safe-t, 0px) + 40px) 26px 30px;
  align-items: center;
  text-align: center;
}
[data-theme="light"] body.mobile .login-brand {
  justify-content: center;
  margin-bottom: 22px;
}
/* 22px / 1.38 / -0.6px：这个组合下「办案·办公·合规·拓客 全流程赋能」
   正好两行、每行长度接近，不会出现末行只剩两三个字的散尾。
   原来 27px 会折成三行，整块重心被拉高，下面表单跟着往下掉。 */
[data-theme="light"] body.mobile .login-hero h1 {
  color: var(--gl-ink);
  /* 行高从 1.38 放到 1.5：两行大标题贴着看确实发闷 */
  font-size: 22px; line-height: 1.5; letter-spacing: -.6px;
  font-weight: 600; text-align: center;
  margin-bottom: 12px;
  text-wrap: balance;
}
[data-theme="light"] body.mobile .login-hero h1 em {
  display: block; margin-top: 2px;
}
/* 标题第二行原本是「金色渐变文字」：views.css 里用
   color:transparent + background-clip:text 把渐变填进字里 —— 所以只改 color
   没有用，亮色其实是 background 画的。这里把渐变换成同一套薄荷→蓝，
   与按钮呼应，比金色更贴参考图的色彩关系。 */
[data-theme="light"] body.mobile .login-hero h1 em {
  background: var(--gl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] body.mobile .login-hero .sub {
  color: #7A8CA3; font-size: 13px; line-height: 1.72;
  text-align: center; letter-spacing: -.05px;
  max-width: 300px;          /* 一行 20 字左右才读得舒服，太宽会显得散 */
  -webkit-line-clamp: 2;
}
/* 输入框里左侧有图标，文字要给它让位 —— 否则「请输入账号」会压在图标上 */
[data-theme="light"] body.mobile .login-box .lg-field .input {
  padding-left: 46px; padding-right: 46px;
}
[data-theme="light"] body.mobile .login-box .lg-ic { left: 17px }
[data-theme="light"] body.mobile .login-box .lg-eye { right: 8px }

/* 玻璃表单卡：参考图里它就是一块半透明磨砂面板，四角 26px */
[data-theme="light"] body.mobile .login-panel { padding: 0 22px }
[data-theme="light"] body.mobile .login-box {
  margin-top: 0;
  padding: 26px 22px 22px;
  background: rgba(255, 255, 255, .52);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 26px;
  box-shadow: 0 18px 44px -20px rgba(59, 110, 180, .34);
}
/* 卡片里不再重复 logo 与标题，直接进输入框 —— 参考图就是这样 */
[data-theme="light"] body.mobile .login-head { display: none }
/* 参考图的输入框把「账号 / 密码」直接放在框内当提示，没有外置标签。
   玻璃卡里空间本就紧，去掉标签后两个框上下也更整齐。
   提示文案已同时写进 input 的 placeholder，不影响可读性。 */
[data-theme="light"] body.mobile .login-box .field > label { display: none }
[data-theme="light"] body.mobile .login-box .field { margin-bottom: 13px }
/* 48px 是触控的舒适高度，再高会让两个输入框把卡片撑得空荡 */
[data-theme="light"] body.mobile .login-box .input {
  min-height: 48px; padding: 0 20px; font-size: 15px;
}
[data-theme="light"] body.mobile .login-box .btn-lg {
  min-height: 48px; margin-top: 4px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
}

/* 底部三个小胶囊（信息加密 / 智能分析 / 专业参考），对应参考图最后一行 */
[data-theme="light"] body.mobile .login-tags {
  display: flex; justify-content: center; gap: 9px;
  padding: 16px 22px calc(20px + env(safe-area-inset-bottom, 0px));
}
[data-theme="light"] body.mobile .login-tags span {
  flex: none;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .8);
  color: var(--gl-ink2);
  font-size: 12px; letter-spacing: .02em;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* 深色主题下这行不出现 */
[data-theme="dark"] body.mobile .login-tags { display: none }

/* ------------------------------ 收尾 ------------------------------ */
/* views.css 给 .login-box 加了 ::before / ::after 两个装饰（一道彩线），
   在浅色商务风里是点缀，放在玻璃卡上就成了一道突兀的色条，去掉。 */
html[data-theme="light"] body.mobile .login-box::before,
html[data-theme="light"] body.mobile .login-box::after { display: none }

/* 按钮的胶囊圆角与渐变主色。这两条用 html[data-theme] 起头，
   是为了稳定压过 components.css 与 app-ui.css 里的 .btn / .btn-primary —— 
   它们在别处也带 border-radius/background，只靠加载顺序不够稳。 */
html[data-theme="light"] body.mobile .btn,
html[data-theme="light"] body.mobile .btn-sm,
html[data-theme="light"] body.mobile .btn-lg { border-radius: 999px }

/* 注意这里必须带上 #lg-btn：登录按钮在 views.css 里是按 ID 写的，
   ID 特异性高于任何类选择器组合 —— 只写 .btn-primary 永远压不过它，
   表现就是「改了没反应」。 */
html[data-theme="light"] body.mobile .btn-primary,
html[data-theme="light"] body.mobile .login-box #lg-btn {
  background: var(--gl-grad);
  background-image: var(--gl-grad);
  border: 1px solid transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--gl-sh-btn);
}
html[data-theme="light"] body.mobile .login-box #lg-btn { border-radius: 999px }
html[data-theme="light"] body.mobile .btn-primary:hover:not(:disabled) {
  background: var(--gl-grad);
  filter: brightness(1.04);
}
html[data-theme="light"] body.mobile .btn-primary:disabled {
  background: rgba(148, 181, 214, .5);
  box-shadow: none;
}