/* ==========================================================================
   律智云 · 通用组件
   ========================================================================== */

/* ============================ 按钮 ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid transparent;border-radius:var(--r-sm);
  padding:9px 16px;font-size:var(--t-13);font-weight:500;
  white-space:nowrap;user-select:none;
  transition:transform .12s var(--ease),box-shadow .18s var(--ease),
             background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.btn svg{flex:none}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

.btn-primary{
  background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
  color:#fff;box-shadow:var(--sh-brand),inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover:not(:disabled){box-shadow:0 9px 24px -6px rgba(59,91,219,.48),inset 0 1px 0 rgba(255,255,255,.18)}

.btn-ghost{background:#fff;border-color:var(--ink-200);color:var(--ink-700);box-shadow:var(--sh-xs)}
.btn-ghost:hover:not(:disabled){border-color:var(--brand-300);color:var(--brand-700);background:var(--brand-50)}

.btn-soft{background:var(--brand-50);color:var(--brand-700);border-color:var(--brand-100)}
.btn-soft:hover:not(:disabled){background:var(--brand-100);border-color:var(--brand-200)}

.btn-danger{background:#fff;border-color:var(--danger-bd);color:var(--danger);box-shadow:var(--sh-xs)}
.btn-danger:hover:not(:disabled){background:var(--danger-bg);border-color:#EFA6A9}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-400),var(--gold-600));
  color:#2E2308;box-shadow:0 6px 18px -5px rgba(192,154,69,.5),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover:not(:disabled){filter:brightness(1.05)}

.btn-sm{padding:6px 12px;font-size:var(--t-12);border-radius:var(--r-xs)}
.btn-lg{padding:12px 24px;font-size:var(--t-15);border-radius:var(--r)}
.btn-block{width:100%}
.btn-icon{
  padding:7px;border-radius:var(--r-xs);background:transparent;color:var(--ink-500);
  border-color:transparent;box-shadow:none;
}
.btn-icon:hover:not(:disabled){background:var(--ink-100);color:var(--ink-800)}

/* ============================ 卡片 ============================ */
.card{
  background:var(--card);
  border:1px solid var(--ink-150);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
.card-pad{padding:20px 22px}
.card-head{
  display:flex;align-items:center;gap:10px;
  padding:16px 22px;border-bottom:1px solid var(--ink-150);
  background:linear-gradient(180deg,#fff,var(--card-2));
}
.card-head>svg{color:var(--brand-500);flex:none}
.card-head h3{font-size:var(--t-14);font-weight:600}
.card-head .desc{font-size:var(--t-12);color:var(--ink-400);font-weight:400}
.card-head .right{margin-left:auto;display:flex;gap:8px;align-items:center;min-width:0}

/* ============================ 标签 / 徽章 ============================ */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--t-11);font-weight:500;
  padding:3px 10px;border-radius:var(--r-full);
  background:var(--ink-100);color:var(--ink-600);
  white-space:nowrap;line-height:1.5;
}
.tag.blue{background:var(--info-bg);color:#2258C8}
.tag.green{background:var(--ok-bg);color:#087A54}
.tag.amber{background:var(--warn-bg);color:#96600A}
.tag.red{background:var(--danger-bg);color:#B02A31}
.tag.violet{background:var(--violet-bg);color:#5433C4}
.tag.gold{background:var(--gold-100);color:#8A6A22}
.tag.outline{background:#fff;border:1px solid var(--ink-200);color:var(--ink-500)}

.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--ink-300);flex:none}
.dot.green{background:var(--ok);box-shadow:0 0 0 3px rgba(14,163,113,.14)}
.dot.amber{background:var(--warn);box-shadow:0 0 0 3px rgba(217,136,15,.14)}
.dot.red{background:var(--danger);box-shadow:0 0 0 3px rgba(220,59,66,.14)}
.dot.blue{background:var(--info);box-shadow:0 0 0 3px rgba(47,111,235,.14)}

/* 图标容器 */
.icobox{
  width:36px;height:36px;border-radius:11px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--brand-50),var(--brand-100));
  color:var(--brand-600);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.icobox svg{width:18px;height:18px}
.icobox.gold{background:linear-gradient(140deg,var(--gold-100),var(--gold-200));color:var(--gold-600)}
.icobox.ok{background:linear-gradient(140deg,#E8F8F2,#D2F2E6);color:#0A8A5E}
.icobox.ink{background:linear-gradient(140deg,var(--ink-100),var(--ink-150));color:var(--ink-600)}

/* ============================ 表格 ============================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-13)}
table.tbl th{
  text-align:left;font-weight:600;font-size:var(--t-11);
  color:var(--ink-500);letter-spacing:.05em;text-transform:uppercase;
  padding:11px 16px;background:var(--ink-50);
  border-bottom:1px solid var(--ink-150);
  white-space:nowrap;position:sticky;top:0;z-index:2;
}
table.tbl td{padding:13px 16px;border-bottom:1px solid var(--ink-100);vertical-align:middle;color:var(--ink-700)}
table.tbl tbody tr{transition:background .14s var(--ease)}
table.tbl tbody tr:hover td{background:var(--brand-50)}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl .nm{font-weight:600;color:var(--ink-900);font-size:var(--t-13)}
table.tbl .sub{font-size:var(--t-11);color:var(--ink-400);margin-top:3px}
table.tbl .acts{display:flex;gap:4px;justify-content:flex-end}

/* ============================ Tabs ============================ */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--ink-150);overflow-x:auto;padding-bottom:0}
.tabs::-webkit-scrollbar{height:0}
.tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;font-size:var(--t-13);font-weight:500;
  color:var(--ink-500);cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.tab:hover{color:var(--ink-800)}
.tab.active{color:var(--brand-700);border-bottom-color:var(--brand-600);font-weight:600}
.tab .badge{margin-left:2px;font-size:10px;background:var(--ink-100);padding:1px 7px;border-radius:99px;color:var(--ink-500)}
.tab.active .badge{background:var(--brand-100);color:var(--brand-700)}

/* ============================ Modal / Drawer ============================ */
.modal-mask{
  position:fixed;inset:0;z-index:900;
  background:rgba(12,20,40,.46);
  backdrop-filter:blur(5px) saturate(120%);
  -webkit-backdrop-filter:blur(5px) saturate(120%);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade-in .2s var(--ease);
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal{
  background:#fff;border-radius:var(--r-xl);
  box-shadow:var(--sh-xl);
  width:100%;max-width:640px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:modal-in .3s var(--ease-out);
}
@keyframes modal-in{from{opacity:0;transform:translateY(20px) scale(.972)}to{opacity:1;transform:none}}
.modal.wide{max-width:940px}
.modal.narrow{max-width:460px}
.modal-head{
  padding:20px 24px;border-bottom:1px solid var(--ink-150);
  display:flex;align-items:flex-start;gap:12px;flex:none;
}
.modal-head h3{font-size:var(--t-15);font-weight:600}
.modal-head .sub{font-size:var(--t-12);color:var(--ink-400);margin-top:4px;line-height:1.6}
.modal-head .x{
  margin-left:auto;cursor:pointer;color:var(--ink-400);
  padding:6px;border-radius:var(--r-xs);transition:.14s var(--ease);flex:none;
}
.modal-head .x:hover{background:var(--ink-100);color:var(--ink-800)}
.modal-body{padding:22px 24px;overflow-y:auto;flex:1}
.modal-foot{
  padding:15px 24px;border-top:1px solid var(--ink-150);
  display:flex;gap:10px;justify-content:flex-end;background:var(--ink-25);flex:none;
}

.drawer-mask{position:fixed;inset:0;background:rgba(12,20,40,.44);backdrop-filter:blur(4px);z-index:900;animation:fade-in .2s var(--ease)}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(600px,94vw);
  background:#fff;z-index:901;display:flex;flex-direction:column;
  box-shadow:var(--sh-xl);
  animation:drawer-in .32s var(--ease-out);
}
@keyframes drawer-in{from{transform:translateX(40px);opacity:.5}to{transform:none;opacity:1}}

/* ============================ 树 ============================ */
.tree{font-size:var(--t-13)}
.tree-node{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:var(--r-sm);
  transition:background .14s var(--ease);
}
.tree-node:hover{background:var(--ink-50)}
.tree-node.sel{background:var(--brand-50)}
.tree-kids{margin-left:22px;border-left:1.5px dashed var(--ink-200);padding-left:12px}

/* ============================ 时间线 ============================ */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--brand-300),var(--ink-150))}
.tl-item{position:relative;padding-bottom:16px}
.tl-item::before{
  content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2.5px solid var(--brand-500);box-shadow:0 0 0 3px rgba(76,110,245,.12);
}
.tl-item b{font-size:var(--t-13);display:block;color:var(--ink-800);font-weight:500}
.tl-item span{font-size:var(--t-11);color:var(--ink-400)}

/* ============================ 统计块 ============================ */
.stat{
  position:relative;overflow:hidden;
  padding:18px 20px;border-radius:var(--r-lg);
  background:#fff;border:1px solid var(--ink-150);box-shadow:var(--sh-sm);
  transition:box-shadow .22s var(--ease),transform .22s var(--ease);
}
.stat:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.stat::after{
  content:"";position:absolute;right:-30px;top:-30px;width:96px;height:96px;border-radius:50%;
  background:var(--tint,var(--brand-50));opacity:.85;filter:blur(2px);
}
.stat .k{font-size:var(--t-12);color:var(--ink-500);position:relative;z-index:1;font-weight:500}
.stat .v{
  font-size:var(--t-30);font-weight:700;color:var(--ink-900);
  margin-top:7px;position:relative;z-index:1;
  letter-spacing:-.03em;line-height:1.15;
}
.stat .v small{font-size:var(--t-13);font-weight:500;color:var(--ink-400);margin-left:2px;letter-spacing:0}
.stat .x{font-size:var(--t-11);color:var(--ink-400);margin-top:5px;position:relative;z-index:1;line-height:1.6}

/* ============================ 通知铃铛 ============================ */
.bell-wrap{position:relative;display:inline-flex}
.bell{position:relative;border-radius:var(--r-xs)}
.bell-badge{
  position:absolute;top:0;right:0;min-width:17px;height:17px;padding:0 5px;
  border-radius:99px;background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;
  font-size:10px;line-height:17px;text-align:center;font-weight:700;
  box-shadow:0 2px 6px rgba(220,38,38,.4),0 0 0 2px #fff;
}
.bell-panel{
  position:absolute;top:46px;right:-10px;width:400px;max-width:90vw;
  background:#fff;border:1px solid var(--ink-150);border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);z-index:820;overflow:hidden;
  animation:panel-in .24s var(--ease-out);
}
@keyframes panel-in{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.bp-head{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--ink-150);
  background:linear-gradient(180deg,#fff,var(--ink-25));
}
.bp-head b{font-size:var(--t-13);font-weight:600}
.bp-act{font-size:var(--t-12);color:var(--brand-600);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:.14s}
.bp-act:hover{color:var(--brand-700);text-decoration:underline}
.bp-list{max-height:400px;overflow-y:auto}
.bp-item{
  display:flex;gap:11px;padding:13px 16px;
  border-bottom:1px solid var(--ink-100);cursor:pointer;
  transition:background .14s var(--ease);
}
.bp-item:last-child{border-bottom:none}
.bp-item:hover{background:var(--ink-25)}
.bp-item.unread{background:linear-gradient(90deg,var(--brand-50),rgba(238,242,255,.35))}
.bp-item.unread .bp-title{font-weight:600;color:var(--ink-900)}
.bp-title{font-size:var(--t-13);color:var(--ink-800);line-height:1.5}
.bp-body{font-size:var(--t-11);color:var(--ink-500);line-height:1.65;margin-top:4px}
.bp-time{font-size:var(--t-11);color:var(--ink-400);margin-top:5px}
.bp-foot{padding:11px 16px;font-size:var(--t-11);color:var(--ink-400);background:var(--ink-25);
  border-top:1px solid var(--ink-150);line-height:1.65}

/* ============================ 文件上传 ============================ */
.file-drop{
  border:1.5px dashed var(--ink-300);border-radius:var(--r);
  padding:22px 18px;text-align:center;cursor:pointer;
  background:var(--ink-25);
  transition:all .18s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.file-drop svg{color:var(--brand-400);margin-bottom:5px}
.file-drop:hover{border-color:var(--brand-400);background:var(--brand-50)}
.file-drop.dragging{border-color:var(--brand-500);background:var(--brand-50);transform:scale(1.005)}
.file-drop.has{border-style:solid;border-color:var(--ok-bd);background:var(--ok-bg)}
.file-drop.has svg{color:var(--ok)}
.file-drop.loading{opacity:.6;pointer-events:none}
.file-drop b{display:block;font-size:var(--t-13);color:var(--ink-700);font-weight:600}
.file-drop span{font-size:var(--t-11);color:var(--ink-400);line-height:1.6;max-width:340px}

.upload-list{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.upload-item{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 13px;border-radius:var(--r);
  border:1px solid var(--ink-150);background:var(--card-2);
  transition:.16s var(--ease);
}
.upload-item.ok{border-color:var(--ok-bd);background:var(--ok-bg)}
.upload-item.fail{border-color:var(--danger-bd);background:var(--danger-bg)}
.upload-item .ui-ic{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-50);color:var(--brand-600);
}
.upload-item.ok .ui-ic{background:#D6F2E7;color:#0A8A5E}
.upload-item.fail .ui-ic{background:#FADDDD;color:var(--danger)}
.upload-item .ui-main{flex:1;min-width:0}
.upload-item .ui-name{font-size:var(--t-13);font-weight:600;color:var(--ink-900);word-break:break-all}
.upload-item .ui-meta{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 5px}
.upload-item .ui-note{font-size:var(--t-11);color:var(--ink-500);line-height:1.65}

/* ---------- 输入框内联附件区（图片/文档上传后自动识别并入本项） ---------- */
.att{
  margin-top:7px;
  border:1px dashed var(--ink-200);
  border-radius:var(--r);
  background:var(--card-2);
  padding:7px 10px;
  transition:.16s var(--ease);
}
.att.dragging{border-color:var(--brand-500);background:var(--brand-50)}
.att.loading{opacity:.65;pointer-events:none}
.att.has{border-style:solid;border-color:var(--ok-bd);background:var(--ok-bg)}
.att-add{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-size:var(--t-12);font-weight:600;color:var(--brand-600);
  padding:2px 0;user-select:none;
}
.att-add:hover{color:var(--brand-700);text-decoration:underline}
.att-hint{font-size:var(--t-11);color:var(--ink-400);margin-left:9px}
.att-list{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.att-list:empty{margin-top:0}
.att-item{
  display:flex;align-items:center;gap:7px;
  padding:5px 8px;border-radius:var(--r-sm);
  background:var(--card);border:1px solid var(--ink-150);
  font-size:var(--t-12);
}
.att-item.ok{border-color:var(--ok-bd)}
.att-item.fail{border-color:var(--danger-bd);background:var(--danger-bg)}
.att-item.inlined{background:var(--brand-50);border-color:var(--brand-200)}
.att-item svg{flex:none;color:var(--ink-400)}
.att-item.ok svg{color:var(--ok)}
.att-item.fail svg{color:var(--danger)}
.att-item .ai-nm{
  flex:1;min-width:0;color:var(--ink-900);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.att-item .ai-tag{
  flex:none;font-size:var(--t-11);color:var(--ink-500);
  background:var(--ink-100);border-radius:var(--r-full);padding:1px 7px;
}
.att-item .ai-tag.done{background:var(--brand-100);color:var(--brand-700)}
.att-item .ai-act{
  flex:none;font-size:var(--t-11);color:var(--brand-600);cursor:pointer;
  background:none;border:1px solid var(--brand-200);border-radius:var(--r-full);
  padding:1px 8px;font-family:inherit;transition:.14s var(--ease);
}
.att-item .ai-act:hover{background:var(--brand-50);border-color:var(--brand-400)}
.att-item .ai-x{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;cursor:pointer;
  background:none;border:none;color:var(--ink-400);padding:0;transition:.14s var(--ease);
}
.att-item .ai-x:hover{background:var(--danger-bg);color:var(--danger)}
.att-err{font-size:var(--t-11);color:var(--danger);line-height:1.6;padding:0 4px 2px}

/* ---------- 文本域快捷排版条 ---------- */
/* 与下方文本域拼成一体（共用圆角、抹掉接缝），看起来像一个编辑器，
   而不是「标签 + 输入框」两截 */
.rt-bar{
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  padding:4px 5px;margin-bottom:-1px;
  background:var(--ink-25);
  border:1px solid var(--ink-200);border-bottom:none;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.rt-b{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border:1px solid transparent;border-radius:var(--r-xs);
  background:transparent;cursor:pointer;font-family:inherit;
  font-size:var(--t-12);color:var(--ink-600);line-height:1.7;
  transition:.14s var(--ease);
}
.rt-b:hover{background:#fff;border-color:var(--ink-200);color:var(--brand-700)}
.rt-b:active{transform:translateY(1px)}
.rt-b b{font-weight:700}
.rt-spacer{flex:1;min-width:0}
.rt-count{font-size:var(--t-11);color:var(--ink-400);padding-right:5px}
/* 拼合后下方文本域只保留下半部圆角 */
.rt-bar+.textarea{border-top-left-radius:0;border-top-right-radius:0}
/* 聚焦时让工具条边框一起高亮，整体像一个控件（不支持 :has 的浏览器只是忽略此行） */
.rt-bar:has(+.textarea:focus){border-color:var(--brand-400)}

/* ---------- 行政区划级联（省 / 市 / 区县） ---------- */
.region{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
/* 直辖市：市级与省级同名，自动锁定后隐藏该下拉，只呈现省 / 区县两级 */
.region.rp-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.region .select{width:100%;min-width:0}
.region .select.rp-skip{display:none}
.region .select:disabled{opacity:.55;cursor:not-allowed;background:var(--ink-100);color:var(--ink-400)}
.region-out{
  margin-top:7px;font-size:var(--t-12);color:var(--ink-400);
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.6;
}
.region-out b{
  font-weight:600;color:var(--brand-700);
  background:var(--brand-50);border:1px solid var(--brand-100);
  border-radius:var(--r-full);padding:2px 10px;
}
@media (max-width:620px){
  .region,.region.rp-two{grid-template-columns:1fr}
}

/* ---------- 法院可搜索下拉 ---------- */
/* 外观与 .input 保持一致（同边框、同圆角、同聚焦光晕），
   只是把输入框与候选列表包进一个相对定位容器 */
.court{position:relative}
.court-box{position:relative;display:flex;align-items:center}
.court-box>svg{position:absolute;left:12px;color:var(--ink-400);pointer-events:none}
.court-input{
  width:100%;appearance:none;
  border:1px solid var(--ink-200);background:var(--ink-25);
  border-radius:var(--r-sm);padding:10px 34px;
  font-size:var(--t-13);color:var(--ink-900);
}
.court-input::placeholder{color:var(--ink-400)}
.court-input:hover{border-color:var(--ink-300)}
.court-input:focus{
  border-color:var(--brand-400);background:#fff;
  box-shadow:0 0 0 3.5px rgba(76,110,245,.14);outline:none;
}
.court-caret{
  position:absolute;right:13px;cursor:pointer;
  width:0;height:0;
  border-left:4.5px solid transparent;border-right:4.5px solid transparent;
  border-top:5.5px solid var(--ink-400);
}
.court-menu{
  position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);
  max-height:264px;overflow-y:auto;padding:5px;
  background:#fff;border:1px solid var(--ink-200);
  border-radius:var(--r-sm);box-shadow:var(--sh-md);
}
.court-menu[hidden]{display:none}
.court-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 11px;border-radius:var(--r-xs);cursor:pointer;
  font-size:var(--t-13);color:var(--ink-800);line-height:1.5;
}
.court-item:hover,.court-item.on{background:var(--brand-50);color:var(--brand-700)}
.court-nm{flex:1;min-width:0;word-break:break-all}
/* 命中的关键字标色：搜「浦东」时一眼看到命中了哪两个字 */
.court-nm mark{background:transparent;color:var(--brand-600);font-weight:600}
.court-lv{
  flex:none;font-size:var(--t-11);color:var(--ink-400);
  border:1px solid var(--ink-150);border-radius:var(--r-full);padding:0 7px;
}
.court-empty{padding:11px;font-size:var(--t-12);color:var(--ink-400);text-align:center}