/* ===== 奖金拆分系统 - 公共样式 ===== */

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #F4F5FB;
  color: #1F2433;
  font-size: 14px;
  line-height: 1.6;
}

/* ===== 数字字体规范（避免 slashed zero） =====
   使用系统字体 + tabular-nums 变体
   数字 0 不带斜线（slashed zero），所有数字等宽对齐 */
.stat-value,
table td.num,
table th.num,
.snapshot-value,
.msg-card-value,
.mtx-total,
.mtx-amt,
.r-amt,
.amount-display .calculated,
.amount-display .original {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' on, 'lnum' on;
}

/* ===== 顶栏 ===== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: #fff;
  border-bottom: 1px solid #E4E7F0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.topbar-brand {
  font-size: 15px;
  font-weight: 600;
  color: #534AB7;
  margin-right: 16px;
  flex-shrink: 0;
  text-decoration: none;
}
.topbar-role-badge {
  font-size: 12px;
  color: #fff;
  background: #534AB7;
  padding: 3px 12px;
  border-radius: 10px;
  font-weight: 500;
  margin-left: auto;
}

/* ===== 登录页 ===== */
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #534AB7;
}
.login-box {
  width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 48px 40px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
.login-box h2 {
  text-align: center;
  margin-bottom: 32px;
  color: #1F2433;
  font-size: 20px;
  font-weight: 600;
}
.login-btn {
  width: 100%;
  padding: 12px;
  background: #534AB7;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 20px;
  transition: all 0.15s;
}
.login-btn:hover { background: #7F77DD; transform: translateY(-1px); }

/* ===== 布局 ===== */
.layout {
  display: flex;
  min-height: calc(100vh - 56px);
  padding-top: 56px;
}
.sidebar {
  width: 200px;
  background: #fff;
  border-right: 1px solid #E4E7F0;
  flex-shrink: 0;
  padding: 8px;
}
.logo {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: #1F2433;
  border-bottom: 1px solid #E4E7F0;
  margin-bottom: 8px;
}
.menu-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
  border-radius: 8px;
  margin: 2px 0;
  transition: all 0.15s;
  text-decoration: none;
  display: block;
}
.menu-item:hover { background: #F4F5FB; color: #534AB7; }
.menu-item.active { background: #534AB7; color: #fff; }
.menu-group {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}
.main-content {
  flex: 1;
  padding: 24px;
  overflow: auto;
  max-width: 1200px;
}

/* ===== 页面头部 ===== */
.page-header { margin-bottom: 20px; }
.page-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1F2433;
  margin-bottom: 4px;
}
.page-header p { color: #6B7280; font-size: 13px; }

/* ===== 面包屑 ===== */
.breadcrumb {
  font-size: 12px;
  color: #9CA3AF;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.breadcrumb a { color: #6B7280; cursor: pointer; text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: #534AB7; }
.breadcrumb .sep { color: #D1D5DB; margin: 0 2px; }
.breadcrumb .current { color: #1F2433; font-weight: 600; }

/* ===== 保存状态 ===== */
.mtx-save-status {
  display: inline-block;
  font-size: 12px;
  color: #3B6D11;
  margin-left: 12px;
  padding: 2px 10px;
  background: #EAF3DE;
  border-radius: 10px;
  font-weight: 500;
  transition: opacity .3s;
}
.mtx-save-status.saving { color: #BA7517; background: #FAEEDA; }

/* ===== 卡片 ===== */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 0;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border: 1px solid #E4E7F0;
  overflow: hidden;
}
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #1F2433;
  padding: 14px 20px;
  border-bottom: 1px solid #E4E7F0;
  background: #FAFBFD;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ===== 按钮 ===== */
.btn {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid #E4E7F0;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #4B5563;
  transition: all 0.15s;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: #F4F5FB; border-color: #C5C8D6; transform: translateY(-1px); }
.btn-primary { background: #534AB7; color: #fff; border-color: #534AB7; }
.btn-primary:hover { background: #7F77DD; border-color: #7F77DD; }
.btn-success { background: #3B6D11; color: #fff; border-color: #3B6D11; }
.btn-success:hover { background: #4A8215; border-color: #4A8215; }
.btn-warning { background: #EF9F27; color: #fff; border-color: #EF9F27; }
.btn-warning:hover { background: #BA7517; border-color: #BA7517; }
.btn-danger { background: #A32D2D; color: #fff; border-color: #A32D2D; }
.btn-danger:hover { background: #C13535; border-color: #C13535; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* ===== 表格 ===== */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 16px; text-align: left; border-bottom: 1px solid #F0F1F5; }
th {
  background: #FAFBFD;
  font-weight: 600;
  color: #6B7280;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
td { color: #1F2433; }
tr:hover td { background: #F8F9FE; }
td.num, th.num { text-align: right; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif; }

/* ===== 标签 ===== */
.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}
.tag-blue { background: #EEEDFE; color: #534AB7; }
.tag-green { background: #EAF3DE; color: #3B6D11; }
.tag-orange { background: #FAEEDA; color: #BA7517; }
.tag-red { background: #FCEBEB; color: #A32D2D; }
.tag-gray { background: #F1EFE8; color: #6B7280; }
.tag-purple { background: #EEEDFE; color: #534AB7; }

/* ===== 表单 ===== */
.form-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.form-item { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.form-item label { font-size: 13px; color: #4B5563; font-weight: 600; }
input, select, textarea {
  padding: 8px 12px;
  border: 1px solid #E4E7F0;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  font-family: inherit;
  transition: all 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #534AB7;
  box-shadow: 0 0 0 3px rgba(83,74,183,0.12);
}

/* ===== 统计卡片 ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  border: 1px solid #E4E7F0;
}
.stat-card.featured { background: #534AB7; border-color: #534AB7; }
.stat-card.featured .stat-label { color: rgba(255,255,255,0.8); }
.stat-card.featured .stat-value { color: #fff; }
.stat-label { font-size: 12px; color: #6B7280; margin-bottom: 6px; font-weight: 500; }
.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #1F2433;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  line-height: 1.2;
}
.stat-value.blue { color: #534AB7; }
.stat-value.green { color: #3B6D11; }
.stat-value.orange { color: #BA7517; }
.stat-value.red { color: #A32D2D; }

/* ===== 进度条 ===== */
.progress-bar { height: 6px; background: #F0F1F5; border-radius: 3px; overflow: hidden; margin-top: 6px; }
.progress-fill { height: 100%; background: #534AB7; border-radius: 3px; transition: width 0.3s; }
.progress-fill.full { background: #3B6D11; }
.progress-fill.over { background: #A32D2D; }

/* ===== 消息卡片 ===== */
.msg-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E4E7F0;
  padding: 20px;
  max-width: 400px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.msg-card-header { font-weight: 600; font-size: 15px; margin-bottom: 12px; color: #1F2433; }
.msg-card-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.msg-card-label { color: #6B7280; }
.msg-card-value { color: #1F2433; font-weight: 500; }
.msg-card-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #F0F1F5; }

/* ===== 高亮提示框 ===== */
.highlight-box {
  background: #EEEDFE;
  border: 1px solid #CECBF6;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 10px;
  font-size: 13px;
  color: #3C3489;
}
.highlight-box.green { background: #EAF3DE; border-color: #C0DD97; color: #27500A; }
.highlight-box.orange { background: #FAEEDA; border-color: #FAC775; color: #633806; }

/* ===== 规则徽章 ===== */
.rule-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 10px; font-size: 12px; font-weight: 500; }
.rule-badge.active { background: #EAF3DE; color: #3B6D11; }
.rule-badge.pending { background: #FAEEDA; color: #BA7517; }

/* ===== 金额展示 ===== */
.amount-display { display: flex; align-items: baseline; gap: 8px; }
.amount-display .original { font-size: 14px; color: #6B7280; text-decoration: line-through; }
.amount-display .calculated { font-size: 20px; font-weight: bold; color: #534AB7; }
.amount-display .rule { font-size: 12px; color: #6B7280; }

/* ===== 子包卡片 ===== */
.sub-package-card { background: #F4F5FB; border-radius: 8px; padding: 16px; margin-bottom: 12px; }
.sub-package-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sub-package-title { font-weight: 500; font-size: 15px; }
.sub-package-status { font-size: 12px; padding: 2px 8px; border-radius: 4px; }

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

/* ===== 矩阵系统样式 ===== */
.mtx-wrap{overflow:auto;border:1px solid #E4E7F0;border-radius:10px;position:relative;max-height:560px}
table.mtx th,table.mtx td{padding:8px 10px;text-align:center;border-bottom:1px solid #F0F1F5;border-right:1px solid #F0F1F5;white-space:nowrap}
table.mtx th{background:#FAFBFD;font-weight:600;color:#6B7280;position:sticky;top:0;z-index:2}
table.mtx th.mtx-name{position:sticky;left:0;z-index:5;background:#FAFBFD;text-align:left;min-width:110px;box-shadow:2px 0 4px rgba(0,0,0,.06)}
table.mtx td.mtx-total{position:sticky;left:110px;z-index:3;background:#fff;min-width:120px;font-weight:700;color:#534AB7;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;box-shadow:2px 0 4px rgba(0,0,0,.06)}
table.mtx th.mtx-total{position:sticky;left:110px;z-index:5;background:#FAFBFD;min-width:120px;box-shadow:2px 0 4px rgba(0,0,0,.06)}
.mtx-month-h{background:#fff!important;color:#1F2433;font-size:13px;font-weight:600;padding:8px 10px;text-align:center}
.mtx-month-h.m2{background:#FCEBEB!important;color:#A32D2D}
.mtx-shop-h{background:#fff!important;color:#1F2433;font-size:13px;font-weight:600}
.mtx-shop-h .alloc{font-size:11px;color:#6B7280;font-weight:400}
.mtx-role-h{background:#FAFBFD!important;font-size:12px;color:#6B7280;font-weight:500}
.mtx-role-h.flex-locked-h{color:#C5C8D6}
.mtx-input{width:60px;padding:5px 8px;border:1px solid #E4E7F0;border-radius:6px;text-align:center;font-size:14px;font-weight:500;transition:all .15s}
.mtx-input:focus{outline:none;border-color:#534AB7;box-shadow:0 0 0 3px rgba(83,74,183,0.12)}
.mtx-flex-col{background:#F8F9FE;color:#C5C8D6;cursor:pointer}
.mtx-flex-col.open{background:#FFF7ED;color:#BA7517}
.mtx-amt{font-size:12px;color:#6B7280;margin-top:2px;min-height:16px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif}
.mtx-amt.has-val{color:#3B6D11;font-weight:600}
.mtx-filled{background:#EAF3DE!important}
.mtx-filled .mtx-input{border-color:#97C459;background:#fff}
.mtx-over .mtx-input{border-color:#A32D2D!important;background:#FCEBEB!important;color:#A32D2D}
.mtx-retain-row td{background:#FAEEDA!important;font-style:italic;color:#BA7517}
.mtx-retain-row td.mtx-name{background:#FAEEDA!important;font-weight:600;color:#633806}
.mtx-retain-row td.mtx-total{background:#FAEEDA!important;color:#BA7517}
.mtx-retain-val{font-size:12px;font-weight:500}
.mtx-retain-val.zero{color:#C5C8D6}
.mtx-month-border{border-left:2px solid #534AB7!important}
.mtx-month-border.m2{border-left:2px solid #A32D2D!important}
.mtx-toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);background:#1F2433;color:#fff;padding:12px 20px;border-radius:10px;font-size:13px;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.15);white-space:pre-line;max-width:520px;line-height:1.6;opacity:0;transition:opacity .3s}
.mtx-modal-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:9998;display:flex;align-items:center;justify-content:center}
.mtx-modal{background:#fff;border-radius:14px;padding:24px;max-width:600px;max-height:80vh;overflow:auto;box-shadow:0 8px 32px rgba(0,0,0,.15)}
.mtx-modal h3{font-size:17px;margin-bottom:6px;color:#1F2433;font-weight:600}
.mtx-modal .sub{font-size:13px;color:#6B7280;margin-bottom:16px}
.mtx-modal-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.mtx-modal-table th{background:#FAFBFD;padding:8px 10px;text-align:left;font-weight:600;color:#6B7280;border-bottom:1px solid #E4E7F0}
.mtx-modal-table td{padding:8px 10px;border-bottom:1px solid #F0F1F5}
.mtx-modal-table .r-amt{color:#BA7517;font-weight:700;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif}
.mtx-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.mtx-shop-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid #E4E7F0;border-radius:20px;cursor:pointer;font-size:13px;transition:all .15s;background:#fff;user-select:none}
.mtx-shop-chip:hover{border-color:#534AB7;box-shadow:0 0 0 3px rgba(83,74,183,0.12)}
.mtx-shop-chip.checked{background:#EEEDFE;border-color:#534AB7;color:#534AB7}
.mtx-shop-chip .amt{font-size:11px;color:#9CA3AF}
.mtx-shop-chip.checked .amt{color:#3B6D11}
.mtx-chip-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1.5px solid #C5C8D6;font-size:11px;color:#fff;flex-shrink:0;transition:all .2s}
.mtx-shop-chip.checked .mtx-chip-check{background:#534AB7;border-color:#534AB7}
.mtx-tpl-info{background:#EAF3DE;border:1px solid #C0DD97;border-radius:8px;padding:10px 14px;margin-top:10px;font-size:12px;color:#3B6D11;line-height:1.6}
.mtx-tpl-info b{color:#1F2433}
.mtx-legend{display:flex;gap:16px;font-size:12px;color:#6B7280;flex-wrap:wrap;align-items:center;margin-top:12px}
.mtx-legend-item{display:flex;align-items:center;gap:4px}
.mtx-legend-dot{width:12px;height:12px;border-radius:2px;display:inline-block}

/* ===== 下钻 Modal ===== */
.drill-modal-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:9998;display:flex;align-items:center;justify-content:center}
.drill-modal{background:#fff;border-radius:14px;padding:24px;max-width:700px;max-height:80vh;overflow:auto;box-shadow:0 8px 32px rgba(0,0,0,.15);width:90%}
.drill-modal h3{font-size:17px;margin-bottom:12px;color:#1F2433;font-weight:600}
.drill-modal .close-btn{float:right;cursor:pointer;font-size:20px;color:#6B7280;border:none;background:none}
.drill-modal .close-btn:hover{color:#1F2433}

/* ===== 老板导航 ===== */
.boss-nav{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}

/* ===== 空状态 ===== */
.empty-state{text-align:center;padding:48px 24px;color:#6B7280}
.empty-state-icon{font-size:32px;margin-bottom:8px;opacity:0.4}
.empty-state-text{font-size:14px}
.empty-state-action{margin-top:12px}

/* ===== 正式版布局（app.js 生成） ===== */
.app-shell{display:flex;flex-direction:column;min-height:100vh}
.app-topbar{position:fixed;top:0;left:0;right:0;height:56px;background:#fff;border-bottom:1px solid #E4E7F0;display:flex;align-items:center;padding:0 24px;z-index:1000;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.app-brand{font-size:15px;font-weight:600;color:#534AB7;margin-right:auto}
.app-topbar-right{display:flex;align-items:center;gap:12px}
.app-role-badge{font-size:12px;color:#fff;background:#534AB7;padding:3px 12px;border-radius:10px;font-weight:500}
.app-btn-logout{padding:4px 12px;font-size:12px;border:1px solid #E4E7F0;border-radius:8px;background:#fff;cursor:pointer;color:#6B7280;transition:all 0.15s}
.app-btn-logout:hover{background:#F4F5FB;color:#A32D2D;border-color:#A32D2D}
.app-body{display:flex;padding-top:56px;min-height:calc(100vh - 56px)}
.app-sidebar{width:200px;background:#fff;border-right:1px solid #E4E7F0;flex-shrink:0;padding:8px}
.app-nav{display:flex;flex-direction:column;gap:2px}
.app-nav-item{padding:8px 12px;font-size:13px;font-weight:500;color:#6B7280;border-radius:8px;text-decoration:none;transition:all 0.15s;display:block}
.app-nav-item:hover{background:#F4F5FB;color:#534AB7}
.app-nav-item.active{background:#534AB7;color:#fff}
.app-main{flex:1;padding:24px;overflow:auto;max-width:1200px}