.staff-credit-toolbar {
          display: flex;
          gap: 12px;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 20px;
        }

        .staff-credit-toolbar__search {
          flex: 1;
          min-width: 220px;
          max-width: 420px;
        }

        .staff-credit-toolbar input,
        .staff-credit-settings-form input,
        .staff-credit-settings-form select,
        .staff-credit-settlement-form input,
        .staff-credit-settlement-form select,
        .staff-credit-settlement-form textarea,
        .staff-credit-create-form input {
          width: 100%;
          min-height: 44px;
          border: 1px solid #d7dee8;
          border-radius: 10px;
          padding: 10px 12px;
          font: inherit;
          background: #fff;
          box-sizing: border-box;
        }

        .staff-credit-summary-grid {
          display: grid;
          grid-template-columns:
            repeat(
              5,
              minmax(
                0,
                1fr
              )
            );
          gap: 14px;
          margin-bottom: 22px;
        }

        .staff-credit-summary-card {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 18px;
        }

        .staff-credit-summary-card span {
          display: block;
          color: #64748b;
          font-size: 12px;
          font-weight: 700;
          margin-bottom: 8px;
        }

        .staff-credit-summary-card strong {
          color: #0f172a;
          font-size: 22px;
          font-weight: 900;
        }

        .staff-credit-panel {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 18px;
          overflow: hidden;
        }

        .staff-credit-panel__header {
          display: flex;
          justify-content: space-between;
          gap: 16px;
          align-items: center;
          padding: 18px 20px;
          border-bottom: 1px solid #e2e8f0;
        }

        .staff-credit-panel__header span {
          display: block;
          color: #64748b;
          font-size: 12px;
          margin-bottom: 4px;
        }

        .staff-credit-panel__header h2 {
          margin: 0;
          color: #0f172a;
          font-size: 18px;
        }

        .staff-credit-table-wrap {
          width: 100%;
          overflow-x: auto;
        }

        .staff-credit-table {
          width: 100%;
          border-collapse: collapse;
          min-width: 850px;
        }

        .staff-credit-table th,
        .staff-credit-table td {
          padding: 14px 16px;
          border-bottom: 1px solid #edf2f7;
          text-align: left;
          vertical-align: middle;
          font-size: 13px;
        }

        .staff-credit-table th {
          color: #64748b;
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: .04em;
        }

        .staff-credit-person strong {
          display: block;
          color: #0f172a;
        }

        .staff-credit-person span {
          display: block;
          color: #64748b;
          font-size: 12px;
          margin-top: 3px;
        }

        .staff-credit-money-due {
          color: #b42318;
        }

        .staff-credit-status {
          display: inline-flex;
          align-items: center;
          border-radius: 999px;
          padding: 5px 9px;
          font-size: 11px;
          font-weight: 800;
          background: #eef2f7;
          color: #475569;
        }

        .staff-credit-status.is-active {
          background: #ecfdf3;
          color: #027a48;
        }

        .staff-credit-status.is-warning {
          background: #fff7ed;
          color: #b54708;
        }

        .staff-credit-status.is-danger,
        .staff-credit-status.is-disabled {
          background: #fff1f1;
          color: #b42318;
        }

        .staff-credit-empty {
          padding: 40px 20px;
          text-align: center;
          color: #64748b;
        }

        .staff-credit-feedback {
          min-height: 20px;
          margin-bottom: 14px;
          font-size: 13px;
          font-weight: 700;
        }

        .staff-credit-feedback[data-type="error"] {
          color: #b42318;
        }

        .staff-credit-feedback[data-type="success"] {
          color: #027a48;
        }

        .staff-credit-modal {
          position: fixed;
          inset: 0;
          z-index: 1000;
          display: grid;
          place-items: center;
          padding: 20px;
        }

        .staff-credit-modal[hidden] {
          display: none;
        }

        .staff-credit-modal__backdrop {
          position: absolute;
          inset: 0;
          background: rgba(15, 23, 42, .55);
        }

        .staff-credit-modal__dialog {
          position: relative;
          z-index: 1;
          width: min(960px, 100%);
          max-height: 90vh;
          overflow: auto;
          background: #fff;
          border-radius: 20px;
          box-shadow: 0 24px 60px rgba(15,23,42,.22);
        }

        .staff-credit-modal__dialog.is-small {
          width: min(520px, 100%);
        }

        .staff-credit-modal__header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          padding: 18px 20px;
          border-bottom: 1px solid #e2e8f0;
        }

        .staff-credit-modal__header h2 {
          margin: 0;
          font-size: 19px;
        }

        .staff-credit-modal__close {
          width: 38px;
          height: 38px;
          border: 0;
          background: #f1f5f9;
          border-radius: 10px;
          cursor: pointer;
          font-size: 22px;
        }

        .staff-credit-modal__body {
          padding: 20px;
        }

        .staff-credit-create-form,
        .staff-credit-settings-form,
        .staff-credit-settlement-form {
          display: grid;
          gap: 14px;
        }

        .staff-credit-create-form label span,
        .staff-credit-settings-form label > span,
        .staff-credit-settlement-form label span {
          display: block;
          font-size: 12px;
          font-weight: 700;
          margin-bottom: 6px;
          color: #475569;
        }

        .staff-credit-detail-header {
          display: flex;
          justify-content: space-between;
          gap: 18px;
          align-items: flex-start;
          margin-bottom: 20px;
        }

        .staff-credit-detail-header span:first-child {
          color: #64748b;
          font-size: 12px;
        }

        .staff-credit-detail-header h2 {
          margin: 5px 0;
          font-size: 24px;
        }

        .staff-credit-detail-header p {
          margin: 0;
          color: #64748b;
        }

        .staff-credit-detail-grid {
          display: grid;
          grid-template-columns:
            repeat(
              4,
              minmax(
                0,
                1fr
              )
            );
          gap: 12px;
          margin-bottom: 24px;
        }

        .staff-credit-detail-grid article {
          padding: 15px;
          border-radius: 14px;
          background: #f8fafc;
          border: 1px solid #e2e8f0;
        }

        .staff-credit-detail-grid span {
          display: block;
          color: #64748b;
          font-size: 11px;
          margin-bottom: 6px;
        }

        .staff-credit-detail-grid strong {
          font-size: 17px;
          color: #0f172a;
        }

        .staff-credit-detail-section {
          margin-top: 24px;
          padding-top: 20px;
          border-top: 1px solid #e2e8f0;
        }

        .staff-credit-detail-section header span {
          color: #64748b;
          font-size: 11px;
        }

        .staff-credit-detail-section header h3 {
          margin: 4px 0 16px;
        }

        .staff-credit-settings-form,
        .staff-credit-settlement-form {
          grid-template-columns:
            repeat(
              2,
              minmax(
                0,
                1fr
              )
            );
        }

        .staff-credit-checkbox {
          display: flex;
          align-items: center;
          gap: 10px;
        }

        .staff-credit-checkbox input {
          width: auto;
          min-height: auto;
        }

        .staff-credit-loading,
        .staff-credit-error {
          padding: 36px 10px;
          text-align: center;
          color: #64748b;
        }

        .staff-credit-error {
          color: #b42318;
        }

        @media (
          max-width: 1000px
        ) {

          .staff-credit-summary-grid {
            grid-template-columns:
              repeat(
                2,
                minmax(
                  0,
                  1fr
                )
              );
          }

          .staff-credit-detail-grid {
            grid-template-columns:
              repeat(
                2,
                minmax(
                  0,
                  1fr
                )
              );
          }

        }

        @media (
          max-width: 640px
        ) {

          .staff-credit-summary-grid,
          .staff-credit-detail-grid,
          .staff-credit-settings-form,
          .staff-credit-settlement-form {
            grid-template-columns:
              1fr;
          }

          .staff-credit-toolbar {
            align-items: stretch;
          }

          .staff-credit-toolbar__search {
            max-width: none;
          }

        }

  


        .staff-credit-staff-results {
  display: grid;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
}

.staff-credit-staff-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.staff-credit-staff-option:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.staff-credit-staff-option.is-disabled {
  opacity: .55;
  cursor: not-allowed;
}

.staff-credit-staff-option strong,
.staff-credit-staff-option span,
.staff-credit-staff-option small {
  display: block;
}

.staff-credit-staff-option strong {
  color: #0f172a;
  margin-bottom: 3px;
}

.staff-credit-staff-option span {
  color: #64748b;
  font-size: 12px;
}

.staff-credit-staff-option__meta {
  text-align: right;
  flex-shrink: 0;
}

.staff-credit-staff-option__meta small {
  margin-top: 5px;
  color: #64748b;
}

.staff-credit-staff-search-empty {
  padding: 18px 12px;
  text-align: center;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  font-size: 13px;
}

.staff-credit-staff-search-empty.is-error {
  color: #b42318;
}

.staff-credit-selected-staff {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #dbe4ee;
}

.staff-credit-selected-staff span,
.staff-credit-selected-staff strong,
.staff-credit-selected-staff small {
  display: block;
}

.staff-credit-selected-staff span {
  color: #64748b;
  font-size: 11px;
}

.staff-credit-selected-staff strong {
  margin: 3px 0;
  color: #0f172a;
}

.staff-credit-selected-staff small {
  color: #64748b;
}