/* ==========================================================================
   组件层 —— 全站共用零件
   ========================================================================== */

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:33px;padding:0 13px;border-radius:var(--r-s);
  font-size:12.5px;font-weight:600;white-space:nowrap;
  border:1px solid var(--line-2);background:#fff;color:var(--ink-2);
  transition:background .14s,border-color .14s,color .14s,box-shadow .14s,transform .08s;
  box-shadow:var(--sh-1);
}
.btn:hover{background:var(--card-2);border-color:var(--ink-5);color:var(--ink)}
.btn:active{transform:translateY(.5px)}
.btn svg{flex:0 0 auto}
.btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:var(--r-xs)}
.btn-xs{height:24px;padding:0 8px;font-size:11.5px;border-radius:var(--r-xs);font-weight:500}
.btn-lg{height:40px;padding:0 18px;font-size:13.5px}
.btn-block{width:100%}
.btn-cinnabar{background:linear-gradient(180deg,#C93F31,#A82B21);color:#FFF3EA;border-color:#9A2A20;box-shadow:0 2px 8px rgba(168,43,33,.28)}
.btn-cinnabar:hover{background:linear-gradient(180deg,#D24638,#B22E23);color:#fff;border-color:#8A241B}
.btn-ink{background:linear-gradient(180deg,#2C251E,#1A1613);color:#F3E9D9;border-color:#151210;box-shadow:0 2px 8px rgba(26,22,19,.28)}
.btn-ink:hover{background:linear-gradient(180deg,#3A3128,#221C17);color:#fff;border-color:#151210}
.btn-gold{background:linear-gradient(180deg,#D3A755,#B2873A);color:#3A2A0B;border-color:#A87F31;box-shadow:0 2px 8px rgba(178,135,58,.3)}
.btn-gold:hover{background:linear-gradient(180deg,#DCB263,#BC9042);color:#2E2107}
.btn-jade{background:linear-gradient(180deg,#368060,#265A46);color:#EDF7F2;border-color:#21503E}
.btn-jade:hover{background:linear-gradient(180deg,#3D8B69,#2C634D)}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--ink-3)}
.btn-ghost:hover{background:var(--paper-2);color:var(--ink)}
.btn-outline-cinnabar{background:#fff;color:var(--cinnabar);border-color:var(--cinnabar-b)}
.btn-outline-cinnabar:hover{background:var(--cinnabar-l);border-color:var(--cinnabar)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;box-shadow:none}
.btn-round{border-radius:20px}

/* ---------------- 卡片 ---------------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  box-shadow:var(--sh-1);position:relative;
}
.card-h{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--paper-2);
}
.card-h h3{font-family:var(--f-serif);font-size:14.5px;letter-spacing:.04em;display:flex;align-items:center;gap:7px;line-height:1.4}
.card-h .ch-extra{margin-left:auto;font-size:var(--fs-sm);color:var(--ink-4);display:flex;align-items:center;gap:8px}
.card-b{padding:14px 15px}
.card-b.tight{padding:9px 11px}
.card-b.flush{padding:0}
.card-f{padding:9px 14px;border-top:1px solid var(--paper-2);background:var(--card-2);border-radius:0 0 var(--r-m) var(--r-m)}

/* 标题旁的金色小标记 */
.gold-tick{display:inline-block;width:3px;height:13px;border-radius:2px;background:linear-gradient(180deg,#DFB15C,#B2873A);flex:0 0 3px}
.dot-mark{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 7px}

/* ---------------- 统计卡 ---------------- */
.kpi{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:13px 14px;box-shadow:var(--sh-1);position:relative;overflow:hidden;
}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kpi-accent,var(--ink-4));opacity:.85}
.kpi .k-top{display:flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--ink-4)}
.kpi .k-val{font-family:var(--f-num);font-size:25px;font-weight:700;line-height:1.2;margin-top:4px;letter-spacing:-.01em}
.kpi .k-val small{font-family:var(--f-sans);font-size:var(--fs-sm);font-weight:500;color:var(--ink-4);margin-left:3px}
.kpi .k-foot{margin-top:3px;font-size:var(--fs-sm);color:var(--ink-4);display:flex;align-items:center;gap:5px}
.kpi .k-trend{font-weight:600}
.kpi .k-trend.up{color:var(--jade)}
.kpi .k-trend.down{color:var(--cinnabar)}
.kpi-accent-cinnabar{--kpi-accent:var(--cinnabar)}
.kpi-accent-gold{--kpi-accent:var(--gold)}
.kpi-accent-jade{--kpi-accent:var(--jade)}
.kpi-accent-indigo{--kpi-accent:var(--indigo)}
.kpi-accent-ink{--kpi-accent:var(--ink-2)}

/* ---------------- 标签 / 徽章 ---------------- */
.tag{
  display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 7px;border-radius:var(--r-xs);
  font-size:11px;font-weight:600;background:var(--paper-2);color:var(--ink-3);
  border:1px solid transparent;white-space:nowrap;
}
.tag-cinnabar{background:var(--cinnabar-l);color:var(--cinnabar-d);border-color:var(--cinnabar-b)}
.tag-gold{background:var(--gold-l);color:var(--gold-d);border-color:var(--gold-b)}
.tag-jade{background:var(--jade-l);color:var(--jade);border-color:var(--jade-b)}
.tag-indigo{background:var(--indigo-l);color:var(--indigo);border-color:var(--indigo-b)}
.tag-warn{background:var(--warn-l);color:var(--warn);border-color:var(--warn-b)}
.tag-ink{background:var(--ink);color:#F6ECDC}
.tag-line{background:transparent;border-color:var(--line-2);color:var(--ink-3)}
.tag-lg{height:24px;padding:0 9px;font-size:11.5px}

/* 段位徽章（贯穿全站的编码语言） */
.belt{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px 0 6px;border-radius:3px;
  font-size:11px;font-weight:700;color:var(--belt-i);
  background:color-mix(in srgb, var(--belt) 22%, #fff);
  border:1px solid color-mix(in srgb, var(--belt) 55%, #fff);
  white-space:nowrap;
}
.belt i{width:9px;height:9px;border-radius:2px;background:var(--belt);flex:0 0 9px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.belt-white{--belt:var(--belt-white);--belt-i:var(--belt-white-i)}
.belt-yellow{--belt:var(--belt-yellow);--belt-i:var(--belt-yellow-i)}
.belt-green{--belt:var(--belt-green);--belt-i:var(--belt-green-i)}
.belt-blue{--belt:var(--belt-blue);--belt-i:var(--belt-blue-i)}
.belt-purple{--belt:var(--belt-purple);--belt-i:var(--belt-purple-i)}
.belt-brown{--belt:var(--belt-brown);--belt-i:var(--belt-brown-i)}
.belt-black{--belt:var(--belt-black);--belt-i:var(--belt-black-i)}
.belt-sm{height:19px;font-size:10.5px;padding:0 6px 0 5px}

/* ---------------- 头像 ---------------- */
.avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-family:var(--f-serif);font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,#5C5347,#332C25);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  position:relative;
}
.avatar.sm{width:28px;height:28px;font-size:12.5px}
.avatar.lg{width:52px;height:52px;font-size:23px}
.avatar.xl{width:66px;height:66px;font-size:28px}
.avatar.cinnabar{background:linear-gradient(150deg,#D4463A,#9E2A20)}
.avatar.gold{background:linear-gradient(150deg,#D6AC5E,#9C7529)}
.avatar.jade{background:linear-gradient(150deg,#3B8B6A,#255341)}
.avatar.indigo{background:linear-gradient(150deg,#3A5B87,#223753)}
.avatar.paper{background:linear-gradient(150deg,#F5EFE2,#DCD2BE);color:var(--ink-2)}
/* 段位色环 */
.avatar-ring{position:relative;display:inline-grid;place-items:center}
.avatar-ring::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--belt,var(--line-2));opacity:.9;
}

/* ---------------- 进度条 ---------------- */
.bar{height:6px;border-radius:6px;background:var(--paper-2);overflow:hidden;position:relative}
.bar > i{display:block;height:100%;border-radius:6px;background:var(--bar-c,var(--ink-3));transition:width .4s cubic-bezier(.22,.9,.3,1)}
.bar-cinnabar{--bar-c:linear-gradient(90deg,#D4463A,#A82B21)}
.bar-jade{--bar-c:linear-gradient(90deg,#3E8C6A,#255341)}
.bar-gold{--bar-c:linear-gradient(90deg,#D6AC5E,#A87F31)}
.bar-indigo{--bar-c:linear-gradient(90deg,#3A5B87,#223753)}
.bar-sm{height:4px}
.bar-lg{height:9px}

/* ---------------- 表格 ---------------- */
.tbl{font-size:12.5px}
.tbl thead th{
  text-align:left;font-weight:600;font-size:11px;color:var(--ink-4);letter-spacing:.08em;
  padding:9px 12px;background:var(--card-2);border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl tbody td{padding:9px 12px;border-bottom:1px solid var(--paper-2);vertical-align:middle}
.tbl tbody tr:hover{background:var(--card-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .t-r{text-align:right}
.tbl .t-c{text-align:center}
.tbl-compact tbody td{padding:6px 10px}
.tbl-compact thead th{padding:7px 10px}
.tbl-fixed{table-layout:fixed}
.tbl-zebra tbody tr:nth-child(even){background:#FCFAF5}
.tbl-zebra tbody tr:nth-child(even):hover{background:var(--card-2)}

/* ---------------- 表单 ---------------- */
.field{display:flex;flex-direction:column;gap:5px}
.field > label{font-size:11.5px;color:var(--ink-3);font-weight:600;letter-spacing:.03em}
.input,.select,.textarea{
  height:33px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--r-s);
  background:#fff;font-size:12.5px;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;
}
.textarea{height:auto;padding:8px 10px;line-height:1.6;resize:vertical;font-family:inherit}
.input:focus,.select:focus,.textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(199,154,69,.15)}
.input::placeholder,.textarea::placeholder{color:var(--ink-5)}
.select{appearance:none;padding-right:26px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236F6255' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;}
.input-icon{position:relative}
.input-icon .in-ico{position:absolute;left:9px;top:8px;color:var(--ink-4);pointer-events:none}
.input-icon .input{padding-left:29px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-grid .full{grid-column:1/-1}
@media (max-width:700px){.form-grid{grid-template-columns:1fr}}

/* 筛选条 */
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters .input{width:auto;min-width:190px}
.filters .select{width:auto;min-width:120px}

/* 分段控件 */
.seg{display:inline-flex;background:var(--paper-2);border-radius:var(--r-s);padding:2px;gap:2px;border:1px solid var(--line)}
.seg button{
  height:25px;padding:0 11px;border-radius:var(--r-xs);font-size:12px;color:var(--ink-3);font-weight:600;
  transition:background .14s,color .14s;
}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.seg.seg-sm button{height:22px;padding:0 9px;font-size:11.5px}

/* 复选 */
.check{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;cursor:pointer;user-select:none}
.check input{accent-color:var(--cinnabar);width:14px;height:14px;margin:0}

/* ---------------- 标签页 ---------------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  padding:9px 13px;font-size:12.5px;color:var(--ink-3);font-weight:600;position:relative;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s;
}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--cinnabar-d);border-bottom-color:var(--cinnabar)}
.tabs .tab-count{margin-left:5px;font-size:10.5px;color:var(--ink-4);background:var(--paper-2);padding:1px 5px;border-radius:10px}
.tabs button.on .tab-count{background:var(--cinnabar-l);color:var(--cinnabar-d)}

/* ---------------- 抽屉 ---------------- */
.drawer-host{position:fixed;inset:0;z-index:80;pointer-events:none}
.drawer-host.on{pointer-events:auto;background:rgba(26,22,19,.34)}
.drawer-mask{position:absolute;inset:0;background:transparent;opacity:1}
.drawer{
  position:absolute;top:0;right:0;bottom:0;width:min(760px,94vw);background:var(--paper);
  box-shadow:-20px 0 60px -20px rgba(26,22,19,.5);display:flex;flex-direction:column;
  transform:translateX(30px);opacity:0;transition:transform .26s cubic-bezier(.22,.9,.3,1),opacity .2s;
}
.drawer-host.on .drawer{transform:none;opacity:1}
.drawer.wide{width:min(1040px,96vw)}
.drawer-h{
  padding:15px 18px;border-bottom:1px solid var(--line);background:var(--card);
  display:flex;align-items:flex-start;gap:12px;
}
.drawer-b{flex:1;overflow-y:auto;padding:16px 18px 28px}
.drawer-f{padding:11px 18px;border-top:1px solid var(--line);background:var(--card);display:flex;gap:8px;align-items:center}

/* ---------------- 模态 ---------------- */
.modal-host{position:fixed;inset:0;z-index:90;pointer-events:none}
.modal-host.on{pointer-events:auto}
.modal-mask{position:absolute;inset:0;background:rgba(26,22,19,.42);opacity:0;transition:opacity .2s;backdrop-filter:blur(1.5px)}
.modal-host.on .modal-mask{opacity:1}
.modal{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;
  width:min(560px,92vw);max-height:88vh;background:var(--card);border-radius:var(--r-l);
  box-shadow:var(--sh-3);display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.22,.9,.3,1),opacity .18s;
}
.modal-host.on .modal{transform:translate(-50%,-50%) scale(1);opacity:1}
.modal.w-lg{width:min(760px,94vw)}
.modal.w-xl{width:min(1000px,95vw)}
.modal-h{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal-h h3{font-family:var(--f-serif);font-size:15.5px;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.modal-h .mh-extra{margin-left:auto;font-size:11.5px;color:var(--ink-4)}
.modal-b{padding:16px 18px;overflow-y:auto;flex:1}
.modal-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--card-2);border-radius:0 0 var(--r-l) var(--r-l)}

/* ---------------- 提示条 ---------------- */
.toast-host{position:fixed;top:66px;right:18px;z-index:120;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:var(--r-s);
  background:#2A231C;color:#F5EBDB;font-size:12.5px;box-shadow:var(--sh-3);
  min-width:220px;max-width:400px;animation:toastIn .26s cubic-bezier(.22,.9,.3,1);
  border-left:3px solid var(--gold);
}
.toast.out{animation:toastOut .2s forwards}
.toast.ok{border-left-color:#4FA37C}
.toast.err{border-left-color:#D4463A}
.toast .t-ico{flex:0 0 16px}
@keyframes toastIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(18px)}}

/* ---------------- 空状态 ---------------- */
.empty{padding:38px 20px;text-align:center;color:var(--ink-4)}
.empty .e-t{font-family:var(--f-serif);font-size:14px;color:var(--ink-3);margin-top:10px}
.empty .e-s{font-size:12px;margin-top:4px}
.empty svg{opacity:.5}

/* ---------------- 分隔 ---------------- */
.hr{height:1px;background:var(--line);border:0;margin:14px 0}
.hr-dash{height:0;border-top:1px dashed var(--line-2);margin:12px 0}
.vr{width:1px;align-self:stretch;background:var(--line);margin:0 2px}

/* ---------------- 工具类 ---------------- */
.t-xs{font-size:var(--fs-xs)}.t-sm{font-size:var(--fs-sm)}.t-md{font-size:var(--fs-md)}.t-lg{font-size:var(--fs-lg)}
.c-ink{color:var(--ink)}.c-2{color:var(--ink-2)}.c-3{color:var(--ink-3)}.c-4{color:var(--ink-4)}.c-5{color:var(--ink-5)}
.c-cinnabar{color:var(--cinnabar)}.c-gold{color:var(--gold-d)}.c-jade{color:var(--jade)}.c-indigo{color:var(--indigo)}
.b{font-weight:600}.bb{font-weight:700}
.mt-0{margin-top:0}.mt-4{margin-top:4px}.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:12px}
.mt-14{margin-top:16px}.mt-18{margin-top:20px}.mt-24{margin-top:24px}
.mb-6{margin-bottom:6px}.mb-10{margin-bottom:10px}.mb-14{margin-bottom:14px}
.p-0{padding:0}.p-8{padding:8px}.p-12{padding:12px}.p-16{padding:16px}
.tc{text-align:center}.tr{text-align:right}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hide{display:none!important}
.w-full{width:100%}
.cursor-p{cursor:pointer}
.nowrap{white-space:nowrap}
.relative{position:relative}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}