/* ============================================================
   BOM格式化工具 — 统一设计系统
   ============================================================ */

/* ---- 设计令牌 ---- */
:root {
  --color-primary: #1976d2;
  --color-primary-hover: #1565c0;
  --color-primary-light: #e3f2fd;
  --color-success: #2e7d32;
  --color-success-light: #e8f5e9;
  --color-warning: #e65100;
  --color-warning-light: #fff3e0;
  --color-danger: #c62828;
  --color-danger-light: #ffebee;

  --color-bg: #f0f2f5;
  --color-surface: #ffffff;
  --color-border: #e0e0e0;

  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-muted: #999999;

  --color-nav-bg: #1a1a2e;
  --color-nav-text: #a0a0b8;

  --radius-sm: 4px;
  --radius-md: 8px;

  --shadow-card: 0 1px 3px rgba(0,0,0,.1);
  --shadow-modal: 0 12px 40px rgba(0,0,0,.15);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-lg: 14px;
  --text-xl: 18px;
  --text-2xl: 20px;

  --font-family: 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
}

/* ---- 基础重置 ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font-family);
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.5;
  min-height:100vh;
}

/* ---- 顶部导航 ---- */
.header{
  background:var(--color-nav-bg);
  color:#fff;
  display:flex;
  align-items:center;
  height:48px;
  padding:0 var(--space-lg);
  position:sticky;
  top:0;
  z-index:100;
}
.header .logo{
  font-size:17px;
  font-weight:700;
  white-space:nowrap;
  color:#fff;
  text-decoration:none;
  margin-right:28px;
  letter-spacing:.5px;
}
.header nav{display:flex;align-items:center;height:100%;gap:0}
.header nav a{
  color:var(--color-nav-text);
  text-decoration:none;
  font-size:13px;
  padding:6px 14px;
  border-bottom:2px solid transparent;
  transition:all .15s;
}
.header nav a:hover{color:#fff}
.header nav a.active{color:#fff;border-bottom-color:#4fc3f7}

/* ---- 内容容器 ---- */
.container{max-width:1400px;margin:0 auto;padding:var(--space-lg)}

/* ---- 页面标题 ---- */
.page-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:var(--space-lg);
  flex-wrap:wrap;
  gap:var(--space-md);
}
.page-title h2,.page-title .title-group h2{font-size:var(--text-xl);font-weight:700;color:var(--color-text);margin:0}
.page-title .sub,.page-title .title-group .sub,.sub{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:2px}

/* ---- 卡片 ---- */
.card{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:var(--space-lg);
  margin-bottom:var(--space-md);
}
.card h2,.card h3{color:var(--color-text);font-weight:600;margin-bottom:var(--space-md);font-size:var(--text-lg)}

/* ---- 按钮 ---- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:6px 14px;
  border:none;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-size:var(--text-sm);
  font-weight:500;
  font-family:inherit;
  background:var(--color-surface);
  color:var(--color-text-secondary);
  text-decoration:none;
  transition:all .15s;
  white-space:nowrap;
  user-select:none;
  line-height:1.3;
  border:1px solid var(--color-border);
}
.btn:hover{background:#f5f5f5}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn-primary:hover{background:var(--color-primary-hover)}

.btn-success{background:var(--color-success);color:#fff;border-color:var(--color-success)}
.btn-success:hover{background:#1b5e20}

.btn-danger{color:var(--color-danger);border-color:#fce8e6;background:#fff}
.btn-danger:hover{background:var(--color-danger-light)}

.btn-outline{background:#fff;color:var(--color-primary);border:1px solid var(--color-primary)}
.btn-outline:hover{background:var(--color-primary-light)}

.btn-ghost{background:transparent;border-color:transparent;color:var(--color-text-secondary)}
.btn-ghost:hover{background:var(--color-bg);color:var(--color-text)}

.btn-sm{padding:3px 10px;font-size:var(--text-xs)}
.btn-xs{padding:2px 6px;font-size:10px}

/* ---- 表单 ---- */
input,select,textarea{
  padding:6px 10px;
  border:1px solid #ddd;
  border-radius:var(--radius-sm);
  font-size:var(--text-sm);
  font-family:inherit;
  background:var(--color-surface);
  color:var(--color-text);
  transition:border-color .15s,box-shadow .15s;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--color-primary);
  box-shadow:0 0 0 2px rgba(25,118,210,.15);
}

.form-group{margin-bottom:var(--space-md)}
.form-group label{display:block;font-size:var(--text-sm);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-xs)}
.form-group input,.form-group select,.form-group textarea{width:100%}

/* ---- 表格 ---- */
table{width:100%;border-collapse:collapse}
th{
  background:#f5f5f5;
  padding:7px 12px;
  text-align:left;
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--color-text-secondary);
  border-bottom:2px solid var(--color-border);
  white-space:nowrap;
  line-height:1.3;
}
td{
  padding:7px 12px;
  border-bottom:1px solid #eee;
  font-size:var(--text-sm);
  color:var(--color-text);
  vertical-align:middle;
  line-height:1.35;
}
tbody tr:hover{background:#f8f9fa}
.table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm)}

/* ---- 标签 ---- */
.tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:var(--text-xs);font-weight:500}
.tag-ok{background:var(--color-success-light);color:var(--color-success)}
.tag-warn{background:var(--color-warning-light);color:var(--color-warning)}
.tag-err{background:var(--color-danger-light);color:var(--color-danger)}
.tag-info{background:var(--color-primary-light);color:var(--color-primary)}
.tag-neutral{background:var(--color-bg);color:var(--color-text-secondary)}

/* ---- 统计卡片 ---- */
.stats{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.stat{
  flex:1;min-width:90px;background:#f5f5f5;
  padding:10px var(--space-md);border-radius:6px;text-align:center;
}
.stat .num{font-size:22px;font-weight:700;color:var(--color-primary);line-height:1.2}
.stat .label{font-size:var(--text-xs);color:var(--color-text-secondary);margin-top:2px;line-height:1.3}

/* ---- 进度条组件 ---- */
.pct-bar-wrap{display:inline-flex;align-items:center;gap:8px}
.pct-bar-track{display:inline-block;width:48px;height:5px;background:#eee;border-radius:3px;overflow:hidden}
.pct-bar-fill{display:block;height:100%;border-radius:3px;transition:width .3s}
.pct-bar-fill.high{background:#34a853}.pct-bar-fill.mid{background:#f9ab00}.pct-bar-fill.low{background:#ea4335}
.pct-num{font-size:12px;font-weight:700;min-width:32px}

/* ---- 模态框 ---- */
.modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  z-index:1000;
  justify-content:center;align-items:center;
  padding:var(--space-lg);
}
.modal-overlay.show{display:flex}
.modal{
  background:var(--color-surface);
  border-radius:var(--radius-md);
  padding:var(--space-lg);
  width:100%;
  max-height:85vh;overflow-y:auto;
  box-shadow:var(--shadow-modal);
}

/* ---- Toast ---- */
.toast{
  position:fixed;top:20px;right:20px;
  padding:10px 18px;border-radius:6px;color:#fff;
  font-size:var(--text-sm);font-weight:500;
  z-index:2000;box-shadow:var(--shadow-modal);
  animation:toastIn .3s;
}
.toast-success{background:var(--color-success)}
.toast-error{background:var(--color-danger)}
.toast-warning{background:var(--color-warning)}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ---- 进度条 ---- */
.progress-bar{display:inline-flex;align-items:center;gap:var(--space-sm)}
.progress-track{display:inline-block;width:48px;height:5px;background:#eee;border-radius:3px;overflow:hidden}
.progress-fill{display:block;height:100%;border-radius:3px;transition:width .3s}
.progress-fill.high{background:var(--color-success)}
.progress-fill.mid{background:#f9ab00}
.progress-fill.low{background:var(--color-danger)}

/* ---- 通用 ---- */
.flex{display:flex;gap:var(--space-sm);align-items:center}
.flex-wrap{flex-wrap:wrap}
.flex-between{justify-content:space-between}
.flex-1{flex:1}
.gap-md{gap:var(--space-md)}
.mb{margin-bottom:var(--space-md)}
.mt{margin-top:var(--space-md)}
.divider{border:none;border-top:1px solid #eee;margin:var(--space-md) 0}
.empty-state{text-align:center;padding:48px var(--space-lg);color:var(--color-text-muted);font-size:var(--text-sm)}

/* ---- 规则表格 ---- */
.rules-table{table-layout:auto;width:100%}
.rules-table th{font-size:var(--text-xs);padding:8px 10px;white-space:nowrap}
.rules-table td{padding:8px 10px;font-size:var(--text-sm);vertical-align:top}
.rules-table code{font-size:var(--text-xs);background:#f0f4f8;padding:2px 6px;border-radius:3px;color:var(--color-primary);white-space:nowrap}
.rules-table tbody tr{border-left:3px solid transparent;transition:border-color .15s}
.rules-table tbody tr:hover{border-left-color:var(--color-primary)}

/* ---- 分页器 ---- */
.pager{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:var(--space-lg);font-size:var(--text-sm)}
.pager .page-btn{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #dadce0;border-radius:6px;cursor:pointer;background:#fff;color:#444;font-size:var(--text-sm);transition:all .15s;user-select:none;padding:0 10px}
.pager .page-btn:hover{background:#f1f3f4;border-color:#bbb}
.pager .page-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary);font-weight:600}
.pager .page-btn:disabled{opacity:.35;pointer-events:none}
.pager .page-info{color:var(--color-text-secondary);margin:0 8px;font-size:var(--text-sm)}
.pager .per-page-select{margin-left:16px;font-size:12px;color:var(--color-text-secondary)}
.pager .per-page-select select{padding:4px 8px;border:1px solid #dadce0;border-radius:4px;font-size:12px;outline:none;margin-left:4px}

/* ---- 滚动条 ---- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}