:root {
  --ink: #354a67;
  --muted: #718199;
  --line: #d4dfed;
  --panel: #ffffff;
  --bg: #edf2f8;
  --nav: #3070c3;
  --nav-strong: #2d6dc0;
  --blue: #4f82c6;
  --blue-deep: #487fc6;
  --blue-soft: #eff4fb;
  --green: #16803c;
  --red: #c83232;
  --money-cny: #8f1d1d;
  --amber: #b36a08;
  --shadow: 0 12px 28px rgba(67, 104, 152, 0.08);
  --ui-page-title-size: 18px;
  --ui-module-title-size: 16px;
  --ui-table-font-size: 15px;
  --ui-button-font-size: 14px;
  --ui-note-font-size: 13px;
  --ui-table-head-height: 32px;
  --ui-table-row-height: 30px;
  --ui-table-total-height: 32px;
  --ui-button-height: 22px;
  --ui-radius: 8px;
  --ui-cell-padding-x: 10px;
  --ui-cell-padding-y: 6px;
  --ui-border-width: 1px;
  --table-row-alt: #f4f7fc;
  --detail-row-line: #dde7f5;
  --layout-sidebar-width: 248px;
  --layout-side-width: 22.5rem;
  --layout-gap: 20px;
  --today-content-width: 888px;
  --today-panel-width: calc(var(--today-content-width) + 20px);
  --monthly-report-content-width: var(--today-content-width);
  --monthly-report-panel-width: var(--today-panel-width);
  --management-panel-width: calc(var(--today-content-width) + 24px);
  --employee-flow-content-width: var(--today-content-width);
  --employee-flow-panel-width: var(--today-panel-width);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", system-ui, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 16px;
  color: #f6f9fd;
  background: linear-gradient(180deg, var(--nav) 0%, var(--nav-strong) 100%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 8px;
  color: var(--nav);
  background: #ffffff;
  font-size: 20px;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.sidebar-footer span {
  color: rgba(246, 249, 253, 0.72);
  font-size: 13px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 11px;
  color: rgba(246, 249, 253, 0.78);
  background: transparent;
  text-align: left;
}

.nav-item.active,
.nav-item:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.13);
}

.nav-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.usdt-nav-image {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.nav-flow-svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar-footer {
  position: absolute;
  right: 16px;
  bottom: 22px;
  left: 16px;
  display: grid;
  justify-items: center;
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sidebar-footer #todayLabel {
  color: rgba(246, 249, 253, 0.82);
  font-size: 18px;
  line-height: 1.25;
  text-align: center;
}

.workspace {
  display: grid;
  justify-items: stretch;
  align-content: start;
  min-width: 0;
  padding: 4px 18px 14px;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--layout-side-width);
  align-items: center;
  gap: var(--layout-gap);
  width: 100%;
  margin-bottom: 6px;
}

.topbar > div:first-child {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: var(--ui-page-title-size);
  line-height: 1.25;
}

h2 {
  margin-bottom: 0;
  font-size: var(--ui-module-title-size);
}

.date-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.date-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 8px 14px;
}

.date-card span {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.date-card strong {
  color: var(--money-cny);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

.view {
  display: none;
}

.view.active {
  display: grid;
  gap: 10px;
  width: 100%;
}

#todayOps.view.active {
  gap: 10px;
  justify-items: start;
}

.ops-layout,
.employee-ledger-shell,
.management-summary-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--layout-side-width);
  align-items: start;
  gap: var(--layout-gap);
  width: 100%;
  max-width: none;
}

.ops-layout {
  grid-template-columns: minmax(0, var(--today-panel-width)) var(--layout-side-width);
  width: min(100%, calc(var(--today-panel-width) + var(--layout-gap) + var(--layout-side-width)));
  max-width: calc(var(--today-panel-width) + var(--layout-gap) + var(--layout-side-width));
}

.operation-panel {
  display: grid;
  gap: 8px;
  justify-items: start;
  width: min(100%, var(--today-panel-width));
  border: var(--ui-border-width) solid #dce5f0;
  border-radius: var(--ui-radius);
  padding: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.date-data-status {
  display: grid;
  gap: 8px;
  width: min(100%, var(--today-content-width));
  border: var(--ui-border-width) solid #b3c6df;
  border-radius: var(--ui-radius);
  padding: 9px 10px;
  background: #d5e0ef;
}

.date-status-line {
  display: grid;
  gap: 4px;
  color: #536b8a;
  font-size: var(--ui-note-font-size);
  line-height: 1.2;
}

.date-status-line span {
  font-weight: 700;
}

.date-status-line small {
  color: #73849c;
  font-size: 12px;
}

.date-chip-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 6px;
}

.date-chip {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: var(--ui-border-width) solid #c2d2e6;
  border-radius: 8px;
  padding: 0 6px;
  color: #3d587c;
  background: #ffffff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.date-chip:hover {
  border-color: #a8bfdd;
  background: #f5f8fd;
}

.date-chip input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #4f82c6;
  cursor: pointer;
}

.date-chip-jump {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.date-chip-jump span,
.date-chip-jump b,
.date-chip-jump em {
  white-space: nowrap;
}

.date-chip b {
  color: #3063a6;
  font-weight: 700;
}

.date-chip em {
  color: #0f6d45;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.date-chip.active {
  border-color: #8eadd6;
  background: #e3ecf8;
}

.date-chip.is-reported {
  border-color: #8eabd1;
  background: #eaf0f8;
}

.date-chip.is-selected {
  border-color: #4f82c6;
  background: #e1ebf8;
  box-shadow: inset 0 0 0 1px rgba(79, 130, 198, 0.18);
}

.date-chip.is-empty {
  color: #718199;
}

.date-chip.is-empty b {
  color: #8a98aa;
}

.date-report-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.date-report-button {
  height: 40px;
  border: 1px solid #c0d3eb;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.date-report-button:not(:disabled):hover {
  background: #f0f5fc;
}

.date-report-button:disabled {
  color: #94a3b8;
  background: #f4f7fa;
}

.date-report-button.muted {
  color: #5b6d84;
}

#todayOps.is-history-readonly .ops-side {
  display: none;
}

#todayOps.is-history-readonly .date-report-actions {
  display: none;
}

.history-entry-details {
  color: #60758a;
  font-size: 11px;
  font-weight: 500;
}

#todayOps.is-history-readonly [data-edit-entry],
#todayOps.is-history-readonly [data-delete-entry],
#todayOps.is-history-readonly [data-edit-employee-usdt-down],
#todayOps.is-history-readonly [data-delete-employee-usdt-down],
.is-history-month-view #monthlyDetailModal [data-edit-monthly-usdt-down],
.is-history-month-view #monthlyDetailModal [data-delete-monthly-usdt-down],
.is-history-month-view #monthlyDetailModal [data-save-monthly-usdt-down],
.is-history-month-view #monthlyDetailModal [data-add-monthly-usdt-down],
.is-history-month-view #monthlyDetailModal [data-save-monthly-note],
.is-history-month-view #monthlyDetailModal [data-delete-monthly-note],
.is-history-month-view #monthlyDetailModal [data-delete-record-type],
.is-history-month-view #monthlyDetailModal [data-move-record-type],
.is-history-month-view #monthlyDetailModal [data-move-monthly-note] {
  display: none;
}

.ledger-sections {
  display: grid;
  gap: 10px;
  width: min(100%, var(--today-content-width));
}

.ledger-section {
  overflow: hidden;
  border: var(--ui-border-width) solid #abc2e1;
  border-radius: var(--ui-radius);
  background: #ffffff;
}

.ledger-section.employee-transfer .ledger-title {
  background: #b66b08;
}

.ledger-title {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 var(--ui-cell-padding-x);
  color: #ffffff;
  background: #4f82c6;
  font-size: var(--ui-module-title-size);
  font-weight: 700;
}

.ledger-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 34px;
  padding: 4px var(--ui-cell-padding-x);
  color: #687e9a;
  font-size: 12px;
  white-space: nowrap;
}

.ledger-pagination button {
  min-height: 25px;
  padding: 2px 9px;
  border: 1px solid #c0d3eb;
  border-radius: 6px;
  background: #f8fbfe;
  color: #3467aa;
  font: inherit;
  cursor: pointer;
}

.ledger-pagination button:disabled {
  opacity: 0.45;
  cursor: default;
}

.ledger-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.ledger-table th,
.ledger-table td {
  height: var(--ui-table-row-height);
  border-right: var(--ui-border-width) solid #c0d3eb;
  border-bottom: var(--ui-border-width) solid #c0d3eb;
  padding: var(--ui-cell-padding-y) var(--ui-cell-padding-x);
  color: #354a67;
  background: #ffffff;
  font-size: var(--ui-table-font-size);
  font-weight: 400;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
}

.ledger-table tbody td {
  background: #ffffff;
}

.ledger-table tbody tr:nth-child(odd of :not(.total-row)) td {
  background: #ffffff;
}

.ledger-table tbody tr:nth-child(even of :not(.total-row)) td {
  background: var(--table-row-alt);
}

.ledger-table th:nth-child(1),
.ledger-table td:nth-child(1) {
  width: 96px;
}

.ledger-table th:nth-child(2),
.ledger-table td:nth-child(2) {
  width: 320px;
  text-align: left;
  padding-left: var(--ui-cell-padding-x);
}

.ledger-table tbody td:nth-child(2) {
  overflow: hidden;
  text-overflow: clip;
}

.ledger-table th:nth-child(3),
.ledger-table td:nth-child(3) {
  width: 116px;
}

.ledger-table th:nth-child(4),
.ledger-table td:nth-child(4) {
  width: 116px;
}

.ledger-table th:nth-child(5),
.ledger-table td:nth-child(5) {
  width: 116px;
}

.ledger-table th:last-child,
.ledger-table td:last-child {
  width: 124px;
  border-right: 0;
}

.employee-usdt-down-ledger .ledger-table th:nth-child(2),
.employee-usdt-down-ledger .ledger-table td:nth-child(2) {
  width: 96px;
  padding-left: var(--ui-cell-padding-x);
  text-align: center;
  vertical-align: middle;
}

.employee-usdt-down-ledger .ledger-table th:nth-child(3),
.employee-usdt-down-ledger .ledger-table td:nth-child(3) {
  width: auto;
  overflow: hidden;
  text-align: left;
  text-overflow: clip;
}

.employee-usdt-down-ledger .ledger-table th:nth-child(1),
.employee-usdt-down-ledger .ledger-table td:nth-child(1) {
  width: 96px;
}

.employee-usdt-down-ledger .ledger-table th:nth-child(4),
.employee-usdt-down-ledger .ledger-table td:nth-child(4) {
  width: 116px;
}

.employee-usdt-down-ledger .ledger-table th:nth-child(5),
.employee-usdt-down-ledger .ledger-table td:nth-child(5) {
  width: 116px;
}

.employee-usdt-down-ledger .ledger-table th:nth-child(6),
.employee-usdt-down-ledger .ledger-table td:nth-child(6) {
  width: 116px;
  overflow: visible;
  text-align: center;
}

.employee-usdt-down-ledger .ledger-table th:last-child,
.employee-usdt-down-ledger .ledger-table td:last-child {
  width: 124px;
}

.employee-usdt-down-ledger .employee-usdt-down-status-cell {
  overflow: visible;
  padding: 3px 4px;
  vertical-align: middle;
}

.employee-usdt-down-status-line {
  display: flex;
  min-height: 16px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
}

.employee-usdt-down-status-line .monthly-note-status {
  min-width: 34px;
  min-height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 14px;
}

.employee-usdt-down-status-line .wallet-transfer-status {
  margin-top: 0;
  color: #6f7f91;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
}

.employee-usdt-down-ledger tr.is-pending-usdt-down td:nth-child(4),
.employee-usdt-down-ledger tr.is-pending-usdt-down td:nth-child(5) {
  color: #087955;
  font-weight: 800;
}

.employee-usdt-down-ledger .ledger-title {
  background: #3f72b5;
}

.ledger-table tbody td:last-child {
  padding-top: 3px;
  padding-bottom: 3px;
}

.ledger-table thead th {
  height: var(--ui-table-head-height);
  color: #3363a2;
  background: #f0f5fc;
  font-size: var(--ui-table-font-size);
  font-weight: 400;
}

.ledger-table .empty-cell {
  height: var(--ui-table-row-height);
  color: #66758b;
  background: #ffffff;
  text-align: center;
  font-size: var(--ui-table-font-size);
  font-weight: 400;
}

.ledger-table .total-label {
  color: #2e61a2;
  font-size: var(--ui-table-font-size);
  font-weight: 700;
  text-align: left;
}

.ledger-table .total-row td {
  height: var(--ui-table-total-height);
  border-top: var(--ui-border-width) solid #c0d3eb;
  border-right: var(--ui-border-width) solid #c0d3eb;
  color: #2e61a2;
  background: #f5f8fd;
  font-size: var(--ui-table-font-size);
  font-weight: 700;
}

.ledger-table .total-row td:last-child {
  border-right: 0;
}

.amount-positive {
  color: var(--money-cny);
}

.amount-negative {
  color: var(--money-cny);
}

.auto-fit-text {
  max-width: 100%;
  white-space: nowrap !important;
}

.auto-fit-text.is-auto-fit-complete {
  overflow: hidden;
  text-overflow: clip !important;
}

.auto-fit-text.is-auto-fit-overflow {
  overflow: hidden;
  text-overflow: ellipsis !important;
}

/* 员工结算单：桌面端一屏紧凑布局（仅展示层） */
@media (min-width: 1200px) {
  .monthly-detail-modal.is-employee-ledger-detail {
    padding: 6px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog {
    width: min(1320px, calc(100vw - 12px));
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head {
    gap: 6px;
    padding: 5px 8px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head > div {
    gap: 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-body {
    gap: 4px;
    padding: 5px 6px;
    overflow: hidden;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-section h3 {
    padding: 2px 8px;
    font-size: 14px;
    line-height: 19px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-card-grid {
    gap: 4px;
    padding: 4px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid .employee-detail-mini-card {
    min-height: 38px;
    gap: 6px;
    padding: 3px 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid .employee-detail-mini-card > span,
  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid .employee-detail-mini-card-value {
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid .employee-detail-mini-card .employee-detail-input-wrap {
    height: 25px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-grid {
    gap: 5px;
    padding: 4px 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block h4,
  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block h4 {
    min-height: 24px;
    padding: 2px 8px;
    font-size: 14px;
    line-height: 19px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-line {
    box-sizing: border-box;
    min-height: 23px;
    height: 23px;
    gap: 5px;
    padding: 1px 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-line span,
  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-line b,
  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-line strong,
  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-amount {
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-input-wrap {
    height: 24px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-salary-offset-panel {
    gap: 4px;
    margin: 0 5px 4px;
    padding: 3px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-salary-offset-title,
  .monthly-detail-modal.is-employee-ledger-detail .employee-salary-offset-step {
    min-height: 27px;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
    padding: 3px 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-side-stack {
    gap: 4px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-unified-flow-row,
  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-usdt-down-flow-row {
    min-height: 23px;
    height: 23px;
    padding-block: 0;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-unified-flow-row > *,
  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-usdt-down-flow-row > * {
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .monthly-dialog-empty {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-total-line,
  .monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-total-line {
    min-height: 23px;
    height: 23px;
    padding-block: 1px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel {
    gap: 4px;
    margin-bottom: 4px;
    padding: 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-summary {
    gap: 4px 9px;
    font-size: 11px;
    line-height: 15px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form {
    gap: 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label {
    gap: 1px;
    font-size: 11px;
    line-height: 14px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form select,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form input,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount b,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form > button {
    height: 27px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form > button {
    padding-inline: 10px;
    font-size: 11px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel > p,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-empty {
    display: none;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-history {
    gap: 2px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-history-row {
    min-height: 22px;
    padding: 1px 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-transfer-net-note {
    display: none;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-summary-section .employee-detail-panel {
    gap: 0;
    padding: 4px 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-overview-grid {
    gap: 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card {
    grid-template-rows: max-content 25px;
    gap: 1px;
    min-height: 45px;
    padding: 3px 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card > span,
  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card-value {
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card-value {
    height: 25px;
    padding-inline: 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-actions {
    min-height: 30px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-save-button {
    height: 30px;
    min-width: 100px;
    font-size: 14px;
  }
}

.ledger-table td.amount-positive,
.ledger-table td.amount-negative {
  color: var(--money-cny);
}

.ledger-table .total-row td,
.ledger-table .total-row .total-amount {
  color: #2e61a2;
  background: #f5f8fd;
}

.ledger-table .total-row .total-amount.amount-positive,
.ledger-table .total-row .total-amount.amount-negative {
  color: var(--money-cny);
  font-weight: 400;
}

#topNetCny {
  color: #354a67;
}

.ledger-actions {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ledger-action {
  min-width: 44px;
  height: var(--ui-button-height);
  border: var(--ui-border-width) solid #ccd8e7;
  border-radius: var(--ui-radius);
  padding: 0 8px;
  color: #354a67;
  background: #ffffff;
  font-size: var(--ui-button-font-size);
  font-weight: 400;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(204, 216, 231, 0.3);
}

.ledger-action:hover {
  border-color: #a2b8d4;
  color: #2b69b9;
  background: #f6f9fd;
}

.balance-summary-panel {
  width: min(100%, var(--today-content-width));
  overflow: hidden;
  border: 1px solid #abc2e1;
  border-radius: 8px;
  background: #f4f8fc;
}

.daily-note-panel {
  width: min(100%, var(--today-content-width));
  overflow: hidden;
  border: 1px solid #abc2e1;
  border-radius: 8px;
  background: #fcfdfe;
}

.balance-note-row,
.balance-calc-row {
  display: grid;
  grid-template-columns: 96px repeat(5, minmax(0, 1fr) 12px) minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 3px;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border-bottom: 1px solid #abc2e1;
  padding: 6px 8px;
}

.balance-note-row {
  grid-template-columns: 96px minmax(0, 1fr);
}

.balance-row-label {
  align-self: stretch;
  display: grid;
  place-items: center;
  margin: -6px 3px -6px -8px;
  border-right: 1px solid #abc2e1;
  color: #354a67;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.balance-note-row input {
  border: 0;
  color: #2c6abc;
  background: transparent;
  font-size: 15px;
}

.balance-box {
  display: grid;
  min-width: 0;
  height: 38px;
  border: 1px solid #cdd8e6;
  border-radius: 8px;
  padding: 4px 6px;
  background: #ffffff;
  text-align: center;
}

.balance-box.titleless {
  align-items: center;
}

.balance-box span {
  overflow: hidden;
  color: #576c87;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balance-box div {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  height: 28px;
  color: #354a67;
  font-size: 15px;
  line-height: 1.2;
}

.balance-box strong,
.balance-box input {
  width: auto;
  min-width: 0;
  appearance: textfield;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.balance-box input {
  width: min(8.5ch, 100%);
  height: 24px;
  font-size: var(--ui-table-font-size);
  line-height: 24px;
}

#balanceUsdtTotal,
#balanceThbTotal {
  color: #354a67;
  font-size: var(--ui-table-font-size);
  font-weight: 700;
}

#balanceUsdtCombinedOutflow {
  font-weight: 400;
}

#balanceUsdtCny,
#balanceThbCny {
  color: #9b3a3a;
  font-size: var(--ui-table-font-size);
  font-weight: 400;
}

.balance-box input::-webkit-outer-spin-button,
.balance-box input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

#balanceUsdtIncome,
#balanceCompanyUsdtIncome,
#balanceUsdtIncomeCombined,
#balanceUsdtExpense,
#balanceUsdtAdvance,
#balanceThbIncome,
#balanceThbAdvance,
#balanceThbPurposeExpense {
  font-weight: 400;
}

.balance-box b {
  flex: 0 0 auto;
  font-size: var(--ui-table-font-size);
}

#balanceUsdtTotal + b,
#balanceThbTotal + b {
  color: #354a67;
  font-size: var(--ui-table-font-size);
  font-weight: 700;
}

.balance-box.is-cny input,
.balance-box.is-cny b {
  color: var(--money-cny);
  font-weight: 400;
}

.balance-box.is-negative-value input,
.balance-box.is-negative-value b {
  color: #12613a;
}

.balance-op {
  display: grid;
  place-items: center;
  color: #7b8da5;
  font-size: var(--ui-table-font-size);
  font-weight: 600;
}

.balance-op.plus {
  color: #7b8da5;
}

.balance-op.minus {
  color: #7b8da5;
}

.balance-op.equal {
  color: #7b8da5;
}

.balance-save-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  padding: 8px;
  background: #fcfdfe;
}

.balance-save-row span {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}

.balance-save-note {
  display: contents;
  align-items: center;
  min-width: 0;
  gap: 16px;
  color: #354a67;
  font-size: 15px;
  font-weight: 400;
}

.balance-save-note span {
  display: grid;
  align-self: stretch;
  place-items: center;
  margin: -8px 4px -8px -8px;
  border-right: 1px solid #abc2e1;
  color: #354a67;
  font-size: 15px;
  font-weight: 400;
}

.balance-save-note input {
  align-self: center;
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  color: #2c6abc;
  background: transparent;
  font-size: 15px;
  outline: none;
}

/* 今日运营：两个录入入口共用的币种防误选选择器（仅展示层） */
.ops-type-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.ops-type-select select {
  display: block;
  height: 35px;
  -webkit-appearance: none;
  appearance: none;
  padding-left: 46px;
  padding-right: 34px;
  color: var(--ink);
}

.ops-type-select::after {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #5d7492;
  border-bottom: 2px solid #5d7492;
  content: "";
  pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
}

.ops-type-select:has(option[value="auto"]:checked) select {
  padding-left: 12px;
}

.ops-type-select .ops-type-badge {
  position: absolute;
  top: 50%;
  left: 9px;
  display: none;
  width: 22px;
  height: 18px;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid currentColor;
  border-radius: 5px;
  background: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 16px;
  pointer-events: none;
}

.ops-type-select:has(option:is(
  [value="usdtIncome"],
  [value="companyUsdtIncome"],
  [value="companyUsdtExpense"],
  [value="employeeUsdtAdvance"],
  [value="employeeUsdtDown"]
):checked) .ops-type-badge.is-usdt {
  display: inline-flex;
  color: #3275cb;
}

.ops-type-select:has(option:is(
  [value="thbIncome"],
  [value="employeeThbAdvance"],
  [value="thbPurposeExpense"]
):checked) .ops-type-badge.is-thb {
  display: inline-flex;
  color: #087955;
}

.ops-type-select:has(option[value="companyCnyIncome"]:checked) .ops-type-badge.is-cny {
  display: inline-flex;
  color: #3275cb;
}

.ops-type-select:has(option:is(
  [value="usdtIncome"],
  [value="companyUsdtIncome"],
  [value="companyUsdtExpense"],
  [value="employeeUsdtAdvance"],
  [value="employeeUsdtDown"]
):checked) select {
  border-color: #abc2e1;
}

.ops-type-select:has(option:is(
  [value="thbIncome"],
  [value="employeeThbAdvance"],
  [value="thbPurposeExpense"]
):checked) select {
  border-color: #9bcfbb;
}

.ops-type-select optgroup.ops-type-group-usdt,
.ops-type-select optgroup.ops-type-group-usdt option {
  color: #3275cb;
}

.ops-type-select optgroup.ops-type-group-thb,
.ops-type-select optgroup.ops-type-group-thb option {
  color: #087955;
}

.balance-box input:focus {
  border: 0;
  box-shadow: none;
}

.balance-save-button {
  min-width: 116px;
  height: 30px;
  border: var(--ui-border-width) solid #ccd8e7;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 14px;
  font-weight: 400;
  box-shadow: inset 0 0 0 1px rgba(204, 216, 231, 0.3);
}

.balance-save-button:hover {
  border-color: #a2b8d4;
  color: #2b69b9;
  background: #f6f9fd;
}

.settings-actions {
  display: grid;
  gap: 8px;
}

.settings-action-button {
  width: 100%;
  min-width: 0;
  height: 40px;
}

.settings-actions .settings-action-button {
  height: 40px;
}

.entry-form {
  display: grid;
  gap: 8px;
}

.entry-category-wrap.is-hidden,
.entry-employee-wrap.is-hidden,
.expense-treatment-wrap.is-hidden,
.entry-usdt-down-wallet-fields.is-hidden,
.entry-usdt-down-wallet-transfer.is-hidden {
  display: none;
}

.entry-usdt-down-wallet-fields {
  display: grid;
  gap: 8px;
  border: 1px solid #c0d3eb;
  border-radius: 8px;
  padding: 8px;
  background: #f5f8fd;
}

.entry-usdt-down-wallet-transfer {
  display: grid;
  gap: 8px;
}

.entry-usdt-down-wallet-fields > small {
  color: #52667e;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.wallet-transfer-status {
  display: block;
  margin-top: 3px;
  color: #6a7583;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.wallet-transfer-status.is-transferred {
  color: #087955;
}

label {
  display: grid;
  gap: 4px;
  color: #586d89;
  font-size: var(--ui-note-font-size);
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: var(--ui-border-width) solid #d9e1ec;
  border-radius: var(--ui-radius);
  padding: 5px var(--ui-cell-padding-x);
  color: var(--ink);
  background: #ffffff;
  font-size: var(--ui-table-font-size);
  outline: none;
}

textarea {
  font-size: var(--ui-note-font-size);
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(73, 134, 212, 0.12);
}

.entry-date-field {
  display: grid;
  gap: 4px;
  color: #586d89;
  font-size: var(--ui-note-font-size);
  font-weight: 700;
}

.entry-date-control {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  border: var(--ui-border-width) solid #d9e1ec;
  border-radius: var(--ui-radius);
  background: #fff;
}

.entry-date-control:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(73, 134, 212, 0.12);
}

.entry-date-control #entryDateDisplay {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  box-shadow: none;
  font: inherit;
  font-size: var(--ui-table-font-size);
  font-weight: 700;
}

.entry-date-control #entryDatePickerButton {
  flex: 0 0 42px;
  height: 38px;
  border: 0;
  border-left: 1px solid #d9e1ec;
  border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
  color: #5b789e;
  background: #f8fbfe;
  font-size: 22px;
  cursor: pointer;
}

.entry-date-calendar {
  position: fixed;
  z-index: 2000;
  box-sizing: border-box;
  width: min(192px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: 7px;
  border: 1px solid #aac0dc;
  border-radius: 9px;
  color: #325179;
  background: #fff;
  box-shadow: 0 12px 34px rgb(23 60 100 / 22%);
}

.entry-date-calendar[hidden] { display: none !important; }

.entry-date-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: 400;
}

.entry-date-calendar-header button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #cddaec;
  border-radius: 6px;
  color: #3a67a1;
  background: #f5f8fd;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.entry-date-calendar-weekdays,
.entry-date-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.entry-date-calendar-weekdays {
  margin-bottom: 3px;
  color: #61758c;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
}

.entry-date-calendar-weekdays span { padding: 4px 0; }

.entry-date-calendar-days button {
  display: grid;
  place-items: center;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #39567c;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}

.entry-date-calendar-days button:hover,
.entry-date-calendar-days button:focus-visible {
  border-color: #a7bfde;
  background: #f0f5fc;
}

.entry-date-calendar-days button.is-other-month { color: #9ba8b5; }
.entry-date-calendar-days button.is-today { border-color: #84a4cd; }
.entry-date-calendar-days button.is-selected {
  color: #fff;
  background: #4380cf;
  font-weight: 400;
}

.ledger-first-charge {
  color: #c92335;
}

.primary-button,
.danger-button,
.soft-button,
.light-button {
  min-height: 30px;
  height: 30px;
  border-radius: var(--ui-radius);
  padding: 0 10px;
  font-size: var(--ui-button-font-size);
  font-weight: 800;
}

.primary-button {
  border: 0;
  color: #ffffff;
  background: var(--blue);
}

.danger-button {
  border: 1px solid #f0b4b4;
  color: var(--red);
  background: #fff6f6;
}

.soft-button {
  border: 0;
  color: #4986d4;
  background: #ebf2fc;
}

.light-button {
  border: 0;
  color: #4986d4;
  background: #ebf2fc;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
  white-space: nowrap;
}

th {
  color: #526174;
  background: #f9fafb;
  font-size: 13px;
}

td {
  font-size: 14px;
}

tr:last-child td {
  border-bottom: 0;
}

.empty-row {
  color: var(--muted);
  text-align: center;
}

.delete-row {
  border: 0;
  color: var(--red);
  background: transparent;
  font-weight: 800;
}

.ops-side {
  display: grid;
  width: 100%;
  gap: 0;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.side-panel {
  display: grid;
  gap: 9px;
  padding: 0 0 10px;
}

.side-panel + .side-panel {
  border-top: 0;
  padding-top: 0;
}

.side-divider {
  height: 1px;
  margin-bottom: 4px;
  background: #dce4ee;
}

.batch-panel .side-divider {
  display: none;
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.side-head h2 {
  margin: 0;
  color: #354a67;
  font-size: var(--ui-module-title-size);
  font-weight: 900;
  line-height: 1.2;
}

.side-head span {
  color: #64748b;
  font-size: var(--ui-button-font-size);
  font-weight: 800;
}

.side-head.compact {
  margin-top: 2px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 0;
  padding: 4px var(--ui-cell-padding-x) 8px;
}

.side-head.compact.page-header {
  margin-top: 0;
}

.page-header h2,
.page-header h3 {
  margin: 0;
  color: #354a67;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.page-header span {
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.operation-panel > .page-header,
.employee-ledger-panel > .page-header,
.management-summary-panel > .page-header {
  width: var(--today-content-width);
}

.monthly-report-panel > .page-header {
  width: var(--monthly-report-content-width);
}

.employee-flow-panel > .page-header {
  width: var(--employee-flow-content-width);
}

.employee-ledger-panel > .side-head:not(.page-header),
.management-head:not(.page-header) {
  padding: 0 var(--ui-cell-padding-x);
}

.batch-panel textarea {
  min-height: 116px;
}

.settings-panel {
  gap: 10px;
  padding-bottom: 0;
}

.ops-side .soft-button,
.ops-side .balance-save-button {
  width: 100%;
  min-height: 36px;
  height: 36px;
  border: 1px solid #9cb7db;
  border-radius: 8px;
  color: #2b69b9;
  background: #f0f5fc;
  font-size: 14px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(156, 183, 219, 0.18);
}

.ops-side .soft-button:hover,
.ops-side .balance-save-button:hover {
  border-color: #4f82c6;
  color: #265da4;
  background: #e3ecf7;
}

.ops-side .entry-form .soft-button {
  min-height: 38px;
  height: 38px;
}

.ops-side .light-button {
  min-height: 28px;
  height: 28px;
  border: 1px solid #cddaec;
  border-radius: 8px;
  padding: 0 10px;
  color: #4986d4;
  background: #f0f5fc;
  font-size: 13px;
  font-weight: 800;
}

.ops-side .light-button:hover {
  border-color: #9cb7db;
  color: #2b69b9;
  background: #e3ecf7;
}

.monthly-panel {
  display: grid;
  gap: 10px;
  width: min(100%, var(--today-content-width));
  border: 1px solid #dce5f0;
  border-radius: 8px;
  padding: 10px;
  background: #d5e0ef;
}

.monthly-summary-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.monthly-summary-group {
  display: grid;
  overflow: hidden;
  border: 1px solid #b3c6df;
  border-radius: 8px;
  background: #f5f8fd;
}

.monthly-note-card .monthly-group-head > div {
  flex: 1 1 auto;
  width: 0;
}

.monthly-note-card .monthly-note-preview {
  width: 100%;
}

.monthly-note-card .monthly-note-preview-line {
  display: block;
  width: 100%;
  line-height: 21px;
}

.monthly-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  background: #f5f8fd;
}

.monthly-group-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.monthly-group-head strong {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.monthly-note-preview {
  display: block;
  max-height: 21px;
  overflow: hidden;
  white-space: nowrap;
}

.monthly-note-preview-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-group-head span {
  color: #586d89;
  font-size: 14px;
  font-weight: 400;
}

.monthly-group-head strong,
.monthly-detail-row strong {
  color: #354a67;
}

.monthly-group-head .monthly-usdt-down-card-summary {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.monthly-usdt-down-card-summary > span,
.monthly-usdt-down-card-summary > em {
  flex: 0 0 auto;
}

.monthly-group-head .monthly-usdt-down-card-summary > em {
  margin: 0 3px;
}

.monthly-usdt-down-card-summary > .is-pending-part {
  flex: 0 1 auto;
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: inherit;
  line-height: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-detail-toggle {
  flex: 0 0 auto;
  height: 24px;
  min-width: 48px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 13px;
  font-weight: 400;
}

.employee-ledger-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--today-panel-width)) var(--layout-side-width);
  align-items: start;
  gap: var(--layout-gap);
  width: min(100%, calc(var(--today-panel-width) + var(--layout-gap) + var(--layout-side-width)));
  max-width: calc(var(--today-panel-width) + var(--layout-gap) + var(--layout-side-width));
  margin-top: 0;
}

.employee-ledger-panel {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(67, 104, 152, 0.06);
}

.employee-ledger-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.employee-ledger-head h2,
.employee-ledger-month-picker,
.employee-ledger-search-tools {
  flex: none;
}

@media (max-width: 760px) {
  .employee-ledger-head,
  .employee-ledger-header-actions {
    flex-wrap: wrap;
  }
}

.employee-ledger-month-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #52647a;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.employee-ledger-frozen-badge {
  flex: none;
  padding: 5px 9px;
  border: 1px solid #a6bad5;
  border-radius: 8px;
  color: #3c72b8;
  background: #f0f5fb;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.employee-ledger-frozen-badge[hidden],
#saveEmployeeLedgerBtn[hidden] { display: none; }

.employee-ledger-month-picker > span {
  color: #52647a;
  font-size: 13px;
  font-weight: 800;
}

.employee-ledger-month-picker select {
  width: 118px;
  height: 32px;
  border: 1px solid #9cb7db;
  border-radius: 8px;
  padding: 3px 28px 3px 10px;
  color: #2b69b9;
  background: #f6f9fd;
  font-size: 14px;
  font-weight: 900;
}

.employee-ledger-side {
  display: grid;
  width: 100%;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

#employeeLedgerView .employee-ledger-side {
  gap: 10px;
  padding: 12px;
  background: #f5f8fb;
}

.management-summary-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--management-panel-width)) var(--layout-side-width);
  align-items: start;
  gap: var(--layout-gap);
  width: min(100%, calc(var(--management-panel-width) + var(--layout-gap) + var(--layout-side-width)));
  max-width: calc(var(--management-panel-width) + var(--layout-gap) + var(--layout-side-width));
  margin-top: 0;
}

.monthly-report-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--monthly-report-panel-width)) var(--layout-side-width);
  align-items: start;
  gap: var(--layout-gap);
  width: min(100%, calc(var(--monthly-report-panel-width) + var(--layout-gap) + var(--layout-side-width)));
  max-width: calc(var(--monthly-report-panel-width) + var(--layout-gap) + var(--layout-side-width));
  margin-top: 0;
}

.management-summary-shell .management-summary-panel {
  width: 100%;
  margin-top: 0;
}

.management-summary-side {
  gap: 10px;
  padding: 12px;
  border-color: #b8decf;
  background: #f4faf7;
}

.management-summary-side-panel {
  display: grid;
  gap: 12px;
}

.management-summary-side-content {
  display: grid;
  gap: 12px;
}

.management-side-card {
  display: grid;
  gap: 12px;
  overflow: hidden;
  border: 1px solid #a8d5c5;
  border-top: 4px solid #2f9275;
  border-radius: 8px;
  padding: 12px;
  background: #fbfefd;
}

.management-side-card h3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: #173f35;
}

.management-side-card h3 span {
  font-size: 16px;
  font-weight: 900;
}

.management-side-card h3 small {
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.management-side-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.management-side-stat-grid > div {
  display: grid;
  gap: 4px;
  min-height: 68px;
  border: 1px solid #78b99f;
  border-radius: 8px;
  padding: 9px 10px;
  background: #c6e3d7;
}

.management-side-stat-grid span {
  color: #315c4f;
  font-size: 13px;
  font-weight: 800;
}

.management-side-stat-grid strong {
  color: #0b3f31;
  font-size: 21px;
  font-weight: 900;
  white-space: nowrap;
}

.management-side-stat-grid .is-commission strong,
.management-side-stat-grid .is-commission .management-cny-amount,
.management-side-stat-grid .is-commission .management-cny-amount > span {
  color: var(--money-cny) !important;
}

.management-side-card.is-note {
  border-top-color: #6784aa;
  background: #f8fafd;
}

.management-side-card.is-note p {
  margin: 0;
  color: #53657c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
}

.management-side-card.is-threshold {
  border-top-color: #6187ba;
  background: #f8fbfe;
}

.management-side-card.is-threshold p,
.management-side-card.is-threshold small {
  margin: 0;
  color: #51667b;
  font-size: 12px;
  line-height: 1.5;
}

.management-side-card.is-threshold button,
.management-approval-button {
  border: 1px solid #adc1dc;
  border-radius: 6px;
  padding: 4px 7px;
  color: #3269b2;
  background: #f1f6fc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.management-threshold-editor {
  display: grid;
  gap: 12px;
  color: #485e7c;
  font-size: 14px;
}

.monthly-detail-modal.is-management-threshold .monthly-detail-dialog { width: min(440px, calc(100vw - 32px)); }
.monthly-detail-modal.is-management-threshold .monthly-detail-dialog-head > div { gap: 6px; }
.monthly-detail-modal.is-management-threshold #monthlyDetailSubtitle::before { content: "｜"; margin-right: 6px; }
.monthly-detail-modal.is-management-threshold .monthly-detail-dialog-body { padding: 16px; }
.management-threshold-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.management-threshold-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.management-threshold-toggle i {
  position: relative;
  flex: 0 0 40px;
  height: 23px;
  border-radius: 99px;
  background: #b5c1ca;
  transition: background .15s ease;
}
.management-threshold-toggle i::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #2344;
  transition: transform .15s ease;
}
.management-threshold-toggle input:checked + i { background: #25966d; }
.management-threshold-toggle input:checked + i::before { transform: translateX(17px); }
.management-threshold-toggle input:focus-visible + i { outline: 3px solid #8eb6eb; outline-offset: 2px; }
.management-threshold-toggle input:disabled + i { opacity: .55; }
.management-threshold-role-grid { display: grid; gap: 10px; }
.management-threshold-role-grid label { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; font-weight: 700; white-space: nowrap; }
.management-threshold-amount-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
  height: 38px;
  border: 1px solid #c3cfdf;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
}
.management-threshold-amount-wrap:focus-within { border-color: #5187cc; box-shadow: 0 0 0 2px #2c8bcb22; }
.management-threshold-amount-wrap:has(input[aria-invalid="true"]) { border-color: #cf6b56; }
.management-threshold-amount-wrap input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 10px;
  color: #335a8c;
  background: transparent;
  font: inherit;
  font-weight: 700;
}
.management-threshold-amount-wrap em { flex: 0 0 auto; padding: 0 10px 0 2px; color: #5e7696; font-style: normal; font-weight: 800; }
.management-threshold-amount-wrap input:disabled { color: #718095; }
.management-threshold-save { width: 100%; min-height: 38px; margin: 2px 0 0; font-size: 15px; }
.management-threshold-batch { display: grid; gap: 9px; border-top: 1px solid #dfe5ec; padding-top: 12px; }
.management-threshold-batch h3 { margin: 0; color: #436592; font-size: 14px; font-weight: 800; }
.management-threshold-batch-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #53687a; font-size: 13px; white-space: nowrap; }
.management-threshold-batch-summary strong { color: #395d8d; font-size: 14px; }
.management-threshold-batch-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.management-threshold-batch-actions button,
.management-threshold-batch-confirm-actions button { min-height: 35px; border: 1px solid #a8bfdd; border-radius: 7px; padding: 5px 9px; color: #fff; background: #5182c3; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.management-threshold-batch-actions button.is-revoke { color: #54749e; border-color: #c7d1dd; background: #f6f8fb; }
.management-threshold-batch-actions small { color: #64798d; font-size: 12px; }
.management-threshold-batch-confirm { display: grid; gap: 6px; border: 1px solid #c0d0e4; border-radius: 8px; padding: 10px; background: #f6f9fc; }
.management-threshold-batch-confirm strong { color: #3d6497; font-size: 13px; }
.management-threshold-batch-confirm p,
.management-threshold-batch-confirm small { margin: 0; color: #5f738d; font-size: 12px; }
.management-threshold-batch-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 3px; }
.management-threshold-batch-confirm-actions button:first-child { color: #496284; border-color: #c7d1dd; background: #fff; }
.management-threshold-feedback { border: 1px solid #b8decf; border-radius: 7px; padding: 8px 10px; color: #16644c; background: #f0faf5; font-size: 13px; line-height: 1.45; }
.management-threshold-feedback:empty { display: none; }
.management-threshold-readonly { margin: 0; color: #8a6239; font-size: 12px; }
.monthly-detail-modal.is-management-threshold-status .monthly-detail-dialog { width: min(390px, calc(100vw - 32px)); }
.monthly-detail-modal.is-management-threshold-status .monthly-detail-dialog-body { padding: 14px 16px; }
.management-settlement-detail { display: grid; gap: 0; color: #516a8a; font-size: 14px; }
.management-settlement-detail > div { display: flex; align-items: center; justify-content: space-between; min-height: 31px; border-bottom: 1px solid #e6ebf1; }
.management-settlement-detail > div strong { font-size: 15px; color: #395477; }
.management-settlement-detail .management-settlement-final { border: 0; margin-top: 3px; font-weight: 800; }
.management-settlement-detail .management-settlement-final strong { color: #a62a2a; }
.management-settlement-state { margin: 0 0 7px; padding: 6px 9px; border-radius: 6px; font-weight: 800; }
.management-settlement-state.is-met { color: #166444; background: #ddf4e6; }
.management-settlement-state.is-unmet { color: #9a5d0b; background: #fff0d5; }
.management-settlement-state.is-approved { color: #3774c2; background: #e6effb; }
.management-settlement-detail > .management-settlement-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-height: 0; margin-top: 11px; border-bottom: 0; }
.management-settlement-actions button { min-height: 36px; border: 1px solid #b1c1d7; border-radius: 7px; color: #2861ac; background: #f1f6fc; font-size: 14px; font-weight: 800; cursor: pointer; }
.management-settlement-actions button:first-child { color: #526779; border-color: #cfd6e0; background: #fff; }
.management-settlement-detail > small { padding-top: 7px; color: #687689; }

.management-side-card.is-assignments {
  border-top-color: #b67b21;
  background: #fffdf8;
}

.management-assignment-list {
  display: grid;
  gap: 7px;
}

.management-assignment-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-height: 30px;
}

.management-assignment-row > b {
  color: #173f35;
  font-size: 14px;
  line-height: 26px;
  white-space: nowrap;
}

.management-assignment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.management-assignment-chips > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 26px;
  border: 1px solid #d9bd82;
  border-radius: 7px;
  padding: 0 3px 0 7px;
  color: #6f4a0c;
  background: #fff8e8;
  font-size: 12px;
  font-weight: 700;
}

.management-assignment-chips button {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 0;
  border-radius: 5px;
  padding: 0;
  color: #a32020;
  background: #fff0f0;
  font-size: 16px;
  line-height: 1;
}

.management-assignment-chips em {
  color: #8a93a1;
  font-size: 12px;
  font-style: normal;
  line-height: 26px;
}

.management-assignment-add {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) 54px;
  gap: 6px;
}

.management-assignment-add select,
.management-assignment-add button {
  min-width: 0;
  height: 30px;
  border: 1px solid #d9bd82;
  border-radius: 7px;
  padding: 0 6px;
  color: #53390d;
  background: #ffffff;
  font-size: 13px;
}

.management-assignment-add button {
  border-color: #b67b21;
  color: #ffffff;
  background: #b67b21;
  font-weight: 800;
}

.management-assignment-status {
  min-height: 18px;
  color: #6b7280;
  font-size: 12px;
  line-height: 18px;
}

.management-assignment-status.success {
  color: #087044;
}

.management-assignment-status.warn {
  color: #9a5a00;
}

.monthly-report-panel {
  display: grid;
  gap: 0;
  width: 100%;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.monthly-report-side {
  width: 100%;
}

.employee-ledger-tool-panel {
  border: 0;
  padding: 0;
  padding-bottom: 0;
  background: transparent;
  box-shadow: none;
}

.employee-ledger-main-tools > .side-head {
  padding: 2px 2px 8px;
}

.employee-ledger-main-tools > .side-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.employee-ledger-main-tools > .side-head h2::before {
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: #3275cb;
  content: "";
}

.management-tool-note {
  margin: -2px 0 0;
  color: #315c4f;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.employee-ledger-tool-actions {
  display: grid;
  gap: 12px;
}

.employee-ledger-main-tools .employee-ledger-tool-actions {
  gap: 10px;
}

.employee-quick-launcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid #ccd8e7;
  border-radius: 10px;
  background: #eaf0f7;
}

.employee-quick-launch-button {
  height: 36px;
  border: 0;
  border-radius: 8px;
  color: #2b69b9;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.employee-quick-launch-button.is-active {
  color: #ffffff;
  background: #3275cb;
  box-shadow: 0 5px 12px rgba(50, 117, 203, 0.2);
}

.employee-quick-panel {
  margin-top: 6px;
  margin-bottom: 10px;
  border-color: #abc2e1;
  border-top: 4px solid #4f82c6;
  background: #f8fbfe;
}

.employee-daily-entry-card {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #c0d0e4;
  border-top: 4px solid #5680b7;
  border-radius: 10px;
  background: #f8fafc;
}

.employee-daily-entry-card .employee-quick-panel {
  margin: 0;
}

.employee-quick-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(108px, 0.8fr);
  gap: 6px;
}

.employee-quick-form-grid input,
.employee-quick-form-grid select,
.employee-quick-form-grid textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 4px 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.employee-quick-form-grid textarea {
  height: 126px;
  line-height: 1.45;
  resize: vertical;
}

.employee-quick-form-grid .is-wide {
  grid-column: 1 / -1;
}

.employee-ledger-tool-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.employee-ledger-main-tools .employee-ledger-tool-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 10px;
  border: 1px solid #d9e1ec;
  border-top: 4px solid #9ab0cc;
  border-radius: 10px;
  background: #ffffff;
}

.employee-ledger-tool-group h3 {
  grid-column: 1 / -1;
  margin: 0;
  color: #586d89;
  font-size: 14px;
  font-weight: 800;
}

.employee-ledger-main-tools .employee-ledger-tool-group h3 {
  grid-column: 1 / -1;
  display: grid;
  gap: 2px;
  margin: 0 0 2px;
  color: #586d89;
  font-size: 15px;
  font-weight: 800;
}

.employee-ledger-main-tools .employee-ledger-tool-group h3 span {
  line-height: 20px;
}

.employee-ledger-main-tools .employee-ledger-tool-group h3 small {
  color: #728197;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.employee-ledger-main-tools .employee-ledger-tool-group.is-import-card {
  grid-template-columns: 1fr;
  border-top-color: #4f82c6;
  background: #f9fbfe;
}

.employee-ledger-main-tools .employee-ledger-tool-group.is-month-end-card {
  grid-template-columns: 1fr;
  gap: 8px;
  border-top-color: #7e68bb;
  background: #fbfaff;
}

.employee-month-end-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.employee-month-end-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-self: stretch;
  align-content: start;
  align-items: start;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.employee-month-end-actions .employee-ledger-tool-button {
  width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 0 6px;
  white-space: nowrap;
}

.employee-ledger-main-tools .employee-month-end-actions .employee-ledger-tool-button {
  height: 38px;
  min-height: 38px;
  font-size: 14px;
}

.employee-data-sync-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 68px;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  background: #ffffff;
}

.employee-data-sync-row > div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.employee-data-sync-row b {
  color: #406493;
  font-size: 13px;
  font-weight: 900;
}

.employee-data-sync-row small {
  overflow: hidden;
  color: #728197;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-data-sync-row .employee-ledger-tool-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: keep-all;
}

.employee-ledger-tool-button {
  height: 44px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 15px;
  font-weight: 400;
  box-shadow: inset 0 0 0 1px rgba(204, 216, 231, 0.3);
}

.employee-ledger-main-tools .employee-ledger-tool-button {
  height: 38px;
  font-size: 14px;
  font-weight: 700;
}

.employee-ledger-tool-button.is-primary-action {
  min-height: 58px;
  border-color: #3275cb;
  color: #ffffff;
  background: #3275cb;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 10px 18px rgba(50, 117, 203, 0.18);
}

.employee-ledger-main-tools .employee-ledger-tool-button.is-primary-action {
  min-height: 38px;
  font-size: 14px;
  box-shadow: 0 5px 10px rgba(50, 117, 203, 0.16);
}

.employee-ledger-tool-button.is-secondary-action {
  border-color: #9cb7db;
  color: #2b69b9;
  background: #f0f5fc;
  font-weight: 800;
}

.employee-ledger-tool-button.is-plain-action {
  color: #4f6278;
  background: #ffffff;
}

.employee-ledger-main-tools .employee-ledger-tool-button.is-plain-action {
  background: #f9fafb;
}

.employee-ledger-tool-button.is-danger-action {
  color: #8f1d1d;
  background: #fff7f7;
  border-color: #efc0c0;
}

.employee-ledger-tool-button.is-warning-action {
  color: #8a5a00;
  background: #fff4df;
  border-color: #efc56f;
}

.employee-ledger-tool-button:disabled {
  cursor: not-allowed;
  color: #94a3b8;
  background: #f5f8fb;
  border-color: #d9e1ec;
  box-shadow: none;
}

.employee-ledger-tool-button:hover {
  border-color: #a2b8d4;
  color: #2b69b9;
  background: #f6f9fd;
}

.employee-ledger-tool-button.is-primary-action:hover {
  border-color: #2a65b3;
  color: #ffffff;
  background: #2a65b3;
}

.employee-ledger-operation-status h3 {
  margin: 0 0 8px;
  color: #354a67;
  font-size: 14px;
  font-weight: 900;
}

.employee-ledger-operation-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  color: #586d89;
  font-size: 13px;
}

.employee-ledger-operation-row strong {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-weight: 800;
}

.employee-ledger-operation-row strong.is-complete {
  color: #0c6a46;
  background: #e4f5ec;
}

.employee-ledger-operation-row strong.is-pending {
  color: #8a5a00;
  background: #fff2d8;
}

.employee-ledger-operation-row strong.is-stale {
  color: #a20d0d;
  background: #ffe4e4;
}

.employee-ledger-operation-dates {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #d9e1ec;
  color: #667085;
  font-size: 12px;
  line-height: 1.35;
}

.employee-ledger-operation-dates b {
  color: #586d89;
  font-weight: 700;
}

.employee-ledger-operation-message {
  margin-top: 8px;
  color: #4f6278;
  font-size: 13px;
  line-height: 1.35;
}

.employee-month-end-check {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 7px;
  padding: 7px;
  border: 1px solid #dce5f0;
  border-radius: 10px;
  background: #ffffff;
}

.employee-month-end-check-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: #406493;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.employee-month-end-check-title strong {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #0f6f5a;
  background: #e4f5ec;
  font-size: 12px;
  font-weight: 900;
}

.employee-month-end-check.is-blocked .employee-month-end-check-title strong {
  color: #8a5a00;
  background: #fff2d8;
}

.employee-month-end-check-list {
  display: grid;
  gap: 4px;
  align-content: space-evenly;
}

.employee-month-end-check-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 26px;
  padding: 4px 5px;
  border-radius: 8px;
  color: #586d89;
  background: #f9fbfe;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.employee-month-end-check-item b {
  color: #8a5a00;
  font-size: 12px;
  font-weight: 900;
}

.employee-month-end-check-item.is-complete b {
  color: #0c6a46;
}

.employee-month-end-check-item.is-stale b {
  color: #a20d0d;
}

.employee-month-end-check-note {
  align-self: end;
  margin: 0;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

@media (max-width: 1180px) {
  .employee-month-end-layout {
    grid-template-columns: 1fr;
  }
}

.employee-ledger-side-section {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: #f9fbfd;
}

.employee-ledger-main-tools .employee-ledger-side-section {
  background: #ffffff;
}

.employee-ledger-section-heading {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ead9bd;
}

.employee-ledger-section-heading span {
  color: #806a49;
  font-size: 11px;
  font-weight: 600;
}

.employee-ledger-side-section.is-penalty-card {
  border-color: #e8cf9f;
  border-top: 4px solid #cf8c2c;
  background: #fffdf8;
}

.employee-ledger-side-section h3 {
  margin: 0;
  color: #586d89;
  font-size: 14px;
  font-weight: 800;
}

.employee-ledger-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.7fr);
  gap: 6px;
}

.employee-ledger-form-grid input,
.employee-ledger-form-grid select,
.employee-ledger-form-grid textarea,
.employee-room-fee-row input,
.employee-room-fee-row select,
.employee-penalty-row input,
.employee-penalty-row select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 4px 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.employee-ledger-form-grid textarea {
  height: 116px;
  line-height: 1.45;
  resize: vertical;
}

.employee-ledger-batch-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #607087;
  background: #f9fbfe;
  font-size: 12px;
  font-weight: 800;
}

.employee-ledger-form-grid .is-wide,
.employee-room-fee-row [data-room-fee-name] {
  grid-column: 1 / -1;
}

.employee-ledger-side-save,
.employee-ledger-side-mini-button,
.employee-ledger-side-delete {
  height: 32px;
  border: 1px solid #9cb7db;
  border-radius: 8px;
  color: #2b69b9;
  background: #f0f5fc;
  font-size: 13px;
  font-weight: 800;
}

.employee-ledger-side-delete {
  border-color: #efc0c0;
  color: #9d1717;
  background: #fff7f7;
}

.employee-ledger-side-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.employee-room-fee-config-list {
  display: grid;
  gap: 6px;
}

.employee-room-fee-example,
.employee-penalty-formula {
  min-height: 30px;
  border: 1px solid #ead9bd;
  border-radius: 8px;
  padding: 6px 8px;
  color: #75551f;
  background: #fff8e9;
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
}

.employee-room-fee-details {
  padding: 8px;
  border-color: #ead9bd;
  border-top: 4px solid #d99a3d;
  background: #fffdf8;
}

.employee-ledger-fold-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -2px;
  padding: 4px 6px;
  border-radius: 8px;
  color: #354a67;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  list-style: none;
}

.employee-ledger-fold-card[open] summary {
  margin-bottom: 8px;
}

.employee-ledger-fold-card summary > span {
  display: grid;
  gap: 2px;
}

.employee-ledger-fold-card summary b {
  color: #586d89;
  font-size: 14px;
  font-weight: 900;
}

.employee-ledger-fold-card summary small {
  color: #728197;
  font-size: 10px;
  font-weight: 600;
}

.employee-ledger-fold-card summary::-webkit-details-marker {
  display: none;
}

.employee-ledger-fold-card summary::after {
  content: "展开";
  color: #607087;
  font-size: 12px;
  font-weight: 800;
}

.employee-ledger-fold-card[open] summary::after {
  content: "收起";
}

.employee-room-fee-row {
  display: grid;
  grid-template-columns: minmax(72px, 1.25fr) minmax(86px, 0.85fr) 64px 52px;
  gap: 4px;
  align-items: center;
  padding: 6px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  background: #ffffff;
}

.employee-room-fee-row [data-room-fee-name] {
  grid-column: auto;
}

.employee-room-fee-active {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #586d89;
  font-size: 12px;
  font-weight: 800;
}

.employee-room-fee-active input {
  width: 14px;
  min-width: 14px;
  height: 14px;
  padding: 0;
}

.employee-room-fee-amount-field {
  position: relative;
  display: block;
  min-width: 0;
}

.employee-room-fee-amount-field input {
  padding-right: 26px;
}

.employee-room-fee-amount-field > span {
  position: absolute;
  top: 50%;
  right: 9px;
  color: #8f1717;
  font-size: 13px;
  font-weight: 900;
  transform: translateY(-50%);
  pointer-events: none;
}

.employee-ledger-empty-config {
  padding: 8px;
  border: 1px dashed #ccd8e7;
  border-radius: 8px;
  color: #667085;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.employee-ledger-saved-list-head {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: #586d89;
  font-size: 13px;
  font-weight: 900;
}

.employee-penalty-record-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.employee-penalty-row {
  display: grid;
  grid-template-columns: minmax(88px, 1.25fr) minmax(82px, 0.85fr) 52px;
  gap: 4px;
  align-items: center;
  padding: 6px;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  background: #ffffff;
}

.employee-penalty-row [data-delete-employee-penalty] {
  width: 100%;
}

.employee-penalty-amount-field {
  position: relative;
  display: block;
  min-width: 0;
}

.employee-penalty-amount-field input {
  padding-right: 24px;
}

.employee-penalty-amount-field > span {
  position: absolute;
  top: 50%;
  right: 8px;
  color: #8a5600;
  font-size: 11px;
  font-weight: 900;
  transform: translateY(-50%);
  pointer-events: none;
}

.employee-penalty-validation {
  border: 1px solid #ef9a9a;
  border-radius: 8px;
  padding: 8px 10px;
  color: #a11919;
  background: #fff2f2;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.employee-penalty-validation:empty {
  display: none;
}

.is-active-employee-invalid,
input.is-active-employee-invalid,
textarea.is-active-employee-invalid {
  border-color: #d64242 !important;
  background: #fff1f1 !important;
  box-shadow: 0 0 0 2px rgba(214, 66, 66, 0.16) !important;
  color: #8f1f1f !important;
}

.active-employee-validation-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 10020;
  width: min(560px, calc(100vw - 32px));
  border: 1px solid #e48b8b;
  border-radius: 8px;
  padding: 10px 14px;
  color: #8f1f1f;
  background: #fff1f1;
  box-shadow: 0 10px 28px rgba(99, 24, 24, 0.18);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
  text-align: center;
  transform: translateX(-50%);
}

.active-employee-validation-banner.is-hidden {
  display: none;
}

.employee-ledger-wrap {
  width: min(888px, 100%);
  overflow-x: auto;
  border: 1px solid #abc2e1;
  border-radius: 8px;
}

.employee-ledger-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.employee-ledger-table th,
.employee-ledger-table td {
  box-sizing: border-box;
  height: var(--ui-table-row-height);
  border-right: 1px solid #c0d3eb;
  border-bottom: 1px solid #c0d3eb;
  padding: 2px 6px;
  color: #354a67;
  font-size: 15px;
  font-weight: 400;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
}

.employee-ledger-table th:nth-child(1),
.employee-ledger-table td:nth-child(1) {
  width: 6%;
}

.employee-ledger-table th:nth-child(2),
.employee-ledger-table td:nth-child(2) {
  width: 16%;
}

.employee-ledger-table th:nth-child(3),
.employee-ledger-table td:nth-child(3) {
  width: 15%;
}

.employee-ledger-table th:nth-child(4),
.employee-ledger-table td:nth-child(4) {
  width: 13%;
}

.employee-ledger-table th:nth-child(5),
.employee-ledger-table td:nth-child(5) {
  width: 13%;
}

.employee-ledger-table th:nth-child(6),
.employee-ledger-table td:nth-child(6) {
  width: 13%;
}

.employee-ledger-table th:nth-child(7),
.employee-ledger-table td:nth-child(7) {
  width: 17%;
}

.employee-ledger-table th:nth-child(8),
.employee-ledger-table td:nth-child(8) {
  width: 7%;
}

.employee-ledger-table th {
  height: 32px;
  color: #ffffff;
  background: #2860aa;
  font-size: 15px;
}

.employee-ledger-table .employee-ledger-section-head th {
  border-right: 1px solid #c0d3eb;
  border-bottom: 1px solid #c0d3eb;
  color: #ffffff;
  background: #245799;
  font-weight: 700;
}

.employee-ledger-table .employee-ledger-section-head th:first-child {
  color: #ffffff;
  background: #245799;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  padding-left: 6px;
}

.employee-ledger-table tbody tr:nth-child(odd of :not(.employee-ledger-section-head):not(.employee-ledger-group-total)) td {
  background: #ffffff;
}

.employee-ledger-table tbody tr:nth-child(even of :not(.employee-ledger-section-head):not(.employee-ledger-group-total)) td {
  background: var(--table-row-alt);
}

.employee-ledger-table .employee-ledger-section-head + tr td,
.employee-ledger-table .employee-ledger-group-total + tr.employee-ledger-section-head th {
  border-top: 0;
}

.employee-ledger-table .employee-ledger-group-total td {
  height: var(--ui-table-total-height);
  background: #eff4fb;
  color: #295da1;
  font-weight: 700;
}

.employee-ledger-table .employee-ledger-placeholder-row td {
  color: transparent;
  pointer-events: none;
}

.employee-ledger-table input {
  width: 100%;
  height: 24px;
  border: 0;
  padding: 0;
  color: #354a67;
  background: transparent;
  font-size: 15px;
  text-align: center;
  outline: none;
}

.employee-ledger-table input:focus {
  border-radius: 6px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #abc2e1;
}

.employee-ledger-usdt-income {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 3px;
}

.employee-ledger-usdt-income.is-pending {
  grid-template-columns: minmax(0, 1fr) 40px;
}

.employee-ledger-usdt-income.is-pending input {
  color: #087955;
  font-weight: 800;
}

.employee-ledger-usdt-income .monthly-note-status {
  min-width: 38px;
  min-height: 18px;
  padding-inline: 3px;
  font-size: 11px;
  line-height: 16px;
}

.employee-ledger-usdt-income.is-performance-adjusted {
  justify-items: center;
  gap: 1px;
}

.employee-ledger-usdt-income.is-performance-adjusted strong {
  color: #2b69b9;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.employee-ledger-usdt-income.is-performance-adjusted small {
  color: #354a67;
  font-size: 10px;
  line-height: 12px;
  white-space: nowrap;
}

.employee-ledger-usdt-income.is-performance-adjusted .employee-ledger-usdt-adjustment {
  color: inherit;
}

.employee-ledger-table input.is-positive-value,
.employee-detail-input-wrap input.is-positive-value {
  color: var(--money-cny);
}

.employee-name-cell {
  vertical-align: middle;
  padding: 2px 6px 2px 8px;
  text-align: center;
}

.employee-name-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  white-space: nowrap;
  line-height: inherit;
  vertical-align: baseline;
}

.employee-name-display > span {
  flex: 0 0 1em;
  text-align: center;
}

.employee-ledger-index {
  color: #667085;
}

.employee-name-cell > span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  vertical-align: middle;
}

.employee-ledger-detail-button {
  height: 22px;
  min-width: 38px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 13px;
  font-weight: 400;
  vertical-align: middle;
}

.employee-ledger-number.is-positive-value,
.employee-ledger-cny {
  color: var(--money-cny);
  font-weight: 400;
}

.employee-ledger-number.is-negative-value {
  color: #354a67;
  font-weight: 400;
}

.employee-ledger-number.is-advance-value {
  color: #8f1717;
  font-weight: 400;
}

.employee-ledger-balance {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0;
}

.employee-balance-positive {
  color: var(--money-cny);
}

.employee-balance-negative {
  color: #354a67;
}

.employee-ledger-table .employee-balance-positive {
  color: var(--money-cny);
}

.employee-ledger-empty {
  color: #667085;
}

.employee-ledger-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(888px, 100%);
}

.employee-ledger-summary-item {
  display: grid;
  gap: 8px;
  min-height: 92px;
  border: 1px solid #b3c6df;
  border-radius: 8px;
  padding: 14px 16px;
  background: #c5d4e7;
}

.employee-ledger-summary-item.is-placeholder strong {
  color: #667085;
}

.employee-ledger-summary-item span {
  color: #586d89;
  font-size: 15px;
  font-weight: 800;
}

.employee-ledger-summary-item strong {
  color: #354a67;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.12;
}

.employee-ledger-summary-item .employee-ledger-summary-neutral {
  color: #354a67;
}

.employee-ledger-summary-item .is-positive-value,
.employee-ledger-summary-item .amount-positive {
  color: var(--money-cny);
}

.employee-ledger-summary-item .is-advance-value {
  color: #8f1717;
}

.employee-ledger-summary-item .is-negative-value {
  color: #354a67;
}

.employee-ledger-summary-item .employee-balance-positive {
  color: var(--money-cny);
}

.employee-ledger-summary-item .employee-balance-negative {
  color: #354a67;
}

.employee-ledger-import-status {
  min-height: 38px;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  padding: 8px 10px;
  color: #50627a;
  background: #f9fbfd;
  font-size: 13px;
  line-height: 1.35;
}

.employee-ledger-main-tools .employee-ledger-import-status {
  margin-top: 2px;
  border-color: #ccd8e7;
  border-top: 4px solid #6784aa;
  background: #f5f8fb;
}

.employee-ledger-import-status.success {
  border-color: #a8d8bd;
  color: #0f6d45;
  background: #f0fbf5;
}

.employee-ledger-import-status.warn {
  border-color: #e8cf91;
  color: #8a5a00;
  background: #fffaf0;
}

.management-summary-panel {
  display: grid;
  gap: 8px;
  margin-top: 0;
  border: 1px solid #c9e0d6;
  border-radius: 8px;
  padding: 8px;
  background: #fbfefd;
}

.management-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 0;
  padding: 4px var(--ui-cell-padding-x) 8px;
}

.management-head h3 {
  margin: 0;
  color: #354a67;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.management-head span {
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.management-head-actions { display: flex; align-items: center; gap: 10px; }
.management-head-actions button { min-height: 27px; border: 1px solid #8bc6ae; border-radius: 6px; padding: 2px 10px; color: #0b5a45; background: #f3fbf7; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.management-head-actions button:hover { background: #e2f1eb; }

.management-summary-grid {
  display: grid;
  gap: 8px;
}

.management-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.management-kpi-card {
  display: grid;
  gap: 5px;
  min-height: 72px;
  border: 1px solid #78b99f;
  border-radius: 8px;
  padding: 10px 12px;
  background: #c6e3d7;
}

.management-kpi-card span {
  color: #315c4f;
  font-size: 13px;
  font-weight: 800;
}

.management-kpi-card strong {
  color: #0b3f31;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.management-kpi-card strong .management-cny-amount,
.management-kpi-card strong .management-cny-amount > span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.monthly-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  margin-bottom: 0;
  padding: 4px var(--ui-cell-padding-x) 8px;
}

.monthly-report-head h3 {
  margin: 0;
  color: #354a67;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.monthly-report-head span {
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.monthly-report-table-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #b3c6df;
  border-radius: 8px 8px 0 0;
  background: #ffffff;
}

.monthly-report-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: #000000;
  background: #ffffff;
  font-size: 15px;
  line-height: 1.1;
}

.monthly-report-table th,
.monthly-report-table td {
  height: 32px;
  border: 0;
  box-shadow: inset -0.5px 0 0 #b3c6df, inset 0 -0.5px 0 #b3c6df;
  padding: 3px 6px;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.monthly-report-table th:last-child,
.monthly-report-table td:last-child {
  box-shadow: inset 0 -0.5px 0 #b3c6df;
}

.monthly-report-table tbody tr:last-child td {
  box-shadow: inset -0.5px 0 0 #b3c6df;
}

.monthly-report-table tbody tr:last-child td:last-child {
  box-shadow: none;
}

.monthly-report-table thead th {
  color: #ffffff;
  background: #2b68b9;
  font-size: 15px;
  font-weight: 900;
}

.monthly-report-table tbody tr:nth-child(odd) td {
  background: #ffffff;
}

.monthly-report-table tbody tr:nth-child(even) td {
  background: #edf3fa;
}

.monthly-report-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border: 0;
  padding: 6px 0;
  background: #ffffff;
}

.monthly-report-metric-card {
  display: grid;
  align-content: center;
  min-height: 54px;
  border: 1px solid #b3c6df;
  border-radius: 8px;
  padding: 6px 9px;
  background: #ffffff;
}

.monthly-report-metric-card:nth-child(3n) {
  border-right: 1px solid #b3c6df;
}

.monthly-report-metric-card:nth-last-child(-n + 3) {
  border-bottom: 1px solid #b3c6df;
}

.monthly-report-metric-card.is-wide {
  grid-column: 1 / -1;
  min-height: 52px;
}

.monthly-report-expense-formula {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 106px minmax(0, 1fr);
  min-height: 54px;
  border: 1px solid #b3c6df;
  border-radius: 8px;
  overflow: hidden;
  background: #edf3fa;
}

.monthly-report-expense-head {
  display: grid;
  align-content: center;
  gap: 3px;
  border-right: 1px solid #b3c6df;
  padding: 6px 9px;
  background: #edf3fa;
}

.monthly-report-expense-head span {
  color: #354a67;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
}

.monthly-report-expense-head strong {
  color: #354a67;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.monthly-report-expense-calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1.05fr);
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
}

.monthly-report-expense-calc.has-management-commission {
  grid-template-columns: repeat(4, minmax(0, 1fr) 18px) minmax(0, 1.05fr);
}

.monthly-report-expense-calc.is-legacy {
  grid-template-columns: minmax(0, 1fr);
}

.monthly-report-expense-calc > b {
  color: #667994;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.monthly-report-expense-box {
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 42px;
  border: 1px solid #b3c6df;
  border-radius: 8px;
  padding: 5px 7px;
  background: #ffffff;
}

.monthly-report-expense-box span {
  min-width: 0;
  color: #354a67;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-report-expense-box strong {
  min-width: 0;
  color: #354a67;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-report-expense-box .is-cny-part,
.monthly-report-expense-box.is-cny-only strong,
.monthly-report-expense-box.is-total strong {
  color: #a10f0f;
}

.monthly-report-expense-box strong .is-cny-part,
.monthly-report-expense-box strong .is-cny-symbol {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.monthly-report-expense-box strong .is-cny-symbol {
  color: #a10f0f;
}

.monthly-report-expense-box.is-cny-only strong .is-cny-symbol {
  color: inherit;
}

.monthly-report-metric-card span {
  color: #354a67;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
}

.monthly-report-metric-card strong {
  display: block;
  margin-top: 4px;
  color: #354a67;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-report-metric-card strong em {
  color: #354a67;
  font-style: normal;
  font-weight: 600;
}

.monthly-report-metric-card .is-cny-part {
  color: #a10f0f;
  font-size: inherit;
  font-weight: 500;
}

.monthly-report-total-usdt-row td {
  min-height: 44px;
  background: #d9d9d9;
}

.monthly-report-total-stack {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.monthly-report-total-stack strong {
  color: #000000;
  font-size: 15px;
  font-weight: 500;
}

.monthly-report-total-stack span {
  color: #ffffff;
  background: #2b68b9;
  width: calc(100% + 12px);
  margin: 0 -6px -3px;
  padding: 4px 0;
  font-size: 16px;
  font-weight: 900;
}

.monthly-report-average-row td {
  height: 45px;
  background: #d9d9d9;
  font-weight: 700;
}

.monthly-report-average-row .monthly-report-total-stack span {
  color: #b00000;
  background: transparent;
  margin: 0;
  padding: 0;
}

.monthly-report-year-data {
  display: grid;
  gap: 7px;
  overflow: visible;
  border: 0;
  border-top: 0;
  padding: 7px 0 0;
  background: #ffffff;
}

.monthly-report-year-card {
  display: block;
  min-height: 0;
  border: 1px solid #9cb7db;
  border-radius: 9px;
  padding: 7px;
  overflow: hidden;
  background: #2b68b9;
}

.monthly-report-year-card > h4 {
  display: none;
}

.monthly-report-year-card-content {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 7px;
  min-width: 0;
}

.monthly-report-year-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.monthly-report-year-section {
  display: block;
  min-width: 0;
}

.monthly-report-year-section + .monthly-report-year-section {
  border-top: 0;
}

.monthly-report-year-section-grid {
  display: grid;
  min-width: 0;
  height: 100%;
  gap: 6px;
}

.monthly-report-year-section.is-operating .monthly-report-year-section-grid {
  grid-template-columns:
    minmax(210px, 2.4fr)
    minmax(112px, 1.05fr)
    minmax(210px, 2.15fr)
    minmax(156px, 1.45fr);
}

.monthly-report-year-section.is-balance .monthly-report-year-section-grid {
  grid-template-columns:
    minmax(66px, 0.65fr)
    minmax(66px, 0.65fr)
    minmax(190px, 1.95fr)
    minmax(218px, 2.15fr)
    minmax(150px, 1.45fr);
}

.monthly-report-year-card-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(156, 183, 219, 0.82);
  border-radius: 7px;
  padding: 6px 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.monthly-report-year-card-item.is-year-marker {
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 6px 4px;
  border-color: rgba(156, 183, 219, 0.95);
  background: rgba(41, 98, 173, 0.2);
}

.monthly-report-year-card-item.is-year-marker > strong {
  flex: 0 0 auto;
  color: #ffff00;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
}

.monthly-report-year-card-item > span {
  flex: 0 0 auto;
  color: #ffffff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.monthly-report-year-card-item > span::after {
  content: "";
}

.monthly-report-year-card-item > strong {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.08;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.monthly-report-year-card-item > strong.auto-fit-text {
  display: inline-block;
  transform: scaleX(var(--auto-fit-scale-x, 1));
  transform-origin: left center;
}

.monthly-report-year-card-item .is-cny-part {
  color: #ffffff;
  font-size: inherit;
  font-weight: inherit;
}

.monthly-report-year-card-item.is-total-cny .is-cny-part {
  color: #ffff00;
}

.monthly-report-year-simple-dashboard {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.monthly-report-year-simple-section {
  min-width: 0;
  border: 1px solid #9cb7db;
  border-radius: 8px;
  overflow: hidden;
  background: #2b68b9;
}

.monthly-report-year-simple-row {
  display: grid;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.monthly-report-year-simple-row.is-head {
  min-height: 30px;
  border-top: 0;
  background: rgba(41, 98, 173, 0.28);
}

.monthly-report-year-simple-section.is-operating .monthly-report-year-simple-row {
  grid-template-columns: repeat(24, minmax(0, 1fr));
}

.monthly-report-year-simple-section.is-balance .monthly-report-year-simple-row {
  grid-template-columns: repeat(24, minmax(0, 1fr));
}

.monthly-report-year-simple-section.is-operating .monthly-report-year-simple-cell:nth-child(1),
.monthly-report-year-simple-section.is-balance .monthly-report-year-simple-cell:nth-child(1),
.monthly-report-year-simple-section.is-balance .monthly-report-year-simple-cell:nth-child(2),
.monthly-report-year-simple-section.is-balance .monthly-report-year-simple-cell:nth-child(3) {
  grid-column: span 2;
}

.monthly-report-year-simple-section.is-operating .monthly-report-year-simple-cell:nth-child(2),
.monthly-report-year-simple-section.is-balance .monthly-report-year-simple-cell:nth-child(4) {
  grid-column: span 7;
}

.monthly-report-year-simple-section.is-operating .monthly-report-year-simple-cell:nth-child(3) {
  grid-column: span 4;
}

.monthly-report-year-simple-section.is-operating .monthly-report-year-simple-cell:nth-child(4),
.monthly-report-year-simple-section.is-balance .monthly-report-year-simple-cell:nth-child(5) {
  grid-column: span 6;
}

.monthly-report-year-simple-section.is-operating .monthly-report-year-simple-cell:nth-child(5),
.monthly-report-year-simple-section.is-balance .monthly-report-year-simple-cell:nth-child(6) {
  grid-column: span 5;
}

.monthly-report-year-simple-cell {
  display: block;
  min-width: 0;
  padding: 5px 9px;
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.monthly-report-year-simple-cell:last-child {
  border-right: 0;
}

.monthly-report-year-simple-row.is-head .monthly-report-year-simple-cell {
  font-size: 14px;
  opacity: 0.92;
}

.monthly-report-year-simple-cell.is-year,
.monthly-report-year-simple-cell.is-total-cny {
  color: #ffff00;
}

.monthly-report-salary-module {
  overflow: hidden;
  border: 1px solid #b3c6df;
  border-radius: 8px;
  margin-top: 0;
  background: #edf3fa;
}

.monthly-report-salary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  border-bottom: 1px solid #b3c6df;
  padding: 0 12px;
  background: #edf3fa;
}

.monthly-report-salary-head strong,
.monthly-report-salary-head span {
  color: #354a67;
  font-size: 16px;
  font-weight: 500;
}

.monthly-report-salary-head .monthly-report-salary-total {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #354a67;
  font-size: 14px;
  font-weight: 500;
}

.monthly-report-salary-head .monthly-report-salary-total span {
  color: #354a67;
  font-size: inherit;
  font-weight: inherit;
}

.monthly-report-salary-head .monthly-report-salary-total b {
  color: #a10f0f;
  font-size: inherit;
  font-weight: inherit;
}

.monthly-report-salary-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
  background: #edf3fa;
}

.monthly-report-salary-row {
  display: grid;
  gap: 2px;
  min-height: 44px;
  border: 1px solid #b3c6df;
  border-radius: 8px;
  padding: 6px 8px;
  background: #ffffff;
  font-size: 15px;
}

.monthly-report-salary-row.is-placeholder {
  border-style: solid;
  background: #ffffff;
}

.monthly-report-salary-row span {
  min-width: 0;
  color: #354a67;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-report-salary-row strong {
  min-width: 0;
  color: #354a67;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-report-salary-row .is-cny-part {
  color: #a10f0f;
  font-size: inherit;
  font-weight: inherit;
}

.monthly-report-salary-editor {
  display: grid;
  gap: 6px;
  grid-column: 1 / -1;
}

.monthly-report-salary-editor-list {
  display: grid;
  gap: 5px;
}

.monthly-report-salary-editor-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr) 72px 44px;
  gap: 6px;
}

.monthly-report-salary-editor-row input,
.monthly-report-salary-editor-row select,
.monthly-report-salary-delete {
  min-width: 0;
  height: 28px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 0 7px;
  color: #354a67;
  background: #ffffff;
  font-size: 13px;
  outline: none;
}

.monthly-report-salary-delete {
  padding: 0;
  color: #8a1b1b;
  background: #fff7f7;
  font-weight: 700;
  cursor: pointer;
}

.monthly-report-salary-delete:hover {
  border-color: #d98b8b;
  background: #ffecec;
}

.monthly-report-salary-editor-row input:nth-child(2) {
  text-align: right;
}

.monthly-report-salary-editor-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.monthly-report-salary-add,
.monthly-report-salary-save {
  width: 100%;
}

.monthly-report-tool-panel .employee-ledger-tool-button {
  height: 34px;
  min-height: 34px;
  width: 100%;
  border-color: #9cb7db;
  color: #2b69b9;
  background: #f0f5fc;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(204, 216, 231, 0.3);
}

.monthly-report-tool-panel .employee-ledger-tool-group {
  grid-template-columns: minmax(0, 1fr);
}

.monthly-report-tool-panel .management-tool-note {
  width: 100%;
  margin: 0;
}

.monthly-report-tool-panel .employee-ledger-tool-button.is-primary-action {
  height: 36px;
  min-height: 36px;
  border-color: #3275cb;
  color: #ffffff;
  background: #3275cb;
}

.monthly-report-tool-panel .employee-ledger-tool-button:hover {
  border-color: #2a65b3;
  color: #2b69b9;
  background: #f6f9fd;
}

.monthly-report-tool-panel .employee-ledger-tool-button.is-primary-action:hover {
  color: #ffffff;
  background: #2a65b3;
}

.management-summary-card {
  overflow: hidden;
  border: 1px solid #a8d5c5;
  border-radius: 8px;
  background: #ffffff;
}

.management-table-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  padding: 0 9px;
  color: #ffffff;
  background: #157257;
}

.management-table-title b {
  font-size: 16px;
  font-weight: 900;
}

.management-table-title span {
  font-size: 13px;
  font-weight: 400;
}

.management-summary-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.management-summary-table th,
.management-summary-table td {
  box-sizing: border-box;
  height: var(--ui-table-row-height);
  border-right: 1px solid #b8decf;
  border-bottom: 1px solid #b8decf;
  padding: 2px 6px;
  color: #354a67;
  font-size: 15px;
  font-weight: 400;
  line-height: 17px;
  text-align: center;
  white-space: nowrap;
}

.management-summary-table th {
  height: var(--ui-table-head-height);
  color: #155f4b;
  background: #e8f5ef;
  font-size: 15px;
  font-weight: 700;
}

.management-summary-table .management-summary-total-row td {
  color: #0b3f31;
  background: #e2f1eb;
  font-weight: 700;
}

.management-summary-table .management-summary-total-row .management-name-content strong {
  color: #0b3f31;
  font-weight: 700;
}

.management-summary-table .management-summary-total-row .management-commission-value,
.management-summary-table .management-summary-total-row .management-commission-value .management-cny-amount,
.management-summary-table .management-summary-total-row .management-commission-value .management-cny-amount > span {
  color: #354a67 !important;
  font-weight: 700;
}

.management-grand-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid #a8d5c5;
  border-radius: 7px;
  padding: 7px 10px;
  color: #315c4f;
  background: #f1f8f5;
  font-size: 14px;
  white-space: nowrap;
}

.management-grand-total-title {
  font-weight: inherit;
}

.management-grand-total-formula {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  color: #294b3d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}

.management-grand-total-term {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.management-grand-total-operator {
  color: #8ca69c;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.management-grand-total strong {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .management-summary-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .management-summary-panel > .page-header {
    width: 100%;
    min-width: 0;
  }

  .management-summary-grid {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .management-summary-card {
    min-width: 0;
    overflow-x: auto;
  }

  .management-grand-total {
    min-width: 0;
  }

  .management-grand-total-formula {
    flex-wrap: wrap;
    justify-content: flex-end;
    white-space: normal;
  }
}

.management-summary-table th:first-child,
.management-summary-table td:first-child {
  width: 31%;
}

.management-summary-table th:first-child { text-align: center; }
.management-summary-table td:first-child { text-align: left; }

.management-summary-table th:nth-child(2),
.management-summary-table td:nth-child(2) {
  width: 6%;
}

.management-summary-table th:nth-child(3),
.management-summary-table td:nth-child(3) {
  width: 10%;
}

.management-summary-table th:nth-child(4),
.management-summary-table td:nth-child(4) {
  width: 9%;
}

.management-summary-table th:nth-child(5),
.management-summary-table td:nth-child(5) {
  width: 6%;
}

.management-summary-table .management-rate-cell {
  padding: 2px 5px;
}

.management-rate-input {
  width: 100%;
  min-width: 0;
  height: 24px;
  border: 1px solid #8bc6ae;
  border-radius: 7px;
  padding: 0 4px;
  color: #0b5a45;
  background: #f7fffb;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  outline: none;
}

.management-rate-input:focus {
  border-color: #157257;
  box-shadow: 0 0 0 2px rgba(21, 114, 87, 0.12);
}

.management-summary-table th:nth-child(6),
.management-summary-table td:nth-child(6) {
  width: 10%;
}

.management-summary-table th:nth-child(7),
.management-summary-table td:nth-child(7) {
  width: 11%;
}

.management-summary-table th:nth-child(8),
.management-summary-table td:nth-child(8) {
  width: 11%;
}

.management-summary-table .management-threshold-value {
  font-variant-numeric: tabular-nums;
}

.management-summary-table th:last-child,
.management-summary-table td:last-child {
  width: 6%;
  border-right: 0;
  padding-right: 2px;
  padding-left: 2px;
  text-align: center;
}

.management-summary-table .management-detail-cell {
  text-align: center;
}

.management-settlement-cell { text-align: center; }
.management-threshold-disabled { color: #8998a5; }
.management-threshold-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 66px; min-height: 22px; border: 1px solid transparent; border-radius: 5px; padding: 1px 5px; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.management-threshold-badge.is-met { color: #166444; background: #ddf4e6; border-color: #b8e4ca; }
.management-threshold-badge.is-unmet { color: #9a5d0b; background: #fff0d5; border-color: #f4d7a5; }
.management-threshold-badge.is-approved { color: #3774c2; background: #e6effb; border-color: #c6d6ec; }
.management-threshold-badge:hover { filter: brightness(.96); }
.management-status-pair { display: inline-grid; grid-template-columns: 59px 34px; align-items: center; gap: 4px; width: 97px; vertical-align: middle; border: 0; padding: 0; background: transparent; white-space: nowrap; cursor: pointer; }
.management-status-pair .management-threshold-badge { box-sizing: border-box; width: 100%; min-width: 0; min-height: 22px; padding: 1px 3px; font-size: 12px; cursor: inherit; }
.management-status-pair.is-single .management-threshold-badge { grid-column: 1 / -1; }
.management-status-pair:focus-visible { outline: 2px solid #7ea4d5; outline-offset: 2px; }

.management-summary-table tbody tr:nth-child(odd of :not(.management-summary-total-row)) td {
  background: #ffffff;
}

.management-summary-table tbody tr:nth-child(even of :not(.management-summary-total-row)) td {
  background: #f3fbf7;
}

.management-summary-table .management-name-cell {
  padding: 3px 8px;
}

.management-name-content span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-summary-table .employee-ledger-detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  max-width: 100%;
  border-color: #8bc6ae;
  margin: 0 auto;
  padding: 0 6px;
  color: #0b5a45;
  background: #f3fbf7;
}

.management-summary-table .employee-ledger-detail-button:hover {
  border-color: #157257;
  color: #0b3f31;
  background: #e2f1eb;
}

@media (max-width: 900px) {
  .management-summary-table th:first-child,
  .management-summary-table td:first-child { width: 24%; }
  .management-summary-table th:nth-child(6),
  .management-summary-table td:nth-child(6),
  .management-summary-table th:nth-child(7),
  .management-summary-table td:nth-child(7),
  .management-summary-table th:nth-child(8),
  .management-summary-table td:nth-child(8) { width: 13%; }
  .management-summary-table :is(th, td) { padding-inline: 2px; font-size: 12px; }
  .management-summary-table .management-name-cell { padding-inline: 3px; }
  .management-summary-table .management-rate-cell { padding-inline: 2px; }
  .management-summary-table .management-rate-input { padding-inline: 1px; font-size: 12px; }
  .management-summary-table .employee-ledger-detail-button { min-width: 0; padding-inline: 2px; font-size: 12px; }
  .management-summary-table .management-status-pair { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, .64fr); gap: 2px; }
  .management-summary-table .management-status-pair .management-threshold-badge { font-size: 11px; }
}

.management-commission-value,
.management-cny-amount {
  color: var(--money-cny) !important;
  font-weight: 400;
  letter-spacing: 0;
}

.management-commission-value {
  text-align: center !important;
  padding-right: 6px !important;
  padding-left: 6px !important;
}

.management-commission-value .management-cny-amount {
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
}

.management-cny-amount > span {
  color: var(--money-cny) !important;
  display: inline-block;
  margin-left: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  vertical-align: baseline;
}

.management-name-content {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 100%;
}

.management-name-content strong {
  flex: 0 0 auto;
  overflow: hidden;
  color: #354a67;
  font-size: 15px;
  font-weight: 600;
  line-height: 17px;
  text-overflow: ellipsis;
}

.management-name-content span {
  min-width: 0;
  overflow: hidden;
  color: #64748b;
  font-size: 15px;
  line-height: 17px;
  text-overflow: ellipsis;
}

.management-detail-row {
  display: grid;
  grid-template-columns: 70px minmax(120px, 1fr) minmax(140px, max-content) 54px;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border-bottom: 1px solid var(--detail-row-line);
  padding: 2px 8px;
  color: #354a67;
  font-size: 14px;
}

.management-detail-row:nth-child(odd) {
  background: #ffffff;
}

.management-detail-row:nth-child(even) {
  background: var(--table-row-alt);
}

.monthly-detail-modal.is-management-detail .management-detail-row {
  border-bottom-color: #b8decf;
}

.monthly-detail-modal.is-management-detail .management-detail-row:nth-child(odd) {
  background: #ffffff;
}

.monthly-detail-modal.is-management-detail .management-detail-row:nth-child(even) {
  background: #f3fbf7;
}

.management-detail-row span {
  color: #64748b;
}

.management-detail-row b {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.management-detail-row strong {
  color: #354a67;
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.management-detail-row strong .management-cny-amount {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
}

.management-edit-button {
  min-width: 48px;
  height: 24px;
  border-color: #8bc6ae;
  padding: 0 8px;
  color: #0b5a45;
  background: #f3fbf7;
}

.management-edit-button:hover {
  border-color: #157257;
  color: #0b3f31;
  background: #e2f1eb;
}

.management-edit-form .monthly-note-action {
  border-color: #8bc6ae;
  color: #0b5a45;
  background: #f3fbf7;
}

.management-edit-form .monthly-note-action:hover {
  border-color: #157257;
  color: #0b3f31;
  background: #e2f1eb;
}

.management-edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: end;
  border-bottom: 1px solid #b8decf;
  padding: 8px;
  background: #f3fbf7;
}

.monthly-detail-modal.is-management-edit .management-edit-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px;
  border-bottom: 0;
  padding: 12px 14px;
}

.management-edit-form label {
  gap: 4px;
  font-size: 13px;
}

.management-edit-form input {
  height: 30px;
  border-color: #b8decf;
  padding: 0 8px;
  font-size: 14px;
  text-align: right;
}

.management-edit-form input[readonly] {
  color: #354a67;
  background: #f9fbfd;
}

.management-edit-save-button {
  align-self: end;
  width: 100%;
  height: 30px;
  min-width: 96px;
}

.management-commission-help {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 8px;
  padding: 7px 9px;
  color: #385f53;
  background: #e8f5ef;
  font-size: 13px;
  font-weight: 700;
}

.is-hidden {
  display: none;
}

.auto-fit-text {
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.monthly-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(53, 74, 103, 0.32);
}

.monthly-detail-modal.is-hidden {
  display: none;
}

.monthly-detail-modal.is-usdt-down-detail {
  place-items: center;
  padding: 16px;
}

.monthly-detail-modal.is-usdt-down-detail .monthly-detail-dialog {
  width: min(1080px, calc(100vw - 32px));
  height: auto;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: 0;
}

.monthly-detail-modal.is-usdt-down-detail .monthly-detail-dialog-body {
  grid-template-rows: auto;
  min-height: 0;
  align-content: start;
  padding: 10px;
  overflow: hidden;
}

.employee-salary-result-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(53, 74, 103, 0.36);
}

.employee-salary-result-modal.is-hidden {
  display: none;
}

.employee-salary-result-dialog {
  width: min(560px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid #c0d3eb;
  border-radius: 12px;
  padding: 0 18px 18px;
  background: #ffffff;
  box-shadow: 0 20px 54px rgba(53, 74, 103, 0.22);
}

.employee-salary-result-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -18px 16px;
  border-bottom: 1px solid #d9e1ec;
  padding: 14px 18px;
  background: #f0f5fc;
}

.employee-salary-result-dialog h2,
.employee-salary-result-dialog p {
  margin: 0;
}

.employee-salary-result-dialog h2 {
  color: #354a67;
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}

.employee-salary-result-dialog header p {
  margin-top: 3px;
  color: #667085;
  font-size: 13px;
}

.employee-salary-result-dialog header button,
.employee-salary-result-confirm {
  height: 36px;
  border: 1px solid #abc2e1;
  border-radius: 8px;
  padding: 0 18px;
  color: #2b69b9;
  background: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.employee-salary-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.employee-salary-result-grid article {
  display: grid;
  place-items: center;
  gap: 5px;
  min-height: 78px;
  border: 1px solid #ccd8e7;
  border-radius: 10px;
  padding: 10px 8px;
  background: #f9fbfd;
  text-align: center;
}

.employee-salary-result-grid span {
  color: #52657d;
  font-size: 13px;
  font-weight: 700;
}

.employee-salary-result-grid strong {
  color: #354a67;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
}

.employee-salary-result-grid .is-success-result {
  border-color: #9ed9bf;
  background: #edf9f3;
}

.employee-salary-result-grid .is-success-result strong,
.employee-salary-result-grid .is-amount-result strong {
  color: #0f6f5a;
}

.employee-salary-result-grid .is-warning-result {
  border-color: #efc0c0;
  background: #fff5f5;
}

.employee-salary-result-grid .is-warning-result strong {
  color: #a20d0d;
}

.employee-salary-result-note {
  min-height: 42px;
  margin-top: 12px !important;
  border-radius: 8px;
  padding: 10px 12px;
  color: #4f6278;
  background: #f5f8fb;
  font-size: 13px;
  line-height: 1.55;
}

.employee-salary-result-confirm {
  display: block;
  min-width: 132px;
  margin: 14px 0 0 auto;
  border-color: #3275cb;
  color: #ffffff;
  background: #3275cb;
}

.monthly-detail-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(620px, calc(100vw - 44px));
  max-height: 82vh;
  overflow: hidden;
  border: 1px solid #c0d3eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 44px rgba(53, 74, 103, 0.18);
}

.monthly-detail-modal.is-employee-ledger-detail {
  inset: 0 auto auto 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  place-items: center;
  padding: 10px;
  overflow: hidden;
}

.monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog {
  width: min(1120px, calc(100vw - 20px));
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);
  margin: 0;
}

.monthly-detail-modal.is-employee-transfer-import .monthly-detail-dialog {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
}

.monthly-detail-modal.is-employee-transfer-import .monthly-detail-dialog-head {
  padding: 8px 12px;
}

.monthly-detail-modal.is-employee-transfer-import .monthly-detail-dialog-body {
  gap: 6px;
  padding: 7px;
}

.monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-body {
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
}

.monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head {
  gap: 8px;
  padding: 8px 10px;
}

.monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head > div {
  gap: 10px;
}

.monthly-detail-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #d9e1ec;
  background: #f0f5fc;
}

.monthly-detail-dialog-head > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.monthly-detail-dialog-head h2 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: #354a67;
  font-size: 15px;
  font-weight: 700;
}

.monthly-detail-dialog-head h2 span {
  display: inline-block;
  margin: 0;
  color: #354a67;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.monthly-detail-modal.is-management-detail .monthly-detail-dialog {
  border-color: #a8d5c5;
}

.monthly-detail-modal.is-management-detail .monthly-detail-dialog-head {
  border-bottom-color: #b8decf;
  background: #e8f5ef;
}

.monthly-detail-modal.is-management-detail .monthly-detail-dialog-head h2,
.monthly-detail-modal.is-management-detail .monthly-detail-dialog-head h2 span {
  color: #0b3f31;
}

.monthly-detail-modal.is-management-detail .monthly-detail-close {
  border-color: #8bc6ae;
  color: #0b5a45;
  background: #f3fbf7;
}

.monthly-detail-modal.is-management-detail .monthly-detail-close:hover {
  border-color: #157257;
  color: #0b3f31;
  background: #e2f1eb;
}

.employee-title-group-select {
  height: 28px;
  min-width: 96px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 0 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

.employee-title-leader-button {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #aac1e0;
  border-radius: 8px;
  color: #2c69ba;
  background: #f8fbfe;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.employee-title-sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #586d89;
  background: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.employee-title-sort-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #3275cb;
}

.employee-title-group-edit {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #557194;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.employee-title-group-edit:hover {
  border-color: #4580ce;
  color: #2c69ba;
  background: #f6f9fd;
}

.group-rename-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(47, 74, 109, 0.34);
}

.group-rename-modal.is-hidden {
  display: none;
}

.exchange-rate-modal {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(47, 74, 109, 0.34);
}

.exchange-rate-modal.is-hidden { display: none; }

.exchange-rate-dialog {
  width: min(560px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  border: 1px solid #ccd8e7;
  border-radius: 12px;
  padding: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(44, 85, 137, 0.24);
}

.exchange-rate-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.exchange-rate-dialog h2,
.exchange-rate-dialog h3,
.exchange-rate-dialog p { margin: 0; }

.exchange-rate-dialog header p {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
}

.exchange-rate-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.exchange-rate-form label {
  display: grid;
  gap: 6px;
  color: #566a84;
  font-size: 13px;
  font-weight: 700;
}

.exchange-rate-form input {
  height: 38px;
  border: 1px solid #becada;
  border-radius: 8px;
  padding: 0 10px;
  font: inherit;
}

.exchange-rate-form .soft-button {
  grid-column: 2;
  min-height: 36px;
}

.exchange-rate-status {
  align-self: center;
  min-height: 20px;
  color: #16804a;
  font-size: 13px;
}

.exchange-rate-status.is-error { color: #b42318; }

.exchange-rate-history {
  margin-top: 18px;
  border-top: 1px solid #dee5ef;
  padding-top: 14px;
}

.exchange-rate-history h3 { font-size: 14px; }

#exchangeRateHistoryList {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.exchange-rate-history-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 10px;
  border-radius: 7px;
  padding: 7px 9px;
  background: #f5f8fb;
  color: #566a84;
  font-size: 12px;
}

.exchange-rate-history-empty {
  padding: 8px 0;
  color: #8493a5;
  font-size: 12px;
}

.group-rename-dialog {
  width: min(360px, calc(100vw - 40px));
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #ccd8e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(44, 85, 137, 0.24);
}

.group-rename-dialog h2 {
  margin: 0;
  font-size: 16px;
}

.group-rename-dialog input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #becada;
  border-radius: 8px;
  font: inherit;
}

.group-rename-dialog > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.group-rename-dialog button {
  height: 34px;
  min-width: 72px;
  border: 1px solid #3779d0;
  border-radius: 8px;
  color: #fff;
  background: #3779d0;
  font-weight: 700;
}

.group-rename-dialog button.is-secondary {
  border-color: #ccd8e7;
  color: #52677c;
  background: #fff;
}

.employee-title-leader-button:hover:not(:disabled) {
  border-color: #4580ce;
  background: #edf4fc;
}

.employee-title-leader-button.is-current,
.employee-title-leader-button:disabled {
  border-color: #d1d8e2;
  color: #7a8998;
  background: #eef1f5;
  cursor: default;
}

#monthlyDetailSubtitle {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.monthly-detail-title-total {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  color: #354a67;
  font-size: 14px;
  font-weight: 800;
}

.monthly-detail-title-total > span:first-child {
  color: #52657d;
  font-weight: 700;
}

.monthly-detail-title-total em {
  color: #52657d;
  font-style: normal;
}

.monthly-detail-title-total .is-cny-part {
  color: #a20d0d;
}

.monthly-income-header-total {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  align-items: center;
  margin-left: 10px;
  color: #354a67;
}

.monthly-income-header-total > span {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  padding: 0 10px;
  border-left: 1px solid #ccd8e7;
  white-space: nowrap;
}

.monthly-income-header-total > span:last-child {
  padding-right: 0;
}

.monthly-income-header-total small {
  color: #60758e;
  font-size: 11px;
  font-weight: 700;
}

.monthly-income-header-total b {
  color: #3063a6;
  font-size: 14px;
  font-weight: 800;
}

.monthly-income-header-total .is-cny b {
  color: #a20d0d;
}

.monthly-inline-amount {
  color: #354a67;
  font-weight: 400;
}

.monthly-inline-amount span,
.monthly-group-head strong span,
.monthly-dialog-row strong span,
.monthly-category-summary-head strong span,
.monthly-category-summary-card strong span {
  display: inline;
  color: #354a67;
  vertical-align: baseline;
}

.monthly-group-head strong span,
.monthly-group-head strong em,
.monthly-category-summary-head strong span,
.monthly-category-summary-head strong em,
.monthly-category-summary-card strong span,
.monthly-category-summary-card strong em {
  font-weight: inherit;
}

.monthly-inline-amount em,
.monthly-group-head strong em,
.monthly-dialog-row strong em,
.monthly-category-summary-head strong em,
.monthly-category-summary-card strong em {
  margin: 0 3px;
  color: #354a67;
  font-style: normal;
  vertical-align: baseline;
}

.monthly-inline-amount .is-cny-part,
.monthly-group-head strong .is-cny-part,
.monthly-dialog-row strong .is-cny-part,
.monthly-category-summary-head strong .is-cny-part,
.monthly-category-summary-card strong .is-cny-part {
  color: var(--money-cny);
}

.monthly-detail-close {
  height: 28px;
  min-width: 58px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

.monthly-detail-dialog-body {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 8px;
  overflow: auto;
}

.employee-detail-panel {
  display: grid;
  gap: 6px;
}

.employee-detail-summary-section .employee-detail-panel {
  padding: 8px;
}

.employee-detail-formula {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.employee-detail-formula.is-balance-formula {
  grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr);
  gap: 4px;
}

.employee-detail-formula.is-balance-formula .employee-detail-box {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 50px;
  padding: 5px 6px;
  text-align: center;
}

.employee-detail-formula.is-balance-formula .employee-detail-box > span {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.employee-detail-formula.is-balance-formula .employee-detail-box > span:last-child {
  color: #354a67;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
}

.employee-detail-formula.is-balance-formula .employee-detail-box.is-income-box .employee-detail-amount {
  color: #0f6f5a;
}

.employee-detail-formula.is-balance-formula .employee-detail-box.is-deduction-box .employee-detail-amount {
  color: #a20d0d;
}

.employee-detail-formula.is-balance-formula .employee-detail-box.is-final-result-box .employee-detail-amount {
  color: #354a67;
}

.employee-detail-formula.is-balance-formula .employee-detail-box.is-final-result-box .employee-detail-amount.is-positive-value,
.employee-detail-formula.is-balance-formula .employee-detail-box.is-final-result-box .employee-detail-amount.is-final-positive-value {
  color: #a20d0d;
}

.employee-detail-formula.is-balance-formula .employee-detail-box.is-final-result-box .employee-detail-amount.is-negative-value,
.employee-detail-formula.is-balance-formula .employee-detail-box.is-final-result-box .employee-detail-amount.is-final-negative-value {
  color: #354a67;
}

.employee-detail-formula.is-balance-formula .employee-detail-box .employee-detail-amount.is-zero-value {
  color: #354a67;
}

.employee-detail-formula.is-balance-formula .employee-detail-input-wrap {
  width: 100%;
  max-width: 132px;
  justify-content: center;
}

.employee-detail-formula.is-balance-formula .employee-detail-input-wrap input {
  text-align: center;
}

.employee-detail-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 40px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 6px 9px;
  background: #fcfdfe;
}

.employee-detail-input-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  width: 120px;
  height: 26px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 0 8px;
  background: #ffffff;
}

.employee-detail-input-wrap input {
  min-width: 0;
  width: 100%;
  border: 0;
  padding: 0;
  color: #354a67;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  outline: none;
}

.employee-detail-input-wrap span {
  color: #354a67;
  font-size: 14px;
  font-weight: 700;
}

.employee-detail-input-wrap.is-positive-value input,
.employee-detail-input-wrap.is-positive-value span {
  color: var(--money-cny);
}

.employee-detail-input-wrap:focus-within {
  box-shadow: inset 0 0 0 1px #abc2e1;
}

.employee-detail-box span,
.employee-detail-line span,
.employee-detail-line b {
  min-width: 0;
  color: #586d89;
  font-size: 14px;
  font-weight: 400;
}

.employee-detail-box .employee-detail-input-wrap span,
.employee-detail-line .employee-detail-input-wrap span {
  color: #354a67;
  font-size: 14px;
  font-weight: 700;
}

.employee-detail-amount {
  color: #354a67;
  font-size: 15px;
  font-weight: 700;
}

.employee-detail-amount.is-positive-value {
  color: var(--money-cny);
}

.employee-detail-amount.is-negative-value {
  color: #354a67;
}

.employee-detail-amount.is-zero-value {
  color: #354a67;
}

.employee-detail-amount.is-income-value {
  color: #0f6f5a;
}

.employee-detail-amount.is-deduction-value {
  color: #a20d0d;
}

.employee-detail-amount.is-final-positive-value {
  color: #a20d0d;
}

.employee-detail-amount.is-final-negative-value {
  color: #354a67;
}

.employee-detail-op {
  color: #354a67;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.employee-detail-actions {
  display: flex;
  justify-content: flex-end;
}

.employee-detail-save-button {
  height: 34px;
  min-width: 96px;
  border: 1px solid #3275cb;
  border-radius: 8px;
  color: #ffffff;
  background: #3275cb;
  font-size: 15px;
  font-weight: 800;
}

.employee-detail-save-button:hover {
  border-color: #2a65b3;
  background: #2a65b3;
}

.employee-detail-section {
  display: block;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: #ffffff;
}

.employee-flow-detail-section .monthly-dialog-empty {
  padding: 8px 12px;
  font-size: 14px;
}

.employee-flow-detail-section {
  max-height: none;
  overflow-y: visible;
}

.employee-flow-detail-section:has(.monthly-dialog-empty) {
  max-height: none;
}

.employee-commission-detail-section {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  height: auto;
}

.employee-detail-section h3 {
  margin: 0;
  padding: 7px 10px;
  border-bottom: 1px solid #d9e1ec;
  color: #354a67;
  background: #f0f5fc;
  font-size: 15px;
  font-weight: 700;
}

.employee-settlement-overview-section,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-summary-section {
  border-color: #c0d3eb;
  background: #f9fbfe;
}

.employee-settlement-overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.employee-settlement-card,
.employee-detail-mini-card {
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 60px;
  border: 1px solid #c0d3eb;
  border-radius: 8px;
  padding: 7px 10px;
  background: #ffffff;
}

.employee-settlement-card {
  grid-template-rows: max-content 32px;
  gap: 5px;
  min-height: 72px;
}

.employee-settlement-card > span,
.employee-detail-mini-card > span {
  min-width: 0;
  color: #586d89;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.employee-settlement-card-value,
.employee-detail-mini-card-value {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #354a67;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
}

.employee-settlement-card-value {
  justify-content: flex-end;
  box-sizing: border-box;
  height: 32px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 0 10px;
  background: #ffffff;
}

.employee-settlement-card-value > span,
.employee-detail-mini-card-value > span {
  display: inline-flex;
  min-width: 0;
}

.employee-settlement-card small,
.employee-detail-mini-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #667085;
  font-size: 11px;
  font-weight: 600;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-settlement-card small {
  display: none;
}

.employee-settlement-card.is-income .employee-detail-amount,
.employee-detail-mini-card.is-income .employee-detail-amount {
  color: #0f6f5a;
}

.employee-detail-mini-card.is-commission-result .employee-detail-amount {
  color: #a20d0d;
}

.employee-settlement-card.is-deduction .employee-detail-amount {
  color: #a20d0d;
}

.employee-settlement-card.is-final .employee-detail-amount.is-final-positive-value {
  color: #a20d0d;
}

.employee-settlement-card.is-final .employee-detail-amount.is-final-negative-value {
  color: #354a67;
}

.employee-detail-card-grid {
  display: grid;
  gap: 6px;
  padding: 6px;
}

.employee-points-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.employee-points-grid .employee-detail-mini-card {
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 10px;
}

.employee-points-grid .employee-detail-mini-card > span {
  font-size: 15px;
  line-height: 20px;
}

.employee-points-grid .employee-detail-mini-card-value {
  justify-content: flex-end;
  font-size: 15px;
  line-height: 21px;
}

.employee-points-grid .employee-detail-mini-card small {
  display: none;
}

.employee-detail-mini-card .employee-detail-input-wrap,
.employee-settlement-card .employee-detail-input-wrap {
  width: 100%;
  max-width: none;
}

.employee-settlement-card .employee-detail-input-wrap {
  height: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.employee-points-grid .employee-detail-mini-card .employee-detail-input-wrap {
  height: 30px;
}

.employee-detail-mini-card .employee-detail-input-wrap input,
.employee-settlement-card .employee-detail-input-wrap input {
  font-size: 15px;
}

.employee-income-deduction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.employee-salary-offset-panel {
  display: grid;
  grid-template-columns: 150px minmax(0, 1.15fr) minmax(0, 1.45fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 6px;
  margin: 0 8px 8px;
  padding: 6px;
  border: 1px solid #c0d3eb;
  border-radius: 7px;
  background: #f9fbfe;
}

.employee-salary-offset-title,
.employee-salary-offset-step {
  box-sizing: border-box;
  min-width: 0;
  min-height: 34px;
  border: 1px solid #d9e1ec;
  border-radius: 7px;
  padding: 5px 8px;
  background: #ffffff;
  font-size: 15px;
  line-height: 21px;
  white-space: nowrap;
}

.employee-salary-offset-title {
  display: flex;
  align-items: center;
  color: #3063a6;
  font-weight: 700;
}

.employee-salary-offset-step {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.employee-salary-offset-step > span {
  overflow: hidden;
  color: #586d89;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-salary-offset-step > b {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
}

.employee-salary-offset-step.is-income {
  border-color: #cfe7df;
  background: #f2fbf7;
}

.employee-salary-offset-step.is-deduction {
  border-color: #f0d0d0;
  background: #fff8f8;
}

.employee-salary-offset-step.is-final {
  background: #ffffff;
}

.employee-thb-cny-pair {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: 5px;
}

.employee-thb-cny-pair em {
  color: #354a67;
  font-style: normal;
}

.employee-income-deduction-block {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: #ffffff;
}

.employee-income-deduction-block h4 {
  margin: 0;
  padding: 6px 9px;
  border-bottom: 1px solid #d9e1ec;
  color: #354a67;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.employee-income-deduction-block.is-income-block h4 {
  color: #0b5a45;
  background: #eaf7f1;
}

.employee-usdt-down-flow-block h4,
.employee-transfer-flow-block h4 {
  color: #0b5a45;
  background: #eaf7f1;
}

.employee-income-deduction-block.is-deduction-block h4 {
  color: #8f1515;
  background: #fff1f1;
}

.employee-flow-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 4px 6px;
}

.employee-flow-side-stack {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.employee-flow-detail-block {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
}

.employee-flow-detail-block .monthly-dialog-empty {
  padding: 10px 12px;
  font-size: 15px;
}

.employee-flow-detail-block h4 {
  box-sizing: border-box;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 15px;
  line-height: 21px;
}

.employee-flow-detail-block .monthly-dialog-row {
  min-height: 28px;
  padding-block: 2px;
}

.employee-detail-line {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 6px;
  min-height: 31px;
  border-bottom: 1px solid var(--detail-row-line);
  padding: 3px 9px;
}

.employee-detail-line > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-detail-line:nth-of-type(odd) {
  background: #ffffff;
}

.employee-detail-line:nth-of-type(even) {
  background: var(--table-row-alt);
}

.employee-detail-line:last-child {
  background: #eff4fb;
}

.employee-detail-line b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-detail-line strong {
  text-align: right;
}

.employee-detail-tone-line.is-income .employee-detail-amount,
.employee-detail-tone-line.is-income > span:last-child {
  color: #0f6f5a;
}

.employee-detail-tone-line.is-deduction .employee-detail-amount,
.employee-detail-tone-line.is-deduction > span:last-child {
  color: #a20d0d;
}

.employee-detail-tone-line.is-neutral .employee-detail-amount,
.employee-detail-tone-line.is-neutral > span:last-child {
  color: #354a67;
}

.employee-detail-tone-line .employee-detail-amount.is-zero-value {
  color: #354a67;
}

.employee-detail-total-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 32px;
  box-sizing: border-box;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 0 10px;
  color: #354a67;
  background: #ffffff;
  font-size: 17px;
  font-weight: 900;
}

.employee-detail-total-box .employee-detail-amount {
  font-size: 17px;
  font-weight: 900;
}

.employee-usdt-down-line b {
  color: #3063a6;
}

.employee-usdt-down-view:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.monthly-dialog-row {
  display: grid;
  grid-template-columns: 52px minmax(120px, 1fr) minmax(108px, max-content);
  gap: 5px;
  align-items: center;
  min-height: 28px;
  border-bottom: 1px solid var(--detail-row-line);
  padding: 2px 8px;
}

.monthly-dialog-row:nth-of-type(odd) {
  background: #ffffff;
}

.monthly-dialog-row:nth-of-type(even) {
  background: var(--table-row-alt);
}

.monthly-dialog-row span,
.monthly-dialog-row b,
.monthly-dialog-row strong {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.monthly-dialog-row span {
  color: #667085;
}

.monthly-dialog-row b {
  overflow: hidden;
  color: #354a67;
  text-overflow: clip;
  white-space: nowrap;
}

.monthly-dialog-row strong {
  color: #354a67;
  text-align: right;
  white-space: nowrap;
}

.monthly-dialog-row strong .is-cny-part {
  white-space: nowrap;
}

.monthly-detail-dialog:has(.monthly-company-expense-list-view) {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}

.monthly-detail-dialog:has(.monthly-company-expense-list-view) .monthly-detail-dialog-head {
  gap: 8px;
  padding: 12px 10px;
}

.monthly-detail-dialog:has(.monthly-company-expense-list-view) .monthly-detail-dialog-body {
  padding: 8px 4px;
}

.monthly-company-expense-list-view {
  display: grid;
  overflow: hidden;
  border: 1px solid #ccd8e7;
  border-radius: 10px;
  background: #ffffff;
}

.monthly-company-expense-row {
  grid-template-columns: 48px minmax(0, 1fr) 124px 104px;
  gap: 3px;
  min-height: 31px;
  padding: 1px 4px;
  border-left: 3px solid transparent;
}

.monthly-company-exchange-row {
  grid-template-columns: 48px minmax(0, 1fr) minmax(240px, max-content);
}

.monthly-company-expense-row > span {
  white-space: nowrap;
}

.monthly-company-expense-row span,
.monthly-company-expense-row b,
.monthly-company-expense-row strong {
  font-size: 14px;
  line-height: 18px;
}

.monthly-company-expense-row.is-expense {
  border-left-color: #7da3d5;
  background: #f4f7fc;
}

.monthly-company-expense-row.is-profit {
  border-left-color: #e5a844;
  background: #fff8eb;
}

.monthly-company-expense-row.is-excluded {
  border-left-color: #a9b4c2;
  background: #f6f7f9;
}

.monthly-company-expense-treatment {
  width: 100%;
  min-width: 0;
  height: 26px;
  padding: 0 4px;
  border: 1px solid #bfcde0;
  border-radius: 7px;
  background: #ffffff;
  color: #3063a6;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.monthly-company-expense-treatment.is-expense {
  border-color: #aac3e4;
  background: #edf3fb;
  color: #275fa8;
}

.monthly-company-expense-treatment.is-profit {
  border-color: #edc57d;
  background: #fff2d9;
  color: #925d08;
}

.monthly-company-expense-treatment.is-excluded {
  border-color: #c8d0da;
  background: #eff1f4;
  color: #5f6b7a;
}

.monthly-company-expense-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.monthly-company-expense-summary-card {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid #c0cfe2;
  border-radius: 9px;
  background: #f4f7fc;
  color: #416695;
  white-space: nowrap;
}

.monthly-company-expense-summary-card b {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
}

.monthly-company-expense-summary-card span,
.monthly-company-expense-summary-card strong,
.monthly-company-expense-summary-card em {
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.monthly-company-expense-summary-card em {
  color: #a22525;
}

.monthly-company-expense-summary-card.is-profit {
  border-color: #ebc172;
  background: #fff6e6;
  color: #855506;
}

.monthly-company-expense-summary-card.is-excluded {
  border-color: #cbd3dd;
  background: #f3f4f6;
  color: #5f6b7a;
}

.employee-unified-flow-row {
  grid-template-columns: 48px 74px minmax(0, 1fr) minmax(112px, max-content);
  min-height: 25px;
}

.employee-unified-flow-row em {
  min-width: 0;
  overflow: hidden;
  color: #52657d;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-unified-flow-amount {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}

.employee-unified-flow-amount em {
  margin: 0 1px;
  color: #354a67;
  font-style: normal;
}

.employee-unified-flow-amount .employee-detail-amount {
  font-size: 16px;
}

.employee-usdt-down-flow-row {
  grid-template-columns: 48px minmax(0, 1fr) minmax(74px, max-content) minmax(82px, max-content) 92px;
  min-height: 25px;
}

.employee-usdt-down-flow-row > b {
  min-width: 0;
}

.employee-usdt-down-flow-row > strong,
.employee-usdt-down-flow-row > em {
  overflow: hidden;
  color: #3063a6;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-usdt-down-flow-row > strong {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.employee-usdt-down-flow-row > strong .monthly-note-status {
  min-width: 42px;
  min-height: 18px;
  padding-inline: 4px;
  font-size: 11px;
  line-height: 16px;
}

.employee-usdt-down-flow-row.is-pending > strong > span,
.employee-usdt-down-flow-row.is-pending > em {
  color: #087955;
}

.employee-usdt-down-flow-row > em {
  color: var(--money-cny);
}

.employee-usdt-down-flow-row .monthly-usdt-down-row-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.employee-usdt-down-flow-row .monthly-note-action {
  min-height: 22px;
  padding-inline: 4px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
}

.employee-usdt-down-readonly-label {
  justify-self: end;
  color: #7890a5;
  font-size: 12px;
  line-height: 18px;
}

.employee-usdt-down-flow-edit-row {
  grid-template-columns: 90px 108px minmax(120px, 1fr) 76px 82px 92px;
  height: auto !important;
  min-height: 34px !important;
  padding-block: 3px !important;
  background: #f7fafe;
}

.employee-usdt-down-flow-edit-row input,
.employee-usdt-down-flow-edit-row textarea {
  box-sizing: border-box;
  min-width: 0;
  height: 27px;
  padding: 2px 6px;
  border: 1px solid #c5d2e2;
  border-radius: 6px;
  color: #345989;
  background: #ffffff;
  font: inherit;
  font-size: 13px;
  line-height: 18px;
}

.employee-usdt-down-flow-edit-row textarea {
  min-height: 27px;
  overflow: hidden;
  resize: vertical;
}

.employee-usdt-down-total-line {
  grid-template-columns: 92px minmax(0, 1fr) 1px;
  background: #eff4fb;
}

.employee-usdt-down-total-line b {
  color: #3063a6;
  font-weight: 800;
  text-align: right;
}

.employee-flow-detail-block .employee-unified-flow-row,
.employee-flow-detail-block .employee-usdt-down-flow-row {
  box-sizing: border-box;
  min-height: 28px;
  height: 28px;
  padding-block: 1px;
}

.employee-flow-detail-block .employee-unified-flow-row > *,
.employee-flow-detail-block .employee-usdt-down-flow-row > * {
  font-size: 15px;
  line-height: 20px;
}

.employee-usdt-down-flow-row.is-placeholder {
  pointer-events: none;
}

.employee-flow-total-line,
.employee-usdt-down-total-line {
  box-sizing: border-box;
  min-height: 30px;
  height: 30px;
  padding-block: 2px;
  border-bottom: 0;
}

.employee-flow-total-line {
  grid-template-columns: 92px minmax(0, 1fr) 118px;
  background: #eff4fb;
}

.employee-flow-total-line > span:last-child {
  text-align: right;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-section {
  border-radius: 7px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-section h3 {
  padding: 5px 10px;
  font-size: 15px;
  line-height: 21px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-line {
  min-height: 30px;
  padding-block: 2px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-line span,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-line b {
  font-size: 15px;
  line-height: 21px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-input-wrap {
  height: 30px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-grid {
  gap: 8px;
  padding: 6px 8px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block {
  border-radius: 7px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block h4 {
  min-height: 30px;
  padding: 4px 10px;
  font-size: 15px;
  line-height: 21px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-summary-section .employee-detail-panel {
  padding: 6px 8px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-summary-section .employee-settlement-overview-grid {
  padding: 0;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-formula.is-balance-formula .employee-detail-box {
  gap: 4px;
  min-height: 50px;
  padding: 5px 7px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-formula.is-balance-formula .employee-detail-box > span:last-child {
  font-size: 15px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-formula.is-balance-formula .employee-detail-input-wrap {
  height: 28px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-actions {
  min-height: 38px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-save-button {
  height: 36px;
  min-width: 108px;
  font-size: 16px;
}

.employee-transfer-net-note {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin-top: 0;
  padding: 5px 10px;
  border: 1px solid #cddaec;
  border-radius: 7px;
  background: #ffffff;
  color: #647a98;
  font-size: 15px;
  line-height: 21px;
}

.employee-transfer-net-note span {
  color: #354a67;
  font-weight: 800;
}

.employee-transfer-net-note b {
  margin-left: auto;
}

.employee-transfer-net-note em {
  font-style: normal;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-detail-section h3,
.monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block h4,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card > span,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-mini-card > span,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card-value,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-mini-card-value,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-input-wrap input,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-input-wrap span,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-amount,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-line span,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-line b,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-line strong,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-total-box,
.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row > strong,
.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row > em,
.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-total-line b,
.monthly-detail-modal.is-employee-ledger-detail .employee-transfer-net-note span,
.monthly-detail-modal.is-employee-ledger-detail .employee-transfer-net-note b {
  font-weight: 400;
}

.monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head h2,
.monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head h3,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-section h3,
.monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block h4,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card > span,
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-mini-card > span,
.monthly-detail-modal.is-employee-ledger-detail .employee-transfer-net-note span {
  font-weight: 700;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card.is-editable .employee-detail-input-wrap input,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card.is-editable .employee-detail-input-wrap span,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card.is-final .employee-detail-amount {
  font-weight: 700;
}

.employee-transfer-smart-panel,
.employee-transfer-manual-panel,
.employee-transfer-history-panel {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #c0d3eb;
  border-radius: 8px;
  background: #f9fbfe;
}

.employee-transfer-smart-panel label,
.employee-transfer-manual-panel label {
  display: grid;
  gap: 5px;
  color: #406493;
  font-size: 12px;
  font-weight: 800;
}

.employee-transfer-smart-panel input,
.employee-transfer-smart-panel textarea,
.employee-transfer-manual-panel input,
.employee-transfer-manual-panel select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d4dfee;
  border-radius: 8px;
  padding: 7px 9px;
  color: #354a67;
  background: #ffffff;
  font: inherit;
  font-weight: 700;
}

.employee-transfer-smart-toolbar {
  display: grid;
  grid-template-columns: 180px minmax(160px, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.employee-transfer-manual-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.employee-transfer-manual-panel h3 {
  margin: 0;
  color: #354a67;
  font-size: 15px;
  line-height: 18px;
}

.employee-transfer-manual-grid {
  display: grid;
  grid-template-columns: 148px minmax(120px, 1fr) minmax(120px, 1fr) 108px 102px minmax(140px, 1fr);
  gap: 7px;
  align-items: end;
}

.employee-transfer-manual-grid .is-wide {
  grid-column: 1 / -1;
}

.employee-transfer-smart-panel textarea {
  resize: vertical;
  min-height: 86px;
}

.employee-transfer-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.employee-transfer-examples span {
  padding: 4px 7px;
  border: 1px solid #d4dfee;
  border-radius: 999px;
  color: #647a98;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.employee-transfer-smart-status {
  min-height: 32px;
  color: #647a98;
  font-size: 12px;
  font-weight: 800;
  align-self: center;
  line-height: 16px;
}

.employee-transfer-smart-status.warn {
  color: #a16207;
}

.employee-transfer-smart-status.success {
  color: #0b7a55;
}

.employee-transfer-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.employee-transfer-smart-toolbar .employee-detail-save-button,
.employee-transfer-manual-head .employee-detail-save-button,
.employee-transfer-manual-head .employee-detail-secondary-button {
  min-height: 34px;
  padding: 6px 12px;
  white-space: nowrap;
}

.employee-detail-secondary-button {
  border: 1px solid #c0d3eb;
  border-radius: 8px;
  padding: 7px 12px;
  color: #406493;
  background: #ffffff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.employee-transfer-history-panel h3 {
  margin: 0;
  color: #354a67;
  font-size: 14px;
  line-height: 18px;
}

.employee-transfer-history-list {
  display: grid;
  gap: 5px;
}

.employee-transfer-history-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1.15fr) 96px minmax(0, 1fr) 54px 100px;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid #d4dfee;
  border-radius: 7px;
  background: #ffffff;
  color: #354a67;
  font-size: 12px;
  font-weight: 700;
}

.employee-transfer-history-row b,
.employee-transfer-history-row em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-transfer-history-row strong {
  text-align: right;
  white-space: nowrap;
}

.employee-transfer-history-row em {
  color: #647a98;
  font-style: normal;
}

.employee-transfer-history-row small {
  color: #0b7a55;
  text-align: right;
  font-weight: 800;
}

.employee-transfer-history-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 5px;
}

.employee-transfer-history-actions button {
  border: 1px solid #c0d3eb;
  border-radius: 999px;
  padding: 3px 7px;
  color: #2a66b4;
  background: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.employee-transfer-history-actions button.is-danger {
  border-color: #f3b5b5;
  color: #9a1b1b;
}

.employee-transfer-history-actions.is-empty {
  color: #8f1515;
  font-size: 12px;
  font-weight: 800;
}

.employee-transfer-history-row.is-voided {
  opacity: 0.68;
}

.employee-transfer-history-row.is-voided small {
  color: #8f1515;
}

.employee-transfer-history-empty {
  padding: 10px;
  border: 1px dashed #c0d3eb;
  border-radius: 8px;
  color: #728197;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.employee-performance-transfer-panel {
  display: grid;
  gap: 7px;
  margin-bottom: 7px;
  padding: 8px;
  border: 1px solid #abc2e1;
  border-radius: 8px;
  background: #f6f9fd;
}

.employee-performance-transfer-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: #647a98;
  font-size: 12px;
}

.employee-performance-transfer-summary span {
  white-space: nowrap;
}

.employee-performance-transfer-summary b,
.employee-performance-transfer-summary strong {
  color: #354a67;
  font-weight: 700;
}

.employee-performance-transfer-summary strong {
  color: #087955;
}

.employee-performance-transfer-form {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(120px, 160px) auto;
  align-items: end;
  gap: 7px;
}

.employee-performance-transfer-form label {
  display: grid;
  gap: 3px;
  color: #406493;
  font-size: 12px;
  font-weight: 700;
}

.employee-performance-transfer-form select,
.employee-performance-transfer-form input {
  width: 100%;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #c0d3eb;
  border-radius: 7px;
  padding: 5px 8px;
  color: #354a67;
  background: #ffffff;
  font: inherit;
}

.employee-performance-transfer-amount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
}

.employee-performance-transfer-amount input {
  border-radius: 7px 0 0 7px;
  text-align: right;
}

.employee-performance-transfer-amount b {
  display: grid;
  place-items: center;
  height: 32px;
  box-sizing: border-box;
  border: 1px solid #c0d3eb;
  border-left: 0;
  border-radius: 0 7px 7px 0;
  color: #087955;
  background: #ffffff;
}

.employee-performance-transfer-form > button {
  height: 32px;
  border: 1px solid #2f70c6;
  border-radius: 7px;
  padding: 0 12px;
  color: #ffffff;
  background: #3073cb;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.employee-performance-transfer-panel > p {
  margin: 0;
  color: #64748b;
  font-size: 11px;
  line-height: 15px;
}

.employee-performance-transfer-history {
  display: grid;
  gap: 4px;
}

.employee-performance-transfer-history-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 82px 46px 46px;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 3px 6px;
  border: 1px solid #d4dfee;
  border-radius: 6px;
  color: #354a67;
  background: #ffffff;
  font-size: 11px;
}

.employee-performance-transfer-history-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-performance-transfer-history-row strong {
  color: #087955;
  text-align: right;
  white-space: nowrap;
}

.employee-performance-transfer-history-row small {
  color: #0b7a55;
  text-align: center;
}

.employee-performance-transfer-history-row button {
  border: 1px solid #efb5b5;
  border-radius: 999px;
  padding: 2px 6px;
  color: #9a1b1b;
  background: #ffffff;
  font: inherit;
  cursor: pointer;
}

.employee-performance-transfer-history-row.is-voided {
  opacity: 0.62;
}

.employee-performance-transfer-empty {
  padding: 6px;
  color: #728197;
  text-align: center;
  font-size: 11px;
}

@media (max-width: 980px) {
  .employee-transfer-smart-toolbar {
    grid-template-columns: 160px minmax(120px, 1fr) auto;
  }

  .employee-transfer-manual-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .employee-performance-transfer-form {
    grid-template-columns: 1fr 1fr;
  }
}

.monthly-employee-row {
  grid-template-columns: 40px minmax(100px, 1fr) minmax(132px, max-content) 52px;
}

.monthly-category-row {
  grid-template-columns: 44px minmax(120px, 1fr) 82px minmax(118px, max-content);
}

.monthly-purpose-row {
  grid-template-columns: 52px minmax(130px, 1fr) minmax(108px, max-content) 104px;
}

.monthly-entry-category {
  min-width: 0;
  width: 100%;
  height: 23px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 0 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  text-overflow: clip;
}

.monthly-note-manager {
  display: grid;
  gap: 10px;
}

.monthly-detail-dialog:has(.monthly-note-manager) {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100dvh - 16px);
}

.monthly-detail-dialog:has(.monthly-employee-summary-grid) {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100dvh - 16px);
}

.monthly-detail-dialog:has(.monthly-income-card-grid) {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100dvh - 16px);
}

.monthly-employee-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.monthly-employee-summary-column {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--detail-row-line);
  border-radius: 8px;
}

.monthly-employee-summary-column .monthly-employee-row:last-child {
  border-bottom: 0;
}

.monthly-income-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.monthly-income-card-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.monthly-income-card-column {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.monthly-income-employee-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #c1d1e7;
  border-radius: 8px;
  background: #ffffff;
}

.monthly-income-employee-card.is-pending {
  border-color: #e8b8c3;
  background: #fff8fa;
}

.monthly-income-employee-head {
  display: grid;
  grid-template-columns: minmax(112px, 0.72fr) minmax(0, 2.3fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 6px 9px;
  border: 0;
  color: #3063a6;
  background: #dde7f5;
  cursor: pointer;
  text-align: left;
}

.monthly-income-employee-head:hover {
  background: #d5e2f2;
}

.monthly-income-employee-head.is-pending {
  color: #87364a;
  background: #fae8ed;
}

.monthly-income-employee-head.is-pending:hover {
  background: #f7dfe6;
}

.monthly-income-summary-person {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.monthly-income-summary-person i {
  flex: 0 0 12px;
  color: #306ab6;
  font-size: 11px;
  font-style: normal;
}

.monthly-income-summary-person b {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-income-summary-person small {
  flex: 0 0 auto;
  color: #60758e;
  font-size: 12px;
  font-weight: 700;
}

.monthly-income-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  min-width: 0;
}

.monthly-income-summary-metrics > span {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid rgba(70, 116, 175, 0.2);
  white-space: nowrap;
}

.monthly-income-summary-metrics small {
  color: #60758e;
  font-size: 10px;
  font-weight: 700;
}

.monthly-income-summary-metrics strong {
  color: #3063a6;
  font-size: 13px;
  font-weight: 800;
}

.monthly-income-summary-metrics > .is-pending small,
.monthly-income-summary-metrics > .is-pending strong {
  color: #b23b57;
}

.monthly-income-entry-list {
  display: grid;
  border-top: 1px solid #c1d1e7;
}

.monthly-income-employee-card.is-pending .monthly-income-entry-list {
  border-top-color: #e8b8c3;
}

.monthly-income-entry-row strong .is-cny-part {
  color: #a20d0d;
}

.monthly-income-entry-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(126px, max-content);
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 3px 8px;
  border-bottom: 1px solid var(--detail-row-line);
  color: #354a67;
}

.monthly-income-entry-row:nth-child(even) {
  background: var(--table-row-alt);
}

.monthly-income-entry-row:last-child {
  border-bottom: 0;
}

.monthly-income-entry-row > span {
  color: #667085;
  font-size: 13px;
  white-space: nowrap;
}

.monthly-income-entry-row > b {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-income-entry-row > strong {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.monthly-income-entry-row > strong em {
  margin: 0;
}

.monthly-income-entry-empty {
  min-height: 28px;
  padding: 6px 9px;
  color: #8a6070;
  font-size: 12px;
}

.monthly-detail-modal:has(.monthly-purpose-list) { z-index: 100; }

.monthly-detail-dialog:has(.monthly-purpose-list) {
  width: min(1360px, calc(100vw - 24px));
  height: min(860px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
}

.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-detail-dialog-body {
  grid-template-rows: max-content minmax(0, 1fr);
  gap: 6px;
  min-height: 0;
  padding: 6px 8px;
  overflow: hidden;
}

.monthly-purpose-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 8px;
  min-width: 0;
  max-height: min(36dvh, 320px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-purpose-row {
  grid-template-columns: 46px minmax(0, 1fr) minmax(104px, max-content) 100px;
  gap: 4px;
  min-width: 0;
  min-height: 24px;
  padding: 1px 6px;
  overflow: hidden;
}

.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-purpose-row > span,
.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-purpose-row > strong,
.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-purpose-row > .monthly-entry-category {
  white-space: nowrap;
}

.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-purpose-row > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-category-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  margin-top: 0;
  gap: 6px;
  padding: 6px 8px;
}

.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-category-summary-card {
  min-height: 34px;
}

.monthly-detail-dialog:has(.monthly-purpose-list) .monthly-category-summary.monthly-purpose-annual-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  position: relative;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.monthly-purpose-annual-summary .monthly-category-summary-head {
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px 8px 0 0;
}

.monthly-purpose-annual-summary .monthly-category-summary-head > small {
  color: #748599;
  font-size: 11px;
  white-space: nowrap;
}

.monthly-purpose-annual-scroll {
  width: 100%;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.monthly-purpose-annual-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  color: #586d89;
  font-size: clamp(11.5px, 0.92vw, 12.5px);
  line-height: 1.15;
}

.monthly-purpose-annual-table th,
.monthly-purpose-annual-table td {
  height: 32px;
  border-bottom: 1px solid #e6ebf2;
  padding-block: 4px;
  padding-inline: 1px;
  font-size: inherit;
  letter-spacing: -0.2px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.monthly-purpose-annual-table th:first-child {
  width: 9%;
  padding-left: 6px;
  text-align: left;
}

.monthly-purpose-annual-table thead th:nth-last-child(2) { width: 7%; }
.monthly-purpose-annual-table thead th:last-child { width: 8%; }
.monthly-purpose-annual-table :is(thead, tbody) tr > :first-child { border-right: 1px solid #dfe5ec; }

.monthly-purpose-annual-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #597293;
  background: #f5f8fc;
  font-weight: 700;
}

.monthly-purpose-annual-table thead th.is-current:has(small) { background: #edf3fa; }
.monthly-purpose-annual-table thead th:last-child { background: #f1f4f8; }

.monthly-purpose-annual-table tbody tr:nth-child(odd) > :is(th, td) { background-color: #fff; }
.monthly-purpose-annual-table tbody tr:nth-child(even) > :is(th, td) { background-color: #f8f9fb; }
.monthly-purpose-annual-table:has(thead th.is-current small) :is(tbody, tfoot) td.is-current { font-weight: 700; }
.monthly-purpose-annual-table tbody td:last-child { color: #43638b; font-weight: 700; }
.monthly-purpose-annual-table tr > :nth-last-child(2) { border-left: 1px solid #dfe6ee; }

.monthly-purpose-annual-table thead th small {
  display: block;
  color: #798ca5;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.monthly-purpose-annual-table tbody tr:hover > :is(th, td) {
  background-color: #eff3f9;
}

.monthly-purpose-annual-table tbody th {
  color: #43638b;
  font-weight: 750;
}

.monthly-purpose-annual-table .monthly-entry-category {
  box-sizing: border-box;
  width: 100%;
  height: 20px;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-align: left;
}

.monthly-purpose-annual-table [data-open-purpose-history] {
  border: 0;
  padding: 0;
  color: #4c77b0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.monthly-purpose-annual-table [data-open-purpose-history]:hover {
  color: #2f5f9f;
  text-decoration: underline;
}

.monthly-purpose-annual-table .monthly-purpose-comparison.is-up {
  color: #bd4351;
}

.monthly-purpose-annual-table .monthly-purpose-comparison.is-down {
  color: #17805c;
}

.monthly-purpose-annual-table .monthly-purpose-comparison.is-flat {
  color: #8494a3;
}

.monthly-purpose-annual-table .monthly-purpose-comparison-pill {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  border-radius: 4px;
  padding: 1px 4px;
  font-size: inherit;
  font-weight: 700;
}

.monthly-purpose-annual-table .monthly-purpose-comparison.is-up .monthly-purpose-comparison-pill { background: #fbf0ef; }
.monthly-purpose-annual-table .monthly-purpose-comparison.is-down .monthly-purpose-comparison-pill { background: #eaf7f1; }

.monthly-purpose-annual-table tfoot th,
.monthly-purpose-annual-table tfoot td {
  border-top: 1px solid #c4d3e7;
  border-bottom: 0;
  color: #416797;
  background: #eff4fa;
  font-weight: 400;
}

.monthly-purpose-annual-table tfoot th,
.monthly-purpose-annual-table tfoot td:last-child { font-weight: 700; }

.monthly-purpose-history-panel[hidden] {
  display: none;
}

.monthly-purpose-history-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(780px, calc(100vw - 48px));
  max-height: min(62dvh, 510px);
  overflow: hidden;
  border: 1px solid #c4d3e7;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(64, 103, 154, 0.18);
}

.monthly-purpose-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  color: #597293;
  background: #f5f8fc;
  font-size: 12px;
}

.monthly-purpose-history-head button {
  border: 0;
  padding: 0;
  color: #4c77b0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.monthly-purpose-history-scroll {
  min-height: 0;
  overflow: auto;
}

.monthly-purpose-history-table {
  width: 100%;
  border-collapse: collapse;
  color: #586d89;
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.monthly-purpose-history-table th,
.monthly-purpose-history-table td {
  border-bottom: 1px solid #e6ebf2;
  padding: 4px 7px;
  text-align: right;
  white-space: nowrap;
}

.monthly-purpose-history-table th:first-child {
  min-width: 120px;
  text-align: left;
}

.monthly-purpose-history-table thead th {
  position: sticky;
  top: 0;
  color: #597293;
  background: #f5f8fc;
}

.monthly-purpose-history-table tfoot th,
.monthly-purpose-history-table tfoot td {
  border-top: 1px solid #c4d3e7;
  background: #eff4fa;
  font-weight: 700;
}

@media (max-width: 950px) {
  .monthly-purpose-annual-table {
    min-width: 900px;
  }
}

@media (max-width: 1050px) {
  .monthly-note-detail-row.has-status {
    grid-template-columns: 138px 124px minmax(0, 1fr) 86px 74px 176px;
    grid-template-areas:
      "date type text text text text"
      "amount currency . status actions actions";
    row-gap: 5px;
    padding-block: 6px;
  }

  .monthly-note-detail-row.has-status .monthly-note-date {
    grid-area: date;
  }

  .monthly-note-detail-row.has-status .monthly-note-type {
    grid-area: type;
  }

  .monthly-note-detail-row.has-status .monthly-note-text {
    grid-area: text;
  }

  .monthly-note-detail-row.has-status .monthly-note-amount {
    grid-area: amount;
  }

  .monthly-note-detail-row.has-status .monthly-note-currency {
    grid-area: currency;
  }

  .monthly-note-detail-row.has-status .monthly-note-status {
    grid-area: status;
  }

  .monthly-note-detail-row.has-status .monthly-note-actions {
    grid-area: actions;
  }
}

.monthly-usdt-down-detail-list {
  overflow: hidden;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  background: #ffffff;
}

.monthly-usdt-down-detail-head,
.monthly-usdt-down-detail-row {
  display: grid;
  grid-template-columns: 96px 120px minmax(0, 1fr) 110px 118px 86px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 10px;
}

.monthly-usdt-down-detail-head {
  color: #3063a6;
  background: #dde7f5;
  font-size: 13px;
  font-weight: 800;
}

.monthly-usdt-down-detail-row {
  border-top: 1px solid #d9e1ec;
}

.monthly-usdt-down-detail-row:nth-child(odd) {
  background: var(--table-row-alt);
}

.monthly-usdt-down-detail-row > * {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-usdt-down-detail-row > em,
.monthly-usdt-down-detail-row > i {
  color: #3063a6;
  font-weight: 800;
  text-align: right;
}

.monthly-usdt-down-detail-row > i {
  color: var(--money-cny);
}

.monthly-usdt-down-detail-row > small {
  justify-self: end;
}

.monthly-usdt-down-workbench {
  display: grid;
  grid-template-rows: auto minmax(0, auto) auto;
  gap: 8px;
  min-height: 0;
  height: auto;
}

.monthly-usdt-down-new-row {
  display: grid;
  grid-template-columns:
    minmax(150px, 0.9fr)
    minmax(112px, 0.7fr)
    minmax(220px, 1.8fr)
    minmax(96px, 0.65fr)
    minmax(112px, 0.75fr)
    116px;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid #c0cfe2;
  border-radius: 8px;
  background: #f0f5fb;
}

.monthly-usdt-down-new-row input,
.monthly-usdt-down-new-row select,
.monthly-usdt-down-editor-row input,
.monthly-usdt-down-edit-row input,
.monthly-usdt-down-edit-row textarea,
.monthly-usdt-down-edit-row select {
  min-width: 0;
  height: 34px;
  padding: 5px 8px;
  border: 1px solid #c5d2e2;
  border-radius: 6px;
  color: #345989;
  background: #ffffff;
  font: inherit;
}

.monthly-usdt-down-edit-row textarea {
  field-sizing: content;
  min-height: 34px;
  height: auto;
  overflow: hidden;
  resize: vertical;
  white-space: pre-wrap;
}

.monthly-usdt-down-new-row input {
  height: 30px;
  padding: 3px 8px;
  font-size: 14px;
  line-height: 18px;
}

.monthly-usdt-down-new-row select {
  height: 30px;
  padding: 3px 8px;
  font-size: 14px;
  line-height: 18px;
}

.monthly-usdt-down-column-head,
.monthly-usdt-down-editor-row {
  display: grid;
  grid-template-columns: 104px 132px minmax(180px, 1fr) 96px 108px 76px 126px;
  gap: 8px;
  align-items: center;
}

.monthly-usdt-down-column-head {
  min-height: 32px;
  padding: 4px 10px;
  color: #3063a6;
  background: #dde7f5;
  font-size: 13px;
  font-weight: 800;
}

.monthly-usdt-down-employee {
  overflow: hidden;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  background: #ffffff;
}

.monthly-usdt-down-employee-list {
  display: grid;
  min-height: 0;
  max-height: calc(100vh - 250px);
  max-height: calc(100dvh - 250px);
  align-content: start;
  gap: 8px;
  padding-right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
}

.monthly-usdt-down-subtotal {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
}

.monthly-usdt-down-summary {
  display: flex;
  width: 100%;
  height: 31px;
  min-height: 31px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1px 8px;
  border: 0;
  color: #3063a6;
  background: #eff4fa;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
}

.monthly-usdt-down-summary:hover {
  background: #e4ecf7;
}

.monthly-usdt-down-summary.is-pending {
  background: #fff0f3;
}

.monthly-usdt-down-summary.is-pending:hover {
  background: #ffe7ec;
}

.monthly-usdt-down-summary.is-pending .monthly-usdt-down-summary-total strong {
  color: #b23a55;
}

.monthly-usdt-down-summary.is-pending .monthly-note-status.is-pending {
  color: #a4334d;
  border-color: #e5a7b6;
  background: #fde2e8;
}

.monthly-usdt-down-summary-name,
.monthly-usdt-down-summary-total,
.monthly-usdt-down-summary-breakdown {
  display: flex;
  height: 100%;
  min-width: 0;
  align-items: center;
  gap: 8px;
  line-height: 18px;
}

.monthly-usdt-down-summary-name i {
  display: inline-flex;
  height: 18px;
  width: 14px;
  align-items: center;
  justify-content: center;
  color: #4479be;
  font-size: 11px;
  font-style: normal;
  line-height: 18px;
}

.monthly-usdt-down-summary-name b {
  overflow: hidden;
  font-size: 14px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-usdt-down-summary-name small {
  color: #66819a;
  font-size: 12px;
}

.monthly-usdt-down-summary-total {
  flex: 0 0 auto;
  justify-content: flex-end;
}

.monthly-usdt-down-summary-breakdown {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 12px;
}

.monthly-usdt-down-summary-breakdown > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.monthly-usdt-down-summary-breakdown small {
  color: #66819a;
  font-size: 11px;
}

.monthly-usdt-down-summary-breakdown b {
  color: #3063a6;
  font-size: 13px;
}

.monthly-usdt-down-summary-breakdown .is-pending b {
  color: #b23a55;
}

.monthly-usdt-down-summary-breakdown > .monthly-note-status {
  flex: 0 0 auto;
  width: max-content;
  justify-content: center;
  text-align: center;
}

.monthly-usdt-down-summary-total strong {
  min-width: 92px;
  font-size: 14px;
  line-height: 18px;
  text-align: right;
}

.monthly-usdt-down-summary-total strong.is-pending,
.monthly-usdt-down-record-row strong.is-pending {
  color: #b23a55;
}

.monthly-usdt-down-records {
  border-top: 1px solid #ccd8e7;
}

.monthly-usdt-down-record-row {
  display: grid;
  grid-template-columns: 64px minmax(160px, 1fr) 76px 80px max-content 110px 100px;
  min-height: 31px;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border-bottom: 1px solid #d9e1ec;
  font-size: 14px;
  line-height: 18px;
}

.monthly-usdt-down-record-row.is-carry-over {
  grid-template-columns: 58px 72px minmax(110px, 1fr) 100px 75px 60px max-content minmax(80px, auto) minmax(95px, auto) 85px;
  gap: 5px;
  background: #fff8fa;
}

.monthly-usdt-down-record-row.is-pending {
  border-color: #efc3cd;
  background: #fff0f3;
}

.monthly-usdt-down-carry-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1px 5px;
  border: 1px solid #d7c4e9;
  border-radius: 5px;
  color: #74528e;
  background: #f4edf9;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
}

.monthly-usdt-down-carry-metric {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #6c5360;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-usdt-down-record-row:nth-child(even) {
  background: var(--table-row-alt);
}

.monthly-usdt-down-record-row.is-carry-over {
  background: #fff8fa;
}

.monthly-usdt-down-record-row.is-pending {
  background: #fff0f3;
}

.monthly-usdt-down-record-row > b {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-usdt-down-record-row > strong {
  font-size: 14px;
  line-height: 18px;
  text-align: right;
}

.monthly-usdt-down-record-row > em {
  overflow: hidden;
  color: #344c6d;
  font-size: 13px;
  font-style: italic;
  font-weight: 800;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-usdt-down-record-row > .monthly-note-status {
  justify-self: center;
  width: max-content;
  min-width: 64px;
  box-sizing: border-box;
  padding-inline: 8px;
}

.monthly-usdt-down-summary .monthly-note-status.is-long,
.monthly-usdt-down-record-row .monthly-note-status.is-long {
  font-size: 11px;
  padding-inline: 6px;
  white-space: nowrap;
}

.monthly-usdt-down-record-row > .wallet-transfer-status {
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-usdt-down-record-row.is-carry-over > * {
  min-width: 0;
}

.monthly-usdt-down-edit-row {
  display: grid;
  grid-template-columns: 116px 132px minmax(260px, 1fr) 100px 112px 126px;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: #f7fafe;
  border-bottom: 1px solid #d9e1ec;
  font-size: 14px;
  line-height: 18px;
}

.monthly-usdt-down-editor-row {
  min-height: 42px;
  padding: 4px 10px;
  border-top: 1px solid #d9e1ec;
}

.monthly-usdt-down-editor-row:nth-child(even) {
  background: var(--table-row-alt);
}

.monthly-usdt-down-editor-row > strong {
  color: var(--money-cny);
  text-align: right;
}

.monthly-usdt-down-editor-row > small {
  justify-self: center;
}

.monthly-usdt-down-row-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

.monthly-usdt-down-record-row .monthly-note-status,
.monthly-usdt-down-record-row .monthly-note-action,
.monthly-usdt-down-edit-row .monthly-note-action {
  font-size: 14px;
  line-height: 18px;
}

.monthly-usdt-down-subtotal {
  min-height: 31px;
  padding: 1px 8px;
  border-top: 1px solid #ccd8e7;
  color: #3063a6;
  background: #eaf0f8;
  font-size: 14px;
  line-height: 18px;
}

.monthly-usdt-down-subtotal span,
.monthly-usdt-down-subtotal strong {
  color: #3063a6;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}

.monthly-usdt-down-month-total {
  display: grid;
  grid-template-columns:
    minmax(280px, 1.45fr)
    minmax(110px, 0.7fr)
    minmax(110px, 0.7fr)
    minmax(110px, 0.7fr)
    minmax(145px, 0.85fr);
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #c0cfe2;
  border-radius: 8px;
  background: #eaf0f8;
  overflow: hidden;
}

.monthly-usdt-down-month-total > div {
  display: flex;
  min-width: 0;
  height: 31px;
  min-height: 31px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 1px 8px;
  overflow: hidden;
  white-space: nowrap;
}

.monthly-usdt-down-month-total > div + div {
  border-left: 1px solid #c0cfe2;
}

.monthly-usdt-down-month-total > div {
  border-bottom: 1px solid transparent;
}

.monthly-usdt-down-month-total > div.is-pending {
  background: #fff0f3;
}

.monthly-usdt-down-month-total > div:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: center;
  column-gap: 6px;
}

.monthly-usdt-down-month-total > div.is-pending strong {
  color: #b23a55;
}

.monthly-usdt-down-month-total span {
  flex: 0 0 auto;
  color: #667c99;
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
}

.monthly-usdt-down-month-total strong {
  flex: 1 1 auto;
  min-width: max-content;
  color: #3063a6;
  font-size: 14px;
  line-height: 18px;
  overflow: visible;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.monthly-usdt-down-month-total > div:last-child strong {
  justify-self: center;
  min-width: 116px;
  text-align: center;
}

.monthly-usdt-down-record-row .usdt-loan-open {
  color: #2f67b1;
  border-color: #c1d0e3;
  background: #eff4fb;
  white-space: nowrap;
}

.usdt-loan-history {
  display: grid;
  gap: 3px;
  padding: 3px 9px 5px;
  border-bottom: 1px solid #d9e1ec;
  color: #4a678e;
  background: #f6f9fd;
  font-size: 12px;
}

.usdt-loan-history-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 12px;
  min-height: 20px;
}

.usdt-loan-history-item.is-revoked { color: #667d90; }
.usdt-loan-history-item > span { white-space: nowrap; }
.usdt-loan-undo {
  padding: 1px 5px;
  border: 1px solid #bdc7d5;
  border-radius: 4px;
  color: #546f92;
  background: #fff;
  font: inherit;
  cursor: pointer;
}
.usdt-loan-history-item details { font-size: 11px; }
.usdt-loan-history-item summary { cursor: pointer; }
.usdt-loan-history-item details[open] {
  flex-basis: 100%;
  padding-left: 4px;
}
.usdt-loan-history-item details div { padding: 3px 0; overflow-wrap: anywhere; }

.usdt-loan-modal {
  position: fixed;
  inset: 0;
  z-index: 42;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(53, 74, 103, 0.42);
}

.usdt-loan-modal.is-hidden { display: none; }

.usdt-loan-dialog {
  box-sizing: border-box;
  width: min(440px, calc(100vw - 32px));
  display: grid;
  gap: 12px;
  padding: 20px;
  border: 1px solid #c0d3eb;
  border-radius: 10px;
  color: #45638a;
  background: #fff;
  box-shadow: 0 18px 44px rgba(53, 74, 103, 0.2);
}

.usdt-loan-dialog h2 { margin: 0; font-size: 18px; }
.usdt-loan-source { display: grid; gap: 6px; margin: 0; }
.usdt-loan-source div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.usdt-loan-source dt { color: #64809a; }
.usdt-loan-source dd { margin: 0; font-weight: 700; }
.usdt-loan-dialog label { display: grid; gap: 5px; font-weight: 700; }
.usdt-loan-dialog input { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid #bdcadb; border-radius: 6px; font: inherit; }
.usdt-loan-result { display: flex; justify-content: space-between; margin: 0; padding: 9px 10px; border-radius: 6px; background: #eff4fb; }
.usdt-loan-result strong { color: #2e6ec2; }
.usdt-loan-explain { margin: 0; color: #667c99; font-size: 12px; line-height: 1.55; }
.usdt-loan-error { min-height: 16px; margin: 0; color: #a20d0d; font-size: 12px; }
.usdt-loan-actions { display: flex; justify-content: flex-end; gap: 8px; }
.usdt-loan-actions button { padding: 8px 13px; border: 1px solid #b3c6df; border-radius: 6px; background: #f5f8fc; color: #416ba2; font: inherit; cursor: pointer; }
.usdt-loan-actions #usdtLoanConfirm { border-color: #3a76c5; background: #3a76c5; color: #fff; }
.usdt-loan-actions #usdtLoanUndoConfirm { border-color: #a43d4e; background: #a43d4e; color: #fff; }
.usdt-loan-actions button:disabled { opacity: .55; cursor: default; }

@media (max-width: 900px) {
  .monthly-usdt-down-month-total {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-usdt-down-month-total > div + div {
    border-left: 0;
  }

  .monthly-usdt-down-month-total > div:nth-child(even) {
    border-left: 1px solid #c0cfe2;
  }

  .monthly-usdt-down-month-total > div:nth-child(n + 3) {
    border-top: 1px solid #c0cfe2;
  }
}

@media (max-width: 640px) {
  .monthly-usdt-down-month-total {
    grid-template-columns: minmax(0, 1fr);
  }

  .monthly-usdt-down-month-total > div:nth-child(even) {
    border-left: 0;
  }

  .monthly-usdt-down-month-total > div + div {
    border-top: 1px solid #c0cfe2;
  }
}

.monthly-usdt-down-summary .monthly-note-status.is-deducted,
.monthly-usdt-down-record-row .monthly-note-status.is-deducted {
  color: #087955;
  border-color: #9cd7bf;
  background: #e7f7ef;
}

.monthly-usdt-down-record-row .monthly-note-status.is-pending {
  color: #a4334d;
  border-color: #e5a7b6;
  background: #fde2e8;
}

.record-center-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 3px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  background: #f0f4fa;
}

.record-center-tab {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  color: #57759b;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
}

.record-center-tab.is-active {
  color: #ffffff;
  background: #4f82c6;
}

.record-center-pane {
  display: none;
}

.record-center-pane.is-active {
  display: grid;
  gap: 8px;
}

.record-center-readonly-note {
  padding: 7px 10px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #57759b;
  background: #f0f4fa;
  font-size: 14px;
  font-weight: 600;
}

.record-center-filter-note {
  padding: 7px 10px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #3063a6;
  background: #edf3fa;
  font-size: 14px;
  font-weight: 700;
}

.employee-usdt-down-readonly {
  overflow: hidden;
  border: 1px solid var(--detail-row-line);
  border-radius: 8px;
  background: #ffffff;
}

.employee-usdt-down-readonly-head,
.employee-usdt-down-readonly-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 96px 96px minmax(0, 1fr) 112px 76px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 5px 10px;
}

.employee-usdt-down-readonly-head {
  color: #3063a6;
  background: #dde7f5;
  font-size: 14px;
  font-weight: 700;
}

.employee-usdt-down-readonly-head span:nth-child(4),
.employee-usdt-down-readonly-head span:nth-child(5) {
  text-align: center;
}

.employee-usdt-down-readonly-list {
  display: grid;
}

.employee-usdt-down-readonly-row {
  border-top: 1px solid var(--detail-row-line);
  color: #354a67;
  background: #ffffff;
  font-size: 14px;
}

.employee-usdt-down-readonly-row:nth-child(even) {
  background: var(--table-row-alt);
}

.employee-usdt-down-readonly-row.is-deducted,
.employee-usdt-down-readonly-row.is-deducted:nth-child(even) {
  background: #e8f7ef;
}

.employee-usdt-down-readonly-row > span,
.employee-usdt-down-readonly-row > b,
.employee-usdt-down-readonly-row > strong {
  min-width: 0;
}

.employee-usdt-down-readonly-row > b {
  color: #3063a6;
}

.employee-usdt-down-readonly-row > strong {
  overflow-wrap: anywhere;
  font-weight: 500;
  line-height: 20px;
}

.employee-usdt-down-readonly-row .employee-usdt-down-readonly-amount {
  color: #3063a6;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.monthly-note-block {
  display: grid;
  gap: 6px;
}

.monthly-note-block h3 {
  margin: 0;
  color: #354a67;
  font-size: 16px;
  font-weight: 700;
}

.monthly-note-system-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--detail-row-line);
  border-radius: 8px;
  overflow: hidden;
}

.monthly-note-system-row {
  display: grid;
  grid-template-columns: 100px 100px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 3px 10px;
  border-bottom: 1px solid var(--detail-row-line);
  background: #ffffff;
  color: #354a67;
  font-size: 14px;
}

.monthly-note-system-row.has-status {
  grid-template-columns: 100px 100px minmax(0, 1fr) 64px;
}

.monthly-note-system-row:nth-child(even) {
  background: var(--table-row-alt);
}

.monthly-note-system-row.is-deducted,
.monthly-note-system-row.is-deducted:nth-child(even) {
  background: #e8f7ef;
}

.monthly-note-system-row:last-child {
  border-bottom: 0;
}

.monthly-note-system-row b,
.monthly-note-system-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-note-new-row,
.monthly-note-detail-row {
  display: grid;
  grid-template-columns: 120px 110px minmax(140px, 1fr) 68px 52px 82px;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid #d9e1ec;
  border-radius: 8px;
  background: #ffffff;
}

.monthly-note-detail-row.has-status {
  grid-template-columns: 120px 110px minmax(210px, 1fr) 80px 52px 72px 160px;
}

.monthly-note-detail-row:nth-child(even) {
  background: var(--table-row-alt);
}

.monthly-note-detail-row.is-deducted,
.monthly-note-detail-row.is-deducted:nth-child(even) {
  background: #e8f7ef;
}

.monthly-note-detail-row.is-deducted input,
.monthly-note-detail-row.is-deducted select,
.monthly-note-detail-row.is-deducted textarea {
  border-color: #98d3b0;
  background: #f8fff9;
}

.monthly-note-list {
  display: grid;
  gap: 0;
}

.record-type-manager {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  background: #f0f4fa;
}

.record-type-manager > span {
  color: #354a67;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
}

.record-type-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.record-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 4px 0 8px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  background: #ffffff;
  color: #354a67;
}

.record-type-chip b {
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
}

.record-type-chip-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.record-type-chip small,
.record-type-chip button {
  min-height: 20px;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  line-height: 20px;
}

.record-type-chip small {
  padding: 0 5px;
  color: #6b7c91;
  background: #f0f4fa;
}

.record-type-chip button {
  padding: 0 6px;
  cursor: pointer;
}

.record-type-chip button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.record-type-chip .record-type-move {
  color: #2861ab;
  background: #eaf0f8;
}

.record-type-chip .record-type-delete {
  color: #9f1d1d;
  background: #fff4f4;
}

.monthly-note-type-group {
  display: grid;
  gap: 0;
  border: 1px solid var(--detail-row-line);
  border-radius: 8px;
  overflow: hidden;
}

.monthly-note-type-group + .monthly-note-type-group {
  margin-top: 6px;
}

.monthly-note-type-title {
  padding: 5px 10px;
  color: #3063a6;
  background: #dde7f5;
  font-size: 15px;
  font-weight: 700;
}

.monthly-note-detail-row {
  border: 0;
  border-bottom: 1px solid var(--detail-row-line);
  border-radius: 0;
}

.monthly-note-derived-row {
  display: grid;
  grid-template-columns: 120px 110px minmax(0, 1fr) 92px 72px;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 8px;
  border-bottom: 1px solid var(--detail-row-line);
  background: #f1f6fc;
  color: #354a67;
  font-size: 14px;
}

.monthly-note-derived-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-note-derived-row em {
  color: #3063a6;
  font-style: normal;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.monthly-note-derived-row small {
  justify-self: center;
  color: #087044;
  font-weight: 700;
  white-space: nowrap;
}

.monthly-note-status {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 22px;
  padding: 0 6px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.monthly-note-status.is-pending {
  color: #087955;
  border-color: #76c7a5;
  background: #dcf6e9;
}

.monthly-note-status.is-deducted {
  color: #43648e;
  border-color: #b1bfd1;
  background: #eff3f8;
}

.monthly-note-inline-total {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 10px;
  border-top: 1px solid var(--detail-row-line);
  background: #d5e1f1;
  color: #354a67;
}

.monthly-note-inline-total span {
  font-size: 14px;
  font-weight: 700;
}

.monthly-note-inline-total-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.monthly-note-inline-total strong {
  font-size: 15px;
  font-weight: 700;
}

.monthly-note-inline-total strong span,
.monthly-note-inline-total strong em,
.monthly-note-inline-total strong strong {
  font-style: normal;
  font-weight: 700;
}

.monthly-note-inline-total strong em {
  margin: 0 5px;
  color: #354a67;
}

.monthly-note-inline-total strong strong {
  color: #a20d0d;
}

.monthly-note-date,
.monthly-note-type,
.monthly-note-amount,
.monthly-note-currency,
.monthly-note-new-row input,
.monthly-note-new-row select,
.monthly-note-text,
.monthly-note-new-row textarea {
  min-width: 0;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  outline: none;
}

.monthly-note-date,
.monthly-note-type,
.monthly-note-amount,
.monthly-note-currency,
.monthly-note-new-row select,
.monthly-note-new-row input {
  height: 23px;
  padding: 0 6px;
}

.monthly-note-text,
.monthly-note-new-row textarea {
  width: 100%;
  height: 23px;
  min-height: 23px;
  resize: vertical;
  padding: 1px 6px;
}

.monthly-note-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.monthly-note-actions.has-order-actions {
  grid-template-columns: 34px 34px 48px 48px;
  justify-content: end;
}

.monthly-note-action {
  box-sizing: border-box;
  min-height: 23px;
  padding: 0 6px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.monthly-note-action.is-primary {
  color: #ffffff;
  border-color: #4f82c6;
  background: #4f82c6;
}

.monthly-note-action.is-danger {
  color: #9f1d1d;
  border-color: #efc0c0;
}

.monthly-note-action.is-order {
  color: #2861ab;
  border-color: #c0d1e7;
  background: #eaf0f8;
  font-weight: 700;
}

.monthly-note-action:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.monthly-note-action.management-edit-button,
.management-edit-form .monthly-note-action {
  border-color: #8bc6ae;
  color: #0b5a45;
  background: #f3fbf7;
}

.monthly-note-action.management-edit-button:hover,
.management-edit-form .monthly-note-action:hover {
  border-color: #157257;
  color: #0b3f31;
  background: #e2f1eb;
}

.monthly-note-total-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.monthly-note-total-card {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #a9c2e3;
  border-radius: 8px;
  background: #d5e1f1;
  color: #354a67;
}

.monthly-note-total-card span {
  display: block;
  color: #566c89;
  font-size: 13px;
  font-weight: 600;
}

.monthly-note-total-card strong {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
}

.monthly-category-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 4px;
  border: 1px solid #c4d3e7;
  border-radius: 8px;
  padding: 8px;
  background: #f7fafe;
}

.monthly-category-summary h3 {
  margin: 0;
  color: #3063a6;
  font-size: 14px;
  font-weight: 900;
}

.monthly-category-summary-head {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -8px -8px 0;
  padding: 12px 14px;
  border-bottom: 1px solid #d9e1ec;
  border-radius: 8px 8px 0 0;
  background: #f0f5fc;
}

.monthly-category-summary-head > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.monthly-category-summary-head h3 {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: #354a67;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.monthly-category-summary-head > div > span {
  display: inline-flex;
  align-items: center;
  margin-top: 0;
  color: #667085;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.monthly-category-summary-card {
  display: grid;
  align-content: center;
  gap: 0;
  min-height: 40px;
  border: 1px solid #b3c6df;
  border-radius: 8px;
  padding: 2px 8px;
  background: #d5e0ef;
}

.monthly-category-summary-card .monthly-entry-category {
  height: 18px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #586d89;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
}

.monthly-category-summary-card strong {
  color: #354a67;
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.monthly-category-summary-row {
  display: grid;
  grid-template-columns: minmax(110px, 150px) 52px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 26px;
}

.monthly-category-summary-row:nth-of-type(odd) {
  background: #ffffff;
}

.monthly-category-summary-row:nth-of-type(even) {
  background: var(--table-row-alt);
}

.monthly-category-summary-row span {
  color: #526174;
  font-size: 13px;
  font-weight: 800;
}

.monthly-category-summary-row strong {
  color: #354a67;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.monthly-person-detail,
.monthly-detail-back {
  height: 23px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  color: #354a67;
  background: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.monthly-person-detail {
  width: 58px;
}

.monthly-detail-back {
  justify-self: start;
  min-width: 76px;
  margin: 8px 10px;
}

.monthly-person-detail:hover,
.monthly-detail-back:hover {
  border-color: #a2b8d4;
  color: #2b69b9;
  background: #f6f9fd;
}

.employee-flow-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--employee-flow-panel-width)) var(--layout-side-width);
  align-items: start;
  gap: var(--layout-gap);
  width: min(100%, calc(var(--employee-flow-panel-width) + var(--layout-gap) + var(--layout-side-width)));
  max-width: calc(var(--employee-flow-panel-width) + var(--layout-gap) + var(--layout-side-width));
  margin-top: 0;
}

.employee-flow-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  border: 1px solid #cedae9;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.employee-flow-panel > .employee-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  margin-bottom: 0;
  padding: 4px var(--ui-cell-padding-x) 8px;
}

.employee-flow-head h2 {
  margin: 0;
  color: #354a67;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
}

.employee-flow-head span {
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.employee-flow-search-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.employee-flow-search-box {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 190px;
  height: 32px;
  border: 1px solid #9cb7db;
  border-radius: 8px;
  padding: 0 7px;
  background: #f6f9fd;
}

.employee-flow-head .employee-flow-search-icon,
.employee-ledger-head .employee-flow-search-icon {
  flex: none;
  color: #2b69b9;
  font-size: 18px;
  line-height: 1;
}

.employee-flow-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  color: #2b69b9;
  background: transparent;
  font: inherit;
  font-size: 13px;
}

.employee-flow-search-box input::placeholder { color: #5b7083; opacity: 1; }

.employee-flow-search-box:focus-within,
.employee-flow-search-tools select:focus,
.employee-flow-search-reset:focus,
.employee-ledger-month-picker select:focus {
  outline: 0;
  border-color: #5487ca;
  box-shadow: 0 0 0 2px rgba(84, 135, 202, 0.16);
}

.employee-flow-search-box button {
  flex: none;
  border: 0;
  padding: 0 2px;
  color: #6787b0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
}

.employee-flow-search-tools select,
.employee-flow-search-reset {
  height: 32px;
  border: 1px solid #9cb7db;
  border-radius: 8px;
  padding: 0 8px;
  color: #2b69b9;
  background: #f6f9fd;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

#employeeFlowGroupFilter { width: 136px; }
#employeeLedgerGroupFilter { width: 136px; }

.employee-flow-search-reset {
  color: #2b69b9;
  background: #f6f9fd;
}

.employee-flow-search-box:not(:focus-within):hover,
.employee-flow-search-tools select:not(:focus):hover,
.employee-flow-search-reset:not(:focus):hover,
.employee-ledger-month-picker select:not(:focus):hover { border-color: #7f9fc8; }

.employee-flow-search-reset:hover { background: #eaf1f9; }

.employee-flow-search-box button[hidden],
.employee-flow-search-reset[hidden],
.employee-flow-search-result[hidden] {
  display: none !important;
}

.employee-flow-search-result {
  padding: 0 var(--ui-cell-padding-x);
  color: #356bb0;
  font-size: 13px;
  font-weight: 700;
}

.employee-flow-year-title:disabled {
  opacity: 1;
  cursor: default;
}

@media (max-width: 760px) {
  .employee-flow-head { flex-wrap: wrap; }
  .employee-flow-search-tools { flex-wrap: wrap; justify-content: flex-start; }
}

.employee-flow-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.employee-flow-kpi {
  min-height: 58px;
  border: 1px solid #c1d0e3;
  border-radius: 8px;
  padding: 8px 10px;
  background: #eff4fa;
}

.employee-flow-kpi span {
  display: block;
  color: #587191;
  font-size: 13px;
  font-weight: 800;
}

.employee-flow-kpi strong {
  display: block;
  margin-top: 4px;
  color: #354a67;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.employee-flow-kpi.is-money strong {
  color: var(--money-cny);
}

.employee-flow-kpi.is-agent {
  border-color: #e2b352;
  background: #fff4d6;
}

.employee-flow-kpi.is-agent span {
  color: #71510a;
}

.employee-flow-kpi.agent-tone-1 {
  border-color: #e2b352;
  background: #fff4d6;
}

.employee-flow-kpi.agent-tone-1 span {
  color: #71510a;
}

.employee-flow-kpi.agent-tone-2 {
  border-color: #73bd98;
  background: #e7f7ef;
}

.employee-flow-kpi.agent-tone-2 span {
  color: #315c4f;
}

.employee-flow-kpi.agent-tone-3 {
  border-color: #85a3ca;
  background: #ebf2fc;
}

.employee-flow-kpi.agent-tone-3 span {
  color: #446693;
}

.employee-flow-kpi.agent-tone-4 {
  border-color: #df917c;
  background: #ffe9e2;
}

.employee-flow-kpi.agent-tone-4 span {
  color: #7f4637;
}

.employee-flow-table-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.employee-flow-year-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #bfcddf;
  border-radius: 8px;
  background: #ffffff;
}

.employee-flow-year-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  padding: 7px 12px;
  color: #ffffff;
  background: #6789b7;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
}

.employee-flow-year-title small {
  color: #f6f9fd;
  font-size: 18px;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.employee-flow-year-title > b {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 72px;
  min-width: 72px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0 6px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap !important;
}

.employee-flow-year-card.is-collapsed .employee-flow-year-title {
  background: #8aa3c4;
}

.employee-flow-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.employee-flow-table th,
.employee-flow-table td {
  border: 1px solid #bfcddf;
  padding: 3px 4px;
  color: #354a67;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
}

.employee-flow-table th {
  height: 30px;
  color: #446796;
  background: #eff3f9;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.employee-flow-table tbody tr:nth-child(odd) td {
  background: #ffffff;
}

.employee-flow-table tbody tr:nth-child(even) td {
  background: #f7fafe;
}

.employee-flow-table tbody tr.is-agent-employee.agent-tone-1 td {
  background: #fff4d6;
  border-color: #e9bd64;
}

.employee-flow-table tbody tr.is-agent-employee.agent-tone-1 input,
.employee-flow-table tbody tr.is-agent-employee.agent-tone-1 select,
.employee-flow-table tbody tr.is-agent-employee.agent-tone-1 textarea {
  border-color: #e2b352;
  background: #fffaf0;
}

.employee-flow-table tbody tr.is-agent-employee.agent-tone-2 td {
  background: #e7f7ef;
  border-color: #82c8a4;
}

.employee-flow-table tbody tr.is-agent-employee.agent-tone-2 input,
.employee-flow-table tbody tr.is-agent-employee.agent-tone-2 select,
.employee-flow-table tbody tr.is-agent-employee.agent-tone-2 textarea {
  border-color: #73bd98;
  background: #f5fcf8;
}

.employee-flow-table tbody tr.is-agent-employee.agent-tone-3 td {
  background: #ebf2fc;
  border-color: #94b3dc;
}

.employee-flow-table tbody tr.is-agent-employee.agent-tone-3 input,
.employee-flow-table tbody tr.is-agent-employee.agent-tone-3 select,
.employee-flow-table tbody tr.is-agent-employee.agent-tone-3 textarea {
  border-color: #85a3ca;
  background: #f7fafe;
}

.employee-flow-table tbody tr.is-agent-employee.agent-tone-4 td {
  background: #ffe9e2;
  border-color: #eda38c;
}

.employee-flow-table tbody tr.is-agent-employee.agent-tone-4 input,
.employee-flow-table tbody tr.is-agent-employee.agent-tone-4 select,
.employee-flow-table tbody tr.is-agent-employee.agent-tone-4 textarea {
  border-color: #df917c;
  background: #fff8f5;
}

.employee-flow-col-seq {
  width: 40px;
}

.employee-flow-col-year-seq {
  width: 48px;
}

.employee-flow-col-date {
  width: 16%;
}

.employee-flow-col-group {
  width: 14%;
}

.employee-flow-col-name {
  width: 12%;
}

.employee-flow-col-total {
  width: 15%;
}

.employee-flow-col-action {
  width: 54px;
}

.employee-flow-seq,
.employee-flow-year-seq {
  text-align: center;
}

.employee-flow-name {
  text-align: center;
}

.employee-flow-table .employee-flow-group-select {
  padding: 2px 4px;
  color: #446796;
  font-size: 13px;
  font-weight: 800;
}

.employee-flow-table .employee-flow-group-select,
.employee-flow-table .employee-flow-name {
  white-space: nowrap;
}

.employee-flow-table input,
.employee-flow-table select,
.employee-flow-table textarea {
  width: 100%;
  min-width: 0;
  height: 30px;
  min-height: 30px;
  border: 1px solid #cfdae9;
  border-radius: 7px;
  padding: 3px 6px;
  color: #354a67;
  background: #ffffff;
  font: inherit;
  line-height: 1.25;
  text-align: center;
}

.employee-flow-note-field {
  position: relative;
  min-width: 0;
  min-height: 30px;
}

.employee-flow-table .employee-flow-note {
  display: block;
  overflow-x: hidden;
  overflow-y: hidden;
  resize: vertical;
  white-space: pre;
  color: transparent;
  caret-color: #354a67;
  text-align: left;
}

.employee-flow-note-preview {
  position: absolute;
  top: 1px;
  right: 16px;
  left: 1px;
  height: 28px;
  overflow: hidden;
  padding: 0 6px;
  color: #354a67;
  line-height: 28px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.employee-flow-note-field:focus-within .employee-flow-note-preview,
.employee-flow-note-field.is-expanded .employee-flow-note-preview {
  display: none;
}

.employee-flow-table .employee-flow-note-field:focus-within .employee-flow-note,
.employee-flow-table .employee-flow-note-field.is-expanded .employee-flow-note {
  color: #354a67;
}

.employee-flow-table .employee-flow-note-field.is-expanded .employee-flow-note {
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.employee-flow-total {
  text-align: center;
}

.employee-flow-delete {
  width: 100%;
  min-height: 26px;
  border: 1px solid #efb3b3;
  border-radius: 7px;
  color: #a32020;
  background: #fff7f7;
  font-size: 13px;
  font-weight: 800;
}

.employee-flow-tool-panel .employee-ledger-tool-button {
  height: 34px;
  min-height: 34px;
  width: 100%;
  border-color: #bfcddf;
  color: #4873ab;
  background: #f0f4fa;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(204, 216, 231, 0.3);
}

.employee-flow-tool-panel .employee-ledger-tool-button.primary {
  border-color: #6789b7;
  color: #ffffff;
  background: #6789b7;
}

.monthly-detail-modal.is-group-settings .monthly-detail-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
}

.group-settings-panel {
  display: grid;
  gap: 10px;
}

.group-settings-head,
.group-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) 150px;
  gap: 10px;
  align-items: center;
}

.group-settings-head {
  padding: 0 4px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.group-settings-row input {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #dee4eb;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

.group-settings-label {
  min-width: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #e3e7ec;
  border-radius: 8px;
  color: #536781;
  background: #f7f8f9;
}

.group-settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.group-settings-row button {
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: #4986d4;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.group-settings-row button.is-danger {
  border: 1px solid #f0b7b7;
  color: #b42318;
  background: #fff7f7;
}

@media (max-width: 680px) {
  .group-settings-head {
    display: none;
  }

  .group-settings-row {
    grid-template-columns: 1fr;
  }
}

.group-settings-note {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.group-settings-add {
  min-height: 40px;
  border: 1px dashed #89a6cc;
  border-radius: 8px;
  color: #2c6bbd;
  background: #f5f8fd;
  font-weight: 800;
  cursor: pointer;
}

.employee-flow-agent-group {
  grid-template-columns: 1fr;
}

.employee-flow-agent-group h3,
.employee-flow-agent-group .employee-flow-agent-panel,
.employee-flow-agent-group #addEmployeeFlowAgentBtn {
  grid-column: 1 / -1;
}

.employee-flow-agent-group #addEmployeeFlowAgentBtn {
  width: 100%;
}

.employee-flow-agent-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  width: 100%;
}

.employee-flow-agent-row,
.employee-flow-agent-empty {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #cedae9;
  border-radius: 8px;
  padding: 8px 9px;
  background: #f9fbfd;
}

.employee-flow-agent-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.employee-flow-agent-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.employee-flow-agent-main input {
  min-width: 0;
  height: 28px;
  border: 1px solid rgba(73, 116, 171, 0.25);
  border-radius: 7px;
  padding: 3px 7px;
  color: #354a67;
  font-size: 14px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.72);
}

.employee-flow-agent-main span,
.employee-flow-agent-empty {
  color: #526174;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.employee-flow-agent-members {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid rgba(73, 116, 171, 0.14);
  border-radius: 7px;
  color: #526174;
  background: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  line-height: 1.55;
}

.employee-flow-agent-members span {
  font-weight: 800;
  white-space: nowrap;
}

.employee-flow-agent-members strong {
  min-width: 0;
  color: #465d7a;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.employee-flow-agent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.employee-flow-agent-row button {
  min-height: 28px;
  border: 1px solid rgba(73, 116, 171, 0.22);
  border-radius: 7px;
  color: #4873ab;
  background: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.employee-flow-agent-row button.danger {
  border-color: #efb3b3;
  color: #a32020;
  background: #fff7f7;
}

.employee-flow-agent-row.agent-tone-1 {
  border-color: #e2b352;
  background: #fff4d6;
}

.employee-flow-agent-row.agent-tone-2 {
  border-color: #73bd98;
  background: #e7f7ef;
}

.employee-flow-agent-row.agent-tone-3 {
  border-color: #85a3ca;
  background: #ebf2fc;
}

.employee-flow-agent-row.agent-tone-4 {
  border-color: #df917c;
  background: #ffe9e2;
}

.employee-flow-status {
  min-height: 30px;
  border: 1px solid #cedae9;
  border-radius: 8px;
  padding: 7px 9px;
  color: #526174;
  background: #f9fbfd;
  font-size: 13px;
  font-weight: 700;
}

.employee-flow-status.success {
  color: #0f5d34;
  border-color: #9fd1b7;
  background: #effaf4;
}

.employee-flow-empty {
  border: 1px solid #cedae9;
  border-radius: 8px;
  padding: 18px;
  color: #667085;
  background: #f9fbfd;
  text-align: center;
}

.monthly-detail-modal.is-employee-data-validation .monthly-detail-dialog {
  width: min(920px, calc(100vw - 40px));
}

.employee-validation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.employee-validation-summary div {
  border: 1px solid #c1d0e3;
  border-radius: 8px;
  padding: 8px 10px;
  background: #eff4fa;
}

.employee-validation-summary span,
.employee-validation-section h3 {
  display: block;
  color: #587191;
  font-size: 13px;
  font-weight: 900;
}

.employee-validation-summary strong {
  display: block;
  margin-top: 4px;
  color: #354a67;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.employee-validation-section {
  border: 1px solid #c1d0e3;
  border-radius: 8px;
  margin-top: 9px;
  overflow: hidden;
  background: #ffffff;
}

.employee-validation-section h3 {
  margin: 0;
  padding: 8px 10px;
  background: #eff3f9;
}

.employee-validation-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.employee-validation-list li,
.employee-validation-empty {
  border-top: 1px solid #d9ccf2;
  padding: 7px 10px;
  color: #354a67;
  font-size: 14px;
  font-weight: 800;
}

.employee-validation-list li:nth-child(odd) {
  background: #ffffff;
}

.employee-validation-list li:nth-child(even) {
  background: #f7fafe;
}

.employee-validation-empty {
  color: #667085;
  background: #ffffff;
}

.monthly-dialog-empty {
  padding: 18px;
  color: #667085;
  font-size: 15px;
  text-align: center;
}

/* V1.3：统一双栏标题基线与侧栏分块语言 */
.operation-panel > .page-header,
.employee-ledger-panel > .page-header,
.management-summary-panel > .page-header,
.monthly-report-panel > .page-header,
.employee-flow-panel > .page-header,
.wallet-reconciliation-panel > .page-header,
.side-column-header {
  min-height: 42px;
  margin: 0;
  padding: 4px 10px 8px;
}

.management-summary-panel {
  padding: 10px;
}

.side-column-header {
  width: 100%;
  border-bottom: 1px solid #dce5f0;
}

:is(
  .operation-panel,
  .employee-ledger-panel,
  .management-summary-panel,
  .monthly-report-panel,
  .employee-flow-panel,
  .wallet-reconciliation-panel
) > .page-header {
  border-bottom: 1px solid #dce5f0;
}

:is(
  .operation-panel,
  .employee-ledger-panel,
  .management-summary-panel,
  .monthly-report-panel,
  .employee-flow-panel,
  .wallet-reconciliation-panel
) > .page-header :is(h2, h3) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:is(
  .operation-panel,
  .employee-ledger-panel,
  .management-summary-panel,
  .monthly-report-panel,
  .employee-flow-panel,
  .wallet-reconciliation-panel
) > .page-header :is(h2, h3)::before {
  width: 4px;
  height: 20px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: #3275cb;
  content: "";
}

.side-column-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-column-header h2::before {
  width: 4px;
  height: 20px;
  flex: 0 0 4px;
  border-radius: 999px;
  background: #3275cb;
  content: "";
}

.employee-ledger-main-tools > .side-head {
  padding: 4px 10px 8px;
}

.employee-ledger-main-tools > .side-head h2::before {
  width: 4px;
  height: 20px;
}

.ops-side,
.employee-ledger-side,
#employeeLedgerView .employee-ledger-side {
  gap: 10px;
  padding: 10px;
  background: #f5f8fb;
}

.ops-side > .side-panel:not(:first-child) {
  display: grid;
  gap: 9px;
  border: 1px solid #d9e1ec;
  border-top: 4px solid #9ab0cc;
  border-radius: 10px;
  padding: 10px;
  background: #ffffff;
}

.ops-side > .batch-panel {
  border-top-color: #4f82c6;
  background: #f9fbfe;
}

.ops-side > .single-panel {
  border-top-color: #5680b7;
  background: #f8fafc;
}

.ops-side > .settings-panel {
  border-top-color: #7e68bb;
  background: #fbfaff;
}

.side-panel + .side-panel {
  padding-top: 10px;
}

.employee-ledger-tool-panel .employee-ledger-tool-actions {
  gap: 10px;
}

.employee-ledger-tool-panel .employee-ledger-tool-group {
  padding: 10px;
  border: 1px solid #d9e1ec;
  border-top: 4px solid #9ab0cc;
  border-radius: 10px;
  background: #ffffff;
}

.employee-ledger-tool-panel .employee-ledger-tool-group h3 {
  display: grid;
  grid-column: 1 / -1;
  gap: 2px;
  margin: 0 0 2px;
}

.employee-ledger-tool-panel .employee-ledger-tool-group h3 span {
  color: #586d89;
  font-size: 15px;
  font-weight: 900;
  line-height: 20px;
}

.employee-ledger-tool-panel .employee-ledger-tool-group h3 small {
  color: #728197;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}

.monthly-report-tool-panel .employee-ledger-tool-group {
  border-top-color: #4f82c6;
  background: #f9fbfe;
}

.employee-flow-tool-panel .employee-ledger-tool-group {
  border-color: #cedae9;
  border-top-color: #6789b7;
  background: #f9fbfd;
}

/* 核对中心 */
.wallet-reconciliation-shell {
  display: grid;
  grid-template-columns: minmax(0, var(--today-panel-width)) var(--layout-side-width);
  align-items: start;
  gap: var(--layout-gap);
  width: min(100%, calc(var(--today-panel-width) + var(--layout-gap) + var(--layout-side-width)));
  max-width: calc(var(--today-panel-width) + var(--layout-gap) + var(--layout-side-width));
}

.wallet-reconciliation-panel {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.wallet-reconciliation-panel > .page-header {
  width: var(--today-content-width);
}

.wallet-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: var(--today-content-width);
}

.wallet-summary-card {
  display: grid;
  gap: 5px;
  min-height: 88px;
  align-content: center;
  border: 1px solid #d4dfed;
  border-top: 2px solid #4f82c6;
  border-radius: 10px;
  padding: 13px 14px 10px;
  background: #f9fbfe;
}

.wallet-summary-detail {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}

.wallet-summary-card.is-actual {
  border-top-color: #5680b7;
  background: #f8fafc;
}

.wallet-summary-card.is-difference.is-match {
  border-color: #cdd8e6;
  border-top-color: #6988b1;
  background: #f8fbfe;
}

.wallet-summary-card.is-difference.is-surplus {
  border-color: #a8d8bd;
  border-top-color: #16803c;
  background: #f0fbf5;
}

.wallet-summary-card.is-difference.is-shortage {
  border-color: #efb3b3;
  border-top-color: #c83232;
  background: #fff7f7;
}

.wallet-summary-card > span {
  color: #52647a;
  font-size: 14px;
  font-weight: 800;
}

.wallet-summary-card strong {
  flex: none;
  color: #3061a2;
  font-size: 25px;
  font-weight: 900;
}

.wallet-summary-card.is-match strong { color: #486893; }
.wallet-summary-card.is-surplus strong { color: #0f6d45; }
.wallet-summary-card.is-shortage strong { color: #b32323; }

.wallet-summary-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #718199;
  font-size: 12px;
  font-weight: 700;
}

.wallet-content-card {
  width: var(--today-content-width);
  overflow: hidden;
  border: 1px solid #d4dfed;
  border-top: 2px solid #6784aa;
  border-radius: 10px;
  background: #ffffff;
}

.wallet-content-card.is-wallet-history { border-top-color: #6689b8; }

.wallet-content-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px 8px;
  background: #f3f7fb;
  border-bottom: 1px solid #dce5f0;
}

.wallet-content-head h3,
.wallet-content-head p { margin: 0; }
.wallet-content-head h3 { color: #456184; font-size: 17px; }
.wallet-content-head p,
.wallet-content-head > span { color: #718199; font-size: 12px; font-weight: 700; }

.wallet-content-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wallet-content-title h3,
.wallet-content-title p {
  white-space: nowrap;
}

.wallet-content-title h3 { flex: none; }
.wallet-content-title p {
  overflow: hidden;
  text-overflow: ellipsis;
}

.wallet-content-title p::before { content: "｜"; }

.wallet-history-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-left: auto;
  white-space: nowrap;
}

.wallet-history-controls label {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.wallet-history-controls label > span,
.wallet-history-controls > span {
  color: #718199;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.wallet-history-controls > span {
  min-width: 3em;
  text-align: right;
}

.wallet-history-controls select {
  min-width: 112px;
  height: 30px;
  border: 1px solid #bfccdd;
  border-radius: 7px;
  padding: 0 28px 0 9px;
  color: #456184;
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.wallet-content-meta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  white-space: nowrap;
}

.wallet-content-meta > span {
  color: #718199;
  font-size: 12px;
  font-weight: 800;
}

.wallet-content-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wallet-content-button {
  min-width: 88px;
  height: 34px;
  border: 1px solid #9cb7db;
  border-radius: 8px;
  padding: 0 12px;
  color: #2b69b9;
  background: #f0f5fc;
  font-size: 13px;
  font-weight: 900;
}

.wallet-content-button.is-save {
  min-width: 88px;
  height: 30px;
  padding: 0 10px;
  border-color: #3275cb;
  color: #ffffff;
  background: #3275cb;
}

.wallet-content-button:hover { background: #e3ecf7; }
.wallet-content-button.is-save:hover { background: #2a65b3; }

.wallet-list,
.wallet-history-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.wallet-list {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.wallet-row {
  display: grid;
  align-items: center;
  justify-items: stretch;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.wallet-row.is-fixed-wallet > input {
  height: 52px;
  min-height: 52px;
  appearance: textfield;
  text-align: center;
  line-height: 52px;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 800;
}

.wallet-row.is-fixed-wallet > input::placeholder {
  color: #777777;
  opacity: 1;
  text-align: center;
}

.wallet-row.is-fixed-wallet > input::-webkit-outer-spin-button,
.wallet-row.is-fixed-wallet > input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.wallet-row label,
.wallet-side-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #52647a;
  font-size: 12px;
  font-weight: 800;
}

.wallet-row input,
.wallet-row select,
.wallet-side-field input,
.wallet-side-field textarea {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 7px 9px;
  color: #354a67;
  background: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.wallet-row.is-fixed-wallet > input.is-negative {
  color: #c83f75;
}

.wallet-side-field textarea {
  min-height: 92px;
  resize: vertical;
}

.wallet-delete-button {
  height: 36px;
  border: 1px solid #efb3b3;
  border-radius: 8px;
  color: #a32020;
  background: #fff7f7;
  font-size: 13px;
  font-weight: 900;
}

.wallet-delete-button:hover { background: #ffecec; }

.wallet-history-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid #dce5f0;
  border-left: 5px solid #6988b1;
  border-radius: 9px;
  background: #ffffff;
}

.wallet-history-row.is-match {
  border-color: #cdd8e6;
  border-left-color: #6988b1;
  background: #f8fbfe;
}

.wallet-history-row.is-surplus {
  border-color: #a8d8bd;
  border-left-color: #16803c;
  background: #f0fbf5;
}

.wallet-history-row.is-shortage {
  border-color: #efb3b3;
  border-left-color: #c83232;
  background: #fff7f7;
}
.wallet-history-row time { color: #456184; font-weight: 900; }
.wallet-history-row time,
.wallet-history-row div,
.wallet-history-row p {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

.wallet-history-row div,
.wallet-history-row p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  overflow: hidden;
  color: #52647a;
  font-size: 12px;
  font-weight: 800;
}

.wallet-history-row div span,
.wallet-history-row p span { color: #718199; font-size: 12px; font-weight: 800; }
.wallet-history-row div b,
.wallet-history-row p b {
  min-width: 0;
  overflow: hidden;
  color: #456184;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
}
.wallet-history-row em { justify-self: end; border-radius: 999px; padding: 4px 7px; color: #486893; background: #eaeff6; font-size: 11px; font-style: normal; font-weight: 900; }
.wallet-history-row.is-surplus em { color: #0f6d45; background: #e3f7eb; }
.wallet-history-row.is-shortage em { color: #a32020; background: #ffecec; }
.wallet-history-row.is-surplus div:nth-of-type(3) b { color: #0f6d45; }
.wallet-history-row.is-shortage div:nth-of-type(3) b { color: #b32323; }

.wallet-empty-state {
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed #ccd8e7;
  border-radius: 8px;
  color: #718199;
  background: #fafcfe;
  font-size: 14px;
  font-weight: 700;
}

.wallet-reconciliation-tools .employee-ledger-tool-group {
  grid-template-columns: 1fr;
}

.wallet-reconciliation-tools .wallet-tool-card {
  border-top-width: 2px;
  padding-top: 12px;
}

.wallet-reconciliation-tools .wallet-tool-card.is-wallet-manage { border-top-color: #4f82c6; background: #f9fbfe; }
.wallet-reconciliation-tools .wallet-tool-card.is-wallet-check { border-top-color: #5680b7; background: #f8fafc; }
.wallet-reconciliation-tools .wallet-tool-card.is-wallet-safe { border-top-color: #6689b8; background: #f9fbfd; }

.wallet-reconciliation-tools .employee-ledger-tool-group h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.wallet-reconciliation-tools .employee-ledger-tool-group h3 span { flex: none; }
.wallet-reconciliation-tools .employee-ledger-tool-group h3 small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-reconciliation-tools .employee-ledger-tool-group h3 small::before { content: "｜"; }

.wallet-safety-note {
  margin: 0;
  color: #52647a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.wallet-status {
  min-height: 42px;
  border: 1px solid #ccd8e7;
  border-radius: 8px;
  padding: 9px 10px;
  color: #52647a;
  background: #f9fbfd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.wallet-status.success { border-color: #a8d8bd; color: #0f6d45; background: #f0fbf5; }
.wallet-status.warn { border-color: #e8cf91; color: #8a5a00; background: #fffaf0; }
.wallet-status.error { border-color: #efb3b3; color: #a32020; background: #fff7f7; }

/* 六模块统一使用页面纵向滚动，右侧栏不再建立独立滚动容器 */
.ops-side,
.employee-ledger-shell > .employee-ledger-side,
.management-summary-shell > .employee-ledger-side,
.monthly-report-shell > .employee-ledger-side,
.employee-flow-shell > .employee-ledger-side,
.wallet-reconciliation-shell > .employee-ledger-side {
  position: sticky;
  top: 14px;
  z-index: 20;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
}

.ai-qa-runner {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #99b1d1;
  border-radius: 6px;
  background: #f5f8fc;
  box-shadow: 0 8px 24px rgb(26 71 110 / 18%);
  color: #2c578f;
  font-size: 13px;
}

.ai-qa-runner[hidden] {
  display: none !important;
}

.ai-qa-runner button {
  padding: 6px 12px;
}

.ai-qa-runner [data-status="pass"] {
  color: #087955;
  font-weight: 700;
}

.ai-qa-runner [data-status="fail"] {
  color: #b51f2b;
  font-weight: 700;
}

@media (max-width: 760px) {
  .monthly-employee-summary-grid,
  .monthly-income-card-grid {
    grid-template-columns: 1fr;
  }

  .app-shell {
    grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 90;
    height: 100vh;
  }

  .sidebar-footer {
    position: absolute;
    margin-top: 0;
  }

  .workspace {
    padding: 18px;
  }

  .topbar {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-form {
    grid-template-columns: 1fr;
  }

  .wide-field {
    grid-column: auto;
  }

  .monthly-detail-modal {
    padding: 12px;
  }

  .monthly-detail-dialog {
    width: calc(100vw - 24px);
  }

  .monthly-dialog-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .monthly-dialog-row strong {
    grid-column: 2;
    text-align: left;
  }

  .monthly-company-expense-row {
    grid-template-columns: 48px minmax(0, 1fr) 118px 104px;
    gap: 4px;
    padding-inline: 4px;
  }

  .monthly-company-exchange-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .monthly-company-expense-row strong {
    grid-column: auto;
    text-align: right;
  }

  .monthly-company-exchange-row strong {
    grid-column: 2;
    text-align: left;
  }

  .monthly-company-expense-summary {
    grid-template-columns: 1fr;
  }

  .monthly-purpose-list {
    grid-template-columns: 1fr;
  }

  .monthly-detail-dialog:has(.monthly-purpose-list) .monthly-purpose-row {
    grid-template-columns: 42px minmax(0, 1fr) minmax(96px, max-content) 92px;
  }

  .monthly-detail-dialog:has(.monthly-purpose-list) .monthly-purpose-row strong {
    grid-column: auto;
    text-align: right;
  }

  .monthly-detail-dialog:has(.monthly-purpose-list) .monthly-category-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-category-summary-head {
    padding-inline: 10px;
  }

  .monthly-category-summary-head > div {
    gap: 10px;
  }

  .employee-validation-summary,
  .employee-validation-list {
    grid-template-columns: 1fr;
  }
}

/* 六模块右侧操作栏：宽屏并排，窗口不足时统一覆盖主内容。 */
:root {
  --operation-overlay-width: var(--layout-side-width);
  --operation-overlay-inset: 12px;
  --operation-overlay-top: 14px;
}

:is(
  .ops-side,
  .employee-ledger-shell > .employee-ledger-side,
  .management-summary-shell > .employee-ledger-side,
  .monthly-report-shell > .employee-ledger-side,
  .employee-flow-shell > .employee-ledger-side,
  .wallet-reconciliation-shell > .employee-ledger-side
) {
  position: sticky;
  top: var(--operation-overlay-top);
  z-index: 20;
  max-height: none;
  margin: 0;
  overflow: visible;
  overscroll-behavior: auto;
  border: 1px solid #bfccde;
  border-radius: 8px;
  padding: 10px;
  background: #f5f8fb;
  box-shadow: 0 14px 36px rgba(53, 99, 158, 0.2);
  scrollbar-gutter: auto;
}

/* 六个正式栏目宽屏横向对齐：右栏保持固定宽度，新增空间只扩展左侧主内容。 */
@media (min-width: 1601px) {
  :is(
    #todayOps .ops-layout,
    .employee-ledger-shell,
    .management-summary-shell,
    .monthly-report-shell,
    .employee-flow-shell,
    .wallet-reconciliation-shell
  ) {
    grid-template-columns: minmax(0, 1fr) var(--layout-side-width);
    width: calc(100vw - var(--layout-sidebar-width) - 36px);
    max-width: calc(100vw - var(--layout-sidebar-width) - 36px);
  }

  :is(
    #todayOps .operation-panel,
    .employee-ledger-panel,
    .management-summary-panel,
    .monthly-report-panel,
    .employee-flow-panel,
    .wallet-reconciliation-panel,
    #todayOps .operation-panel > .page-header,
    .employee-ledger-panel > .page-header,
    .management-summary-panel > .page-header,
    .monthly-report-panel > .page-header,
    .employee-flow-panel > .page-header,
    .wallet-reconciliation-panel > .page-header,
    #todayOps .ledger-sections,
    #todayOps .balance-summary-panel,
    #todayOps .monthly-panel,
    #todayOps .date-data-status,
    .employee-ledger-wrap,
    .employee-ledger-summary,
    .wallet-summary-grid,
    .wallet-content-card
  ) {
    width: 100%;
    max-width: none;
  }

  #todayOps .ledger-section:not(.employee-usdt-down-ledger) .ledger-table th:nth-child(2),
  #todayOps .ledger-section:not(.employee-usdt-down-ledger) .ledger-table td:nth-child(2) {
    width: auto;
  }
}

@media (max-width: 1600px) {
  #todayOps .daily-report-head {
    justify-content: flex-start;
  }

  #todayOps #dailyReportDate {
    text-align: left;
  }

  :is(
    .ops-layout,
    .employee-ledger-shell,
    .management-summary-shell,
    .monthly-report-shell,
    .employee-flow-shell,
    .wallet-reconciliation-shell
  ) {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    justify-items: stretch;
    gap: 0;
    width: min(100%, var(--today-panel-width));
    max-width: var(--today-panel-width);
    overflow: visible;
  }

  .management-summary-shell {
    width: min(100%, var(--management-panel-width));
    max-width: var(--management-panel-width);
  }

  :is(
    .operation-panel,
    .employee-ledger-panel,
    .management-summary-panel,
    .monthly-report-panel,
    .employee-flow-panel,
    .wallet-reconciliation-panel
  ) {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }

  :is(
    .ops-side,
    .employee-ledger-shell > .employee-ledger-side,
    .management-summary-shell > .employee-ledger-side,
    .monthly-report-shell > .employee-ledger-side,
    .employee-flow-shell > .employee-ledger-side,
    .wallet-reconciliation-shell > .employee-ledger-side
  ) {
    position: sticky;
    top: var(--operation-overlay-top);
    inset-inline: auto;
    z-index: 40;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: min(
      var(--operation-overlay-width),
      calc(100% - (var(--operation-overlay-inset) * 2))
    );
    margin: var(--operation-overlay-inset) var(--operation-overlay-inset) 0 0;
  }

  #employeeLedgerView.is-frozen-month .employee-ledger-shell > .employee-ledger-side {
    position: static;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin: 12px 0 0;
  }
}

@media (max-width: 760px) {
  :root {
    --operation-overlay-inset: 8px;
  }
}
.smart-input-status {
  min-height: 18px;
  margin: 7px 0 0;
  color: #667fa0;
  font-size: 12px;
  line-height: 1.5;
}

.smart-input-status.is-error {
  color: #b42318;
}

.smart-input-status.is-success {
  color: #147a52;
}

.auto-fit-text.is-auto-fit-complete {
  overflow: hidden;
  text-overflow: clip !important;
}

.auto-fit-text.is-auto-fit-overflow {
  overflow: hidden;
  text-overflow: ellipsis !important;
}

/* 员工结算单桌面端最终覆盖：确保规则位于全局样式之后 */
@media (min-width: 1200px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-transfer-flow-block > * {
    order: 3;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-transfer-flow-block > .employee-performance-transfer-panel {
    order: 1;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-transfer-flow-block > h4 {
    order: 2;
    font-size: 0 !important;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-transfer-flow-block > h4::after {
    content: "相互转账";
    font-size: 14px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-transfer-flow-block > .employee-flow-total-line {
    order: 4;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel::before {
    content: "U业绩调整";
    display: block;
    margin: -5px -5px 0;
    padding: 2px 8px;
    border-bottom: 1px solid #d9e1ec;
    color: #0b5a45;
    background: #eaf7f1;
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
  }

  .monthly-detail-modal.is-employee-ledger-detail {
    padding: 6px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog {
    width: min(1320px, calc(100vw - 12px));
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head {
    gap: 6px;
    padding: 5px 8px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head > div {
    gap: 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-body {
    gap: 4px;
    padding: 5px 6px;
    overflow: hidden;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-section h3 {
    padding: 2px 8px;
    font-size: 14px;
    line-height: 19px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-card-grid {
    gap: 4px;
    padding: 4px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid .employee-detail-mini-card {
    min-height: 38px;
    gap: 6px;
    padding: 3px 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid .employee-detail-mini-card > span,
  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid .employee-detail-mini-card-value {
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid .employee-detail-mini-card .employee-detail-input-wrap {
    height: 25px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-grid {
    gap: 5px;
    padding: 4px 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block h4,
  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block h4 {
    min-height: 24px;
    padding: 2px 8px;
    font-size: 14px;
    line-height: 19px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-line {
    box-sizing: border-box;
    min-height: 23px;
    height: 23px;
    gap: 5px;
    padding: 1px 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-line span,
  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-line b,
  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-line strong,
  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-amount {
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-input-wrap {
    height: 24px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-salary-offset-panel {
    gap: 4px;
    margin: 0 5px 4px;
    padding: 3px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-salary-offset-title,
  .monthly-detail-modal.is-employee-ledger-detail .employee-salary-offset-step {
    min-height: 27px;
    padding: 2px 6px;
    font-size: 13px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
    padding: 3px 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-side-stack {
    gap: 4px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-unified-flow-row,
  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-usdt-down-flow-row {
    min-height: 23px;
    height: 23px;
    padding-block: 0;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-unified-flow-row > *,
  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-usdt-down-flow-row > * {
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .monthly-dialog-empty {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-total-line,
  .monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-total-line {
    min-height: 23px;
    height: 23px;
    padding-block: 1px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel {
    gap: 4px;
    margin-bottom: 4px;
    padding: 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-summary {
    gap: 4px 9px;
    font-size: 11px;
    line-height: 15px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form {
    gap: 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label {
    gap: 1px;
    font-size: 11px;
    line-height: 14px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form select,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form input,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount b,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form > button {
    height: 27px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form > button {
    padding-inline: 10px;
    font-size: 11px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel > p,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-empty {
    display: none;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-history {
    gap: 2px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-history-row {
    min-height: 22px;
    padding: 1px 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-transfer-net-note {
    display: none;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-summary-section .employee-detail-panel {
    gap: 0;
    padding: 4px 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-overview-grid {
    gap: 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card {
    grid-template-rows: max-content 25px;
    gap: 1px;
    min-height: 45px;
    padding: 3px 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card > span,
  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card-value {
    font-size: 14px;
    line-height: 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card-value {
    height: 25px;
    padding-inline: 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-actions {
    min-height: 30px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-save-button {
    height: 30px;
    min-width: 100px;
    font-size: 14px;
  }
}
/* 首页经营驾驶舱 V1.0：全部规则严格限定在 dashboard 作用域内。 */
#dashboardView {
  overflow-x: hidden;
  --dashboard-body-size: 14px;
  --dashboard-support-size: 13px;
  --dashboard-support-color: #5b7083;
  --dashboard-row-stripe: #f6f8fb;
  --dashboard-row-hover: #ecf1f7;
  --dashboard-row-divider: #ebeef3;
}

.dashboard-detail-dialog {
  --dashboard-row-stripe: #f6f8fb;
  --dashboard-row-hover: #ecf1f7;
  --dashboard-row-divider: #ebeef3;
}

#dashboardView .dashboard-shell {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

#dashboardView .dashboard-toolbar,
#dashboardView .dashboard-card,
.dashboard-detail-dialog {
  border: 1px solid #cfdbea;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(50, 104, 175, 0.06);
}

#dashboardView .dashboard-toolbar {
  min-height: 40px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  background: #f5f8fc;
}

#dashboardView .dashboard-toolbar > div:first-child {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

#dashboardView .dashboard-toolbar h2::after {
  content: "｜";
  margin-inline: 8px;
  color: #9aabba;
  font-size: 14px;
  font-weight: 500;
}

#dashboardView .dashboard-toolbar h2 {
  margin: 0;
  color: #305c97;
  font-size: 16px;
  font-weight: 850;
}

#dashboardView .dashboard-toolbar p {
  margin: 0;
  color: var(--dashboard-support-color);
  font-size: var(--dashboard-support-size);
  overflow: hidden;
  text-overflow: ellipsis;
}

#dashboardView .dashboard-filters,
#dashboardView .dashboard-quick-filter,
#dashboardView .dashboard-scope-switch {
  display: flex;
  align-items: center;
  gap: 7px;
}

#dashboardView .dashboard-filters { flex: 0 0 auto; gap: 0; white-space: nowrap; }

#dashboardView .dashboard-filters label + label::before,
#dashboardView .dashboard-quick-filter::before {
  content: "｜";
  margin-inline: 8px;
  color: #9aabba;
  font-size: 14px;
  font-weight: 500;
}

#dashboardView .dashboard-filters label {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  color: #526a80;
  font-size: var(--dashboard-support-size);
  font-weight: 700;
  white-space: nowrap;
}

#dashboardView .dashboard-filters label select { flex: 0 0 88px; width: 88px; }
#dashboardView .dashboard-filters #dashboardYearSelect { flex-basis: 100px; width: 100px; min-width: 100px; }
#dashboardView .dashboard-filters #dashboardMonthSelect { flex-basis: 76px; width: 76px; min-width: 76px; }

#dashboardView .dashboard-filters select,
#dashboardView .dashboard-trend-card select {
  height: 32px;
  min-width: 80px;
  border: 1px solid #c1d1e5;
  border-radius: 8px;
  background: #f9fbfd;
  color: #315687;
  padding: 0 26px 0 9px;
  font: inherit;
}

#dashboardView .dashboard-quick-filter button,
#dashboardView .dashboard-scope-switch button {
  height: 30px;
  border: 1px solid #c6d4e7;
  border-radius: 8px;
  background: #f5f8fc;
  color: #356bb0;
  padding: 0 10px;
  font-size: var(--dashboard-support-size);
  font-weight: 800;
  cursor: pointer;
}

#dashboardView .dashboard-quick-filter button:hover,
#dashboardView .dashboard-scope-switch button.active {
  border-color: #5487ca;
  background: #eaf1f9;
  color: #2963b0;
}

#dashboardView .dashboard-core-grid {
  display: grid;
  gap: 8px;
  min-width: 0;
  container-type: inline-size;
}

#dashboardView .dashboard-core-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 72px;
  gap: 8px;
  min-width: 0;
}

#dashboardView .dashboard-core-card {
  min-width: 0;
  min-height: 0;
  padding: 7px 8px;
  border: 1px solid #d3deec;
  border-top: 2px solid #5787c6;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, #f7fafe 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

#dashboardView .dashboard-core-card--thb { border-top-color: #6b8ab2; }
#dashboardView .dashboard-core-card--business { border-top-color: #8c9fb8; }
#dashboardView .dashboard-core-card.is-balance { border-top-color: #3372c4; background: linear-gradient(180deg, #fff 0%, #f2f6fc 100%); }

#dashboardView .dashboard-core-head {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#dashboardView .dashboard-core-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #63798e;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#dashboardView .dashboard-core-head > b {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 4px;
  background: #edf2f8;
  color: #5480b9;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
}

#dashboardView .dashboard-core-card--thb .dashboard-core-head > b { background: #f0f3f8; color: #758ba9; }
#dashboardView .dashboard-core-card--business .dashboard-core-head > b { background: #f2f5f8; color: #798ca4; }

#dashboardView .dashboard-core-head > strong {
  min-width: 0;
  color: #305c94;
  font-size: clamp(16px, 1.05vw, 19px);
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dashboardView .dashboard-core-card.is-balance .dashboard-core-head > strong { color: #2c69b9; font-weight: 900; }

#dashboardView .dashboard-core-card > small {
  color: var(--dashboard-support-color);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dashboardView .dashboard-core-footer {
  display: flex;
  align-items: center;
  gap: 1px;
}

#dashboardView .dashboard-core-footer > span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dashboardView .dashboard-core-footer > i { flex: 0 0 auto; color: #a5b4c0; font-style: normal; }

#dashboardView .dashboard-core-card > small em {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #657a8d;
  font-style: normal;
}

@container (max-width: 1450px) {
  #dashboardView .dashboard-core-card > small { font-size: 11.5px; }
}

@container (max-width: 1250px) {
  #dashboardView .dashboard-core-card > small { font-size: 11px; }
}

@container (max-width: 1000px) {
  #dashboardView .dashboard-core-card { padding-inline: 6px; }
}

#dashboardView .is-up,
.dashboard-detail-dialog .is-up { color: #168461 !important; }
#dashboardView .is-down,
.dashboard-detail-dialog .is-down { color: #c44b4b !important; }
#dashboardView .is-flat,
.dashboard-detail-dialog .is-flat { color: #6e8193 !important; }

#dashboardView .dashboard-overview-grid,
#dashboardView .dashboard-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

#dashboardView .dashboard-analysis-grid { align-items: start; }

#dashboardView .dashboard-down-card { container: dashboard-down / inline-size; }
#dashboardView .dashboard-year-card,
#dashboardView .dashboard-lifetime-income-card { grid-column: 1 / -1; }

#dashboardView .dashboard-card {
  min-width: 0;
  overflow: hidden;
}

#dashboardView .dashboard-card > header {
  min-height: 40px;
  padding: 5px 12px;
  border-bottom: 1px solid #dbe3ee;
  background: #f5f8fc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#dashboardView .dashboard-card > header > div:first-child {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

#dashboardView .dashboard-card > header > div:first-child > span { flex: 0 0 auto; }

#dashboardView .dashboard-card > header > div:first-child > span + small::before {
  content: "｜";
  margin-inline: 8px;
  color: #9aabba;
  font-weight: 500;
}

#dashboardView .dashboard-card > header span {
  color: #305c97;
  font-size: 16px;
  font-weight: 850;
}

#dashboardView .dashboard-card > header small {
  display: inline-block;
  margin: 0;
  min-width: 0;
  color: var(--dashboard-support-color);
  font-size: var(--dashboard-support-size);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboardView .dashboard-analysis-grid .dashboard-card.dashboard-aux-card > header { background: #f9fafb; border-bottom-color: #e7ecf3; }
#dashboardView .dashboard-analysis-grid .dashboard-card.dashboard-aux-card > header span { color: #5a7393; font-size: 14px; font-weight: 750; }
#dashboardView .dashboard-analysis-grid .dashboard-card.dashboard-aux-card > header small { color: #8296a7; font-size: 11px; }

#dashboardView .dashboard-card > header > .dashboard-scope-switch,
#dashboardView .dashboard-card > header > .dashboard-detail-trigger,
#dashboardView .dashboard-card > header > .dashboard-ranking-toggle { flex: 0 0 auto; }

#dashboardView .dashboard-card > header > .dashboard-ranking-toggle {
  height: 30px;
  padding: 0 10px;
  border: 1px solid #c6d4e7;
  border-radius: 8px;
  background: #f5f8fc;
  color: #356bb0;
  font-size: var(--dashboard-support-size);
  font-weight: 800;
  cursor: pointer;
}

#dashboardView [data-dashboard-ranking-toggle]:hover,
#dashboardView [data-dashboard-ranking-toggle][aria-expanded="true"] {
  border-color: #5487ca;
  background: #eaf1f9;
  color: #2963b0;
}

#dashboardView .dashboard-trend-card #dashboardTrendCaption { flex: 0 0 auto; overflow: visible; }
#dashboardView .dashboard-trend-card #dashboardTrendCaption::after {
  content: "｜";
  margin-inline: 8px;
  color: #9aabba;
  font-weight: 500;
}
#dashboardView .dashboard-trend-card #dashboardTrendAverage {
  flex: 0 0 auto;
  overflow: visible;
  color: #607b9f;
  font-weight: 750;
}
#dashboardView .dashboard-trend-card #dashboardTrendAverage::after {
  content: "｜";
  margin-inline: 8px;
  color: #9aabba;
  font-weight: 500;
}
#dashboardView .dashboard-trend-card #dashboardTrendMetric { flex: 0 0 135px; width: 135px; }

#dashboardView .dashboard-trend-card > header { justify-content: space-between; gap: 0; }
#dashboardView .dashboard-trend-card > header > div:first-child { flex: 0 0 auto; }
#dashboardView .dashboard-trend-card > header > .dashboard-toolbar {
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#dashboardView .dashboard-trend-card > header > div:first-child > span + small::before,
#dashboardView .dashboard-trend-card #dashboardTrendCaption::after,
#dashboardView .dashboard-trend-card #dashboardTrendAverage::after,
#dashboardView .dashboard-trend-card .dashboard-toolbar h2::after,
#dashboardView .dashboard-trend-card .dashboard-filters label + label::before,
#dashboardView .dashboard-trend-card .dashboard-quick-filter::before { margin-inline: 4px; }
#dashboardView .dashboard-trend-card .dashboard-toolbar #dashboardYearSelect {
  flex-basis: 92px;
  width: 92px;
  min-width: 92px;
  padding-right: 20px;
}
#dashboardView .dashboard-trend-card .dashboard-toolbar #dashboardMonthSelect {
  flex-basis: 92px;
  width: 92px;
  min-width: 92px;
  padding-right: 26px;
}
#dashboardView .dashboard-trend-card .dashboard-quick-filter { gap: 4px; }
#dashboardView .dashboard-trend-card .dashboard-quick-filter button { height: 32px; padding-inline: 8px; }

@media (max-width: 800px) {
  #dashboardView .dashboard-trend-card #dashboardTrendMetric { flex-basis: 130px; width: 130px; }
}

@media (max-width: 1050px) {
  #dashboardView .dashboard-trend-card > header { flex-wrap: wrap; row-gap: 6px; }
  #dashboardView .dashboard-trend-card > header > .dashboard-toolbar {
    flex-basis: 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    align-items: center;
    flex-direction: row;
  }
}

@media (max-width: 420px) {
  #dashboardView .dashboard-trend-card > header > div:first-child,
  #dashboardView .dashboard-trend-card > header > .dashboard-toolbar,
  #dashboardView .dashboard-trend-card .dashboard-filters {
    flex-wrap: wrap;
    white-space: normal;
  }
  #dashboardView .dashboard-trend-card > header > div:first-child,
  #dashboardView .dashboard-trend-card .dashboard-filters {
    flex: 1 1 100%;
    min-width: 0;
  }
}

#dashboardView .dashboard-summary-card > div,
#dashboardView .dashboard-alert-card > div {
  min-height: 0;
  padding: 9px 12px;
}

#dashboardView .dashboard-summary-card {
  display: flex;
  flex-direction: column;
}

#dashboardView .dashboard-summary-card > header { flex: 0 0 auto; }

#dashboardView .dashboard-summary-card > div {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

#dashboardView .dashboard-summary-card p {
  margin: 0;
  color: #52697e;
  font-size: var(--dashboard-body-size);
  line-height: 1.45;
}

#dashboardView .dashboard-summary-card strong { color: #336cb5; }

#dashboardView #dashboardAlerts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

#dashboardView #dashboardAlerts div {
  min-width: 0;
  padding: 6px 7px;
  border-radius: 8px;
  background: #f8f9fb;
  text-align: center;
}

#dashboardView #dashboardAlerts b,
#dashboardView #dashboardAlerts span,
#dashboardView #dashboardAlerts strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#dashboardView #dashboardAlerts b { color: #4980c8; font-size: 17px; }
#dashboardView #dashboardAlerts span { color: var(--dashboard-support-color); font-size: 12px; }
#dashboardView #dashboardAlerts strong { color: #305c97; font-size: 13px; }

#dashboardView .dashboard-trend-canvas {
  height: 195px;
  padding: 5px 12px 2px;
}

/* 在窄窗口里保留趋势值的可读间距，只滚动图表本身。 */
@media (max-width: 1100px) {
  #dashboardView .dashboard-trend-canvas {
    overflow-x: auto;
    overflow-y: hidden;
  }

  #dashboardView .dashboard-trend-canvas .dashboard-trend-plot {
    min-width: 900px;
  }
}

@media (max-width: 1180px) {
  #dashboardView .dashboard-analysis-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1500px) {
  .monthly-report-expense-calc {
    gap: 4px;
    padding-inline: 5px;
  }
  .monthly-report-expense-box {
    padding-inline: 4px;
  }
  .monthly-report-expense-box strong {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .management-status-pair {
    grid-template-columns: 54px 30px;
    width: 88px;
  }
}

#dashboardView .dashboard-trend-plot,
.dashboard-detail-dialog .dashboard-trend-plot {
  position: relative;
  width: 100%;
  height: 100%;
}

#dashboardView .dashboard-trend-canvas svg,
.dashboard-detail-dialog .dashboard-detail-trend svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#dashboardView #dashboardTrendChart svg { pointer-events: auto; }
#dashboardView #dashboardTrendChart svg :not(.dashboard-trend-bar) { pointer-events: none; }

#dashboardView .dashboard-trend-line,
.dashboard-detail-dialog .dashboard-trend-line {
  fill: none;
  stroke: #3e7bcb;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#dashboardView .dashboard-trend-line {
  stroke-width: 2.2;
  stroke-dasharray: 9 7;
}

#dashboardView .dashboard-trend-area,
.dashboard-detail-dialog .dashboard-trend-area { fill: url(#dashboardTrendFill); }

#dashboardView .dashboard-trend-bar {
  fill: url(#dashboardTrendBarFill);
  pointer-events: auto;
}
#dashboardView .dashboard-trend-bar.is-hover { fill: url(#dashboardTrendBarHoverFill); }
#dashboardView .dashboard-trend-value.is-hover { color: #2d6dc0; }
#dashboardView .dashboard-trend-value.is-unavailable { color: #90a2b0; font-weight: 650; }
#dashboardView .dashboard-trend-dot.is-hover {
  width: 11px;
  height: 11px;
  border-color: #2b69b9;
  box-shadow: 0 0 0 3px rgba(79, 130, 198, 0.13);
}
#dashboardView .dashboard-trend-month.is-hover { color: #386db3; font-weight: 850; }
#dashboardView .dashboard-trend-value,
.dashboard-detail-dialog .dashboard-trend-value {
  position: absolute;
  left: var(--trend-x);
  top: calc(var(--trend-y) - 9px - var(--trend-lift));
  transform: translate(-50%, -100%);
  color: #3b71b8;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
#dashboardView .dashboard-trend-dot,
.dashboard-detail-dialog .dashboard-trend-dot {
  position: absolute;
  left: var(--trend-x);
  top: var(--trend-y);
  width: 9px;
  height: 9px;
  border: 2px solid #3e7bcb;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
#dashboardView .dashboard-trend-month,
.dashboard-detail-dialog .dashboard-trend-month {
  position: absolute;
  left: var(--trend-x);
  bottom: 0;
  transform: translateX(-50%);
  color: #61788d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#dashboardView .dashboard-analysis-grid .dashboard-card { min-height: 0; }
#dashboardView .dashboard-analysis-grid .dashboard-ranking-card { min-height: 0; }

#dashboardView .dashboard-ranking {
  margin: 0;
  padding: 3px 12px 5px;
  list-style: none;
  height: auto;
  max-height: none;
  overflow: visible;
}

#dashboardView .dashboard-ranking li { background: #fff; border-bottom: 1px dashed rgba(114, 139, 171, 0.22); }
#dashboardView .dashboard-ranking li.dashboard-ranking-placeholder { height: 33px; pointer-events: none; }
#dashboardView .dashboard-ranking-empty-note { display: block; padding: 7px 2px; color: var(--dashboard-support-color); font-size: 11px; line-height: 18px; }

#dashboardView .dashboard-ranking :is(button, .dashboard-ranking-row) {
  position: relative;
  width: 100%;
  min-height: 32px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

#dashboardView .dashboard-ranking .dashboard-ranking-with-share::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--dashboard-ranking-fill);
  border-radius: 3px;
  background: rgba(79, 130, 198, 0.14);
  pointer-events: none;
  transition: width 0.2s ease;
}

#dashboardView .dashboard-ranking .dashboard-ranking-with-share > * {
  position: relative;
  z-index: 1;
}

#dashboardView .dashboard-ranking button:hover { background: transparent; }
#dashboardView .dashboard-ranking :is(button, .dashboard-ranking-row) > b { flex: 0 0 23px; color: #5385c6; text-align: center; font-size: 14px; }
#dashboardView .dashboard-ranking-name { flex: 0 1 auto; max-width: 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #45638a; font-size: 15px; font-weight: 800; }
#dashboardView .dashboard-ranking-meta { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--dashboard-support-color); font-size: var(--dashboard-support-size); }
#dashboardView .dashboard-ranking em { flex: 0 0 auto; margin-left: auto; color: #2f60a0; font-size: 15px; font-style: normal; font-weight: 850; text-align: right; white-space: nowrap; }
#dashboardView .dashboard-ranking-cny { margin-left: 4px; color: #7387a0; font-size: 13px; font-weight: 700; white-space: nowrap; }
#dashboardView #dashboardRewardRanking .dashboard-ranking-name { max-width: 27%; }
#dashboardView #dashboardRewardRanking .dashboard-ranking-meta { white-space: nowrap; }

#dashboardView .dashboard-ranking-expand {
  display: block;
  margin: 0 12px 5px auto;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #4c7bb8;
  font-size: 11px;
  cursor: pointer;
}
#dashboardView .dashboard-ranking-expand-spacer { height: 19px; margin: 0 12px 5px auto; }
#dashboardView .dashboard-ranking-footer {
  min-height: 33px;
  padding: 6px 12px;
  border-top: 1px solid #dbe3ee;
  background: #f5f8fc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3px 8px;
  color: #647c90;
  font-size: 12px;
  line-height: 1.2;
}
#dashboardView .dashboard-ranking-card .dashboard-ranking-footer { min-height: 36px; }
#dashboardView .dashboard-ranking-footer > div { margin-left: auto; text-align: right; }
#dashboardView .dashboard-ranking-footer strong { color: #2f60a0; font-size: 13px; font-weight: 850; white-space: nowrap; }
#dashboardView .dashboard-ranking-footer-cny { color: #7387a0; font-size: 12px; font-weight: 750; white-space: nowrap; }
#dashboardView .dashboard-ranking-footer small { display: block; margin-top: 2px; color: #7890a2; font-size: 11px; white-space: nowrap; }
#dashboardView .dashboard-ranking-footer-employee { flex-wrap: nowrap; }
#dashboardView .dashboard-ranking-footer-employee small { display: inline; margin-top: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#dashboardView .dashboard-ranking-footer-employee-separator { flex: 0 0 auto; color: #b0bbc9; }
#dashboardView .dashboard-ranking-footer-employee strong { flex: 0 0 auto; margin-left: auto; }
#dashboardView .dashboard-ranking-footer-advance-values {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
#dashboardView .dashboard-ranking-footer-original { color: #70879a; font-size: 11px; }
#dashboardView .dashboard-ranking-footer-separator { color: #b0bbc9; font-size: 11px; }

#dashboardView .dashboard-lifetime-ranking {
  columns: 2;
  column-gap: 22px;
  padding-block: 5px;
}
#dashboardView .dashboard-lifetime-ranking li { break-inside: avoid; }
#dashboardView .dashboard-lifetime-ranking button { cursor: pointer; }
#dashboardView .dashboard-lifetime-ranking button:hover { background: rgba(79, 130, 198, 0.045); }
#dashboardView .dashboard-lifetime-ranking button:focus-visible { outline: 2px solid #7c9bc4; outline-offset: -2px; }
@media (max-width: 760px) {
  #dashboardView .dashboard-lifetime-ranking { columns: 1; }
}

#dashboardView .dashboard-expenses { padding: 8px 12px; }
#dashboardView .dashboard-expenses button {
  width: 100%;
  min-height: 43px;
  border: 0;
  border-bottom: 1px solid var(--dashboard-row-divider);
  background: transparent;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 122px 65px 82px;
  align-items: center;
  gap: 8px;
  color: #536986;
  font-size: var(--dashboard-body-size);
  text-align: left;
  cursor: pointer;
}
#dashboardView .dashboard-expenses button:nth-child(even) { background: var(--dashboard-row-stripe); }
#dashboardView .dashboard-expenses button:hover { background: var(--dashboard-row-hover); }
#dashboardView .dashboard-expense-card { container: dashboard-expense / inline-size; }
#dashboardView .dashboard-expense-card .dashboard-expenses button { min-height: 37px; }
@container dashboard-expense (max-width: 450px) {
  #dashboardView .dashboard-expense-card .dashboard-expenses button {
    grid-template-columns: minmax(0, 1fr) 100px 49px 65px;
    gap: 6px;
  }
}
#dashboardView .dashboard-expenses strong { color: #2f60a0; text-align: right; font-size: var(--dashboard-body-size); }
#dashboardView .dashboard-expenses em { color: var(--dashboard-support-color); font-style: normal; text-align: right; font-size: var(--dashboard-support-size); }
#dashboardView .dashboard-expenses small { color: var(--dashboard-support-color); text-align: right; font-size: var(--dashboard-support-size); }
#dashboardView .dashboard-expense-card .dashboard-expenses strong { color: #557093; font-weight: 750; }
#dashboardView .dashboard-expense-card .dashboard-expenses button:nth-child(even) { background: #f9fafb; }

#dashboardView .dashboard-down-stats {
  padding: 7px 9px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

#dashboardView .dashboard-down-stats div {
  min-width: 0;
  padding: 7px 3px;
  border-radius: 9px;
  background: #f7f9fb;
  text-align: center;
}
#dashboardView .dashboard-down-stats span { display: block; color: var(--dashboard-support-color); font-size: 12px; white-space: nowrap; }
#dashboardView .dashboard-down-stats strong { display: block; margin-top: 3px; color: #3770ba; font-size: 15px; white-space: nowrap; }

@container dashboard-down (max-width: 440px) {
  #dashboardView .dashboard-down-stats div { padding-inline: 2px; }
  #dashboardView .dashboard-down-stats strong { font-size: 14px; }
}

@container dashboard-down (max-width: 390px) {
  #dashboardView .dashboard-down-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #dashboardView .dashboard-down-stats div:nth-child(-n + 3) { grid-column: span 2; }
  #dashboardView .dashboard-down-stats div:nth-child(n + 4) { grid-column: span 3; }
}

#dashboardView .dashboard-table-wrap,
.dashboard-detail-dialog .dashboard-table-wrap { width: 100%; min-width: 0; max-width: 100%; overflow: auto; }
#dashboardView .dashboard-mini-table,
.dashboard-detail-dialog .dashboard-mini-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#dashboardView .dashboard-mini-table th,
#dashboardView .dashboard-mini-table td,
.dashboard-detail-dialog .dashboard-mini-table th,
.dashboard-detail-dialog .dashboard-mini-table td { height: 35px; padding: 6px 7px; border-bottom: 1px solid var(--dashboard-row-divider); color: #607590; font-size: 13px; text-align: center; white-space: nowrap; }
#dashboardView .dashboard-mini-table th,
.dashboard-detail-dialog .dashboard-mini-table th { background: #f8f9fb; color: #43638b; font-weight: 850; }
#dashboardView .dashboard-mini-table tbody tr:nth-child(even) td,
.dashboard-detail-dialog .dashboard-mini-table tbody tr:nth-child(even) td { background: var(--dashboard-row-stripe); }
#dashboardView .dashboard-mini-table tbody tr:hover td,
.dashboard-detail-dialog .dashboard-mini-table tbody tr:hover td { background: var(--dashboard-row-hover); }

/* 经营明细年度视图：固定展示全年月份，数据行的底色贯穿全部列。 */
#dashboardView .dashboard-year-card { container: dashboard-year / inline-size; }
#dashboardView .dashboard-year-card .dashboard-table-wrap { overflow-x: auto; }
#dashboardView .dashboard-year-card .dashboard-year-window-table {
  --dashboard-year-cell-font-size: clamp(10.5px, calc(0.85vw + 0.47px), 12.5px);
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table :is(th, td) {
  height: 32px;
  padding-block: 4px;
  padding-inline: 1px;
  font-size: var(--dashboard-year-cell-font-size) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  line-height: 1.15;
  white-space: nowrap;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table th:first-child {
  width: 9%;
  padding-left: 6px;
  text-align: left;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table th:nth-last-child(2) { width: 7%; }
#dashboardView .dashboard-year-card .dashboard-year-window-table th:last-child { width: 8%; }
#dashboardView .dashboard-year-card .dashboard-year-window-table thead th:not(:first-child) { text-align: center; }
#dashboardView .dashboard-year-card .dashboard-year-window-table tbody td { text-align: center; font-weight: 400; }
#dashboardView .dashboard-year-card .dashboard-year-window-table :is(thead, tbody) tr > :first-child {
  border-right: 1px solid #dfe5ec;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table tbody th:first-child {
  color: #43638b;
  font-weight: 750;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table tbody tr:nth-child(odd) > :is(th, td) { background-color: #fff; }
#dashboardView .dashboard-year-card .dashboard-year-window-table tbody tr:nth-child(even) > :is(th, td) { background-color: #f8f9fb; }
#dashboardView .dashboard-year-card .dashboard-year-window-table tbody tr:hover > :is(th, td) { background-color: #eff3f9; }
#dashboardView .dashboard-year-card .dashboard-year-window-table :is(thead, tbody) .is-history { color: #5e7689; }
#dashboardView .dashboard-year-card .dashboard-year-window-table tbody td.is-previous {
  color: #4b678b;
  font-weight: 400;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table:has(thead th.is-current small) tbody td.is-current { font-weight: 600; }
#dashboardView .dashboard-year-card .dashboard-year-window-table thead th.is-current { background: #edf3fa; }
#dashboardView .dashboard-year-card .dashboard-year-window-table :is(thead, tbody) tr > :nth-last-child(2) {
  border-left: 1px solid #dfe6ee;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table thead th:last-child { background: #f1f4f8; }
#dashboardView .dashboard-year-card .dashboard-year-window-table tbody td.dashboard-year-total {
  color: #43638b;
  font-weight: 600;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table .dashboard-year-mom-pill {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: var(--dashboard-year-cell-font-size);
  font-weight: 600;
  white-space: nowrap;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table .dashboard-year-mom:is(.is-up, .is-expense-down) .dashboard-year-mom-pill { background: #eaf7f1; }
#dashboardView .dashboard-year-card .dashboard-year-window-table .dashboard-year-mom:is(.is-down, .is-expense-up) .dashboard-year-mom-pill { background: #fbf0ef; }
#dashboardView .dashboard-year-card .dashboard-year-window-table thead th small {
  display: block;
  color: #798ca5;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}
#dashboardView .dashboard-year-card .dashboard-year-window-table .dashboard-year-mom.is-expense-up { color: #bd4351 !important; }
#dashboardView .dashboard-year-card .dashboard-year-window-table .dashboard-year-mom.is-expense-down { color: #17805c !important; }

@container dashboard-year (max-width: 840px) {
  #dashboardView .dashboard-year-card .dashboard-year-window-table { min-width: 900px; }
}

#dashboardView .dashboard-empty {
  min-height: 76px;
  display: grid;
  place-items: center;
  color: var(--dashboard-support-color);
  font-size: var(--dashboard-support-size);
}

.date-card.is-dashboard strong { color: #376db3; font-size: 19px; }

.dashboard-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 24px;
  background: rgba(43, 75, 116, 0.48);
  display: grid;
  place-items: center;
}
.dashboard-detail-modal.is-hidden { display: none; }
.dashboard-detail-dialog { width: min(960px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: hidden; }
.dashboard-detail-dialog > header { min-height: 48px; padding: 8px 14px; border-bottom: 1px solid #dbe3ee; background: #f5f8fc; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-detail-dialog > header > div:first-child { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.dashboard-detail-dialog h2 { margin: 0; color: #305c97; font-size: 18px; flex: 0 0 auto; }
.dashboard-detail-dialog h2::after { content: "｜"; margin-inline: 8px; color: #9aabba; font-size: 14px; font-weight: 500; }
.dashboard-detail-dialog header p { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #5b7083; font-size: 13px; }
.dashboard-detail-dialog #dashboardDetailBody { max-height: calc(100vh - 112px); padding: 10px 14px; overflow: auto; }
.dashboard-detail-dialog .dashboard-detail-trend { height: 210px; }
.dashboard-detail-dialog h3 { margin: 10px 0 6px; color: #41689b; font-size: 15px; }
.dashboard-detail-list { display: grid; gap: 4px; }
.dashboard-detail-list > div { min-height: 36px; padding: 6px 10px; border: 1px solid var(--dashboard-row-divider); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; color: #526b7f; font-size: 13px; }
.dashboard-detail-list > div:nth-child(even):not(.dashboard-detail-total) { background: var(--dashboard-row-stripe); }
.dashboard-detail-list > div:not(.dashboard-detail-total):hover { background: var(--dashboard-row-hover); }
.dashboard-detail-list strong { color: #3771bb; }
#dashboardView .dashboard-detail-trigger { height: 30px; padding: 0 12px; border: 1px solid #c6d4e7; border-radius: 8px; background: #f5f8fc; color: #356bb0; font-size: var(--dashboard-support-size); font-weight: 800; cursor: pointer; }
#dashboardView .dashboard-detail-trigger:hover { border-color: #5487ca; background: #eaf1f9; }
.dashboard-detail-dialog .dashboard-mini-table tfoot td { height: 38px; background: #edf3fa; color: #3066ac; font-size: 13px; font-weight: 850; border-top: 2px solid #c0d0e5; }
.dashboard-detail-dialog .dashboard-mini-table tfoot td:first-child { text-align: left; }
.dashboard-detail-dialog .dashboard-mini-table tfoot td:not(:first-child) { text-align: right; }
.dashboard-detail-dialog .dashboard-mini-table:not(.dashboard-down-detail-table) { min-width: 0; max-width: 100%; }
.dashboard-detail-dialog .dashboard-mini-table:not(.dashboard-down-detail-table) :is(th, td) {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-detail-dialog .dashboard-lifetime-detail-table col:nth-child(1) { width: 112px; }
.dashboard-detail-dialog .dashboard-lifetime-detail-table col:nth-child(2) { width: 150px; }
.dashboard-detail-dialog .dashboard-lifetime-detail-table :is(th, td):nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dashboard-detail-dialog .dashboard-detail-four-col :is(th, td):first-child,
.dashboard-detail-dialog .dashboard-detail-five-col :is(th, td):first-child { width: 104px; }
.dashboard-detail-dialog .dashboard-detail-four-col :is(th, td):nth-child(2) { width: 126px; }
.dashboard-detail-dialog .dashboard-detail-four-col :is(th, td):last-child { width: 110px; text-align: right; }
.dashboard-detail-dialog .dashboard-detail-five-col :is(th, td):nth-child(n + 3) { width: 108px; text-align: right; }
.dashboard-detail-dialog .dashboard-reward-detail-wrap { overflow-x: hidden; }
.dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(1) { width: 112px; }
.dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(2) { width: 252px; }
.dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(3) { width: 118px; }
.dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(4) { width: 136px; }
.dashboard-detail-dialog .dashboard-reward-detail-table :is(thead, tbody) :is(th, td):nth-child(3),
.dashboard-detail-dialog .dashboard-reward-detail-table :is(thead, tbody) :is(th, td):nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dashboard-detail-dialog .dashboard-reward-detail-table :is(thead, tbody, tfoot) :is(th, td):last-child {
  padding-left: 24px;
  text-align: left;
}
.dashboard-detail-dialog .dashboard-down-detail-table { min-width: 840px; }
.dashboard-detail-dialog .dashboard-down-detail-table thead th:nth-child(3),
.dashboard-detail-dialog .dashboard-down-detail-table tbody td:nth-child(3) { width: 34%; }
.dashboard-detail-dialog .dashboard-down-detail-table :is(th, td):first-child { width: 11%; }
.dashboard-detail-dialog .dashboard-down-detail-table :is(th, td):nth-child(2) { width: 11%; }
.dashboard-detail-dialog .dashboard-down-detail-table :is(th, td):nth-child(n + 4) { width: 11%; text-align: right; }
.dashboard-detail-dialog .dashboard-mini-table tbody td.dashboard-detail-full-text,
.dashboard-detail-dialog .dashboard-reward-detail-table tfoot td:last-child {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  text-align: left;
}
.dashboard-detail-list > .dashboard-detail-total { background: #edf3fa; border-color: #c0d0e5; color: #3066ac; font-weight: 850; }
.dashboard-detail-list > .dashboard-detail-total strong { font-size: 14px; }

@media (max-width: 850px) {
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(1) { width: 100px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(2) { width: 190px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(3) { width: 104px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(4) { width: 112px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table :is(thead, tbody, tfoot) :is(th, td):last-child { padding-left: 16px; }
}

@media (max-width: 700px) {
  .dashboard-detail-dialog .dashboard-detail-four-col :is(th, td):first-child,
  .dashboard-detail-dialog .dashboard-detail-five-col :is(th, td):first-child { width: 90px; }
  .dashboard-detail-dialog .dashboard-detail-four-col :is(th, td):nth-child(2) { width: 100px; }
  .dashboard-detail-dialog .dashboard-detail-four-col :is(th, td):last-child,
  .dashboard-detail-dialog .dashboard-detail-five-col :is(th, td):nth-child(n + 3) { width: 92px; }
  .dashboard-detail-dialog .dashboard-mini-table.dashboard-detail-five-col { min-width: 580px; max-width: none; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(1) { width: 94px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(2) { width: 124px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(3),
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(4) { width: 88px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table :is(thead, tbody, tfoot) :is(th, td):last-child { padding-left: 12px; }
}

@media (max-width: 560px) {
  .dashboard-detail-dialog { width: calc(100vw - 20px); }
  .dashboard-detail-dialog .dashboard-reward-detail-table :is(th, td) { padding-inline: 4px; font-size: 12px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(1) { width: 89px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(2) { width: 100px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(3),
  .dashboard-detail-dialog .dashboard-reward-detail-table col:nth-child(4) { width: 76px; }
  .dashboard-detail-dialog .dashboard-reward-detail-table :is(thead, tbody, tfoot) :is(th, td):last-child { padding-left: 8px; }
}

@media (max-width: 1450px) {
  #dashboardView #dashboardAlerts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  #dashboardView .dashboard-toolbar { align-items: flex-start; flex-direction: column; }
  #dashboardView .dashboard-overview-grid,
  #dashboardView .dashboard-analysis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app-shell:has(#dashboardView.active) { grid-template-columns: minmax(0, 1fr); }
  .app-shell:has(#dashboardView.active) .sidebar {
    position: static;
    height: auto;
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .app-shell:has(#dashboardView.active) .brand { margin: 0; }
  .app-shell:has(#dashboardView.active) .brand > div:last-child { display: none; }
  .app-shell:has(#dashboardView.active) .brand-mark { width: 32px; height: 32px; font-size: 16px; }
  .app-shell:has(#dashboardView.active) .nav-list { display: flex; min-width: 0; overflow-x: auto; gap: 4px; }
  .app-shell:has(#dashboardView.active) .nav-item {
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
  }
  .app-shell:has(#dashboardView.active) .nav-item > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .app-shell:has(#dashboardView.active) .sidebar-footer { display: none; }
  .app-shell:has(#dashboardView.active) .workspace { min-width: 0; padding: 8px; }
  #dashboardView .dashboard-shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  #dashboardView .dashboard-ranking-footer-advance-values { flex-wrap: wrap; gap: 2px 4px; }
  #dashboardView .dashboard-ranking-footer-advance-values .dashboard-ranking-footer-original { flex-basis: 100%; }
  #dashboardView .dashboard-ranking-footer-advance-values .dashboard-ranking-footer-separator { display: none; }
}
.batch-input-has-errors {
  border-color: #d48383 !important;
  box-shadow: 0 0 0 2px rgba(190, 68, 68, 0.08);
}

#batchText.batch-category-mismatch,
#batchType.batch-category-mismatch {
  border-color: #d58c80 !important;
  box-shadow: 0 0 0 2px rgba(190, 68, 68, 0.065);
}

#batchText.batch-category-uncertain,
#batchType.batch-category-uncertain {
  border-color: #d7b568 !important;
  box-shadow: 0 0 0 2px rgba(211, 150, 40, 0.06);
}

.batch-category-notice:not([hidden]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  margin-top: 5px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(190, 68, 68, 0.075);
  color: #934b42;
  font-size: 11px;
  line-height: 1.35;
}

.batch-category-notice.is-uncertain { background: rgba(211, 150, 40, 0.10); color: #865e19; }
.batch-category-notice.is-info { background: rgba(68, 119, 187, 0.075); color: #486a97; }
.batch-category-notice.is-error { background: rgba(190, 68, 68, 0.075); color: #934b42; }
.batch-category-notice button,
.batch-category-inline-switch {
  width: fit-content;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  cursor: pointer;
}

.batch-input-error-list:not([hidden]) {
  display: grid;
  gap: 3px;
  margin-top: 6px;
  color: #a53d3d;
  font-size: 12px;
  line-height: 1.4;
}

.batch-input-error-list[hidden] {
  display: none;
}

.batch-input-error-summary {
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.batch-input-error-more summary {
  width: fit-content;
  cursor: pointer;
  color: #8f3131;
  font-weight: 650;
}

.batch-input-error-more[open] {
  display: grid;
  gap: 3px;
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
}

.smart-batch-preview:not([hidden]) {
  display: grid;
  gap: 4px;
  max-height: 230px;
  overflow-y: auto;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.35;
}

.smart-batch-preview[hidden] { display: none; }

#batchText-smart-preview { max-height: min(310px, 45vh); }

.smart-batch-preview-group {
  min-width: 0;
  border: 1px solid rgba(68, 119, 187, 0.11);
  border-radius: 6px;
  overflow: hidden;
}

.smart-batch-preview-group > summary {
  padding: 5px 7px;
  background: rgba(68, 119, 187, 0.075);
  color: #446693;
  font-weight: 700;
  cursor: pointer;
}

.smart-batch-preview-group > .smart-batch-preview-row {
  margin: 2px 4px;
}

.smart-batch-preview-group > .smart-batch-preview-row:last-child { margin-bottom: 4px; }

.smart-batch-row-category { width: min(100%, 210px); font-size: 11px; }
.smart-batch-row-category[hidden] { display: none; }
.smart-batch-preview-reason { color: #9c3c3c; }
.smart-batch-preview-warning { color: #865e19; }

.smart-batch-preview-row {
  display: grid;
  gap: 1px;
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(68, 119, 187, 0.055);
  color: #516e94;
}

.smart-batch-preview-row.is-medium {
  background: rgba(211, 150, 40, 0.1);
  color: #865e19;
}

.smart-batch-preview-row.is-error {
  background: rgba(190, 68, 68, 0.075);
  color: #9c3c3c;
}

.smart-batch-preview-title,
.smart-batch-preview-detail {
  overflow-wrap: anywhere;
}

.smart-batch-preview-detail { font-weight: 650; }
.smart-batch-preview-confirm { display: inline-flex; align-items: center; gap: 4px; width: fit-content; }

@media (max-width: 900px) {
  .management-summary-shell > .employee-ledger-side {
    position: static;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 0;
  }
}

/* 员工结算单：本月结算五项保持单行，长期累计放在标题右侧。 */
.employee-lifetime-income { display: none; }
.monthly-detail-modal.is-employee-ledger-detail .employee-lifetime-income {
  display: inline-flex;
  align-items: baseline;
  flex: 0 0 auto;
  gap: 2px;
  margin-left: auto;
  color: #526b80;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
.monthly-detail-modal.is-employee-ledger-detail .employee-lifetime-income strong {
  color: #306dbe;
  font-size: 14px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.monthly-detail-modal.is-employee-ledger-detail .employee-detail-summary-section .employee-detail-panel {
  padding: 3px 5px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-overview-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card {
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-rows: none;
  align-items: center;
  align-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 8px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card > span,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card-value,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card .employee-detail-amount {
  font-size: 14px;
  line-height: 18px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card-value {
  align-items: center;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card .employee-detail-input-wrap {
  height: 18px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card.is-editable .employee-detail-input-wrap input,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card.is-editable .employee-detail-input-wrap span {
  color: #354a67;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card.is-final .employee-detail-amount,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card.is-final .employee-detail-amount.is-final-positive-value,
.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-card.is-final .employee-detail-amount.is-final-negative-value {
  color: #354a67;
  font-weight: 600;
}

@media (max-width: 820px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog,
  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-body {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head,
  .monthly-detail-modal.is-employee-ledger-detail .monthly-detail-dialog-head > div,
  .monthly-detail-modal.is-employee-ledger-detail #monthlyDetailTitle {
    min-width: 0;
    flex-wrap: wrap;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-section,
  .monthly-detail-modal.is-employee-ledger-detail .employee-detail-actions {
    min-width: 0;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-points-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-grid,
  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 员工结算单：U业绩状态和操作、最终结算和保存各归为一行。 */
.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-title {
  color: #0b5a45;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-summary {
  flex-wrap: nowrap;
  gap: 3px;
  white-space: nowrap;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-summary span + span::before {
  content: "·";
  margin-right: 3px;
  color: #a0abba;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel > p,
.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-empty,
.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-history:has(> .employee-performance-transfer-empty) {
  display: none;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-footer .employee-settlement-overview-grid {
  min-width: 0;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-footer:not(:has(.employee-detail-actions)) {
  grid-template-columns: minmax(0, 1fr);
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-footer .employee-detail-actions {
  min-width: 0;
  min-height: 0;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-settlement-footer .employee-detail-save-button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 36px;
  font-size: 14px;
}

@media (min-width: 1200px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel {
    grid-template-columns: max-content max-content minmax(0, 1fr);
    align-items: center;
    gap: 4px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel::before {
    content: none;
    display: none;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-summary {
    font-size: 11px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 3px;
    white-space: nowrap;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label:first-child {
    flex: 1 1 112px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label:nth-child(2) {
    flex: 0 0 100px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form select,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount {
    flex: 1;
    min-width: 0;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form select {
    padding-inline: 4px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount {
    grid-template-columns: minmax(0, 1fr) 18px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount input {
    min-width: 0;
    padding-inline: 3px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form > button {
    flex: 0 0 auto;
    padding-inline: 7px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-history {
    grid-column: 1 / -1;
  }

}

@media (max-width: 1199px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form {
    min-width: 0;
  }
}

@media (min-width: 760px) and (max-width: 1199px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel {
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 5px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    white-space: nowrap;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label:first-child {
    flex: 1 1 auto;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label:nth-child(2) {
    flex: 0 0 130px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form select,
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount {
    flex: 1;
    min-width: 0;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount input {
    min-width: 0;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form > button {
    flex: 0 0 auto;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-history {
    grid-column: 1 / -1;
  }
}

@media (max-width: 920px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-footer .employee-detail-actions {
    justify-content: flex-end;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-settlement-footer .employee-detail-save-button {
    width: 100px;
    height: 32px;
    min-height: 32px;
  }
}

/* 员工结算单：U业绩调整固定为紧凑的状态行和操作行。 */
.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 3px 7px;
  padding: 4px 5px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-panel::before {
  content: none;
  display: none;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-title {
  grid-column: 1;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-summary {
  grid-column: 2;
  width: max-content;
  max-width: 100%;
  font-size: 11px;
  line-height: 18px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  gap: 5px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 4px;
  white-space: nowrap;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label:first-child {
  flex: 1 1 170px;
  min-width: 130px;
  max-width: 230px;
  margin-left: 0;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form label:nth-child(2) {
  flex: 1 1 200px;
  min-width: 150px;
  max-width: 350px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form select,
.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount {
  flex: 1;
  min-width: 0;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form select {
  overflow: hidden;
  padding-inline: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount {
  grid-template-columns: minmax(0, 1fr) 21px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount input {
  min-width: 0;
  padding-inline: 5px;
  font-size: 12px;
  text-align: right;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form select,
.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form input,
.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-amount b,
.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form > button {
  box-sizing: border-box;
  height: 28px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form > button {
  flex: 0 0 82px;
  width: 82px;
  padding-inline: 7px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-history {
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-form {
    flex-wrap: wrap;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-title {
    font-size: 12px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-summary {
    gap: 1px;
    font-size: 10px;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-performance-transfer-summary span + span::before {
    margin-right: 1px;
  }
}

/* 员工U下分：同一明细的金额、状态、待转出、人民币及操作各占固定网格列。 */
.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row:not(.employee-usdt-down-flow-edit-row):not(.is-placeholder) {
  grid-template-columns: 44px minmax(0, 1fr) clamp(78px, 6vw, 88px) clamp(62px, 6.8vw, 90px) clamp(72px, 6vw, 85px) clamp(74px, 5.8vw, 80px) 78px;
  column-gap: 4px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row:not(.employee-usdt-down-flow-edit-row):not(.is-placeholder) > b {
  overflow: hidden;
  text-overflow: ellipsis;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row:not(.employee-usdt-down-flow-edit-row):not(.is-placeholder) > strong {
  display: contents;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row > strong > span {
  grid-column: 3;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row > strong > .monthly-note-status {
  grid-column: 4;
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row > strong > .wallet-transfer-status {
  grid-column: 5;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row:not(.employee-usdt-down-flow-edit-row):not(.is-placeholder) > em {
  grid-column: 6;
  min-width: 0;
  text-align: right;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row:not(.employee-usdt-down-flow-edit-row):not(.is-placeholder) > .monthly-usdt-down-row-actions {
  grid-column: 7;
  width: 100%;
  min-width: 0;
}

@media (max-width: 1000px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-list {
    overflow-x: auto;
  }

  .monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row {
    min-width: 560px;
  }
}

/* 员工结算明细：事项列不随文字长度自动缩字，超长内容使用省略号及原有悬停原文。 */
.monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-unified-flow-row > b,
.monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-usdt-down-flow-row:not(.employee-usdt-down-flow-edit-row):not(.is-placeholder) > b {
  min-width: 0;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 400;
  line-height: 18px;
  text-overflow: ellipsis !important;
  white-space: nowrap;
}

/* 历史只读与可操作行使用同一操作列文字规格。 */
.monthly-detail-modal.is-employee-ledger-detail .employee-usdt-down-flow-row .employee-usdt-down-readonly-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

/* 标题里的通用 span 规则不应放大“不计入排序”这一同级操作。 */
.monthly-detail-modal.is-employee-ledger-detail .employee-title-sort-toggle {
  font-weight: 700;
  line-height: normal;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-title-sort-toggle > span {
  font-size: 13px;
  font-weight: inherit;
  line-height: inherit;
}

/* 员工结算单普通数据行共用一组紧凑尺寸；合计与输入操作行保留自身高度。 */
.monthly-detail-modal.is-employee-ledger-detail {
  --settlement-row-height: 23px;
  --settlement-row-padding-y: 0px;
  --settlement-row-font-size: 14px;
  --settlement-row-line-height: 18px;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block:not(.employee-flow-detail-block) > .employee-detail-line:not(:last-child):not(:has(input, button, select, textarea)),
.monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-unified-flow-row:not(.is-placeholder),
.monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-usdt-down-flow-row:not(.is-placeholder):not(.employee-usdt-down-flow-edit-row) {
  box-sizing: border-box;
  height: var(--settlement-row-height);
  min-height: var(--settlement-row-height);
  padding-block: var(--settlement-row-padding-y);
  align-items: center;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block:not(.employee-flow-detail-block) > .employee-detail-line:not(:last-child):not(:has(input, button, select, textarea)) > *,
.monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-unified-flow-row:not(.is-placeholder) > *,
.monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-usdt-down-flow-row:not(.is-placeholder):not(.employee-usdt-down-flow-edit-row) > * {
  font-size: var(--settlement-row-font-size);
  line-height: var(--settlement-row-line-height);
}

.monthly-detail-modal.is-employee-ledger-detail .employee-income-deduction-block:not(.employee-flow-detail-block) > .employee-detail-line:not(:last-child):not(:has(input, button, select, textarea)) > b {
  font-size: var(--settlement-row-font-size) !important;
  text-overflow: ellipsis !important;
}

.monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-unified-flow-amount > *,
.monthly-detail-modal.is-employee-ledger-detail .employee-flow-detail-block .employee-usdt-down-flow-row > strong > span {
  font-size: var(--settlement-row-font-size);
  line-height: var(--settlement-row-line-height);
}

/* 员工档案：柔和蓝色交互态，仅作用于本页。 */
#employeeFlowView .employee-flow-year-title:not(:disabled):hover {
  background: #698ab4;
}

#employeeFlowView .employee-flow-year-title:focus-visible,
#employeeFlowView .employee-flow-tool-panel button:focus-visible,
#employeeFlowView .employee-flow-agent-row button:focus-visible {
  outline-color: #5e88c0;
  box-shadow: 0 0 0 2px rgba(105, 138, 180, 0.16);
}

#employeeFlowView .employee-flow-table tbody tr:not(.is-agent-employee) :is(input, select, textarea):focus,
#employeeFlowView .employee-flow-agent-main input:focus {
  border-color: #5e88c0;
  outline-color: #5e88c0;
  box-shadow: 0 0 0 2px rgba(105, 138, 180, 0.14);
}

#employeeFlowView .employee-flow-tool-panel .employee-ledger-tool-button:not(:disabled):hover {
  border-color: #9cb3d2;
  color: #3664a0;
  background: #e7eef7;
}

#employeeFlowView .employee-flow-tool-panel .employee-ledger-tool-button.primary:not(:disabled):hover {
  border-color: #698ab4;
  color: #ffffff;
  background: #698ab4;
}

#employeeFlowView .employee-flow-agent-row button:not(.danger):hover {
  border-color: #9cb3d2;
  color: #3664a0;
}

/* 首页经营明细：年度对比保留统计展示，隐藏与其重复的顶部摘要。 */
#dashboardView #dashboardPeriodLabel,
#dashboardView #dashboardCoreGrid,
#dashboardView .dashboard-overview-grid {
  display: none;
}

/* 常用窗口保持左右栏；较窄窗口让操作栏先显示，明细随后显示。 */
@media (min-width: 1281px) and (max-width: 1600px) {
  :is(
    #todayOps .ops-layout,
    .employee-ledger-shell,
    .management-summary-shell,
    .monthly-report-shell,
    .employee-flow-shell,
    .wallet-reconciliation-shell
  ) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }
  :is(
    .operation-panel,
    .employee-ledger-panel,
    .management-summary-panel,
    .monthly-report-panel,
    .employee-flow-panel,
    .wallet-reconciliation-panel
  ) {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
  }
  :is(
    .ops-side,
    .employee-ledger-shell > .employee-ledger-side,
    .management-summary-shell > .employee-ledger-side,
    .monthly-report-shell > .employee-ledger-side,
    .employee-flow-shell > .employee-ledger-side,
    .wallet-reconciliation-shell > .employee-ledger-side
  ) {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    width: 100%;
    margin: 0;
    position: sticky;
    top: 14px;
  }
}

/* 桌面文件版今日运营：右侧录入栏独立纵向滚动。 */
#todayOps .ops-side {
  max-height: calc(100vh - 28px);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* 六个双栏页在窄窗口仍保留左右关系；放不下时只横向滚动内容区。 */
@media (max-width: 1280px) {
  :is(
    #todayOps,
    #employeeLedgerView,
    #managementSummaryView,
    #monthlyReportView,
    #employeeFlowView,
    #walletReconciliationView
  ).view.active {
    overflow-x: auto;
  }

  :is(
    #todayOps .ops-layout,
    .employee-ledger-shell,
    .management-summary-shell,
    .monthly-report-shell,
    .employee-flow-shell,
    .wallet-reconciliation-shell
  ) {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) var(--layout-side-width);
    gap: 10px;
    width: max(100%, calc(520px + var(--layout-side-width) + 10px));
    max-width: none;
    min-width: 0;
    align-items: start;
  }

  :is(
    .operation-panel,
    .employee-ledger-panel,
    .management-summary-panel,
    .monthly-report-panel,
    .employee-flow-panel,
    .wallet-reconciliation-panel
  ) {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow-x: auto;
  }

  :is(
    .ops-side,
    .employee-ledger-shell > .employee-ledger-side,
    .management-summary-shell > .employee-ledger-side,
    .monthly-report-shell > .employee-ledger-side,
    .employee-flow-shell > .employee-ledger-side,
    .wallet-reconciliation-shell > .employee-ledger-side
  ) {
    position: static;
    grid-column: 2;
    grid-row: 1;
    order: 0;
    justify-self: stretch;
    width: var(--layout-side-width);
    min-width: var(--layout-side-width);
    max-width: var(--layout-side-width);
    margin: 0;
  }

  #employeeLedgerView.is-frozen-month .employee-ledger-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  #employeeLedgerView.is-frozen-month .employee-ledger-shell > .employee-ledger-side {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 12px 0 0;
  }

  /* 今日运营优先保留右侧录入栏；仅左侧报表在窄窗口内部滚动。 */
  #todayOps.view.active {
    overflow-x: hidden;
  }

  #todayOps .ops-layout {
    grid-template-columns: minmax(0, 1fr) var(--layout-side-width);
    width: 100%;
    max-width: 100%;
  }
}

/* 今日运营窄窗口：录入栏覆盖右上角，不占用报表下方的整列空间。 */
@media (max-width: 1600px) {
  #todayOps .ops-layout {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: 100%;
  }

  #todayOps .operation-panel {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow-x: auto;
  }

  #todayOps .ops-side {
    position: sticky;
    top: var(--operation-overlay-top);
    z-index: 40;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: min(var(--operation-overlay-width), calc(100% - var(--operation-overlay-inset) * 2));
    min-width: 0;
    max-width: var(--operation-overlay-width);
    margin: var(--operation-overlay-inset) var(--operation-overlay-inset) 0 0;
    max-height: calc(100vh - var(--operation-overlay-top) * 2);
    overflow-y: auto;
  }
}

/* 今日报账横向控制保留在报表下方，并跟随视口下沿。 */
#todayOps .today-report-scrollbar {
  display: none;
}

@media (max-width: 1600px) {
  #todayOps.view.active {
    overflow: visible;
  }

  #todayOps .today-report-scrollbar.is-active {
    position: sticky;
    bottom: 0;
    z-index: 45;
    display: block;
    width: 100%;
    height: 17px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dce5f0;
    border-radius: 8px;
    background: #f9fbfd;
  }

  #todayOps .today-report-scrollbar-track {
    height: 1px;
  }

  #todayOps .operation-panel {
    scrollbar-width: none;
  }

  #todayOps .operation-panel::-webkit-scrollbar {
    height: 0;
  }
}

/* 左侧导航可收起；内容区使用释放出的空间，所有账务面板沿用原布局。 */
.app-shell.sidebar-collapsed {
  --layout-sidebar-width: 0px;
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.sidebar-collapsed > .sidebar {
  display: none !important;
}

.topbar-primary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-toggle {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 5px;
  border: 1px solid #bfcee1;
  border-radius: 7px;
  background: #f8fbfe;
  color: #3b6cac;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  background: #eaf1fb;
  border-color: #8ba8cf;
}

.sidebar-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

/* A single region-copy control is available in every main section. */
.screenshot-control { position: relative; flex: 0 0 auto; margin-left: 6px; }
.screenshot-toggle {
  height: 30px;
  padding: 0 9px;
  border: 1px solid #bfcee1;
  border-radius: 7px;
  background: #f8fbfe;
  color: #3b6cac;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.screenshot-toggle:hover, .screenshot-toggle:focus-visible { background: #eaf1fb; border-color: #8ba8cf; }
.screenshot-selection-overlay { position: fixed; inset: 0; z-index: 100000; overflow: hidden; background: #0c25442b; cursor: crosshair; touch-action: none; }
.screenshot-selection-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 6px; background: #fff; color: #40679b; font: 700 13px/1.3 system-ui, sans-serif; pointer-events: none; }
.screenshot-selection-box { position: absolute; border: 2px solid #417bc7; background: #d7ebfa38; box-shadow: 0 0 0 1px #fff; pointer-events: none; }

/* 每个主表的横向拖动条留在下方，页面纵向滚动时贴住可视区下沿。 */
.module-report-scrollbar {
  display: none;
}

.view.active > .module-report-scrollbar.is-active {
  position: sticky;
  bottom: 0;
  z-index: 45;
  display: block;
  justify-self: start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 17px;
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  background: #f9fbfd;
  cursor: ew-resize;
  touch-action: none;
}

.module-report-scrollbar-track {
  position: absolute;
  inset: 3px 4px;
  height: 9px;
  border-radius: 6px;
  background: #ededed;
}

.module-report-scrollbar-thumb {
  height: 100%;
  border-radius: 6px;
  background: #858585;
}

@media (max-width: 1600px) {
  :is(
    #employeeLedgerView,
    #managementSummaryView,
    #monthlyReportView,
    #employeeFlowView,
    #walletReconciliationView
  ).view.active { overflow: visible; }

  :is(
    #employeeLedgerView .employee-ledger-shell,
    #managementSummaryView .management-summary-shell,
    #monthlyReportView .monthly-report-shell,
    #employeeFlowView .employee-flow-shell,
    #walletReconciliationView .wallet-reconciliation-shell
  ),
  #employeeLedgerView.is-frozen-month .employee-ledger-shell {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: start;
  }

  :is(
    #employeeLedgerView .employee-ledger-panel,
    #managementSummaryView .management-summary-panel,
    #monthlyReportView .monthly-report-panel,
    #employeeFlowView .employee-flow-panel,
    #walletReconciliationView .wallet-reconciliation-panel
  ) {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  :is(
    #employeeLedgerView .employee-ledger-panel,
    #managementSummaryView .management-summary-panel,
    #monthlyReportView .monthly-report-panel,
    #employeeFlowView .employee-flow-panel,
    #walletReconciliationView .wallet-reconciliation-panel
  )::-webkit-scrollbar { height: 0; }

  :is(
    #employeeLedgerView .employee-ledger-shell > .employee-ledger-side,
    #managementSummaryView .management-summary-shell > .employee-ledger-side,
    #monthlyReportView .monthly-report-shell > .employee-ledger-side,
    #employeeFlowView .employee-flow-shell > .employee-ledger-side,
    #walletReconciliationView .wallet-reconciliation-shell > .employee-ledger-side
  ),
  #employeeLedgerView.is-frozen-month .employee-ledger-shell > .employee-ledger-side {
    position: sticky;
    top: var(--operation-overlay-top);
    z-index: 40;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    width: min(var(--operation-overlay-width), calc(100% - var(--operation-overlay-inset) * 2));
    min-width: 0;
    max-width: var(--operation-overlay-width);
    margin: var(--operation-overlay-inset) var(--operation-overlay-inset) 0 0;
    max-height: calc(100vh - var(--operation-overlay-top) * 2);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }

  /* 为被右栏覆盖的主表保留额外横向拖动空间。 */
  :is(
    #todayOps .operation-panel,
    #employeeLedgerView .employee-ledger-panel,
    #managementSummaryView .management-summary-panel,
    #monthlyReportView .monthly-report-panel,
    #employeeFlowView .employee-flow-panel,
    #walletReconciliationView .wallet-reconciliation-panel
  ) { position: relative; }

  :is(
    #todayOps .operation-panel,
    #employeeLedgerView .employee-ledger-panel,
    #managementSummaryView .management-summary-panel,
    #monthlyReportView .monthly-report-panel,
    #employeeFlowView .employee-flow-panel,
    #walletReconciliationView .wallet-reconciliation-panel
  )::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(100% + var(--operation-overlay-width) + 60px);
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
}