.employee-page {
  height: 100%;
  overflow: hidden;
  color: #253942;
  background: #f3f7fb;
}

.employee-page .site-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  background:
    linear-gradient(180deg, rgba(5, 15, 34, 0.98), rgba(10, 28, 58, 0.96));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.employee-page .header-brand {
  color: #ffffff;
}

.employee-page .header-actions {
  min-width: 0;
}

.employee-main {
  position: fixed;
  inset: 76px 0 0;
  display: flex;
  width: 100%;
  overflow: hidden;
  background: #f3f7fb;
}

.employee-sidebar {
  display: flex;
  flex: 0 0 292px;
  flex-direction: column;
  width: 292px;
  padding: 24px 18px;
  overflow-y: auto;
  background: #ffffff;
  border-right: 1px solid #e1e8ee;
}

.employee-function-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.employee-function-list li {
  min-width: 0;
}

.employee-function-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 15px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  color: #425761;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.employee-function-item:hover,
.employee-function-item:focus-visible,
.employee-function-item.is-active {
  color: #005e9f;
  background: #eef6fd;
  border-color: #d8eaf8;
  outline: 0;
}

.employee-function-item > svg:first-child {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.employee-function-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-chevron {
  width: 15px;
  height: 15px;
  stroke: #98a6ad;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.employee-group-toggle .employee-chevron {
  transition: transform 160ms ease;
}

.employee-group-toggle[aria-expanded="true"] .employee-chevron {
  transform: rotate(90deg);
}

.employee-submenu {
  display: grid;
  gap: 2px;
  margin: 4px 0 8px 17px;
  padding: 2px 0 2px 12px;
  list-style: none;
  border-left: 1px solid #e4eaee;
}

.employee-submenu[hidden] {
  display: none;
}

.employee-subitem {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  color: #596b73;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 8px;
  transition:
    color 150ms ease,
    background-color 150ms ease;
}

.employee-subitem:hover,
.employee-subitem:focus-visible,
.employee-subitem.is-active {
  color: #005e9f;
  background: #eef6fd;
  outline: 0;
}

.employee-subitem span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employee-canvas {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #ffffff;
}

.workspace-search-empty {
  margin: 12px 2px 0;
  padding: 10px 12px;
  color: #7d8c93;
  font-size: 12px;
  line-height: 1.5;
  background: #f7f9fa;
  border: 1px solid #e8edef;
  border-radius: 9px;
}

.workspace-content-path {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 18px 30px;
  background: #ffffff;
  border-bottom: 1px solid #e7ecef;
}

.workspace-content-path[hidden] {
  display: none;
}

.workspace-back-button {
  display: none;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #47606a;
  cursor: pointer;
  background: #f3f7f9;
  border: 1px solid #e0e7ea;
  border-radius: 9px;
  place-items: center;
}

.workspace-back-button:hover {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: #c8e2f2;
}

.workspace-back-button svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: #8b999f;
  font-size: 13px;
  line-height: 1.5;
}

.workspace-breadcrumb span {
  overflow-wrap: anywhere;
}

.workspace-breadcrumb span:last-child {
  color: #263b44;
  font-weight: 650;
}

.workspace-breadcrumb svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  stroke: #b0bbc0;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workspace-content-body {
  flex: 1 1 auto;
  overflow: auto;
  background: #ffffff;
}

.workspace-content-body.is-inquiry {
  padding: 24px;
  background: #f0f2f5;
}

.inquiry-page {
  min-height: 100%;
}

.inquiry-page[hidden] {
  display: none;
}

.inquiry-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(24, 42, 58, 0.06);
}

.inquiry-card h2 {
  margin: 0 0 20px;
  color: #222222;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

.inquiry-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: center;
  margin-bottom: 20px;
}

.inquiry-filter-field {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #333333;
  font-size: 13px;
}

.inquiry-filter-field > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.inquiry-status-field select {
  width: 180px;
}

.inquiry-status-field {
  gap: 4px;
}

.inquiry-filter select,
.inquiry-pagination select {
  height: 36px;
  color: #555555;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
}

.inquiry-status-field select {
  padding: 0 10px;
}

.inquiry-filter select:focus,
.inquiry-pagination select:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}

.inquiry-date-filter {
  flex: 0 1 auto;
}

.inquiry-date-range {
  position: relative;
  display: flex;
  align-items: center;
  width: 360px;
  max-width: 100%;
  height: 36px;
  padding: 0 8px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.inquiry-picker-slot {
  flex: 1 1 0;
  min-width: 0;
}

.inquiry-picker-slot .date-picker {
  position: static;
  width: 100%;
}

.inquiry-picker-slot .date-picker-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.inquiry-picker-slot .date-picker-trigger {
  display: flex;
  gap: 7px;
  align-items: center;
  height: 34px;
  padding: 0 4px;
  color: #606b71;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 3px;
  outline: 0;
  box-shadow: none;
}

.inquiry-picker-slot .date-picker-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-picker-slot .date-picker-value.is-placeholder {
  color: #9aa7ac;
}

.inquiry-picker-slot .date-picker-trigger:hover,
.inquiry-picker-slot .date-picker-trigger[aria-expanded="true"] {
  background: #f5f9fc;
  border: 0;
  box-shadow: none;
}

.inquiry-picker-slot .date-picker-trigger > svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  stroke: #849198;
}

.inquiry-picker-slot .date-picker-panel {
  position: absolute;
  z-index: 180;
  top: calc(100% + 7px);
  width: min(100%, 344px);
  right: auto;
  left: 0;
  padding: 15px;
  background: #ffffff;
  border: 1px solid #e0e6e9;
  border-radius: 18px;
  box-shadow: none;
}

.inquiry-picker-slot .date-picker-header {
  display: grid;
  grid-template-columns: 34px minmax(82px, 1fr) minmax(78px, 1fr) 34px;
  gap: 7px;
  align-items: center;
  margin-bottom: 13px;
}

.inquiry-picker-slot .date-picker-arrow,
.inquiry-picker-slot .date-picker-month,
.inquiry-picker-slot .date-picker-year {
  height: 34px;
  color: #435860;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  background: #f7f9fa;
  border: 1px solid #e7ecee;
  border-radius: 9px;
}

.inquiry-picker-slot .date-picker-arrow {
  padding: 0;
  color: var(--blue);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.inquiry-picker-slot .date-picker-arrow:hover {
  background: var(--blue-soft);
  border-color: #c6e2f4;
}

.inquiry-picker-slot .date-picker-month,
.inquiry-picker-slot .date-picker-year {
  padding: 0 9px;
  cursor: pointer;
}

.inquiry-picker-slot .date-picker-weekdays,
.inquiry-picker-slot .date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.inquiry-picker-slot .date-picker-weekdays {
  margin-bottom: 6px;
}

.inquiry-picker-slot .date-picker-weekdays span {
  color: #a3adb1;
  font-size: 10px;
  font-weight: 550;
  text-align: center;
}

.inquiry-picker-slot .date-picker-day {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #26363d;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  place-items: center;
}

.inquiry-picker-slot .date-picker-day:hover {
  color: var(--blue);
  background: var(--blue-soft);
}

.inquiry-picker-slot .date-picker-day.is-outside {
  color: #c7ced2;
}

.inquiry-picker-slot .date-picker-day.is-selected {
  color: #ffffff;
  background: var(--blue);
}

.inquiry-date-separator {
  flex: 0 0 auto;
  padding: 0 5px;
  color: #a7afb4;
  font-size: 12px;
}

.inquiry-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.inquiry-primary-button,
.inquiry-secondary-button {
  height: 36px;
  padding: 0 18px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 4px;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.inquiry-primary-button {
  color: #ffffff;
  background: #409eff;
  border: 1px solid #409eff;
}

.inquiry-primary-button:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.inquiry-secondary-button {
  color: #606266;
  background: #ffffff;
  border: 1px solid #dcdfe6;
}

.inquiry-secondary-button:hover {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

.inquiry-primary-button:focus-visible,
.inquiry-secondary-button:focus-visible,
.inquiry-pagination button:focus-visible {
  outline: 2px solid rgba(64, 158, 255, 0.45);
  outline-offset: 2px;
}

.inquiry-table-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.inquiry-table-scroll {
  overflow-x: auto;
}

.inquiry-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #333333;
  font-size: 13px;
}

.inquiry-table th,
.inquiry-table td {
  padding: 0 14px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.inquiry-table th {
  height: 48px;
  color: #555555;
  font-weight: 600;
  background: #fafafa;
}

.inquiry-table tbody td {
  height: 52px;
  color: #333333;
  background: #ffffff;
}

.inquiry-table tbody tr:hover td {
  background: #f7fbff;
}

.inquiry-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
}

.inquiry-status.is-pending {
  color: #b26a00;
  background: #fff7e8;
}

.inquiry-status.is-processing {
  color: #1769aa;
  background: #eaf4ff;
}

.inquiry-status.is-completed {
  color: #27734d;
  background: #edf8f2;
}

.inquiry-table th:nth-child(1),
.inquiry-table th:nth-child(2) {
  width: 13%;
}

.inquiry-table th:nth-child(3) {
  width: 12%;
}

.inquiry-table th:nth-child(4) {
  width: 18%;
}

.inquiry-table th:nth-child(5),
.inquiry-table th:nth-child(6) {
  width: 14%;
}

.inquiry-table th:nth-child(7) {
  width: 16%;
}

.inquiry-operation-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.inquiry-table-tools {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  color: #8d969b;
}

.inquiry-table-tools svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inquiry-empty-state {
  display: grid;
  flex: 1 1 auto;
  min-height: 360px;
  place-items: center;
  align-content: center;
}

.inquiry-empty-state[hidden] {
  display: none;
}

.inquiry-empty-illustration {
  width: 220px;
  height: 150px;
}

.inquiry-empty-state p {
  margin: 10px 0 0;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.inquiry-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 18px;
  color: #666666;
  font-size: 12px;
}

.inquiry-pagination strong {
  font-weight: 500;
}

.inquiry-pagination input {
  width: 42px;
  height: 30px;
  padding: 0 6px;
  color: #555555;
  font: inherit;
  text-align: center;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
}

.inquiry-pagination button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #606266;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  place-items: center;
}

.inquiry-pagination button:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background: #f5f7fa;
  border-color: #e4e7ed;
}

.inquiry-pagination button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inquiry-pagination select {
  width: 96px;
  padding: 0 8px;
}

.workspace-content-body.is-credential-info,
.workspace-content-body.is-resignation,
.workspace-content-body.is-employment-certificate,
.workspace-content-body.is-income-certificate {
  padding: 24px;
  background: #f0f2f5;
}

.credential-info-page {
  min-height: 100%;
}

.credential-info-page[hidden] {
  display: none;
}

.credential-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(24, 42, 58, 0.06);
}

.credential-card h2 {
  position: relative;
  margin: 0 0 20px;
  padding-left: 11px;
  color: #222222;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.credential-card h2::before {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 3px;
  background: #409eff;
  border-radius: 999px;
  content: "";
}

.credential-directory-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: center;
  margin-bottom: 20px;
}

.credential-directory-field {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #333333;
  font-size: 13px;
}

.credential-directory-field > span {
  flex: 0 0 auto;
  white-space: nowrap;
}

.credential-directory-field input {
  width: 180px;
  height: 36px;
  padding: 0 11px;
  color: #333333;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
}

.credential-directory-field input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}

.credential-directory-field input::placeholder {
  color: #a3a9b0;
}

.credential-directory-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.credential-panels {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.credential-panel {
  min-width: 0;
  overflow: visible;
  background: #ffffff;
  border: 1px solid #e3eaf0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(22, 45, 68, 0.04);
}

.credential-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 16px;
  background: #ffffff;
  border-bottom: 1px solid #edf1f5;
  border-radius: 5px 5px 0 0;
}

.credential-panel-header h3 {
  position: relative;
  margin: 0;
  padding-left: 12px;
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.credential-panel-header h3::before {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  background: #409eff;
  border-radius: 999px;
  content: "";
}

.credential-panel-toggle {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 30px;
  padding: 0 7px;
  color: #606266;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.credential-panel-toggle:hover {
  color: #337ecc;
  background: #ecf5ff;
}

.credential-panel-toggle svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.credential-panel-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.credential-panel-body {
  min-width: 0;
  padding: 18px;
}

.credential-panel-body[hidden] {
  display: none;
}

.credential-applicant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding: 4px 14px;
  background: #fafcff;
  border: 1px solid #edf1f5;
  border-radius: 5px;
}

.credential-applicant-grid > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px dashed #edf1f5;
}

.credential-applicant-grid > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.credential-applicant-grid dt,
.credential-applicant-grid dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.credential-applicant-grid dt {
  color: #7b8794;
}

.credential-applicant-grid dd {
  color: #303133;
  font-weight: 600;
}

.credential-reminder {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  color: #7c5300;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
}

.credential-reminder[hidden] {
  display: none;
}

.credential-reminder-icon {
  display: grid;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  background: #f5b400;
  border-radius: 50%;
  place-items: center;
}

.credential-reminder-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.credential-reminder.is-expanded .credential-reminder-text {
  display: block;
  overflow: visible;
}

.credential-reminder-actions {
  display: flex;
  gap: 2px;
  align-items: center;
}

.credential-reminder-actions button {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 6px;
  color: #7c5300;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.credential-reminder-actions button:hover {
  background: rgba(245, 180, 0, 0.12);
}

.credential-reminder-actions svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#credential-reminder-toggle svg {
  transition: transform 160ms ease;
}

#credential-reminder-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.credential-new-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 14px 0;
}

.credential-primary-button,
.credential-submit-button {
  min-height: 38px;
  padding: 0 18px;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #409eff;
  border: 1px solid #409eff;
  border-radius: 4px;
}

.credential-primary-button:hover,
.credential-submit-button:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.credential-primary-button.is-selected {
  background: #337ecc;
  border-color: #337ecc;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.16);
}

.credential-new-status {
  margin: -4px 0 12px;
  color: #337ecc;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.credential-new-status[hidden] {
  display: none;
}

.credential-table-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.credential-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-color: #a9ccf0 #f2f6fa;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.credential-table-scroll:focus-visible {
  outline: 2px solid rgba(64, 158, 255, 0.42);
  outline-offset: -2px;
}

.credential-table-scroll::-webkit-scrollbar {
  display: block;
  height: 10px;
}

.credential-table-scroll::-webkit-scrollbar-track {
  background: #f2f6fa;
  border-radius: 999px;
}

.credential-table-scroll::-webkit-scrollbar-thumb {
  background: #a9ccf0;
  border: 2px solid #f2f6fa;
  border-radius: 999px;
}

.credential-table-scroll::-webkit-scrollbar-thumb:hover {
  background: #7db8e9;
}

.credential-new-table,
.credential-registered-table,
.credential-attachment-table,
.credential-directory-table,
.credential-cancellation-table {
  width: 100%;
  border-collapse: collapse;
  color: #333333;
  font-size: 13px;
}

.credential-new-table {
  min-width: 1160px;
}

.credential-registered-table {
  min-width: 1040px;
}

.credential-directory-table {
  min-width: 1680px;
}

.credential-cancellation-table {
  min-width: 1280px;
}

.credential-attachment-table {
  min-width: 720px;
}

.credential-new-table th,
.credential-new-table td,
.credential-registered-table th,
.credential-registered-table td,
.credential-attachment-table th,
.credential-attachment-table td,
.credential-directory-table th,
.credential-directory-table td,
.credential-cancellation-table th,
.credential-cancellation-table td {
  padding: 0 14px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #ebeef5;
}

.credential-new-table th,
.credential-registered-table th,
.credential-attachment-table th,
.credential-directory-table th,
.credential-cancellation-table th {
  height: 48px;
  color: #555555;
  font-weight: 600;
  background: #fafafa;
}

.credential-new-table tbody td,
.credential-registered-table tbody td,
.credential-attachment-table tbody td,
.credential-directory-table tbody td,
.credential-cancellation-table tbody td {
  height: 52px;
  color: #333333;
  background: #ffffff;
}

.credential-new-table tbody tr:hover td,
.credential-registered-table tbody tr:hover td,
.credential-attachment-table tbody tr:hover td,
.credential-directory-table tbody tr:hover td,
.credential-cancellation-table tbody tr:hover td {
  background: #f7fbff;
}

.credential-attachment-table th:first-child,
.credential-attachment-table td:first-child {
  width: 68px;
  text-align: center;
}

.credential-attachment-table th:last-child,
.credential-attachment-table td:last-child {
  width: 82px;
  text-align: center;
}

.credential-table-tools-cell {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.credential-table-tools {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: #8d969b;
}

.credential-table-tools svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.credential-row-action {
  padding: 0;
  color: #409eff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.credential-row-action:hover {
  color: #337ecc;
  text-decoration: underline;
}

.credential-table-empty {
  margin: 0;
  padding: 26px 16px;
  color: #999999;
  font-size: 13px;
  text-align: center;
  background: #ffffff;
}

.credential-table-empty[hidden] {
  display: none;
}

.credential-directory-empty {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
}

.credential-directory-empty[hidden] {
  display: none;
}

.credential-directory-empty svg {
  width: 220px;
  height: 150px;
}

.credential-directory-empty p {
  margin: 10px 0 0;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.credential-directory-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  color: #27734d;
  font-size: 12px;
  background: #edf8f2;
  border-radius: 999px;
}

.credential-directory-status.is-pending {
  color: #b26a00;
  background: #fff7e8;
}

.credential-directory-status.is-cancelled {
  color: #69747a;
  background: #f1f4f6;
}

.credential-select-column {
  width: 54px;
  text-align: center !important;
}

.credential-cancellation-table th:first-child,
.credential-cancellation-table td:first-child {
  text-align: center;
}

.credential-cancellation-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #409eff;
  cursor: pointer;
}

.credential-cancellation-table input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.cancellation-form {
  display: grid;
  gap: 18px;
}

.cancellation-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.cancellation-field > span:first-child {
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.cancellation-field > select,
.cancellation-field > textarea {
  width: 100%;
  color: #303133;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.cancellation-field > select {
  height: 40px;
  padding: 0 10px;
}

.cancellation-field > textarea {
  min-height: 112px;
  padding: 9px 11px;
  line-height: 1.6;
  resize: vertical;
}

.cancellation-field > select:focus,
.cancellation-field > textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.cancellation-date-picker {
  position: relative;
  min-width: 0;
}

.cancellation-date-picker .date-picker {
  width: 100%;
}

.cancellation-date-picker .date-picker.is-open {
  position: relative;
  z-index: 30;
}

.cancellation-date-picker .date-picker-trigger {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  color: #606266;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.cancellation-date-picker .date-picker-trigger:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.cancellation-date-picker .date-picker-panel {
  z-index: 1800;
}

.cancellation-upload-zone {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  padding: 12px;
  color: #6b7780;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: #fbfdff;
  border: 1px dashed #8fc5f2;
  border-radius: 6px;
}

.cancellation-upload-zone:hover,
.cancellation-upload-zone.is-dragging {
  color: #337ecc;
  background: #ecf5ff;
  border-color: #409eff;
}

.cancellation-upload-zone svg {
  width: 22px;
  height: 22px;
  stroke: #8fc5f2;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cancellation-file-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cancellation-file-list[hidden] {
  display: none;
}

.cancellation-file-item {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 6px 10px;
  color: #4b5563;
  font-size: 12px;
  background: #fafcff;
  border: 1px solid #e4edf5;
  border-radius: 4px;
}

.cancellation-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cancellation-file-item button {
  flex: 0 0 auto;
  padding: 0;
  color: #409eff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.cancellation-reminder {
  margin-top: 2px;
}

.resignation-page {
  min-height: 100%;
}

.resignation-page[hidden] {
  display: none;
}

.resignation-readonly-grid,
.resignation-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.resignation-readonly-grid label,
.resignation-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.resignation-readonly-grid label > span,
.resignation-field > span,
.resignation-attachment-column h4 {
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.resignation-readonly-grid input,
.resignation-field > input,
.resignation-field > select,
.resignation-field > textarea {
  width: 100%;
  color: #303133;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.resignation-readonly-grid input,
.resignation-field > input,
.resignation-field > select {
  height: 40px;
  padding: 0 10px;
}

.resignation-readonly-grid input {
  color: #5f6b73;
  cursor: default;
  background: #f3f5f7;
  border-color: #e1e5e8;
}

.resignation-field > textarea {
  min-height: 112px;
  padding: 9px 11px;
  line-height: 1.6;
  resize: vertical;
}

.resignation-field > input:focus,
.resignation-field > select:focus,
.resignation-field > textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.resignation-field > input::placeholder,
.resignation-field > textarea::placeholder {
  color: #a3a9b0;
}

.resignation-field-wide {
  grid-column: 1 / -1;
}

.resignation-lookup-status {
  margin: 10px 0 0;
  color: #337ecc;
  font-size: 12px;
  line-height: 1.5;
}

.resignation-lookup-status.is-error {
  color: #f56c6c;
}

.resignation-lookup-status[hidden] {
  display: none;
}

.resignation-attachment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.resignation-attachment-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.resignation-attachment-column h4 {
  margin: 0;
}

.resignation-upload-zone {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 72px;
  padding: 12px;
  color: #6b7780;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: #fbfdff;
  border: 1px dashed #8fc5f2;
  border-radius: 6px;
}

.resignation-upload-zone:hover,
.resignation-upload-zone.is-dragging {
  color: #337ecc;
  background: #ecf5ff;
  border-color: #409eff;
}

.resignation-upload-zone svg {
  width: 22px;
  height: 22px;
  stroke: #8fc5f2;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resignation-file-name {
  margin: 0;
  padding: 7px 9px;
  overflow-wrap: anywhere;
  color: #337ecc;
  font-size: 12px;
  line-height: 1.5;
  background: #f7fbff;
  border: 1px solid #dcecf9;
  border-radius: 4px;
}

.resignation-file-name[hidden] {
  display: none;
}

.resignation-template-link {
  align-self: flex-start;
  padding: 0;
  color: #409eff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.resignation-template-link:hover {
  color: #337ecc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.resignation-reminder {
  margin-bottom: 2px;
}

.resignation-form-error {
  margin: 16px 0 0;
  color: #f56c6c;
  font-size: 12px;
  line-height: 1.5;
}

.resignation-form-error[hidden] {
  display: none;
}

.employment-certificate-page[hidden] {
  display: none;
}

.income-certificate-page[hidden] {
  display: none;
}

.employment-certificate-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 24px 0;
}

.employment-certificate-field {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.employment-certificate-field > label,
.employment-certificate-label {
  padding-top: 10px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
}

.employment-certificate-field > input,
.employment-certificate-field > textarea {
  width: 100%;
  color: #303133;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.employment-certificate-field > input {
  height: 40px;
  padding: 0 11px;
}

.employment-certificate-field > textarea {
  min-height: 112px;
  padding: 9px 11px;
  line-height: 1.6;
  resize: vertical;
}

.employment-certificate-field > input[readonly] {
  color: #5f6b73;
  cursor: default;
  background: #f3f5f7;
  border-color: #e1e5e8;
}

.employment-certificate-field > input:not([readonly]):focus,
.employment-certificate-field > textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.employment-certificate-field > input::placeholder,
.employment-certificate-field > textarea::placeholder {
  color: #a3a9b0;
}

.employment-certificate-template {
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 40px;
  color: #4b5563;
  font-size: 13px;
}

.employment-certificate-template button {
  padding: 0;
  color: #409eff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.employment-certificate-template button:hover {
  color: #337ecc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.employment-certificate-error {
  grid-column: 1;
  margin: -8px 0 0;
  color: #f56c6c;
  font-size: 12px;
  line-height: 1.5;
}

.employment-certificate-error[hidden] {
  display: none;
}

.employment-certificate-actions {
  display: flex;
  grid-column: 1;
  justify-content: flex-end;
}

.employment-certificate-actions button {
  min-width: 112px;
}

.credential-attachment-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
}

.credential-attachment-empty[hidden] {
  display: none;
}

.credential-attachment-empty svg {
  width: 200px;
  height: auto;
}

.credential-attachment-empty p {
  margin: 10px 0 0;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.credential-upload-zone {
  display: grid;
  width: 100%;
  height: 44px;
  margin-top: 12px;
  padding: 0;
  color: #409eff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: #fafcff;
  border: 1px dashed #a9ccf0;
  border-radius: 4px;
  place-items: center;
}

.credential-upload-zone:hover,
.credential-upload-zone.is-dragging {
  color: #337ecc;
  background: #ecf5ff;
  border-color: #409eff;
}

.credential-commitment {
  display: inline-flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 14px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.credential-commitment input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #409eff;
}

.credential-required {
  margin-right: 3px;
  color: #f56c6c;
}

.credential-field-error {
  margin: 7px 0 0;
  color: #f56c6c;
  font-size: 12px;
  line-height: 1.5;
}

.credential-field-error[hidden] {
  display: none;
}

.credential-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 18px;
  color: #666666;
  font-size: 12px;
}

.credential-pagination strong {
  font-weight: 500;
}

.credential-pagination button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #606266;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  place-items: center;
}

.credential-pagination button:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background: #f5f7fa;
  border-color: #e4e7ed;
}

.credential-pagination button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.credential-current-page {
  display: grid;
  width: 30px;
  height: 30px;
  color: #ffffff;
  font-weight: 600;
  background: #409eff;
  border-radius: 3px;
  place-items: center;
}

.credential-pagination select {
  width: 96px;
  height: 30px;
  padding: 0 8px;
  color: #555555;
  font: inherit;
  font-size: 12px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
}

.credential-pagination select:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12);
}

.credential-submit-bar {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #edf1f5;
}

.credential-submit-button {
  min-width: 112px;
  min-height: 40px;
}

.credential-submit-button:disabled {
  color: #a8b3bd;
  cursor: wait;
  background: #f5f7fa;
  border-color: #dfe6ec;
}

.credential-result-modal {
  position: fixed;
  z-index: 2200;
  inset: 0;
  display: grid;
  padding: 96px 20px 20px;
  background: rgba(12, 29, 59, 0.54);
  backdrop-filter: blur(3px);
  place-items: center;
}

.credential-result-modal[hidden] {
  display: none;
}

.credential-result-dialog {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px 16px;
  align-items: start;
  width: min(440px, 100%);
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(8, 24, 46, 0.24);
}

.credential-result-icon {
  display: grid;
  width: 42px;
  height: 42px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  background: #3cba78;
  border-radius: 50%;
  place-items: center;
}

.credential-result-modal.is-error .credential-result-icon {
  background: #f56c6c;
}

.credential-result-copy h2 {
  margin: 0;
  color: #1f2d3d;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.credential-result-copy p {
  margin: 7px 0 0;
  color: #606266;
  font-size: 13px;
  line-height: 1.65;
}

.credential-result-dialog > button {
  grid-column: 2;
  justify-self: end;
  min-width: 92px;
  height: 38px;
  padding: 0 20px;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #409eff;
  border: 1px solid #409eff;
  border-radius: 4px;
}

.credential-result-dialog > button:hover {
  background: #337ecc;
  border-color: #337ecc;
}

body.credential-result-open {
  overflow: hidden;
}

.credential-entry-modal {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  padding: 96px 24px 24px;
  overflow-y: auto;
  background: rgba(12, 29, 59, 0.54);
  backdrop-filter: blur(3px);
  justify-items: center;
  align-items: start;
}

.credential-entry-modal[hidden] {
  display: none;
}

.credential-entry-dialog {
  width: min(620px, 100%);
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(8, 24, 46, 0.24);
}

.credential-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #edf1f5;
}

.credential-entry-header h2 {
  margin: 0;
  color: #1f2d3d;
  font-size: 19px;
  font-weight: 700;
}

.credential-entry-header button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #7b8794;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 4px;
  place-items: center;
}

.credential-entry-header button:hover {
  color: #409eff;
  background: #ecf5ff;
}

.credential-entry-header svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.credential-entry-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
}

.credential-entry-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.credential-entry-field-wide {
  grid-column: auto;
}

.credential-entry-field > span:first-child {
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.credential-entry-field > input,
.credential-entry-field > select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  color: #303133;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.credential-entry-field > input:focus,
.credential-entry-field > select:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.credential-entry-field > input::placeholder {
  color: #a3a9b0;
}

.credential-entry-date {
  position: relative;
  min-width: 0;
}

.credential-entry-date .date-picker {
  width: 100%;
}

.credential-entry-date .date-picker-trigger {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  color: #606266;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.credential-entry-date .date-picker-trigger:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.credential-entry-date .date-picker-panel {
  z-index: 1400;
}

.credential-entry-error {
  grid-column: 1 / -1;
  margin: 0;
}

.credential-entry-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px 18px;
  border-top: 1px solid #edf1f5;
}

.credential-entry-actions > button {
  min-width: 96px;
  height: 38px;
  padding: 0 16px;
  color: #606266;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.credential-entry-actions > .credential-primary-button {
  color: #ffffff;
  background: #409eff;
  border-color: #409eff;
}

.credential-entry-actions > .credential-primary-button:hover {
  background: #337ecc;
  border-color: #337ecc;
}

body.credential-entry-open {
  overflow: hidden;
}

@media (max-width: 620px) {
  .workspace-content-body.is-credential-info,
  .workspace-content-body.is-resignation,
  .workspace-content-body.is-employment-certificate,
  .workspace-content-body.is-income-certificate {
    padding: 12px;
  }

  .credential-card {
    padding: 16px;
  }

  .credential-card h2 {
    font-size: 18px;
  }

  .credential-directory-filter {
    align-items: stretch;
  }

  .credential-directory-field {
    width: 100%;
  }

  .credential-directory-field input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .credential-directory-actions {
    width: 100%;
    margin-left: 0;
  }

  .credential-directory-actions button {
    flex: 1 1 0;
  }

  .resignation-readonly-grid,
  .resignation-form-grid,
  .resignation-attachment-grid {
    grid-template-columns: 1fr;
  }

  .resignation-field-wide {
    grid-column: auto;
  }

  .employment-certificate-form {
    padding: 14px 0;
  }

  .employment-certificate-field {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .employment-certificate-field > label,
  .employment-certificate-label {
    padding-top: 0;
    text-align: left;
  }

  .employment-certificate-error,
  .employment-certificate-actions {
    grid-column: auto;
  }

  .employment-certificate-actions button {
    width: 100%;
  }

  .credential-panel-header {
    padding: 0 14px;
  }

  .credential-panel-body {
    padding: 14px;
  }

  .credential-applicant-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 12px;
  }

  .credential-applicant-grid > div {
    border-bottom: 1px dashed #edf1f5;
  }

  .credential-applicant-grid > div:last-child {
    border-bottom: 0;
  }

  .credential-reminder {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .credential-reminder-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .credential-new-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .credential-new-actions button {
    width: 100%;
  }

  .credential-new-status {
    text-align: left;
  }

  .credential-pagination {
    gap: 6px;
  }

  .credential-submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .credential-submit-button {
    width: 100%;
  }

  .credential-result-modal {
    padding: 82px 12px 12px;
  }

  .credential-result-dialog {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 20px;
  }

  .credential-result-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .credential-entry-modal {
    padding: 82px 12px 12px;
  }

  .credential-entry-body {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 16px;
  }

  .credential-entry-field-wide {
    grid-column: auto;
  }

  .credential-entry-header {
    padding: 16px;
  }

  .credential-entry-actions {
    padding: 12px 16px 16px;
  }

  .credential-entry-actions > button {
    flex: 1 1 0;
  }
}

.workspace-content-body.is-feedback {
  background: #ffffff;
}

.feedback-page {
  min-height: 100%;
  padding: 30px 24px 48px;
  background: #ffffff;
}

.feedback-page[hidden] {
  display: none;
}

.feedback-form {
  width: min(100%, 840px);
  margin: 0 auto;
}

.feedback-success {
  width: min(100%, 620px);
  margin: 0 auto 22px;
  padding: 11px 14px;
  color: #27734d;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  background: #edf8f2;
  border: 1px solid #c9e9d8;
  border-radius: 6px;
}

.feedback-success[hidden] {
  display: none;
}

.feedback-field {
  display: grid;
  grid-template-columns: 112px minmax(0, 620px);
  gap: 20px;
  justify-content: center;
  align-items: start;
  margin-bottom: 22px;
}

.feedback-label {
  padding-top: 10px;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}

.feedback-required {
  margin-right: 4px;
  color: #f56c6c;
}

.feedback-control {
  min-width: 0;
}

.feedback-control > input,
.feedback-control > textarea {
  width: 100%;
  color: #333333;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.feedback-control > input {
  height: 40px;
  padding: 0 12px;
}

.feedback-control > textarea {
  min-height: 132px;
  padding: 10px 12px;
  line-height: 1.65;
  resize: vertical;
}

.feedback-control > input::placeholder,
.feedback-control > textarea::placeholder {
  color: #a3a9b0;
  opacity: 1;
}

.feedback-control > input:focus,
.feedback-control > textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.feedback-control > input[aria-invalid="true"],
.feedback-control > textarea[aria-invalid="true"] {
  border-color: #f56c6c;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.09);
}

.feedback-radio-group {
  display: flex;
  gap: 28px;
  align-items: center;
  min-height: 40px;
}

.feedback-radio {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #4b5563;
  font-size: 13px;
  cursor: pointer;
}

.feedback-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.feedback-radio-dot {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 1.5px solid #c0c4cc;
  border-radius: 50%;
}

.feedback-radio input:checked + .feedback-radio-dot {
  border-color: #409eff;
  box-shadow: inset 0 0 0 4px #409eff;
}

.feedback-radio input:focus-visible + .feedback-radio-dot {
  outline: 2px solid rgba(64, 158, 255, 0.35);
  outline-offset: 3px;
}

.feedback-radio-group[aria-invalid="true"] .feedback-radio-dot {
  border-color: #f56c6c;
}

.feedback-description-meta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 5px;
  color: #909399;
  font-size: 12px;
  line-height: 1.4;
}

.feedback-description-meta > span {
  flex: 0 0 auto;
  margin-left: auto;
}

.feedback-error {
  margin: 5px 0 0;
  color: #f56c6c;
  font-size: 12px;
  line-height: 1.45;
}

.feedback-error[hidden] {
  display: none;
}

.feedback-upload-zone {
  display: grid;
  gap: 8px;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-height: 104px;
  padding: 14px;
  color: #606266;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: #fafcff;
  border: 1px dashed #8cc5ff;
  border-radius: 8px;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.feedback-upload-zone:hover,
.feedback-upload-zone:focus-visible,
.feedback-upload-zone.is-dragging {
  color: #409eff;
  background: #f2f8ff;
  border-color: #409eff;
  outline: 0;
}

.feedback-upload-zone svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-file-list {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.feedback-file-list[hidden] {
  display: none;
}

.feedback-file-item {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px 6px 11px;
  color: #4b5563;
  font-size: 12px;
  background: #f8fafc;
  border: 1px solid #e5eaee;
  border-radius: 6px;
}

.feedback-file-item > svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  stroke: #7b8b94;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-file-item > span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-file-remove {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #8a969c;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 5px;
  place-items: center;
}

.feedback-file-remove:hover {
  color: #d64545;
  background: #fff1f1;
}

.feedback-file-remove svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-actions {
  display: flex;
  justify-content: center;
  padding: 4px 0 0;
}

.feedback-submit-button {
  min-width: 148px;
  height: 40px;
  padding: 0 24px;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #409eff;
  border: 1px solid #409eff;
  border-radius: 5px;
}

.feedback-submit-button:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.feedback-submit-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.workspace-content-body.is-feedback-records {
  padding: 24px;
  background: #f0f2f5;
}

.feedback-records-page {
  min-height: 100%;
}

.feedback-records-page[hidden] {
  display: none;
}

.feedback-records-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(24, 42, 58, 0.06);
}

.feedback-records-card h2 {
  position: relative;
  margin: 0 0 20px;
  padding-left: 12px;
  color: #222222;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.feedback-records-card h2::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #409eff;
  border-radius: 999px;
  content: "";
}

.feedback-records-search {
  margin: 0 0 20px;
}

.feedback-records-search-control {
  position: relative;
  width: min(100%, 340px);
}

.feedback-records-search-control input {
  width: 100%;
  height: 36px;
  padding: 0 40px 0 12px;
  color: #333333;
  font: inherit;
  font-size: 13px;
  appearance: textfield;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.feedback-records-search-control input::-webkit-search-cancel-button {
  display: none;
}

.feedback-records-search-control input::placeholder {
  color: #a3a9b0;
  opacity: 1;
}

.feedback-records-search-control input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.feedback-records-search-control button {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #909399;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 4px;
  transform: translateY(-50%);
  place-items: center;
}

.feedback-records-search-control button:hover {
  color: #409eff;
  background: #ecf5ff;
}

.feedback-records-search-control button:focus-visible,
.feedback-records-pagination button:focus-visible,
.feedback-records-pagination select:focus-visible {
  outline: 2px solid rgba(64, 158, 255, 0.45);
  outline-offset: 2px;
}

.feedback-records-search-control button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-records-list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.feedback-records-list[hidden] {
  display: none;
}

.feedback-record-item {
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e4e9ed;
  border-radius: 8px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.feedback-record-item:hover {
  border-color: #cfe5f7;
  box-shadow: 0 5px 18px rgba(30, 70, 100, 0.06);
}

.feedback-record-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.feedback-record-title {
  min-width: 0;
}

.feedback-record-title h3 {
  margin: 0;
  overflow-wrap: anywhere;
  color: #303133;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
}

.feedback-record-title p {
  margin: 7px 0 0;
  color: #606266;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.feedback-record-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
}

.feedback-record-status.is-pending {
  color: #b26a00;
  background: #fff7e8;
}

.feedback-record-status.is-processing {
  color: #1769aa;
  background: #eaf4ff;
}

.feedback-record-status.is-resolved {
  color: #27734d;
  background: #edf8f2;
}

.feedback-record-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 13px;
  padding-top: 12px;
  color: #7a868d;
  font-size: 12px;
  line-height: 1.5;
  border-top: 1px solid #edf1f3;
}

.feedback-record-meta strong {
  color: #4f6069;
  font-weight: 600;
}

.feedback-record-attachments {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 5px;
}

.feedback-record-attachment {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  color: #407da5;
  background: #f1f8fd;
  border-radius: 4px;
}

.feedback-records-empty {
  display: grid;
  flex: 1 1 auto;
  min-height: 380px;
  place-items: center;
  align-content: center;
}

.feedback-records-empty[hidden] {
  display: none;
}

.feedback-records-empty-illustration {
  width: 220px;
  height: 150px;
}

.feedback-records-empty p {
  margin: 10px 0 0;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.feedback-records-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 18px;
  color: #666666;
  font-size: 12px;
}

.feedback-records-pagination strong {
  font-weight: 500;
}

.feedback-records-pagination input {
  width: 42px;
  height: 30px;
  padding: 0 6px;
  color: #555555;
  font: inherit;
  text-align: center;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
}

.feedback-records-pagination button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #606266;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  place-items: center;
}

.feedback-records-pagination button:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background: #f5f7fa;
  border-color: #e4e7ed;
}

.feedback-records-pagination button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feedback-records-pagination select {
  width: 96px;
  height: 30px;
  padding: 0 8px;
  color: #555555;
  font: inherit;
  font-size: 12px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
}

.workspace-content-body.is-manual {
  padding: 24px;
  background: #f0f2f5;
}

.manual-page {
  min-height: 100%;
}

.manual-page[hidden] {
  display: none;
}

.manual-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(24, 42, 58, 0.06);
}

.manual-card h2 {
  position: relative;
  margin: 0 0 20px;
  padding-left: 12px;
  color: #222222;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.manual-card h2::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: #409eff;
  border-radius: 999px;
  content: "";
}

.manual-search {
  position: relative;
  width: min(100%, 340px);
}

.manual-search input {
  width: 100%;
  height: 38px;
  padding: 0 42px 0 12px;
  color: #333333;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.manual-search input::-webkit-search-cancel-button {
  display: none;
}

.manual-search input::placeholder {
  color: #a3a9b0;
  opacity: 1;
}

.manual-search input:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.manual-search button {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #909399;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 4px;
  transform: translateY(-50%);
  place-items: center;
}

.manual-search button:hover {
  color: #409eff;
  background: #ecf5ff;
}

.manual-search button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.manual-divider {
  margin-top: 20px;
  border-top: 1px solid #ebeef5;
}

.manual-list {
  flex: 1 1 auto;
}

.manual-list[hidden] {
  display: none;
}

.manual-document-row {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  border-bottom: 1px solid #edf0f2;
}

.manual-document-link {
  min-width: 0;
  padding: 12px 0;
  overflow-wrap: anywhere;
  color: #555555;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: color 150ms ease;
}

.manual-document-link:hover,
.manual-document-link:focus-visible {
  color: #409eff;
  outline: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manual-document-date {
  flex: 0 0 auto;
  color: #9aa2a8;
  font-size: 12px;
}

.manual-empty {
  display: grid;
  flex: 1 1 auto;
  min-height: 320px;
  place-items: center;
  align-content: center;
}

.manual-empty[hidden] {
  display: none;
}

.manual-empty-illustration {
  width: 220px;
  height: 150px;
}

.manual-empty p {
  margin: 10px 0 0;
  color: #999999;
  font-size: 14px;
  text-align: center;
}

.manual-action-status {
  margin: 10px 0 0;
  color: #409eff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.manual-action-status[hidden] {
  display: none;
}

.manual-pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding-top: 18px;
  color: #666666;
  font-size: 12px;
}

.manual-pagination strong {
  font-weight: 500;
}

.manual-pagination button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #606266;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  place-items: center;
}

.manual-pagination button:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background: #f5f7fa;
  border-color: #e4e7ed;
}

.manual-pagination button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.manual-current-page {
  display: grid;
  width: 30px;
  height: 30px;
  color: #ffffff;
  font-weight: 600;
  background: #409eff;
  border-radius: 3px;
  place-items: center;
}

.manual-pagination select {
  width: 96px;
  height: 30px;
  padding: 0 8px;
  color: #555555;
  font: inherit;
  font-size: 12px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
}

.workspace-content-body.is-major-info,
.workspace-content-body.is-major-filing {
  padding: 24px;
  background: #f0f2f5;
}

.major-info-page,
.major-filing-page {
  min-height: 100%;
}

.major-info-page[hidden],
.major-filing-page[hidden] {
  display: none;
}

.major-info-card,
.major-filing-card {
  min-height: 100%;
  padding: 26px 28px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(24, 42, 58, 0.06);
}

.major-info-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
}

.major-info-person {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  min-width: 0;
}

.major-info-photo {
  display: grid;
  flex: 0 0 auto;
  width: 104px;
  height: 128px;
  color: #9aa7ad;
  background: #f1f4f6;
  border: 1px solid #dce3e7;
  border-radius: 8px;
  place-items: center;
}

.major-info-photo svg {
  width: 54px;
  height: 54px;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.major-info-photo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.major-info-copy {
  min-width: 0;
  padding-top: 3px;
}

.major-info-copy h2 {
  margin: 0 0 16px;
  color: #222222;
  font-size: 28px;
  font-weight: 750;
  line-height: 1.25;
}

.major-info-line {
  display: flex;
  gap: 5px;
  align-items: baseline;
  color: #8b969c;
  font-size: 13px;
  line-height: 1.65;
}

.major-info-line strong {
  color: #4c5b63;
  font-weight: 600;
}

.major-info-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 38px;
  margin-top: 8px;
  color: #8b969c;
  font-size: 13px;
  line-height: 1.65;
}

.major-info-inline strong {
  color: #4c5b63;
  font-weight: 600;
}

.major-info-apply {
  flex: 0 0 auto;
  min-width: 126px;
  height: 40px;
  padding: 0 18px;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #409eff;
  border: 1px solid #409eff;
  border-radius: 5px;
}

.major-info-apply:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.major-info-apply:focus-visible,
.major-filing-card button:focus-visible {
  outline: 2px solid rgba(64, 158, 255, 0.42);
  outline-offset: 2px;
}

.major-info-divider {
  margin: 26px 0 22px;
  border-top: 1px solid #e8ecef;
}

.major-relative-section {
  overflow: hidden;
  border: 1px solid #e5ebf0;
  border-radius: 6px;
}

.major-relative-section > header {
  padding: 12px 16px;
  background: #f2f7fc;
  border-bottom: 1px solid #e4ebf1;
}

.major-relative-section h3 {
  position: relative;
  margin: 0;
  padding-left: 11px;
  color: #303133;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.major-relative-section h3::before {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  background: #409eff;
  border-radius: 999px;
  content: "";
}

.major-relative-content {
  min-height: 220px;
  background: #ffffff;
}

.major-relative-message {
  display: grid;
  min-height: 220px;
  margin: 0;
  color: #999999;
  font-size: 13px;
  place-items: center;
}

.major-record-table-wrap {
  overflow-x: auto;
}

.major-record-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  color: #333333;
  font-size: 13px;
}

.major-record-table th,
.major-record-table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #edf1f3;
}

.major-record-table th {
  color: #596a72;
  font-size: 12px;
  font-weight: 600;
  background: #fafafa;
}

.major-record-table tr:last-child td {
  border-bottom: 0;
}

.major-record-situation {
  display: inline-flex;
  min-height: 23px;
  padding: 0 8px;
  align-items: center;
  color: #1769aa;
  font-size: 12px;
  font-weight: 500;
  background: #eaf4ff;
  border-radius: 999px;
}

.major-record-situation.is-none {
  color: #666f74;
  background: #f1f3f5;
}

.major-record-person strong {
  display: block;
  color: #33464f;
  font-size: 13px;
}

.major-record-person span {
  display: block;
  margin-top: 3px;
  color: #8b989e;
  font-size: 11px;
  line-height: 1.5;
}

.major-record-attachments {
  display: grid;
  gap: 3px;
}

.major-record-attachment {
  color: #407da5;
  font-size: 12px;
}

.major-filing-card > header {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid #e8ecef;
}

.major-filing-card h2 {
  margin: 0;
  color: #222222;
  font-size: 22px;
  font-weight: 700;
}

.major-filing-card header button {
  height: 36px;
  padding: 0 16px;
  color: #606266;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}

.major-filing-card header button:hover {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

.major-filing-content {
  min-height: 360px;
}

.major-filing-profile-card {
  padding: 24px 28px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(24, 42, 58, 0.06);
}

.major-filing-form {
  margin-top: 16px;
  overflow: visible;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(24, 42, 58, 0.06);
}

.major-filing-section {
  overflow: visible;
  border-radius: 8px 8px 0 0;
}

.major-filing-titlebar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  padding: 15px 20px;
  background: #f1f7fc;
  border-bottom: 1px solid #e2ebf2;
}

.major-filing-titlegroup {
  flex: 1 1 220px;
}

.major-filing-titlegroup h2 {
  position: relative;
  margin: 0;
  padding-left: 12px;
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.major-filing-titlegroup h2::before {
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: 0;
  width: 3px;
  background: #409eff;
  border-radius: 999px;
  content: "";
}

.major-presence-options,
.major-scope-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.major-radio {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #4c5b63;
  font-size: 13px;
  cursor: pointer;
}

.major-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.major-radio-dot {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 1.5px solid #c0c4cc;
  border-radius: 50%;
}

.major-radio input:checked + .major-radio-dot {
  border-color: #409eff;
  box-shadow: inset 0 0 0 4px #409eff;
}

.major-radio input:focus-visible + .major-radio-dot {
  outline: 2px solid rgba(64, 158, 255, 0.38);
  outline-offset: 3px;
}

.major-report-date-label {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  gap: 5px;
  align-items: center;
  color: #4c5b63;
  font-size: 13px;
}

.major-report-date-label .major-field-error {
  flex: 0 0 100%;
  margin-left: 66px;
}

.major-date-box {
  position: relative;
  display: flex;
  flex: 0 0 178px;
  width: 178px;
  height: 36px;
  padding: 0 7px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.major-date-box.is-invalid {
  border-color: #f56c6c;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.08);
}

.major-form-field .major-date-box {
  width: 100%;
}

.major-date-box .date-picker {
  position: static;
  width: 100%;
}

.major-date-box .date-picker-trigger {
  height: 34px;
  padding: 0 3px;
  color: #555f66;
  font-size: 13px;
}

.major-date-box .date-picker-panel {
  width: min(344px, calc(100vw - 44px));
  right: auto;
  left: 0;
}

.major-date-box.is-right .date-picker-panel {
  right: 0;
  left: auto;
}

.major-relative-form {
  padding: 22px 20px 24px;
  background: #f8fbff;
}

.major-relative-form[hidden] {
  display: none;
}

.major-scope-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin-bottom: 20px;
}

.major-field-label {
  color: #44565f;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.major-required {
  margin-right: 4px;
  color: #f56c6c;
}

.major-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

.major-form-field {
  display: grid;
  gap: 7px;
  align-content: start;
  min-width: 0;
}

.major-form-field > input,
.major-form-field > select,
.major-notes-field textarea {
  width: 100%;
  min-width: 0;
  color: #303133;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  outline: 0;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.major-form-field > input,
.major-form-field > select {
  height: 40px;
  padding: 0 11px;
}

.major-form-field > input::placeholder,
.major-notes-field textarea::placeholder {
  color: #a3a9b0;
  opacity: 1;
}

.major-form-field > input:focus,
.major-form-field > select:focus,
.major-notes-field textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.major-form-field > input[aria-invalid="true"],
.major-form-field > select[aria-invalid="true"],
.major-notes-field textarea[aria-invalid="true"] {
  border-color: #f56c6c;
  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.08);
}

.major-field-error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1.45;
}

.major-field-error[hidden] {
  display: none;
}

.major-notice {
  padding: 18px 24px;
  border-top: 1px solid #e8edf1;
  border-bottom: 1px solid #e8edf1;
}

.major-notice ol {
  margin: 0;
  padding-left: 22px;
  color: #2f72a6;
  font-size: 12px;
  line-height: 1.75;
}

.major-notice li + li {
  margin-top: 6px;
}

.major-attachments {
  display: grid;
  gap: 20px;
  padding: 22px 24px;
}

.major-notes-field,
.major-file-field {
  display: grid;
  gap: 7px;
}

.major-notes-field textarea {
  min-height: 132px;
  padding: 10px 12px;
  line-height: 1.65;
  resize: vertical;
}

.major-upload-zone {
  display: grid;
  gap: 8px;
  align-content: center;
  justify-items: center;
  width: 100%;
  min-height: 108px;
  padding: 14px;
  color: #5f6b72;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: #fbfefc;
  border: 1px dashed #67c23a;
  border-radius: 8px;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.major-upload-zone:hover,
.major-upload-zone:focus-visible,
.major-upload-zone.is-dragging {
  color: #4e9e29;
  background: #f3fbf0;
  border-color: #529b2e;
  outline: 0;
}

.major-upload-zone svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.major-file-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.major-file-list[hidden] {
  display: none;
}

.major-file-item {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 6px 8px 6px 11px;
  color: #4b5563;
  font-size: 12px;
  background: #f8fbf9;
  border: 1px solid #e1ebe3;
  border-radius: 6px;
}

.major-file-item > span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.major-file-remove {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #85928b;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 5px;
  place-items: center;
}

.major-file-remove:hover {
  color: #d64545;
  background: #fff1f1;
}

.major-file-remove svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.major-form-status {
  margin: 0 24px 12px;
  padding: 9px 12px;
  color: #27734d;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  background: #edf8f2;
  border: 1px solid #c9e9d8;
  border-radius: 5px;
}

.major-form-status.is-error {
  color: #c73b3b;
  background: #fff4f4;
  border-color: #f0cccc;
}

.major-form-status[hidden] {
  display: none;
}

.major-filing-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding: 0 24px 24px;
}

.major-filing-actions button {
  height: 40px;
  padding: 0 20px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 5px;
}

.major-filing-actions button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.major-cancel-button {
  color: #606266;
  background: #ffffff;
  border: 1px solid #dcdfe6;
}

.major-confirm-button,
.major-continue-button {
  color: #ffffff;
  background: #409eff;
  border: 1px solid #409eff;
}

.major-confirm-button:hover,
.major-continue-button:hover {
  background: #337ecc;
  border-color: #337ecc;
}

@media (max-width: 620px) {
  .workspace-content-body.is-feedback-records {
    padding: 12px;
  }

  .feedback-records-card {
    padding: 16px;
  }

  .feedback-records-card h2 {
    margin-bottom: 16px;
    font-size: 18px;
  }

  .feedback-records-search-control {
    width: 100%;
  }

  .feedback-records-empty {
    min-height: 280px;
  }

  .feedback-records-empty-illustration {
    width: 180px;
    height: auto;
  }

  .feedback-records-pagination {
    gap: 6px;
  }

  .workspace-content-body.is-manual {
    padding: 12px;
  }

  .manual-card {
    padding: 16px;
  }

  .manual-card h2 {
    margin-bottom: 16px;
    font-size: 18px;
  }

  .manual-search {
    width: 100%;
  }

  .manual-document-row {
    gap: 12px;
  }

  .manual-document-link {
    font-size: 13px;
  }

  .manual-empty {
    min-height: 280px;
  }

  .manual-empty-illustration {
    width: 180px;
    height: auto;
  }

  .manual-pagination {
    flex-wrap: wrap;
    gap: 6px;
  }

  .workspace-content-body.is-major-info,
  .workspace-content-body.is-major-filing {
    padding: 12px;
  }

  .major-info-card,
  .major-filing-card {
    min-height: auto;
    padding: 18px;
  }

  .major-info-top {
    display: block;
  }

  .major-info-person {
    gap: 14px;
  }

  .major-info-photo {
    width: 84px;
    height: 104px;
  }

  .major-info-photo svg {
    width: 44px;
    height: 44px;
  }

  .major-info-copy {
    padding-top: 0;
  }

  .major-info-copy h2 {
    margin-bottom: 12px;
    font-size: 24px;
  }

  .major-info-line {
    display: block;
  }

  .major-info-line strong {
    display: block;
  }

  .major-info-inline {
    display: grid;
    gap: 6px;
  }

  .major-info-apply {
    display: block;
    margin: 18px 0 0 auto;
  }

  .major-info-divider {
    margin: 20px 0 18px;
  }

  .major-relative-content {
    min-height: 180px;
  }

  .major-filing-profile-card {
    padding: 18px;
  }

  .major-filing-titlebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 15px 16px;
  }

  .major-presence-options {
    gap: 18px;
  }

  .major-report-date-label {
    width: 100%;
  }

  .major-date-box {
    flex: 1 1 auto;
    width: auto;
  }

  .major-relative-form {
    padding: 18px 16px 20px;
  }

  .major-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .major-scope-row {
    display: grid;
    gap: 8px;
  }

  .major-scope-options {
    gap: 16px;
  }

  .major-notice,
  .major-attachments {
    padding-right: 16px;
    padding-left: 16px;
  }

  .major-filing-actions {
    flex-wrap: wrap;
    padding-right: 16px;
    padding-left: 16px;
  }

  .major-filing-actions button {
    flex: 1 1 140px;
  }
}

.workspace-content-body.is-private-travel {
  padding: 24px;
  background: #eef3f8;
}

.private-travel-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
}

.private-travel-page[hidden] {
  display: none;
}

.travel-alert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 12px 16px;
  color: #8a5a00;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(120, 91, 20, 0.04);
}

.travel-alert-heading {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.travel-alert-heading p,
.travel-alert > p {
  margin: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
}

.travel-alert-icon {
  display: grid;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  background: #f5b400;
  border-radius: 50%;
  place-items: center;
}

.travel-alert-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.travel-alert-toggle,
.travel-alert-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8a5a00;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.travel-alert-toggle {
  gap: 3px;
  height: 26px;
  padding: 0 7px;
}

.travel-alert-toggle:hover,
.travel-alert-close:hover {
  background: rgba(245, 180, 0, 0.12);
}

.travel-alert-toggle svg,
.travel-alert-close svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.travel-alert-toggle svg {
  transition: transform 160ms ease;
}

.travel-alert-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.travel-alert-close {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 16px;
}

.travel-alert-detail {
  grid-column: 1 / -1;
  padding-top: 9px;
  color: #946200;
  font-size: 12px;
  line-height: 1.7;
  border-top: 1px dashed rgba(180, 130, 20, 0.24);
}

.travel-alert-detail[hidden] {
  display: none;
}

.travel-alert-detail p {
  margin: 0;
}

.travel-policy-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 21px;
  color: #785000;
  font-size: 12px;
  line-height: 1.75;
}

.travel-policy-list > li {
  padding-left: 2px;
}

.travel-policy-list > li::marker {
  color: #b77900;
  font-weight: 700;
}

.travel-policy-subitems {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}

.travel-policy-subitems p {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px;
  align-items: start;
  margin: 0;
}

.travel-policy-subitems strong {
  color: #9a6500;
  font-weight: 700;
}

.travel-alert-detail span[aria-hidden="true"] {
  color: #f56c6c;
}

.travel-alert.is-note {
  grid-template-columns: auto minmax(0, 1fr);
  padding-top: 10px;
  padding-bottom: 10px;
}

.travel-group-body .travel-alert.is-note > p {
  margin: 0;
  padding-top: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  border-top: 0;
}

.travel-alert[hidden] {
  display: none;
}

.travel-panel {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e3eaf0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(22, 45, 68, 0.04);
}

.travel-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f5;
}

.travel-panel-title {
  position: relative;
  margin: 0;
  padding-left: 12px;
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

.travel-panel-title::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 18px;
  background: #409eff;
  border-radius: 999px;
  content: "";
  transform: translateY(-50%);
}

.travel-panel-toggle {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 28px;
  padding: 0 7px;
  color: #409eff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.travel-panel-toggle:hover {
  background: #ecf5ff;
}

.travel-panel-toggle:focus-visible,
.travel-group-toggle:focus-visible,
.travel-radio input:focus-visible + .travel-radio-dot,
.travel-upload-zone:focus-visible {
  outline: 2px solid rgba(64, 158, 255, 0.45);
  outline-offset: 2px;
}

.travel-panel-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.travel-panel-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.travel-panel-body {
  padding: 18px;
}

.travel-panel-body[hidden] {
  display: none;
}

.travel-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 34px;
  margin: 0;
}

.travel-info-item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 42px;
  padding: 7px 0;
  border-bottom: 1px dashed #edf1f5;
}

.travel-info-item dt {
  color: #606266;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.travel-info-item dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #303133;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: right;
}

.travel-required {
  margin-right: 3px;
  color: #f56c6c;
}

.travel-groups {
  display: grid;
  gap: 10px;
}

.travel-group {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e3eaf0;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(22, 45, 68, 0.04);
}

.travel-group-receive {
  position: relative;
  z-index: 5;
  overflow: visible;
}

.travel-group-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 18px;
}

.travel-group-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 0 0 0 12px;
  color: #1f2d3d;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.travel-group-toggle > span {
  position: relative;
}

.travel-group-toggle > span::before {
  position: absolute;
  top: 50%;
  left: -12px;
  width: 4px;
  height: 17px;
  background: #409eff;
  border-radius: 999px;
  content: "";
  transform: translateY(-50%);
}

.travel-group-toggle svg {
  width: 15px;
  height: 15px;
  stroke: #8c99a3;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.travel-group-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.travel-radio-group {
  display: flex;
  gap: 20px;
  align-items: center;
}

.travel-radio {
  position: relative;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #606266;
  font-size: 13px;
  cursor: pointer;
}

.travel-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.travel-radio-dot {
  display: block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: #ffffff;
  border: 1.5px solid #c0c4cc;
  border-radius: 50%;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.travel-radio input:checked + .travel-radio-dot {
  border-color: #409eff;
  box-shadow: inset 0 0 0 4px #409eff;
}

.travel-group-body {
  padding: 0 18px 14px 30px;
}

.travel-group-body[hidden] {
  display: none;
}

.travel-group-body p {
  margin: 0;
  padding-top: 11px;
  color: #909399;
  font-size: 12px;
  line-height: 1.65;
  border-top: 1px dashed #edf1f5;
}

.travel-receive-content {
  padding: 0 18px 16px;
}

.travel-receive-divider {
  border-top: 1px solid #e8edf1;
}

.travel-document-types {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}

.travel-document-label {
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.travel-document-checkboxes {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 28px;
  align-items: center;
}

.travel-checkbox {
  display: inline-flex;
  gap: 7px;
  align-items: flex-start;
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}

.travel-checkbox input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #409eff;
  cursor: pointer;
}

.travel-checkbox input:focus-visible {
  outline: 2px solid rgba(64, 158, 255, 0.42);
  outline-offset: 2px;
}

.travel-receive-details {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid #e8edf1;
}

.travel-receive-details[hidden] {
  display: none;
}

.travel-reason-row {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}

.travel-reason-row > .travel-detail-label {
  text-align: left;
}

.travel-detail-label {
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.travel-reason-main {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  min-width: 0;
}

.travel-selected-document {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  color: #337ecc;
  font-size: 12px;
  font-weight: 600;
  background: #ecf5ff;
  border: 1px solid #c6e2ff;
  border-radius: 4px;
}

.travel-reason-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 28px;
  align-items: center;
}

.travel-receive-remark {
  width: 180px;
  height: 32px;
  padding: 0 10px;
  color: #303133;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.travel-receive-remark[hidden] {
  display: none;
}

.travel-receive-remark::placeholder {
  color: #a3a9b0;
  opacity: 1;
}

.travel-receive-remark:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.travel-time-row {
  display: block;
  margin-top: 0;
  padding: 16px 0;
  border-top: 1px solid #e8edf1;
}

.travel-time-spacer {
  display: none;
}

.travel-time-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.travel-time-field {
  display: grid;
  grid-template-columns: 172px minmax(150px, 1fr);
  gap: 6px 16px;
  align-items: center;
  min-width: 0;
}

.travel-time-field .major-date-box {
  width: 100%;
  flex-basis: auto;
}

.travel-time-field .travel-field-error {
  grid-column: 1 / -1;
}

.travel-visa-details {
  display: grid;
  margin-top: 0;
  padding: 16px 0;
  gap: 16px;
  border-top: 1px solid #e8edf1;
}

.travel-visa-details[hidden] {
  display: none;
}

.travel-visa-field {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 0;
}

.travel-visa-field:last-child {
  margin-bottom: 0;
}

.travel-visa-label {
  padding-top: 0;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
}

.travel-visa-control {
  display: grid;
  gap: 5px;
  width: 100%;
}

.travel-visa-control > select {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  color: #303133;
  font: inherit;
  font-size: 14px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.travel-visa-control > select:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.travel-visa-control > select[aria-invalid="true"] {
  border-color: #f56c6c;
}

.travel-visa-date-range {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  overflow: visible;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.travel-visa-date-range:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.travel-visa-date-range.is-invalid {
  border-color: #f56c6c;
}

.travel-visa-date-slot {
  flex: 1 1 0;
  min-width: 0;
}

.travel-visa-date-slot .date-picker {
  position: static;
  width: 100%;
}

.travel-visa-date-slot .date-picker-trigger {
  height: 38px;
  padding: 0 10px;
  color: #9aa4aa;
  font-size: 14px;
  border: 0;
  box-shadow: none;
}

.travel-visa-date-slot .date-picker-trigger:hover,
.travel-visa-date-slot .date-picker-trigger[aria-expanded="true"] {
  background: #f7fbff;
  border: 0;
  box-shadow: none;
}

.travel-visa-date-slot .date-picker-trigger > svg {
  display: none;
}

.travel-visa-date-slot .date-picker-panel {
  width: min(344px, calc(100vw - 44px));
  right: auto;
  left: 0;
}

#travel-visa-end-date-picker .date-picker-panel {
  right: 0;
  left: auto;
}

.travel-visa-date-separator {
  flex: 0 0 auto;
  padding: 0 8px;
  color: #acb4b9;
  font-size: 13px;
}

.travel-private-details {
  padding: 16px 0 0;
  border-top: 1px solid #e8edf1;
}

.travel-private-details[hidden] {
  display: none;
}

.travel-private-links {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin: 12px 0 18px;
}

.travel-private-links button {
  padding: 0;
  color: #409eff;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.travel-private-links button:hover {
  color: #337ecc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.travel-private-link-status {
  margin: -8px 0 14px;
  color: #409eff;
  font-size: 12px;
}

.travel-private-link-status[hidden] {
  display: none;
}

.travel-private-field {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-bottom: 0;
  padding: 16px 0;
}

.travel-private-field + .travel-private-field {
  border-top: 1px solid #e8edf1;
}

.travel-private-label {
  padding-top: 0;
  color: #4b5563;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
}

.travel-private-control {
  display: grid;
  gap: 5px;
  width: 100%;
}

.travel-private-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  min-height: 40px;
}

.travel-private-control > select,
.travel-private-control > input,
.travel-private-control > textarea {
  width: 100%;
  color: #303133;
  font: inherit;
  font-size: 14px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  outline: 0;
}

.travel-private-control > select,
.travel-private-control > input {
  height: 40px;
  padding: 0 11px;
}

.travel-private-control > textarea {
  min-height: 112px;
  padding: 9px 11px;
  line-height: 1.6;
  resize: vertical;
}

.travel-private-control > input::placeholder,
.travel-private-control > textarea::placeholder {
  color: #a3a9b0;
  opacity: 1;
}

.travel-private-control > select:focus,
.travel-private-control > input:focus,
.travel-private-control > textarea:focus {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.travel-private-control > select[aria-invalid="true"],
.travel-private-control > input[aria-invalid="true"],
.travel-private-control > textarea[aria-invalid="true"] {
  border-color: #f56c6c;
}

.travel-private-static {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: #606266;
  font-size: 14px;
}

.travel-private-date-range {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  overflow: visible;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.travel-private-date-range:focus-within {
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.13);
}

.travel-private-date-range.is-invalid {
  border-color: #f56c6c;
}

.travel-private-date-slot {
  flex: 1 1 0;
  min-width: 0;
}

.travel-private-date-slot .date-picker {
  position: static;
  width: 100%;
}

.travel-private-date-slot .date-picker-trigger {
  height: 38px;
  padding: 0 10px;
  color: #9aa4aa;
  font-size: 14px;
  border: 0;
  box-shadow: none;
}

.travel-private-date-slot .date-picker-trigger:hover,
.travel-private-date-slot .date-picker-trigger[aria-expanded="true"] {
  background: #f7fbff;
  border: 0;
  box-shadow: none;
}

.travel-private-date-slot .date-picker-trigger > svg {
  display: none;
}

.travel-private-date-slot .date-picker-panel {
  width: min(344px, calc(100vw - 44px));
  right: auto;
  left: 0;
}

#travel-private-end-date-picker .date-picker-panel {
  right: 0;
  left: auto;
}

.travel-private-details,
.travel-private-field,
.travel-private-control,
.travel-private-date-range {
  overflow: visible;
}

.travel-receive-details,
.travel-time-row,
.travel-time-fields,
.travel-receive-content {
  overflow: visible;
}

.travel-field-error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1.4;
}

.travel-field-error[hidden] {
  display: none;
}

.travel-attachment-table {
  overflow-x: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.travel-attachment-table table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
  color: #333333;
  font-size: 13px;
}

.travel-attachment-table th,
.travel-attachment-table td {
  padding: 0 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.travel-attachment-table th {
  height: 42px;
  color: #606266;
  font-size: 13px;
  font-weight: 600;
  background: #fafafa;
}

.travel-attachment-table tbody td {
  height: 48px;
  color: #303133;
  background: #ffffff;
}

.travel-attachment-table tbody tr:hover td {
  background: #f7fbff;
}

.travel-attachment-table tbody:empty {
  display: none;
}

.travel-attachment-index {
  width: 68px;
  text-align: center !important;
}

.travel-attachment-operator {
  width: 120px;
}

.travel-attachment-time {
  width: 176px;
}

.travel-attachment-action {
  width: 82px;
  text-align: center !important;
}

.travel-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.travel-attachment-delete {
  padding: 0;
  color: #409eff;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.travel-attachment-delete:hover {
  color: #337ecc;
  text-decoration: underline;
}

.travel-attachment-delete:disabled {
  color: #c0c4cc;
  cursor: wait;
  text-decoration: none;
}

.travel-attachment-empty {
  display: grid;
  min-height: 184px;
  padding: 18px;
  place-items: center;
  align-content: center;
}

.travel-attachment-empty[hidden] {
  display: none;
}

.travel-attachment-empty svg {
  width: 150px;
  height: auto;
}

.travel-attachment-empty p {
  margin: 6px 0 0;
  color: #999999;
  font-size: 13px;
  text-align: center;
}

.travel-upload-zone {
  display: grid;
  width: 100%;
  height: 44px;
  margin-top: 12px;
  padding: 0;
  color: #409eff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  background: #fafcff;
  border: 1px dashed #a9ccf0;
  border-radius: 4px;
  place-items: center;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.travel-upload-zone:hover {
  color: #337ecc;
  background: #ecf5ff;
  border-color: #409eff;
}

.travel-upload-zone:disabled {
  color: #a8b3bd;
  cursor: wait;
  background: #f7f9fb;
  border-color: #d6e0e8;
}

.travel-upload-status {
  margin: 8px 0 0;
  color: #909399;
  font-size: 12px;
  line-height: 1.5;
}

.travel-upload-status.is-error {
  color: #f56c6c;
}

.travel-upload-status[hidden] {
  display: none;
}

.travel-form-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid #e3eaf0;
  border-radius: 6px;
}

.travel-form-actions-status {
  margin: 0;
  color: #2f9e62;
  font-size: 12px;
  line-height: 1.5;
}

.travel-form-actions-status.is-info {
  color: #337ecc;
}

.travel-form-actions-status.is-error {
  color: #f56c6c;
}

.travel-form-actions-status[hidden] {
  display: none;
}

.travel-form-actions-buttons {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  margin-left: auto;
}

.travel-form-actions-buttons button {
  min-width: 92px;
  height: 40px;
  padding: 0 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}

.travel-draft-button {
  color: #4b5563;
  background: #ffffff;
  border: 1px solid #d9d9d9;
}

.travel-draft-button:hover {
  color: #337ecc;
  background: #f7fbff;
  border-color: #a9ccf0;
}

.travel-submit-button {
  color: #ffffff;
  background: #409eff;
  border: 1px solid #409eff;
}

.travel-submit-button:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.travel-form-actions-buttons button:focus-visible {
  outline: 2px solid rgba(64, 158, 255, 0.45);
  outline-offset: 2px;
}

.travel-form-actions-buttons button:disabled {
  color: #a8b3bd;
  cursor: wait;
  background: #f5f7fa;
  border-color: #dfe6ec;
}

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

  .travel-time-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .workspace-content-body.is-private-travel {
    padding: 12px;
  }

  .private-travel-page {
    gap: 12px;
  }

  .travel-alert {
    padding: 11px 12px;
  }

  .travel-panel-header {
    padding: 0 14px;
  }

  .travel-panel-body {
    padding: 14px;
  }

  .travel-form-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
  }

  .travel-form-actions-buttons {
    width: 100%;
    margin-left: 0;
  }

  .travel-form-actions-buttons button {
    flex: 1 1 0;
    min-width: 0;
  }

  .travel-info-item {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
  }

  .travel-group-header {
    padding: 0 14px;
  }

  .travel-group-body {
    padding: 0 14px 12px 26px;
  }

  .travel-receive-content {
    padding-right: 14px;
    padding-left: 14px;
  }

  .travel-document-types {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .travel-document-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
  }

  .travel-reason-row {
    display: block;
  }

  .travel-reason-row > .travel-detail-label {
    text-align: left;
  }

  .travel-detail-label {
    display: block;
    margin-bottom: 8px;
  }

  .travel-reason-main {
    align-items: flex-start;
  }

  .travel-receive-remark {
    margin-top: 10px;
  }

  .travel-time-row {
    display: block;
    margin-top: 0;
  }

  .travel-time-spacer {
    display: none;
  }

  .travel-time-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .travel-time-field {
    grid-template-columns: 1fr;
    gap: 6px;
    min-width: 0;
  }

  .travel-visa-field {
    display: block;
    margin-bottom: 0;
  }

  .travel-visa-label {
    display: block;
    margin-bottom: 8px;
    padding-top: 0;
    text-align: left;
  }

  .travel-private-field {
    display: block;
    margin-bottom: 0;
    padding: 16px 0;
  }

  .travel-private-label {
    display: block;
    margin-bottom: 8px;
    padding-top: 0;
    text-align: left;
  }

  .travel-group-toggle {
    font-size: 14px;
  }
}

.private-travel-confirm-modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  padding: 24px;
  background: rgba(12, 29, 59, 0.54);
  backdrop-filter: blur(3px);
  place-items: center;
}

.private-travel-confirm-modal[hidden] {
  display: none;
}

.private-travel-confirm-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(760px, 100%);
  max-height: min(86vh, 820px);
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  box-shadow: 0 24px 64px rgba(8, 24, 46, 0.24);
}

.private-travel-confirm-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #edf1f5;
}

.private-travel-confirm-icon {
  display: grid;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  background: #f5b400;
  border-radius: 50%;
  place-items: center;
}

.private-travel-confirm-header h2 {
  margin: 0;
  color: #1f2d3d;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.private-travel-confirm-header p {
  margin: 5px 0 0;
  color: #7b8794;
  font-size: 12px;
  line-height: 1.6;
}

.private-travel-confirm-content {
  overflow-y: auto;
  padding: 20px 24px;
  overscroll-behavior: contain;
}

.private-travel-confirm-content .travel-policy-list {
  gap: 10px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.75;
}

.private-travel-confirm-content .travel-policy-list > li::marker {
  color: #409eff;
}

.private-travel-confirm-content .travel-policy-subitems strong {
  color: #337ecc;
}

.private-travel-confirm-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #edf1f5;
}

.private-travel-confirm-footer button {
  width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
  cursor: pointer;
  background: #409eff;
  border: 1px solid #409eff;
  border-radius: 5px;
}

.private-travel-confirm-footer button:hover {
  background: #337ecc;
  border-color: #337ecc;
}

.private-travel-confirm-footer button:focus-visible {
  outline: 3px solid rgba(64, 158, 255, 0.28);
  outline-offset: 2px;
}

body.private-travel-modal-open {
  overflow: hidden;
}

@media (max-width: 620px) {
  .private-travel-confirm-modal {
    padding: 12px;
  }

  .private-travel-confirm-dialog {
    max-height: calc(100dvh - 24px);
  }

  .private-travel-confirm-header {
    padding: 18px 16px 15px;
  }

  .private-travel-confirm-header h2 {
    font-size: 18px;
  }

  .private-travel-confirm-content {
    padding: 16px;
  }

  .private-travel-confirm-content .travel-policy-list {
    font-size: 12px;
    line-height: 1.7;
  }

  .private-travel-confirm-footer {
    padding: 12px 16px 16px;
  }

  .private-travel-confirm-footer button {
    min-height: 46px;
    font-size: 13px;
  }
}

.notification-menu {
  position: relative;
}

.notification-button {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  backdrop-filter: blur(14px);
  place-items: center;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease;
}

.notification-button:hover,
.notification-button[aria-expanded="true"] {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

.notification-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 2px;
}

.notification-button > svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  background: #d92d20;
  border: 2px solid #0d1f3e;
  border-radius: 999px;
  place-items: center;
}

.notification-badge[hidden] {
  display: none;
}

.notification-popover {
  position: absolute;
  z-index: 130;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  padding: 14px;
  color: #30464f;
  background: #ffffff;
  border: 1px solid #dce4e8;
  border-radius: 13px;
  box-shadow: 0 16px 36px rgba(8, 24, 46, 0.16);
}

.notification-popover strong {
  display: block;
  color: #20343c;
  font-size: 13px;
  font-weight: 700;
}

.notification-popover p {
  margin: 8px 0 0;
  color: #849197;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .employee-main {
    inset: 68px 0 0;
  }

  .employee-sidebar {
    flex-basis: 282px;
    width: 282px;
  }
}

@media (max-width: 620px) {
  .employee-page .site-header {
    gap: 10px;
  }

  .employee-page .header-actions {
    gap: 5px;
  }

  .employee-page .header-search.is-open {
    width: min(185px, calc(100vw - 248px));
  }

  .notification-button {
    width: 36px;
    height: 36px;
  }

  .notification-popover {
    width: min(260px, calc(100vw - 28px));
  }

  .employee-sidebar {
    flex-basis: 100%;
    width: 100%;
    padding: 16px 14px 24px;
    border-right: 0;
  }

  .employee-main:not(.is-detail-view) .employee-canvas {
    display: none;
  }

  .employee-main.is-detail-view .employee-sidebar {
    display: none;
  }

  .employee-main.is-detail-view .employee-canvas {
    display: flex;
    flex-basis: 100%;
    width: 100%;
  }

  .workspace-content-path {
    min-height: 58px;
    padding: 12px 16px;
  }

  .workspace-back-button {
    display: grid;
  }

  .workspace-content-body.is-inquiry {
    padding: 12px;
  }

  .inquiry-card {
    padding: 16px;
  }

  .inquiry-card h2 {
    margin-bottom: 16px;
    font-size: 18px;
  }

  .inquiry-filter {
    gap: 12px;
  }

  .inquiry-filter-field,
  .inquiry-date-filter {
    width: 100%;
  }

  .inquiry-date-filter {
    display: grid;
    gap: 6px;
    align-items: start;
  }

  .inquiry-status-field select,
  .inquiry-date-range {
    flex: 1 1 auto;
    width: 100%;
  }

  .inquiry-picker-slot .date-picker-panel {
    width: 100%;
    max-width: 344px;
    padding: 12px;
  }

  .inquiry-filter-actions {
    width: 100%;
    margin-left: 0;
  }

  .inquiry-filter-actions button {
    flex: 1;
  }

  .inquiry-empty-state {
    min-height: 280px;
  }

  .inquiry-empty-illustration {
    width: 180px;
    height: auto;
  }

  .inquiry-pagination {
    gap: 6px;
    justify-content: flex-start;
  }

  .feedback-page {
    padding: 20px 16px 34px;
  }

  .feedback-field {
    display: block;
    margin-bottom: 18px;
  }

  .feedback-label {
    display: block;
    margin-bottom: 7px;
    padding-top: 0;
    text-align: left;
  }

  .feedback-radio-group {
    gap: 24px;
  }

  .feedback-upload-zone {
    min-height: 96px;
  }

  .employee-function-item {
    min-height: 52px;
  }
}

@media (max-width: 380px) {
  .employee-page .header-brand {
    gap: 5px;
  }

  .employee-page .header-brand img {
    width: 34px;
  }

  .employee-page .header-brand span {
    font-size: 12px;
    white-space: nowrap;
  }

  .employee-page .header-search {
    width: 34px;
    height: 34px;
  }

  .employee-page .header-search-toggle {
    flex-basis: 28px;
    width: 28px;
    height: 28px;
  }

  .employee-page .notification-button {
    width: 34px;
    height: 34px;
  }

  .employee-page .header-profile {
    max-width: 96px;
    padding-right: 7px;
  }

  .employee-page .header-profile-name {
    font-size: 11px;
  }

  .inquiry-picker-slot .date-picker-header {
    grid-template-columns: 30px minmax(72px, 1fr) minmax(68px, 1fr) 30px;
    gap: 5px;
  }

  .inquiry-picker-slot .date-picker-arrow,
  .inquiry-picker-slot .date-picker-month,
  .inquiry-picker-slot .date-picker-year {
    height: 32px;
    font-size: 11px;
  }

  .inquiry-picker-slot .date-picker-weekdays,
  .inquiry-picker-slot .date-picker-days {
    gap: 4px;
  }

  .inquiry-picker-slot .date-picker-day {
    width: 30px;
    height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .employee-function-item,
  .notification-button {
    transition: none;
  }
}