/* ============================================================
   components.css — 卡片 / 结论横幅 / 表格 / 标签页 / 弹层 / 图表元件
   ============================================================ */

/* ============================ 卡片 ============================ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-1);overflow:hidden;
}
.card-hd{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line-2);background:var(--surface-2);
}
.card-hd h2,.card-hd h3{letter-spacing:-.005em}
.card-hd .sub{font-size:11.5px;color:var(--ink-3)}
.card-hd .spacer{flex:1}
.card-bd{padding:14px}
.card-bd.tight{padding:10px 12px}
.card-bd.flush{padding:0}
.card-ft{padding:10px 14px;border-top:1px solid var(--line-2);background:var(--surface-2);font-size:12px;color:var(--ink-3)}

.panel{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:12px}

/* ============================ 结论横幅（签名元素） ============================ */
.verdict{
  position:relative;display:flex;gap:16px;align-items:center;
  padding:16px 18px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(100deg,#FFFFFF, #FBFAF6 60%, #F7F4EA);
  box-shadow:var(--shadow-1);overflow:hidden;
}
.verdict::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ok)}
.verdict.v-bad::before{background:var(--bad)}
.verdict.v-warn::before{background:var(--warn)}
.verdict.v-gold::before{background:var(--gold)}
.verdict-body{flex:1;min-width:0}
.verdict-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-4);text-transform:uppercase}
.verdict-kicker::before{
  content:"周大福";display:inline-block;vertical-align:1px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;
  background:linear-gradient(145deg,var(--ctf-red-2),var(--ctf-red-deep));color:var(--ctf-red-ink);
  padding:1.5px 7px 1.5px 9px;border-radius:3px;margin-right:9px;
  box-shadow:0 1px 4px rgba(142,31,27,.28);
}
.verdict-title{font-size:19px;font-weight:700;letter-spacing:-.015em;margin-top:3px;line-height:1.3;font-family:var(--serif)}
.verdict.v-bad .verdict-title{color:var(--bad)}
.verdict.v-ok .verdict-title{color:var(--ok)}
.verdict-sub{margin-top:5px;font-size:12.5px;color:var(--ink-2);max-width:760px}
.verdict-stats{display:flex;gap:22px;margin-top:10px;flex-wrap:wrap}
.vstat{display:flex;flex-direction:column;gap:1px}
.vstat .v{font-size:17px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vstat .k{font-size:11px;color:var(--ink-3)}
.verdict-side{flex:none;display:flex;align-items:center;gap:12px}

/* —— 结论印章 —— */
.stamp{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;text-align:center;
  border:2.5px dashed currentColor;transform:rotate(-11deg);flex:none;opacity:.92;
}
.stamp.ok{color:var(--ok)}
.stamp.bad{color:var(--bad)}
.stamp-t{font-size:15px;font-weight:800;letter-spacing:.06em;line-height:1.15}
.stamp-s{font-size:10px;opacity:.85;letter-spacing:.1em;margin-top:3px}
.stamp.ok{outline:1.5px solid var(--gold-2);outline-offset:4px}

/* ============================ 指标卡 ============================ */
.kpi{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 13px;box-shadow:var(--shadow-1);position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:2px;min-height:104px;
}
.kpi-label{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.kpi-label .ico{width:13px;height:13px;color:var(--ink-4)}
.kpi-value{font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi-value .unit{font-size:13px;font-weight:600;color:var(--ink-3);margin-left:2px;letter-spacing:0}
.kpi-foot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:7px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
.delta{display:inline-flex;align-items:center;gap:2px;font-weight:650;font-variant-numeric:tabular-nums}
.delta.up{color:var(--ok)}.delta.down{color:var(--bad)}.delta.flat{color:var(--ink-3)}
.kpi-spark{display:inline-block;opacity:.95;pointer-events:none;flex:none}
.kpi-tag{position:absolute;top:10px;right:11px}
/* 区间条 */
.range{margin-top:6px;height:6px;border-radius:4px;background:var(--neutral-bg);position:relative;overflow:hidden}
.range-band{position:absolute;top:0;bottom:0;background:var(--gold-soft);border-left:1px solid var(--gold-line);border-right:1px solid var(--gold-line)}
.range-mark{position:absolute;top:-2px;width:3px;height:10px;border-radius:2px;background:var(--ink);transform:translateX(-50%)}
.range-cap{position:absolute;top:0;bottom:0;left:50%;border-left:1px dashed var(--ink-4);opacity:.7}

/* ============================ 表格 ============================ */
.tbl-wrap{overflow:auto}
.tbl{font-size:12.5px}
.tbl th{
  text-align:left;font-weight:650;font-size:11px;color:var(--ink-3);letter-spacing:.04em;
  padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);
  white-space:nowrap;position:sticky;top:0;z-index:2;
}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line-3);vertical-align:middle;color:var(--ink-2)}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr.is-sel{background:var(--info-bg)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.strong{color:var(--ink);font-weight:600}
.tbl .cell-main{color:var(--ink);font-weight:600}
.tbl .cell-sub{font-size:11px;color:var(--ink-3)}
.tbl tr.row-warn{background:#FDF8E9}
.tbl tr.row-warn:hover{background:#FBF2D9}
.tbl tr.row-bad{background:var(--bad-bg)}
.tbl tr.row-bad:hover{background:#F5E0DC}
.tbl tr.row-ok{background:#F1F8F4}
.tbl-compact td,.tbl-compact th{padding:6px 10px}
.tbl-zebra tbody tr:nth-child(even){background:var(--surface-2)}
.tbl-zebra tbody tr:nth-child(even):hover{background:var(--surface-3)}

/* —— 过滤条 —— */
.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line-2);background:var(--surface)}
.filters .input,.filters .select{height:28px;font-size:12px}
.filters .grow{flex:1;min-width:120px;max-width:260px}
.bulkbar{
  display:flex;align-items:center;gap:10px;padding:7px 14px;background:var(--info-bg);
  border-bottom:1px solid var(--info-line);font-size:12px;color:var(--info);font-weight:600;
}
.bulkbar .spacer{flex:1}

/* ============================ 标签页 ============================ */
.tabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;flex-wrap:wrap}
.tab{
  padding:7px 12px;font-size:12.5px;color:var(--ink-3);font-weight:600;border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .14s,border-color .14s;white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab.is-active{color:var(--ink);border-bottom-color:var(--gold)}
.tab .cnt{
  display:inline-block;margin-left:5px;font-size:11px;font-weight:700;background:var(--neutral-bg);
  color:var(--ink-3);padding:0 5px;border-radius:20px;
}
.tab.is-active .cnt{background:var(--gold-soft);color:var(--gold-ink)}
.tabs-right{margin-left:auto;display:flex;align-items:center;gap:8px;padding-bottom:6px}

/* 分段控件 */
.seg{display:inline-flex;background:var(--neutral-bg);border-radius:8px;padding:2px;gap:2px}
.seg button{padding:4px 11px;border-radius:6px;font-size:12px;font-weight:600;color:var(--ink-3)}
.seg button.is-on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}

/* ============================ 进度条 ============================ */
.prog{height:6px;border-radius:6px;background:var(--neutral-bg);overflow:hidden;position:relative}
.prog i{display:block;height:100%;border-radius:6px;background:var(--gold);transition:width .8s cubic-bezier(.22,.8,.3,1)}
.prog.ok i{background:var(--ok)}
.prog.bad i{background:var(--bad)}
.prog.warn i{background:var(--warn)}
.prog-lg{height:9px}

/* ============================ 横条（CSS 图表） ============================ */
.hbar{display:flex;align-items:center;gap:9px;padding:5px 0}
.hbar-l{width:150px;flex:none;font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.hbar-t{flex:1;height:16px;background:var(--surface-3);border-radius:4px;position:relative;overflow:hidden}
.hbar-t i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--gold-soft);border-right:2px solid var(--gold)}
.hbar-t.ok i{background:var(--ok-bg);border-right-color:var(--ok)}
.hbar-t.bad i{background:var(--bad-bg);border-right-color:var(--bad)}
.hbar-t.warn i{background:var(--warn-bg);border-right-color:var(--warn)}
.hbar-v{width:58px;flex:none;text-align:right;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.hbar-threshold{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--ink-4);border-left:1px dashed var(--ink-4);z-index:2}

/* ============================ 键值列表 ============================ */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;align-items:baseline}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0;color:var(--ink);font-weight:550}

/* ============================ 列表项 ============================ */
.li{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-3)}
.li:last-child{border-bottom:0}
.li-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--surface-3);color:var(--ink-3)}
.li-ic.ok{background:var(--ok-bg);color:var(--ok)}
.li-ic.bad{background:var(--bad-bg);color:var(--bad)}
.li-ic.warn{background:var(--warn-bg);color:var(--warn)}
.li-ic.gold{background:var(--gold-soft);color:var(--gold-ink)}
.li-t{font-size:12.5px;color:var(--ink);font-weight:600}
.li-s{font-size:11.5px;color:var(--ink-3);margin-top:1px}

/* ============================ 弹层 ============================ */
.modal-mask{
  position:fixed;inset:0;background:rgba(17,22,31,.44);backdrop-filter:blur(2px);
  display:grid;place-items:center;z-index:200;padding:24px;animation:fade .16s ease;
}
.modal{
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);
  width:min(640px,100%);max-height:88vh;display:flex;flex-direction:column;
  border:1px solid var(--line);animation:pop .18s cubic-bezier(.2,.9,.3,1);
}
.modal.wide{width:min(900px,100%)}
.modal.narrow{width:min(460px,100%)}
.modal-hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.modal-hd h2{font-size:15px}
.modal-bd{padding:18px;overflow:auto}
.modal-ft{display:flex;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.modal-ft .spacer{flex:1}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ============================ Toast ============================ */
.toast-root{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{
  display:flex;align-items:flex-start;gap:9px;background:var(--ink);color:#EDF0F5;
  padding:10px 14px;border-radius:10px;font-size:12.5px;box-shadow:var(--shadow-3);
  max-width:380px;animation:slideIn .2s cubic-bezier(.2,.9,.3,1);
}
.toast.ok{background:#0E6B4D}.toast.bad{background:#9C3224}.toast.gold{background:#7E6220}
.toast .ico{width:15px;height:15px;margin-top:1px}
@keyframes slideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ============================ 浮层说明气泡 ============================ */
.pop{
  position:fixed;z-index:250;width:320px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadow-2);padding:13px 15px;font-size:12.5px;
  animation:pop .14s ease;
}
.pop h4{font-size:12.5px;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.pop h4 .ico{width:14px;height:14px;color:var(--gold-ink)}
.pop dl{display:grid;grid-template-columns:64px 1fr;gap:5px 10px;margin:0}
.pop dt{color:var(--ink-3);font-size:11.5px}
.pop dd{margin:0;color:var(--ink-2);font-size:12px;line-height:1.5}
.pop .pop-ft{margin-top:9px;padding-top:8px;border-top:1px solid var(--line-2);font-size:11px;color:var(--ink-4)}

/* ============================ 场景分支树 ============================ */
.tree{font-size:12.5px}
.tree-node{margin-bottom:2px}
.tree-row{
  display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:6px;cursor:pointer;
  color:var(--ink-2);transition:background .13s;
}
.tree-row:hover{background:var(--surface-3);color:var(--ink)}
.tree-row.is-on{background:var(--gold-soft);color:#7A5D1C;font-weight:650}
.tree-row .caret{width:13px;height:13px;color:var(--ink-4);transition:transform .15s}
.tree-node.is-open > .tree-row .caret{transform:rotate(90deg)}
.tree-children{margin-left:12px;border-left:1px dashed var(--line);padding-left:7px;display:none}
.tree-node.is-open > .tree-children{display:block}
.tree-row .cnt{margin-left:auto;font-size:10.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.tree-row.is-on .cnt{color:var(--gold-ink)}

/* ============================ 对话气泡 ============================ */
.chat{display:flex;flex-direction:column;gap:12px}
.bubble-row{display:flex;gap:9px;max-width:92%}
.bubble-row.user{align-self:flex-end;flex-direction:row-reverse}
.bubble-av{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  font-size:11px;font-weight:700;background:var(--surface-3);color:var(--ink-3);
}
.bubble-row.user .bubble-av{background:var(--nav);color:#fff}
.bubble-row.bot .bubble-av{background:var(--gold-soft);color:var(--gold-ink);border:1px solid var(--gold-line)}
.bubble{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:9px 12px;
  font-size:12.5px;color:var(--ink);line-height:1.65;box-shadow:var(--shadow-1);
}
.bubble-row.user .bubble{background:var(--nav);color:#EEF1F6;border-color:var(--nav)}
.bubble-row.bot .bubble{background:var(--surface)}
.bubble .cantonese{font-size:13.5px}
.bubble-meta{font-size:11px;color:var(--ink-4);margin-top:5px;display:flex;gap:8px;align-items:center}

/* 商品卡 */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.pcard{border:1px solid var(--line);border-radius:9px;padding:8px;background:var(--surface-2);text-align:center}
.pcard-img{height:52px;border-radius:6px;background:linear-gradient(150deg,#F0EDE4,#E4DFD2);margin-bottom:6px;display:grid;place-items:center;color:var(--ink-4)}
.pcard-n{font-size:11.5px;font-weight:650;color:var(--ink);line-height:1.35}
.pcard-p{font-size:12px;font-weight:700;color:var(--gold-ink);font-variant-numeric:tabular-nums;margin-top:2px}
.pcard-r{font-size:11px;color:var(--ink-4)}

/* ============================ Trace 树 ============================ */
.trace{font-size:12px}
.tr-node{border-left:1.5px solid var(--line);padding-left:12px;position:relative;padding-bottom:10px}
.tr-node:last-child{padding-bottom:0}
.tr-node::before{
  content:"";position:absolute;left:-4.5px;top:6px;width:7px;height:7px;border-radius:50%;
  background:var(--surface);border:2px solid var(--gold);
}
.tr-node.is-leaf::before{border-color:var(--ink-4)}
.tr-hd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tr-t{font-weight:650;color:var(--ink);font-size:12.5px}
.tr-ms{font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.tr-note{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.tr-val{font-size:11.5px;color:var(--ink-2);margin-top:3px;padding-left:9px;border-left:2px solid var(--line-2)}
.tr-val b{color:var(--ink);font-weight:650}

/* ============================ 漏斗 ============================ */
.funnel{display:flex;flex-direction:column;gap:7px}
.fn-step{display:flex;align-items:center;gap:10px}
.fn-lbl{width:186px;flex:none;font-size:11.5px;color:var(--ink-2);line-height:1.35}
.fn-track{flex:1;height:16px;background:var(--surface-3);border-radius:4px;overflow:hidden;min-width:60px}
.fn-track i{display:block;height:100%;background:linear-gradient(90deg,#F3E4C3,#FBF6E9);border-right:2px solid var(--gold);border-radius:4px}
.fn-n{width:56px;flex:none;text-align:right;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.fn-excl{font-size:11px;color:var(--ink-3);padding-left:206px;text-indent:-10px;line-height:1.5}

/* ============================ 徽章式状态 ============================ */
.state{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.state.ok{color:var(--ok)}.state.bad{color:var(--bad)}.state.warn{color:var(--warn)}
.state.idle{color:var(--ink-3)}

/* ============================ 提示条 ============================ */
.notice{
  display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:var(--radius-sm);
  font-size:12.5px;line-height:1.6;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);
}
.notice .ico{width:15px;height:15px;margin-top:1px;flex:none}
.notice-ok{background:var(--ok-bg);border-color:var(--ok-line);color:#0B5B42}
.notice-warn{background:var(--warn-bg);border-color:var(--warn-line);color:#6E4E0C}
.notice-bad{background:var(--bad-bg);border-color:var(--bad-line);color:#8C2C1F}
.notice-info{background:var(--info-bg);border-color:var(--info-line);color:#17496E}
.notice-gold{background:var(--gold-soft);border-color:var(--gold-line);color:#6E5518}

/* ============================ 空状态 ============================ */
.empty{padding:32px 16px;text-align:center;color:var(--ink-4);font-size:12.5px}
.empty .ico{width:26px;height:26px;margin:0 auto 8px;opacity:.55}

/* ============================ 触发时机卡（M7 · 吸纳 v4 trig 语言） ============================ */
.trig-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.trig{
  border:1px solid var(--line);border-radius:10px;background:var(--surface-2);
  padding:11px 13px;display:flex;flex-direction:column;gap:4px;
}
.trig .tr-when{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;color:var(--ink)}
.trig .tr-when .ico{width:14px;height:14px;color:var(--gold-ink);flex:none}
.trig .tr-what{font-size:11.5px;color:var(--ink-2);line-height:1.55;flex:1}
.trig .tr-scope{margin-top:3px}

/* ============================ 步进器（M9 点→类→面 · 吸纳 v4 stepper 语言） ============================ */
.stp-row{display:flex;gap:8px;flex-wrap:wrap}
.stp-btn{
  flex:1;min-width:170px;text-align:left;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);padding:10px 13px;display:flex;gap:10px;align-items:flex-start;
  transition:border-color .15s,background .15s;
}
.stp-btn:hover{border-color:var(--gold-line)}
.stp-btn.is-on{background:var(--gold-soft);border-color:var(--gold)}
.stp-num{
  width:22px;height:22px;border-radius:50%;background:var(--surface-3);color:var(--ink-2);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;
  font-variant-numeric:tabular-nums;
}
.stp-btn.is-on .stp-num{background:var(--gold);color:#fff}
.stp-btn .sg-t{font-size:12.8px;font-weight:700;display:block;color:var(--ink)}
.stp-btn .sg-d{font-size:11.5px;color:var(--ink-3);display:block;margin-top:2px;line-height:1.5}
.stp-detail{
  margin-top:12px;border:1px dashed var(--line);border-radius:10px;background:var(--surface-2);
  padding:12px 15px;font-size:12.5px;color:var(--ink-2);line-height:1.75;
}
.stp-detail .sd-title{font-weight:700;color:var(--gold-ink);margin-bottom:4px}
.stp-detail b{color:var(--ink);font-weight:650}

/* ============================ 回流链条（M9 · 吸纳 v4 cycle-chain 语言） ============================ */
.cycle-chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cy{
  font-size:12px;font-weight:650;border:1px solid var(--line);border-radius:8px;padding:4px 11px;
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap;
}
.cy.hot{background:var(--gold);border-color:var(--gold);color:#fff}
.cy-arrow{color:var(--ink-4);font-size:12px;flex:none}

/* ============================ 快速导航（M1 · 问题导向直达，吸纳 v4 助理仪表板语言） ============================ */
.qnav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.qnav-item{
  display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;background:var(--surface-2);text-align:left;width:100%;
  transition:border-color .14s,background .14s;
}
.qnav-item:hover{border-color:var(--gold-line);background:var(--gold-soft)}
.qnav-item .ico{width:15px;height:15px;color:var(--gold-ink);flex:none;margin-top:2px}
.qnav-item .qn-q{font-size:12.8px;font-weight:650;color:var(--ink);display:block}
.qnav-item .qn-a{font-size:11.5px;color:var(--ink-3);display:block;margin-top:1px}
.qnav-item .qn-go{margin-left:auto;align-self:center;color:var(--ink-4);flex:none}
.qnav-item:hover .qn-go{color:var(--gold-ink)}

/* ============================ 迷你图 ============================ */
.spark{display:block;overflow:visible}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}