/* ============================================================
   售后问题闭环系统 · 界面原型设计系统 V0.1
   与送审文档同一色系（白底 / 蓝 #185fa5 主色 / 状态四色）
   ============================================================ */
:root{
  --bg:#f2f3f5; --panel:#ffffff;
  --ink:#1a1a19; --ink-2:#55554f; --ink-3:#8a8a82;
  --line:#e3e2dc; --line-2:#d3d1c7;
  --blue:#185fa5; --blue-soft:#e6f1fb; --blue-line:#b5d4f4;
  --red:#a32d2d; --red-soft:#fcebeb; --red-line:#f09595;
  --amber:#854f0b; --amber-soft:#faeeda; --amber-line:#fac775;
  --green:#3b6d11; --green-soft:#eaf3de; --green-line:#c0dd97;
  --gray-soft:#f1f1ee;
  --radius:10px;
  --sidebar:212px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.65;}
a{color:var(--blue)}

/* ---------- 顶栏 ---------- */
.topbar{height:52px;background:#22303f;color:#fff;display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:5}
.topbar .brand{font-size:15px;font-weight:600;letter-spacing:.5px}
.topbar .brand .ver{font-size:11px;font-weight:400;color:#9fb3c8;margin-left:10px;
  border:1px solid #3d5266;padding:1px 8px;border-radius:10px}
.topbar .uinfo{display:flex;align-items:center;gap:12px;font-size:13px;color:#cfd9e2}
.demo-pill{font-size:11px;color:var(--amber);background:var(--amber-soft);
  border:1px solid var(--amber-line);border-radius:10px;padding:1px 8px}

/* ---------- 布局 ---------- */
.app{display:flex;min-height:calc(100vh - 52px)}
.side{width:var(--sidebar);background:var(--panel);border-right:1px solid var(--line);
  padding:10px 0 30px;flex-shrink:0}
.side .grp{font-size:11px;color:var(--ink-3);padding:16px 20px 4px;letter-spacing:.5px}
.side a{display:block;padding:7px 20px 7px 17px;color:var(--ink-2);text-decoration:none;
  font-size:13.5px;border-left:3px solid transparent}
.side a:hover{background:var(--gray-soft)}
.side a.on{color:var(--blue);border-left-color:var(--blue);background:var(--blue-soft);font-weight:600}
.main{flex:1;padding:20px 26px 40px;min-width:0}

/* ---------- 页头 ---------- */
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.pt{font-size:19px;font-weight:600;margin:0}
.crumb{font-size:12px;color:var(--ink-3);margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- 卡片与栅格 ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:16px}
.card>h3{font-size:14px;font-weight:600;margin:0 0 12px;display:flex;justify-content:space-between;align-items:center}
.card>h3 .sub{font-size:12px;color:var(--ink-3);font-weight:400}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:960px){.g4,.g5,.g3,.g2{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.g4,.g5,.g3,.g2{grid-template-columns:1fr}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.stat .k{font-size:12px;color:var(--ink-3)}
.stat .v{font-size:26px;font-weight:600;line-height:1.25}
.stat .v.red{color:var(--red)} .stat .v.amber{color:var(--amber)} .stat .v.blue{color:var(--blue)}
.stat .d{font-size:11.5px;color:var(--ink-3)}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;font-size:13px;padding:6px 16px;border-radius:7px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);text-decoration:none;line-height:1.6}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:#124a82}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{font-size:12px;padding:3px 10px;border-radius:6px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- 状态标签 ---------- */
.st{display:inline-block;font-size:11.5px;padding:1px 9px;border-radius:11px;white-space:nowrap;
  border:1px solid var(--line-2);background:var(--gray-soft);color:var(--ink-2)}
.st.p0{border-color:var(--red-line);color:var(--red);background:var(--red-soft)}
.st.p1{border-color:var(--amber-line);color:var(--amber);background:var(--amber-soft)}
.st.p2{border-color:var(--line-2);color:var(--ink-2);background:var(--gray-soft)}
.st.run{border-color:var(--blue-line);color:var(--blue);background:var(--blue-soft)}
.st.ok{border-color:var(--green-line);color:var(--green);background:var(--green-soft)}
.st.warn{border-color:var(--amber-line);color:var(--amber);background:var(--amber-soft)}
.st.bad{border-color:var(--red-line);color:var(--red);background:var(--red-soft)}
.st.lock{border-color:var(--line-2);color:var(--ink-3);background:var(--gray-soft);font-size:11px}

/* ---------- 表格 ---------- */
table.tb{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel)}
.tb th,.tb td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.tb th{background:#f7f8f6;font-weight:600;font-size:12px;color:var(--ink-2);white-space:nowrap}
.tb tbody tr:nth-child(even){background:#fcfcfa}
.tb tbody tr:hover{background:var(--blue-soft)}
.tb td.c,.tb th.c{text-align:center;white-space:nowrap}
.tb td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:nowrap}
.tb tr.row-bad td{background:var(--red-soft)}
.red{color:var(--red);font-weight:600}
.amber{color:var(--amber);font-weight:600}
.green{color:var(--green);font-weight:600}
.mut{color:var(--ink-3)}
.tbl-foot{font-size:12px;color:var(--ink-3);margin-top:8px;display:flex;justify-content:space-between}

/* ---------- 状态步进条 ---------- */
.steps{display:flex;margin:6px 0 2px}
.step{flex:1;text-align:center;position:relative;font-size:11.5px;color:var(--ink-3)}
.step .dot{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--line-2);
  margin:0 auto 5px;position:relative;z-index:1}
.step:not(:first-child)::before{content:"";position:absolute;top:7px;left:-50%;width:100%;
  height:2px;background:var(--line-2)}
.step.done .dot{background:var(--green);border-color:var(--green)}
.step.done:not(:first-child)::before{background:var(--green)}
.step.done{color:var(--green)}
.step.cur .dot{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.step.cur{color:var(--blue);font-weight:600}
.step.cur:not(:first-child)::before{background:var(--line-2)}

/* ---------- 字段网格 / 表单 ---------- */
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px}
@media(max-width:960px){.kv{grid-template-columns:1fr 1fr}}
.kv .k{font-size:12px;color:var(--ink-3);margin-bottom:1px}
.kv .v{font-size:13.5px}
.kv .full{grid-column:1/-1}
.form .frow{margin-bottom:14px}
.form label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:5px}
.form label .req{color:var(--red)}
.form input[type=text],.form input[type=date],.form select,.form textarea{
  width:100%;padding:7px 10px;border:1px solid var(--line-2);border-radius:7px;font-size:13.5px;
  font-family:inherit;background:#fff;color:var(--ink)}
.form textarea{min-height:88px;resize:vertical}
.form .hint{font-size:11.5px;color:var(--ink-3);margin-top:4px}
.form .radio{display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px}
.form .radio label{display:inline;margin:0}

/* ---------- 提示条 ---------- */
.hl{border-radius:var(--radius);padding:10px 16px;font-size:12.5px;margin:0 0 16px;border:1px solid}
.hl.info{background:var(--blue-soft);border-color:var(--blue-line);color:#0c447c}
.hl.warn{background:var(--amber-soft);border-color:var(--amber-line);color:#633806}
.hl.bad{background:var(--red-soft);border-color:var(--red-line);color:#791f1f}
.hl b{font-weight:600}

/* ---------- 时间线 ---------- */
.timeline{border-left:2px solid var(--line-2);margin-left:6px;padding-left:18px}
.tl{position:relative;margin-bottom:14px}
.tl::before{content:"";position:absolute;left:-24px;top:5px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--line-2)}
.tl.done::before{background:var(--green);border-color:var(--green)}
.tl.bad::before{background:var(--red);border-color:var(--red)}
.tl .t{font-size:11.5px;color:var(--ink-3)}
.tl .x{font-size:13px}

/* ---------- 条形 ---------- */
.brow{display:grid;grid-template-columns:120px 1fr 52px;gap:10px;align-items:center;font-size:12.5px;margin:7px 0}
.bwrap{background:var(--gray-soft);border-radius:5px;height:10px;overflow:hidden}
.bar{height:100%;border-radius:5px;background:var(--blue)}
.bar.amber{background:#c98a1e} .bar.red{background:var(--red)} .bar.green{background:var(--green)}

/* ---------- 杂项 ---------- */
.split{display:grid;grid-template-columns:2fr 1fr;gap:16px}
@media(max-width:960px){.split{grid-template-columns:1fr}}
.split .rcol .card{margin-bottom:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.check{list-style:none;margin:0;padding:0}
.check li{margin:7px 0;padding-left:26px;position:relative;font-size:13px}
.check li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:4px;
  border:1.5px solid var(--line-2);background:#fff}
.check li.ok{color:var(--ink-2)}
.check li.ok::before{content:"✓";color:#fff;background:var(--green);border-color:var(--green);
  font-size:11px;text-align:center;line-height:14px}
.check li.no{color:var(--ink-3)}
.footer-note{font-size:12px;color:var(--ink-3);margin-top:18px}

/* ---------- 侧栏收缩（app.js 注入开关） ---------- */
.side{transition:width .18s ease;overflow:hidden}
.side a{display:flex;align-items:center;gap:8px;white-space:nowrap}
.side a .ic{width:18px;text-align:center;flex-shrink:0;font-size:13px}
.side-toggle{display:block;width:calc(100% - 24px);margin:2px 12px 8px;padding:5px 0;
  border:1px solid var(--line-2);background:#fff;border-radius:7px;cursor:pointer;
  color:var(--ink-2);font-size:13px;font-family:inherit}
.side-toggle:hover{border-color:var(--ink-3)}
.side.collapsed{width:56px}
.side.collapsed .grp,.side.collapsed a .tx{display:none}
.side.collapsed a{justify-content:center;padding:10px 0}
.side.collapsed .side-toggle{font-size:15px;padding:3px 0}

/* ---------- AI 卡片 / 全局 AI 助手抽屉 ---------- */
.ai-card{background:#fff;border:1px solid var(--blue-line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:16px}
.ai-card>h3{font-size:13.5px;font-weight:600;color:var(--blue);margin:0 0 8px}
.ai-fab{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--blue);color:#fff;border:0;font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 6px 18px rgba(24,95,165,.35);z-index:60;font-family:inherit}
.ai-fab:hover{background:#124a82}
.ai-drawer{position:fixed;top:0;right:-390px;width:366px;height:100vh;background:#fff;
  border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.08);z-index:70;
  transition:right .22s ease;display:flex;flex-direction:column}
.ai-drawer.open{right:0}
.ai-drawer .dhead{padding:13px 16px;border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center}
.ai-drawer .dhead b{font-size:14px}
.ai-drawer .dhead .x{border:0;background:none;font-size:16px;cursor:pointer;color:var(--ink-3)}
.ai-drawer .dbody{padding:16px;overflow-y:auto;flex:1;font-size:13px}
.msg{margin-bottom:12px;padding:10px 12px;border-radius:10px;line-height:1.6}
.msg .who{font-size:11px;color:var(--ink-3);margin-bottom:3px}
.msg.user{background:var(--blue-soft);margin-left:40px}
.msg.bot{background:var(--gray-soft);margin-right:40px}
.ai-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ai-chips span{font-size:12px;border:1px solid var(--blue-line);color:var(--blue);
  border-radius:12px;padding:2px 10px;cursor:pointer;background:#fff}
.ai-chips span:hover{background:var(--blue-soft)}
.ai-note{font-size:11.5px;color:var(--ink-3);padding:10px 16px;border-top:1px solid var(--line);line-height:1.6}