/* ============================================================
   桂小律 · 共享设计系统 common.css
   包含：手机端布局 + 后台布局 + 通用组件
   ============================================================ */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --primary:#0FA48F;
  --primary-deep:#0B7D6E;
  --primary-soft:#E4F5F1;
  --gold:#FF9A2E;
  --gold-deep:#F57C1A;
  --bg:#F2F6F5;
  --card:#FFFFFF;
  --ink:#162724;
  --ink-2:#6B7B78;
  --ink-3:#9AA6A4;
  --line:#E6EDEC;
  --danger:#E8563F;
  --danger-soft:#FDECE8;
  --warn:#E8A02A;
  --warn-soft:#FFF4E0;
  --blue:#2E79C4;
  --blue-soft:#E7F0FB;
  --purple:#7C53C4;
  --purple-soft:#F0EBFA;
}
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,#DCEDEA 0%,#E9F2F0 45%,#DCE8E6 100%);
  font-size:15px; line-height:1.5;
}
a{ text-decoration:none; color:inherit; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; font-size:16px; outline:none; }
img{ display:block; }
ul,ol{ list-style:none; }

/* ============================================================
   一、手机端外框
   ============================================================ */
.phone{
  width:390px; height:844px; max-height:calc(100vh - 48px);
  background:var(--bg); border-radius:44px;
  box-shadow:0 30px 70px rgba(11,80,72,.28),0 6px 20px rgba(0,0,0,.12);
  overflow:hidden; position:relative; border:10px solid #11201D;
  display:flex; flex-direction:column; margin:24px auto;
}
.app{ display:flex; flex-direction:column; height:100%; overflow:hidden; position:relative; }

/* 状态栏 */
.statusbar{
  height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px 0 30px; font-size:15px; font-weight:600; color:#fff;
  background:var(--primary);
}
.statusbar.dark{ color:var(--ink); background:var(--bg); }
.sb-icons{ display:flex; align-items:center; gap:6px; }

/* 品牌栏（首页用） */
.header{
  flex-shrink:0; background:var(--primary); color:#fff;
  padding:6px 20px 16px; display:flex; align-items:center; gap:12px;
}
.brand-logo{
  width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-name{ font-size:21px; font-weight:800; letter-spacing:1px; line-height:1.1; }
.brand-sub{ font-size:12px; margin-top:2px; display:flex; align-items:center; gap:5px; opacity:.92; }
.dot-online{ width:7px; height:7px; border-radius:50%; background:#7BF0C8; box-shadow:0 0 0 3px rgba(123,240,200,.25); }
.header-right{ margin-left:auto; display:flex; gap:10px; }
.h-icon{
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
}

/* 页面标题栏（内页用，带返回） */
.topbar{
  flex-shrink:0; height:52px; background:var(--primary); color:#fff;
  display:flex; align-items:center; padding:0 14px; gap:10px;
}
.topbar .back{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.topbar .t-title{ font-size:18px; font-weight:700; flex:1; text-align:center; }
.topbar .t-right{ width:38px; display:flex; align-items:center; justify-content:center; }

/* 内容滚动区 */
.scroll{ flex:1; overflow-y:auto; }
.scroll::-webkit-scrollbar{ width:0; }
.pad{ padding:16px; }
.pad-sm{ padding:12px; }

/* ============================================================
   二、通用组件
   ============================================================ */
/* 卡片 */
.card{
  background:var(--card); border-radius:16px; padding:16px;
  box-shadow:0 4px 14px rgba(15,90,82,.06); margin-bottom:14px;
}
.card-title{ font-size:16px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.card-title .more{ margin-left:auto; font-size:13px; color:var(--ink-2); font-weight:400; }

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:48px; padding:0 22px; border-radius:24px; font-size:16px; font-weight:600;
  transition:transform .15s, opacity .15s;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--primary); color:#fff; }
.btn-gold{ background:linear-gradient(180deg,#FFB23E,var(--gold-deep)); color:#fff; box-shadow:0 6px 16px rgba(245,124,26,.35); }
.btn-outline{ background:#fff; border:1.5px solid var(--primary); color:var(--primary-deep); }
.btn-block{ width:100%; }
.btn-sm{ height:38px; padding:0 16px; font-size:14px; border-radius:19px; }
.btn-ghost{ background:var(--primary-soft); color:var(--primary-deep); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* 表单字段 */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:8px; color:var(--ink); }
.field label .req{ color:var(--danger); }
.input,.textarea,.select{
  width:100%; background:#F7F9F8; border:1.5px solid var(--line); border-radius:13px;
  padding:13px 15px; font-size:15px; color:var(--ink);
}
.input:focus,.textarea:focus,.select:focus{ border-color:var(--primary); background:#fff; }
.textarea{ min-height:90px; resize:vertical; line-height:1.55; }
.field-hint{ font-size:12.5px; color:var(--ink-3); margin-top:6px; }

/* 列表 */
.list-item{
  display:flex; align-items:center; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line);
}
.list-item:last-child{ border-bottom:none; }
.list-item .li-main{ flex:1; min-width:0; }
.list-item .li-title{ font-size:15px; font-weight:600; }
.list-item .li-sub{ font-size:13px; color:var(--ink-2); margin-top:3px; }
.list-item .li-arrow{ color:var(--ink-3); flex-shrink:0; }

/* 标签 */
.tag{
  display:inline-flex; align-items:center; font-size:12px; font-weight:600;
  padding:3px 10px; border-radius:12px;
}
.tag-green{ background:var(--primary-soft); color:var(--primary-deep); }
.tag-red{ background:var(--danger-soft); color:var(--danger); }
.tag-orange{ background:var(--warn-soft); color:var(--warn); }
.tag-blue{ background:var(--blue-soft); color:var(--blue); }
.tag-gray{ background:#EEF1F0; color:var(--ink-2); }

/* 网格 */
.grid{ display:grid; gap:12px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

/* 数字人头像 */
.avatar-circle{
  border-radius:50%; overflow:hidden; background:#FBF6EE;
  border:3px solid #fff; box-shadow:0 6px 16px rgba(7,70,63,.2);
}
.avatar-circle img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }

/* 空状态 */
.empty{ text-align:center; padding:50px 20px; color:var(--ink-3); }
.empty .e-ico{ width:80px; height:80px; margin:0 auto 14px; opacity:.5; }
.empty .e-text{ font-size:14px; }

/* ============================================================
   三、底部 TabBar（手机端）
   ============================================================ */
.tabbar{
  flex-shrink:0; height:72px; background:#fff; border-top:1px solid var(--line);
  display:flex; padding-bottom:14px;
}
.tab-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink-3); font-size:11px;
}
.tab-item.active{ color:var(--primary); }
.tab-item .tab-ico{ display:flex; }

/* 底部输入栏（对话页） */
.dock{
  flex-shrink:0; background:#fff; padding:10px 18px 24px;
  border-top:1px solid var(--line);
}
.dock-row{ display:flex; align-items:center; gap:14px; }
.dock-side{
  width:46px; height:46px; border-radius:50%; background:var(--primary-soft);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.text-entry{
  flex:1; height:48px; background:#F2F5F4; border-radius:24px; padding:0 18px;
  display:flex; align-items:center; color:var(--ink-2); font-size:15px;
}
.mic-btn{
  width:66px; height:66px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(180deg,#FFB23E 0%,var(--gold) 55%,var(--gold-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(245,124,26,.4);
}
.dock-hint{ text-align:center; font-size:12px; color:var(--ink-3); margin-top:9px; }

/* Home 指示条 */
.home-indicator{ position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:134px; height:5px; border-radius:3px; background:#11201D; opacity:.28; z-index:5; }

/* ============================================================
   四、后台管理布局（PC）
   ============================================================ */
.admin{
  display:flex; min-height:100vh; background:var(--bg);
}
.sidebar{
  width:230px; flex-shrink:0; background:#11201D; color:#C7D2CF;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar .sb-brand{
  height:64px; display:flex; align-items:center; gap:10px; padding:0 22px;
  color:#fff; font-size:18px; font-weight:800; border-bottom:1px solid rgba(255,255,255,.07);
}
.sb-brand .sb-logo{ width:34px; height:34px; border-radius:10px; background:var(--primary); display:flex; align-items:center; justify-content:center; }
.sb-menu{ padding:14px 12px; flex:1; overflow-y:auto; }
.sb-group{ font-size:12px; color:#6B7B78; padding:14px 12px 6px; }
.sb-nav{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:10px;
  font-size:14.5px; color:#C7D2CF; margin-bottom:3px;
}
.sb-nav.active{ background:var(--primary); color:#fff; font-weight:600; }
.sb-nav:hover{ background:rgba(255,255,255,.06); }
.sb-nav .n-ico{ width:20px; display:flex; justify-content:center; }

.admin-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.admin-top{
  height:64px; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 26px; gap:16px; position:sticky; top:0; z-index:10;
}
.admin-top .page-name{ font-size:18px; font-weight:700; }
.admin-top .at-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.at-search{
  height:40px; width:240px; background:#F4F6F5; border-radius:20px; padding:0 16px;
  display:flex; align-items:center; color:var(--ink-2); font-size:14px;
}
.admin-user{ display:flex; align-items:center; gap:9px; font-size:14px; }
.admin-user .au-avatar{ width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.admin-content{ padding:24px 26px; }

/* 后台统计卡片 */
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:20px; }
.stat-card{
  background:#fff; border-radius:16px; padding:20px;
  box-shadow:0 4px 14px rgba(15,90,82,.06);
}
.stat-card .sc-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.stat-card .sc-label{ font-size:14px; color:var(--ink-2); }
.stat-card .sc-ico{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.stat-card .sc-num{ font-size:28px; font-weight:800; line-height:1.1; }
.stat-card .sc-rate{ font-size:12.5px; margin-top:7px; display:flex; align-items:center; gap:4px; }
.sc-rate.up{ color:var(--primary); }
.sc-rate.down{ color:var(--danger); }

/* 后台图表 */
.panel{ background:#fff; border-radius:16px; padding:20px; box-shadow:0 4px 14px rgba(15,90,82,.06); margin-bottom:20px; }
.panel-title{ font-size:16px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.chart{ width:100%; height:320px; }

/* 后台数据表格 */
.table-wrap{ background:#fff; border-radius:16px; box-shadow:0 4px 14px rgba(15,90,82,.06); overflow:hidden; }
.table-toolbar{ padding:16px 20px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.table-toolbar .tt-search{ height:38px; width:220px; background:#F4F6F5; border-radius:19px; padding:0 15px; border:1px solid var(--line); font-size:14px; }
.table-toolbar .tt-right{ margin-left:auto; display:flex; gap:10px; }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th{
  text-align:left; font-size:13px; color:var(--ink-2); font-weight:600;
  padding:13px 16px; background:#FAFBFB; border-bottom:1px solid var(--line);
}
.data-table td{ padding:14px 16px; font-size:14px; border-bottom:1px solid var(--line); }
.data-table tr:last-child td{ border-bottom:none; }
.data-table tr:hover td{ background:#FAFCFC; }
.table-footer{ padding:14px 20px; display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--ink-2); }
.pagination{ display:flex; gap:6px; }
.page-num{ min-width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.page-num.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* 开关 */
.switch{ position:relative; width:46px; height:26px; display:inline-block; }
.switch input{ opacity:0; width:0; height:0; }
.switch .slider-sw{ position:absolute; inset:0; background:#CFD8D6; border-radius:13px; transition:.2s; }
.switch .slider-sw::before{ content:""; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.switch input:checked + .slider-sw{ background:var(--primary); }
.switch input:checked + .slider-sw::before{ transform:translateX(20px); }

/* 提示条 */
.notice{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px;
  font-size:13.5px; margin-bottom:14px;
}
.notice-info{ background:var(--blue-soft); color:var(--blue); }
.notice-warn{ background:var(--warn-soft); color:var(--warn); }

/* Toast */
.toast{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9);
  background:rgba(20,40,37,.92); color:#fff; padding:14px 22px; border-radius:14px;
  font-size:15px; opacity:0; pointer-events:none; transition:all .2s; z-index:999;
  max-width:280px; text-align:center; line-height:1.5;
}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ============================================================
   五、C端电脑端网页布局（.web，面向普通用户，浅色宽屏）
   ============================================================ */
.web{ display:flex; flex-direction:column; height:100vh; background:var(--bg); overflow:hidden; }

/* 顶栏 */
.web-top{
  height:60px; flex-shrink:0; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; padding:0 24px; gap:16px;
}
.web-top .wt-logo{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; }
.wt-logo .wt-badge{ width:36px; height:36px; border-radius:11px; background:var(--primary); display:flex; align-items:center; justify-content:center; }
.web-top .wt-search{
  height:40px; width:260px; margin-left:24px; background:#F4F6F5; border-radius:20px;
  padding:0 16px; display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:14px;
}
.web-top .wt-right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.wt-login-btn{ height:38px; padding:0 20px; border-radius:19px; background:var(--primary); color:#fff; font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; }
.wt-user{ display:flex; align-items:center; gap:9px; font-size:14px; }
.wt-user .wt-avatar{ width:36px; height:36px; border-radius:50%; overflow:hidden; background:#FBF6EE; border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.15); }
.wt-user .wt-avatar img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }

/* 主体三列 */
.web-body{ flex:1; display:flex; overflow:hidden; }

/* 左侧导航 */
.web-nav{
  width:210px; flex-shrink:0; background:#fff; border-right:1px solid var(--line);
  padding:16px 12px; overflow-y:auto;
}
.web-nav-group{ font-size:12px; color:var(--ink-3); padding:12px 12px 6px; }
.web-nav-item{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:11px;
  font-size:14.5px; color:var(--ink-2); margin-bottom:3px;
}
.web-nav-item:hover{ background:#F6F9F8; }
.web-nav-item.active{ background:var(--primary-soft); color:var(--primary-deep); font-weight:600; }
.web-nav-item .wn-ico{ width:20px; display:flex; justify-content:center; }
.web-nav-item .wn-badge{ margin-left:auto; font-size:11px; background:var(--gold); color:#fff; padding:1px 7px; border-radius:10px; }

/* 中间主内容 */
.web-main{ flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

/* 右侧数字人 */
.web-aside{
  width:280px; flex-shrink:0; background:#fff; border-left:1px solid var(--line);
  display:flex; flex-direction:column; transition:margin-right .25s ease; overflow:hidden;
}
.web-aside.collapsed{ margin-right:-280px; }
.aside-character{ padding:24px 20px 10px; display:flex; flex-direction:column; align-items:center; }
.aside-character .ac-avatar{ width:150px; height:150px; }
.aside-character .ac-name{ font-size:17px; font-weight:800; margin-top:12px; }
.aside-character .ac-status{ font-size:12.5px; color:var(--ink-2); margin-top:4px; display:flex; align-items:center; gap:6px; }
.aside-voice{
  margin:14px 20px; padding:13px; border-radius:13px; background:var(--primary-soft);
  display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--primary-deep); font-weight:600;
}
.aside-tips{ margin:6px 20px; font-size:12.5px; color:var(--ink-2); line-height:1.6; }
.aside-toggle{
  position:absolute; top:50%; right:0; width:22px; height:64px; transform:translateY(-50%);
  background:#fff; border:1px solid var(--line); border-right:none; border-radius:12px 0 0 12px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:8; color:var(--ink-2);
}
.web-aside-relative{ position:relative; display:flex; flex-shrink:0; }

/* 电脑端对话区 */
.web-chat{ flex:1; overflow-y:auto; padding:26px 28px; }
.web-msg{ display:flex; gap:11px; margin-bottom:22px; }
.web-msg .wm-avatar{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#FBF6EE; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.web-msg .wm-avatar img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.web-msg .wm-bubble{
  background:#fff; border-radius:4px 18px 18px 18px; padding:14px 17px; font-size:15.5px; line-height:1.6;
  box-shadow:0 3px 10px rgba(15,90,82,.07); max-width:78%;
}
.wm-bubble .law{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); font-size:13px; color:var(--ink-2); }
.wm-bubble .disclaim{ margin-top:10px; font-size:12px; color:var(--ink-3); }
.web-msg.user{ flex-direction:row-reverse; }
.web-msg.user .wm-bubble{ background:var(--primary); color:#fff; border-radius:18px 4px 18px 18px; }
.web-chat-input{
  flex-shrink:0; background:#fff; border-top:1px solid var(--line); padding:14px 28px 20px;
  display:flex; gap:12px; align-items:center;
}
.web-chat-input .wci-input{
  flex:1; height:50px; background:#F4F6F5; border:1.5px solid var(--line); border-radius:25px;
  padding:0 18px; font-size:15px;
}
.web-chat-input .wci-input:focus{ border-color:var(--primary); background:#fff; }
.wci-mic{ width:50px; height:50px; border-radius:50%; background:var(--primary-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wci-send{ height:50px; padding:0 26px; border-radius:25px; background:var(--primary); color:#fff; font-size:15px; font-weight:600; }

/* 合同审查三栏 */
.review-risks{
  width:280px; flex-shrink:0; background:#fff; border-right:1px solid var(--line);
  overflow-y:auto; padding:18px 16px;
}
.review-doc{ flex:1; overflow-y:auto; padding:34px 40px; background:#F7F9F8; }
.review-detail{
  width:330px; flex-shrink:0; background:#fff; border-left:1px solid var(--line);
  overflow-y:auto; padding:20px;
}
.risk-summary{ background:linear-gradient(135deg,var(--primary),#0E9A87); border-radius:15px; padding:16px; color:#fff; margin-bottom:16px; }
.risk-summary .rs-num{ font-size:26px; font-weight:800; }
.risk-summary .rs-sub{ font-size:12.5px; opacity:.92; margin-top:3px; }
.risk-line{
  display:flex; align-items:center; gap:11px; padding:12px 10px; border-radius:12px; margin-bottom:6px; cursor:pointer;
  border:1.5px solid transparent;
}
.risk-line:hover{ background:#F6F9F8; }
.risk-line.active{ background:var(--primary-soft); border-color:var(--primary); }
.risk-line .rl-num{ width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.risk-line .rl-text{ flex:1; font-size:13.5px; font-weight:600; line-height:1.3; }
.risk-line .rl-text small{ display:block; font-size:11px; color:var(--ink-2); font-weight:400; margin-top:2px; }
.doc-paper{
  background:#fff; border-radius:8px; padding:40px 44px; max-width:820px; margin:0 auto;
  box-shadow:0 4px 18px rgba(15,90,82,.08); font-size:15px; line-height:1.9;
}
.doc-paper h2{ text-align:center; font-size:22px; margin-bottom:24px; }
.doc-paper .clause{ margin-bottom:14px; padding:4px 8px; border-radius:6px; cursor:pointer; }
.doc-paper .clause.hl-red{ background:var(--danger-soft); box-shadow:inset 3px 0 0 var(--danger); }
.doc-paper .clause.hl-yellow{ background:var(--warn-soft); box-shadow:inset 3px 0 0 var(--warn); }
.doc-paper .clause.hl-green{ background:var(--primary-soft); box-shadow:inset 3px 0 0 var(--primary); }
.doc-paper .clause .c-mark{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  font-size:11px; font-weight:700; color:#fff; margin-right:6px; vertical-align:middle;
}
.detail-block{ margin-bottom:16px; }
.detail-block .db-label{ font-size:12.5px; color:var(--ink-2); font-weight:600; margin-bottom:6px; }
.detail-block .db-content{ font-size:14px; line-height:1.6; }
.suggest-box{ background:var(--primary-soft); border-radius:12px; padding:13px; font-size:13.5px; line-height:1.6; color:var(--ink); }
.detail-actions{ display:flex; gap:10px; margin-top:18px; }

/* 合同生成步骤 */
.create-steps{
  width:240px; flex-shrink:0; background:#fff; border-right:1px solid var(--line);
  padding:24px 18px; overflow-y:auto;
}
.step-line{ display:flex; gap:13px; padding-bottom:22px; position:relative; }
.step-line:last-child{ padding-bottom:0; }
.step-dot{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:#E6EDEC; color:var(--ink-2); font-size:13px; font-weight:700; z-index:2;
}
.step-line.done .step-dot{ background:var(--primary); color:#fff; }
.step-line.current .step-dot{ background:var(--gold); color:#fff; box-shadow:0 0 0 4px var(--warn-soft); }
.step-line::before{ content:""; position:absolute; left:14px; top:30px; width:2px; bottom:0; background:var(--line); }
.step-line:last-child::before{ display:none; }
.step-text .st-name{ font-size:14px; font-weight:600; padding-top:5px; }
.step-text .st-sub{ font-size:12px; color:var(--ink-2); }
.create-form{ flex:1; overflow-y:auto; padding:32px 40px; }
.create-form .cf-inner{ max-width:640px; margin:0 auto; }

/* 工具箱电脑端 */
.tool-cats{
  width:220px; flex-shrink:0; background:#fff; border-right:1px solid var(--line);
  padding:18px 14px; overflow-y:auto;
}
.tool-cat-item{
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px; font-size:14px;
  color:var(--ink-2); margin-bottom:4px; cursor:pointer;
}
.tool-cat-item.active{ background:var(--primary-soft); color:var(--primary-deep); font-weight:600; }
.tool-work{ flex:1; overflow-y:auto; padding:32px 40px; }
.tool-work .tw-inner{ max-width:720px; margin:0 auto; }

/* 电脑端登录页 */
.web-login{
  height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0B7D6E 0%,#0FA48F 55%,#13B39C 100%); padding:20px;
}
.web-login-card{
  width:400px; background:#fff; border-radius:22px; padding:40px 36px;
  box-shadow:0 30px 60px rgba(5,50,45,.3);
}
.web-login-card .wlc-head{ text-align:center; margin-bottom:28px; }
.wlc-head .wlc-avatar{ width:84px; height:84px; margin:0 auto 14px; }
.wlc-head h1{ font-size:24px; font-weight:800; }
.wlc-head p{ font-size:13.5px; color:var(--ink-2); margin-top:6px; }

/* 个人中心电脑端 */
.profile-wrap{ flex:1; overflow-y:auto; padding:32px 40px; }
.profile-inner{ max-width:860px; margin:0 auto; }
.profile-head{ display:flex; align-items:center; gap:20px; }
.profile-head .ph-avatar{ width:80px; height:80px; }
.profile-head .ph-name{ font-size:22px; font-weight:800; }
.profile-head .ph-sub{ font-size:13.5px; color:var(--ink-2); margin-top:5px; }
.profile-stat{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pstat{ text-align:center; }
.pstat .pstat-num{ font-size:26px; font-weight:800; color:var(--primary-deep); }
.pstat .pstat-label{ font-size:13px; color:var(--ink-2); margin-top:4px; }