/* 界面规范：参照售后大师的排版 —— 蓝色顶栏 + 白色卡片 + 灰色表头 + 状态签。 */
:root{
  --primary:#4571ff;
  --primary-hover:#3462f0;
  --primary-active:#2a56e0;
  --primary-bg:#f0f5ff;
  --bg:#f0f2f5;
  --card:#fff;
  --text:rgba(0,0,0,.85);
  --text-2:rgba(0,0,0,.65);
  --text-3:rgba(0,0,0,.45);
  --line:#f0f0f0;
  --line-2:#d9d9d9;
  --green:#52c41a;
  --orange:#fa8c16;
  --red:#f5222d;
  --purple:#722ed1;
  --gray:#8c8c8c;
  --radius:4px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--text);
  font:14px/1.5715 "PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-hover)}
h1,h2,h3{margin:0}
input,select,textarea,button{font:inherit;color:inherit}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:stretch;height:48px;background:var(--primary);color:#fff;position:sticky;top:0;z-index:20;padding-left:16px}
.topbar .brand{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;padding-right:24px;white-space:nowrap}
.topbar .brand .dot{width:20px;height:20px;border-radius:4px;background:#fff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.topbar nav{display:flex;align-items:stretch}
.topbar nav a{display:flex;align-items:center;padding:0 16px;color:rgba(255,255,255,.88);white-space:nowrap}
.topbar nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.topbar nav a.on{background:rgba(0,0,0,.14);color:#fff;font-weight:600}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px;padding-right:16px;font-size:13px;color:rgba(255,255,255,.9)}
.topbar .right .who{white-space:nowrap}
.topbar .right a{color:rgba(255,255,255,.9)}
.topbar .right a:hover{color:#fff}
.topbar .right .btn{background:rgba(255,255,255,.16);border-color:transparent;color:#fff}
.topbar .right .btn:hover{background:rgba(255,255,255,.26)}

/* ---------- 页头 / 卡片 ---------- */
.wrap{padding:12px 16px 24px;max-width:1800px;margin:0 auto}
.pagehead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:12px}
.pagehead h1{font-size:18px;font-weight:600}
.pagehead .sub{color:var(--text-3);font-size:13px}
.pagehead .spacer{flex:1}
.pagehead .tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:12px}
.panel.flush{padding:0;overflow:hidden}
.panel > h2{font-size:15px;font-weight:600;margin-bottom:12px;padding-left:10px;position:relative}
.panel > h2::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:2px;background:var(--primary)}
.panel .hint{color:var(--text-3);font-size:12px;line-height:1.7}
.row-between{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* ---------- 按钮 / 表单 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 15px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;color:var(--text);cursor:pointer;white-space:nowrap;transition:.15s}
.btn:hover{border-color:var(--primary);color:var(--primary)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-danger{color:var(--red);border-color:#ffccc7}
.btn-danger:hover{border-color:var(--red);color:var(--red)}
.btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line-2);color:var(--text-2)}
.btn-sm{height:28px;padding:0 10px;font-size:13px}
.input,.select{height:32px;padding:0 10px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;min-width:0}
.input:focus,.select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(69,113,255,.12)}
input[type=date].input{padding:0 8px}
.search{display:flex}
.search .input{border-radius:var(--radius) 0 0 var(--radius);min-width:260px;border-right:0}
.search .input:focus{box-shadow:none}
.search .btn{border-radius:0 var(--radius) var(--radius) 0;background:var(--primary);border-color:var(--primary);color:#fff;padding:0 20px}
.search .btn:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.field{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.field > label{color:var(--text-2);min-width:96px}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:12px}
.toolbar .spacer{flex:1}

/* ---------- 状态签（填充式） ---------- */
.tag{display:inline-block;padding:0 6px;border-radius:2px;font-size:12px;line-height:18px;color:#fff;white-space:nowrap;vertical-align:middle}
.tag-gray{background:var(--gray)}
.tag-blue{background:var(--primary)}
.tag-green{background:var(--green)}
.tag-orange{background:var(--orange)}
.tag-red{background:var(--red)}
.tag-purple{background:var(--purple)}
.tag-jd{background:#e1251b}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;color:var(--text-2);cursor:pointer}
.chip:hover{color:var(--primary);border-color:var(--primary)}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:12px}

/* 时间段：分段控件，选中的那个高亮 */
.seg{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;background:#fff}
.seg button{height:32px;padding:0 14px;border:0;border-left:1px solid var(--line-2);background:#fff;color:var(--text-2);cursor:pointer;white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--primary)}
.seg button.on{background:var(--primary);color:#fff;font-weight:600}

/* 总数徽标 + 筛选摘要 */
.count-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;background:var(--primary-bg);color:var(--primary);font-size:13px;font-weight:600;white-space:nowrap}
.filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fffbe6;border:1px solid #ffe58f;border-radius:var(--radius);padding:8px 14px;margin-bottom:12px;font-size:13px;color:#d46b08}
.filterbar .x{margin-left:auto;background:none;border:0;color:#d46b08;cursor:pointer;font-size:13px;text-decoration:underline}
.panel.loading{opacity:.55;transition:opacity .15s}

/* ---------- 表格 ---------- */
.tablewrap{overflow:auto}
table.table{width:100%;border-collapse:collapse;font-size:14px}
table.table th{background:#f0f2f5;color:var(--text);font-weight:600;text-align:left;white-space:nowrap;padding:12px;border-bottom:1px solid rgba(0,0,0,.06)}
table.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.table tbody tr:hover{background:#fafafa}
table.table tbody tr.sel{background:var(--primary-bg)}
table.table.wide{min-width:1360px}
td.mono,.mono{font-family:ui-monospace,Menlo,Consolas,"Courier New",monospace;white-space:nowrap}
td.addr{max-width:230px;min-width:160px;color:var(--text-2)}
td.ellip{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops{display:flex;align-items:center;gap:0;white-space:nowrap}
.ops > *{color:var(--primary);background:none;border:0;padding:0 8px;cursor:pointer;line-height:1}
.ops > * + *{border-left:1px solid var(--line)}
.ops > *:first-child{padding-left:0}
.empty{padding:48px;text-align:center;color:var(--text-3)}
.banner{padding:10px 16px;border-radius:var(--radius);margin-bottom:12px;font-size:13px}
.banner.ok{background:#f6ffed;color:#389e0d;border:1px solid #b7eb8f}
.banner.warn{background:#fffbe6;color:#d46b08;border:1px solid #ffe58f}
.banner.bad{background:#fff1f0;color:#cf1322;border:1px solid #ffccc7}

/* ---------- 分页 ---------- */
.pager{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:12px 16px;color:var(--text-2);font-size:14px}
.pager button{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line-2);background:#fff;border-radius:var(--radius);cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.bottombar{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border-top:1px solid var(--line);border-radius:0 0 var(--radius) var(--radius);padding:10px 16px;z-index:5}
.bottombar .count{font-weight:600}
.bottombar .spacer{flex:1}

/* ---------- 详情页 ---------- */
.detail-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:12px 16px;margin-bottom:12px}
.detail-head h1{font-size:18px;font-weight:600;white-space:nowrap}
.detail-head .no{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--text-2)}
.detail-head .spacer{flex:1}
.detail-head .tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px}
.kv.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.kv .item{display:flex;gap:8px;font-size:14px;min-width:0;align-items:baseline}
.kv .item .k{color:var(--text-3);flex:0 0 auto;min-width:84px}
.kv .item .v{color:var(--text);word-break:break-word;min-width:0}
.kv .item.wide{grid-column:1/-1}
.inline-act{color:var(--primary);font-size:13px;margin-left:6px;white-space:nowrap}
@media(max-width:1100px){.kv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.kv,.kv.two{grid-template-columns:1fr}}

/* ---------- 右下角待办 ---------- */
.todo{position:fixed;right:16px;bottom:16px;width:300px;background:#fff;border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,.16);z-index:30;overflow:hidden}
.todo .h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600}
.todo .h .x{margin-left:auto;color:var(--text-3);cursor:pointer;background:none;border:0;font-size:14px}
.todo .b{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:13px}
.todo .b .n{color:var(--red);font-weight:600}
.todo .b a{margin-left:auto}

/* ---------- 移动端 ---------- */
@media(max-width:760px){
  .topbar{padding-left:10px}
  .topbar .brand{padding-right:10px;font-size:15px}
  .topbar nav a{padding:0 10px;font-size:13px}
  .wrap{padding:10px 10px 20px}
  .pagehead,.panel,.toolbar,.chips,.detail-head{padding:12px}
  .search .input{min-width:0;flex:1}
}
.card-list{display:none}
@media(max-width:900px){
  .list-desktop{display:none}
  .card-list{display:block;padding:12px}
  .ocard{padding:12px 0;border-bottom:1px solid var(--line)}
  .ocard:last-child{border-bottom:0}
  .ocard .t{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
  .ocard .l{color:var(--text-2);font-size:13px;margin:3px 0}
  .ocard .l b{color:var(--text)}
  .ocard .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
  .ocard .acts .btn{flex:1;min-width:88px}
}

/* ---------- 表单页 / 自检页用的零碎件 ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 24px}
.kvbox .k{color:var(--text-3);font-size:12px}
.kvbox .v{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}
.pill{display:inline-block;padding:0 8px;border-radius:2px;font-size:12px;line-height:18px}
.pill.ok{background:#f6ffed;color:#389e0d;border:1px solid #b7eb8f}
.pill.bad{background:#fff1f0;color:#cf1322;border:1px solid #ffccc7}
.pill.warn{background:#fffbe6;color:#d46b08;border:1px solid #ffe58f}
.result{margin-top:10px;padding:10px 12px;border-radius:var(--radius);font-size:13px;display:none;white-space:pre-wrap}
.result.ok{background:#f6ffed;color:#389e0d;display:block;border:1px solid #b7eb8f}
.result.bad{background:#fff1f0;color:#cf1322;display:block;border:1px solid #ffccc7}
.result.warn{background:#fffbe6;color:#d46b08;display:block;border:1px solid #ffe58f}
.note{color:var(--text-3);font-size:12px;line-height:1.8}
.probe{display:grid;gap:6px;margin-top:10px;font-size:13px}
.probe > div{display:flex;gap:10px;align-items:baseline}
.probe .name{min-width:220px;color:var(--text-3)}
.split{display:flex;gap:28px;flex-wrap:wrap;font-size:13px;color:var(--text-2)}
.split b{color:var(--text);font-size:16px}
@media(max-width:760px){
  .probe .name{min-width:0}
  .grid{grid-template-columns:1fr}
}