/* ==========================================================================
   律智云 · 页面级样式
   ========================================================================== */

/* ------------------------------ 登录 ------------------------------ */
.login{height:100vh;display:grid;grid-template-columns:1.06fr .94fr;overflow:hidden;background:#fff}
.login-hero{
  position:relative;overflow:hidden;
  padding:60px 62px;color:#DCE4F5;
  display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(720px 460px at 16% 4%,rgba(76,110,245,.34),transparent 60%),
    radial-gradient(520px 400px at 92% 96%,rgba(192,154,69,.20),transparent 62%),
    linear-gradient(158deg,#141F3C 0%,#0B1424 56%,#080D18 100%);
}
.login-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(620px 480px at 24% 20%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(620px 480px at 24% 20%,#000,transparent 76%);
}
.login-hero>*{position:relative;z-index:1}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:56px}
.login-brand .mark{
  width:52px;height:52px;border-radius:16px;
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600));
  color:#241A05;font-size:26px;font-weight:700;font-family:var(--ff-serif);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 36px -8px rgba(192,154,69,.6),inset 0 1px 0 rgba(255,255,255,.5);
}
.login-brand b{font-size:var(--t-17);color:#fff;letter-spacing:.1em;display:block;font-weight:600}
.login-brand span{display:block;font-size:9.5px;color:#7C8DB4;letter-spacing:.26em;margin-top:2px}
.login-hero h1{
  font-size:38px;line-height:1.32;color:#fff;margin-bottom:18px;font-weight:600;letter-spacing:-.02em;
}
.login-hero h1 em{
  font-style:normal;position:relative;
  background:linear-gradient(100deg,var(--gold-200),var(--gold-400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.login-hero .sub{color:#9CAECF;font-size:var(--t-13);max-width:520px;margin-bottom:40px;line-height:1.95}
.login-points{display:grid;grid-template-columns:1fr 1fr;gap:13px;max-width:580px}
.login-point{
  padding:15px 17px;border-radius:var(--r);
  background:linear-gradient(140deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:.2s var(--ease);
}
.login-point:hover{background:linear-gradient(140deg,rgba(255,255,255,.11),rgba(255,255,255,.05));transform:translateY(-2px)}
.login-point b{display:block;color:#fff;font-size:var(--t-12);margin-bottom:5px;font-weight:600}
.login-point span{font-size:var(--t-11);color:#8B9BC4;line-height:1.65;display:block}
.login-chain{margin-top:44px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.login-chain i{
  font-style:normal;padding:6px 14px;border-radius:var(--r-full);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085);
  color:#C7D2E8;font-size:var(--t-11);font-weight:500;
}
/* 面板底：两层柔光晕 + 极淡网格，让白色卡片"浮"在背景上而不是糊成一片。
   光晕用品牌色而非写死的蓝，跟随站点装修自动变色。 */
.login-panel{
  display:flex;align-items:center;justify-content:center;padding:40px 44px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(680px 460px at 82% -6%,var(--brand-50),transparent 60%),
    radial-gradient(520px 420px at 6% 104%,var(--gold-100),transparent 58%),
    linear-gradient(180deg,#FBFCFE,#F6F8FC);
}
.login-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(16,24,40,.055) 1px,transparent 0);
  background-size:26px 26px;
  mask-image:radial-gradient(520px 400px at 78% 22%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(520px 400px at 78% 22%,#000,transparent 72%);
}
.login-panel>*{position:relative;z-index:1}

/* 表单卡片 */
.login-box{
  width:100%;max-width:416px;
  background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-xl);
  padding:38px 34px 28px;position:relative;overflow:hidden;
  /* 三层叠加：内顶高光给出厚度、深投影拉开层次、品牌色投影制造一圈"氛围光" */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 30px 70px -30px rgba(16,24,40,.30),
    0 14px 44px -20px var(--brand-200);
}
/* 顶部品牌色描边：给卡片一点"被点亮"的观感，配色跟随主题 */
.login-box::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-400) 58%,var(--gold));
}
/* 右上角柔光球：制造纵深，不抢内容注意力 */
.login-box::after{
  content:"";position:absolute;right:-64px;top:-58px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(closest-side,var(--brand-100),transparent 72%);
  pointer-events:none;
}

/* 卡片头：整体居中 —— 徽标、标题、说明三段式 */
.login-head{text-align:center;margin-bottom:24px}
.login-mark{position:relative;display:inline-flex;margin-bottom:16px}
/* 徽标背后一圈品牌色光晕，让标记"发光"而不是干贴在白底上 */
.login-mark::before{
  content:"";position:absolute;left:50%;top:50%;width:152px;height:152px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--brand-100),transparent 74%);
  pointer-events:none;
}
.login-mark .brand-mark,.login-mark .brand-img{position:relative;border-radius:16px}
.login-mark .brand-img{box-shadow:0 12px 26px -12px rgba(16,24,40,.4)}
.login-box h2{font-size:var(--t-24);margin-bottom:8px;letter-spacing:-.01em;line-height:1.3}
/* 说明文字要求单行展示：不再限宽，桌面端点满卡片内容区正好放得下；
   窄屏放不下时由 mobile.css 按可用宽度流式缩放字号，仍保持一行 */
.login-box .tip{color:var(--ink-500);font-size:var(--t-12);margin:0 auto;line-height:1.7;white-space:nowrap}

/* 输入行：左侧图标 + 右侧（密码）显隐按钮 */
.login-box .field{margin-bottom:15px}
.login-box .field>label{
  display:block;font-size:var(--t-12);font-weight:600;
  color:var(--ink-600);margin-bottom:7px;letter-spacing:.01em;
}
.lg-field{position:relative;display:flex;align-items:center}
.lg-ic{
  position:absolute;left:13px;display:flex;color:var(--ink-400);
  pointer-events:none;transition:color .16s var(--ease);
}
.lg-field .input{
  height:46px;padding:0 14px 0 39px;border-radius:var(--r-sm);
  background:var(--ink-25);border-color:var(--ink-150);font-size:var(--t-14);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
}
.lg-field .input:hover{border-color:var(--ink-200)}
.lg-field .input:focus{
  background:#fff;border-color:var(--brand-400);
  box-shadow:0 0 0 3.5px var(--brand-50);
}
.lg-field:focus-within .lg-ic{color:var(--brand)}
/* 密码可见性切换 */
.lg-eye{
  position:absolute;right:8px;width:30px;height:30px;border:none;border-radius:var(--r-xs);
  background:none;color:var(--ink-400);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:.15s var(--ease);
}
.lg-eye:hover{background:var(--ink-100);color:var(--ink-600)}
.lg-field .input[type="password"],.lg-field .input.has-eye{padding-right:44px}

/* 主按钮：品牌渐变 + 内顶高光；hover 时一道高光斜扫而过 */
.login-box #lg-btn{
  height:48px;font-size:var(--t-15);font-weight:600;letter-spacing:.06em;
  border-radius:var(--r-sm);margin-top:8px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--brand-500),var(--brand));
  box-shadow:var(--sh-brand),inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease);
}
.login-box #lg-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease-out);
}
.login-box #lg-btn:hover::after{left:130%}
.login-box #lg-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.login-box #lg-btn:active{transform:translateY(0)}
.login-box #lg-btn:disabled{transform:none;filter:saturate(.7)}
.login-box #lg-btn:disabled::after{display:none}

.quick-users{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.quick-user{
  border:1px solid var(--ink-200);background:#fff;border-radius:var(--r-full);
  padding:5px 13px;font-size:var(--t-11);cursor:pointer;color:var(--ink-600);
  transition:.16s var(--ease);font-weight:500;
}
.quick-user:hover{border-color:var(--brand-300);color:var(--brand-700);background:var(--brand-50);transform:translateY(-1px)}

/* ------------------------- 「记住账号」· 记忆胶囊 -------------------------
   不用原生复选框。原生那个 16px 方块在这张玻璃卡上太"表单"了 ——
   它和上面两个 46px 高的胶囊输入框不是一套语言。
   改成一枚举「记忆胶囊」，右对齐：左侧留白处放一句「密码不保存」，
   把这个空位变成信息，而不是让控件孤零零挂在右边。

   状态用同一个位置的两个图形表达，不做位移：
     关 → 钥匙（这是个凭证）
     开 → 勾（已记住）
   开关切换时两个图形原地交叉淡入淡出 + 品牌渐变底色亮起，
   一眼能看出「记住什么」和「记没记住」是两件事。 */
.lg-remember-row{
  display:flex;align-items:center;gap:10px;
  margin:-4px 0 13px;
}
.lg-hint{
  margin-right:auto;                /* 把胶囊顶到右侧 */
  font-size:11px;letter-spacing:.01em;
  color:var(--ink-400);
}
.lg-remember{ position:relative;display:inline-flex;flex:none;cursor:pointer }

/* 原生复选框透明覆盖整枚胶囊：视觉归我们，语义与键盘焦点仍归它。
   不能用 display:none —— 那样读屏与 Tab 键都够不到，属于假无障碍。 */
.lg-remember input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.lg-rm-pill{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 12px;border-radius:var(--r-full);
  font-size:var(--t-12);font-weight:500;line-height:1;
  color:var(--ink-500);
  border:1px solid rgba(20,45,90,.18);
  /* 用 currentColor 混出边框：浅色主题是淡墨线，深色主题自动变成淡白线，
     一条规则适配两套主题，不必再写一套 [data-theme=dark] 覆盖。
     （color-mix 不被支持时上面那行 rgba 兜底） */
  border:1px solid color-mix(in srgb, currentColor 26%, transparent);
  transition:color .22s var(--ease-out),border-color .22s var(--ease-out),
             background-color .22s var(--ease-out),box-shadow .22s var(--ease-out),
             transform .18s var(--ease-out);
  -webkit-user-select:none;user-select:none;
}
/* 两个图形同尺寸同位置 —— 切换时只换图形，不推动布局 */
.lg-rm-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;flex:none;
  transition:opacity .2s var(--ease-out),transform .24s var(--ease-out);
}
.lg-rm-on{ position:absolute;left:12px;opacity:0;transform:scale(.6) }
.lg-remember input:checked ~ .lg-rm-pill .lg-rm-off{ opacity:0;transform:scale(.6) }
.lg-remember input:checked ~ .lg-rm-pill .lg-rm-on{ opacity:1;transform:none }
/* 选中态直接借用登录按钮那条渐变 —— 两者同源，一眼是一家 */
.lg-remember input:checked ~ .lg-rm-pill{
  color:#fff;border-color:transparent;
  background:var(--gl-grad,linear-gradient(135deg,#34D399 0%,#38BDF8 48%,#3B82F6 100%));
  box-shadow:0 6px 16px -8px rgba(56,130,246,.78),inset 0 1px 0 rgba(255,255,255,.28);
}
.lg-remember:hover .lg-rm-pill{ transform:translateY(-1px) }
.lg-remember:active .lg-rm-pill{ transform:translateY(0) scale(.975) }
/* 键盘可达性：原生框是透明的，焦点环得自己画 */
.lg-remember input:focus-visible ~ .lg-rm-pill{
  outline:2px solid var(--brand-400);outline-offset:2px;
}
/* 勾选瞬间一圈柔光扩散一次 —— 只此一次，不循环 */
@keyframes lg-rm-in{
  from{ box-shadow:0 0 0 0 rgba(56,130,246,.45) }
  to{ box-shadow:0 0 0 8px rgba(56,130,246,0) }
}
.lg-remember input:checked ~ .lg-rm-pill{ animation:lg-rm-in .45s var(--ease-out) }
@media (prefers-reduced-motion:reduce){
  .lg-rm-pill,.lg-rm-ic{ transition-duration:.01ms }
  .lg-remember input:checked ~ .lg-rm-pill{ animation:none }
  .lg-remember:hover .lg-rm-pill,
  .lg-remember:active .lg-rm-pill{ transform:none }
}

/* 产品介绍浮层：App 的 web-view 与 H5 内嵌模式都开不了新窗口
   （<a target="_blank"> 点下去毫无反应），改用整屏浮层 + iframe。
   同源页面，不受 X-Frame-Options 限制。 */
.site-mask{
  position:fixed;inset:0;z-index:1200;
  display:flex;flex-direction:column;
  background:var(--bg,#fff);
  /* 浮层铺到屏幕最底边，里面的页面底部会被系统导航栏吃掉
     （页脚那行声明文字正好在那）。留出安全区。 */
  padding-bottom:var(--m-safe-b,env(safe-area-inset-bottom,0px));
  animation:fade-in .18s var(--ease);
}
.site-bar{
  flex:none;display:flex;align-items:center;gap:10px;
  min-height:52px;padding:0 14px;
  background:var(--panel,#fff);border-bottom:1px solid var(--ink-150);
  padding-top:env(safe-area-inset-top,0px);
}
.site-bar b{font-size:var(--t-14);color:var(--ink-800);font-weight:600}
.site-bar .btn{margin-left:auto}
.site-frame{flex:1;width:100%;border:none;display:block;background:#fff}

/* ------------------------------ 首页 Hero ------------------------------ */
.hero-card{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:26px 30px;color:#DCE4F5;
  background:
    radial-gradient(760px 340px at 88% -10%,rgba(76,110,245,.40),transparent 62%),
    radial-gradient(420px 300px at 6% 108%,rgba(192,154,69,.18),transparent 60%),
    linear-gradient(135deg,#182545,#0D1728);
  box-shadow:var(--sh-lg);
}
.hero-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(560px 320px at 80% 0%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(560px 320px at 80% 0%,#000,transparent 72%);
}
.hero-card>*{position:relative;z-index:1}
.hero-card h2{color:#fff;font-size:var(--t-24);margin-bottom:8px;letter-spacing:-.02em}
.hero-card p{color:#9CAECF;font-size:var(--t-13);margin:0;line-height:1.75}
.hero-card p b{color:var(--gold-200)}
.hero-meta{display:flex;gap:30px;margin-top:24px;flex-wrap:wrap}
.hero-meta div{font-size:var(--t-11);color:#7C8DB4;font-weight:500}
.hero-meta b{display:block;color:#fff;font-size:var(--t-15);font-weight:600;margin-top:5px;letter-spacing:-.01em}
.hero-actions{position:absolute;right:26px;top:26px;display:flex;gap:8px;z-index:2}

.sec-title{display:flex;align-items:center;gap:12px;margin:26px 0 13px}
.sec-title h3{font-size:var(--t-15)}
.sec-title .line{flex:1;height:1px;background:linear-gradient(90deg,var(--ink-200),transparent)}
.sec-title .more{font-size:var(--t-12);color:var(--brand-600);cursor:pointer;font-weight:500}
.sec-title .more:hover{color:var(--brand-700)}

/* 期限条目 */
.deadline-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 2px;border-bottom:1px solid var(--ink-100);
  transition:background .14s var(--ease);
}
.deadline-item:last-child{border-bottom:none}
.deadline-item .d{
  width:66px;flex:none;text-align:center;border-radius:var(--r-xs);
  padding:7px 0;background:var(--ink-50);
  font-size:10.5px;color:var(--ink-500);line-height:1.4;font-weight:500;
}
.deadline-item .d b{display:block;font-size:var(--t-14);color:var(--ink-800);font-weight:700;letter-spacing:-.02em}
.deadline-item.red .d{background:var(--danger-bg);color:#A32A30}
.deadline-item.red .d b{color:var(--danger)}
.deadline-item.amber .d{background:var(--warn-bg);color:#8A5A06}
.deadline-item.amber .d b{color:var(--warn)}
.deadline-item .t{flex:1;min-width:0}
.deadline-item .t b{display:block;font-size:var(--t-13);color:var(--ink-900);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deadline-item .t span{font-size:var(--t-11);color:var(--ink-400)}

/* 快捷入口 */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.quick-card{
  border:1px solid var(--ink-150);border-radius:var(--r);padding:16px;
  background:#fff;cursor:pointer;position:relative;overflow:hidden;
  transition:all .22s var(--ease);
}
.quick-card::after{
  content:"";position:absolute;right:-26px;top:-26px;width:72px;height:72px;border-radius:50%;
  background:var(--brand-50);opacity:0;transition:opacity .22s var(--ease);
}
.quick-card:hover{border-color:var(--brand-300);box-shadow:var(--sh-md);transform:translateY(-3px)}
.quick-card:hover::after{opacity:1}
.quick-card .icobox{margin-bottom:11px;position:relative;z-index:1}
.quick-card b{font-size:var(--t-13);display:block;color:var(--ink-900);line-height:1.45;position:relative;z-index:1;font-weight:600}
.quick-card span{font-size:var(--t-11);color:var(--ink-400);display:block;margin-top:5px;line-height:1.6;position:relative;z-index:1}

/* ------------------------------ AI 工作台 ------------------------------ */
.workbench{display:grid;grid-template-columns:minmax(340px,412px) minmax(0,1fr);gap:18px;align-items:start}
.wb-head{display:flex;align-items:flex-start;gap:15px;margin-bottom:18px}
.wb-head .icobox{width:48px;height:48px;border-radius:14px}
.wb-head .icobox svg{width:22px;height:22px}
.wb-head h2{font-size:var(--t-20);margin-bottom:6px;letter-spacing:-.02em}
.wb-head p{font-size:var(--t-12);color:var(--ink-500);margin:0;line-height:1.75;max-width:860px}
.wb-form .field{margin-bottom:15px}
.wb-sample{font-size:var(--t-12);color:var(--brand-600);cursor:pointer;font-weight:500;display:inline-flex;align-items:center;gap:3px}
.wb-sample:hover{color:var(--brand-700);text-decoration:underline}

.result{
  background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);min-height:420px;display:flex;flex-direction:column;overflow:hidden;
}
.result-head{
  padding:15px 20px;border-bottom:1px solid var(--ink-150);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  background:linear-gradient(180deg,#fff,var(--card-2));
}
.result-head h3{font-size:var(--t-15);flex:1;min-width:220px;letter-spacing:-.01em}
.result-acts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* 下载下拉：三种格式收进一个入口，避免标题栏堆满按钮 */
.dl-wrap{position:relative}
.dl-wrap .caret{font-style:normal;font-size:9px;opacity:.6;margin-left:4px}
.dl-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:20;
  min-width:218px;padding:5px;border-radius:var(--r);
  background:var(--card);border:1px solid var(--ink-200);box-shadow:var(--sh-lg);
}
.dl-menu[hidden]{display:none}
.dl-menu > div{
  display:flex;flex-direction:column;gap:1px;cursor:pointer;
  padding:8px 11px;border-radius:var(--r-sm);
  font-size:var(--t-12);font-weight:600;color:var(--ink-800);
}
.dl-menu > div:hover{background:var(--brand-50)}
.dl-menu > div span{font-size:var(--t-11);font-weight:400;color:var(--ink-400)}

/* ---------------- 复核分析 ---------------- */
.ana{
  margin:0 22px 22px;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--card-2);border:1px solid var(--ink-150);
}
.ana-loading{margin:0 22px 22px;padding:16px 18px;border-radius:var(--r-lg);background:var(--card-2)}
.ana-danger{border-color:var(--danger-bd);background:#FFFBFB}
.ana-warn{border-color:var(--warn-bd);background:#FFFDF9}

.ana-head{display:flex;align-items:center;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--ink-100)}
.ana-score{
  width:74px;height:74px;flex:none;border-radius:20px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(140deg,var(--ok),#0B8A5F);
}
.ana-score.warn{background:linear-gradient(140deg,#E8A93C,var(--warn))}
.ana-score.danger{background:linear-gradient(140deg,#E8606B,var(--danger))}
.ana-score b{font-family:var(--ff-num);font-size:var(--t-24);line-height:1.1}
.ana-score span{font-size:10px;opacity:.88}
.ana-sum{flex:1;min-width:0}
.ana-sum b{display:block;font-size:var(--t-14);color:var(--ink-900)}
.ana-sum span{display:block;margin-top:4px;font-size:var(--t-11);color:var(--ink-400)}

.ana-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ana-item{display:flex;gap:9px;align-items:flex-start;padding:9px 11px;border-radius:var(--r);background:var(--card)}
.ana-item .an-ic{flex:none;display:flex;margin-top:1px;color:var(--ink-400)}
.ana-item b{display:block;font-size:var(--t-12);font-weight:650;color:var(--ink-900)}
.ana-item p{margin:3px 0 0;font-size:var(--t-11);line-height:1.75;color:var(--ink-500)}
.ana-item.danger{background:var(--danger-bg)}
.ana-item.danger .an-ic{color:var(--danger)}
.ana-item.warn{background:var(--warn-bg)}
.ana-item.warn .an-ic{color:var(--warn)}
.ana-item.ok .an-ic{color:var(--ok)}
.ana-item.info .an-ic{color:var(--info)}

.ana-foot{margin-top:11px;font-size:var(--t-11);line-height:1.7;color:var(--ink-400)}
.result-body{padding:8px 22px 26px;overflow-y:auto;max-height:calc(100vh - 300px)}
.result-body h3{
  font-size:var(--t-14);margin:22px 0 12px;padding-left:13px;position:relative;
  color:var(--ink-900);font-weight:600;
}
.result-body h3::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--brand-500),var(--brand-700));
}
.result-body ul{margin:0 0 6px;padding-left:0;list-style:none}
.result-body li{
  font-size:var(--t-13);color:var(--ink-700);line-height:1.9;
  margin-bottom:7px;padding-left:17px;position:relative;
  white-space:pre-wrap;word-break:break-word;
}
.result-body li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--brand-300);
}
.result-body li strong{color:var(--ink-900);font-weight:600}

/* 结构化块预览：模型返回 Markdown，服务端解析成带类型的块后再渲染，
   保证「预览所见」与「下载的 Word」一致 */
.result-body p{
  margin:0 0 10px;font-size:var(--t-13);color:var(--ink-700);
  line-height:1.9;word-break:break-word;
}
.result-body h4{font-size:var(--t-13);font-weight:600;color:var(--ink-900);margin:14px 0 8px}
.rb-hr{border:none;border-top:1px solid var(--ink-150);margin:16px 0}
/* 表格窄屏可横向滚动，避免挤成一列碎字 */
.rb-table{overflow-x:auto;margin:0 0 12px}
.rb-table table{border-collapse:collapse;width:100%;font-size:var(--t-12)}
.rb-table th,.rb-table td{
  border:1px solid var(--ink-200);padding:8px 10px;
  text-align:left;vertical-align:top;line-height:1.7;color:var(--ink-700);
}
.rb-table th{background:var(--ink-50);font-weight:600;color:var(--ink-900);white-space:nowrap}
.result-body blockquote{
  margin:0 0 11px;padding:13px 17px;
  background:var(--ink-25);border-left:3px solid var(--brand-300);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--t-13);color:var(--ink-700);
  white-space:pre-wrap;line-height:1.9;
}
.cite-list{display:flex;flex-direction:column;gap:7px;margin-top:5px}
.cite{
  font-size:var(--t-12);color:var(--ink-600);
  padding:10px 14px;border-radius:var(--r-sm);
  background:var(--ink-25);border:1px solid var(--ink-150);
  display:flex;gap:9px;align-items:flex-start;
  transition:.16s var(--ease);
}
.cite:hover{background:var(--brand-50);border-color:var(--brand-100)}
.cite svg{flex:none;margin-top:2px;color:var(--brand-500)}

.wb-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center}
.wb-empty .big{
  width:68px;height:68px;border-radius:22px;margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-50),var(--brand-100));
  color:var(--brand-500);box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.wb-empty b{font-size:var(--t-15);color:var(--ink-700);display:block;margin-bottom:8px;font-weight:600}
.wb-empty span{font-size:var(--t-12);color:var(--ink-400);max-width:400px;line-height:1.85}

.wb-history{margin-top:4px}
.hist-item{
  padding:10px 13px;border-radius:var(--r-sm);cursor:pointer;
  font-size:var(--t-12);color:var(--ink-600);
  display:flex;align-items:center;gap:9px;
  border:1px solid transparent;transition:.16s var(--ease);
}
.hist-item:hover{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-700)}

/* ------------------------------ 能力中心 ------------------------------ */
.cat-group{margin-bottom:22px}
.cat-group-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cat-group-head b{font-size:var(--t-14);font-weight:600}
.cat-group-head .desc{font-size:var(--t-11);color:var(--ink-400);line-height:1.6}
.cat-group-head .n{margin-left:auto;font-size:var(--t-12);color:var(--ink-400);font-weight:500}
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:12px}
/* 案件页的快捷动作卡片更紧凑，允许更小的列宽 */
.mod-grid.tight{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
/* 工作台首屏：左宽右窄。必须写在类里而不是内联样式，
   否则媒体查询无法覆盖（内联优先级更高），窄屏下会把文字挤成一列一个字 */
.dash-row{grid-template-columns:1.25fr .75fr}
.mod-card{
  border:1px solid var(--ink-150);border-radius:var(--r);
  padding:15px 17px;background:#fff;cursor:pointer;
  transition:all .2s var(--ease);position:relative;overflow:hidden;
}
.mod-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--brand-400),var(--brand-600));
  opacity:0;transition:opacity .2s var(--ease);
}
.mod-card:hover{border-color:var(--brand-300);box-shadow:var(--sh-md);transform:translateY(-2px)}
.mod-card:hover::before{opacity:1}
.mod-card b{font-size:var(--t-13);display:block;color:var(--ink-900);line-height:1.5;margin-bottom:6px;font-weight:600}
.mod-card span{font-size:var(--t-11);color:var(--ink-400);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mod-card.locked{opacity:.6;cursor:not-allowed;background:var(--ink-25)}
.mod-card.locked:hover{transform:none;box-shadow:none;border-color:var(--ink-150)}
.mod-card.locked:hover::before{opacity:0}
.mod-card .lock{
  position:absolute;right:12px;top:12px;font-size:10px;font-weight:500;
  color:var(--ink-500);background:var(--ink-100);padding:2px 8px;border-radius:99px;
}
.mod-card .vt{
  position:absolute;right:12px;top:12px;font-size:10px;font-weight:500;
  color:var(--violet);background:var(--violet-bg);padding:2px 8px;border-radius:99px;
}

/* ------------------------------ 案件 ------------------------------ */
/* 固定 4 列，与下方案件表格左右两侧严格对齐。
   原先用 auto-fill + minmax(210px,1fr)，宽屏下轨道数会超过卡片数 ——
   1440 宽时生成 5 条轨道，4 张卡只占前 4 条，右侧空出整整一条轨道，
   看上去就是「没铺满、右边缺一块」。
   minmax(0,1fr) 而不是 1fr：允许轨道收缩到内容宽度以下，避免窄屏顶开。 */
.case-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
/* 侧栏出现后内容区变窄（约 1100~1280），卡片只有 180~210px，
   30px 的额度数字会顶到卡片边缘，下调一档保证单行放得下 */
@media (max-width:1280px){
  .case-kpi .stat .v{font-size:var(--t-24)}
}

/* ==================== 案件详情 · 阶段化待办任务 ==================== */
/* 直接复用组织树的 .tree-node / .tree-kids 骨架（两级：阶段 → 任务）。
   好处是 mobile.css 里已经写好的换行与缩进规则同样生效，
   移动端不必再为任务树重复写一套覆盖。 */
.sec-t{display:flex;align-items:center;gap:6px;font-size:var(--t-14);margin-bottom:10px;color:var(--ink-700)}

.task-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.task-bar .spacer{flex:1;min-width:0}

/* 阶段行：视觉上比任务行重一档，承担分组标题的作用 */
.tree .stage-node{
  background:var(--ink-25);font-weight:600;
  border:1px solid var(--ink-150);margin-top:10px;
}
.tree .stage-node:first-child{margin-top:0}
.tree .stage-node .dot{width:8px;height:8px;background:var(--brand)}
.tree .stage-node.is-done .dot{background:var(--ok)}
.tree .stage-node.is-done b{color:var(--ink-500)}
.stage-node .fold{padding:0 2px;color:var(--ink-400)}
/* 阶段下的任务列表：左边框改用实线，与组织树的虚线区分 */
.stage-node + .tree-kids{margin-left:19px;padding-left:11px;border-left-style:solid;margin-bottom:2px}

.task-node{cursor:default}
.task-node.is-done b{color:var(--ink-400);text-decoration:line-through}
.task-node.is-overdue{background:var(--danger-bg)}
.task-node.is-soon{background:var(--warn-bg)}
.task-node .note{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 完成勾选框：与日历里的 .cal-chk 保持同一视觉语言 */
.ck{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;padding:0;border:1.5px solid var(--ink-300);
  border-radius:6px;background:#fff;color:#fff;
  cursor:pointer;transition:.15s var(--ease);
}
.ck:hover{border-color:var(--brand)}
.ck.on{background:var(--ok);border-color:var(--ok)}
.ck:disabled{cursor:not-allowed;opacity:.55}

/* 任务上挂的 AI 能力：用品牌紫，一眼看出这一步该用哪个 AI 干活。
   这是相对传统律所 OA 的核心差异，值得给一个更醒目的样式。 */
.tag.ai{background:var(--violet-bg);color:#5433C4;cursor:pointer}
.tag.ai:hover{filter:brightness(.96)}
.tag.ai svg{flex:none}

/* ------------------------------ 模板库弹窗 ------------------------------ */
.tpl-row{
  padding:12px 14px;border:1px solid var(--ink-150);border-radius:var(--r-sm);
  margin-bottom:9px;cursor:pointer;transition:.15s var(--ease);
}
.tpl-row:hover{border-color:var(--brand-300);background:var(--brand-50);box-shadow:var(--sh-xs)}
.tpl-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tpl-hd .spacer{flex:1;min-width:0}
.tpl-stages{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tpl-chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--t-11);padding:3px 9px;border-radius:var(--r-full);
  background:var(--ink-100);color:var(--ink-600);
}
.tpl-chip i{
  font-style:normal;font-size:10px;font-weight:600;
  background:#fff;border-radius:99px;padding:0 5px;color:var(--ink-500);
}

/* ==================== 经营统计（图表） ==================== */
/* 全部手写 SVG / CSS，不引图表库：只有柱、环、条三种形态，
   为它们加一个几百 KB 的依赖不划算，也不便于跟随主题变量。 */

/* 环形图 + 图例 */
.cht-flex{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut{flex:none}
.donut .dn-n{font-size:23px;font-weight:700;fill:var(--ink-900);letter-spacing:-.02em}
.donut .dn-u{font-size:11px;fill:var(--ink-400)}

.legend-list{flex:1;min-width:200px;display:flex;flex-direction:column;gap:9px}
.lg-row{display:flex;align-items:center;gap:9px;font-size:var(--t-12)}
.lg-row i{flex:none;width:9px;height:9px;border-radius:3px}
.lg-tx{flex:1;min-width:0}
.lg-tx b{display:block;font-weight:500;color:var(--ink-700)}
.lg-tx span{display:block;font-size:var(--t-11);color:var(--ink-400);margin-top:1px}
.lg-n{flex:none;color:var(--ink-600);font-variant-numeric:tabular-nums}
.lg-row em{
  flex:none;width:38px;text-align:right;font-style:normal;
  font-size:var(--t-11);color:var(--ink-400);font-variant-numeric:tabular-nums;
}

/* 收案趋势柱状图：列底对齐，柱高直接给 px ——
   这样月份文字不会被整体拉伸（用 SVG viewBox 缩放就会） */
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:186px;padding:6px 2px 0}
.cb-col{
  flex:1;min-width:0;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;
}
.cb-col i{
  display:block;width:100%;max-width:38px;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--brand-500,#5B8DEF),var(--brand-300,#9DBBF8));
  transition:filter .15s var(--ease);
}
.cb-col i.is-zero{background:var(--ink-150)}
.cb-col:hover i{filter:brightness(.94)}
.cb-v{font-size:var(--t-11);color:var(--ink-500);font-variant-numeric:tabular-nums;line-height:1}
.cb-l{font-size:var(--t-11);color:var(--ink-400);line-height:1}

/* 横向条形：名称与数值一行，条居中，补充信息在下 */
.st-bars{display:flex;flex-direction:column;gap:13px}
.st-bar-hd{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:var(--t-13);margin-bottom:6px;
}
.st-bar-hd span{color:var(--ink-700);font-weight:500}
.st-bar-hd b{color:var(--ink-900);font-variant-numeric:tabular-nums}
.st-bar-tr{height:7px;border-radius:99px;background:var(--ink-100);overflow:hidden}
.st-bar-tr i{display:block;height:100%;border-radius:99px}
.st-bar-sub{margin-top:5px;font-size:var(--t-11);color:var(--ink-400)}

/* ==================== 开庭排期 ==================== */
/* 撞庭告警卡：给整体加一层危险色渐变，扫一眼就知道要处理 */
.clash-card{border-color:var(--danger);background:linear-gradient(180deg,var(--danger-bg),#fff 62%)}
.clash-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px dashed var(--ink-150)}
.clash-row:last-of-type{border-bottom:none;padding-bottom:2px}
.clash-tx{flex:1;min-width:0}
.clash-tx b{display:block;font-size:var(--t-13);margin-bottom:3px}
.clash-tx span{font-size:var(--t-12);color:var(--ink-500);line-height:1.6;word-break:break-word}

/* 按日期分组：左侧固定宽度日期列，右侧当天所有庭审 */
.hearing-list{display:flex;flex-direction:column;gap:18px}
.hd-day{display:flex;gap:16px;align-items:flex-start}
.hd-day.is-today .hd-date b{color:var(--brand-600)}
.hd-date{flex:none;width:104px;display:flex;flex-direction:column;gap:3px;padding-top:3px}
.hd-date b{font-size:var(--t-15);font-variant-numeric:tabular-nums}
.hd-date span{font-size:var(--t-11);color:var(--ink-400)}
.hd-items{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}

.hd-row{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;border:1px solid var(--ink-150);border-radius:var(--r-sm);
  background:#fff;transition:.15s var(--ease);
}
.hd-row:hover{border-color:var(--brand-200);box-shadow:var(--sh-xs)}
/* 长休庭期间要一眼分辨：撞庭实底红，时刻缺失用虚线框提示去补 */
.hd-row.has-clash{border-color:var(--danger);background:var(--danger-bg)}
.hd-row.no-time{border-style:dashed}
.hd-time{flex:none;width:62px;padding-top:1px}
.hd-time b{font-size:var(--t-15);color:var(--ink-900)}
.hd-main{flex:1;min-width:0}
.hd-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px}
.hd-meta{
  font-size:var(--t-11);color:var(--ink-500);line-height:1.7;
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
}
.hd-acts{flex:none;display:flex;align-items:center;gap:5px}
.filters{
  display:flex;gap:9px;flex-wrap:wrap;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--ink-150);
  background:var(--ink-25);
}
.filters .input,.filters .select{
  width:auto;min-width:136px;padding:8px 12px;font-size:var(--t-12);background:#fff;
}

/* ------------------------------ 管理台 ------------------------------ */
.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* ---------- 操作日志 ---------- */
/* 此前只给「时间」列定了宽，其余按内容自动分配，结果操作人被挤到 68px
   （「平台管理员」折成三行），详情反而独占 372px。改用固定表格布局按内容分配。*/
.tbl-logs{table-layout:fixed;width:100%;min-width:760px}
.tbl-logs th:nth-child(1),.tbl-logs td:nth-child(1){width:148px}
.tbl-logs th:nth-child(2),.tbl-logs td:nth-child(2){width:104px}
.tbl-logs th:nth-child(3),.tbl-logs td:nth-child(3){width:142px}
.tbl-logs th:nth-child(4),.tbl-logs td:nth-child(4){width:236px}
/* 第 5 列（详情）不设宽，吃掉剩余空间 */

.tbl-logs td{padding:9px 12px;vertical-align:middle}
.tbl-logs .lg-time{line-height:1.35}
.tbl-logs .lg-time b{display:block;font-family:var(--ff-num);font-size:var(--t-12);font-weight:600;color:var(--ink-800)}
.tbl-logs .lg-time span{font-size:var(--t-11);color:var(--ink-400)}
.tbl-logs .lg-user{font-size:var(--t-13);color:var(--ink-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 对象名与详情常常很长：截断而非换行，否则单行行高会被撑到 90px */
.tbl-logs .lg-target,.tbl-logs .lg-detail{
  font-size:var(--t-12);color:var(--ink-500);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tbl-logs .lg-detail{color:var(--ink-400)}
.tbl-logs .tag{white-space:nowrap}

/* ---------- 授权卡片（「我发出的授权」）---------- */
.gc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:14px}
.gc{
  border:1px solid var(--ink-150);border-radius:var(--r-lg);
  background:var(--card-2);padding:15px 16px;
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.gc:hover{border-color:var(--brand-200);box-shadow:var(--sh-md)}
.gc-head{display:flex;align-items:center;gap:8px}
.gc-who{flex:1;min-width:0;display:flex;align-items:center;gap:7px}
.gc-who b{font-size:var(--t-14);font-weight:650;color:var(--ink-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-meta{font-size:var(--t-11);color:var(--ink-400);margin-top:-6px}

/* 能力覆盖：先用进度条给出量级，再谈具体开了哪些组 */
.gc-cov{background:var(--ink-50);border-radius:var(--r);padding:10px 12px}
.gc-cov-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:var(--t-12);color:var(--ink-500)}
.gc-cov-top b{font-family:var(--ff-num);font-size:var(--t-15);color:var(--brand-600)}
.gc-cov-top b i{font-style:normal;font-size:var(--t-11);font-weight:500;color:var(--ink-400)}
.gc-cov .progress{margin-top:7px;background:#fff}

.gc-sec{display:flex;flex-direction:column;gap:7px}
.gc-lb{display:flex;align-items:center;gap:6px;font-size:var(--t-11);color:var(--ink-400)}
.gc-lb .gc-n{
  min-width:16px;height:16px;padding:0 5px;border-radius:var(--r-full);
  background:var(--ink-100);color:var(--ink-600);
  font-size:10px;font-weight:600;line-height:16px;text-align:center;
}
.gc-chips{display:flex;flex-wrap:wrap;gap:5px}
.gc-chips .tag{margin:0}
/* 组内的模块项数，让「整组」到底开了多少一目了然 */
.gc-chips .tag i{font-style:normal;font-family:var(--ff-num);opacity:.6;margin-left:4px}
.gc-chips .tag.more{cursor:pointer;border-style:dashed;color:var(--brand-600);border-color:var(--brand-200)}
.gc-chips .tag.more:hover{background:var(--brand-50)}

.gc-act{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:auto}
.perm-group{margin-bottom:14px;border:1px solid var(--ink-150);border-radius:var(--r);overflow:hidden}
.perm-group-head{
  padding:10px 14px;background:var(--ink-25);border-bottom:1px solid var(--ink-150);
  display:flex;align-items:center;gap:9px;font-size:var(--t-12);font-weight:600;
  color:var(--ink-700);cursor:pointer;
}
.perm-group-body{padding:12px 14px;display:flex;flex-wrap:wrap;gap:5px}
.grant-scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.pvd-card{
  border:1px solid var(--ink-150);border-radius:var(--r-lg);
  padding:17px 19px;background:#fff;transition:all .2s var(--ease);
}
.pvd-card:hover{box-shadow:var(--sh-md);border-color:var(--ink-200)}
.pvd-card.active{border-color:var(--brand-300);box-shadow:0 0 0 3.5px rgba(76,110,245,.09),var(--sh-sm)}
.pvd-card .hd{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px}
.pvd-card .hd b{font-size:var(--t-14);display:block;font-weight:600}
.pvd-card .hd span{font-size:var(--t-11);color:var(--ink-400);margin-top:2px;display:block}

.chain{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:4px 0 16px}
.chain-node{
  border:1px solid var(--ink-150);border-radius:var(--r);padding:10px 16px;
  background:#fff;font-size:var(--t-12);transition:.18s var(--ease);
}
.chain-node b{display:block;font-size:var(--t-12);color:var(--ink-900);font-weight:600}
.chain-node span{font-size:10.5px;color:var(--ink-400)}
.chain-node.self{
  border-color:var(--brand-300);background:var(--brand-50);
  box-shadow:0 0 0 3.5px rgba(76,110,245,.09);
}
.chain-arrow{color:var(--ink-300);display:flex}

/* ------------------------------ 计算器 ------------------------------ */
.calc-grid{display:grid;grid-template-columns:minmax(320px,430px) minmax(0,1fr);gap:18px;align-items:start}
.calc-result{
  border-radius:var(--r-lg);padding:24px 26px;color:#DCE4F5;
  background:
    radial-gradient(520px 260px at 90% -10%,rgba(76,110,245,.34),transparent 62%),
    linear-gradient(150deg,#1A2748,#0D1728);
  box-shadow:var(--sh-lg);
}
.calc-result .kv{grid-template-columns:126px 1fr}
.calc-result .kv dt{color:#7C8DB4}
.calc-result .kv dd{color:#fff;font-weight:500}
.calc-big{
  font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.15;
  background:linear-gradient(100deg,var(--gold-200),var(--gold-400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.calc-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.09);font-size:var(--t-13)}
.calc-row:last-child{border-bottom:none}
.calc-row span:first-child{color:#9CAECF}
.calc-row span:last-child{color:#fff;font-weight:600;text-align:right}

/* ------------------------------ 多端预览 ------------------------------ */
.device-stage{display:flex;gap:28px;align-items:flex-start;justify-content:center;flex-wrap:wrap;padding:12px 0}
.device,.mp-stage{
  width:378px;flex:none;background:#0B1220;border-radius:46px;padding:13px;
  box-shadow:var(--sh-xl),0 0 0 1px rgba(255,255,255,.05) inset;
  position:relative;
}
.device::before{
  content:"";position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:106px;height:23px;background:#0B1220;border-radius:0 0 15px 15px;z-index:3;
}
.device iframe,.mp-stage iframe{
  width:100%;height:664px;border:none;border-radius:35px;background:#fff;display:block;
}
.mp-stage iframe{background:var(--bg)}
.device .label{text-align:center;color:#7C8DB4;font-size:var(--t-11);padding:12px 0 3px;line-height:1.6}
.term-switch{display:flex;gap:3px;background:var(--ink-100);padding:4px;border-radius:var(--r-sm);width:fit-content}
.term-switch button{
  border:none;background:transparent;padding:7px 15px;border-radius:var(--r-xs);
  font-size:var(--t-12);cursor:pointer;color:var(--ink-500);font-weight:500;transition:.16s var(--ease);
}
.term-switch button.on{background:#fff;color:var(--brand-700);box-shadow:var(--sh-xs);font-weight:600}

/* ------------------------------ 小程序模拟 ------------------------------ */
.mp-shell{height:100%;display:flex;flex-direction:column;background:var(--bg)}
.mp-status{
  height:44px;background:#fff;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 20px 6px;font-size:var(--t-12);color:var(--ink-800);flex:none;font-weight:600;
}
.mp-nav{background:#fff;padding:9px 17px 11px;display:flex;align-items:center;gap:10px;flex:none;
  border-bottom:1px solid var(--ink-100)}
.mp-nav b{font-size:var(--t-15)}
.mp-body{flex:1;overflow-y:auto;padding:13px 13px 20px}
.mp-tabbar{flex:none;height:60px;background:#fff;border-top:1px solid var(--ink-150);
  display:grid;grid-template-columns:repeat(4,1fr)}
.mp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;color:var(--ink-400);cursor:pointer;transition:.16s var(--ease)}
.mp-tab.on{color:var(--brand-700);font-weight:600}
.mp-tab svg{width:20px;height:20px}
.mp-card{background:#fff;border-radius:var(--r);padding:14px 15px;margin-bottom:11px;box-shadow:var(--sh-xs)}
.mp-card b{font-size:var(--t-13);display:block;margin-bottom:6px;font-weight:600}
.mp-card p{font-size:var(--t-12);color:var(--ink-500);margin:0;line-height:1.7}
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:#fff;
  border-radius:var(--r);padding:14px 7px;margin-bottom:11px;box-shadow:var(--sh-xs)}
.mp-grid div{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;
  color:var(--ink-600);text-align:center;cursor:pointer}
.mp-grid .ico{width:40px;height:40px;border-radius:13px;
  background:linear-gradient(140deg,var(--brand-50),var(--brand-100));
  color:var(--brand-600);display:flex;align-items:center;justify-content:center}
.mp-grid .ico svg{width:19px;height:19px}
.mp-btn{
  display:block;width:100%;padding:12px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
  color:#fff;text-align:center;font-size:var(--t-14);font-weight:600;border:none;cursor:pointer;
  box-shadow:var(--sh-brand);
}

/* ------------------------------ 响应式补充 ------------------------------ */
@media (max-width:1180px){
  .workbench,.calc-grid,.admin-grid,.grant-scope{grid-template-columns:minmax(0,1fr)}
  .result-body{max-height:none}
}
@media (max-width:760px){
  .login-points{grid-template-columns:1fr}
  .hero-meta{gap:20px}
  .hero-card{padding:20px}
  .hero-actions{position:static;margin-top:16px}
  .wb-head h2{font-size:var(--t-17)}
  .mod-grid,.quick-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

/* 侧边栏未读角标（通讯录消息数） */
.sb-item .nav-badge{
  margin-left:auto;flex:none;min-width:17px;height:17px;padding:0 5px;
  border-radius:9px;background:var(--danger);color:#fff;
  font-size:var(--t-10);font-weight:700;line-height:17px;text-align:center;
}
.sb-item .nav-badge[hidden]{display:none}

/* ============================== 通讯录 ============================== */
/* align-items 必须为 stretch：会话打开后右栏会被消息撑高，
   若用 start 则左栏停留在 min-height，两栏下边框会错开一截 */
.ct-wrap{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:16px;align-items:stretch}
.ct-left,.ct-right{padding:16px;min-height:540px;display:flex;flex-direction:column}
.ct-search{margin-bottom:8px}
.ct-phone{display:flex;gap:7px;margin-bottom:12px}
.ct-phone .input{flex:1;min-width:0}
.ct-sec{
  font-size:var(--t-11);font-weight:600;color:var(--ink-400);
  padding:10px 2px 4px;letter-spacing:.04em;
}
.ct-tabs .chip.hot{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.ct-tabs{display:flex;gap:8px;margin-bottom:12px}
.ct-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;max-height:600px}
.ct-row{
  display:flex;align-items:center;gap:11px;padding:10px 11px;
  border:1px solid transparent;border-radius:var(--r);cursor:pointer;transition:.18s var(--ease);
}
.ct-row:hover{background:var(--ink-50);border-color:var(--ink-150)}
.ct-row.on{background:var(--brand-50);border-color:var(--brand-200)}
.ct-ava{
  flex:none;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));color:#fff;font-weight:700;font-size:15px;
}
.ct-ava img{width:100%;height:100%;object-fit:cover;display:block}
.ct-info{flex:1;min-width:0}
.ct-nm{font-size:var(--t-13);font-weight:600;color:var(--ink-900);display:flex;align-items:center;gap:6px}
.ct-sub{font-size:var(--t-11);color:var(--ink-400);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-act{display:flex;gap:5px;flex:none}

/* ---------------- 右侧聊天窗 ---------------- */
.ct-right{padding:0;overflow:hidden;position:relative}
.ct-head{
  display:flex;align-items:center;gap:12px;flex:none;
  padding:14px 18px;border-bottom:1px solid var(--ink-150);
  background:linear-gradient(180deg,var(--card-2),var(--card));
}
.ct-head-who{flex:1;min-width:0}
.ct-head-who b{display:block;font-size:var(--t-14);font-weight:650;color:var(--ink-900)}
.ct-head-who span{font-size:var(--t-11);color:var(--ink-400)}

.ct-msgs{
  flex:1;overflow-y:auto;padding:18px 18px 6px;
  display:flex;flex-direction:column;gap:14px;
  min-height:360px;max-height:520px;
  background:var(--paper);
}
.ct-blank{
  margin:auto;display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--ink-300);text-align:center;
}
.ct-blank b{font-size:var(--t-13);color:var(--ink-500);font-weight:600}
.ct-blank span{font-size:var(--t-11);color:var(--ink-400)}
.ct-day{
  align-self:center;font-size:var(--t-10);color:var(--ink-400);
  background:var(--ink-100);border-radius:var(--r-full);padding:3px 12px;
}
.ct-line{display:flex;gap:9px;align-items:flex-start;max-width:78%}
.ct-line.me{align-self:flex-end;flex-direction:row-reverse}
.ct-body{min-width:0;display:flex;flex-direction:column}
.ct-line.me .ct-body{align-items:flex-end}
.ct-bubble{
  padding:10px 14px;border-radius:14px;font-size:var(--t-13);line-height:1.72;
  background:var(--card);border:1px solid var(--ink-150);color:var(--ink-800);
  word-break:break-word;overflow:hidden;
  border-top-left-radius:5px;
}
/* 自己发出的消息用浅蓝底 + 深色字，与对方的白底卡片区分但不刺眼 */
.ct-line.me .ct-bubble{
  background:linear-gradient(135deg,var(--brand-100),var(--brand-50));color:var(--ink-800);
  border-color:var(--brand-200);border-top-left-radius:14px;border-top-right-radius:5px;
  box-shadow:0 6px 16px -13px rgba(59,91,219,.55);
}
/* 完整年月日 + 时刻，比原来的 HH:MM 长，禁止换行并让数字等宽以便纵向对齐 */
.ct-time{
  font-size:var(--t-10);color:var(--ink-400);margin-top:4px;padding:0 3px;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}

/* 各类消息内容 */
.ct-img img{display:block;max-width:230px;max-height:230px;border-radius:8px;object-fit:cover}
.ct-video{display:block;max-width:260px;border-radius:8px;background:#000}
.ct-audio{display:block;width:220px;height:34px}
.ct-cap{font-size:var(--t-12);margin-top:6px;opacity:.9}
.ct-sticker{font-size:34px;line-height:1.1}
.ct-file{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:3px 2px;min-width:170px;
}
.ct-file .ic{
  width:34px;height:34px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-50);color:var(--brand-600);
}
/* 浅蓝底上不能用白色图标，改为同色系深一档，保证对比度 */
.ct-line.me .ct-file .ic{background:var(--brand-200);color:var(--brand-700)}
.ct-file .meta{min-width:0;flex:1}
.ct-file .meta b{
  display:block;font-size:var(--t-12);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;
}
.ct-file .meta s{font-size:var(--t-10);opacity:.7;text-decoration:none}
.ct-file .dl{opacity:.6;flex:none}

/* 工具栏 + 输入区 */
.ct-bar{display:flex;align-items:center;gap:10px;padding:10px 18px 0}
.ct-tools{display:flex;gap:3px}
.ct-tool{
  width:30px;height:30px;border-radius:9px;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink-500);
  transition:.16s var(--ease);
}
.ct-tool:hover{background:var(--brand-50);color:var(--brand-600)}
.ct-tip{flex:1;font-size:var(--t-11);color:var(--brand-600)}
.ct-send{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  height:34px;padding:0 16px;border:none;border-radius:var(--r-full);cursor:pointer;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));color:#fff;
  font-size:var(--t-12);font-weight:600;font-family:inherit;
  transition:.18s var(--ease);
}
.ct-send:hover{transform:translateY(-1px);box-shadow:0 8px 18px -9px rgba(59,91,219,.9)}
.ct-send:disabled{opacity:.6;transform:none}
.ct-compose{padding:8px 18px 16px;border-top:1px solid transparent}
.ct-input{
  width:100%;box-sizing:border-box;resize:none;overflow-y:auto;
  padding:10px 13px;border:1px solid var(--ink-200);border-radius:var(--r);
  font-size:var(--t-13);font-family:inherit;line-height:1.6;color:var(--ink-800);
  background:var(--card);transition:.16s var(--ease);max-height:132px;
}
.ct-input:focus{outline:none;border-color:var(--brand-400);box-shadow:0 0 0 3px var(--brand-50)}

/* 表情面板 */
.ct-emoji{
  /* 贴左：与左下角的表情按钮同侧，展开时不会横跨到发送按钮上方 */
  position:absolute;left:18px;bottom:104px;z-index:5;
  width:266px;max-height:196px;overflow-y:auto;
  display:grid;grid-template-columns:repeat(6,1fr);gap:2px;
  padding:10px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--ink-200);
  box-shadow:var(--sh-3,0 18px 40px -18px rgba(15,23,42,.4));
}
.ct-emoji[hidden]{display:none}
.ct-emoji button{
  height:34px;border:none;background:none;cursor:pointer;font-size:19px;
  border-radius:8px;line-height:1;transition:.14s var(--ease);
}
.ct-emoji button:hover{background:var(--brand-50);transform:scale(1.15)}
@media (max-width:980px){
  .ct-wrap{grid-template-columns:minmax(0,1fr)}
  .ct-left{min-height:auto}
  .ct-emoji{left:12px}
}