body {
  background:
    radial-gradient(circle at 82% 0%, #fff1a733 0, transparent 28%),
    linear-gradient(135deg, #f8faff 0%, #eef3fb 46%, #f6f8fd 100%);
}

.workspace {
  background:
    radial-gradient(circle at 92% 4%, #ffcc1818 0, transparent 22%),
    linear-gradient(180deg, #fbfdff 0, #f2f5fb 280px, #f6f8fc 100%);
}

.environment {
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  box-shadow: 0 10px 26px #12224d0a;
}

.search,
.custom-select-button,
.table-wrap,
.profile-panel,
.profile-summary,
.import-panel,
.help-panel,
.empty-state {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  box-shadow:
    0 18px 45px #12224d0a,
    0 1px 0 #ffffff inset;
}

.search,
.custom-select-button {
  border-radius: 10px;
}

.table-wrap,
.profile-panel,
.profile-summary,
.import-panel,
.help-panel,
.empty-state,
dialog {
  border-radius: 12px;
}

.profile-layout {
  align-items: start;
}

.profile-summary,
.profile-panel {
  border-color: #d6deed;
}

.profile-summary {
  min-height: 112px;
}

.profile-panel {
  max-width: 520px;
}

.profile-panel input {
  border-radius: 10px;
}

.nav-submenu button {
  gap: 7px;
}

.nav-submenu button svg {
  width: 15px;
  height: 15px;
}

dialog {
  box-shadow:
    0 30px 90px #12224d22,
    0 1px 0 #ffffff inset;
}

:root[data-theme="dark"] body,
:root[data-theme="dark"] .workspace,
:root[data-theme="dark"] .search,
:root[data-theme="dark"] .custom-select-button,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .profile-panel,
:root[data-theme="dark"] .profile-summary,
:root[data-theme="dark"] .import-panel,
:root[data-theme="dark"] .help-panel,
:root[data-theme="dark"] .empty-state {
  box-shadow: none;
}

button.loading {
  cursor: progress;
}

button.loading svg {
  animation: hk-spin 900ms linear infinite;
}

button.primary.loading:disabled {
  opacity: .92;
}

@keyframes hk-spin {
  to {
    transform: rotate(360deg);
  }
}