* { box-sizing: border-box; }
body {
  margin: 0; background: #f3f6f8; color: #182430;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 13px;
}
.topbar {
  min-height: 64px; padding: 10px 20px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; background: #12313f; color: #fff;
}
.topbar h1 { margin: 0 0 3px; font-size: 20px; letter-spacing: 0; }
.sub { margin: 0; color: #c9d8e1; }
.actions { display: flex; gap: 8px; }
.hidden { display: none !important; }
.login-panel {
   min-height: calc(100vh - 64px); display: grid; place-items: center; padding: 24px;
}
.login-card {
   width: min(380px, 100%); display: grid; gap: 12px; background: #fff;
   border: 1px solid #dbe3e8; border-radius: 6px; padding: 22px;
}
.login-card h2 { margin: 0; }
.login-card label { display: grid; gap: 5px; color: #53656f; }
.login-card input { width: 100%; }
.login-card button { min-height: 36px; }
.identity { display: grid; gap: 2px; text-align: right; }
.identity strong { font-size: 14px; }
.identity span { color: #c9d8e1; font-size: 12px; }
button, input, select {
  border: 1px solid #b8c5cd; background: #fff; color: #1d2b36;
  border-radius: 4px; padding: 6px 9px; font: inherit; min-height: 30px;
}
button { cursor: pointer; }
button:hover { background: #eaf1f5; }
main { padding: 16px; max-width: 1680px; margin: 0 auto; }
.tabs { display: flex; gap: 6px; margin: 8px 0; }
.tab { border-color: #c7d2d8; background: #e8eef2; }
.tab.active { background: #16716f; border-color: #16716f; color: #fff; }
.panel { display: none; }
.panel.active { display: grid; gap: 10px; }
#orders.active { grid-template-columns: 260px minmax(0, 1fr); }
.column-panel { background: #fff; border: 1px solid #dbe3e8; border-radius: 6px; display: flex; flex-direction: column; max-height: 760px; }
.column-panel-head { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #e3eaee; }
.column-panel-head button { padding: 3px 7px; min-height: 26px; }
.search { display: block; padding: 8px 10px; border-bottom: 1px solid #e3eaee; }
.column-list { overflow: auto; padding: 6px; flex: 1; }
.column-item { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 3px; }
.column-item:hover { background: #edf3f6; }
.column-item label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-area { background: #fff; border: 1px solid #dbe3e8; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filters label { display: flex; align-items: center; gap: 5px; color: #53656f; }
.filters input, .filters select { min-width: 100px; }
.table-wrap { overflow: auto; max-height: 720px; border: 1px solid #e2e8ec; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border-bottom: 1px solid #e4eaee; padding: 6px 8px; text-align: left; white-space: nowrap; }
th { position: sticky; top: 0; background: #eaf1f4; color: #243743; z-index: 2; }
td.number { text-align: right; font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.report { background: #fff; border: 1px solid #dbe3e8; border-radius: 6px; padding: 10px; }
.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.status-card { border: 1px solid #dbe3e8; border-radius: 6px; padding: 12px; background: #f8fbfc; }
.status-card strong { display: block; font-size: 20px; margin-top: 5px; }
.dashboard-panel { gap: 12px; }
.dashboard-periods { display: flex; gap: 6px; flex-wrap: wrap; }
.dashboard-periods span {
  flex: 1 1 240px; align-self: center; color: #53656f; min-height: 30px;
  display: flex; align-items: center; justify-content: flex-end;
}
.period-tab { border-color: #c7d2d8; background: #e8eef2; min-width: 72px; }
.period-tab.active { background: #16716f; border-color: #16716f; color: #fff; }
.period-tab:disabled { cursor: wait; opacity: 0.72; }
#dashboard-month:disabled { cursor: wait; opacity: 0.72; background: #eef3f6; }
#dashboard-month:active { border-color: #16716f; color: #16716f; }
#dashboard-product { min-width: 220px; }
#dashboard-product:disabled { cursor: wait; opacity: 0.72; background: #eef3f6; }
.dashboard { display: none; gap: 10px; }
.dashboard.active { display: grid; gap: 10px; }
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 8px; }
.kpi-card {
  background: #fff; border: 1px solid #dbe3e8; border-left: 4px solid #16716f;
  border-radius: 6px; padding: 10px 12px; min-width: 0;
}
.kpi-card span { display: block; color: #61727d; margin-bottom: 5px; min-height: 34px; }
.kpi-card strong { font-size: 17px; white-space: nowrap; }
.kpi-card.warning { border-left-color: #b3541e; }
.kpi-card.negative { border-left-color: #b42318; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.dashboard-card { display: grid; gap: 8px; min-width: 0; }
.dashboard-card header { display: flex; align-items: center; justify-content: space-between; }
.dashboard-card h3 { margin: 0; font-size: 14px; }
.dashboard-card.wide { grid-column: 1 / -1; }
.dashboard-table { max-height: 330px; }
.dashboard-table th, .dashboard-table td { text-align: center; }
.dashboard-table td.number { font-variant-numeric: tabular-nums; }
.metric-list { display: grid; gap: 8px; }
.metric-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid #e4eaee; padding-bottom: 7px;
}
.metric-row:last-child { border-bottom: none; padding-bottom: 0; }
.metric-row span { color: #53656f; }
.metric-row strong { font-variant-numeric: tabular-nums; }
.toast {
  position: fixed; right: 16px; bottom: 16px; display: none; padding: 10px 14px;
  background: #12313f; color: #fff; border-radius: 4px; z-index: 20;
}
.config-panel { align-content: start; }
.config-block {
  background: #fff; border: 1px solid #dbe3e8; border-radius: 6px; padding: 12px;
  display: grid; gap: 10px;
}
.config-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.config-head strong { font-size: 15px; }
.config-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.formula { color: #53656f; }
.config-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.config-form label { display: flex; align-items: center; gap: 6px; color: #53656f; }
.hint { margin: 0; color: #61727d; }
.rule-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.rule-tools strong { font-size: 14px; color: #243743; }
.rule-tools div { display: flex; gap: 6px; }
.rule-table { max-height: 260px; }
.rule-table input,
.rule-table select { min-width: 96px; }
.overcharge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.overcharge-grid div {
  display: grid; gap: 4px; border: 1px solid #dbe3e8; background: #fbfdfe;
  border-radius: 5px; padding: 9px;
}
.overcharge-grid span { color: #53656f; font-size: 12px; }
.overcharge-grid strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.import-toggle {
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px;
  color: #53656f; white-space: nowrap;
}
.import-toggle input { min-height: auto; }
.import-file {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #b8c5cd; background: #fff; border-radius: 4px; padding: 6px 9px;
  color: #1d2b36; cursor: pointer; white-space: nowrap; font: inherit;
}
.import-file:hover { background: #eaf1f5; }
.import-file input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.sources-panel { align-content: start; }
.source-submit-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.source-controls {
  display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 10px;
}
.source-control-card {
  border: 1px solid #dbe3e8; background: #fbfdfe; border-radius: 6px; padding: 10px;
  display: grid; gap: 8px; align-content: start;
}
.source-control-card header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.scope-list { display: grid; gap: 6px; }
.scope-row {
  display: grid; grid-template-columns: minmax(90px, 1fr) auto auto; gap: 6px; align-items: center;
}
.scope-row .scope-meta { min-width: 0; overflow: hidden; }
.scope-row strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-row span { color: #64757f; font-size: 11px; }
.scope-row button { min-height: 26px; padding: 3px 7px; font-size: 12px; }
.submission-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px;
}
.submission-item {
  display: grid; gap: 3px; border: 1px solid #dbe3e8; border-radius: 5px;
  background: #fff; padding: 8px;
}
.submission-item header {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.submission-item .badge { font-size: 11px; border-radius: 3px; padding: 2px 6px; background: #eef3f6; color: #4d6271; }
.submission-item.done .badge { background: #e6f5ea; color: #20603a; }
.submission-item small { color: #64757f; }
.source-grid {
  display: grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap: 10px;
}
.source-card {
  display: grid; gap: 9px; align-content: start; border: 1px solid #dbe3e8;
  background: #fbfdfe; border-radius: 6px; padding: 10px; min-width: 0;
}
.source-card {
  display: grid; gap: 9px; align-content: start; border: 1px solid #dbe3e8;
  background: #fbfdfe; border-radius: 6px; padding: 10px; min-width: 0;
}
.source-card header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.source-card header span { color: #53656f; white-space: nowrap; }
.source-files { display: grid; gap: 6px; min-height: 48px; }
.source-files p {
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: grid; gap: 2px; color: #263746;
}
.source-files p span { color: #6b7c87; font-size: 11px; }
.source-file-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.source-file-row .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-files .empty { color: #7a8b95; }
.source-upload { width: 100%; }
.source-scope-select { width: 100%; min-height: 30px; }
.source-delete {
  min-height: 24px; padding: 2px 6px; font: inherit; font-size: 11px; flex: 0 0 auto;
  border: 1px solid #d5b5b5; border-radius: 4px; background: #fff6f6; color: #96322d;
  cursor: pointer;
}
.source-delete:hover { background: #ffecec; }
.source-delete:disabled { cursor: wait; opacity: 0.65; }
.source-actions { display: flex; justify-content: flex-end; gap: 8px; }
.source-table { background: #fff; border: 1px solid #e1e7eb; border-radius: 6px; }
@media (max-width: 1100px) {
  #orders.active { grid-template-columns: 1fr; }
  .column-panel { max-height: 240px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .kpi-grid { grid-template-columns: 1fr; }
  .dashboard-periods span { justify-content: flex-start; }
  #dashboard-product { width: 100%; }
  .filters label { width: 100%; }
  .filters input, .filters select { flex: 1; }
  .source-grid { grid-template-columns: 1fr; }
  .source-actions { justify-content: stretch; }
  .source-actions button { flex: 1; }
}