:root {
  --hr-primary: #3371b7;
  --hr-primary-rgb: 51, 113, 183;
  --hr-primary-dark: #265987;
  --hr-primary-dark-rgb: 38, 89, 135;
  --hr-switch-primary: var(--hr-primary);
  --hr-switch-primary-rgb: var(--hr-primary-rgb);
  --hr-switch-primary-dark: var(--hr-primary-dark);
  --hr-border: #d9e2ef;
  --hr-surface: #ffffff;
  --hr-app-bg: #eef3f8;
  --hr-text: #10203f;
  --hr-muted: #5f6f86;
  --hr-green: #2f9b4e;
  --hr-amber: #c6790f;
  --hr-red: #c94a4a;
  --hr-viewport-height: 100dvh;
  --hr-shadow-sm: 0 8px 18px rgba(16, 32, 63, 0.06);
  --hr-shadow-md: 0 14px 32px rgba(16, 32, 63, 0.09);
  --bs-primary: var(--hr-primary);
  --bs-primary-rgb: var(--hr-primary-rgb);
  --bs-link-color: var(--hr-primary);
  --bs-link-color-rgb: var(--hr-primary-rgb);
  --bs-link-hover-color: var(--hr-primary-dark);
  --bs-link-hover-color-rgb: var(--hr-primary-dark-rgb);
}

.sales-component {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sales-page-header,
.sales-panel-header,
.sales-subpanel-head,
.sales-setting-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sales-page-header {
  align-items: center;
  padding: 22px;
}

.sales-header-actions,
.sales-row-actions,
.sales-subpanel-actions,
.sales-assignment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.sales-muted {
  color: #66758c;
}

.sales-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #f2c4c4;
  background: #fff2f2;
  color: #9d2525;
  border-radius: 8px;
  padding: 12px 14px;
}

.sales-alert button {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: inherit;
}

.sales-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  text-align: center;
  color: #66758c;
  padding: 28px;
}

.sales-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 260px;
  padding: 58px 28px;
  color: var(--hr-muted);
  text-align: center;
}

.sales-empty > i {
  width: 76px;
  height: 76px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--hr-primary);
  background: #edf4ff;
  box-shadow: inset 0 0 0 1px #cfe0f4;
  font-size: 34px;
}

.sales-empty h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: 0;
}

.sales-empty p {
  margin: 0;
  max-width: 520px;
  color: #506178;
  font-size: 17px;
  line-height: 1.5;
}

.sales-empty .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 800;
}

.sales-empty-line {
  padding: 20px 0 4px;
}

.sales-kpi-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
}

.sales-kpi-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  border: 1px solid #e4eaf3;
  border-left-width: 4px;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(20, 42, 75, 0.06);
}

.sales-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef5ff;
  color: #2f6fab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.sales-kpi-card small,
.sales-table small,
.sales-user-line small,
.sales-user-option small,
.sales-detail-metrics span,
.sales-detail-actions small,
.sales-history-head small {
  display: block;
  color: #66758c;
  font-size: 0.82rem;
  line-height: 1.25;
}

.sales-kpi-card strong {
  display: block;
  color: #15233c;
  font-size: 1.2rem;
  line-height: 1.2;
  margin-top: 4px;
}

.sales-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
  gap: 18px;
}

.sales-panel,
.sales-list-panel {
  padding: 20px;
}

.sales-panel-header {
  align-items: center;
  margin-bottom: 16px;
}

.sales-today-list,
.sales-pipeline-list,
.sales-history,
.sales-assigned-list,
.sales-user-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sales-today-item {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto minmax(160px, 0.8fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e6edf5;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.sales-today-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4f7fb;
}

.sales-today-main strong,
.sales-today-info strong,
.sales-table td > strong,
.sales-pipeline-row > span,
.sales-user-line strong,
.sales-user-option strong,
.sales-detail-actions strong {
  display: block;
  color: #15233c;
  line-height: 1.25;
}

.sales-today-main small,
.sales-today-info span {
  display: block;
  color: #66758c;
  font-size: 0.85rem;
  line-height: 1.25;
}

.sales-pipeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px 12px;
}

.sales-pipeline-row strong {
  text-align: right;
  color: #15233c;
}

.sales-pipeline-bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: #edf1f6;
  overflow: hidden;
}

.sales-pipeline-bar span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: #2f6fab;
}

.sales-filter-bar {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr) repeat(3, auto);
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

.sales-toggle {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dce5f1;
  border-radius: 8px;
  background: #fff;
  padding: 9px 12px;
  color: #33435b;
  white-space: nowrap;
}

.sales-table-wrap {
  border: 1px solid #e4eaf3;
  border-radius: 8px;
  overflow: hidden;
}

.sales-table {
  min-width: 1120px;
}

.sales-table thead th {
  color: #66758c;
  font-size: 0.8rem;
  font-weight: 700;
  background: #f6f8fb;
}

.sales-table tbody td {
  vertical-align: middle;
}

.sales-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: normal;
  text-align: left;
}

.sales-avatar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sales-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eaf2fb;
  color: #2f6fab;
  font-size: 0.78rem;
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
}

.sales-avatar-sm {
  width: 26px;
  height: 26px;
  font-size: 0.68rem;
}

.sales-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sales-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  background: rgba(15, 25, 42, 0.46);
  padding: 56px 18px;
}

.sales-detail-overlay {
  padding-top: 28px;
}

.sales-dialog {
  width: min(100%, 620px);
  max-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 31, 54, 0.24);
  overflow: hidden;
}

.sales-dialog-lg {
  width: min(100%, 880px);
}

.sales-dialog-xl {
  width: min(100%, 1340px);
}

.sales-dialog > header,
.sales-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: #f7f9fc;
}

.sales-dialog > footer {
  justify-content: flex-end;
  border-top: 1px solid #e4eaf3;
}

.sales-dialog h3 {
  margin: 0;
  color: #15233c;
  font-size: 1.25rem;
}

.sales-dialog-body {
  overflow-y: auto;
  padding: 20px;
}

.sales-modal-close {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dce5f1;
  border-radius: 50%;
  background: #fff;
  color: #33435b;
}

.sales-switch-row,
.sales-user-option,
.sales-user-line,
.sales-contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sales-switch-row {
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}

.sales-switch-row small {
  display: block;
  color: #66758c;
}

.sales-settings-grid,
.sales-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.sales-setting-box,
.sales-subpanel {
  border: 1px solid #e4eaf3;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.sales-range-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #66758c;
  font-size: 0.8rem;
}

.sales-recipient-search {
  margin: 12px 0;
}

.sales-user-option {
  width: 100%;
  border: 1px solid #e0e7f1;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  text-align: left;
}

.sales-user-option.active {
  border-color: #2f6fab;
  background: #eff6ff;
}

.sales-user-option > i {
  margin-left: auto;
  color: #9aabc0;
}

.sales-user-option.active > i {
  color: #2f6fab;
}

.sales-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1.2fr);
  gap: 18px;
  border: 1px solid #e4eaf3;
  border-radius: 8px;
  background: #fbfdff;
  padding: 18px;
  margin-bottom: 16px;
}

.sales-detail-hero h4 {
  margin: 12px 0 10px;
  color: #10203f;
  font-size: 1.55rem;
}

.sales-detail-hero p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #66758c;
}

.sales-detail-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.88rem;
}

.sales-detail-status.is-green {
  background: #e7f7eb;
  color: #24773b;
}

.sales-detail-status.is-blue {
  background: #e8f1ff;
  color: #265fd6;
}

.sales-detail-status.is-amber {
  background: #fff3dc;
  color: #b36200;
}

.sales-detail-status.is-red {
  background: #fdeceb;
  color: #b83232;
}

.sales-detail-status.is-slate {
  background: #edf1f6;
  color: #506178;
}

.sales-detail-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sales-detail-metrics > div {
  border-left: 1px solid #dfe7f1;
  padding-left: 14px;
  min-width: 0;
}

.sales-detail-metrics small {
  display: block;
  color: #66758c;
  margin-bottom: 6px;
}

.sales-detail-metrics strong {
  display: block;
  color: #15233c;
  font-size: 1.08rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sales-detail-metrics em {
  margin-top: 8px;
  font-style: normal;
}

.sales-detail-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.sales-detail-actions button {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  text-align: left;
  color: #33435b;
}

.sales-detail-actions button > i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef5ff;
  color: #2f6fab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.sales-subpanel h4 {
  margin: 0 0 12px;
  color: #15233c;
  font-size: 1rem;
}

.sales-subpanel-head h4 {
  margin: 0;
}

.sales-user-line {
  border: 1px solid #e4eaf3;
  border-radius: 8px;
  padding: 10px;
}

.sales-assignment-editor {
  border-top: 1px solid #e4eaf3;
  margin-top: 14px;
  padding-top: 14px;
}

.sales-assignment-editor .sales-user-option + .sales-user-option {
  margin-top: 8px;
}

.sales-assignment-actions {
  margin-top: 12px;
}

.sales-contact-link {
  border: 1px solid #e4eaf3;
  border-radius: 8px;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.sales-contact-link + .sales-contact-link {
  margin-top: 8px;
}

.sales-contact-link > i {
  color: #2f6fab;
}

.sales-history-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  border-left: 2px solid #dce5f1;
  padding: 0 0 16px 14px;
}

.sales-history-entry:last-child {
  padding-bottom: 0;
}

.sales-history-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4f7fb;
}

.sales-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sales-history-actor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #66758c;
  font-size: 0.85rem;
  margin: 6px 0;
}

.sales-history p {
  margin: 0;
  color: #33435b;
  font-size: 0.9rem;
}

@media (max-width: 1399.98px) {
  .sales-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sales-overview-grid,
  .sales-detail-hero {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 991.98px) {
  .sales-page-header,
  .sales-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .sales-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .sales-kpi-grid,
  .sales-settings-grid,
  .sales-detail-grid,
  .sales-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-filter-bar {
    grid-template-columns: 1fr 1fr;
  }

  .sales-today-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sales-today-item .badge,
  .sales-today-info,
  .sales-today-item .sales-row-actions {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 575.98px) {
  .sales-page-header,
  .sales-panel,
  .sales-list-panel,
  .sales-dialog-body {
    padding: 14px;
  }

  .sales-kpi-grid,
  .sales-filter-bar,
  .sales-settings-grid,
  .sales-detail-grid,
  .sales-detail-metrics,
  .sales-detail-actions {
    grid-template-columns: 1fr;
  }

  .sales-modal-overlay {
    padding: 14px;
  }

  .sales-dialog {
    max-height: calc(100vh - 28px);
  }
}

.shop-business-component {
  color: #1f2933;
}

.shop-business-header,
.shop-business-header-meta,
.shop-business-cart-header,
.shop-business-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.shop-business-header {
  flex-wrap: wrap;
}

.shop-business-main-column,
.shop-business-cart-column {
  transition: flex-basis 0.38s ease, max-width 0.38s ease, width 0.38s ease;
}

.shop-business-wizard,
.shop-business-cart {
  background: #fff;
  border: 1px solid rgba(51, 113, 183, 0.18);
  border-radius: 8px;
  box-shadow: 0 0.125rem 0.35rem rgba(17, 24, 39, 0.08);
  transition: box-shadow 0.38s ease, transform 0.38s ease, padding 0.38s ease;
}

.shop-business-cart {
  position: sticky;
  top: 1rem;
  padding: 1rem;
}

.shop-business-steps {
  border-bottom: 1px solid rgba(31, 41, 51, 0.12);
  padding: 0.75rem;
  transition: border-color 0.32s ease, padding 0.32s ease;
}

.shop-business-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  color: #6b7280;
  font-weight: 600;
  padding: 0.5rem;
  transition: color 0.25s ease, opacity 0.25s ease, padding 0.32s ease, transform 0.32s ease;
}

.shop-business-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #eef2f7;
  color: #3371b7;
  transition: width 0.32s ease, height 0.32s ease, background 0.25s ease, color 0.25s ease;
}

.shop-business-step.active {
  color: #3371b7;
}

.shop-business-step.active span {
  background: #3371b7;
  color: #fff;
}

.shop-business-step:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.shop-business-products {
  margin-top: 2.5rem;
}

.shop-business-panels {
  display: grid;
  align-items: stretch;
  max-height: 100rem;
  overflow: hidden;
  opacity: 1;
  transform: translateY(0);
  transition: max-height 0.42s ease, opacity 0.28s ease, transform 0.38s ease;
}

.shop-business-panel {
  display: flex;
  flex-direction: column;
  grid-area: 1 / 1;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.shop-business-panel.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.shop-business-wizard.is-complete {
  box-shadow: 0 0.1rem 0.22rem rgba(17, 24, 39, 0.06);
  transform: translateY(-0.15rem);
}

.shop-business-wizard.is-complete .shop-business-steps {
  border-bottom-color: transparent;
  padding: 0.55rem 0.65rem;
}

.shop-business-wizard.is-complete .shop-business-step {
  padding: 0.35rem 0.45rem;
  transform: translateY(-0.05rem);
}

.shop-business-wizard.is-complete .shop-business-step span {
  width: 1.45rem;
  height: 1.45rem;
}

.shop-business-wizard.is-complete .shop-business-panels {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-0.5rem);
}

.shop-business-panel-actions {
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.5rem;
}

.shop-business-next-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 9.5rem;
  min-height: 3rem;
  font-weight: 700;
}

.shop-business-step-intro {
  max-width: 42rem;
}

.shop-business-step-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 0.8rem;
  border-radius: 8px;
  background: #eef7ff;
  color: #3371b7;
  font-size: 2rem;
}

.shop-business-question {
  margin-bottom: 0.35rem;
  color: #1f2933;
  font-size: 1.05rem;
  font-weight: 600;
}

.shop-business-device-list {
  display: grid;
  gap: 0.35rem;
  max-width: 36rem;
  margin-top: 0.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(51, 113, 183, 0.18);
  border-radius: 8px;
  background: #f8fafc;
  color: #4b5563;
  font-size: 0.9rem;
}

.shop-business-checkout-steps {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.shop-business-checkout-steps span {
  border: 1px solid rgba(31, 41, 51, 0.14);
  border-radius: 8px;
  color: #6b7280;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
}

.shop-business-checkout-steps span.active {
  border-color: #3371b7;
  background: #eef7ff;
  color: #3371b7;
}

.shop-business-checkout-card {
  border: 1px solid rgba(31, 41, 51, 0.14);
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
}

.shop-business-address {
  color: #1f2933;
  line-height: 1.55;
}

.shop-business-option {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  height: 100%;
  border: 1px solid rgba(31, 41, 51, 0.14);
  border-radius: 8px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
}

.shop-business-option.selected {
  border-color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.045);
  box-shadow: 0 0 0 0.14rem rgba(var(--bs-primary-rgb), 0.15);
}

.shop-business-switch {
  display: flex;
  align-items: center;
  min-height: 2.2rem;
  margin: 0;
  padding-left: 0;
}

.shop-business-switch .form-check-input {
  width: 2.75rem;
  height: 1.45rem;
  flex: 0 0 auto;
  float: none;
  margin: 0;
}

.shop-business-switch .form-check-input:checked {
  border-color: var(--hr-primary);
  background-color: var(--hr-primary);
}

.shop-business-option-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.shop-business-choice-badge {
  background-color: var(--hr-primary) !important;
  color: #fff !important;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
}

.shop-business-app-icon {
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 3.25rem;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0.08rem 0.24rem rgba(17, 24, 39, 0.16);
}

.shop-business-option small {
  display: block;
  margin-top: 0.25rem;
  color: #6b7280;
}

.shop-business-option.disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.shop-business-storage-meter,
.shop-business-slider {
  border: 1px solid rgba(31, 41, 51, 0.14);
  border-radius: 8px;
  padding: 1rem;
  background: #f8fafc;
}

.shop-business-storage-meter .progress-bar {
  background-color: var(--hr-primary);
}

.shop-business-slider .form-range {
  accent-color: var(--hr-primary);
}

.shop-business-slider .form-range::-webkit-slider-thumb {
  background-color: var(--hr-primary);
}

.shop-business-slider .form-range::-moz-range-thumb {
  background-color: var(--hr-primary);
  border-color: var(--hr-primary);
}

.shop-business-slider .form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.25rem rgba(var(--hr-primary-rgb), 0.2);
}

.shop-business-slider .form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 0.25rem rgba(var(--hr-primary-rgb), 0.2);
}

.shop-business-rabatt {
  border-top: 1px solid rgba(31, 41, 51, 0.12);
  padding-top: 0.85rem;
}

.shop-business-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.55rem;
  font-size: 1.08rem;
  font-weight: 700;
  transition: box-shadow 0.32s ease, font-size 0.32s ease, min-height 0.32s ease, transform 0.32s ease;
}

.shop-business-adjust-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  font-weight: 600;
}

.shop-business-slider-labels {
  position: relative;
  min-height: 2.45rem;
  margin-top: 0.25rem;
  color: #6b7280;
  font-size: 0.82rem;
}

.shop-business-slider-labels > .shop-business-slider-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.shop-business-slider-labels > .shop-business-slider-tick:first-child {
  transform: translateX(0);
}

.shop-business-slider-labels > .shop-business-slider-tick:last-child {
  top: 1.15rem;
  transform: translateX(-100%);
}

.shop-business-map {
  width: 100%;
  min-height: 70vh;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(31, 41, 51, 0.14);
}

.shop-business-map-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(198, 121, 15, 0.22);
  border-radius: 8px;
  color: #83510d;
  background: #fff8e8;
  font-size: 0.9rem;
  line-height: 1.35;
}

.shop-business-map-notice i {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.shop-business-map-marker {
  filter: drop-shadow(0 3px 5px rgba(17, 24, 39, 0.25));
}

@media (min-width: 1200px) {
  .shop-business-layout.is-summary-focused .shop-business-main-column {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
    width: 41.666667%;
  }

  .shop-business-layout.is-summary-focused .shop-business-cart-column {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    width: 58.333333%;
  }

  .shop-business-layout.is-summary-focused .shop-business-cart {
    box-shadow: 0 0.45rem 1rem rgba(17, 24, 39, 0.12);
    padding: 1.25rem;
    transform: translateY(-0.25rem);
  }

  .shop-business-layout.is-summary-focused .shop-business-order-button {
    min-height: 4.1rem;
    font-size: 1.18rem;
    box-shadow: 0 0.35rem 0.85rem rgba(51, 113, 183, 0.25);
    transform: translateY(-0.05rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-business-main-column,
  .shop-business-cart-column,
  .shop-business-wizard,
  .shop-business-cart,
  .shop-business-steps,
  .shop-business-step,
  .shop-business-step span,
  .shop-business-panels,
  .shop-business-order-button,
  .shop-business-adjust-button {
    transition: none;
  }
}

@media (max-width: 767.98px) {
  .shop-business-header-meta,
  .shop-business-cart-header,
  .shop-business-steps {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-business-step {
    width: 100%;
  }
}

[v-cloak] {
  display: none;
}

html {
  min-height: 100%;
  background: var(--hr-app-bg);
  overscroll-behavior-y: none;
}

body.is-app-booting {
  overflow: hidden;
  background: #fff;
}

body {
  min-height: 100vh;
  min-height: var(--hr-viewport-height, 100dvh);
  color: var(--hr-text);
  background: var(--hr-app-bg);
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

a:not([class]) {
  color: var(--hr-primary);
  text-decoration-color: rgba(var(--hr-primary-rgb), 0.45);
}

a:not([class]):hover,
a:not([class]):focus-visible {
  color: var(--hr-primary-dark);
  text-decoration-color: currentColor;
}

.btn,
.form-control,
.form-select,
.panel,
.login-card,
.offcanvas {
  border-radius: 8px;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--hr-primary);
  --bs-btn-border-color: var(--hr-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hr-primary-dark);
  --bs-btn-hover-border-color: var(--hr-primary-dark);
  --bs-btn-focus-shadow-rgb: var(--hr-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hr-primary-dark);
  --bs-btn-active-border-color: var(--hr-primary-dark);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--hr-primary);
  --bs-btn-disabled-border-color: var(--hr-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--hr-primary);
  --bs-btn-border-color: var(--hr-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--hr-primary);
  --bs-btn-hover-border-color: var(--hr-primary);
  --bs-btn-focus-shadow-rgb: var(--hr-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--hr-primary-dark);
  --bs-btn-active-border-color: var(--hr-primary-dark);
  --bs-btn-disabled-color: var(--hr-primary);
  --bs-btn-disabled-border-color: var(--hr-primary);
}

.text-primary {
  color: var(--hr-primary) !important;
}

.bg-primary {
  background-color: var(--hr-primary) !important;
}

.border-primary {
  border-color: var(--hr-primary) !important;
}

.text-bg-primary {
  color: #fff !important;
  background-color: var(--hr-primary) !important;
}

.form-check-input {
  border-color: #c9d6e7;
}

.form-check-input:focus {
  border-color: var(--hr-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--hr-primary-rgb), 0.18);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  border-color: var(--hr-primary);
  background-color: var(--hr-primary);
}

.form-check-input:checked:focus,
.form-check-input[type="checkbox"]:indeterminate:focus {
  border-color: var(--hr-primary-dark);
  background-color: var(--hr-primary);
}

.form-check-input:checked:hover:not(:disabled),
.form-check-input[type="checkbox"]:indeterminate:hover:not(:disabled) {
  border-color: var(--hr-primary-dark);
  background-color: var(--hr-primary-dark);
}

.form-range {
  accent-color: var(--hr-primary);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--hr-primary);
}

.form-range::-webkit-slider-thumb:active {
  background-color: var(--hr-primary-dark);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.25rem rgba(var(--hr-primary-rgb), 0.2);
}

.form-range::-moz-range-thumb {
  border-color: var(--hr-primary);
  background-color: var(--hr-primary);
}

.form-range::-moz-range-thumb:active {
  border-color: var(--hr-primary-dark);
  background-color: var(--hr-primary-dark);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 0.25rem rgba(var(--hr-primary-rgb), 0.2);
}

.form-switch .form-check-input {
  border-color: #c9d6e7;
  background-color: #e9eef5;
}

.form-switch .form-check-input:focus {
  border-color: var(--hr-switch-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--hr-switch-primary-rgb), 0.18);
}

.form-switch .form-check-input:checked {
  border-color: var(--hr-switch-primary);
  background-color: var(--hr-switch-primary);
}

.form-switch .form-check-input:checked:focus {
  border-color: var(--hr-switch-primary-dark);
  background-color: var(--hr-switch-primary);
}

.form-switch .form-check-input:checked:hover:not(:disabled) {
  border-color: var(--hr-switch-primary-dark);
  background-color: var(--hr-switch-primary-dark);
}

.app-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: #fff;
  transition: opacity 0.16s ease, visibility 0.16s ease;
}

.app-loading-overlay.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.app-loading-spinner {
  width: 3.25rem;
  height: 3.25rem;
  color: var(--hr-primary);
  border-width: 0.22rem;
}

.app-notification-region {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2300;
  width: min(380px, calc(100vw - 36px));
  pointer-events: none;
}

.app-notification-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.app-notification {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  color: var(--hr-text);
  background: #fff;
  border: 1px solid rgba(217, 226, 239, 0.95);
  border-left: 4px solid var(--hr-green);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(16, 32, 63, 0.18);
  pointer-events: auto;
}

.app-notification > i {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--hr-green);
  border-radius: 50%;
  font-size: 14px;
}

.app-notification span {
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.app-notification button {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: var(--hr-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.app-notification button:hover,
.app-notification button:focus-visible {
  color: var(--hr-text);
  background: #eef3f8;
}

.app-notification.is-info {
  border-left-color: var(--hr-primary);
}

.app-notification.is-info > i {
  background: var(--hr-primary);
}

.app-notification.is-warning {
  border-left-color: var(--hr-amber);
}

.app-notification.is-warning > i {
  background: var(--hr-amber);
}

.app-notification.is-error {
  border-left-color: var(--hr-red);
}

.app-notification.is-error > i {
  background: var(--hr-red);
}

.app-notification-enter-active,
.app-notification-leave-active {
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-notification-enter-from,
.app-notification-leave-to {
  opacity: 0;
  transform: translateY(8px);
}

.login-shell {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  background: #101820;
}

.login-shell::before {
  content: "";
  position: absolute;
  inset: -8px;
  background-image: url("../img/pic_wpmodul_fullhd.jpg?v=3.17");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: blur(2px);
  transform: scale(1.01);
  z-index: 0;
}

.login-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.login-card {
  position: relative;
  z-index: 2;
  width: min(100%, 460px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--hr-border);
  background: var(--hr-surface);
  box-shadow: 0 14px 36px rgba(29, 40, 56, 0.1);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--hr-border);
}

.login-brand strong {
  display: block;
  line-height: 1.2;
}

.login-brand span {
  display: block;
  color: var(--hr-muted);
  font-size: 14px;
}

.login-copy {
  margin-bottom: 24px;
}

.registration-partner-brand {
  display: flex;
  justify-content: center;
  margin: -8px 0 24px;
}

.brand-mark {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}

.brand-mark-sm {
  width: 40px;
  height: 40px;
  margin: 0;
}

.brand-icon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.login-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  color: var(--hr-muted);
  font-size: 13px;
}

.login-meta span {
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--support-category-color) 42%, var(--hr-border));
  border-radius: 999px;
  background: #fafbfd;
}

.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 14px;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
}

.login-alert-info {
  border: 1px solid rgba(51, 113, 183, 0.2);
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.login-alert-error {
  border: 1px solid #f1c8c8;
  color: #9f2f45;
  background: #fff2f2;
}

.registration-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 0;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.45;
}

.registration-check .form-check-input {
  flex: 0 0 auto;
  margin-left: 0;
}

.registration-check .form-check-label {
  display: block;
}

.registration-check strong {
  display: block;
  margin-bottom: 2px;
  color: var(--hr-text);
}

.two-factor-step {
  display: grid;
  justify-items: center;
  text-align: center;
}

.two-factor-step p {
  max-width: 340px;
  margin: 0 auto 20px;
  color: var(--hr-muted);
  font-size: 14px;
  line-height: 1.45;
}

.two-factor-icon {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 23px;
}

.two-factor-method-switch {
  max-width: 360px;
}

.two-factor-method-switch .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font-weight: 800;
}

.login-back-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  color: var(--hr-muted);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.login-back-link:hover {
  color: var(--hr-primary-dark);
}

.two-factor-code-field {
  display: grid;
  gap: 7px;
  width: 100%;
  margin-bottom: 14px;
  text-align: left;
}

.two-factor-code-field span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.otp-container {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(36px, 1fr));
  gap: 8px;
}

.otp-input {
  width: 100%;
  height: 56px;
  min-width: 0;
  padding: 0;
  border: 2px solid #d9e3ef;
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  box-shadow: 0 8px 18px rgba(31, 45, 61, 0.05);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
  appearance: textfield;
  -webkit-appearance: none;
}

.otp-input:focus {
  border-color: var(--hr-primary);
  box-shadow: 0 0 0 4px rgba(var(--hr-primary-rgb), 0.14), 0 10px 24px rgba(31, 45, 61, 0.08);
  outline: 0;
  transform: translateY(-1px);
}

.otp-container.otp-error .otp-input {
  border-color: #d94a5f;
  box-shadow: 0 0 0 4px rgba(217, 74, 95, 0.14);
}

.otp-container.otp-success .otp-input {
  border-color: #1f9d66;
  box-shadow: 0 0 0 4px rgba(31, 157, 102, 0.16);
}

.otp-shake {
  animation: otp-shake 0.3s linear;
}

.otp-bounce {
  animation: otp-bounce 0.35s ease-out;
}

@keyframes otp-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@keyframes otp-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.08); }
  60% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.account-two-factor-code-field {
  display: grid;
  gap: 7px;
}

.account-otp-container {
  max-width: 370px;
}

@media (max-width: 575.98px) {
  .otp-container {
    grid-template-columns: repeat(6, minmax(30px, 1fr));
    gap: 6px;
  }

  .otp-input {
    height: 48px;
    font-size: 22px;
  }
}

.app-shell {
  min-height: 100vh;
  min-height: var(--hr-viewport-height, 100dvh);
  display: flex;
  background: var(--hr-app-bg);
}

.sidebar {
  width: 276px;
  height: 100vh;
  height: var(--hr-viewport-height, 100dvh);
  min-height: 100vh;
  min-height: var(--hr-viewport-height, 100dvh);
  max-height: var(--hr-viewport-height, 100dvh);
  flex: 0 0 276px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  padding: 20px 16px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: #fff;
  transition: width 0.2s ease, flex-basis 0.2s ease, padding 0.2s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px 18px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--hr-border);
}

.sidebar-brand > .sidebar-label {
  min-width: 0;
  flex: 1;
}

.sidebar-brand span {
  display: block;
  color: var(--hr-muted);
  font-size: 14px;
}

.sidebar-product-line {
  display: block;
  font-weight: 700;
  white-space: nowrap;
}

.sidebar-brand .sidebar-version {
  display: inline;
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: inherit;
  letter-spacing: inherit;
}

.sidebar-toggle {
  color: var(--hr-muted);
  flex: 0 0 auto;
}

.sidebar-nav-area {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  color: #41516a;
  background: transparent;
  text-align: left;
  font-weight: 600;
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.sidebar-link:hover {
  color: var(--hr-primary-dark);
  background: #eef7ff;
  transform: translateX(2px);
}

.sidebar-toggle .sidebar-label {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 500;
}

.sidebar-toggle:hover .sidebar-label {
  color: var(--hr-primary-dark);
}

.sidebar-link > .sidebar-label,
.sidebar-special-button > .sidebar-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-link.active {
  color: #fff;
  background: var(--hr-primary);
  box-shadow: 0 8px 18px rgba(51, 113, 183, 0.24);
}

.sidebar-link.active .app-icon {
  color: #fff;
}

.sidebar-section-label {
  margin: 0 0 8px;
  padding-inline: 10px;
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sidebar-special {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hr-border);
}

.sidebar-special-button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid var(--hr-primary);
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.sidebar-special-button .app-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 12px;
}

.sidebar-special-button:hover,
.sidebar-special-button.active {
  border-color: var(--hr-primary-dark);
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.sidebar-footer {
  display: grid;
  gap: 8px;
  flex: 0 0 auto;
  padding-top: 14px;
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  margin-top: 14px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.sidebar-account-button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  text-align: left;
}

.sidebar-account-button:hover {
  border-color: rgba(51, 113, 183, 0.35);
  background: #f8fbff;
}

.sidebar-account-button.is-danger {
  color: #9f2f45;
}

.sidebar-logout-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: flex-start;
  padding: 4px 2px;
  color: #9f2f45;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.sidebar-logout-link:hover {
  color: #7f2235;
  text-decoration: underline;
}

.sidebar-legacy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: flex-start;
  width: fit-content;
  margin-top: -4px;
  padding: 0 2px;
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.sidebar-legacy-link:hover {
  color: var(--hr-primary);
  text-decoration: underline;
}

.sidebar-account-button strong,
.sidebar-account-button small {
  display: block;
}

.sidebar-account-button small {
  color: var(--hr-muted);
  font-size: 12px;
}

.avatar-sm {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: 13px;
}

.sidebar-footer-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #9f2f45;
  background: #fff0f3;
}

.sidebar.is-collapsed {
  width: 84px;
  flex-basis: 84px;
  padding: 20px 12px 16px;
}

.sidebar.is-collapsed .sidebar-brand {
  justify-content: center;
  padding-inline: 0;
}

.sidebar.is-collapsed .brand-mark-sm {
  width: 38px;
  height: 38px;
}

.sidebar.is-collapsed .sidebar-label {
  display: none;
}

.sidebar.is-collapsed .sidebar-toggle {
  color: #41516a;
}

.sidebar.is-collapsed .sidebar-link,
.sidebar.is-collapsed .sidebar-special-button,
.sidebar.is-collapsed .sidebar-account-button {
  justify-content: center;
  padding-inline: 0;
}

.sidebar.is-collapsed .sidebar-logout-link {
  justify-self: center;
  padding: 8px;
}

.sidebar.is-collapsed .sidebar-legacy-link {
  justify-self: center;
  margin-top: -8px;
  padding: 4px;
}

.sidebar.is-collapsed .sidebar-link:hover {
  transform: none;
}

.app-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.workspace {
  min-width: 0;
  max-width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: var(--hr-viewport-height, 100dvh);
}

.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 16px 24px;
  padding-top: max(16px, env(safe-area-inset-top));
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(16, 32, 63, 0.04);
  transform: translateZ(0);
}

.topbar-title {
  min-width: 0;
  flex: 1 1 340px;
}

.topbar-title h1 {
  letter-spacing: 0;
}

.topbar-subtitle {
  max-width: 760px;
  margin: 5px 0 0;
  color: var(--hr-muted);
  font-size: 14px;
  line-height: 1.4;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.topbar-actions .btn {
  white-space: nowrap;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.content-area {
  padding: 28px;
}

.section-kicker {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(51, 113, 183, 0.18);
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill-light {
  border-color: var(--hr-border);
  color: var(--hr-muted);
  background: #fff;
}

.status-pill-offline {
  border-color: #f2cf78;
  color: #8a5d13;
  background: #fff8e6;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.metric-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: 132px;
  padding: 18px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: var(--hr-surface);
  box-shadow: var(--hr-shadow-sm);
}

.metric-card span,
.metric-card p {
  color: var(--hr-muted);
}

.metric-card span {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.metric-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--hr-text);
  font-size: 28px;
  line-height: 1;
}

.metric-card p {
  margin-bottom: 0;
  font-size: 14px;
}

.metric-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  font-size: 18px;
}

.metric-card.is-blue .metric-icon {
  color: var(--hr-primary);
  background: #eef7ff;
}

.metric-card.is-green .metric-icon {
  color: var(--hr-green);
  background: #e8f8ec;
}

.metric-card.is-amber .metric-icon {
  color: var(--hr-amber);
  background: #fff3dc;
}

.metric-card.is-slate .metric-icon {
  color: #506178;
  background: #eff3f8;
}

.dashboard-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 0;
}

.dashboard-metric-grid .metric-card {
  display: grid;
  grid-template-rows: 42px minmax(0, 1fr);
  gap: 12px;
  height: 100%;
  min-height: 146px;
  padding: 18px;
  border-color: #c7d8ff;
  background: #eef7ff;
  box-shadow: var(--hr-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.dashboard-metric-grid .metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--hr-shadow-md);
}

.dashboard-metric-grid .metric-card.is-blue {
  border-color: #b7d4f4;
  background: #eaf5ff;
}

.dashboard-metric-grid .metric-card.is-green {
  border-color: #b8e4c4;
  background: #eaf9ee;
}

.dashboard-metric-grid .metric-card.is-amber {
  border-color: #f4cf8e;
  background: #fff3d8;
}

.dashboard-metric-grid .metric-card.is-slate {
  border-color: #ccd7e5;
  background: #eef3f8;
}

.dashboard-metric-grid .metric-card > div:not(.metric-icon) {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  height: 100%;
}

.dashboard-metric-grid .metric-card span {
  margin-bottom: 8px;
  color: #41516a;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.03em;
  min-height: calc(1.2em * 2);
}

.dashboard-metric-grid .metric-card strong {
  margin-bottom: 7px;
  color: var(--hr-text);
  font-size: 38px;
  line-height: 0.95;
}

.dashboard-metric-grid .metric-card p {
  color: #41516a;
  font-size: 14px;
  line-height: 1.35;
  min-height: calc(1.35em * 3);
}

.dashboard-metric-grid .metric-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  margin-bottom: 2px;
  border-radius: 50%;
  font-size: 17px;
}

.dashboard-metric-grid .metric-icon > i {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
}

.dashboard-metric-grid .metric-card.is-blue .metric-icon {
  color: var(--hr-primary-dark);
  background: #d8ebff;
}

.dashboard-metric-grid .metric-card.is-green .metric-icon {
  color: var(--hr-green);
  background: #d6f2df;
}

.dashboard-metric-grid .metric-card.is-amber .metric-icon {
  color: var(--hr-amber);
  background: #ffe5b7;
}

.dashboard-metric-grid .metric-card.is-slate .metric-icon {
  color: #506178;
  background: #dfe7f1;
}

.dashboard-notice-stack {
  display: grid;
  gap: 12px;
}

.dashboard-notice-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: var(--hr-surface);
  box-shadow: var(--hr-shadow-sm);
}

.dashboard-notice-card.is-warning {
  border-color: #f0c879;
  background: #fff7e7;
}

.dashboard-notice-card.is-danger {
  border-color: #edb7bd;
  background: #fff2f2;
}

.dashboard-notice-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 20px;
}

.dashboard-notice-card.is-warning .dashboard-notice-icon {
  color: #9b650e;
  background: #ffe8b8;
}

.dashboard-notice-card.is-danger .dashboard-notice-icon {
  color: #a3293b;
  background: #ffd9dd;
}

.dashboard-notice-content {
  min-width: 0;
}

.dashboard-notice-content h3 {
  margin: 0 0 5px;
  color: var(--hr-text);
  font-size: 18px;
  line-height: 1.25;
}

.dashboard-notice-content p {
  margin: 0;
  color: #41516a;
  font-size: 14px;
  line-height: 1.45;
}

.dashboard-notice-content small {
  display: block;
  margin-top: 7px;
  color: #41516a;
  font-weight: 700;
}

.funding-pause-notice .dashboard-notice-content {
  display: grid;
  gap: 7px;
}

.dashboard-notice-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  white-space: nowrap;
}

.dashboard-notice-feedback {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
}

.dashboard-notice-feedback.is-success {
  border: 1px solid rgba(47, 155, 78, 0.24);
  color: #236f3b;
  background: #f0fff4;
}

.dashboard-notice-feedback.is-error {
  border: 1px solid #f1c8c8;
  color: #9f2f45;
  background: #fff2f2;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
  min-width: 0;
}

.dashboard-content-grid.has-dashboard-notices {
  grid-template-areas:
    "notice side"
    "main side";
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px 24px;
}

.dashboard-content-grid.has-dashboard-notices > .dashboard-notice-stack {
  grid-area: notice;
}

.dashboard-content-grid.has-dashboard-notices > .main-content-stack {
  grid-area: main;
}

.dashboard-content-grid.has-dashboard-notices > .side-stack {
  grid-area: side;
}

.main-content-stack {
  display: grid;
  gap: 20px;
  min-width: 0;
  align-self: start;
}

.dashboard-main-stack {
  container-name: dashboard-main;
  container-type: inline-size;
  gap: 16px;
}

.panel {
  min-width: 0;
  border: 1px solid var(--hr-border);
  background: var(--hr-surface);
  box-shadow: var(--hr-shadow-sm);
}

.main-panel {
  padding: 24px;
}

.workspace-panel {
  box-shadow: var(--hr-shadow-md);
}

.license-lock-region {
  position: relative;
  min-width: 0;
}

.license-lock-region.is-license-locked > :not(.license-lock-overlay) {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.license-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 260px;
  padding: 48px 20px;
  background: rgba(248, 250, 252, 0.68);
  backdrop-filter: blur(2px);
}

.license-lock-alert {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  width: min(100%, 560px);
  padding: 18px;
  border: 1px solid #f0c7a0;
  border-radius: 8px;
  color: #684114;
  background: #fff8ec;
  box-shadow: 0 18px 42px rgba(16, 32, 63, 0.16);
}

.license-lock-alert > i {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #a05d00;
  background: #ffe7c2;
}

.license-lock-alert h3,
.license-lock-alert p {
  margin: 0;
}

.license-lock-alert h3 {
  color: #4f330f;
  font-size: 18px;
  font-weight: 800;
}

.license-lock-alert p {
  margin-top: 4px;
  line-height: 1.45;
}

.license-lock-alert .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
}

.list-content-grid,
.sales-content-grid {
  grid-template-columns: minmax(0, 1fr);
}

.shop-content-grid {
  grid-template-columns: minmax(0, 1fr);
}

.list-panel {
  overflow: hidden;
  box-shadow: var(--hr-shadow-md);
}

.list-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.list-panel-header.is-compact {
  align-items: center;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
  min-height: 0;
  padding: 10px 14px;
}

.list-panel-header.is-compact .list-panel-counts {
  margin-left: auto;
  justify-content: flex-end;
}

.list-panel-header h3 {
  letter-spacing: 0;
}

.list-panel-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.list-panel-subtitle {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--hr-muted);
  font-size: 15px;
}

.list-panel-counts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.list-reload-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  flex: 0 0 34px;
}

.list-archive-toggle-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
}

.list-reload-button .spinner-border {
  width: 14px;
  height: 14px;
}

.list-toolbar {
  display: grid;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hr-border);
  background: #f8fafc;
}

.list-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.list-search {
  position: relative;
  display: grid;
  gap: 7px;
  margin: 0;
}

.list-search span,
.filter-field label {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.list-search i {
  position: absolute;
  left: 14px;
  bottom: 13px;
  color: #7b8aa0;
  pointer-events: none;
}

.list-search .form-control {
  min-height: 46px;
  padding-left: 40px;
  background: #fff;
}

.list-filter-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
}

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

.filter-field-wide {
  grid-column: span 2;
}

.filter-field .form-select,
.filter-field .form-control {
  min-height: 42px;
  background-color: #fff;
}

.list-reset-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.list-search-row .list-reset-button {
  min-height: 46px;
}

.list-state-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 24px;
  border-bottom: 1px solid var(--hr-border);
  color: var(--hr-muted);
  background: #fff;
  font-size: 13px;
}

.list-state-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.list-state-error {
  color: #9f2f45;
}

.list-table-wrap {
  background: #fff;
}

.list-table {
  min-width: 980px;
  color: var(--hr-text);
}

.list-table thead th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hr-border);
  color: var(--hr-muted);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.list-table tbody td {
  padding: 16px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: middle;
}

.list-table tbody tr:last-child td {
  border-bottom: 0;
}

.list-table tbody tr {
  transition: background-color 0.16s ease;
}

.list-table tbody tr:hover {
  background: #f8fbff;
}

.list-table tbody tr.is-project-transfer-highlight {
  animation: project-transfer-highlight 2.45s ease-out;
}

@keyframes project-transfer-highlight {
  0%,
  18% {
    background: #fff3b8;
    box-shadow: inset 4px 0 0 #f4b400;
  }
  58% {
    background: #fff8d9;
    box-shadow: inset 4px 0 0 rgba(244, 180, 0, .48);
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 rgba(244, 180, 0, 0);
  }
}

.list-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.list-pagination-summary {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 700;
}

.list-pagination-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.list-pagination-controls .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
}

.list-page-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.list-page-size .form-select {
  width: 78px;
  min-height: 34px;
}

.list-clickable-row {
  cursor: pointer;
}

.list-clickable-row:focus-visible {
  position: relative;
  outline: 2px solid rgba(51, 113, 183, 0.55);
  outline-offset: -2px;
}

.list-clickable-row:hover .list-row-icon,
.list-clickable-row:focus-visible .list-row-icon {
  border-color: rgba(51, 113, 183, 0.3);
  background: #e4f1ff;
}

.table-sort-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: inherit;
  text-transform: inherit;
}

.table-sort-button i {
  color: #9aa8ba;
  font-size: 12px;
}

.table-sort-button.active {
  color: var(--hr-primary-dark);
}

.table-sort-button.active i {
  color: var(--hr-primary);
}

.list-title-cell {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 260px;
}

.list-row-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(51, 113, 183, 0.16);
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
}

.list-title-cell strong,
.list-cell-stack strong {
  display: block;
  color: var(--hr-text);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.list-title-cell small,
.list-cell-stack small,
.list-table td small {
  display: block;
  margin-top: 3px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.list-table .list-cell-nowrap,
.list-table .list-cell-nowrap strong {
  white-space: nowrap;
  overflow-wrap: normal;
}

.list-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #506178;
  background: #f6f8fb;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.list-status i {
  font-size: 8px;
}

.list-status.is-blue {
  border-color: #c7d8ff;
  color: var(--hr-primary-dark);
  background: #edf5ff;
}

.list-status.is-green {
  border-color: #bfe8cc;
  color: #24753c;
  background: #ecf9f0;
}

.list-status.is-amber {
  border-color: #ffd99f;
  color: #955b08;
  background: #fff7e8;
}

.list-status.is-red {
  border-color: #f4c2c2;
  color: #a53737;
  background: #fff0f0;
}

.list-status.is-slate {
  border-color: #d9e2ef;
  color: #506178;
  background: #f4f7fb;
}

.list-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.list-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.list-row-icon-action {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
}

.list-empty-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-height: 260px;
  padding: 58px 28px;
  color: var(--hr-muted);
  text-align: center;
  background: #fff;
}

.list-empty-state > i {
  width: 76px;
  height: 76px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--hr-primary);
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px #cfe0f4;
  font-size: 34px;
}

.list-empty-spinner {
  width: 3rem;
  height: 3rem;
  color: var(--hr-primary);
}

.list-empty-state h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: 0;
}

.list-empty-state p {
  max-width: 520px;
  margin: 0;
  color: #506178;
  font-size: 17px;
  line-height: 1.5;
}

.list-empty-state .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 800;
}

.upload-dropzone {
  --upload-dropzone-hover-bg: rgba(var(--hr-primary-rgb), 0.08);
  --upload-dropzone-hover-border: rgba(var(--hr-primary-rgb), 0.62);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px dashed #b9cadf;
  border-radius: 8px;
  color: var(--hr-text);
  background: #f8fafc;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.upload-dropzone.is-dragging:not(.is-disabled) {
  border-color: var(--upload-dropzone-hover-border);
  background: var(--upload-dropzone-hover-bg);
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.08);
}

.upload-dropzone.is-disabled {
  opacity: 0.72;
}

.upload-dropzone-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.upload-dropzone-icon {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 20px;
}

.upload-dropzone-copy {
  min-width: 0;
}

.upload-dropzone-copy strong,
.upload-dropzone-copy p,
.upload-dropzone-copy small {
  display: block;
  margin: 0;
}

.upload-dropzone-copy p {
  margin-top: 3px;
  color: var(--hr-muted);
}

.upload-dropzone-copy small {
  margin-top: 5px;
  color: #6d7c91;
  font-size: 12px;
}

.upload-dropzone .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.task-board-content-grid {
  grid-template-columns: minmax(0, 1fr);
}

.task-board-layout {
  min-width: 0;
}

.task-board-panel {
  overflow: hidden;
  box-shadow: var(--hr-shadow-md);
}

.task-board-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.task-board-header.is-compact {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  min-height: 0;
  padding: 10px 14px;
}

.task-board-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.task-board-title-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 8px;
  color: #fff;
  background: var(--hr-red);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.task-board-subtitle {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--hr-muted);
  font-size: 15px;
}

.task-board-counts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.task-board-header.is-compact .task-board-counts {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  justify-content: flex-start;
}

.task-board-header-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: max-content;
}

.task-board-actionbar.task-board-header-actions {
  flex-wrap: nowrap;
}

.task-board-header-actions .btn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.task-board-header-actions .icon-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
}

.task-board-toolbar {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hr-border);
  background: #f8fafc;
}

.task-board-control-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 240px) auto;
  gap: 12px;
  align-items: end;
}

.task-view-tabs {
  min-height: 42px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: stretch;
  justify-content: start;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.task-view-tabs button {
  min-width: 132px;
  padding: 9px 13px;
  border: 0;
  border-right: 1px solid var(--hr-border);
  color: #506178;
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
}

.task-view-tabs button:last-child {
  border-right: 0;
}

.task-view-tabs button:hover {
  color: var(--hr-primary-dark);
  background: #f3f8ff;
}

.task-view-tabs button.active {
  color: #fff;
  background: var(--hr-primary);
}

.task-view-tabs i {
  margin-right: 7px;
}

.kanban-board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 14px;
  padding: 18px;
  overflow-x: auto;
  background: #fff;
}

.kanban-column {
  min-width: 230px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.kanban-column.is-drop-target {
  border-color: rgba(var(--hr-primary-rgb), 0.62);
  border-style: dashed;
  background: rgba(var(--hr-primary-rgb), 0.08);
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.08);
}

.kanban-column-header {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
}

.kanban-column-header h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 15px;
  line-height: 1.2;
}

.kanban-column-header strong {
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #506178;
  background: #fff;
  font-size: 13px;
}

.kanban-column-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.kanban-column-info-button {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
  font-size: 13px;
  line-height: 1;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.kanban-column-info-button:hover,
.kanban-column-info-button:focus-visible,
.kanban-column-info-button.is-open {
  color: var(--hr-primary);
  border-color: rgba(var(--hr-primary-rgb), 0.32);
  background: #eef7ff;
}

.kanban-column-description {
  grid-column: 1 / -1;
  padding: 10px 11px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #506178;
  background: #fff;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.kanban-description-enter-active,
.kanban-description-leave-active {
  overflow: hidden;
  transition: max-height 0.18s ease, opacity 0.16s ease, transform 0.16s ease;
}

.kanban-description-enter-from,
.kanban-description-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
}

.kanban-description-enter-to,
.kanban-description-leave-from {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
}

.kanban-column-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
}

.kanban-column.is-green .kanban-column-icon {
  color: var(--hr-green);
  background: #e8f8ec;
}

.kanban-column.is-amber .kanban-column-icon {
  color: var(--hr-amber);
  background: #fff3dc;
}

.kanban-column.is-slate .kanban-column-icon {
  color: #506178;
  background: #eff3f8;
}

.kanban-card-list {
  display: grid;
  gap: 10px;
}

.kanban-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(16, 32, 63, 0.04);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background-color 0.16s ease;
}

.kanban-card:hover,
.kanban-card:focus-visible {
  border-color: #b8d4f2;
  background: #fbfdff;
  box-shadow: 0 12px 28px rgba(16, 32, 63, 0.12);
  outline: 0;
  transform: translateY(-1px);
}

.kanban-card:active {
  transform: translateY(0);
}

.kanban-card h5 {
  margin: 0;
  color: var(--hr-text);
  font-size: 15px;
  line-height: 1.25;
}

.kanban-card p {
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.35;
}

.kanban-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.kanban-card-tags span {
  padding: 4px 7px;
  border-radius: 8px;
  color: #506178;
  background: #f0f4f9;
  font-size: 11px;
  font-weight: 700;
}

.kanban-card-tags .kanban-deadline-badge.is-urgent {
  color: #9d2525;
  background: #fff2f2;
}

.kanban-card-tags .kanban-deadline-badge.is-warning {
  color: #955b08;
  background: #fffbeb;
}

.kanban-card-tags .kanban-deadline-badge.is-future {
  color: #24753c;
  background: #ecfdf5;
}

.kanban-card-meta-row {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.kanban-card-owner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.kanban-card-owner span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-owner i {
  flex: 0 0 auto;
  color: var(--hr-primary);
  font-size: 13px;
}

.kanban-card-delete-link {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  color: #9aa7b7;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.kanban-card-delete-link:hover,
.kanban-card-delete-link:focus-visible {
  color: #b02a37;
  background: #fff2f2;
  outline: 0;
}

.kanban-empty-column {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 13px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
  box-shadow: 0 1px 0 rgba(16, 32, 63, 0.04);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

.kanban-empty-column i {
  flex: 0 0 auto;
  color: var(--hr-primary);
  font-size: 18px;
}

.kanban-empty-column span {
  min-width: 0;
}

.task-board-actionbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.task-board-state {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 32px 24px;
  color: var(--hr-muted);
  background: #fff;
  text-align: center;
}

.task-board-empty {
  background: #fff;
}

.kanban-column-actions,
.kanban-card-buttons,
.task-inline-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.kanban-column-actions {
  justify-content: space-between;
}

.kanban-card-buttons {
  justify-content: flex-end;
}

.kanban-card-delete.icon-button {
  width: 31px;
  height: 31px;
  min-width: 31px;
  border-radius: 8px;
  font-size: 12px;
}

.kanban-card-delete.icon-button:hover,
.kanban-card-delete.icon-button:focus-visible {
  color: #fff;
  background: #b02a37;
  border-color: #a52834;
}

.task-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.46);
}

.task-modal-backdrop.is-above-list-manager {
  z-index: 1070;
}

.task-project-modal-backdrop {
  place-items: stretch center;
  overflow: hidden;
}

.task-small-modal,
.task-picker-modal,
.task-project-modal {
  width: min(100%, 620px);
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-lg);
}

.task-platform-modal {
  border: 1px solid var(--hr-border);
  box-shadow: var(--hr-shadow-md);
}

.task-small-modal.task-platform-modal,
.task-list-manager-modal.task-platform-modal {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.task-picker-modal.task-platform-modal:not(.task-list-manager-modal) {
  grid-template-rows: auto minmax(0, 1fr);
}

.task-project-modal.task-platform-modal {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.task-platform-header {
  background: #fff;
}

.task-platform-header .lundl-generator-title {
  align-items: flex-start;
}

.task-platform-header .lundl-generator-title > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.task-platform-header-note {
  display: block;
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-project-modal-header {
  padding: 16px 26px;
}

.task-project-modal-header .project-modal-title > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.task-picker-modal {
  width: min(100%, 820px);
}

.task-project-modal {
  width: min(100%, 1080px);
}

.task-project-modal.task-platform-modal {
  height: calc(100dvh - 36px);
  max-height: none;
}

.task-project-modal-body {
  overflow: auto;
}

.task-modal-header,
.task-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hr-border);
}

.task-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--hr-border);
  border-bottom: 0;
}

.task-modal-header h3,
.task-modal-header p {
  margin: 0;
}

.task-modal-header p,
.task-modal-kicker {
  color: var(--hr-muted);
  font-size: 13px;
}

.task-modal-kicker {
  display: inline-block;
  margin-bottom: 4px;
  font-weight: 800;
  text-transform: uppercase;
}

.task-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.task-modal-body.task-platform-form {
  padding: 20px;
}

.task-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 18px;
  align-items: stretch;
}

.task-detail-main,
.task-detail-side-card,
.task-checklist-card,
.task-activity-card,
.task-file-grid > section {
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.task-detail-main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
}

.task-description-rich-editor {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.task-description-rich-editor .html-rich-content {
  flex: 1 1 auto;
  min-height: 240px;
}

.task-description-actions {
  min-height: 38px;
  padding-bottom: 10px;
}

.task-detail-side {
  display: grid;
  gap: 12px;
}

.task-detail-side-card {
  display: grid;
  gap: 12px;
}

.task-detail-deadline-form {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.task-deadline-note-field {
  min-height: 90px;
  resize: vertical;
}

.task-deadline-note-field.is-dirty {
  border-color: rgba(var(--hr-primary-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.1);
}

.task-deadline-save-state {
  min-height: 18px;
  margin-top: -4px;
}

.task-deadline-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.task-detail-customer-card .project-overview-card-head > i {
  font-size: 25px;
}

.task-file-grid h4 {
  margin: 0;
  font-size: 16px;
}

.task-checklist-area,
.task-activity-area,
.task-files-area {
  display: grid;
  gap: 14px;
}

.task-create-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.task-create-row.is-top {
  align-items: stretch;
}

.task-create-row.is-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.task-checklist-intro {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #d7e6f6;
  border-radius: 8px;
  color: #506178;
  background: #f7fbff;
}

.task-checklist-intro-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--hr-primary);
  font-size: 14px;
}

.task-checklist-intro > div > strong,
.task-checklist-intro > div > span {
  display: block;
}

.task-checklist-intro > div > strong {
  color: var(--hr-text);
  font-size: 15px;
  line-height: 1.35;
}

.task-checklist-intro > div > span {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
}

.task-checklist-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.task-checklist-action-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 112px;
  padding: 18px;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fff;
}

.task-checklist-action-icon {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 20px;
}

.task-checklist-action-body {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.task-checklist-action-body strong {
  color: var(--hr-primary);
  font-size: 15px;
  line-height: 1.3;
}

.task-checklist-action-body > span {
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.35;
}

.task-checklist-action-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.task-checklist-muted-note {
  margin-top: 8px;
  color: var(--hr-muted);
  font-size: 13px;
}

.task-checklist-library {
  overflow: hidden;
  border: 1px solid #dfe8f3;
  border-radius: 8px;
  background: #fff;
}

.task-checklist-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid #e4edf6;
}

.task-checklist-library-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.task-checklist-library-title h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 16px;
  line-height: 1.25;
}

.task-checklist-library-title span {
  min-width: 28px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: #506178;
  background: #edf3f9;
  font-size: 13px;
  font-weight: 800;
}

.task-checklist-library-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 180px;
}

.task-checklist-library-controls .form-select {
  width: 180px;
}

.task-checklist-library-list {
  display: grid;
}

.task-checklist-card {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.task-checklist-card + .task-checklist-card {
  border-top: 1px solid #e4edf6;
}

.task-checklist-card.is-collapsed .task-checklist-card-head {
  padding-bottom: 18px;
}

.task-checklist-card-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(190px, 280px) 50px auto;
  gap: 12px;
  align-items: center;
  padding: 18px;
}

.task-checklist-card-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfead9;
  border-radius: 8px;
  color: var(--hr-green);
  background: #ecf9f0;
  font-size: 20px;
}

.task-checklist-title {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.task-checklist-title strong {
  min-width: 0;
  color: var(--hr-text);
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.task-checklist-title > span {
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.35;
}

.task-checklist-name-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.task-checklist-name-line i {
  color: #f0b429;
  font-size: 14px;
}

.task-checklist-inline-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-start;
}

.task-progress-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.task-progress-label {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

.task-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.task-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--hr-green);
}

.task-checklist-progress-summary {
  display: grid;
  gap: 8px;
  color: #65758b;
  font-size: 13px;
  font-weight: 700;
}

.task-checklist-progress-value {
  color: #506178;
  font-size: 14px;
  text-align: right;
}

.task-checklist-card-actions {
  display: inline-flex;
  justify-content: flex-end;
  gap: 4px;
}

.task-checklist-card-actions .icon-button {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 7px;
  font-size: 12px;
}

.task-checklist-card-actions .btn-warning.icon-button {
  color: #9a6a00;
  background: #fff7db;
  border-color: #f3d37a;
}

.task-checklist-collapse-button i {
  font-size: 11px;
}

.task-checklist-items {
  display: grid;
}

.task-checklist-collapse-enter-active,
.task-checklist-collapse-leave-active {
  overflow: hidden;
  transition: max-height 0.18s ease, opacity 0.16s ease;
}

.task-checklist-collapse-enter-from,
.task-checklist-collapse-leave-to {
  max-height: 0;
  opacity: 0;
}

.task-checklist-collapse-enter-to,
.task-checklist-collapse-leave-from {
  max-height: 520px;
  opacity: 1;
}

.task-check-list {
  display: grid;
  gap: 0;
  margin: 0 18px 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e4edf6;
  border-radius: 8px;
  background: #fff;
}

.task-check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.task-check-row + .task-check-row {
  border-top: 1px solid #e4edf6;
}

.task-check-row:not(.is-editing) {
  cursor: pointer;
}

.task-check-row:not(.is-editing):hover {
  background: #f8fafc;
}

.task-check-row.is-checked {
  background: #fff;
  box-shadow: none;
}

.task-check-row.is-checked:not(.is-editing):hover {
  background: #f8fafc;
}

.task-check-row.is-editing {
  grid-template-columns: auto minmax(0, 1fr);
}

.task-check-row.is-checked .task-check-toggle > span {
  color: #7b8798;
  text-decoration: line-through;
}

.task-check-row .form-check-input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-color: #cbd7e6;
  border-radius: 5px;
  box-shadow: none;
}

.task-check-row .form-check-input:checked {
  border-color: var(--hr-green);
  background-color: var(--hr-green);
}

.task-check-row .form-check-input:focus {
  border-color: rgba(var(--hr-primary-rgb), 0.45);
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.14);
}

.task-check-toggle {
  display: grid;
  grid-column: 1 / 3;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  margin: 0;
  cursor: pointer;
}

.task-check-toggle input {
  margin-top: 0;
}

.task-check-row.is-editing .task-check-toggle {
  grid-column: 1;
  grid-template-columns: auto;
}

.task-check-row.is-editing .task-check-content {
  grid-column: 2;
}

.task-check-content {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.task-check-toggle > span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--hr-text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.task-check-actions,
.task-check-edit-actions {
  display: inline-flex;
  gap: 6px;
  justify-content: flex-end;
}

.task-check-actions {
  gap: 4px;
}

.task-check-actions .icon-button {
  width: 30px;
  height: 30px;
  font-size: 12px;
}

.task-check-edit-actions {
  justify-content: flex-start;
}

.task-check-add-row {
  padding: 0 18px 18px;
}

.task-checklist-empty-row {
  margin: 16px;
}

.task-activity-composer {
  padding-bottom: 4px;
  border-bottom: 1px solid #e6eef7;
}

.task-activity-composer .form-control {
  min-height: 104px;
  resize: vertical;
}

.task-activity-send-button {
  align-self: end;
  min-height: 46px;
}

.task-activity-timeline {
  position: relative;
  display: grid;
  gap: 14px;
  padding-left: 52px;
}

.task-activity-timeline::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  border-radius: 999px;
  background: #dce8f5;
}

.task-activity-entry {
  position: relative;
}

.task-activity-rail-dot {
  position: absolute;
  top: 16px;
  left: -51px;
  z-index: 1;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--hr-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--hr-primary-rgb), 0.22);
  font-size: 14px;
}

.task-activity-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-color: #dce6f1;
  box-shadow: 0 8px 20px rgba(16, 32, 63, 0.04);
}

.task-activity-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.task-activity-avatar {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: #eaf3ff;
  color: var(--hr-primary);
  font-size: 13px;
  font-weight: 800;
}

.task-activity-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-activity-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.task-activity-meta strong {
  overflow: hidden;
  color: var(--hr-text);
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-activity-meta small {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  color: var(--hr-muted);
  font-size: 12px;
}

.task-activity-edited-label {
  color: #6d7c91;
}

.task-activity-text {
  margin: 0;
  color: #1c2f4d;
  line-height: 1.55;
  white-space: pre-wrap;
}

.task-activity-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid #edf2f7;
}

.task-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-file-row span {
  color: var(--hr-muted);
  font-size: 12px;
}

.task-file-upload {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.task-file-grid > section {
  display: grid;
  align-content: start;
  gap: 10px;
}

.task-files-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.task-files-header h3,
.task-files-header p {
  margin: 0;
}

.task-files-header h3 {
  color: var(--hr-text);
  font-size: 18px;
}

.task-files-header p {
  margin-top: 4px;
  color: var(--hr-muted);
  font-size: 13px;
}

.task-file-subtabs {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  overflow-x: visible;
}

.task-project-file-list {
  padding: 0;
}

.task-project-file-item {
  background: #fff;
}

.task-files-loading,
.task-files-empty {
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.task-file-row {
  padding: 10px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #fbfdff;
}

.task-file-row > i {
  color: var(--hr-red);
  font-size: 20px;
}

.task-file-row > div {
  min-width: 0;
  flex: 1;
}

.task-file-row strong,
.task-file-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-picker-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.task-platform-table-wrap {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.task-platform-table {
  width: 100%;
  min-width: 760px;
}

.task-list-manager-table {
  min-width: 0;
  table-layout: fixed;
}

.task-list-manager-list-col {
  width: 56%;
}

.task-list-manager-count-col {
  width: 14%;
}

.task-list-manager-actions-col {
  width: 30%;
}

.task-platform-table tbody td {
  vertical-align: middle;
}

.task-platform-main-cell strong,
.task-platform-main-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-platform-main-cell small {
  margin-top: 3px;
  color: var(--hr-muted);
  font-size: 12px;
}

.task-list-manager-table .task-platform-main-cell small {
  overflow: visible;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.task-platform-actions-heading,
.task-platform-table th:last-child,
.task-platform-table td:last-child {
  text-align: right;
}

.task-platform-table td:last-child {
  white-space: nowrap;
}

.task-platform-table .task-list-manager-actions {
  justify-content: flex-end;
}

.task-list-manager-table .task-list-manager-actions {
  flex-wrap: wrap;
}

.task-project-picker-list,
.task-reorder-list {
  display: grid;
  gap: 10px;
}

.task-project-picker-card,
.task-reorder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.task-project-picker-card > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.task-project-picker-card span,
.task-project-picker-card small {
  overflow: hidden;
  color: var(--hr-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-reorder-row > div {
  display: flex;
  gap: 8px;
}

.task-list-manager-modal {
  width: min(100%, 880px);
}

.task-list-manager-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.task-list-manager-list {
  display: grid;
  gap: 10px;
}

.task-list-manager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.task-list-manager-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.task-list-manager-main strong,
.task-list-manager-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-list-manager-main span {
  color: var(--hr-muted);
  font-size: 13px;
}

.task-list-manager-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-content-grid,
.settings-content-grid {
  grid-template-columns: minmax(0, 1fr);
}

.settings-layout {
  min-width: 0;
}

.settings-panel {
  overflow: hidden;
  box-shadow: var(--hr-shadow-md);
}

.settings-tabbar {
  display: flex;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--hr-border);
  background: #f8fafc;
}

.settings-tab-button {
  min-width: 148px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: 0;
  border-right: 1px solid var(--hr-border);
  color: #506178;
  background: transparent;
  font-weight: 800;
  white-space: nowrap;
}

.settings-tab-button:hover {
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.settings-tab-button.active {
  color: #fff;
  background: var(--hr-primary);
}

.settings-tabbar.is-compact {
  overflow-x: visible;
}

.settings-tabbar.is-compact .settings-tab-button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  line-height: 1.1;
}

.settings-tabbar.is-compact .settings-tab-button span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-tabbar.is-compact .settings-tab-button:last-child {
  border-right: 0;
}

.settings-body {
  display: grid;
  gap: 18px;
  padding: 22px 24px 24px;
  background: #fff;
}

.settings-tab-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hr-border);
}

.settings-tab-header p {
  max-width: 780px;
  margin: 8px 0 0;
  color: var(--hr-muted);
}

.settings-tab-icon,
.settings-integration-icon,
.settings-logo-preview {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 20px;
}

.settings-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.settings-section-stack {
  display: grid;
  gap: 16px;
}

.settings-integration-subtabs {
  gap: 8px;
  padding: 0 0 2px;
}

.settings-integration-subtabs button {
  min-height: 42px;
  padding: 0 14px;
}

.settings-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-summary-item,
.settings-section {
  min-width: 0;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfcfe;
}

.settings-summary-item {
  display: grid;
  gap: 3px;
  padding: 16px;
}

.settings-summary-item span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-summary-item strong {
  color: var(--hr-text);
  overflow-wrap: anywhere;
}

.settings-summary-item small {
  color: var(--hr-muted);
  overflow-wrap: anywhere;
}

.settings-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.settings-section {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.settings-section h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 18px;
  line-height: 1.25;
}

.settings-section p {
  margin: 0;
  color: var(--hr-muted);
}

.settings-section-head,
.settings-action-row,
.settings-branding-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.settings-branding-hero {
  align-items: center;
}

.settings-branding-switch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: min(100%, 320px);
  margin: 0;
  padding-left: 0;
  color: var(--hr-text);
  font-weight: 700;
  cursor: pointer;
}

.settings-branding-switch span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-branding-switch .form-check-input {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}

.settings-branding-collapse {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -16px;
  opacity: 0;
  pointer-events: none;
  transition: grid-template-rows 0.24s ease, margin-top 0.24s ease, opacity 0.2s ease;
}

.settings-branding-collapse.is-open {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
  pointer-events: auto;
}

.settings-branding-collapse-inner {
  display: grid;
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.settings-section-head .btn,
.settings-action-row .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

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

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

.settings-toggle-row,
.settings-permission-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
}

.settings-toggle-row span,
.settings-permission-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-toggle-row strong,
.settings-toggle-row small {
  display: block;
}

.settings-toggle-row small {
  margin-top: 4px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.3;
}

.settings-toggle-row .form-check-input,
.settings-permission-item .form-check-input,
.settings-switch .form-check-input {
  flex: 0 0 auto;
  margin: 0;
}

.settings-danger-section {
  align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: #f1c8c8;
  background: #fff7f7;
}

.settings-action-row > div:last-child {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.settings-action-row.compact {
  align-items: center;
  padding-top: 4px;
}

.settings-table-section {
  padding: 0;
  overflow: visible;
  background: #fff;
}

.settings-table-section .table-responsive {
  overflow: visible;
}

.settings-user-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.settings-user-table-status-col {
  width: 150px;
}

.settings-user-table-action-col {
  width: 72px;
}

.settings-user-actions {
  display: inline-flex;
  justify-content: flex-end;
}

.settings-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.settings-user-cell strong,
.settings-user-cell small {
  display: block;
  overflow-wrap: anywhere;
}

.settings-user-cell small {
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 12px;
}

.settings-user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  color: var(--hr-muted);
  font-size: 12px;
  line-height: 1.35;
}

.settings-user-meta-item {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-user-meta-item span {
  margin-right: 4px;
  color: #708197;
  font-weight: 800;
}

.settings-user-permissions {
  max-width: 100%;
}

.settings-user-menu-toggle {
  color: var(--hr-muted);
  background: #fff;
}

.settings-user-menu-toggle:hover,
.settings-user-menu-toggle:focus-visible,
.settings-user-menu-toggle.show {
  border-color: rgba(51, 113, 183, 0.28);
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.settings-user-action-menu {
  min-width: 196px;
  padding: 4px;
  border-color: var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(31, 45, 61, 0.12);
}

.settings-user-action-menu .dropdown-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 650;
  white-space: normal;
}

.settings-user-action-menu .dropdown-item i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  color: var(--hr-primary);
  background: #eef7ff;
  text-align: center;
}

.settings-user-action-menu .dropdown-item .spinner-border {
  width: 16px;
  height: 16px;
  border-width: 2px;
  justify-self: center;
}

.settings-user-action-menu .dropdown-item > span:not(.spinner-border) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-user-action-menu .dropdown-item:hover,
.settings-user-action-menu .dropdown-item:focus,
.settings-user-action-menu .dropdown-item:active {
  color: var(--hr-primary-dark);
  background: #f4f8fc;
}

.settings-user-action-menu .dropdown-item:hover i,
.settings-user-action-menu .dropdown-item:focus i,
.settings-user-action-menu .dropdown-item:active i {
  color: #fff;
  background: var(--hr-primary);
}

.settings-user-action-menu .dropdown-item:disabled {
  color: #8b9bb0;
  background: transparent;
  opacity: 1;
}

.settings-user-action-menu .dropdown-item:disabled i {
  color: #8b9bb0;
  background: #f2f5f8;
}

.settings-table-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  color: var(--hr-muted);
  font-weight: 700;
}

.settings-inline-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.35;
}

.settings-inline-alert.is-info {
  border: 1px solid rgba(51, 113, 183, 0.2);
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.settings-inline-alert.is-success {
  border: 1px solid rgba(47, 155, 78, 0.24);
  color: #236f3b;
  background: #f0fff4;
}

.settings-inline-alert.is-primary {
  border: 1px solid rgba(var(--hr-primary-rgb), 0.28);
  color: var(--hr-primary-dark);
  background: rgba(var(--hr-primary-rgb), 0.08);
}

.settings-inline-alert.is-error {
  border: 1px solid #f1c8c8;
  color: #9f2f45;
  background: #fff2f2;
}

.status-pill.is-success {
  border-color: rgba(47, 155, 78, 0.28);
  color: #236f3b;
  background: #f0fff4;
}

.status-pill.is-danger {
  border-color: rgba(159, 47, 69, 0.24);
  color: #9f2f45;
  background: #fff2f2;
}

.status-pill.is-warning {
  border-color: rgba(188, 118, 20, 0.28);
  color: #96610e;
  background: #fff8e8;
}

.sidebar-account-button.active {
  border-color: rgba(51, 113, 183, 0.22);
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.account-profile-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.44fr) minmax(440px, 1fr);
  gap: 16px;
  align-items: stretch;
}

.account-avatar-section {
  align-content: start;
}

.account-avatar-head {
  align-items: flex-start;
}

.account-avatar-preview {
  width: 180px;
  height: 180px;
  display: grid;
  place-items: center;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(51, 113, 183, 0.18);
  border-radius: 50%;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 42px;
  font-weight: 900;
}

.account-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar-section .upload-dropzone {
  width: 100%;
  min-height: 168px;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
}

.account-avatar-section .upload-dropzone-icon {
  width: 52px;
  height: 52px;
}

.account-avatar-section .upload-dropzone-copy {
  max-width: 260px;
}

.account-avatar-section .upload-dropzone .btn {
  width: min(100%, 190px);
  justify-content: center;
}

.account-avatar-actions,
.account-security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-avatar-actions .btn,
.account-security-actions .btn,
.account-storage-hero .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.account-avatar-cropper-shell {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: auto;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(8px);
}

.account-avatar-cropper-modal {
  width: min(760px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.account-avatar-cropper-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--hr-border);
}

.account-avatar-cropper-header h2 {
  margin: 0;
  color: var(--hr-text);
  font-size: 24px;
  line-height: 1.2;
}

.account-avatar-cropper-body {
  display: grid;
  gap: 18px;
  min-height: 0;
  padding: 22px;
  overflow: auto;
}

.account-avatar-cropper-layout {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(210px, 0.58fr);
  gap: 22px;
  align-items: center;
}

.account-avatar-crop-stage {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f7fafc;
}

.account-avatar-crop-frame {
  position: relative;
  width: min(300px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(var(--hr-primary-rgb), 0.58);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(var(--hr-primary-rgb), 0.16);
  cursor: grab;
  touch-action: none;
}

.account-avatar-crop-frame.is-dragging {
  border-color: var(--hr-primary);
  cursor: grabbing;
}

.account-avatar-crop-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52);
  pointer-events: none;
}

.account-avatar-crop-frame img,
.account-avatar-crop-preview-avatar img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  max-height: none;
  user-select: none;
  pointer-events: none;
}

.account-avatar-crop-controls {
  display: grid;
  gap: 18px;
  align-content: center;
}

.account-avatar-crop-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.account-avatar-crop-preview-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 999px;
  background: #fff;
}

.account-avatar-crop-controls .btn,
.account-avatar-cropper-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.account-avatar-cropper-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 767.98px) {
  .account-avatar-cropper-shell {
    padding: 10px;
  }

  .account-avatar-cropper-modal {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
  }

  .account-avatar-cropper-header,
  .account-avatar-cropper-body {
    padding-inline: 16px;
  }

  .account-avatar-cropper-layout {
    grid-template-columns: 1fr;
  }

  .account-avatar-crop-stage {
    min-height: 280px;
    padding: 16px;
  }

  .account-avatar-crop-frame {
    width: min(260px, 100%);
  }

  .account-avatar-cropper-actions {
    flex-direction: column-reverse;
  }

  .account-avatar-cropper-actions .btn {
    width: 100%;
  }
}

.account-profile-form-section {
  align-content: start;
  background: #fff;
}

.account-profile-form-head {
  align-items: center;
}

.account-profile-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-profile-field {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #fbfdff;
}

.account-profile-field-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px #d6e7f7;
  font-size: 18px;
}

.account-profile-field-main {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.account-profile-label {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.account-profile-field .form-control {
  min-height: 44px;
  background: #fff;
}

.account-two-factor-section {
  border-color: rgba(51, 113, 183, 0.2);
  background: #f8fbff;
}

.account-two-factor-modal-backdrop {
  z-index: 2080;
}

.account-two-factor-modal {
  width: min(100%, 620px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.account-two-factor-modal-header {
  background: #f8fbff;
}

.account-two-factor-modal-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.account-two-factor-modal-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(51, 113, 183, 0.22);
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 19px;
}

.account-two-factor-modal-icon.is-danger {
  border-color: rgba(217, 74, 95, 0.22);
  color: #9f2f45;
  background: #fff2f2;
}

.account-two-factor-modal-body {
  gap: 18px;
}

.account-two-factor-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.account-two-factor-stepper span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.account-two-factor-stepper span.is-active {
  border-color: rgba(var(--hr-primary-rgb), 0.38);
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.account-two-factor-stepper span.is-complete {
  border-color: rgba(31, 157, 102, 0.34);
  color: #17784d;
  background: #edf9f3;
}

.account-two-factor-scan-step,
.account-two-factor-verify-step {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.account-two-factor-scan-step h3,
.account-two-factor-verify-step h3,
.account-two-factor-scan-step p,
.account-two-factor-verify-step p {
  margin: 0;
}

.account-two-factor-scan-step h3,
.account-two-factor-verify-step h3 {
  font-size: 20px;
}

.account-two-factor-scan-step p,
.account-two-factor-verify-step p {
  max-width: 460px;
  color: var(--hr-muted);
  font-size: 14px;
  line-height: 1.5;
}

.account-two-factor-qr-frame {
  display: inline-grid;
  place-items: center;
  padding: 14px;
  border: 1px solid rgba(51, 113, 183, 0.2);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(31, 45, 61, 0.08);
}

.account-two-factor-qr-frame .account-two-factor-qr {
  width: 230px;
  height: 230px;
}

.account-two-factor-helper {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f6f8fb;
}

.account-two-factor-verify-step .account-two-factor-code-field {
  width: min(100%, 390px);
  text-align: left;
}

.account-two-factor-verify-step .account-two-factor-trust {
  justify-self: center;
}

.account-two-factor-danger-note {
  width: min(100%, 420px);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(217, 74, 95, 0.22);
  border-radius: 8px;
  color: #7f2435;
  background: #fff7f7;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: left;
}

.account-two-factor-danger-note i {
  margin-top: 2px;
}

.account-two-factor-danger-note.is-neutral {
  border-color: rgba(51, 113, 183, 0.2);
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.account-two-factor-backup-step .filter-field {
  width: min(100%, 390px);
  text-align: left;
}

.account-two-factor-modal-footer {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.account-two-factor-setup {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(51, 113, 183, 0.2);
  border-radius: 8px;
  background: #fff;
}

.account-two-factor-qr {
  width: 140px;
  height: 140px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #fff;
}

.account-two-factor-form {
  display: grid;
  gap: 10px;
}

.account-two-factor-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: var(--hr-text);
  font-weight: 700;
}

.account-two-factor-error {
  color: #9f2f45;
  font-size: 13px;
  font-weight: 700;
}

.account-device-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.account-device-card,
.account-project-row,
.account-billing-card,
.account-storage-option {
  min-width: 0;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #fff;
}

.account-device-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px;
  position: relative;
}

.account-device-card.current {
  border-color: rgba(47, 155, 78, 0.32);
  background: #f6fff8;
}

.account-device-card .status-pill,
.account-device-card .btn {
  grid-column: 2;
  justify-self: flex-start;
}

.account-device-main {
  min-width: 0;
}

.account-device-browser {
  color: #53677f;
  font-weight: 700;
}

.account-device-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin-top: 11px;
}

.account-device-details span {
  min-width: 0;
  color: var(--hr-muted);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.account-device-details b {
  display: block;
  margin-bottom: 2px;
  color: #6d7f95;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.account-device-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.account-device-badges .status-pill {
  margin: 0;
}

.account-device-logout {
  gap: 7px;
  margin-top: 2px;
}

.account-device-icon,
.account-billing-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 18px;
}

.account-device-card strong,
.account-project-row strong,
.account-billing-card strong,
.account-storage-option strong {
  display: block;
  color: var(--hr-text);
  overflow-wrap: anywhere;
}

.account-device-card small,
.account-project-row small,
.account-billing-card small,
.account-storage-option small {
  display: block;
  margin-top: 3px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.account-billing-card,
.account-project-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.account-storage-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: #f8fbff;
}

.account-storage-meter {
  grid-column: 1 / -1;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7edf5;
}

.account-storage-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3371b7, #2f9b4e);
}

.account-storage-options,
.account-project-list {
  display: grid;
  gap: 10px;
}

.account-storage-option {
  padding: 13px 14px;
}

.account-storage-option.active {
  border-color: rgba(51, 113, 183, 0.32);
  background: #eef7ff;
}

.account-empty-state {
  justify-items: center;
  text-align: center;
}

.account-empty-state > i {
  color: var(--hr-primary);
  font-size: 42px;
}

.billing-invoice-number {
  display: inline-flex;
  max-width: 170px;
  overflow: hidden;
  color: var(--hr-primary-dark);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.billing-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #506178;
  background: #eef2f7;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.billing-status-pill.is-paid {
  color: #236f3b;
  background: #e9f8ee;
}

.billing-status-pill.is-open {
  color: #9a6115;
  background: #fff4df;
}

.billing-pdf-action {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: #b82e37;
  background: #fff2f2;
  text-decoration: none;
}

button.billing-pdf-action {
  padding: 0;
}

.billing-pdf-action:not(.is-disabled):hover,
.billing-pdf-action:not(.is-disabled):focus-visible {
  color: #9e2330;
  background: #ffe3e5;
}

.billing-pdf-action.is-disabled {
  color: #9aa8ba;
  background: #f2f5f9;
  cursor: not-allowed;
}

.business-onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #fff;
  overflow-y: auto;
}

.business-onboarding-shell {
  width: min(100%, 720px);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-md);
}

.business-onboarding-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 18px;
}

.business-onboarding-brand {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.business-onboarding-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 22px;
}

.business-onboarding-header h2,
.business-onboarding-header p {
  margin: 0;
}

.business-onboarding-header h2 {
  color: var(--hr-text);
  font-size: 26px;
  line-height: 1.15;
}

.business-onboarding-header p:last-child {
  max-width: 520px;
  margin-top: 7px;
  color: var(--hr-muted);
  font-size: 14px;
  line-height: 1.45;
}

.business-onboarding-progress {
  height: 4px;
  background: #edf3f9;
}

.business-onboarding-progress span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--hr-primary);
  transition: width 0.18s ease;
}

.business-onboarding-body {
  display: grid;
  gap: 16px;
  min-height: 0;
  padding: 22px 24px 24px;
  overflow-y: auto;
}

.business-onboarding-step {
  min-width: 0;
}

.business-onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 24px;
  border-top: 1px solid var(--hr-border);
  background: #fbfcfe;
}

.business-onboarding-dots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.business-onboarding-dots span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #c7d4e4;
}

.business-onboarding-dots span.done,
.business-onboarding-dots span.active {
  background: var(--hr-primary);
}

.business-onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.business-onboarding-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
}

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

.settings-permission-item {
  align-items: flex-start;
}

.settings-permission-item strong,
.settings-permission-item small {
  display: block;
}

.settings-permission-item small {
  margin-top: 3px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.35;
}

.settings-user-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2050;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 32, 63, 0.42);
}

.settings-user-modal {
  width: min(100%, 640px);
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-md);
}

.project-start-modal {
  width: min(100%, 760px);
}

.project-start-modal-header {
  align-items: center;
  background: #f8fbff;
}

.project-start-modal-title {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.project-start-modal-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(51, 113, 183, 0.22);
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 18px;
}

.settings-user-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hr-border);
}

.settings-user-modal-header h2,
.settings-user-modal-header p {
  margin: 0;
}

.settings-user-modal-header h2 {
  font-size: 22px;
  line-height: 1.2;
}

.settings-user-modal-header p:last-child {
  margin-top: 6px;
  color: var(--hr-muted);
  font-size: 14px;
}

.settings-user-modal-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
}

.settings-user-modal-close:hover,
.settings-user-modal-close:focus-visible {
  color: var(--hr-text);
  border-color: #c5d4e7;
  background: #f6f8fb;
}

.settings-user-modal-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 18px 20px 20px;
  overflow: auto;
}

.project-start-form {
  gap: 20px;
  padding: 20px;
}

.project-start-section {
  display: grid;
  gap: 12px;
  padding: 0;
}

.project-start-section + .project-start-section {
  padding-top: 2px;
}

.project-start-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4ebf4;
}

.project-start-section-head h3 {
  margin: 0;
}

.project-start-section-head h3 {
  color: var(--hr-text);
  font-size: 16px;
  line-height: 1.25;
}

.project-start-section-head span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-start-required-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-start-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.project-start-grid .filter-field {
  min-width: 0;
}

.project-start-grid .filter-field {
  grid-column: span 3;
}

.project-start-form .filter-field.is-invalid .form-control {
  border-color: #d94c5f;
  box-shadow: 0 0 0 0.18rem rgba(217, 76, 95, 0.12);
}

.project-start-field-error {
  margin-top: 5px;
  color: #9f2f45;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.project-start-grid .project-start-grid-wide {
  grid-column: span 5;
}

.project-start-grid .project-start-grid-small {
  grid-column: span 1;
}

.project-start-grid .project-start-grid-city {
  grid-column: span 5;
}

.project-start-grid .project-start-grid-full {
  grid-column: 1 / -1;
}

.settings-user-rights {
  display: grid;
  gap: 10px;
}

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

.settings-user-rights-head h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}

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

.settings-user-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #fbfcfe;
}

.settings-user-right strong,
.settings-user-right small {
  display: block;
  overflow-wrap: anywhere;
}

.settings-user-right small {
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 12px;
  line-height: 1.3;
}

.settings-user-right .form-check-input {
  margin: 0;
}

.settings-user-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.settings-user-modal-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.settings-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
  white-space: nowrap;
}

.settings-brand-preview {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #fff;
}

.settings-brand-preview strong,
.settings-brand-preview small {
  display: block;
}

.settings-brand-preview small {
  color: var(--hr-muted);
}

.settings-brand-preview + .upload-dropzone,
.settings-color-grid {
  margin-top: 12px;
}

.settings-color-grid,
.settings-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-color-grid label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #fff;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.settings-color-grid .form-control-color {
  width: 54px;
  min-height: 38px;
  padding: 4px;
}

.settings-help-text {
  font-size: 13px;
}

.settings-upload-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.settings-upload-tile {
  display: grid;
  align-content: start;
  align-items: start;
  justify-items: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px dashed #cfd9e6;
  border-radius: 8px;
  background: #fff;
}

.settings-upload-tile-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.settings-upload-tile-head > i,
.settings-upload-tile > i {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #9f2f45;
  background: #fff0f3;
}

.settings-upload-tile strong,
.settings-upload-tile small {
  display: block;
  overflow-wrap: anywhere;
}

.settings-upload-tile small {
  color: var(--hr-muted);
}

.settings-upload-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.settings-upload-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.settings-upload-tile .upload-dropzone {
  grid-template-columns: 38px minmax(0, 1fr);
  align-self: start;
  width: 100%;
  padding: 12px;
}

.settings-upload-tile .upload-dropzone-icon {
  width: 38px;
  height: 38px;
  font-size: 16px;
}

.settings-upload-tile .upload-dropzone .btn {
  grid-column: 1 / -1;
  justify-content: center;
  width: 100%;
}

.settings-branding-pdf-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  background: #f6f8fb;
}

.settings-branding-pdf-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.settings-branding-pdf-preview img.is-loaded {
  opacity: 1;
}

.settings-branding-pdf-spinner,
.settings-branding-pdf-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--hr-muted);
}

.settings-branding-pdf-fallback {
  gap: 6px;
  align-content: center;
  text-align: center;
}

.settings-branding-pdf-fallback i {
  color: #9f2f45;
  font-size: 24px;
}

.settings-inline-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hr-muted);
  font-weight: 700;
}

.settings-map-toggle {
  padding-left: 0;
}

.settings-branding-map-card {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #d8e3f0;
  border-radius: 8px;
  background: #f8fafc;
}

.settings-branding-map {
  width: 100%;
  min-height: 300px;
}

.settings-branding-map-popup {
  display: grid;
  gap: 6px;
  min-width: 180px;
}

.settings-branding-map-popup strong,
.settings-branding-map-popup span,
.settings-branding-map-popup a,
.settings-branding-map-popup small {
  overflow-wrap: anywhere;
}

.settings-branding-map-logo {
  max-width: 90px;
  max-height: 54px;
  object-fit: contain;
}

.settings-branding-map-hint {
  color: var(--hr-muted);
}

.settings-integration-section {
  gap: 16px;
}

.settings-integration-info {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.settings-integration-info p {
  margin-top: 4px;
}

.settings-code-block {
  max-width: 100%;
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  border: 1px solid #d7e0ec;
  border-radius: 8px;
  color: #dbeafe;
  background: #152033;
  font-size: 13px;
  line-height: 1.55;
}

.settings-code-block code {
  color: inherit;
  white-space: pre;
}

.settings-note-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: var(--hr-muted);
}

.support-layout {
  display: grid;
  gap: 18px;
}

.support-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  align-items: center;
  justify-content: start;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.support-tabs button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--hr-muted);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.support-tabs button:hover,
.support-tabs button:focus-visible,
.support-tabs button.active {
  color: var(--hr-primary);
  border-color: rgba(51, 113, 183, 0.22);
  background: #eef7ff;
  outline: 0;
}

.support-tab-badge {
  min-width: 24px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  background: var(--hr-primary);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
}

.support-tabs button.active .support-tab-badge {
  background: var(--hr-green);
}

.support-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
}

.support-knowledge-hero {
  align-items: stretch;
  padding: 28px;
  border-color: rgba(51, 113, 183, 0.18);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 62%, #eef7ff 100%);
}

.support-intro h3,
.support-contact-panel h3 {
  margin-bottom: 8px;
}

.support-knowledge-hero h3 {
  max-width: 680px;
  font-size: 24px;
  line-height: 1.24;
}

.support-intro p,
.support-contact-panel p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--hr-muted);
}

.support-intro-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 24px;
}

.support-knowledge-hero .support-intro-icon {
  width: 66px;
  height: 66px;
  flex-basis: 66px;
  align-self: center;
  color: #fff;
  background: var(--hr-primary);
  box-shadow: 0 14px 30px rgba(51, 113, 183, 0.22);
}

.support-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 190px;
  align-items: stretch;
  gap: 12px;
}

.support-category-card {
  --support-category-color: var(--hr-primary);
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: stretch;
  justify-items: start;
  gap: 10px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--support-category-color) 42%, var(--hr-border));
  border-radius: 8px;
  color: var(--hr-text);
  background: color-mix(in srgb, var(--support-category-color) 6%, #fff);
  text-align: left;
  box-shadow: var(--hr-shadow-sm);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.support-category-card:hover,
.support-category-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--support-category-color) 58%, var(--hr-border));
  background: color-mix(in srgb, var(--support-category-color) 9%, #fff);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--support-category-color) 18%, transparent);
  outline: 0;
}

.support-category-card.active {
  border-color: color-mix(in srgb, var(--support-category-color) 56%, var(--hr-border));
  background: color-mix(in srgb, var(--support-category-color) 10%, #fff);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--support-category-color) 16%, transparent);
}

.support-category-icon {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--support-category-color);
  background: color-mix(in srgb, var(--support-category-color) 12%, #fff);
  font-size: 24px;
}

.support-category-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--hr-muted);
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.support-category-count {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 24px;
  min-height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--support-category-color);
  background: color-mix(in srgb, var(--support-category-color) 10%, #fff);
  font-size: 12px;
  font-weight: 800;
}

.support-category-card.is-green {
  --support-category-color: var(--hr-green);
}

.support-category-card.is-amber {
  --support-category-color: var(--hr-amber);
}

.support-category-card.is-slate {
  --support-category-color: #506178;
}

.support-category-card.is-red {
  --support-category-color: var(--hr-red);
}

.support-ticket-panel,
.support-contact-panel {
  padding: 24px;
}

.support-topic-list {
  display: grid;
  gap: 10px;
}

.support-topic-list details {
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfcfe;
}

.support-topic-list summary {
  cursor: pointer;
  padding: 15px 16px;
  color: var(--hr-text);
  font-weight: 800;
}

.support-topic-list p {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--hr-muted);
}

.support-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.support-content-loading,
.support-content-error,
.support-content-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fbfcfe;
  text-align: center;
}

.support-content-error {
  color: #9f2f45;
  background: #fff7f8;
}

.support-content-empty i {
  color: var(--hr-primary);
  font-size: 26px;
}

.support-content-empty strong,
.support-content-empty span {
  display: block;
}

.support-article-list {
  display: grid;
  gap: 10px;
}

.support-article-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fbfcfe;
  text-align: left;
}

.support-article-card:hover,
.support-article-card:focus-visible {
  border-color: rgba(51, 113, 183, 0.38);
  background: #f8fbff;
  outline: 0;
}

.support-article-card strong {
  font-size: 15px;
}

.support-article-card small {
  color: var(--hr-muted);
  line-height: 1.45;
}

.support-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.support-articles-offcanvas {
  --bs-offcanvas-width: min(760px, 100vw);
}

.support-offcanvas-header {
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--hr-border);
}

.support-offcanvas-header .btn-close {
  margin-top: 4px;
}

.support-offcanvas-subtitle {
  margin: 6px 0 0;
  color: var(--hr-muted);
  font-size: 13px;
}

.support-offcanvas-body {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 20px 24px 24px;
  background: #f7f9fc;
}

.support-offcanvas-search {
  margin-bottom: 0;
}

.support-offcanvas-status {
  display: flex;
  justify-content: flex-end;
}

.support-back-button {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.support-article-detail {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.support-article-detail > header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hr-border);
}

.support-article-detail h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.support-article-body {
  min-width: 0;
  overflow: auto;
  padding: 22px;
  color: var(--hr-text);
  line-height: 1.65;
}

.support-article-detail .support-article-body {
  overflow: visible;
  padding: 0;
}

.support-article-body img,
.support-article-body video {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.support-article-body table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

.support-knowledge-panel {
  display: grid;
  gap: 0;
}

.support-knowledge-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  align-items: center;
  gap: clamp(22px, 4vw, 46px);
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--hr-border);
  border-radius: 8px 8px 0 0;
  background: #fff;
}

.support-knowledge-hero h3 {
  max-width: 760px;
  margin: 0;
  color: var(--hr-text);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: 0;
}

.support-knowledge-hero p:not(.section-kicker) {
  max-width: 700px;
  margin: 14px 0 0;
  color: var(--hr-muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
}

.support-knowledge-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  max-width: 780px;
  margin-top: 24px;
}

.support-knowledge-search-field {
  display: grid;
  gap: 6px;
}

.support-knowledge-search-field span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
}

.support-knowledge-search input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  font: inherit;
}

.support-knowledge-search input:focus {
  border-color: var(--hr-primary);
  outline: 3px solid rgba(51, 113, 183, 0.16);
}

.support-knowledge-search .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.support-knowledge-hero-media {
  margin: 0;
}

.support-knowledge-hero-media img {
  display: block;
  width: 100%;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow);
}

.support-knowledge-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--hr-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #f7f9fc;
}

.support-knowledge-sidebar {
  position: sticky;
  top: 92px;
  align-self: start;
  display: grid;
  gap: 8px;
}

.support-knowledge-sidebar-head,
.support-knowledge-category,
.support-knowledge-list-head,
.support-article-detail,
.support-content-loading,
.support-content-error,
.support-content-empty {
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.support-knowledge-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.support-knowledge-sidebar-head strong {
  color: var(--hr-text);
}

.support-knowledge-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  color: var(--hr-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
}

.support-knowledge-category small {
  color: var(--hr-green);
  font-weight: 850;
}

.support-knowledge-category:hover,
.support-knowledge-category:focus-visible,
.support-knowledge-category.is-active {
  color: var(--hr-primary);
  border-color: rgba(51, 113, 183, 0.34);
  background: #eef7ff;
  outline: 0;
}

.support-knowledge-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.support-knowledge-list-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.support-knowledge-list-head h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.14;
}

.support-knowledge-list-head > span {
  flex: 0 0 auto;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.support-article-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.support-article-card {
  min-width: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.support-article-card:hover,
.support-article-card:focus-within {
  border-color: rgba(51, 113, 183, 0.34);
  box-shadow: 0 12px 28px rgba(20, 45, 76, 0.10);
}

.support-article-card button {
  width: 100%;
  min-height: 180px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.support-article-card span {
  color: var(--hr-green);
  font-size: 12px;
  font-weight: 850;
}

.support-article-card strong {
  color: var(--hr-text);
  font-size: 18px;
  line-height: 1.24;
}

.support-article-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.support-knowledge-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 16px 24px 0;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.support-knowledge-breadcrumb button {
  border: 0;
  padding: 0;
  color: var(--hr-primary);
  background: transparent;
  font: inherit;
}

.support-article-detail {
  display: block;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--hr-shadow-sm);
}

.support-article-detail > header {
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--hr-border);
}

.support-article-detail h3 {
  max-width: 840px;
  margin: 0;
  color: var(--hr-text);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: 0;
}

.support-article-detail > header p:not(.section-kicker) {
  max-width: 780px;
  margin: 12px 0 0;
  color: var(--hr-muted);
  font-size: 16px;
  line-height: 1.55;
}

.support-article-detail > header small {
  display: inline-flex;
  margin-top: 14px;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 750;
}

.support-article-body {
  min-width: 0;
  overflow: visible;
  padding: clamp(22px, 4vw, 40px);
  color: #263244;
  font-size: 16px;
  line-height: 1.65;
}

.support-article-detail .support-article-body {
  padding: clamp(22px, 4vw, 40px);
}

.support-article-body > *:first-child {
  margin-top: 0;
}

.support-article-body > *:last-child {
  margin-bottom: 0;
}

.support-article-body h1,
.support-article-body h2,
.support-article-body h3,
.support-article-body h4 {
  margin: 1.6em 0 0.55em;
  color: var(--hr-text);
  line-height: 1.18;
  letter-spacing: 0;
}

.support-article-body p,
.support-article-body li {
  max-width: 780px;
}

.support-article-body a {
  color: var(--hr-primary);
  font-weight: 750;
}

.support-article-body img,
.support-article-body video {
  display: block;
  max-width: min(100%, 900px);
  height: auto;
  margin: 20px 0;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.support-article-body table {
  width: 100%;
  max-width: 900px;
  margin: 20px 0;
  border: 1px solid var(--hr-border);
  border-collapse: collapse;
  border-radius: 8px;
}

.support-article-body th,
.support-article-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hr-border);
  text-align: left;
  vertical-align: top;
}

.support-article-body th {
  background: #f0f5fa;
}

.support-article-empty-text {
  margin: 0;
  padding: 24px;
  color: var(--hr-muted);
}

.support-ticket-panel {
  display: grid;
  gap: 16px;
}

.support-ticket-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.support-ticket-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(51, 113, 183, 0.18);
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-weight: 700;
}

.support-ticket-list {
  display: grid;
  gap: 10px;
}

.support-ticket-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fbfcfe;
  text-align: left;
}

.support-ticket-row:hover,
.support-ticket-row:focus-visible {
  border-color: rgba(51, 113, 183, 0.38);
  background: #f8fbff;
  outline: 0;
}

.support-ticket-row-icon {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
}

.support-ticket-row strong,
.support-ticket-row small {
  display: block;
  overflow-wrap: anywhere;
}

.support-ticket-row small {
  color: var(--hr-muted);
}

.support-ticket-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px dashed rgba(100, 116, 139, 0.34);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fbfcfe;
}

.support-ticket-empty > i {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 18px;
}

.support-ticket-empty strong,
.support-ticket-empty small {
  display: block;
}

.support-ticket-empty strong {
  color: var(--hr-text);
}

.support-ticket-form {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--hr-border);
}

.support-ticket-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.support-ticket-detail-shell {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
}

.support-ticket-detail-dialog {
  width: min(920px, calc(100vw - 32px));
  height: min(780px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 26px 80px rgba(15, 23, 42, 0.24);
}

.support-ticket-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.support-ticket-detail-title {
  min-width: 0;
}

.support-ticket-detail-header h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.support-ticket-detail-meta {
  margin: 5px 0 0;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.support-ticket-detail-body {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px 22px;
  overflow: auto;
  background: #f7f9fc;
}

.support-ticket-thread {
  display: grid;
  gap: 14px;
}

.support-ticket-message {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.support-ticket-message-avatar {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  overflow: hidden;
  border: 1px solid rgba(51, 113, 183, 0.16);
  border-radius: 50%;
  color: var(--hr-primary-dark);
  background: #e9f3ff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.support-ticket-message-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.support-ticket-message-bubble {
  min-width: 0;
  width: min(80%, 760px);
  max-width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.support-ticket-message.is-support .support-ticket-message-bubble {
  border-color: rgba(51, 113, 183, 0.22);
  background: #f4f9ff;
}

.support-ticket-message.is-customer {
  grid-template-columns: minmax(0, 1fr) 40px;
}

.support-ticket-message.is-customer .support-ticket-message-avatar {
  grid-column: 2;
  background: #eaf7ee;
  color: #1f6a37;
}

.support-ticket-message.is-customer .support-ticket-message-bubble {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  border-color: rgba(36, 117, 60, 0.2);
  background: #f6fbf8;
}

.support-ticket-message.is-internal .support-ticket-message-avatar {
  background: #fff4d9;
  color: #8a5a00;
}

.support-ticket-message.is-internal .support-ticket-message-bubble {
  border-style: dashed;
  background: #fff9eb;
}

.support-ticket-message-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.support-ticket-message-name {
  min-width: 0;
}

.support-ticket-message-head strong,
.support-ticket-message-head time,
.support-ticket-message-name small {
  display: block;
}

.support-ticket-message-head time,
.support-ticket-message-name small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.support-ticket-message-head time {
  flex: 0 0 auto;
  text-align: right;
}

.support-ticket-message p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.support-ticket-thread-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px dashed rgba(100, 116, 139, 0.32);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
  font-weight: 700;
}

.support-ticket-reply-form {
  display: grid;
  gap: 10px;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.support-ticket-reply-form label {
  color: var(--hr-text);
  font-weight: 800;
}

.support-contact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}

.support-contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fbfcfe;
  font: inherit;
  text-decoration: none;
  text-align: left;
}

.support-contact-action {
  width: 100%;
}

.support-contact-link:hover,
.support-contact-link:focus-visible {
  border-color: rgba(51, 113, 183, 0.35);
  color: var(--hr-primary-dark);
  background: #f8fbff;
  outline: 0;
}

.support-contact-link > i {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
}

.support-contact-link small,
.support-contact-link strong {
  display: block;
  overflow-wrap: anywhere;
}

.support-contact-link small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.support-contact-training-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 0;
}

.support-contact-training-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  min-width: 0;
  min-height: 184px;
  padding: 20px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: linear-gradient(135deg, #ffffff 0%, #fbfdff 58%, #eef7ff 100%);
  box-shadow: var(--hr-shadow-sm);
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.support-contact-training-card:hover,
.support-contact-training-card:focus-visible {
  border-color: rgba(51, 113, 183, 0.35);
  color: var(--hr-primary-dark);
  background: #f8fbff;
  outline: 0;
}

.support-contact-training-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 18px;
}

.support-contact-training-card small,
.support-contact-training-card strong,
.support-contact-training-card em {
  display: block;
  overflow-wrap: anywhere;
}

.support-contact-training-card small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.support-contact-training-card strong {
  margin-top: 3px;
  color: var(--hr-text);
  font-size: 16px;
  line-height: 1.25;
}

.support-contact-training-card em {
  margin-top: 8px;
  color: var(--hr-muted);
  font-style: normal;
  line-height: 1.5;
}

.support-contact-training-card > i {
  margin-top: 3px;
  color: var(--hr-primary);
}

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

.side-panel {
  padding: 20px;
}

.partner-brand-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 118px;
}

.partner-brand-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.partner-brand-image.is-full {
  width: 100%;
}

.partner-brand-image.is-logo-70 {
  width: 70%;
}

.partner-brand-image.is-buderus {
  width: 151px;
}

.side-stack {
  display: grid;
  gap: 16px;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.panel-header.compact {
  margin-bottom: 16px;
}

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

.pipeline-step {
  min-width: 0;
  min-height: 118px;
  padding: 14px;
  border: 1px solid #e5eaf2;
  border-radius: 8px;
  background: #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pipeline-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--hr-shadow-sm);
}

.pipeline-step strong,
.pipeline-step small {
  display: block;
}

.pipeline-step strong {
  margin-bottom: 3px;
}

.pipeline-step small {
  color: var(--hr-muted);
}

.pipeline-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 50%;
  color: #506178;
  background: #f3f6fb;
}

.pipeline-step.is-blue {
  border-color: #c7d8ff;
  background: #f6f9ff;
}

.pipeline-step.is-blue .pipeline-icon {
  color: var(--hr-primary);
  background: #e7efff;
}

.pipeline-step.is-green {
  border-color: #bfe8cc;
  background: #f4fcf6;
}

.pipeline-step.is-green .pipeline-icon {
  color: var(--hr-green);
  background: #e4f7ea;
}

.pipeline-step.is-amber {
  border-color: #ffd99f;
  background: #fff8ed;
}

.pipeline-step.is-amber .pipeline-icon {
  color: var(--hr-amber);
  background: #fff0d8;
}

.module-list {
  display: grid;
  gap: 10px;
}

.module-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfcfe;
  box-shadow: inset 3px 0 0 rgba(51, 113, 183, 0.32);
}

.module-row strong,
.module-row p {
  overflow-wrap: anywhere;
}

.module-row .badge {
  flex: 0 0 auto;
}

.recent-projects-panel {
  min-height: 430px;
}

.recent-project-list {
  display: grid;
  gap: 10px;
}

.recent-project-item,
.recent-project-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfcfe;
}

.recent-project-item {
  color: inherit;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.recent-project-item:hover,
.recent-project-item:focus-visible {
  border-color: rgba(51, 113, 183, 0.42);
  box-shadow: var(--hr-shadow-sm);
  transform: translateY(-1px);
}

.recent-project-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #1b7f5f;
  background: #eaf8f2;
}

.recent-project-main,
.recent-project-meta {
  min-width: 0;
}

.recent-project-main strong,
.recent-project-main small,
.recent-project-meta strong,
.recent-project-meta small,
.recent-project-empty strong,
.recent-project-empty p {
  display: block;
  overflow-wrap: anywhere;
}

.recent-project-main strong,
.recent-project-empty strong {
  color: var(--hr-text);
}

.recent-project-main small,
.recent-project-meta small,
.recent-project-empty p {
  color: var(--hr-muted);
}

.recent-project-meta {
  text-align: right;
}

.recent-project-meta strong {
  font-size: 14px;
  color: var(--hr-text);
}

.recent-project-meta small {
  font-size: 12px;
}

.recent-project-state {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  color: var(--hr-muted);
}

.recent-project-state.is-error {
  color: var(--hr-red);
}

.recent-project-hero {
  min-height: 260px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  padding: 58px 28px;
  color: var(--hr-muted);
  text-align: center;
}

.recent-project-hero-icon {
  width: 76px;
  height: 76px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--hr-primary);
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px #cfe0f4;
  font-size: 34px;
}

.recent-project-hero h2 {
  max-width: 640px;
  margin: 0;
  color: var(--hr-text);
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: 0;
  font-weight: 800;
}

.recent-project-hero p {
  max-width: 520px;
  margin: 0;
  color: #506178;
  font-size: 17px;
  line-height: 1.5;
}

.recent-project-hero .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 800;
}

.recent-project-empty {
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  min-height: 260px;
  padding: 58px 28px;
  border: 0;
  color: var(--hr-muted);
  background: transparent;
  text-align: center;
}

.recent-project-empty .recent-project-icon {
  width: 76px;
  height: 76px;
  color: var(--hr-primary);
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px #cfe0f4;
  font-size: 34px;
}

.recent-project-empty strong {
  margin: 0;
  color: var(--hr-text);
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: 0;
}

.recent-project-empty p {
  max-width: 520px;
  margin: 0;
  color: #506178;
  font-size: 17px;
  line-height: 1.5;
}

.recent-project-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.account-line {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 42px;
  min-width: 42px;
  overflow: hidden;
  border-radius: 50%;
  color: #18466d;
  background: #dceefa;
  font-weight: 700;
  line-height: 1;
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.avatar.avatar-sm {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  min-width: 34px;
  font-size: 13px;
}

.status-list {
  display: grid;
  gap: 12px;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fafbfd;
}

.status-item span {
  flex: 0 0 auto;
  color: var(--hr-muted);
}

.status-item strong {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.activity-list {
  display: grid;
  gap: 12px;
}

.activity-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.activity-item strong,
.activity-item p {
  overflow-wrap: anywhere;
}

.activity-item p {
  margin-bottom: 0;
  color: var(--hr-muted);
  font-size: 14px;
}

.activity-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
}

.side-panel-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 14px;
  line-height: 1.4;
}

.side-panel-state.is-error {
  align-items: flex-start;
  color: #9f2f2f;
}

.side-panel-empty {
  margin: 0;
  color: var(--hr-muted);
  font-size: 14px;
}

.training-list {
  display: grid;
  gap: 12px;
}

.training-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

button.training-item {
  width: 100%;
  appearance: none;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.training-topic-meeting {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

button.training-item:hover,
button.training-item:focus-visible {
  border-color: rgba(51, 113, 183, 0.35);
  color: var(--hr-primary-dark);
  background: #f8fbff;
  outline: 0;
}

.training-topic-meeting > i {
  color: var(--hr-primary-dark);
}

.training-item strong,
.training-item p {
  overflow-wrap: anywhere;
}

.training-item p {
  margin: 2px 0 0;
  color: var(--hr-muted);
  font-size: 14px;
}

.training-time {
  display: block;
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 13px;
}

.training-badge {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--hr-green);
  font-size: 12px;
  font-weight: 800;
}

.training-badge.is-warning {
  color: #5a4300;
  background: #ffc94a;
}

.training-badge.is-danger {
  background: #b4233f;
}

.training-badge.is-secondary {
  background: #607187;
}

.training-badge.is-orange {
  background: #fd7e14;
}

.training-date {
  width: 48px;
  min-height: 48px;
  display: inline-grid;
  place-items: center;
  padding: 6px 4px;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  line-height: 1;
  text-align: center;
}

.training-date strong {
  font-size: 18px;
}

.training-date small {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.meeting-list {
  display: grid;
  gap: 10px;
}

.meeting-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  text-decoration: none;
}

.meeting-item:hover,
.meeting-item:focus-visible {
  border-color: rgba(51, 113, 183, 0.35);
  color: var(--hr-primary-dark);
  background: #f8fbff;
  outline: 0;
}

.meeting-item span {
  min-width: 0;
}

.meeting-item strong,
.meeting-item small,
.meeting-item em {
  display: block;
  overflow-wrap: anywhere;
}

.meeting-item strong {
  font-size: 14px;
}

.meeting-item small {
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 13px;
  font-style: normal;
}

.meeting-item em {
  margin-top: 5px;
  color: var(--hr-muted);
  font-size: 13.5px;
  line-height: 1.45;
  font-style: normal;
}

.meeting-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.meeting-picture {
  width: 50%;
  min-width: 180px;
  max-width: 320px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-top: 10px;
  border-radius: 8px;
  object-fit: cover;
  background: #eef7ff;
}

.meeting-icon.is-1 {
  color: #8a5b00;
  background: #fff4d6;
}

.meeting-icon.is-4 {
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.meeting-icon.is-10 {
  color: var(--hr-green);
  background: #edf9f1;
}

.training-meeting-item {
  width: 100%;
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.training-meeting-item .training-date.meeting-icon {
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 4px 3px;
  border-radius: 8px;
}

.training-meeting-item .training-date strong {
  font-size: 15px;
}

.training-meeting-item .training-date small {
  font-size: 9px;
}

.training-meeting-item .training-badge {
  margin-top: 5px;
}

.training-modal-intro {
  margin: 0 0 18px;
  color: var(--hr-muted);
  line-height: 1.55;
}

.training-modal-content-card {
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--hr-border);
  border-radius: 14px;
  background: #f8fbff;
}

.training-modal-section-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.training-modal-section-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.training-modal-section-head h3,
.training-modal-section-head p,
.training-topic-card h4,
.training-topic-card ul,
.training-benefit-card p {
  margin: 0;
}

.training-modal-section-head h3 {
  color: var(--hr-text);
  font-size: 18px;
}

.training-modal-section-head p {
  margin-top: 4px;
  color: var(--hr-muted);
  font-size: 14px;
}

.training-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.training-topic-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(211, 221, 232, 0.86);
  border-radius: 12px;
  background: #fff;
}

.training-topic-card > span {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 13px;
  font-weight: 800;
}

.training-topic-card h4 {
  color: var(--hr-text);
  font-size: 15px;
  line-height: 1.25;
}

.training-topic-card ul {
  display: grid;
  gap: 5px;
  margin-top: 9px;
  padding-left: 17px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.4;
}

.training-benefit-card {
  padding: 14px 16px;
  border: 1px solid rgba(32, 145, 85, 0.18);
  border-radius: 12px;
  color: #1b5f3a;
  background: #f0fbf5;
}

.training-benefit-card strong {
  display: block;
  margin-bottom: 5px;
  color: #164f32;
}

.training-benefit-card p {
  line-height: 1.5;
}

.training-content-modal {
  width: min(100%, 1140px);
  max-height: calc(100vh - 28px);
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(16, 32, 63, 0.22);
}

.training-content-modal .content-modal-header {
  padding: 22px 26px;
}

.training-content-modal .content-modal-header h2 {
  color: #06133f;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.training-content-modal .content-modal-header p {
  color: #30405f;
  font-size: 15px;
}

.training-landing-body {
  display: grid;
  gap: 22px;
  padding: 26px 30px;
  color: #07133c;
}

.training-hero {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 38px;
  align-items: center;
}

.training-hero-media {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(var(--hr-primary-rgb), 0.08), #f8fbff);
  box-shadow: 0 18px 38px rgba(16, 32, 63, 0.08);
}

.training-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  box-shadow: none;
}

.training-hero-copy h3,
.training-hero-copy p {
  margin: 0;
}

.training-hero-copy h3 {
  color: #06133f;
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.training-hero-subtitle {
  margin-top: 8px !important;
  color: var(--hr-primary);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 800;
  line-height: 1.25;
}

.training-hero-description {
  max-width: 720px;
  margin-top: 26px !important;
  color: #223252;
  font-size: 16px;
  line-height: 1.6;
}

.training-benefit-badges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.training-benefit-badges span {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 64px;
  min-width: 0;
  padding: 12px 10px;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 8px;
  color: #10224a;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.training-benefit-badges i {
  color: var(--hr-primary);
  font-size: 21px;
}

.training-audience-benefit-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.25fr);
  gap: 20px;
  align-items: stretch;
}

.training-audience-card,
.training-benefit-card {
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 32, 63, 0.05);
}

.training-audience-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(var(--hr-primary-rgb), 0.055), transparent 26%),
    linear-gradient(180deg, #fff, #fbfdff);
}

.training-audience-card h3,
.training-benefit-card h3,
.training-content-section h3 {
  margin: 0;
  color: #07133c;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.training-audience-card > h3,
.training-benefit-copy > h3 {
  min-height: 25px;
}

.training-audience-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 12px;
  margin-top: 20px;
}

.training-audience-chips span {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  min-width: 0;
  min-height: 106px;
  padding: 14px 10px;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 16px;
  color: #10224a;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  background: linear-gradient(180deg, #fff, rgba(var(--hr-primary-rgb), 0.035));
  box-shadow: 0 10px 22px rgba(16, 32, 63, 0.055);
}

.training-audience-chips i {
  width: 59px;
  height: 59px;
  display: inline-grid;
  place-items: center;
  color: var(--hr-primary);
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.95), transparent 38%),
    rgba(var(--hr-primary-rgb), 0.08);
  font-size: 30px;
}

.training-audience-note {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  margin-top: auto;
  padding: 13px 14px;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.24);
  border-radius: 14px;
  color: var(--hr-primary);
  background:
    linear-gradient(135deg, rgba(var(--hr-primary-rgb), 0.09), rgba(248, 251, 255, 0.92)),
    rgba(var(--hr-primary-rgb), 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.training-audience-note i {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  margin-top: 1px;
  border-radius: 999px;
  color: #fff;
  background: var(--hr-primary);
  font-size: 15px;
}

.training-audience-note strong {
  display: block;
  margin: 0 0 3px;
  color: var(--hr-primary-dark);
  font-size: 13.5px;
  line-height: 1.2;
}

.training-audience-note p {
  margin: 0;
  color: var(--hr-primary);
  font-size: 13.5px;
  line-height: 1.35;
}

.training-benefit-card {
  display: block;
  min-height: 250px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  color: #145b31;
  border-color: rgba(32, 145, 85, 0.28);
  background:
    radial-gradient(circle at 92% 18%, rgba(34, 197, 94, 0.16), transparent 25%),
    radial-gradient(circle at 78% 92%, rgba(34, 197, 94, 0.12), transparent 30%),
    linear-gradient(120deg, rgba(255, 255, 255, 0) 0 60%, rgba(34, 197, 94, 0.06) 60% 100%),
    linear-gradient(145deg, #f8fffb, #f0fbf5);
}

.training-benefit-card::before,
.training-benefit-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.training-benefit-card::before {
  width: 190px;
  height: 190px;
  right: -64px;
  top: -70px;
  background: rgba(34, 197, 94, 0.08);
}

.training-benefit-card::after {
  width: 110px;
  height: 110px;
  right: 114px;
  bottom: -48px;
  background: rgba(34, 197, 94, 0.07);
}

.training-benefit-copy,
.training-benefit-illustration {
  position: relative;
  z-index: 1;
}

.training-benefit-copy {
  display: grid;
  align-content: start;
  max-width: 100%;
}

.training-benefit-card h3 {
  color: #14723b;
}

.training-benefit-card ul {
  display: grid;
  gap: 15px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.training-benefit-card li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: #173923;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.4;
}

.training-benefit-card li i {
  margin-top: 1px;
  color: #229655;
  font-size: 18px;
}

.training-benefit-illustration {
  position: absolute;
  right: 18px;
  bottom: 26px;
  width: min(40%, 260px);
  margin: 0;
  opacity: 0.24;
}

.training-benefit-illustration circle,
.training-benefit-illustration path {
  fill: none;
  stroke: #22c55e;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.training-content-section {
  display: grid;
  gap: 16px;
}

.training-content-section .training-topic-grid {
  gap: 12px 18px;
}

.training-content-section .training-topic-card {
  grid-template-columns: 34px 42px minmax(0, 1fr);
  align-items: center;
  min-height: 90px;
  padding: 16px;
  border-color: rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 10px;
  cursor: default;
  box-shadow: 0 8px 20px rgba(16, 32, 63, 0.04);
}

.training-content-section .training-topic-card > span {
  width: 28px;
  height: 28px;
  color: #fff;
  background: var(--hr-primary);
}

.training-content-section .training-topic-card > i {
  color: var(--hr-primary);
  font-size: 28px;
}

.training-content-section .training-topic-card h4 {
  font-size: 16px;
}

.training-content-section .training-topic-card p {
  margin: 5px 0 0;
  color: #34425f;
  font-size: 13px;
  line-height: 1.45;
}

.training-signup-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(var(--hr-primary-rgb), 0.07), rgba(255, 255, 255, 0.96) 42%),
    #fff;
  box-shadow: 0 12px 30px rgba(16, 32, 63, 0.06);
}

.training-signup-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.training-signup-head h3,
.training-signup-head p {
  margin: 0;
}

.training-signup-head h3 {
  color: #07133c;
  font-size: 20px;
  font-weight: 800;
}

.training-signup-head p {
  margin-top: 5px;
  color: #34425f;
  font-size: 14px;
  line-height: 1.45;
}

.training-signup-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--hr-primary);
  background: rgba(var(--hr-primary-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--hr-primary-rgb), 0.22);
}

.training-signup-card .content-modal-state {
  margin: 0;
  min-height: 120px;
}

.training-signup-embed {
  width: 100%;
  min-height: 360px;
  overflow: auto;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 12px;
  background: #fff;
}

.training-signup-loading {
  color: #30405f;
  background: #f8fbff;
}

.training-ablefy-wrapper {
  min-height: 320px;
  background: #fff;
}

.training-ablefy-wrapper:empty {
  min-height: 0;
}

iframe.training-signup-embed {
  display: block;
  min-height: min(680px, 72vh);
  background: #fff;
}

iframe.vdi-training-signup-frame {
  width: 100%;
  min-height: min(760px, 76vh);
}

.training-signup-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #9a5b00;
  font-size: 13px;
  line-height: 1.45;
}

.vdi-training-hero-media {
  align-self: start;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: 0 18px 38px rgba(16, 32, 63, 0.08);
}

.vdi-training-content-modal .training-hero {
  grid-template-columns: minmax(230px, 0.42fr) minmax(0, 1fr);
  align-items: start;
}

.vdi-training-hero-media img {
  width: 100%;
  height: auto;
  max-height: 370px;
  min-height: 0;
  border-radius: 16px;
  object-fit: contain;
  object-position: center;
  background: #fff;
  box-shadow: none;
}

.vdi-training-mark {
  width: min(100%, 230px);
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.18);
  border-radius: 24px;
  color: #06133f;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(var(--hr-primary-rgb), 0.08)),
    #fff;
  box-shadow: 0 22px 44px rgba(16, 32, 63, 0.1);
}

.vdi-training-mark i {
  width: 72px;
  height: 72px;
  display: inline-grid;
  place-items: center;
  border-radius: 22px;
  color: var(--hr-primary);
  background: rgba(var(--hr-primary-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--hr-primary-rgb), 0.22);
  font-size: 34px;
}

.vdi-training-mark span,
.vdi-training-mark small {
  display: block;
}

.vdi-training-mark span {
  color: #06133f;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vdi-training-mark small {
  max-width: 160px;
  color: #30405f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.vdi-training-date-list {
  display: grid;
  gap: 12px;
}

.vdi-training-date-card {
  width: 100%;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 14px;
  color: inherit;
  text-align: left;
  background: #fff;
  box-shadow: 0 10px 24px rgba(16, 32, 63, 0.05);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.vdi-training-date-card:hover,
.vdi-training-date-card:focus-visible,
.vdi-training-date-card.is-selected {
  border-color: rgba(var(--hr-primary-rgb), 0.42);
  box-shadow: 0 16px 30px rgba(var(--hr-primary-rgb), 0.1);
  transform: translateY(-1px);
}

.vdi-training-date-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.vdi-training-date-main strong,
.vdi-training-date-main small {
  display: block;
}

.vdi-training-date-main strong {
  color: #07133c;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.vdi-training-date-main small {
  color: #34425f;
  font-size: 13.5px;
  line-height: 1.3;
}

.vdi-training-signup-placeholder {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px dashed rgba(var(--hr-primary-rgb), 0.34);
  border-radius: 14px;
  color: #10224a;
  background:
    linear-gradient(135deg, rgba(var(--hr-primary-rgb), 0.08), rgba(255, 255, 255, 0.9)),
    #f8fbff;
}

.vdi-training-signup-placeholder > i {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--hr-primary);
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--hr-primary-rgb), 0.22);
  font-size: 21px;
}

.vdi-training-signup-placeholder strong,
.vdi-training-signup-placeholder p {
  margin: 0;
}

.vdi-training-signup-placeholder strong {
  display: block;
  color: #07133c;
  font-size: 15px;
  font-weight: 800;
}

.vdi-training-signup-placeholder p {
  margin-top: 4px;
  color: #34425f;
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .vdi-training-date-card {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .vdi-training-date-card .training-badge {
    grid-column: 2;
    justify-self: start;
  }

  .vdi-training-signup-placeholder {
    grid-template-columns: 1fr;
  }
}

.training-signup-error i {
  margin-top: 2px;
}

.training-signup-fallback {
  margin: -4px 0 0;
  color: var(--hr-muted);
  font-size: 13px;
}

.training-signup-fallback a {
  color: var(--hr-primary-dark);
  font-weight: 700;
}

.training-modal-list {
  display: grid;
  gap: 12px;
}

.training-modal-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 12px;
  background: #fff;
}

.training-modal-item.is-selected {
  border-color: rgba(51, 113, 183, 0.35);
  background: #f8fbff;
  box-shadow: 0 10px 24px rgba(32, 76, 126, 0.08);
}

.training-modal-item strong,
.training-modal-item p,
.training-modal-item small {
  display: block;
  overflow-wrap: anywhere;
}

.training-modal-item p {
  margin: 4px 0 0;
  color: var(--hr-muted);
  font-size: 14px;
}

.training-modal-item small {
  margin-top: 4px;
  color: var(--hr-muted);
  font-size: 13px;
}

.meetings-content-grid {
  grid-template-columns: minmax(0, 1fr);
}

.meetings-page-layout {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.meetings-hero-panel,
.shop-business-hero-panel {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-color: rgba(51, 113, 183, 0.18);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 62%, #eef7ff 100%);
  overflow: hidden;
}

.meetings-hero-panel h3,
.shop-business-hero-panel h3 {
  margin: 0;
  font-size: 38px;
  line-height: 1.08;
}

.meetings-hero-panel p:last-child,
.shop-business-hero-panel p:last-child {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--hr-muted);
  font-size: 17px;
}

.meetings-hero-stats,
.shop-business-hero-stats {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

.meetings-page-state {
  display: grid;
  place-items: center;
  gap: 12px;
  min-height: 260px;
  padding: 32px;
  color: var(--hr-muted);
  text-align: center;
}

.meetings-page-state h3,
.meetings-page-state p {
  margin: 0;
}

.meetings-page-state > i {
  color: var(--hr-red);
  font-size: 36px;
}

.meetings-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.meetings-overview-panel,
.knowledge-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px;
}

.meetings-page-list .meeting-item {
  min-height: 72px;
}

.meeting-info-box {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #d9e8f7;
  border-radius: 8px;
  color: #30445f;
  background: #f7fbff;
  font-size: 14px;
}

.meeting-info-box p {
  margin: 0;
}

.academy-topic-list {
  display: grid;
  gap: 10px;
}

.academy-topic-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  text-align: left;
}

.academy-topic-button:hover,
.academy-topic-button:focus-visible {
  border-color: rgba(51, 113, 183, 0.35);
  color: var(--hr-primary-dark);
  background: #f8fbff;
  outline: 0;
}

.academy-topic-button i {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.academy-topic-button span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.academy-theme-list {
  display: grid;
  gap: 16px;
}

.academy-theme-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(211, 226, 245, 0.95);
  border-radius: 14px;
  background:
    radial-gradient(circle at 92% 6%, rgba(51, 113, 183, 0.08), transparent 24%),
    linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 12px 26px rgba(16, 32, 63, 0.055);
}

.academy-theme-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.academy-theme-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px #d7e5f7;
}

.academy-theme-icon i {
  font-size: 21px;
}

.academy-theme-header strong,
.academy-theme-header small,
.academy-theme-dates p,
.academy-theme-date-main strong,
.academy-theme-date-main small {
  display: block;
  margin: 0;
}

.academy-theme-header strong {
  color: var(--hr-text);
  font-size: 17px;
  line-height: 1.25;
}

.academy-theme-header small {
  margin-top: 5px;
  color: var(--hr-muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.academy-theme-dates {
  display: grid;
  gap: 10px;
}

.academy-theme-dates > p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.academy-theme-date {
  width: 100%;
  appearance: none;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 10px;
  color: var(--hr-text);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.academy-theme-date:hover,
.academy-theme-date:focus-visible {
  border-color: rgba(51, 113, 183, 0.35);
  color: var(--hr-primary-dark);
  background: #f8fbff;
  outline: 0;
}

.academy-theme-date-main {
  min-width: 0;
}

.academy-theme-date-main strong,
.academy-theme-date-main small {
  overflow-wrap: anywhere;
}

.academy-theme-date-main strong {
  font-size: 14px;
}

.academy-theme-date-main small {
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 13px;
}

.academy-theme-date > i {
  color: var(--hr-primary-dark);
}

.training-feature {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.training-feature h4,
.training-feature p {
  margin: 0;
}

.training-feature h4 {
  font-size: 18px;
}

.training-feature p {
  margin-top: 6px;
  color: var(--hr-muted);
  font-size: 14px;
}

.training-feature-body {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.training-feature-body img {
  width: 100%;
  min-height: 150px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  object-fit: cover;
}

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

.knowledge-card {
  display: grid;
  grid-template-rows: 150px minmax(0, 1fr);
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  text-align: left;
  box-shadow: 0 8px 18px rgba(16, 32, 63, 0.05);
}

.knowledge-card:hover,
.knowledge-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(51, 113, 183, 0.35);
  box-shadow: var(--hr-shadow-sm);
  outline: 0;
}

.knowledge-card img,
.knowledge-card-fallback {
  width: 100%;
  height: 150px;
}

.knowledge-card img {
  object-fit: cover;
}

.knowledge-card-fallback {
  display: grid;
  place-items: center;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.knowledge-card-fallback i {
  font-size: 32px;
}

.knowledge-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px;
}

.knowledge-card-body strong,
.knowledge-card-body small,
.knowledge-card-body em {
  display: block;
  overflow-wrap: anywhere;
}

.knowledge-card-body strong {
  font-size: 15px;
  line-height: 1.25;
}

.knowledge-card-body small {
  color: var(--hr-muted);
  font-size: 13px;
}

.knowledge-card-body em {
  margin-top: auto;
  color: var(--hr-muted);
  font-size: 12px;
  font-style: normal;
}

.content-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2050;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 32, 63, 0.42);
}

.content-modal {
  width: min(100%, 1040px);
  max-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-md);
}

.content-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hr-border);
}

.content-modal-header h2,
.content-modal-header p {
  margin: 0;
}

.content-modal-header h2 {
  font-size: 22px;
  line-height: 1.2;
}

.content-modal-header p {
  color: var(--hr-muted);
  font-size: 14px;
  font-weight: 700;
}

.content-modal-close {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
}

.content-modal-close:hover,
.content-modal-close:focus-visible {
  color: var(--hr-text);
  border-color: #c5d4e7;
  background: #f6f8fb;
}

.content-modal-body {
  min-height: 0;
  padding: 20px;
  overflow: auto;
}

.content-modal.training-content-modal {
  width: min(100%, 1140px);
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 14px;
}

.content-modal-body.training-landing-body {
  padding: 26px 30px;
}

.content-modal-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  color: var(--hr-muted);
}

.content-modal-state.is-error {
  color: var(--hr-red);
}

.content-modal-html {
  min-width: 0;
}

.content-modal-html img,
.content-modal-html iframe {
  max-width: 100%;
}

.content-modal-lock-region {
  position: relative;
  min-height: 260px;
}

.content-modal-lock-region.is-content-locked .content-modal-html {
  filter: blur(5px);
  pointer-events: none;
  user-select: none;
}

.content-modal-lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 260px;
  padding: 42px 16px;
  background: rgba(248, 250, 252, 0.54);
  backdrop-filter: blur(1px);
}

.content-modal-lock-alert {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  width: min(100%, 560px);
  padding: 18px;
  border: 1px solid #f0c7a0;
  border-radius: 8px;
  color: #684114;
  background: #fff8ec;
  box-shadow: 0 18px 42px rgba(16, 32, 63, 0.16);
}

.content-modal-lock-alert > i {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #a05d00;
  background: #ffe7c2;
}

.content-modal-lock-alert h3,
.content-modal-lock-alert p {
  margin: 0;
}

.content-modal-lock-alert h3 {
  font-size: 18px;
  line-height: 1.2;
}

.content-modal-lock-alert p {
  margin-top: 4px;
  font-size: 14px;
}

.content-modal-lock-alert .btn {
  margin-top: 12px;
}

.news-popup-backdrop {
  z-index: 2140;
}

.news-popup-modal {
  width: min(100%, 1180px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.news-popup-header {
  border-bottom-color: rgba(51, 113, 183, 0.18);
  background: #f8fbff;
}

.news-popup-header p {
  color: var(--hr-primary);
  text-transform: uppercase;
  letter-spacing: 0;
}

.news-popup-body {
  padding: 24px;
}

.news-popup-html {
  color: var(--hr-text);
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.news-popup-html img,
.news-popup-html video,
.news-popup-html iframe {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.news-popup-html table {
  width: 100%;
  max-width: 100%;
}

.news-popup-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.news-popup-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lundl-generator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2150;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 32, 63, 0.42);
}

.lundl-generator-modal {
  width: min(100%, 760px);
  max-height: min(720px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-md);
}

.lundl-generator-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hr-border);
}

.lundl-generator-title {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.lundl-generator-title-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 18px;
}

.lundl-generator-header h2,
.lundl-generator-header p {
  margin: 0;
}

.lundl-generator-header h2 {
  font-size: 22px;
  line-height: 1.2;
  color: var(--hr-text);
}

.lundl-generator-header p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.lundl-generator-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

.lundl-generator-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 20px;
  overflow: auto;
}

.lundl-generator-field {
  grid-column: span 2;
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.lundl-generator-field-wide,
.lundl-generator-section-title,
.lundl-generator-error {
  grid-column: 1 / -1;
}

.lundl-generator-field > span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.lundl-generator-field.is-invalid > span,
.lundl-generator-field:has(.is-invalid) > span {
  color: var(--hr-red);
}

.lundl-generator-field .form-control,
.lundl-generator-field .form-select {
  width: 100%;
  min-height: 44px;
  background: #fff;
}

.vdz-generator-field-half {
  grid-column: span 3;
}

.lundl-generator-field-description textarea {
  min-height: 128px;
  resize: vertical;
}

.lundl-generator-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 -2px;
  color: var(--hr-text);
  font-size: 14px;
  font-weight: 800;
}

.lundl-generator-section-title i {
  color: var(--hr-muted);
}

.lundl-generator-error {
  margin: 0;
}

.lundl-generator-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.lundl-generator-actions .btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.lundl-generator-backdrop.self-declaration-generator-backdrop {
  place-items: center;
  padding: 24px;
}

.lundl-generator-modal.self-declaration-generator-modal {
  width: min(100%, 920px);
  height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

@supports (height: 100dvh) {
  .lundl-generator-modal.self-declaration-generator-modal {
    height: calc(100dvh - 48px);
    max-height: calc(100dvh - 48px);
  }
}

.self-declaration-generator-form {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.self-declaration-stepper {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.self-declaration-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
  font-weight: 800;
  text-align: left;
}

.self-declaration-step i {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.self-declaration-step.active {
  border-color: #bdd0e8;
  color: var(--hr-primary-dark);
  background: #f4f9ff;
}

.self-declaration-step.done {
  color: var(--hr-green);
}

.self-declaration-step.done i {
  color: var(--hr-green);
  background: #edf9f1;
}

.self-declaration-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.self-declaration-summary,
.self-declaration-text-card,
.self-declaration-switch {
  grid-column: 1 / -1;
}

.self-declaration-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #e6edf6;
  border-radius: 8px;
  background: #f8fbff;
}

.self-declaration-summary strong,
.self-declaration-summary span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.self-declaration-summary span {
  color: var(--hr-muted);
}

.self-declaration-tech-list {
  display: grid;
  gap: 12px;
}

.self-declaration-tech-card {
  overflow: hidden;
  border: 1px solid #e6edf6;
  border-radius: 8px;
  background: #fff;
}

.self-declaration-tech-card.active {
  border-color: #bdd0e8;
  box-shadow: 0 8px 22px rgba(44, 72, 102, 0.07);
}

.self-declaration-tech-list.is-invalid {
  outline: 2px solid rgba(201, 74, 74, 0.34);
  outline-offset: 4px;
  border-radius: 8px;
}

.self-declaration-tech-card.is-invalid,
.self-declaration-switch.is-invalid {
  border-color: var(--hr-red);
  box-shadow: 0 0 0 0.14rem rgba(201, 74, 74, 0.12);
}

.self-declaration-switch.is-invalid {
  background: #fff7f7;
}

.self-declaration-tech-toggle {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 13px 14px;
  cursor: pointer;
}

.self-declaration-tech-toggle strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--hr-text);
  font-weight: 750;
}

.self-declaration-tech-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
}

.self-declaration-tech-icon i {
  font-size: 20px;
}

.self-declaration-tech-body {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-top: 1px solid #e6edf6;
  background: #fbfcfe;
}

.self-declaration-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.self-declaration-mini-grid .lundl-generator-field {
  grid-column: span 1;
}

.self-declaration-switch-list {
  display: grid;
  gap: 10px;
}

.self-declaration-bafa-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #bdd0e8;
  border-radius: 8px;
  background: #fff;
}

.self-declaration-bafa-title {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.self-declaration-bafa-selected {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.self-declaration-bafa-selected strong,
.self-declaration-bafa-selected small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.self-declaration-bafa-selected small {
  color: var(--hr-muted);
}

.self-declaration-bafa-search {
  display: grid;
  gap: 8px;
}

.self-declaration-bafa-results {
  display: grid;
  gap: 6px;
}

.self-declaration-bafa-results .list-group-item {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  white-space: normal;
}

.self-declaration-bafa-results .list-group-item:hover,
.self-declaration-bafa-results .list-group-item:focus-visible {
  border-color: #bdd0e8;
  background: #f4f9ff;
}

.self-declaration-bafa-results strong,
.self-declaration-bafa-results small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.self-declaration-bafa-results small {
  color: var(--hr-muted);
}

.self-declaration-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border: 1px solid #e6edf6;
  border-radius: 8px;
  background: #fff;
}

.self-declaration-switch strong,
.self-declaration-switch small {
  display: block;
}

.self-declaration-switch small {
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 12px;
}

.self-declaration-text-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #e6edf6;
  border-radius: 8px;
  background: #f8fbff;
}

.self-declaration-text-card h3,
.self-declaration-text-card p {
  margin: 0;
}

.self-declaration-text-card h3 {
  font-size: 18px;
}

.self-declaration-text-card p {
  color: #30445f;
  line-height: 1.45;
}

.self-declaration-sign-action {
  display: flex;
  justify-content: center;
  padding: 8px 0 2px;
}

.self-declaration-sign-action .btn {
  min-height: 52px;
  min-width: min(100%, 340px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
}

.self-declaration-generator-actions {
  flex-wrap: wrap;
}

.quick-panel {
  display: grid;
  gap: 9px;
}

.news-teaser-card {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(51, 113, 183, 0.18);
  color: var(--hr-text);
  background: #f8fbff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.news-teaser-card:hover,
.news-teaser-card:focus-visible {
  border-color: rgba(51, 113, 183, 0.38);
  color: var(--hr-text);
  background: #fff;
  box-shadow: 0 18px 42px rgba(16, 32, 63, 0.12);
}

.news-teaser-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--hr-primary);
}

.news-teaser-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.news-teaser-copy small {
  color: var(--hr-primary);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.news-teaser-copy strong {
  color: var(--hr-text);
  font-size: 14px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.news-teaser-arrow {
  color: var(--hr-primary);
  font-size: 12px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #41516a;
  background: #fff;
  font-weight: 700;
  text-align: left;
}

.quick-action:hover {
  border-color: rgba(51, 113, 183, 0.35);
  color: var(--hr-primary-dark);
  background: #f8fbff;
}

.quick-action.is-active {
  border-color: rgba(47, 155, 78, 0.35);
  color: #1f6b36;
  background: #f2fbf4;
}

@container dashboard-main (max-width: 749.98px) {
  .dashboard-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1469.98px) {
    .dashboard-metric-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

@media (max-width: 1199.98px) {
  .dashboard-content-grid.has-dashboard-notices {
    grid-template-areas:
      "notice notice"
      "main side";
  }

  .list-toolbar {
    gap: 12px;
    padding: 16px 18px;
  }

  .list-filter-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .list-table {
    min-width: 900px;
  }

  .list-table thead th {
    padding: 10px 12px;
    font-size: 11px;
  }

  .list-table tbody td {
    padding: 12px;
  }

  .list-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .list-pagination-controls {
    justify-content: flex-start;
  }

  .list-title-cell {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    min-width: 220px;
  }

  .list-row-icon {
    width: 36px;
    height: 36px;
  }

  .list-table td small {
    font-size: 12px;
  }

  .table-sort-button {
    gap: 4px;
  }
}

@media (max-width: 991.98px) {
  .sidebar {
    display: none;
  }

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

  .content-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-content-grid.has-dashboard-notices {
    grid-template-areas:
      "notice"
      "main"
      "side";
  }

  .list-panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-board-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-board-header.is-compact {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .settings-tab-header {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .settings-tab-header .status-pill {
    grid-column: 2;
    justify-self: flex-start;
  }

  .settings-summary-grid,
  .settings-two-column,
  .settings-permission-grid,
  .settings-upload-grid,
  .account-profile-grid,
  .account-device-grid {
    grid-template-columns: 1fr;
  }

  .settings-action-row,
  .settings-branding-hero,
  .settings-section-head,
  .account-storage-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-action-row > div:last-child {
    justify-content: flex-start;
  }

  .settings-user-modal {
    width: min(100%, 620px);
  }

  .business-onboarding-shell {
    width: min(100%, 640px);
  }

  .business-onboarding-header {
    flex-direction: column;
  }

  .task-board-counts {
    justify-content: flex-start;
  }

  .dashboard-notice-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: flex-start;
  }

  .dashboard-notice-action {
    grid-column: 2;
    justify-self: flex-start;
  }

  .task-board-control-grid {
    grid-template-columns: 1fr;
  }

  .task-view-tabs {
    justify-content: stretch;
  }

  .task-view-tabs button {
    min-width: 0;
  }

  .kanban-board {
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 340px);
    grid-template-columns: none;
  }

  .task-detail-grid,
  .task-file-grid,
  .task-picker-toolbar {
    grid-template-columns: 1fr;
  }

  .task-create-row {
    grid-template-columns: 1fr;
  }

  .list-panel-counts {
    justify-content: flex-start;
  }

  .meetings-hero-panel,
  .shop-business-hero-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .meetings-hero-stats,
  .shop-business-hero-stats {
    justify-content: flex-start;
  }

  .meetings-overview-grid,
  .knowledge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .list-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-field-wide {
    grid-column: span 1;
  }

  .support-category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-knowledge-hero,
  .support-knowledge-layout,
  .support-article-list {
    grid-template-columns: 1fr;
  }

  .support-knowledge-sidebar {
    position: static;
  }

  .support-knowledge-hero-media {
    max-width: 520px;
  }

  .support-contact-grid,
  .support-contact-training-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-search {
    grid-template-columns: 1fr auto auto;
  }

  .pipeline-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .topbar {
    align-items: flex-start;
    padding-inline: 16px;
  }

  .content-area {
    padding: 16px;
  }
}

@media (max-width: 575.98px) {
  .login-shell {
    padding: 16px;
  }

  .login-card {
    max-height: calc(100vh - 32px);
    padding: 22px;
  }

  .metric-grid,
  .pipeline-grid {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 0;
  }

  .dashboard-notice-card {
    grid-template-columns: 1fr;
  }

  .dashboard-notice-action {
    grid-column: auto;
    width: 100%;
    white-space: normal;
  }

  .training-content-modal {
    max-height: calc(100vh - 20px);
  }

  .training-content-modal .content-modal-header,
  .training-landing-body {
    padding-inline: 18px;
  }

  .training-hero,
  .training-audience-benefit-grid,
  .training-benefit-card {
    grid-template-columns: 1fr;
  }

  .training-hero {
    gap: 20px;
  }

  .training-hero-media {
    min-height: 160px;
  }

  .training-benefit-badges,
  .training-audience-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .training-audience-chips span {
    min-height: 100px;
  }

  .training-audience-note {
    margin-top: 18px;
  }

  .training-benefit-illustration {
    width: min(70%, 230px);
    margin: 8px auto 0;
    opacity: 0.2;
  }

  .training-topic-grid,
  .training-modal-item {
    grid-template-columns: 1fr;
  }

  .training-content-section .training-topic-card {
    grid-template-columns: 30px 34px minmax(0, 1fr);
  }

  .training-signup-card {
    padding: 14px;
  }

  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    row-gap: 12px;
  }

  .topbar-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
  }

  .topbar-actions .btn {
    min-height: 40px;
  }

  .topbar-subtitle {
    font-size: 13px;
  }

  .main-panel,
  .side-panel {
    padding: 20px;
  }

  .list-panel-header,
  .task-board-header,
  .task-board-toolbar,
  .list-toolbar,
  .settings-body,
  .list-state-row {
    padding-inline: 18px;
  }

  .settings-user-modal-backdrop {
    padding: 10px;
  }

  .meetings-hero-panel,
  .shop-business-hero-panel,
  .meetings-overview-panel,
  .knowledge-panel {
    padding: 18px;
  }

  .meetings-hero-panel h3,
  .shop-business-hero-panel h3 {
    font-size: 30px;
  }

  .meetings-overview-grid,
  .knowledge-grid,
  .training-feature-body {
    grid-template-columns: 1fr;
  }

  .knowledge-card {
    grid-template-rows: 140px minmax(0, 1fr);
  }

  .knowledge-card img,
  .knowledge-card-fallback {
    height: 140px;
  }

  .content-modal-backdrop {
    padding: 10px;
  }

  .content-modal {
    max-height: calc(100vh - 20px);
  }

  .content-modal-header,
  .content-modal-body {
    padding-inline: 16px;
  }

  .lundl-generator-backdrop {
    padding: 10px;
  }

  .lundl-generator-modal {
    max-height: calc(100vh - 20px);
  }

  .lundl-generator-header,
  .lundl-generator-form,
  .lundl-generator-actions {
    padding-inline: 16px;
  }

  .lundl-generator-form {
    grid-template-columns: 1fr;
  }

  .lundl-generator-field {
    grid-column: 1 / -1;
  }

  .self-declaration-stepper,
  .self-declaration-mini-grid,
  .self-declaration-bafa-selected {
    grid-template-columns: 1fr;
  }

  .self-declaration-tech-toggle {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    padding: 12px;
  }

  .lundl-generator-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .settings-user-modal {
    max-height: calc(100vh - 20px);
  }

  .settings-user-table-status-col {
    width: 112px;
  }

  .settings-user-table-action-col {
    width: 64px;
  }

  .settings-user-table thead th,
  .settings-user-table tbody td {
    padding-inline: 10px;
  }

  .settings-user-cell {
    align-items: flex-start;
    gap: 8px;
  }

  .settings-user-meta {
    display: grid;
    gap: 2px;
  }

  .settings-user-action-menu {
    min-width: min(196px, calc(100vw - 32px));
  }

  .settings-user-modal-header,
  .settings-user-modal-body {
    padding-inline: 16px;
  }

  .settings-user-modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .settings-user-modal-footer .btn {
    justify-content: center;
    width: 100%;
  }

  .business-onboarding-overlay {
    align-items: stretch;
    padding: 12px;
  }

  .business-onboarding-shell {
    max-height: calc(100vh - 24px);
  }

  .business-onboarding-header,
  .business-onboarding-body,
  .business-onboarding-footer {
    padding-inline: 16px;
  }

  .business-onboarding-brand {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .business-onboarding-icon {
    width: 44px;
    height: 44px;
    font-size: 19px;
  }

  .business-onboarding-header h2 {
    font-size: 22px;
  }

  .business-onboarding-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .business-onboarding-actions {
    width: 100%;
    flex-direction: column-reverse;
  }

  .business-onboarding-actions .btn {
    width: 100%;
  }

  .settings-tab-header {
    grid-template-columns: 1fr;
  }

  .settings-tab-header .status-pill {
    grid-column: auto;
  }

  .settings-form-grid,
  .account-profile-form,
  .settings-color-grid,
  .settings-brand-preview,
  .settings-danger-section,
  .settings-integration-info,
  .account-storage-hero,
  .account-two-factor-setup,
  .account-device-card,
  .account-project-row,
  .account-billing-card {
    grid-template-columns: 1fr;
  }

  .settings-switch {
    width: 100%;
    justify-content: space-between;
    white-space: normal;
  }

  .settings-section {
    padding: 16px;
  }

  .account-device-card .status-pill,
  .account-device-card .btn {
    grid-column: auto;
  }

  .account-device-details {
    grid-template-columns: 1fr;
  }

  .account-two-factor-qr {
    justify-self: center;
  }

  .account-two-factor-stepper {
    grid-template-columns: 1fr;
  }

  .account-two-factor-qr-frame .account-two-factor-qr {
    width: 190px;
    height: 190px;
  }

  .account-two-factor-modal-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .account-two-factor-modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  .settings-action-row > div:last-child {
    width: 100%;
  }

  .settings-action-row .btn,
  .settings-brand-preview .btn,
  .settings-danger-section .btn,
  .account-avatar-actions .btn,
  .account-security-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .task-view-tabs {
    grid-auto-flow: row;
  }

  .task-view-tabs button {
    border-right: 0;
    border-bottom: 1px solid var(--hr-border);
    text-align: left;
  }

  .task-view-tabs button:last-child {
    border-bottom: 0;
  }

  .kanban-board {
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 86vw);
    grid-template-columns: none;
    padding: 14px;
  }

  .kanban-column {
    min-width: 280px;
  }

  .task-modal-backdrop {
    padding: 10px;
  }

  .task-small-modal,
  .task-picker-modal,
  .task-project-modal {
    max-height: calc(100vh - 20px);
  }

  .task-project-modal.task-platform-modal {
    height: calc(100dvh - 20px);
    max-height: none;
  }

  .task-platform-header {
    padding: 14px;
  }

  .task-platform-header .lundl-generator-title {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  .task-platform-header .lundl-generator-title-icon {
    width: 40px;
    height: 40px;
  }

  .task-platform-table {
    min-width: 680px;
  }

  .task-modal-header,
  .task-modal-footer,
  .task-modal-body {
    padding-inline: 14px;
  }

  .task-modal-header,
  .task-modal-footer,
  .task-file-row,
  .task-project-picker-card {
    align-items: stretch;
    flex-direction: column;
  }

  .task-activity-composer {
    grid-template-columns: 1fr;
  }

  .task-activity-send-button {
    justify-self: flex-start;
  }

  .task-activity-timeline {
    padding-left: 42px;
  }

  .task-activity-timeline::before {
    left: 14px;
  }

  .task-activity-rail-dot {
    left: -42px;
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .task-activity-card-header {
    align-items: flex-start;
  }

  .task-activity-actions {
    flex-wrap: wrap;
  }

  .task-list-manager-head {
    justify-content: flex-start;
  }

  .task-list-manager-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .task-list-manager-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .task-modal-footer .btn,
  .task-project-picker-card .btn {
    width: 100%;
    justify-content: center;
  }

  .task-checklist-action-grid {
    grid-template-columns: 1fr;
  }

  .task-checklist-library-head,
  .task-checklist-library-controls {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .task-checklist-library-head {
    display: grid;
  }

  .task-checklist-library-controls {
    justify-content: flex-start;
  }

  .task-checklist-library-controls .form-select {
    width: 100%;
  }

  .task-checklist-card-head {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .task-checklist-progress-summary,
  .task-checklist-progress-value,
  .task-checklist-card-actions {
    grid-column: 1 / -1;
  }

  .task-checklist-progress-value {
    text-align: left;
  }

  .task-checklist-card-actions {
    justify-content: flex-start;
  }

  .task-check-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .task-check-row.is-editing {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .task-check-row.is-editing .task-check-toggle {
    grid-column: 1;
  }

  .task-check-row.is-editing .task-check-content {
    grid-column: 2;
  }

  .task-check-actions {
    align-self: start;
  }

  .list-filter-grid {
    grid-template-columns: 1fr;
  }

  .list-reset-button {
    width: 100%;
  }

  .list-search-row .list-reset-button {
    width: auto;
  }

  .list-table {
    min-width: 860px;
  }

  .support-intro,
  .support-ticket-panel,
  .support-contact-panel {
    padding: 20px;
  }

  .support-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .support-category-grid,
  .support-form-grid,
  .support-contact-grid,
  .support-contact-training-grid {
    grid-template-columns: 1fr;
  }

  .support-tabs {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .support-tabs button {
    justify-content: flex-start;
  }

  .meeting-picture {
    width: 100%;
    min-width: 0;
  }

  .support-tab-badge {
    margin-left: auto;
  }

  .support-knowledge-hero,
  .support-knowledge-layout {
    padding: 18px;
  }

  .support-knowledge-search {
    grid-template-columns: 1fr;
  }

  .support-knowledge-search .btn {
    width: 100%;
  }

  .support-knowledge-list-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .support-article-card button {
    min-height: 0;
  }

  .support-article-detail > header,
  .support-article-body {
    padding-inline: 18px;
  }

  .support-article-detail .support-article-body {
    padding-inline: 18px;
  }

  .support-ticket-actions {
    justify-content: flex-start;
  }

  .support-ticket-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .support-ticket-row .status-pill {
    grid-column: 2;
    justify-self: flex-start;
  }

  .support-search {
    grid-template-columns: 1fr;
  }

  .support-search .btn,
  .support-ticket-form-actions .btn {
    justify-content: center;
  }

  .support-ticket-detail-shell {
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
  }

  .support-ticket-detail-dialog {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .support-ticket-detail-header,
  .support-ticket-reply-form {
    padding-inline: 16px;
  }

  .support-ticket-detail-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .support-ticket-detail-header .btn {
    width: 100%;
    justify-content: center;
  }

  .support-ticket-detail-body {
    padding: 16px;
  }

  .support-ticket-message,
  .support-ticket-message.is-customer {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }

  .support-ticket-message-avatar,
  .support-ticket-message.is-customer .support-ticket-message-avatar {
    grid-column: 1;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .support-ticket-message-bubble,
  .support-ticket-message.is-customer .support-ticket-message-bubble {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .support-ticket-message-head {
    flex-direction: column;
    gap: 4px;
  }

  .support-ticket-message-head time {
    text-align: left;
  }

  .module-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .module-row .badge {
    align-self: flex-start;
  }

  .recent-project-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .recent-project-meta {
    grid-column: 2;
    text-align: left;
  }

  .recent-project-footer {
    justify-content: stretch;
  }

  .recent-project-footer .btn {
    width: 100%;
  }

  .activity-item {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .activity-item .badge {
    grid-column: 2;
    justify-self: flex-start;
  }
}

@container dashboard-main (max-width: 749.98px) {
  .dashboard-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dashboard-metric-grid .metric-card {
    grid-template-rows: 34px minmax(0, 1fr);
    gap: 8px;
    min-height: 112px;
    padding: 12px;
  }

  .dashboard-metric-grid .metric-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    margin-bottom: 0;
    font-size: 14px;
  }

  .dashboard-metric-grid .metric-card span {
    min-height: 0;
    margin-bottom: 4px;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dashboard-metric-grid .metric-card strong {
    margin-bottom: 4px;
    font-size: 30px;
    line-height: 0.95;
  }

  .dashboard-metric-grid .metric-card p {
    display: -webkit-box;
    min-height: calc(1.3em * 2);
    overflow: hidden;
    font-size: 12px;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

@container dashboard-main (max-width: 349.98px) {
  .dashboard-metric-grid {
    grid-template-columns: 1fr;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1069.98px) {
    .dashboard-metric-grid {
      grid-template-columns: 1fr;
    }
  }
}

.mobile-nav-layout {
  min-height: auto;
  display: grid;
  gap: 18px;
  align-content: start;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.mobile-sidebar-footer {
  margin-top: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

#mobileNavigation .offcanvas-body {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

html.project-modal-open,
body.project-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.project-modal-open {
  width: 100%;
}

.project-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2040;
  background: var(--hr-app-bg);
  outline: 0;
}

.project-modal-shell {
  width: 100%;
  height: 100vh;
  height: var(--hr-viewport-height, 100dvh);
  max-height: var(--hr-viewport-height, 100dvh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  background: var(--hr-app-bg);
  overflow: hidden;
}

.project-modal-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.project-modal-title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  gap: 13px;
}

.project-modal-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.project-modal-title p,
.project-modal-title h2 {
  margin: 0;
}

.project-modal-title p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-modal-title h2 {
  max-width: min(56vw, 760px);
  overflow: hidden;
  color: var(--hr-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-modal-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.project-modal-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  white-space: nowrap;
}

.project-modal-close {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
}

.project-modal-close:hover,
.project-modal-close:focus-visible {
  color: var(--hr-text);
  border-color: #c5d4e7;
  background: #f6f8fb;
}

.project-modal-backdrop.is-offline-room-locked .project-modal-header-actions .btn:disabled,
.project-modal-backdrop.is-offline-room-locked .project-modal-close:disabled,
.project-modal-backdrop.is-offline-room-locked .project-modal-tabs button:disabled {
  border-color: #e2e8f0;
  color: #a1adba;
  background: #f3f6f9;
  cursor: not-allowed;
  opacity: 1;
}

.project-modal-backdrop.is-offline-room-locked .project-modal-close:disabled:hover,
.project-modal-backdrop.is-offline-room-locked .project-modal-close:disabled:focus-visible,
.project-modal-backdrop.is-offline-room-locked .project-modal-tabs button:disabled:hover,
.project-modal-backdrop.is-offline-room-locked .project-modal-tabs button:disabled:focus-visible {
  border-color: #e2e8f0;
  color: #a1adba;
  background: #f3f6f9;
  outline: 0;
}

.project-modal-backdrop.is-offline-room-locked .project-modal-tabs button:disabled {
  border-right-color: #e2e8f0;
}

.project-modal-tabs,
.project-subtabs {
  display: flex;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
}

.project-modal-tabs {
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--hr-border);
  background: #f8fafc;
}

.project-modal-tabs button,
.project-subtabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #506178;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.project-modal-tabs button {
  min-width: 148px;
  min-height: 58px;
  padding: 12px 16px;
  border: 0;
  border-right: 1px solid var(--hr-border);
}

.project-modal-tabs.is-compact {
  overflow-x: visible;
}

.project-modal-tabs.is-compact button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  line-height: 1.1;
}

.project-modal-tabs.is-compact .project-modal-tab-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-modal-tabs.is-compact button:last-child {
  border-right: 0;
}

.project-subtabs button {
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  font-weight: 700;
}

.project-modal-tabs button:hover,
.project-subtabs button:hover {
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.project-modal-tabs button.active {
  color: #fff;
  background: var(--hr-primary);
}

.project-subtabs button.active {
  color: var(--hr-primary-dark);
  border-color: #b9d3f0;
  background: #eef7ff;
}

.project-subtab-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  color: #fff;
  background: #dc3545;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.project-subtabs button:disabled {
  border-color: #e2e8f0;
  background: #f3f6f9;
  color: #a1adba;
  cursor: not-allowed;
  opacity: 1;
}

.project-subtabs button:disabled:hover,
.project-subtabs button:disabled:focus-visible {
  border-color: #e2e8f0;
  background: #f3f6f9;
  color: #a1adba;
  outline: 0;
}

.project-planning-done-badge {
  width: 16px;
  height: 16px;
  font-size: 9px;
}

.project-modal-body {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 22px 26px 32px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.project-modal-body.is-room-editor-open {
  overflow: hidden;
}

.project-modal-loading {
  min-height: 280px;
  display: grid;
  place-items: center;
  color: var(--hr-primary);
}

.project-modal-loading.inline {
  min-height: 140px;
}

.project-modal-loading .spinner-border {
  width: 2.75rem;
  height: 2.75rem;
}

.project-modal-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 44px 24px;
  color: var(--hr-muted);
  text-align: center;
  background: #fff;
}

.project-modal-empty > i {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 20px;
}

.project-modal-empty h3,
.project-modal-empty p {
  margin: 0;
}

.project-modal-empty h3 {
  color: var(--hr-text);
  font-size: 20px;
}

.project-modal-empty.is-error > i {
  color: var(--hr-red);
  background: #fff0f0;
}

.app-empty-hero,
.project-empty-hero {
  display: grid;
  justify-items: center;
  min-height: 260px;
  align-content: center;
  gap: 12px;
  padding: 58px 28px;
  color: var(--hr-muted);
  text-align: center;
}

.app-empty-hero .app-empty-hero-icon,
.app-empty-hero > i,
.project-empty-hero .project-empty-hero-icon {
  width: 76px;
  height: 76px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  color: var(--hr-primary);
  background: #eef7ff;
  box-shadow: inset 0 0 0 1px #cfe0f4;
  font-size: 34px;
}

.app-empty-hero.is-error .app-empty-hero-icon,
.app-empty-hero.is-error > i {
  color: var(--hr-red);
  background: #fff0f0;
  box-shadow: inset 0 0 0 1px #f0caca;
}

.app-empty-hero .app-empty-hero-kicker,
.project-empty-hero .project-empty-hero-kicker {
  margin: 0;
  color: var(--hr-primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-empty-hero h2,
.app-empty-hero h3,
.project-empty-hero h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 30px;
  line-height: 1.16;
  letter-spacing: 0;
}

.app-empty-hero .app-empty-hero-text,
.project-empty-hero .project-empty-hero-text {
  max-width: 520px;
  margin: 0;
  color: #506178;
  font-size: 17px;
  line-height: 1.5;
}

.app-empty-hero > p:not(.app-empty-hero-kicker),
.app-empty-hero .app-empty-hero-text {
  max-width: 520px;
  margin: 0;
  color: #506178;
  font-size: 17px;
  line-height: 1.5;
}

.app-empty-hero .btn,
.project-empty-hero .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 0 20px;
  border-radius: 8px;
  font-weight: 800;
}

.business-check-hero {
  min-height: min(520px, calc(100vh - 220px));
}

.business-check-hero .app-empty-hero-text {
  max-width: 760px;
}

.business-check-hero-note {
  width: min(100%, 680px);
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid #d8e5f3;
  border-radius: 8px;
  background: #f8fbff;
  color: #506178;
  text-align: left;
  line-height: 1.55;
}

.business-check-hero-note p {
  margin: 0;
}

.business-check-hero-note p + p {
  padding-top: 12px;
  border-top: 1px solid #d8e5f3;
}

.project-modal-panel-stack {
  display: grid;
  gap: 16px;
}

.project-detail-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.project-detail-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--hr-border);
}

.project-detail-panel-head h3 {
  flex: 1 1 180px;
  margin: 0;
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 700;
}

.project-detail-panel-head > .project-heating-surface-head-actions,
.project-detail-panel-head > .project-panel-actions {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}

.project-detail-panel-head .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.project-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.project-room-editor-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  overflow: hidden;
  border-bottom: 1px solid var(--hr-border);
  background: var(--hr-border);
}

.project-room-editor-meta-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  min-width: 0;
  padding: 11px 13px;
  background: #f8fafc;
}

.project-room-editor-meta-item > i {
  grid-row: span 2;
  color: var(--hr-primary);
}

.project-room-editor-meta-item > span {
  min-width: 0;
  color: var(--hr-muted);
  font-size: 12px;
  line-height: 1.1;
}

.project-room-editor-meta-item > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--hr-text);
  font-size: 13px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 2060;
  display: grid;
  align-items: stretch;
  justify-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: rgba(15, 23, 42, .42);
  overflow: hidden;
  overscroll-behavior: contain;
}

.project-room-editor-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: min(720px, calc(100vh - 72px));
  max-height: min(720px, calc(100dvh - 72px));
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-lg);
}

.project-room-editor-dialog.is-room-mode,
.project-room-editor-dialog.is-project-mode {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.project-room-editor-dialog.is-room-mode > header,
.project-room-editor-dialog.is-room-mode > .project-room-editor-tabs,
.project-room-editor-dialog.is-room-mode > footer,
.project-room-editor-dialog.is-project-mode > header,
.project-room-editor-dialog.is-project-mode > .project-room-editor-tabs,
.project-room-editor-dialog.is-project-mode > footer {
  flex: 0 0 auto;
}

.project-room-editor-dialog.is-room-mode > .project-room-editor-form,
.project-room-editor-dialog.is-project-mode > .project-room-editor-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  align-content: start;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.project-room-editor-offline-status {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 18px 0;
  padding: 10px 12px;
  border: 1px solid rgba(181, 122, 24, 0.28);
  border-radius: 8px;
  background: rgba(181, 122, 24, 0.08);
  color: #8a5a12;
  line-height: 1.35;
}

.project-room-editor-offline-status.is-error {
  border-color: rgba(180, 35, 63, 0.24);
  background: rgba(180, 35, 63, 0.08);
  color: #9f2f45;
}

.project-room-editor-offline-status > span {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-room-editor-offline-status > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-left: auto;
  white-space: nowrap;
}

.project-room-editor-dialog > header,
.project-room-editor-dialog > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}

.project-room-editor-dialog > header {
  border-bottom: 1px solid var(--hr-border);
}

.project-room-editor-dialog > header h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 17px;
}

.project-room-editor-dialog-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.project-room-editor-dialog-title h3 {
  min-width: 0;
}

.project-room-editor-title-help {
  width: 28px;
  height: 28px;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: transparent;
  color: var(--hr-primary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.project-room-editor-title-help:hover {
  color: var(--hr-primary-dark);
}

.project-room-editor-dialog > header > button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-muted);
}

.project-room-editor-dialog > footer {
  border-top: 1px solid var(--hr-border);
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
}

.project-room-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  overflow-x: visible;
  padding: 0;
  border-bottom: 1px solid var(--hr-border);
  background: #f8fafc;
  scrollbar-width: none;
}

.project-room-editor-tabs::-webkit-scrollbar {
  display: none;
}

.project-room-editor-tabs button {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 88px;
  min-height: 58px;
  padding: 8px 6px;
  border: 0;
  border-right: 1px solid var(--hr-border);
  border-bottom: 1px solid var(--hr-border);
  background: transparent;
  color: #506178;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
}

.project-room-editor-tabs button.active {
  color: #fff;
  background: var(--hr-primary);
}

.project-room-editor-tabs button:hover:not(.active) {
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.project-room-editor-tab-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-editor-tab-label.is-mobile {
  display: none;
}

.project-room-editor-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}

.project-room-editor-room-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 18px 18px;
}

.project-room-editor-room-form > .is-wide,
.project-room-editor-card-grid > .is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-room-form > .is-half,
.project-room-editor-legacy-card .is-half {
  grid-column: span 6;
}

.project-room-editor-form.is-compact {
  padding: 0;
}

.project-room-editor-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.project-room-editor-field.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
}

.project-room-editor-card.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.project-room-editor-card > header strong {
  color: var(--hr-text);
  font-size: 14px;
}

.project-room-editor-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}

.project-room-editor-field > span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-room-editor-floating-field {
  position: relative;
  display: block;
  min-width: 0;
}

.project-room-editor-floating-field:has(> .project-room-editor-floating-help) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
}

.project-room-editor-floating-field > span {
  position: absolute;
  top: 7px;
  left: 12px;
  z-index: 1;
  max-width: calc(100% - 24px);
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.project-room-editor-floating-field:has(> .project-room-editor-floating-help) > span {
  grid-column: 1;
  grid-row: 1;
  max-width: calc(100% - 24px);
}

.project-room-editor-floating-field .form-control,
.project-room-editor-floating-field .form-select {
  width: 100%;
  min-height: 58px;
  padding: 24px 12px 7px;
  border-radius: 6px;
  font-size: 15px;
}

.project-room-editor-floating-field:has(> .project-room-editor-floating-help) > .form-control,
.project-room-editor-floating-field:has(> .project-room-editor-floating-help) > .form-select {
  grid-column: 1;
  grid-row: 1;
}

.project-room-editor-floating-field.is-invalid > span {
  color: #9f2f45;
}

.project-room-editor-floating-field .form-control.is-invalid,
.project-room-editor-floating-field .form-select.is-invalid {
  border-color: #d94c5f;
  box-shadow: 0 0 0 0.18rem rgba(217, 76, 95, 0.12);
}

.project-room-editor-floating-field .form-select {
  padding-right: 36px;
}

.project-room-editor-field-error {
  display: block;
  grid-column: 1 / -1;
  margin-top: 5px;
  color: #9f2f45;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.project-room-editor-floating-textarea .form-control {
  min-height: 96px;
  padding-top: 24px;
  resize: vertical;
}

.project-room-editor-floating-input-group {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: stretch;
  min-width: 0;
}

.project-room-editor-floating-input-group.is-invalid > .btn {
  align-self: start;
  border-color: #d94c5f;
  color: #9f2f45;
  background: #fff7f7;
}

.project-room-editor-floating-input-group.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-floating-input-group > .project-room-editor-floating-field:only-child {
  grid-column: 1 / -1;
}

.project-room-editor-floating-input-group > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 58px;
  padding: 0;
  border-radius: 6px 0 0 6px;
}

.project-room-editor-floating-input-group > .project-room-editor-floating-field .form-control,
.project-room-editor-floating-input-group > .project-room-editor-floating-field .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.project-room-editor-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 700;
}

.project-room-editor-check.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-switch-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  color: var(--hr-text);
  font-size: 14px;
  line-height: 1.35;
}

.project-room-editor-switch-row .form-check-input {
  flex: 0 0 auto;
  width: 2.45em;
  height: 1.25em;
  margin-top: 1px;
  border-radius: 999px;
}

.project-room-editor-switch-row span {
  min-width: 0;
}

.project-room-editor-project-form {
  align-content: start;
}

.project-room-editor-address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.project-room-editor-address-row.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-address-row > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.project-room-editor-project-renewables .project-room-editor-card-grid + .project-room-editor-switch-row {
  margin-top: 4px;
}

.project-room-editor-legacy-card {
  gap: 12px;
  padding: 15px;
  background: #fff;
}

.project-room-editor-specials-card {
  border-color: #d8e0ea;
  background: #f1f5f9;
}

.project-room-editor-legacy-card > header strong {
  color: var(--hr-muted);
  font-size: 15px;
  font-weight: 500;
}

.project-room-editor-legacy-card .project-room-editor-card-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}

.project-room-editor-card-note {
  margin: -2px 0 2px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.35;
}

.project-room-editor-note-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-room-editor-note-card > span {
  color: var(--hr-muted);
  font-size: 15px;
  font-weight: 500;
}

.project-room-editor-note-card textarea {
  min-height: 6rem;
  resize: vertical;
}

.project-room-editor-input-unit {
  position: relative;
}

.project-room-editor-input-unit .form-control {
  padding-right: 42px;
}

.project-room-editor-input-unit small {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--hr-muted);
  font-size: 12px;
  transform: translateY(-50%);
}

.project-room-editor-input-with-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 7px;
}

.project-room-editor-input-with-tool .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.project-room-editor-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.project-room-editor-inline-actions.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(80px, 1fr)) auto;
  gap: 8px;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--hr-border);
  background: #f8fafc;
}

.project-room-editor-calculator-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100% - 24px));
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  border-left: 1px solid var(--hr-border);
  background: #fff;
  box-shadow: -18px 0 38px rgba(15, 23, 42, .18);
  outline: none;
  animation: project-room-editor-drawer-slide-in .22s cubic-bezier(.22, 1, .36, 1) both;
  will-change: transform;
}

.project-room-editor-offcanvas-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2070;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(15, 23, 42, 0.28);
}

.project-room-editor-offcanvas-backdrop .project-room-editor-calculator-drawer {
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  height: 100vh;
  height: 100dvh;
  max-height: none;
}

@media (min-width: 768px) {
  .project-room-editor-offcanvas-backdrop .project-room-editor-calculator-drawer:not(.project-room-editor-heating-drawer):not(.project-room-editor-heating-settings-drawer) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    height: 100vh;
    height: 100dvh;
    max-height: none;
  }
}

@keyframes project-room-editor-drawer-slide-in {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-room-editor-calculator-drawer {
    animation: none;
  }
}

.project-room-editor-calculator-drawer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-bottom: 1px solid var(--hr-border);
}

.project-room-editor-calculator-drawer > header h4 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
  color: var(--hr-text);
  font-size: 17px;
  overflow-wrap: anywhere;
}

.project-room-editor-calculator-drawer > header button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-muted);
}

.project-room-editor-calculator-body {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 0;
  min-width: 0;
  padding: 16px;
  overflow: auto;
  overflow-x: hidden;
}

.project-room-editor-calculator-target {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-room-editor-calculator-target.is-centered {
  text-align: center;
}

.project-room-editor-calculator-display {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 48px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--hr-text);
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
}

.project-room-editor-calculator-display.is-formula {
  color: var(--hr-muted);
  font-size: 14px;
}

.project-room-editor-calculator-display.is-result {
  font-size: 22px;
}

.project-room-editor-calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.project-room-editor-calculator-keys .btn {
  min-height: 44px;
  font-weight: 800;
}

.project-room-editor-uvalue-form {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px 18px 18px;
}

.project-room-editor-uvalue-info {
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-color: #d8e0ea;
  background: #f1f5f9;
}

.project-room-editor-uvalue-info p {
  margin: 0;
  color: var(--hr-text);
  font-size: 16px;
  line-height: 1.5;
}

.project-room-editor-uvalue-info-icon,
.project-room-editor-uvalue-copy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--hr-primary);
  font-size: 21px;
}

.project-room-editor-uvalue-card {
  gap: 12px;
  padding: 14px;
  background: #fff;
}

.project-room-editor-uvalue-list {
  display: grid;
  gap: 4px;
}

.project-room-editor-uvalue-item {
  display: grid;
  gap: 8px;
  padding: 2px 0 12px;
  border-bottom: 1px solid #edf2f7;
}

.project-room-editor-uvalue-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.project-room-editor-uvalue-item small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 500;
}

.project-room-editor-uvalue-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  padding-left: calc(2.45em + 10px);
}

.project-room-editor-uvalue-input-row > .btn,
.project-room-editor-uvalue-add-row > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 58px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.project-room-editor-uvalue-note {
  margin: 2px 0 0;
  color: var(--hr-muted);
  font-size: 13px;
}

.project-room-editor-uvalue-copy-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 4px -14px -14px;
  padding: 14px;
  border-top: 1px solid var(--hr-border);
  background: #f8fafc;
}

.project-room-editor-uvalue-copy-card p {
  margin: 0;
  color: var(--hr-text);
  font-size: 13px;
}

.project-room-editor-link-button {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hr-primary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.project-room-editor-uvalue-insulation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.project-room-editor-uvalue-insulation-note {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: var(--hr-muted);
  font-size: 14px;
  line-height: 1.45;
}

.project-room-editor-uvalue-insulation-note i {
  margin-top: 2px;
  color: var(--hr-primary);
}

.project-room-editor-uvalue-copy-drawer {
  width: min(390px, calc(100% - 24px));
}

.project-room-editor-uvalue-copy-body {
  gap: 12px;
}

.project-room-editor-uvalue-copy-body > p {
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
}

.project-room-editor-uvalue-copy-list {
  display: grid;
  gap: 8px;
}

.project-room-editor-uvalue-copy-list button {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-text);
  text-align: left;
}

.project-room-editor-uvalue-copy-list button:hover:not(:disabled) {
  border-color: var(--hr-primary);
  background: #f7fbff;
}

.project-room-editor-uvalue-copy-list span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.project-room-editor-uvalue-copy-list strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-editor-uvalue-copy-list small,
.project-room-editor-uvalue-copy-list em {
  color: var(--hr-muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.project-room-editor-uvalue-calculator-drawer {
  width: min(430px, calc(100% - 24px));
}

.project-room-editor-uvalue-calculator-body {
  gap: 12px;
}

.project-room-editor-uvalue-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, .42fr) 52px;
  gap: 8px;
  align-items: stretch;
}

.project-room-editor-uvalue-table-wrap {
  overflow: auto;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.project-room-editor-uvalue-table {
  margin: 0;
  font-size: 13px;
}

.project-room-editor-uvalue-table th {
  color: var(--hr-muted);
  font-size: 12px;
}

.project-room-editor-uvalue-table th:last-child,
.project-room-editor-uvalue-table td:last-child {
  width: 44px;
  text-align: right;
}

.project-room-editor-uvalue-result {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--hr-text);
  font-weight: 800;
}

.project-room-editor-calculator.is-uvalue {
  grid-template-columns: 1fr;
}

.project-room-editor-openings-form {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px 18px 18px;
}

.project-room-editor-opening-card {
  gap: 10px;
  padding: 14px;
  background: #f8fafc;
}

.project-room-editor-opening-card > header {
  justify-content: flex-start;
}

.project-room-editor-opening-card h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 800;
}

.project-room-editor-opening-note {
  margin: -2px 0 2px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.4;
}

.project-room-editor-opening-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 8px;
  align-items: center;
}

.project-room-editor-opening-help {
  border: 0;
  padding: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 58px;
  color: var(--hr-primary);
  font-size: 15px;
  cursor: pointer;
}

.project-room-editor-inline-help {
  border: 0;
  padding: 0;
  margin-left: 6px;
  background: transparent;
  color: var(--hr-primary);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.project-room-editor-floating-help {
  position: relative;
  top: auto;
  right: auto;
  z-index: 3;
  width: 24px;
  height: 58px;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  align-self: stretch;
  background: transparent;
  color: var(--hr-primary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.project-room-editor-inline-help:hover,
.project-room-editor-floating-help:hover,
.project-room-editor-opening-help:hover {
  color: var(--hr-primary-dark);
}

.project-room-editor-help-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2085;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.28);
}

.project-room-editor-help-drawer {
  width: min(460px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: -24px 0 60px rgba(15, 23, 42, 0.22);
  animation: projectRoomEditorHelpIn 0.2s ease-out;
}

.project-room-editor-help-drawer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--hr-border);
}

.project-room-editor-help-drawer > header h4 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--hr-text);
  font-size: 19px;
  font-weight: 800;
}

.project-room-editor-help-drawer > header h4 i {
  color: var(--hr-primary);
}

.project-room-editor-help-drawer > header button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-muted);
}

.project-room-editor-help-drawer > header button:hover,
.project-room-editor-help-drawer > header button:focus-visible {
  border-color: #c5d4e7;
  background: #f6f8fb;
  color: var(--hr-text);
}

.project-room-editor-help-body {
  overflow: auto;
  padding: 22px;
  color: var(--hr-text);
}

.project-room-editor-help-loading {
  min-height: 220px;
  justify-content: center;
}

.project-room-editor-help-error-hero {
  min-height: 260px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  padding: 30px 24px;
  border: 1px dashed color-mix(in srgb, var(--hr-primary) 28%, var(--hr-border));
  border-radius: 8px;
  background: #fff;
  color: var(--hr-muted);
  text-align: center;
}

.project-room-editor-help-error-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 14px;
  color: var(--hr-primary);
  background: color-mix(in srgb, var(--hr-primary) 10%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hr-primary) 22%, #fff);
  font-size: 24px;
}

.project-room-editor-help-error-kicker {
  margin: 0;
  color: var(--hr-primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-room-editor-help-error-hero h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: 0;
}

.project-room-editor-help-error-hero p:not(.project-room-editor-help-error-kicker) {
  max-width: 330px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 15px;
  line-height: 1.5;
}

.project-room-editor-help-content {
  font-size: 15px;
  line-height: 1.6;
}

.project-room-editor-help-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.project-room-editor-help-content p:last-child {
  margin-bottom: 0;
}

@keyframes projectRoomEditorHelpIn {
  from {
    transform: translateX(24px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.project-room-editor-opening-input-group > .btn i {
  font-size: 24px;
}

.project-room-editor-opening-collapse {
  display: grid;
  gap: 10px;
}

.project-room-editor-opening-uvalue-box {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-room-editor-opening-uvalue-box .project-room-editor-switch-row {
  padding: 0;
}

.project-room-editor-opening-uvalue-field {
  max-width: 360px;
}

.project-room-editor-uvalue-row,
.project-room-editor-own-surface-header,
.project-room-editor-own-surface-row,
.project-room-editor-app-surface-header,
.project-room-editor-app-surface-row {
  display: grid;
  gap: 8px;
  align-items: center;
}

.project-room-editor-uvalue-row {
  grid-template-columns: minmax(0, 1.4fr) minmax(90px, .7fr) minmax(90px, .7fr) 38px;
}

.project-room-editor-own-surfaces {
  display: grid;
  gap: 10px;
}

.project-room-editor-own-surfaces.is-wide,
.project-room-editor-media-block.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-own-surfaces header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-room-editor-expert-surfaces {
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
}

.project-room-editor-expert-surfaces > header strong {
  color: var(--hr-text);
  font-size: 14px;
}

.project-room-editor-volume-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 2px;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-room-editor-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.project-room-editor-section-head > div {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.project-room-editor-section-head .form-select {
  width: min(230px, 100%);
}

.project-room-editor-own-surface-header,
.project-room-editor-own-surface-row {
  grid-template-columns: minmax(0, 1.1fr) minmax(76px, .8fr) minmax(70px, .6fr) minmax(86px, .8fr) 38px;
}

.project-room-editor-app-surface-header,
.project-room-editor-app-surface-row {
  grid-template-columns: minmax(0, 1.05fr) minmax(72px, .7fr) minmax(64px, .55fr) minmax(78px, .7fr) 38px;
}

.project-room-editor-own-surface-header,
.project-room-editor-app-surface-header {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.project-room-editor-media-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.project-room-editor-media-dropzone {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px dashed transparent;
  border-radius: 8px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.project-room-editor-media-dropzone.is-upload-drop-active {
  border-color: #3371b7;
  background: #f6fbff;
  box-shadow: 0 0 0 3px rgba(51, 113, 183, .13);
}

.project-room-editor-media-dropzone.is-uploading-images {
  cursor: progress;
}

.project-room-editor-heating-editor,
.project-room-editor-heating-list {
  display: grid;
  gap: 10px;
}

.project-room-editor-heating-editor.is-wide,
.project-room-editor-heating-list.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-add-heating-button {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 800;
}

.project-room-editor-heating-actions {
  display: flex;
  width: 100%;
}

.project-room-editor-heating-editor {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-room-editor-heating-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
}

.project-room-editor-heating-row:hover {
  border-color: color-mix(in srgb, var(--hr-primary) 34%, var(--hr-border));
  background: #fff;
}

.project-room-editor-heating-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-room-editor-heating-row strong,
.project-room-editor-heating-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-editor-heating-row small {
  color: var(--hr-muted);
  font-size: 12px;
}

.project-room-editor-heating-card-list {
  display: grid;
  gap: 14px;
}

.project-room-editor-heating-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.project-room-editor-heating-card.is-upload-drop-active {
  border-color: #3371b7;
  background: #f6fbff;
  box-shadow: 0 0 0 3px rgba(51, 113, 183, .13), var(--hr-shadow-sm);
}

.project-room-editor-heating-card.is-uploading-images {
  cursor: progress;
}

.project-room-editor-heating-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  gap: 10px;
  align-content: center;
  padding: 18px;
  background: rgba(255, 255, 255, .82);
  color: var(--hr-text);
  text-align: center;
  backdrop-filter: blur(2px);
}

.project-room-editor-heating-upload-overlay .spinner-border {
  width: 34px;
  height: 34px;
  color: var(--hr-primary);
}

.project-room-editor-heating-upload-overlay strong {
  font-size: 14px;
  line-height: 1.25;
}

.project-room-editor-heating-card-main {
  display: grid;
  grid-template-columns: minmax(126px, .34fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
}

.project-room-editor-heating-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid #dbe5f1;
  border-radius: 8px;
  background: #eef3f8;
}

.project-room-editor-heating-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.project-room-editor-heating-card-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #7d8da1;
}

.project-room-editor-heating-card-placeholder i {
  font-size: 2rem;
}

.project-room-editor-heating-picture-count {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(16, 32, 63, .78);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.project-room-editor-heating-card-content {
  min-width: 0;
  padding-top: 2px;
}

.project-room-editor-heating-card-content h4 {
  margin: 0 0 8px;
  color: var(--hr-text);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.project-room-editor-heating-card-details {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.project-room-editor-heating-card-details > div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e5edf6;
  border-radius: 8px;
  background: #f8fafc;
}

.project-room-editor-heating-card-details span {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: uppercase;
}

.project-room-editor-heating-card-details strong {
  min-width: 0;
  color: #253247;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.project-room-editor-heating-pictures {
  align-items: center;
  margin-top: 10px;
}

.project-room-editor-heating-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.project-room-editor-heating-note-panel {
  border-top: 1px solid transparent;
  background: #f8fafc;
  transition: border-color 0.2s ease;
}

.project-room-editor-heating-note-panel.is-open {
  border-top-color: var(--hr-border);
}

.project-room-editor-heating-note-panel.is-open .project-heating-surface-collapse {
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.project-room-editor-heating-note-panel-inner {
  padding: 12px 14px;
}

.project-room-editor-heating-note-panel .project-field-actions .btn {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.2;
}

.project-room-editor-heating-card-footer {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--hr-border);
  background: #f8fafc;
}

.project-room-editor-heating-card-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 400;
}

.project-room-editor-heating-item {
  display: grid;
  grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
}

.project-room-editor-heating-item .project-heating-surface-pictures {
  grid-column: 1 / -1;
}

.project-room-editor-catalog {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
}

.project-room-editor-catalog.is-wide {
  grid-column: 1 / -1;
}

.project-room-editor-catalog button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: var(--hr-text);
  text-align: left;
}

.project-room-editor-catalog button.active {
  border-color: var(--hr-primary);
  background: #eef6ff;
}

.project-room-editor-catalog strong {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-editor-catalog small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-room-heating-empty {
  min-height: 360px;
}

.project-room-editor-heating-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 2075;
  width: min(860px, 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
}

.project-room-editor-heating-settings-drawer {
  width: min(620px, 100vw);
}

@media (min-width: 768px) {
  .project-room-editor-heating-drawer {
    width: min(860px, 100vw);
  }

  .project-room-editor-heating-settings-drawer {
    width: min(620px, 100vw);
  }
}

.project-room-editor-heating-drawer-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: none;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.project-room-editor-heating-drawer .project-room-editor-heating-catalog-flow,
.project-room-editor-heating-drawer .project-room-editor-heating-floor-flow,
.project-room-editor-heating-drawer .project-room-editor-heating-manual-form,
.project-room-editor-heating-drawer .project-room-editor-heating-settings-grid,
.project-room-editor-heating-drawer .project-hydraulic-valve-panel,
.project-room-editor-heating-drawer .project-hydraulic-valve-steps,
.project-room-editor-heating-drawer .project-exchange-editor-subcategory-panel,
.project-room-editor-heating-drawer .project-exchange-editor-list {
  min-width: 0;
  max-width: 100%;
}

.project-room-editor-heating-kind-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.project-room-editor-heating-kind-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
}

.project-room-editor-heating-kind-tabs button:hover:not(:disabled),
.project-room-editor-heating-kind-tabs button:focus-visible {
  border-color: color-mix(in srgb, var(--hr-primary) 42%, var(--hr-border));
  outline: none;
}

.project-room-editor-heating-kind-tabs button.active {
  border-color: color-mix(in srgb, var(--hr-primary) 56%, var(--hr-border));
  background: color-mix(in srgb, var(--hr-primary) 8%, #fff);
  color: var(--hr-primary);
}

.project-room-editor-heating-kind-tabs button:disabled {
  opacity: .65;
}

.project-room-editor-heating-catalog-flow {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.project-room-editor-heating-drawer .project-room-editor-heating-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 0;
  overflow: visible;
}

.project-room-editor-heating-drawer .project-exchange-editor-category {
  max-width: 100%;
  white-space: normal;
}

.project-room-editor-heating-drawer .project-exchange-editor-subcategory-panel {
  margin-bottom: 0;
}

.project-room-editor-heating-drawer .project-exchange-editor-subcategory-head {
  min-width: 0;
}

.project-room-editor-heating-drawer .project-exchange-editor-subcategory-head span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-room-editor-heating-drawer .project-exchange-editor-subcategory-head small {
  min-width: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-editor-heating-drawer .project-exchange-editor-subcategories {
  min-width: 0;
}

.project-room-editor-heating-drawer .project-exchange-editor-subcategory {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.project-room-editor-selected-heater {
  margin-bottom: 2px;
}

.project-room-editor-heating-results {
  display: grid;
  min-height: 260px;
  max-height: none;
  gap: 8px;
  margin-top: 0;
  overflow: visible;
}

.project-room-editor-heating-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
}

.project-room-editor-heating-sections p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.4;
}

.project-room-editor-heating-sections .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.project-exchange-editor-list.project-room-editor-heating-results {
  margin-top: 0;
  overflow: visible;
}

.project-room-editor-heating-results-table-wrap {
  min-height: 260px;
  overflow: auto;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-room-editor-heating-results-table {
  min-width: 640px;
  margin: 0;
  color: var(--hr-text);
}

.project-room-editor-heating-drawer .project-room-editor-heating-results-table {
  min-width: 640px;
}

.project-room-editor-heating-results-table th {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  background: #f8fafc;
  border-bottom-color: var(--hr-border);
}

.project-room-editor-heating-results-table td {
  border-color: var(--hr-border);
}

.project-room-editor-heating-results-table tbody tr.is-selected td {
  background: color-mix(in srgb, var(--hr-primary) 7%, #fff);
}

.project-room-editor-heating-results-table .project-raw-line {
  display: block;
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 12px;
  line-height: 1.3;
}

.project-room-editor-heating-results-table .btn {
  white-space: nowrap;
}

.project-room-editor-heating-drawer .project-modal-loading.inline,
.project-room-editor-heating-drawer .project-exchange-editor-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 22px;
  border: 1px dashed var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--hr-muted);
  text-align: center;
}

.project-room-editor-heating-drawer .project-exchange-editor-empty i {
  color: var(--hr-primary);
  font-size: 22px;
}

.project-room-editor-heating-drawer .project-exchange-editor-empty h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
}

.project-room-editor-heating-drawer .project-exchange-editor-empty p {
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.35;
}

.project-room-editor-heating-manual-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
}

.project-room-editor-manual-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.project-room-editor-manual-field.is-wide,
.project-room-editor-manual-divider {
  grid-column: 1 / -1;
}

.project-room-editor-manual-field p {
  margin: 0;
  color: var(--hr-muted);
  font-size: 12px;
  line-height: 1.35;
}

.project-room-editor-manual-divider {
  width: 100%;
  margin: 2px 0;
  border: 0;
  border-top: 1px solid var(--hr-border);
}

.project-room-editor-heating-floor-flow {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.project-room-editor-floor-panel {
  margin-bottom: 0;
}

.project-room-editor-floor-options .project-exchange-editor-subcategory {
  min-height: 42px;
  padding: 9px 13px;
  font-size: 13px;
}

.project-room-editor-floor-area-panel {
  gap: 12px;
}

.project-room-editor-floor-area-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.project-room-editor-floor-area-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.project-room-editor-heating-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfdff;
}

.project-room-editor-heating-settings-summary {
  margin: 0;
}

.project-room-editor-heating-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.project-room-editor-heating-circuit-panel {
  grid-column: 1 / -1;
}

.project-room-editor-heating-distance-range {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfdff;
}

.project-room-editor-heating-distance-range > span {
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
}

.project-room-editor-heating-distance-range strong {
  color: var(--hr-primary);
}

.project-room-editor-heating-settings-drawer .project-hydraulic-valve-panel {
  min-width: 0;
  max-width: 100%;
  background: #f8fafc;
}

.project-room-editor-heating-settings-drawer .project-hydraulic-valve-head {
  flex-wrap: wrap;
}

.project-room-editor-heating-settings-drawer .project-hydraulic-valve-head .btn {
  white-space: nowrap;
}

.project-room-heating-valve-favorites {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-room-heating-valve-favorites > span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
}

.project-room-heating-valve-favorites > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.project-room-heating-valve-favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--hr-border);
  border-radius: 999px;
  background: #fff;
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.project-room-heating-valve-favorite:hover:not(:disabled),
.project-room-heating-valve-favorite:focus-visible {
  border-color: color-mix(in srgb, var(--hr-primary) 46%, var(--hr-border));
  color: var(--hr-primary);
  outline: none;
}

.project-room-heating-valve-favorite.active {
  border-color: var(--hr-primary);
  background: color-mix(in srgb, var(--hr-primary) 9%, #fff);
  color: var(--hr-primary);
}

.project-room-editor-heating-settings-drawer .project-hydraulic-valve-options {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.project-room-editor-heating-drawer .project-hydraulic-valve-options .project-exchange-editor-subcategory {
  justify-content: flex-start;
  text-align: left;
}

.project-room-editor-heating-drawer .project-hydraulic-valve-options.is-wide .project-exchange-editor-subcategory {
  flex: 1 1 230px;
}

.project-room-editor-heating-drawer-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.project-room-editor-heating-drawer-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.project-room-editor-muted {
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
}

.project-room-editor-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.project-room-inline-action.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 7px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.project-room-inline-action i {
  font-size: 11px;
}

@media (max-width: 767.98px) {
  .project-room-editor-overlay {
    align-items: stretch;
    padding: 12px;
  }

  .project-room-editor-dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .project-room-editor-dialog.is-room-mode,
  .project-room-editor-dialog.is-project-mode {
    width: 100%;
    height: 100%;
    max-height: 100%;
  }

  .project-room-editor-form {
    grid-template-columns: 1fr;
  }

  .project-room-editor-card-grid {
    grid-template-columns: 1fr;
  }

  .project-room-editor-address-row {
    grid-template-columns: 1fr;
  }

  .project-room-editor-room-form,
  .project-room-editor-legacy-card .project-room-editor-card-grid {
    grid-template-columns: 1fr;
  }

  .project-room-editor-room-form > .is-half,
  .project-room-editor-legacy-card .is-half {
    grid-column: 1 / -1;
  }

  .project-room-editor-calculator,
  .project-room-editor-uvalue-row,
  .project-room-editor-uvalue-input-row,
  .project-room-editor-uvalue-insulation,
  .project-room-editor-uvalue-add-row,
  .project-room-editor-own-surface-row,
  .project-room-editor-app-surface-row,
  .project-room-editor-section-head,
  .project-room-editor-heating-row,
  .project-room-editor-heating-item,
  .project-room-editor-heating-sections,
  .project-room-editor-heating-settings-grid {
    grid-template-columns: 1fr;
  }

  .project-room-editor-own-surface-header,
  .project-room-editor-app-surface-header {
    display: none;
  }

  .project-room-editor-uvalue-input-row {
    padding-left: 0;
  }

  .project-room-editor-uvalue-copy-list span {
    display: grid;
  }

  .project-room-editor-calculator-drawer,
  .project-room-editor-heating-drawer,
  .project-room-editor-heating-settings-drawer,
  .project-room-editor-uvalue-copy-drawer,
  .project-room-editor-uvalue-calculator-drawer {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-left: 0;
  }

  .project-room-editor-offcanvas-backdrop .project-room-editor-calculator-drawer {
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border-left: 0;
    box-shadow: none;
    animation: none;
    transform: none;
  }

  .project-room-editor-heating-drawer,
  .project-room-editor-heating-settings-drawer {
    top: 0;
    bottom: 0;
    width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
  }

  .project-room-editor-calculator-drawer > header,
  .project-room-editor-calculator-body,
  .project-room-editor-heating-drawer-body,
  .project-room-editor-heating-drawer-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .project-room-editor-calculator-drawer,
  .project-room-editor-calculator-body,
  .project-room-editor-heating-drawer-body,
  .project-room-editor-heating-catalog-flow,
  .project-room-editor-heating-floor-flow,
  .project-room-editor-heating-manual-form,
  .project-exchange-editor-card,
  .project-exchange-editor-subcategory-panel,
  .project-exchange-editor-list,
  .project-room-editor-uvalue-copy-list,
  .project-room-editor-uvalue-table-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .project-room-editor-heating-drawer-body {
    overflow-x: hidden;
  }

  .project-room-editor-heating-kind-tabs {
    gap: 6px;
  }

  .project-room-editor-heating-kind-tabs button {
    flex-direction: column;
    gap: 4px;
    min-height: 54px;
    padding: 7px 6px;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
  }

  .project-exchange-editor-subcategory-head {
    align-items: flex-start;
  }

  .project-exchange-editor-subcategory-head small,
  .project-hydraulic-valve-step-actions small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .project-hydraulic-valve-step-actions {
    min-width: 0;
  }

  .project-exchange-editor-subcategory,
  .project-room-heating-valve-favorite {
    max-width: 100%;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .project-room-editor-heating-results {
    height: max-content;
    overflow: visible;
  }

  .project-room-editor-heating-results-table-wrap {
    min-height: 0;
    overflow: hidden !important;
    border: 1px solid var(--hr-border) !important;
    border-radius: 8px;
    background: #fff !important;
  }

  .project-room-editor-heating-results table {
    display: grid;
    width: 100% !important;
    min-width: 0 !important;
  }

  .project-room-editor-heating-results thead {
    display: none;
  }

  .project-room-editor-heating-results tbody {
    display: grid;
    gap: 0;
    width: 100%;
  }

  .project-room-editor-heating-results tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
    min-width: 0;
    padding: 10px 11px;
    border: 0;
    border-bottom: 1px solid var(--hr-border);
    border-radius: 0;
    background: #fff;
  }

  .project-room-editor-heating-results tr + tr {
    margin-top: 0;
  }

  .project-room-editor-heating-results tr:last-child {
    border-bottom: 0;
  }

  .project-room-editor-heating-results td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  .project-room-editor-heating-results table > :not(caption) > * > * {
    background: transparent !important;
    border-bottom-width: 0 !important;
    box-shadow: none !important;
  }

  .project-room-editor-heating-results td:first-child {
    display: grid;
    grid-column: 1;
    gap: 1px;
  }

  .project-room-editor-heating-results td:nth-child(2),
  .project-room-editor-heating-results td:nth-child(3) {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    grid-column: 1;
    gap: 5px;
    color: var(--hr-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  .project-room-editor-heating-results td:nth-child(2)::before,
  .project-room-editor-heating-results td:nth-child(3)::before {
    flex: 0 0 auto;
    color: var(--hr-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .project-room-editor-heating-results td:nth-child(2)::before {
    content: "Maße:";
  }

  .project-room-editor-heating-results td:nth-child(3)::before {
    content: "Normleistung:";
  }

  .project-room-editor-heating-results td:last-child {
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-content: flex-start;
    margin-top: 0;
  }

  .project-room-editor-heating-results td:last-child .btn {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }

  .project-room-editor-heating-card-main {
    grid-template-columns: 1fr;
  }

  .project-room-editor-heating-card-media {
    max-width: 210px;
  }

  .project-room-editor-heating-card-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 6px;
    padding: 9px 10px;
  }

  .project-room-editor-heating-card-footer:has(> button:nth-of-type(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .project-room-editor-heating-card-footer .btn {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    flex-direction: column;
    gap: 3px;
    padding: 6px 3px;
    font-size: 11.5px;
    line-height: 1.1;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .project-room-editor-heating-card-footer .btn i {
    font-size: 13px;
    line-height: 1;
  }

  .project-room-editor-floor-area-actions {
    grid-template-columns: 1fr;
  }

  .project-room-editor-heating-kind-tabs,
  .project-room-editor-heating-manual-form,
  .project-room-editor-heating-settings {
    grid-template-columns: 1fr;
  }

  .project-room-editor-heating-drawer-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

@media (max-width: 575.98px) {
  .project-room-editor-overlay.is-room-mode {
    inset: 0;
    padding: 0;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-dialog.is-room-mode {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-dialog > header,
  .project-room-editor-overlay.is-room-mode .project-room-editor-dialog > footer {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-dialog > header {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-dialog > footer {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-dialog > .project-room-editor-offline-status.project-upload-message {
    margin-right: max(14px, env(safe-area-inset-right));
    margin-left: max(14px, env(safe-area-inset-left));
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-tabs {
    display: grid;
    grid-template-columns: repeat(var(--project-room-editor-tab-count, 5), minmax(0, 1fr));
    overflow: visible;
    padding-right: max(10px, env(safe-area-inset-right));
    padding-left: max(10px, env(safe-area-inset-left));
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-tabs button {
    min-width: 0;
    min-height: 50px;
    padding: 6px 3px;
    border-bottom: 0;
    font-size: 13px;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-tabs button i {
    font-size: 17px;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-tab-label.is-full {
    display: none;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-tab-label.is-mobile {
    display: block;
    font-size: 10px;
    line-height: 1.05;
    white-space: normal;
  }
}

@media (max-width: 359.98px) {
  .project-room-editor-overlay.is-room-mode .project-room-editor-tabs button {
    min-height: 46px;
    padding: 6px 2px;
    gap: 2px;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-tabs button i {
    font-size: 18px;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-tabs button:not(.active) .project-room-editor-tab-label {
    display: none;
  }

  .project-room-editor-overlay.is-room-mode .project-room-editor-tabs button.active .project-room-editor-tab-label.is-mobile {
    display: block;
    font-size: 9px;
  }
}

.project-sales-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.project-sales-nav {
  justify-content: flex-start;
}

.project-sales-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.project-sales-summary-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid #d7e4f2;
  border-radius: 8px;
  background: #f7fbff;
}

.project-sales-summary-grid span {
  display: block;
  color: #506178;
  font-size: 12px;
  font-weight: 600;
}

.project-sales-summary-grid strong {
  display: block;
  margin-top: 4px;
  color: var(--hr-text);
  font-size: 21px;
  font-weight: 700;
}

.project-sales-count {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #506178;
  background: #f2f6fb;
  font-size: 13px;
}

.project-sales-list-panel .project-detail-panel-head {
  padding-bottom: 8px;
  border-bottom: 0;
}

.project-sales-table-wrap {
  background: #fff;
}

.project-sales-table {
  min-width: 920px;
}

.project-sales-offer-title-cell {
  min-width: 240px;
}

.project-sales-offer-number {
  color: var(--hr-text);
}

.project-sales-offer-note {
  display: block;
  margin-top: 3px;
  max-width: 240px;
  color: #506178;
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-sales-offer-location {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.project-sales-offer-location i {
  color: #7c8da3;
  font-size: 11px;
}

.project-sales-status,
.project-sales-document {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #d9e2ec;
  border-radius: 999px;
  color: #506178;
  background: #f5f7fa;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.project-sales-status::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: currentColor;
}

.project-sales-status-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 140px;
}

.project-sales-status-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.project-sales-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #7c8da3;
}

.project-sales-status-dot.is-success {
  background: #2fa85c;
}

.project-sales-status-dot.is-danger {
  background: #d64c4c;
}

.project-sales-status-dot.is-info {
  background: var(--hr-primary);
}

.project-sales-status-dot.is-warning {
  background: #d79a23;
}

.project-sales-status-trigger {
  min-height: 34px;
  min-width: 142px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid #d8e2ee;
  border-radius: 10px;
  color: #506178;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.project-sales-status-trigger:hover,
.project-sales-status-trigger:focus-visible,
.project-sales-status-trigger.is-open {
  border-color: #8bbaf0;
  box-shadow: 0 0 0 3px rgba(47, 111, 171, 0.12), 0 8px 20px rgba(15, 23, 42, 0.08);
  outline: none;
}

.project-sales-status-trigger:disabled {
  cursor: wait;
  opacity: .72;
}

.project-sales-status-trigger i {
  margin-left: auto;
  color: currentColor;
  font-size: 11px;
}

.project-sales-status-menu {
  position: fixed;
  z-index: 1500;
  min-width: 178px;
  max-width: min(240px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid #d8e2ee;
  border-radius: 10px;
  color: var(--hr-text);
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.project-sales-status-option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  color: #39475b;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.project-sales-status-option:hover,
.project-sales-status-option:focus-visible,
.project-sales-status-option.active {
  color: var(--hr-primary-dark);
  background: #edf5ff;
  outline: none;
}

.project-sales-status.is-success {
  color: #176b38;
  border-color: #c8ead4;
  background: #effaf3;
}

.project-sales-status-trigger.is-success {
  color: #176b38;
  border-color: #c8ead4;
  background: #effaf3;
}

.project-sales-status.is-danger {
  color: #9f2f2f;
  border-color: #f1c5c5;
  background: #fff2f2;
}

.project-sales-status-trigger.is-danger {
  color: #9f2f2f;
  border-color: #f1c5c5;
  background: #fff2f2;
}

.project-sales-status.is-info {
  color: var(--hr-primary-dark);
  border-color: #cfe0f4;
  background: #eef7ff;
}

.project-sales-status-trigger.is-info {
  color: var(--hr-primary-dark);
  border-color: #cfe0f4;
  background: #eef7ff;
}

.project-sales-status.is-warning {
  color: #89621b;
  border-color: #f0d497;
  background: #fff8ea;
}

.project-sales-status-trigger.is-warning {
  color: #89621b;
  border-color: #f0d497;
  background: #fff8ea;
}

.project-sales-document.is-ready {
  color: #176b38;
  border-color: #c8ead4;
  background: #effaf3;
}

.project-sales-document-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 260px;
}

.project-sales-pdf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  min-height: 30px;
  padding-block: 4px;
  font-weight: 500;
  white-space: nowrap;
}

.project-sales-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.project-sales-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}

.project-offer-feedback-modal {
  max-width: 760px;
}

.project-offer-feedback-body {
  padding: 18px;
}

.project-offer-feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.project-sales-empty {
  min-height: 220px;
}

.project-sales-offer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1270;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.46);
}

.project-sales-offer-modal {
  width: min(1480px, 100%);
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: #f6f8fb;
  box-shadow: 0 24px 80px rgba(13, 31, 58, 0.24);
}

.project-sales-offer-readonly-alert {
  margin: 16px 16px 0;
}

.project-sales-offer-readonly-alert > div {
  display: grid;
  gap: 2px;
}

.project-sales-copy-backdrop {
  z-index: 1275;
}

.project-sales-copy-modal {
  width: min(760px, 100%);
}

.project-sales-copy-body {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
  padding: 16px;
}

.project-sales-copy-source {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
}

.project-sales-copy-source span,
.project-sales-copy-source small {
  color: #66758a;
  font-size: 12px;
  font-weight: 700;
}

.project-sales-copy-source strong {
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 850;
}

.project-sales-copy-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.project-sales-copy-projects {
  display: grid;
  gap: 8px;
}

.project-sales-copy-project {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  text-align: left;
}

.project-sales-copy-project:hover,
.project-sales-copy-project:focus-visible,
.project-sales-copy-project.active {
  border-color: var(--hr-primary);
  background: #eff6ff;
}

.project-sales-copy-project span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.project-sales-copy-project strong,
.project-sales-copy-project small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-sales-copy-project strong {
  font-size: 14px;
  font-weight: 850;
}

.project-sales-copy-project small {
  color: #66758a;
  font-size: 12px;
  font-weight: 650;
}

.project-sales-copy-project i {
  color: var(--hr-primary);
}

.project-sales-copy-empty {
  min-height: 180px;
}

.project-sales-copy-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #d9e2ec;
  background: #fff;
}

.project-sales-offer-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  align-items: start;
  gap: 16px;
  padding: 16px;
  overflow: auto;
}

.project-sales-offer-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid #d9e2ec;
  background: #fff;
}

.project-sales-offer-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.project-sales-offer-body.is-details-active {
  grid-template-columns: minmax(0, 1fr);
}

.project-sales-offer-body.is-positions-active {
  grid-template-columns: minmax(0, 1fr);
}

.project-sales-offer-body.is-readonly .form-control,
.project-sales-offer-body.is-readonly .form-select,
.project-sales-offer-body.is-readonly .project-catalog-rich-content {
  background-color: #f8fafc;
}

.project-sales-offer-body.is-readonly .project-catalog-rich-content {
  cursor: default;
}

.project-sales-offer-side,
.project-sales-offer-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  gap: 16px;
}

.project-sales-offer-side {
  grid-auto-rows: max-content;
  overflow: visible;
}

.project-sales-offer-workspace {
  grid-template-columns: minmax(0, 1fr);
  overflow: visible;
}

.project-sales-offer-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
  transition: padding 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.project-sales-offer-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.project-sales-offer-card-head.is-between {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.project-sales-offer-card-head-main {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.project-sales-offer-card-head h3,
.project-sales-offer-card-head p {
  margin: 0;
}

.project-sales-offer-card-head h3 {
  color: var(--hr-text);
  font-size: 16px;
  font-weight: 700;
}

.project-sales-offer-card-head p {
  color: var(--hr-muted);
  font-size: 12px;
}

.project-sales-offer-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.project-sales-offer-cost-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.project-sales-offer-cost-switch .form-check-input {
  width: 2.35rem;
  height: 1.2rem;
  flex: 0 0 auto;
  float: none;
  margin: 0;
  cursor: pointer;
}

.project-sales-offer-cost-switch span {
  cursor: pointer;
}

.project-sales-offer-step {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 15px;
  font-weight: 800;
}

.project-sales-required-marker {
  color: #d64c4c;
  font-weight: 800;
}

.project-sales-offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.project-sales-offer-head-card .project-catalog-field-wide {
  grid-column: span 2;
}

.project-sales-offer-head-card.is-collapsed {
  gap: 8px;
}

.project-sales-offer-head-content {
  min-width: 0;
  display: grid;
}

.project-sales-offer-head-summary {
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
  color: #506178;
  background: #f8fbff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-sales-offer-head-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hr-border);
}

.project-sales-offer-section-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.project-sales-offer-section-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
}

.project-sales-offer-section-title i {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 12px;
}

.project-sales-offer-toggle {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.project-sales-offer-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-sales-offer-toggle-track {
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  position: relative;
  border-radius: 999px;
  background: #c9d5e3;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.project-sales-offer-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  transition: transform 160ms ease;
}

.project-sales-offer-toggle input:checked + .project-sales-offer-toggle-track {
  background: var(--hr-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--hr-primary-rgb), 0.18);
}

.project-sales-offer-toggle input:checked + .project-sales-offer-toggle-track::after {
  transform: translateX(18px);
}

.project-sales-offer-toggle input:focus-visible + .project-sales-offer-toggle-track {
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.18);
}

.project-sales-offer-toggle.is-on {
  color: var(--hr-primary-dark);
}

.project-sales-offer-toggle-label {
  min-width: 0;
}

.project-sales-offer-address-preview {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dbe8f6;
  border-radius: 8px;
  color: var(--hr-muted);
  background: #f8fbff;
  font-size: 13px;
  line-height: 1.4;
}

.project-sales-offer-text-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.project-sales-offer-text-card .project-sales-offer-card-head,
.project-sales-offer-text-card .project-upload-message,
.project-sales-offer-text-card > .filter-field {
  grid-column: 1 / -1;
}

.project-sales-offer-text-card.is-collapsed {
  gap: 0;
}

.project-sales-offer-text-content {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.project-sales-offer-head-toggle,
.project-sales-offer-text-toggle {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-offer-text-field {
  display: grid;
  gap: 7px;
}

.project-offer-text-field-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.project-offer-text-field-head > span {
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 700;
}

.project-offer-text-template-picker {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.project-offer-text-template-picker .btn {
  min-height: 31px;
  white-space: nowrap;
}

.project-offer-text-field .project-catalog-rich-content {
  height: 156px;
  min-height: 156px;
  max-height: 156px;
  overflow-y: auto;
}

.project-sales-offer-filter {
  display: grid;
  gap: 10px;
}

.project-sales-offer-title-filter {
  max-height: 118px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: auto;
  padding-right: 2px;
}

.project-sales-offer-title-selector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-sales-offer-title-selector-head .btn,
.project-sales-offer-icon-button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.project-sales-offer-title-selector-head .btn i,
.project-sales-offer-icon-button i {
  margin: 0;
}

.project-sales-offer-position-action-button {
  width: 30px;
  height: 30px;
}

.project-sales-offer-position-action-button i {
  font-size: 12px;
}

.project-sales-offer-muted {
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
}

.project-offer-collapse-enter-active,
.project-offer-collapse-leave-active {
  max-height: 680px;
  overflow: hidden;
  transition: max-height 180ms ease, opacity 160ms ease;
}

.project-offer-collapse-enter-from,
.project-offer-collapse-leave-to {
  max-height: 0;
  opacity: 0;
}

.project-sales-offer-catalog,
.project-sales-offer-positions {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.project-sales-offer-positions {
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
}

.project-sales-offer-title-add-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--hr-primary) 30%, var(--hr-border));
  border-radius: 8px;
  background: #fbfdff;
}

.project-sales-offer-title-add-panel .project-sales-offer-title-filter {
  max-height: 156px;
}

.project-sales-offer-article-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  overflow: auto;
}

.project-sales-offer-article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fbfdff;
  text-align: left;
}

.project-sales-offer-article:hover,
.project-sales-offer-article:focus-visible {
  border-color: color-mix(in srgb, var(--hr-primary) 42%, var(--hr-border));
  outline: none;
  background: #f6fbff;
}

.project-sales-offer-article strong,
.project-sales-offer-article small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-sales-offer-article small {
  color: var(--hr-muted);
  font-size: 12px;
}

.project-sales-offer-article em {
  color: var(--hr-primary-dark);
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.project-sales-offer-article > i {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--hr-primary);
}

.project-sales-offer-empty {
  min-height: 220px;
}

.project-sales-offer-position-groups {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  overflow: visible;
}

.project-sales-offer-position-group {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 20%, var(--hr-border));
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(13, 31, 58, 0.06);
}

.project-sales-offer-position-group-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid #dbe8f6;
  background: #f6fbff;
}

.project-sales-offer-position-group-header > div:first-child {
  min-width: 0;
}

.project-sales-offer-position-group-header > div:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-sales-offer-position-group h4 {
  margin: 0;
  color: var(--hr-primary-dark);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.project-sales-offer-title-label {
  color: var(--hr-text);
  font-weight: 800;
}

.project-sales-offer-position-group-header span {
  color: var(--hr-muted);
  font-size: 12px;
}

.project-sales-offer-add-position-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  color: var(--hr-primary);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
}

.project-sales-offer-add-position-button i {
  color: currentColor;
  font-size: 12px;
  line-height: 1;
}

.project-sales-offer-position-group-header .project-sales-offer-add-position-button span {
  color: currentColor;
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
}

.project-sales-offer-add-position-button:hover,
.project-sales-offer-add-position-button:focus-visible,
.project-sales-offer-add-position-button:active,
.project-sales-offer-add-position-button.show {
  color: #fff;
}

.project-sales-offer-position-group h4 .project-sales-offer-title-label {
  color: var(--hr-text);
  font-size: 15px;
}

.project-sales-offer-position-group-body {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #fff;
}

.project-sales-offer-title-article-picker {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--hr-primary) 28%, var(--hr-border));
  border-radius: 8px;
  background: #fbfdff;
}

.project-sales-offer-position-list {
  display: grid;
  gap: 0;
  margin: 0 -12px -12px;
  background: #fff;
}

.project-sales-offer-position-row {
  display: grid;
  grid-template-columns: 48px minmax(220px, 1fr) 88px 112px 124px auto;
  align-items: end;
  gap: 8px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.project-sales-offer-position-row:hover {
  background: #f8fbff;
}

.project-sales-offer-position-row.has-cost-details {
  align-items: start;
}

.project-sales-offer-position-number {
  width: 40px;
  height: 30px;
  align-self: center;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d6e6f7;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 12px;
  font-weight: 800;
}

.project-sales-offer-position-main {
  display: grid;
  gap: 2px;
  min-width: 0;
  align-self: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.project-sales-offer-position-main:hover strong,
.project-sales-offer-position-main:focus-visible strong {
  color: var(--hr-primary-dark);
}

.project-sales-offer-position-main:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--hr-primary) 36%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

.project-sales-offer-position-main strong,
.project-sales-offer-position-main small,
.project-sales-offer-position-main span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-sales-offer-position-main small,
.project-sales-offer-position-main span,
.project-sales-offer-position-row label span {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 700;
}

.project-sales-offer-position-main span {
  font-weight: 500;
}

.project-sales-offer-position-main .project-sales-offer-position-preview {
  display: block;
  overflow: hidden;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.3;
  max-height: 2.6em;
  overflow-wrap: anywhere;
}

.project-sales-offer-position-row label {
  display: grid;
  gap: 3px;
  margin: 0;
}

.project-sales-offer-position-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.project-sales-offer-position-total {
  min-width: 0;
  justify-self: end;
  padding-bottom: 6px;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.project-sales-offer-position-details {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: 128px 96px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #dbe9f7;
  border-radius: 8px;
  background: #f8fbff;
}

.project-sales-offer-position-detail {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-sales-offer-position-detail span {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
}

.project-sales-offer-position-detail strong {
  min-width: 0;
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.project-sales-offer-position-note strong {
  font-weight: 600;
  white-space: pre-wrap;
}

.project-sales-offer-position-detail strong.is-muted {
  color: var(--hr-muted);
  font-weight: 600;
}

.project-sales-offer-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hr-border);
  color: var(--hr-muted);
  font-size: 13px;
}

.project-sales-offer-total strong {
  color: var(--hr-text);
  font-size: 16px;
}

.project-sales-offer-empty.is-compact {
  min-height: 150px;
}

.project-sales-offer-position-editor-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1280;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.42);
}

.project-sales-offer-position-editor {
  width: min(980px, 100%);
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(13, 31, 58, 0.26);
}

.project-sales-offer-position-editor-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.project-catalog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1260;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.42);
}

.project-catalog-modal {
  width: min(1440px, 100%);
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border-radius: 8px;
  background: #f6f8fb;
  box-shadow: 0 24px 80px rgba(13, 31, 58, 0.22);
}

.project-catalog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.project-catalog-title,
.project-catalog-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.project-catalog-title {
  flex: 1 1 280px;
  min-width: 0;
}

.project-catalog-header-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

.project-catalog-title-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 20px;
}

.project-catalog-title p,
.project-catalog-title h2 {
  margin: 0;
}

.project-catalog-title p {
  color: var(--hr-primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-catalog-title h2 {
  color: var(--hr-text);
  font-size: 22px;
  font-weight: 700;
}

.project-catalog-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px);
  gap: 16px;
  padding: 16px;
  overflow: hidden;
  transition: grid-template-columns 220ms ease;
}

.project-catalog-body.is-editing {
  grid-template-columns: minmax(260px, 0.56fr) minmax(520px, 1.44fr);
}

.project-catalog-body.is-article-catalog {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  gap: 0;
}

.project-catalog-body.is-text-template-catalog,
.project-catalog-body.is-title-catalog {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0fr);
  gap: 0;
}

.project-catalog-body.is-article-catalog.is-editing,
.project-catalog-body.is-text-template-catalog.is-editing,
.project-catalog-body.is-title-catalog.is-editing {
  grid-template-columns: minmax(260px, 0.56fr) minmax(520px, 1.44fr);
  gap: 16px;
}

.project-catalog-main,
.project-catalog-editor {
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.project-catalog-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-catalog-editor {
  overflow: auto;
  opacity: 1;
  transform: translateX(0);
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.project-catalog-body.is-article-catalog:not(.is-editing) > .project-catalog-editor,
.project-catalog-body.is-text-template-catalog:not(.is-editing) > .project-catalog-editor,
.project-catalog-body.is-title-catalog:not(.is-editing) > .project-catalog-editor {
  overflow: hidden;
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
  border-color: transparent;
  box-shadow: none;
}

.project-catalog-editor-content-enter-active,
.project-catalog-editor-content-leave-active {
  overflow: hidden;
  transition: opacity 180ms ease, transform 220ms ease;
}

.project-catalog-editor-content-enter-from,
.project-catalog-editor-content-leave-to {
  opacity: 0;
  transform: translateX(18px);
}

.project-catalog-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--hr-border);
}

.project-catalog-search {
  flex: 1 1 360px;
}

.project-catalog-title-filter {
  flex: 0 1 260px;
}

.project-catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hr-border);
}

.project-catalog-tags.compact {
  padding: 0;
  border-bottom: 0;
}

.project-catalog-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #d9e2ec;
  border-radius: 999px;
  color: #506178;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
}

.project-catalog-tag:hover,
.project-catalog-tag:focus-visible,
.project-catalog-tag.active {
  color: var(--hr-primary-dark);
  border-color: #b9d3ef;
  background: #eef7ff;
}

.project-catalog-tag small {
  color: inherit;
  opacity: 0.72;
}

.project-catalog-empty {
  flex: 1 1 auto;
  min-height: 260px;
}

.project-catalog-main > .project-modal-loading.inline {
  flex: 1 1 auto;
}

.project-catalog-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.project-catalog-table th,
.project-catalog-table td {
  padding-top: 12px;
  padding-bottom: 12px;
  vertical-align: top;
}

.project-catalog-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--hr-border);
}

.project-catalog-table tr.is-clickable {
  cursor: pointer;
}

.project-catalog-table tbody tr.active,
.project-catalog-table tbody tr.is-clickable:hover {
  background: #f3f9ff;
}

.project-catalog-article-cell {
  display: grid;
  gap: 3px;
}

.project-catalog-article-cell strong,
.project-catalog-article-cell small,
.project-catalog-article-cell span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-catalog-article-cell small,
.project-catalog-article-cell span,
.project-catalog-muted {
  color: var(--hr-muted);
  font-size: 12px;
}

.project-catalog-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.project-catalog-row-tags span {
  padding: 3px 7px;
  border: 1px solid #dbe6f1;
  border-radius: 8px;
  color: #506178;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
}

.project-catalog-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.project-catalog-row-actions .btn {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.project-catalog-pagination {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--hr-border);
  color: #506178;
  font-size: 13px;
}

.project-catalog-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-catalog-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.project-catalog-editor-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.project-catalog-editor > header,
.project-catalog-editor-shell > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--hr-border);
}

.project-catalog-editor > header p,
.project-catalog-editor > header h3,
.project-catalog-editor-shell > header p,
.project-catalog-editor-shell > header h3 {
  margin: 0;
}

.project-catalog-editor > header p,
.project-catalog-editor-shell > header p {
  color: var(--hr-primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-catalog-editor > header h3,
.project-catalog-editor-shell > header h3 {
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 700;
}

.project-catalog-editor-empty {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--hr-muted);
  text-align: center;
}

.project-catalog-editor-empty i {
  width: 52px;
  height: 52px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 20px;
}

.project-catalog-editor-empty strong {
  color: var(--hr-text);
}

.project-catalog-form {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 14px;
  overflow: auto;
}

.project-catalog-editor-form {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px;
  overflow: auto;
}

.project-catalog-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hr-border);
}

.project-catalog-editor-head p,
.project-catalog-editor-head h3 {
  margin: 0;
}

.project-catalog-editor-head p {
  color: var(--hr-primary-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-catalog-editor-head h3 {
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 700;
}

.project-catalog-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

.project-catalog-identity-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.42fr) minmax(0, 1fr);
  gap: 12px;
}

.html-rich-field,
.project-catalog-rich-field {
  display: grid;
  gap: 6px;
}

.html-rich-editor,
.project-catalog-rich-editor {
  overflow: hidden;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #fff;
}

.html-rich-toolbar,
.project-catalog-rich-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding: 7px;
  border-bottom: 1px solid #e7edf4;
  background: #f8fafc;
}

.html-rich-button,
.project-catalog-rich-button {
  width: 32px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #506178;
  background: transparent;
  font-size: 13px;
  line-height: 1;
}

.html-rich-button:hover,
.html-rich-button:focus-visible,
.project-catalog-rich-button:hover,
.project-catalog-rich-button:focus-visible {
  color: var(--hr-primary-dark);
  border-color: #c8dbef;
  background: #eef7ff;
}

.html-rich-button.active,
.project-catalog-rich-button.active {
  color: #fff;
  border-color: var(--hr-primary);
  background: var(--hr-primary);
}

.html-rich-content,
.project-catalog-rich-content {
  min-height: 104px;
  padding: 10px 12px;
  color: var(--hr-text);
  font-size: 14px;
  line-height: 1.45;
  outline: none;
  white-space: normal;
}

.html-rich-content.is-tall,
.project-catalog-rich-content.is-tall {
  min-height: 156px;
}

.project-catalog-editor-shell .project-catalog-rich-content {
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  overflow-y: auto;
}

.project-catalog-editor-shell .project-catalog-rich-content.is-tall {
  height: 128px;
  min-height: 128px;
  max-height: 128px;
}

.html-rich-content:focus,
.project-catalog-rich-content:focus {
  box-shadow: inset 0 0 0 2px rgba(47, 111, 171, 0.16);
}

.html-rich-content:empty::before,
.project-catalog-rich-content:empty::before {
  content: attr(data-placeholder);
  color: #98a7b8;
  pointer-events: none;
}

.html-rich-content p,
.html-rich-content div,
.project-catalog-rich-content p,
.project-catalog-rich-content div {
  margin: 0 0 0.45rem;
}

.html-rich-content p:last-child,
.html-rich-content div:last-child,
.project-catalog-rich-content p:last-child,
.project-catalog-rich-content div:last-child {
  margin-bottom: 0;
}

.html-rich-content ul,
.html-rich-content ol,
.project-catalog-rich-content ul,
.project-catalog-rich-content ol {
  margin: 0.3rem 0 0.45rem;
  padding-left: 1.25rem;
}

.html-rich-content li,
.project-catalog-rich-content li {
  margin: 0.12rem 0;
}

.project-catalog-form-tags {
  display: grid;
  gap: 10px;
}

.project-catalog-form-tags > span {
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 700;
}

.project-catalog-new-tag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.project-catalog-title-panel .project-catalog-new-tag {
  padding-top: 10px;
  border-top: 1px solid #e7edf4;
}

.project-catalog-title-panel {
  margin-bottom: 0;
  background: #fff;
}

.project-catalog-title-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 28%, var(--hr-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--hr-primary) 7%, #fff);
}

.project-catalog-title-selected span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 35%, var(--hr-border));
  border-radius: 8px;
  color: var(--hr-primary);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.project-catalog-title-options {
  max-height: 230px;
  overflow: auto;
  padding-right: 2px;
}

.project-catalog-form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

@media (max-width: 767.98px) {
  .project-catalog-identity-row {
    grid-template-columns: 1fr;
  }
}

.project-text-template-type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border: 1px solid #d9e2ec;
  border-radius: 8px;
  background: #f8fafc;
}

.project-text-template-type-toggle button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #506178;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.project-text-template-type-toggle button:hover,
.project-text-template-type-toggle button:focus-visible {
  color: var(--hr-primary-dark);
  border-color: #c8dbef;
  background: #eef7ff;
}

.project-text-template-type-toggle button.active {
  color: #fff;
  border-color: var(--hr-primary);
  background: var(--hr-primary);
}

.project-toggle-row {
  display: inline-grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  margin: 0;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 700;
}

.project-toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.project-toggle-row span {
  width: 42px;
  height: 24px;
  position: relative;
  border-radius: 999px;
  background: #c9d5e3;
  transition: background-color 160ms ease;
}

.project-toggle-row span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  transition: transform 160ms ease;
}

.project-toggle-row input:checked + span {
  background: var(--hr-primary);
}

.project-toggle-row input:checked + span::after {
  transform: translateX(18px);
}

.project-overview-shell {
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.project-overview-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.project-overview-hero p,
.project-overview-hero h3 {
  margin: 0;
  letter-spacing: 0;
}

.project-overview-hero p {
  margin-bottom: 4px;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.project-overview-hero h3 {
  color: var(--hr-text);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.project-overview-date {
  color: var(--hr-muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.project-overview-surface {
  padding: 16px;
  background: #f7f9fc;
}

.project-overview-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.project-overview-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  transition: opacity .16s ease, filter .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.project-overview-cards.has-start-step .project-overview-card:not(.is-start-step) {
  opacity: .52;
  filter: saturate(.72);
}

.project-overview-cards.has-start-step .project-overview-card:not(.is-start-step):hover,
.project-overview-cards.has-start-step .project-overview-card:not(.is-start-step):focus-within {
  opacity: .88;
  filter: saturate(.95);
  border-color: #ccd8e6;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.project-overview-card.is-start-step {
  border-color: rgba(47, 155, 78, 0.42);
  background: linear-gradient(180deg, #f6fff8 0%, #fff 48%);
  box-shadow: 0 0 0 3px rgba(47, 155, 78, 0.1), 0 14px 30px rgba(15, 23, 42, 0.11);
  animation: projectStartStepPulse 4.8s ease-in-out infinite;
}

@keyframes projectStartStepPulse {
  0%,
  100% {
    border-color: rgba(47, 155, 78, 0.38);
    box-shadow: 0 0 0 3px rgba(47, 155, 78, 0.08), 0 14px 30px rgba(15, 23, 42, 0.1);
  }

  50% {
    border-color: rgba(47, 155, 78, 0.72);
    box-shadow: 0 0 0 5px rgba(47, 155, 78, 0.18), 0 16px 34px rgba(15, 23, 42, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-overview-card.is-start-step {
    animation: none;
  }
}

.project-overview-card.is-start-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #2f9b4e;
}

.project-overview-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--hr-border);
}

.project-overview-card.is-start-step .project-overview-card-head {
  border-bottom-color: rgba(47, 155, 78, 0.22);
  background: #f2fbf4;
}

.project-overview-card-head > i {
  width: 30px;
  color: var(--hr-primary);
  font-size: 25px;
  text-align: center;
}

.project-overview-card.is-start-step .project-overview-card-head > i {
  color: #1f6b36;
}

.project-overview-card-head h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 700;
}

.project-overview-card-cue {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid rgba(47, 155, 78, 0.28);
  border-radius: 8px;
  color: #1f6b36;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.project-contact-stack {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.project-contact-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  color: #41516a;
  font-size: 14px;
  line-height: 1.35;
}

.project-contact-line > i {
  margin-top: 2px;
  color: #7b8798;
  text-align: center;
}

.project-contact-line strong {
  color: var(--hr-text);
  font-size: 15px;
}

.project-contact-line span span {
  display: block;
}

.project-contact-line.muted {
  color: var(--hr-muted);
}

.project-task-board-panel {
  display: grid;
  gap: 10px;
  margin: 0 16px 14px;
  padding: 11px;
  border: 1px solid rgba(51, 113, 183, 0.16);
  border-radius: 8px;
  background: #f8fbff;
}

.project-card-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: var(--hr-primary-dark);
  font-size: 14px;
  font-weight: 700;
}

.project-card-note-main {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.project-card-note-main > i {
  flex: 0 0 auto;
  margin-top: 2px;
}

.project-card-note-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border: 1px solid rgba(51, 113, 183, 0.2);
  border-radius: 7px;
  background: #fff;
  color: var(--hr-primary);
  font-size: 13px;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.project-card-note-action:hover,
.project-card-note-action:focus-visible {
  border-color: rgba(51, 113, 183, 0.42);
  background: #eef7ff;
  color: var(--hr-primary-dark);
  box-shadow: 0 0 0 3px rgba(51, 113, 183, 0.12);
}

.project-card-note-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.project-task-board-status {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.project-task-board-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid rgba(124, 143, 166, 0.22);
  border-radius: 8px;
  background: #fff;
  color: #4c5f79;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.project-task-board-pill i {
  color: var(--hr-primary);
}

.project-task-board-pill strong {
  color: var(--hr-text);
  font-weight: 800;
}

.project-task-board-pill.is-urgent {
  border-color: rgba(217, 56, 56, 0.22);
  background: #fff6f6;
}

.project-task-board-pill.is-urgent i,
.project-task-board-pill.is-urgent strong {
  color: #c92f2f;
}

.project-task-board-pill.is-warning {
  border-color: rgba(199, 139, 37, 0.28);
  background: #fffaf0;
}

.project-task-board-pill.is-warning i,
.project-task-board-pill.is-warning strong {
  color: #a66e18;
}

.project-task-board-pill.is-future {
  border-color: rgba(47, 155, 78, 0.2);
  background: #f6fff8;
}

.project-task-board-pill.is-future i,
.project-task-board-pill.is-future strong,
.project-task-board-pill.is-done i,
.project-task-board-pill.is-done strong {
  color: #2f9b4e;
}

.project-task-board-pill.is-done {
  border-color: rgba(47, 155, 78, 0.2);
  background: #f6fff8;
}

.project-overview-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 16px;
}

.project-overview-calculator-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid var(--hr-border);
  background: #fbfcfe;
}

.project-overview-calculator-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 8px;
  min-height: 38px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: #506178;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.project-overview-calculator-label {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.project-overview-calculator-actions button:hover,
.project-overview-calculator-actions button:focus-visible {
  border-color: #b9d3f0;
  background: #eef7ff;
  color: var(--hr-primary-dark);
  outline: 0;
}

.project-overview-actions .btn,
.project-notes-card-body .btn,
.project-building-empty .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.project-link-copy-fallback {
  display: grid;
  gap: 8px;
  margin: -6px 16px 16px;
  padding: 10px;
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
}

.project-link-copy-fallback-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.project-link-copy-fallback-hint i {
  margin-top: 2px;
}

.project-link-copy-fallback-control {
  display: flex;
  gap: 8px;
}

.project-link-copy-fallback-control .form-control {
  min-width: 0;
  color: var(--hr-primary-dark);
  background: #fff;
}

.project-link-copy-fallback-control .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.project-building-table th,
.project-building-table td {
  padding: 11px 14px;
  border-color: #edf1f6;
  font-size: 14px;
  vertical-align: middle;
}

.project-building-table th {
  width: 54%;
  color: var(--hr-muted);
  font-weight: 700;
}

.project-building-table th i {
  width: 20px;
  margin-right: 8px;
  color: #7b8798;
  text-align: center;
}

.project-building-table td {
  color: var(--hr-text);
  font-weight: 700;
}

.project-building-table tr.is-emphasis th,
.project-building-table tr.is-emphasis td {
  color: var(--hr-primary-dark);
  background: #f8fbff;
}

.project-building-empty {
  min-height: 260px;
}

.project-overview-card.is-start-step .project-building-empty {
  min-height: 260px;
}

.project-building-empty .btn {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
}

.project-notes-card-body {
  padding: 16px;
}

.project-inline-help {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: var(--hr-primary-dark);
  font-size: 14px;
  font-weight: 700;
}

.project-summary-list {
  display: grid;
}

.project-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 54%) minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #edf1f6;
}

.project-summary-row:first-child {
  border-top: 0;
}

.project-summary-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--hr-muted);
  font-size: 14px;
  font-weight: 700;
}

.project-summary-row span i {
  flex: 0 0 20px;
  width: 20px;
  margin-left: -2px;
  text-align: center;
}

.project-summary-row strong {
  color: var(--hr-text);
  font-size: 14px;
  padding-left: 15px;
  text-align: left;
  overflow-wrap: anywhere;
}

.project-summary-row.is-blue strong,
.project-summary-row.is-green strong,
.project-summary-row.is-amber strong,
.project-summary-row.is-slate strong {
  color: var(--hr-primary-dark);
}

.project-overview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.project-overview-footer-main {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.project-overview-footer-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hr-muted);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-overview-footer-note {
  margin: 0;
  color: var(--hr-muted);
  font-size: 14px;
  font-weight: 700;
}

.project-overview-footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

.project-overview-footer-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

textarea.project-notes-field {
  min-height: 130px;
  padding-right: 66px;
  padding-bottom: 25px;
  border-color: var(--hr-border);
  border-radius: 8px;
  resize: vertical;
}

.project-textarea-field {
  position: relative;
}

.project-textarea-count {
  position: absolute;
  right: 10px;
  bottom: 7px;
  padding: 2px 7px;
  border: 1px solid #d9e0ea;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  pointer-events: none;
}

.project-field-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 14px;
  color: var(--hr-muted);
  font-size: 13px;
}

.project-field-hint span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-field-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 36px;
  padding: 10px 0 0;
}

.project-field-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-left: auto;
}

.project-unsaved-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8a5d13;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.project-unsaved-hint i {
  font-size: 13px;
}

.project-variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-subtabs {
  gap: 6px;
  padding: 0;
}

.project-detail-table {
  margin: 0;
  min-width: 760px;
}

.project-detail-table.project-radiator-table {
  min-width: 820px;
  table-layout: fixed;
}

.project-detail-table.project-floor-heating-table {
  min-width: 620px;
  table-layout: fixed;
}

.project-radiator-room-col {
  width: 29%;
}

.project-radiator-heater-col {
  width: 31%;
}

.project-radiator-value-col {
  width: 13.333%;
}

.project-radiator-temperature-heading {
  vertical-align: middle;
}

.project-radiator-temperature-display {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: 6px;
  white-space: nowrap;
}

.project-radiator-temperature-edit {
  width: 28px;
  height: 28px;
  padding: 0;
  border-color: var(--hr-border);
  color: #506178;
}

.project-radiator-temperature-editor {
  display: grid;
  grid-template-columns: minmax(58px, 1fr) minmax(72px, 1fr);
  align-items: end;
  justify-content: end;
  gap: 6px;
  min-width: 168px;
}

.project-radiator-temperature-editor label {
  display: grid;
  gap: 2px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}

.project-radiator-temperature-editor .form-control,
.project-radiator-temperature-editor .form-select {
  min-height: 28px;
  padding: 2px 6px;
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 700;
}

.project-radiator-temperature-editor strong {
  align-self: center;
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}

.project-radiator-temperature-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.project-radiator-temperature-actions .btn {
  width: 28px;
  height: 28px;
  padding: 0;
}

.project-floor-room-col {
  width: 29%;
}

.project-floor-value-col {
  width: 13.333%;
}

.project-floor-surface-col {
  width: 57.667%;
}

.project-heating-surface-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.project-heating-surface-head-actions .status-pill,
.project-note-toggle-header {
  height: 34px;
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

.project-heating-surface-sections {
  display: grid;
  gap: 18px;
  padding: 16px 0;
}

.project-note-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #506178;
  font-size: 13px;
  font-weight: 800;
}

.project-note-toggle-header {
  padding-right: 10px;
  padding-left: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  line-height: 1;
  white-space: nowrap;
}

.project-note-switch {
  min-height: 0;
  margin: 0;
  padding-left: 2.45em;
}

.project-note-switch .form-check-input {
  margin-top: 0;
}

.project-planning-done-toggle {
  order: 99;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #506178;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.project-planning-done-toggle.is-done {
  color: #166534;
  border-color: #b9dfc7;
  background: #f0fbf4;
}

.project-planning-done-toggle.is-saving {
  cursor: wait;
  opacity: 0.78;
}

.project-planning-done-switch {
  min-height: 0;
  margin: 0;
  padding-left: 2.45em;
}

.project-planning-done-switch .form-check-input {
  margin-top: 0;
}

.project-planning-done-toggle .spinner-border {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.project-heating-surface-section {
  display: grid;
  gap: 8px;
}

.project-heating-surface-section h4 {
  margin: 0;
  padding: 0 17px;
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
}

.project-exchange-planning {
  display: grid;
  gap: 16px;
  padding: 16px 0;
}

.project-exchange-group {
  display: grid;
  gap: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.project-exchange-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hr-border);
  background: #f7f9fc;
}

.project-exchange-group-head h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
}

.project-exchange-group-head span:not(.status-pill) {
  display: block;
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
}

.project-exchange-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(140px, 0.24fr) auto;
  gap: 12px;
  align-items: end;
  padding: 0 16px;
}

.project-exchange-range,
.project-exchange-select {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
}

.project-exchange-range > span,
.project-exchange-select > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-exchange-range strong {
  color: var(--hr-text);
}

.project-exchange-actions,
.project-exchange-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.project-exchange-actions .btn,
.project-exchange-row-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.project-detail-table.project-exchange-table {
  min-width: 1040px;
}

.project-detail-table.project-hydraulic-table {
  min-width: 1080px;
}

.project-detail-table.project-hydraulic-table tfoot td,
.project-detail-table.project-hydraulic-floor-table tfoot td {
  border-top: 1px solid var(--hr-border);
  background: #f7f9fc;
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 800;
}

.project-detail-table.project-hydraulic-floor-table {
  min-width: 760px;
}

.project-hydraulic-planning .project-exchange-controls {
  padding-bottom: 16px;
}

.project-hydraulic-group {
  margin-top: 2px;
}

.project-exchange-heater strong {
  display: block;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
}

.project-exchange-coverage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 8px;
  padding: 4px 8px;
  border: 1px solid #d9e4f0;
  border-radius: 8px;
  background: #f7f9fc;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.project-exchange-coverage.is-success {
  border-color: #b8ddc9;
  background: #edf8f1;
  color: #247247;
}

.project-exchange-coverage.is-danger {
  border-color: #f2c4c4;
  background: #fff1f1;
  color: #a53333;
}

.project-exchange-coverage.is-empty {
  color: var(--hr-muted);
}

.project-exchange-empty {
  margin: 0 16px 16px;
  padding: 26px 16px;
  border: 1px dashed var(--hr-border);
  border-radius: 8px;
  background: #fbfdff;
}

.project-exchange-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 1310;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 20, 38, 0.56);
}

.project-exchange-editor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1180px, 100%);
  max-height: min(880px, calc(100vh - 48px));
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(8, 20, 38, 0.28);
  overflow: hidden;
}

.project-exchange-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--hr-border);
  background: #f7f9fc;
}

.project-exchange-editor-head p,
.project-exchange-editor-head h3 {
  margin: 0;
}

.project-exchange-editor-head p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-exchange-editor-head h3 {
  color: var(--hr-text);
  font-size: 20px;
  font-weight: 800;
}

.project-exchange-editor-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-text);
}

.project-exchange-editor-body {
  display: grid;
  grid-template-columns: minmax(280px, 0.32fr) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.project-exchange-editor-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 18px;
  border-right: 1px solid var(--hr-border);
  background: #fbfdff;
}

.project-exchange-editor-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-exchange-editor-card.is-selected {
  border-color: color-mix(in srgb, var(--hr-primary) 34%, var(--hr-border));
  background: color-mix(in srgb, var(--hr-primary) 7%, #fff);
}

.project-exchange-editor-card span {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-exchange-editor-card strong {
  color: var(--hr-text);
  font-size: 14px;
  font-weight: 800;
}

.project-exchange-editor-card small {
  display: block;
  color: var(--hr-muted);
  font-size: 12px;
  line-height: 1.35;
}

.project-exchange-editor-main {
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
}

.project-exchange-editor-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.project-exchange-editor-category {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-text);
  text-align: left;
}

.project-exchange-editor-category:hover,
.project-exchange-editor-category:focus-visible {
  border-color: color-mix(in srgb, var(--hr-primary) 42%, var(--hr-border));
  outline: none;
}

.project-exchange-editor-category.active {
  border-color: color-mix(in srgb, var(--hr-primary) 56%, var(--hr-border));
  background: color-mix(in srgb, var(--hr-primary) 8%, #fff);
}

.project-exchange-editor-category > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #eef5fb;
  color: var(--hr-primary);
}

.project-exchange-editor-category span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-exchange-editor-category strong {
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.project-exchange-editor-category small {
  color: var(--hr-muted);
  font-size: 11px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-exchange-editor-subcategory-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfdff;
}

.project-exchange-editor-subcategory-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.project-exchange-editor-subcategory-head span {
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
}

.project-exchange-editor-subcategory-head small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-exchange-editor-subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-exchange-editor-refinement-select {
  max-width: 460px;
}

.project-exchange-editor-refinement-select .form-select {
  min-height: 38px;
  border-radius: 8px;
  font-size: 13px;
}

.project-exchange-editor-subcategory {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.project-exchange-editor-subcategory:hover,
.project-exchange-editor-subcategory:focus-visible {
  border-color: color-mix(in srgb, var(--hr-primary) 42%, var(--hr-border));
  outline: none;
}

.project-exchange-editor-subcategory.active {
  border-color: color-mix(in srgb, var(--hr-primary) 56%, var(--hr-border));
  background: color-mix(in srgb, var(--hr-primary) 9%, #fff);
  color: var(--hr-primary);
}

.project-exchange-editor-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(120px, 0.28fr) minmax(90px, 0.22fr) minmax(90px, 0.22fr) auto;
  gap: 10px;
  align-items: end;
}

.project-exchange-editor-filter-actions {
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
}

.project-exchange-editor-filter-actions .btn,
.project-exchange-editor-list .btn,
.project-exchange-editor-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.project-exchange-editor-list {
  min-height: 0;
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: visible;
}

.project-catalog-scroll-stabilizer {
  width: 1px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-exchange-load-more {
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 12px 0 4px;
  color: #64748b;
}

.project-exchange-load-more-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.project-exchange-editor-list tr.is-selected > td {
  background: color-mix(in srgb, var(--hr-primary) 9%, #fff);
}

.project-exchange-editor-list .project-exchange-coverage {
  margin-top: 0;
}

.project-exchange-editor-list td strong {
  display: block;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
}

.project-exchange-editor-empty {
  min-height: 250px;
  margin: 0;
  border: 1px dashed var(--hr-border);
  border-radius: 8px;
}

.project-exchange-editor-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.project-hydraulic-editor {
  width: min(920px, 100%);
}

.project-hydraulic-editor-body {
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.project-hydraulic-editor-main {
  display: grid;
  grid-template-rows: auto;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
}

.project-hydraulic-editor .project-exchange-editor-side {
  overflow-y: auto;
}

.project-hydraulic-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-hydraulic-editor-grid label {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
}

.project-hydraulic-distance-range > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-hydraulic-distance-range strong {
  color: var(--hr-text);
}

.project-hydraulic-range-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 700;
}

.project-hydraulic-valve-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfdff;
}

.project-hydraulic-valve-steps {
  display: grid;
  gap: 12px;
}

.project-hydraulic-valve-steps .project-exchange-editor-subcategory-panel {
  margin-bottom: 0;
  background: #fff;
}

.project-hydraulic-valve-step-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.project-hydraulic-valve-step-actions small {
  min-width: 0;
  max-width: min(360px, 52vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-hydraulic-valve-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-primary);
}

.project-hydraulic-valve-toggle:hover,
.project-hydraulic-valve-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--hr-primary) 46%, var(--hr-border));
  outline: none;
}

.project-hydraulic-valve-selected {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 28%, var(--hr-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--hr-primary) 7%, #fff);
}

.project-hydraulic-valve-selected strong {
  min-width: 0;
  color: var(--hr-primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.project-hydraulic-collapse-enter-active,
.project-hydraulic-collapse-leave-active {
  overflow: hidden;
  transition: max-height 180ms ease, opacity 160ms ease, transform 160ms ease;
}

.project-hydraulic-collapse-enter-from,
.project-hydraulic-collapse-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
}

.project-hydraulic-collapse-enter-to,
.project-hydraulic-collapse-leave-from {
  max-height: var(--project-filter-collapse-max, 4200px);
  opacity: 1;
  transform: translateY(0);
}

.project-exchange-editor-main .project-hydraulic-valve-options {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.project-hydraulic-valve-options .project-exchange-editor-subcategory {
  justify-content: flex-start;
  text-align: left;
  overflow-wrap: anywhere;
}

.project-hydraulic-valve-options.is-wide .project-exchange-editor-subcategory {
  flex: 1 1 230px;
  max-width: 100%;
}

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

.project-hydraulic-valve-head h4,
.project-hydraulic-valve-head p {
  margin: 0;
}

.project-hydraulic-valve-head h4 {
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
}

.project-hydraulic-valve-head p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-heatpump-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  background: #f7f9fc;
}

.project-heatpump-workspace.has-catalog {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
}

.project-heatpump-main,
.project-heatpump-catalog {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
}

.project-heatpump-catalog {
  position: relative;
  z-index: 3;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-heatpump-catalog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--hr-border);
}

.project-heatpump-catalog-head h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 16px;
  font-weight: 800;
}

.project-heatpump-catalog-head .project-modal-close {
  width: 32px;
  height: 32px;
}

.project-heatpump-controls,
.project-heatpump-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.project-heatpump-filters {
  grid-template-columns: 1fr;
  padding: 14px;
  border-bottom: 1px solid var(--hr-border);
}

.project-heatpump-flow-display {
  min-height: 42px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
}

.project-heatpump-flow-display output {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f3f6fa;
  color: #5b677a;
  font-weight: 800;
}

.project-heatpump-flow-edit {
  width: 42px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--hr-primary) 34%, var(--hr-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--hr-primary) 8%, #fff);
  color: var(--hr-primary);
  font-size: 15px;
  line-height: 1;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.project-heatpump-flow-edit:hover,
.project-heatpump-flow-edit:focus-visible {
  border-color: var(--hr-primary);
  background: var(--hr-primary);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.16);
}

.project-heatpump-flow-edit:disabled {
  border-color: var(--hr-border);
  background: #eef3f8;
  color: var(--hr-muted);
  cursor: not-allowed;
  opacity: .72;
}

.project-heatpump-filter-steps .project-exchange-editor-subcategory-panel {
  margin-bottom: 0;
  background: #fff;
}

.project-heatpump-filter-options {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 2px;
}

.project-heatpump-filter-options .project-exchange-editor-subcategory {
  justify-content: flex-start;
  text-align: left;
  overflow-wrap: anywhere;
}

.project-heatpump-filter-options.is-wide .project-exchange-editor-subcategory {
  flex: 1 1 180px;
  max-width: 100%;
}

.project-switch-control {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 22px;
  color: #506178;
  font-size: 13px;
  font-weight: 800;
}

.project-switch-control input {
  width: 38px;
  height: 20px;
}

.project-heatpump-selection-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.project-heatpump-selection-summary > div {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(31, 122, 189, 0.16);
  border-radius: 8px;
  background: #fff;
}

.project-heatpump-selection-summary span,
.project-heatpump-selection-summary strong {
  display: block;
}

.project-heatpump-selection-summary span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-heatpump-selection-summary strong {
  margin-top: 4px;
  color: var(--hr-text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.project-heatpump-chart {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-heatpump-chart.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #eef2f6;
  outline: 0;
}

.project-heatpump-chart-fullscreen {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #26374f;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(22, 33, 52, 0.08);
}

.project-heatpump-chart-fullscreen:hover,
.project-heatpump-chart-fullscreen:focus-visible {
  color: #0f5eaa;
  border-color: #9dc7eb;
  background: #edf6ff;
  outline: 0;
}

.project-heatpump-chart-canvas {
  min-width: 0;
}

.project-heatpump-chart.is-fullscreen .project-heatpump-chart-canvas {
  min-height: 0;
  padding: 14px;
  overflow: auto;
  background: #dfe6ee;
}

.project-heatpump-chart.is-fullscreen .project-heatpump-chart-canvas canvas {
  padding: 14px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(22, 33, 52, 0.14);
}

.project-heatpump-chart canvas {
  width: 100%;
  display: block;
}

.project-simulation-workspace {
  display: grid;
  gap: 16px;
  padding: 16px;
  background: #f7f9fc;
}

.project-simulation-result {
  display: grid;
  gap: 16px;
}

.project-simulation-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-simulation-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-simulation-section h4,
.project-simulation-group h5 {
  margin: 0;
  color: var(--hr-text);
  font-weight: 800;
}

.project-simulation-section h4 {
  font-size: 16px;
}

.project-simulation-help {
  max-width: 920px;
  margin: -2px 0 2px;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.45;
}

.project-simulation-group h5 {
  font-size: 14px;
}

.project-simulation-actions,
.project-simulation-groups {
  display: grid;
  gap: 10px;
}

.project-simulation-input-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.project-simulation-mode-field {
  min-width: 0;
}

.project-simulation-mode-switch {
  display: flex;
  width: 100%;
}

.project-simulation-mode-switch button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 8px;
  white-space: normal;
}

.project-simulation-field-help {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.project-simulation-run-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(260px, 1.05fr);
  gap: 12px;
  align-items: start;
}

.project-simulation-run-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.project-simulation-run-item {
  display: grid;
  gap: 5px;
  width: 100%;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fbfcfe;
  text-align: left;
}

.project-simulation-run-item.active {
  border-color: rgba(34, 87, 122, 0.42);
  background: #eef6fb;
}

.project-simulation-run-item span,
.project-simulation-run-item small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-simulation-run-item > span:not(.project-simulation-run-item-head),
.project-simulation-run-item small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-simulation-run-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.project-simulation-run-item-head strong {
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-simulation-run-note {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.project-simulation-run-note .btn {
  width: fit-content;
}

.project-simulation-run-empty {
  padding: 12px;
  border: 1px dashed #cdd9e6;
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fbfcfe;
  font-size: 13px;
  font-weight: 700;
}

.project-simulation-queue-note {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid rgba(181, 122, 25, 0.24);
  border-radius: 8px;
  color: #7a4a08;
  background: #fff8e8;
}

.project-simulation-queue-note i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #fff0c7;
}

.project-simulation-queue-note strong,
.project-simulation-queue-note span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-simulation-queue-note strong {
  font-size: 14px;
}

.project-simulation-queue-note span {
  margin-top: 2px;
  font-size: 13px;
}

.project-simulation-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-simulation-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.project-simulation-kpi {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(216, 226, 236, 0.9);
  border-radius: 8px;
  background: #fbfcfe;
}

.project-simulation-kpi i {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #22577a;
  background: #eaf4fb;
}

.project-simulation-kpi span,
.project-simulation-kpi strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-simulation-kpi span {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-simulation-kpi strong {
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
}

.project-simulation-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-simulation-dynamics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-kennfeld-viewer {
  display: grid;
  gap: 12px;
}

.project-kennfeld-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.project-kennfeld-control {
  display: grid;
  gap: 7px;
  min-width: 220px;
}

.project-kennfeld-control > span,
.project-kennfeld-load-field > span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-kennfeld-segmented {
  display: inline-flex;
  gap: 3px;
  width: fit-content;
  padding: 3px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f3f6f9;
}

.project-kennfeld-segmented button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: var(--hr-muted);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.project-kennfeld-segmented button.active {
  color: #143b5f;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.project-kennfeld-load-field {
  min-width: 220px;
}

.project-kennfeld-layout {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 1fr);
  gap: 12px;
  align-items: start;
}

.project-kennfeld-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.project-kennfeld-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-kennfeld-panel h5 {
  margin: 0;
  color: var(--hr-text);
  font-size: 14px;
  font-weight: 800;
}

.project-kennfeld-panel > header span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
}

.project-kennfeld-heatmap-scroll {
  min-width: 0;
  overflow: auto;
  border: 1px solid rgba(216, 226, 236, 0.9);
  border-radius: 8px;
  background: #ffffff;
}

.project-kennfeld-heatmap {
  display: grid;
  gap: 1px;
  min-width: max-content;
  padding: 1px;
  background: #d8e2ec;
}

.project-kennfeld-corner,
.project-kennfeld-column-label,
.project-kennfeld-row-label,
.project-kennfeld-cell {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.project-kennfeld-corner,
.project-kennfeld-column-label,
.project-kennfeld-row-label {
  color: #344054;
  background: #f8fafc;
  font-weight: 800;
}

.project-kennfeld-cell {
  min-width: 52px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.project-kennfeld-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-kennfeld-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-kennfeld-legend i {
  width: 18px;
  height: 10px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.12);
}

.project-simulation-chart {
  position: relative;
  min-width: 0;
  min-height: 320px;
  padding: 10px;
  border: 1px solid rgba(216, 226, 236, 0.9);
  border-radius: 8px;
  background: #ffffff;
}

.project-simulation-chart.is-heatpump {
  min-height: 360px;
}

.project-simulation-chart.is-kennfeld-line {
  min-height: 360px;
}

.project-simulation-chart.is-result {
  min-height: 300px;
}

.project-simulation-chart.is-dynamics {
  min-height: 340px;
}

.project-simulation-chart.is-dynamics.is-building {
  grid-column: 1 / -1;
  min-height: 380px;
}

.project-simulation-chart canvas {
  width: 100%;
  height: 320px;
  display: block;
}

.project-simulation-chart.is-heatpump canvas {
  height: 360px;
}

.project-simulation-chart.is-kennfeld-line canvas {
  height: 360px;
}

.project-simulation-chart.is-result canvas {
  height: 300px;
}

.project-simulation-chart.is-dynamics canvas {
  height: 340px;
}

.project-simulation-chart.is-dynamics.is-building canvas {
  height: 380px;
}

.project-simulation-table-wrap {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
}

.project-simulation-table {
  min-width: 1040px;
  margin: 0;
}

.project-simulation-table thead th {
  white-space: nowrap;
}

.project-simulation-chart-empty {
  min-height: 168px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px;
  border: 1px dashed #cdd9e6;
  border-radius: 8px;
  background: #fbfcfe;
  text-align: center;
}

.project-simulation-chart-empty i {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #4a6178;
  background: #eef3f8;
}

.project-simulation-chart-empty strong,
.project-simulation-chart-empty span {
  display: block;
  max-width: 520px;
}

.project-simulation-chart-empty strong {
  color: var(--hr-text);
  font-size: 14px;
  font-weight: 800;
}

.project-simulation-chart-empty span {
  color: var(--hr-muted);
  font-size: 13px;
}

.project-simulation-action {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid rgba(35, 125, 73, 0.18);
  border-radius: 8px;
  background: #f2fbf6;
}

.project-simulation-action.is-warning {
  border-color: rgba(181, 122, 25, 0.24);
  background: #fff8e8;
}

.project-simulation-action.is-open {
  border-color: var(--hr-border);
  background: #fff;
}

.project-simulation-action > i {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #237d49;
  background: #dff4e7;
}

.project-simulation-action.is-warning > i {
  color: #9a640d;
  background: #fff0c7;
}

.project-simulation-action.is-open > i {
  color: var(--hr-muted);
  background: #f2f5f8;
}

.project-simulation-action strong,
.project-simulation-action span {
  display: block;
}

.project-simulation-action strong {
  color: var(--hr-text);
  font-size: 14px;
}

.project-simulation-action span {
  margin-top: 2px;
  color: var(--hr-muted);
  font-size: 13px;
}

.project-simulation-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fbfcfe;
}

.project-simulation-data-row {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid rgba(216, 226, 236, 0.8);
}

.project-simulation-data-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-simulation-data-row span i {
  color: #237d49;
}

.project-simulation-data-row.is-missing span i {
  color: #a1adba;
}

.project-simulation-data-row strong {
  min-width: 0;
  color: var(--hr-text);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.project-simulation-data-row small {
  color: var(--hr-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.project-heatpump-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-heatpump-filter-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.project-heatpump-list {
  max-height: 620px;
  overflow: auto;
  padding: 10px;
}

.project-heatpump-option {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  color: var(--hr-text);
  text-align: left;
}

.project-heatpump-option + .project-heatpump-option {
  margin-top: 8px;
}

.project-heatpump-option:hover,
.project-heatpump-option:focus-visible,
.project-heatpump-option.active {
  border-color: #8bbce8;
  background: #f1f8ff;
  outline: 0;
}

.project-heatpump-option strong,
.project-heatpump-option span,
.project-heatpump-option small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-heatpump-option strong {
  font-size: 14px;
  font-weight: 800;
}

.project-heatpump-option span {
  color: #506178;
  font-size: 13px;
  font-weight: 700;
}

.project-heatpump-option small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-detail-table th {
  color: var(--hr-muted);
  font-size: 12px;
  text-transform: uppercase;
}

.project-detail-table td,
.project-detail-table th {
  padding: 12px 16px;
}

.project-room-view-toggle {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  min-height: 34px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-room-view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--hr-border);
  background: transparent;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.project-room-view-toggle button:last-child {
  border-right: 0;
}

.project-room-view-toggle button:hover,
.project-room-view-toggle button:focus-visible {
  color: var(--hr-primary-dark);
  background: #f1f8ff;
  outline: 0;
}

.project-room-view-toggle button.active {
  color: #fff;
  background: var(--hr-primary);
}

.project-room-list-offline-sync {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 280px);
  max-width: 100%;
  min-height: 34px;
  padding: 6px 8px 6px 10px;
  border: 1px solid rgba(181, 122, 25, 0.26);
  border-radius: 8px;
  background: #fff8e6;
  color: #6f4a06;
  font-size: 13px;
  font-weight: 700;
}

.project-room-list-offline-sync-body {
  display: flex;
  margin: 16px 16px 0;
}

.project-room-list-offline-sync-body + .table-responsive,
.project-room-list-offline-sync-body + .project-room-card-view {
  margin-top: 12px;
}

.project-room-list-offline-sync.is-error {
  border-color: rgba(190, 18, 60, 0.22);
  background: #fff1f2;
  color: #9f1239;
}

.project-room-list-offline-sync > i {
  flex: 0 0 auto;
}

.project-room-list-offline-sync > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.project-room-list-offline-sync > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.project-room-head-action.btn {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
}

.project-room-row-clickable {
  cursor: pointer;
}

.project-room-row-clickable.is-offline-delete-pending {
  cursor: not-allowed;
  opacity: .58;
}

.project-room-row-clickable:hover,
.project-room-row-clickable:focus-visible {
  background: #f1f8ff;
  outline: 0;
}

.project-room-row-clickable.is-offline-delete-pending:hover,
.project-room-row-clickable.is-offline-delete-pending:focus-visible {
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.project-room-row-clickable:focus-visible td:first-child {
  box-shadow: inset 3px 0 0 var(--hr-primary);
}

.project-room-row-clickable.is-offline-delete-pending:focus-visible td:first-child {
  box-shadow: none;
}

.project-room-delete-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: fit-content;
  min-height: 22px;
  margin-left: 8px;
  padding: 2px 7px;
  border: 1px solid #e2c36d;
  border-radius: 999px;
  background: #fff8e6;
  color: #7a560f;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}

.project-room-card-body > .project-room-delete-pending-badge {
  margin-left: 0;
}

.project-room-card-view {
  display: grid;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
}

.project-room-floor-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-room-floor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
  color: var(--hr-text);
  text-align: left;
}

.project-room-floor-group.is-collapsed .project-room-floor-header {
  border-bottom-color: transparent;
}

.project-room-floor-header:hover,
.project-room-floor-header:focus-visible {
  background: #f7fbff;
  outline: 0;
}

.project-room-floor-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.project-room-floor-title i {
  width: 16px;
  color: var(--hr-primary);
  text-align: center;
}

.project-room-floor-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-floor-summary {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.project-room-floor-summary .status-pill {
  min-height: 28px;
  padding: 5px 8px;
}

.project-room-floor-body {
  padding: 14px;
}

.project-room-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.project-room-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.project-room-card:hover,
.project-room-card:focus-visible {
  border-color: #8bbce8;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
  outline: 0;
  transform: translateY(-1px);
}

.project-room-card.is-offline-delete-pending {
  border-color: #d8dee8;
  background: #f3f6f9;
  cursor: not-allowed;
  opacity: .62;
  transform: none;
}

.project-room-card.is-offline-delete-pending:hover,
.project-room-card.is-offline-delete-pending:focus-visible {
  border-color: #d8dee8;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  outline: 0;
  transform: none;
}

.project-room-card.is-offline-delete-pending .project-room-card-media {
  filter: grayscale(.85);
}

.project-room-card-media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e8eef6;
}

.project-room-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-room-card-media.is-empty {
  color: #7d8da1;
  background: linear-gradient(135deg, #eef3f8 0%, #dbe5ef 100%);
}

.project-room-card-media.is-empty > i {
  font-size: 32px;
}

.project-room-card-picture-count {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(15, 23, 42, .82);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.project-room-card-body {
  display: grid;
  gap: 11px;
  min-width: 0;
  padding: 13px;
}

.project-room-card-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.project-room-card-body h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-card-temperature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid #d6e3f2;
  border-radius: 7px;
  background: #f7fbff;
  color: #315f8f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.project-room-card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.project-room-card-metrics span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.project-room-card-metrics small,
.project-room-card-metrics strong,
.project-room-card-metrics em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-room-card-metrics small {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-room-card-metrics strong {
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
}

.project-room-card-metrics em {
  color: #506178;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.project-room-card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin-top: auto;
  padding: 0 13px 13px;
}

.project-room-card-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
}

.project-room-card-actions .project-room-inline-action.btn {
  gap: 5px;
  min-height: 26px;
  width: 100%;
}

.project-detail-table-subhead td {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  background: #f7f9fc;
}

.project-radiator-heater strong {
  display: block;
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
}

.project-radiator-performance {
  font-weight: 800;
  border-left: 1px solid rgba(226, 232, 240, 0.7);
}

.project-radiator-performance.is-ok {
  color: #147344;
  background: #e7f6ed;
}

.project-radiator-performance.is-bad {
  color: #b42318;
  background: #ffe8e6;
}

.project-heating-surface-note-row td {
  padding: 0 16px;
  background: #f8fafc;
  border-color: transparent;
  transition: padding 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
}

.project-heating-surface-note-row.is-open td {
  padding-top: 12px;
  padding-bottom: 12px;
  border-color: #e5ecf5;
}

.project-heating-surface-note-row .project-heating-surface-media-cell {
  vertical-align: top;
}

.project-heating-surface-collapse {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: max-height 0.24s ease, opacity 0.18s ease, transform 0.24s ease;
}

.project-heating-surface-note-row.is-open .project-heating-surface-collapse {
  max-height: 760px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.project-heating-surface-note-editor {
  display: grid;
  gap: 8px;
}

.project-heating-surface-note-editor textarea {
  min-height: 68px;
  padding-right: 66px;
  padding-bottom: 25px;
  color: #506178;
  font-size: 13px;
  overflow: hidden;
  resize: vertical;
}

.project-heating-surface-pictures {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-heating-surface-picture {
  width: 82px;
  height: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid #d9e4f0;
  border-radius: 8px;
  background: #fff;
}

.project-heating-surface-picture:hover,
.project-heating-surface-picture:focus-visible {
  border-color: #8bbce8;
  background: #f1f8ff;
  outline: 0;
}

.project-heating-surface-picture-placeholder {
  color: #7d8da1;
  background: #eef3f8;
  cursor: default;
  pointer-events: none;
}

.project-heating-surface-picture-placeholder i {
  font-size: 20px;
}

.project-heating-surface-picture img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  background: #e8eef6;
}

.project-heating-surface-picture-add {
  flex-direction: column;
  gap: 5px;
  border-style: dashed;
  color: #3371b7;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.project-heating-surface-picture-add i {
  font-size: 20px;
}

.project-heating-surface-picture-add.is-disabled {
  opacity: .58;
  cursor: progress;
}

.project-room-editor-media-block .project-heating-surface-pictures {
  --project-room-thumbnail-size: min(117px, calc((100% - 30px) / 4));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, var(--project-room-thumbnail-size)));
  gap: 10px;
  justify-content: start;
}

.project-room-editor-heating-card .project-room-editor-heating-pictures {
  --project-room-thumbnail-size: min(82px, calc((100% - 30px) / 4));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, var(--project-room-thumbnail-size)));
  gap: 10px;
  justify-content: start;
  max-width: 358px;
}

.project-room-editor-heating-card .project-room-editor-heating-pictures .project-heating-surface-picture,
.project-room-editor-media-block .project-heating-surface-pictures .project-heating-surface-picture {
  width: 100%;
  height: auto;
  min-width: 0;
  aspect-ratio: 1 / 1;
}

.project-room-editor-heating-card .project-room-editor-heating-pictures .project-heating-surface-picture img,
.project-room-editor-media-block .project-heating-surface-pictures .project-heating-surface-picture img {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .project-heating-surface-note-row td,
  .project-heating-surface-collapse {
    transition: none;
  }
}

.project-raw-line {
  display: block;
  max-width: 520px;
  margin-top: 4px;
  color: var(--hr-muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.project-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.project-placeholder-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
}

.project-placeholder-grid strong,
.project-placeholder-grid p {
  margin: 0;
}

.project-placeholder-grid p {
  margin-top: 5px;
  color: var(--hr-muted);
}

.project-metric-grid p {
  color: var(--hr-text);
  font-size: 18px;
  font-weight: 800;
}

.project-picture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 16px;
}

.project-picture-tile {
  position: relative;
  min-width: 0;
}

.project-picture-card {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 9px;
  color: var(--hr-text);
  text-decoration: none;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.project-picture-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: block;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  object-fit: cover;
  background: #f6f8fb;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.project-picture-card:hover img,
.project-picture-card:focus-visible img {
  border-color: #87b7e6;
  box-shadow: 0 14px 28px rgba(38, 87, 132, 0.18);
  transform: translateY(-1px);
}

.project-picture-card span {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.project-picture-card:focus-visible {
  outline: 3px solid rgba(28, 115, 201, 0.24);
  outline-offset: 4px;
  border-radius: 8px;
}

.project-picture-label-form {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.project-picture-label-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: center;
}

.project-picture-label-row .btn {
  width: 34px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.project-picture-label-row .spinner-border {
  width: 14px;
  height: 14px;
}

.project-picture-label-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--hr-red);
  font-size: 12px;
  line-height: 1.35;
}

.project-picture-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(156, 42, 63, 0.18);
  border-radius: 8px;
  color: #9f2f45;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 22px rgba(19, 31, 48, 0.16);
}

.project-picture-delete:hover,
.project-picture-delete:focus-visible {
  color: #ffffff;
  background: #b4233f;
  outline: 0;
}

.project-picture-delete:disabled {
  opacity: 0.55;
  pointer-events: none;
}

.project-gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 2080;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: rgba(9, 16, 25, 0.96);
  color: #fff;
  outline: 0;
}

.project-gallery-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: rgba(8, 13, 20, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.project-gallery-bar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-gallery-bar strong,
.project-gallery-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-gallery-bar strong {
  font-size: 15px;
  font-weight: 800;
}

.project-gallery-bar span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 700;
}

.project-gallery-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-gallery-actions button,
.project-gallery-nav {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.project-gallery-actions button:nth-child(2) {
  width: 58px;
  font-size: 12px;
  font-weight: 800;
}

.project-gallery-actions button:hover,
.project-gallery-actions button:focus-visible,
.project-gallery-nav:hover,
.project-gallery-nav:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: 0;
}

.project-gallery-actions button:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.project-gallery-stage {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: start;
  justify-items: center;
  margin: 0;
  padding: 18px 88px 72px;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.project-gallery-stage.is-zoomed {
  cursor: grab;
  touch-action: none;
}

.project-gallery-stage img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
  transform-origin: top center;
  transition: transform 0.12s ease-out;
  will-change: transform;
}

@media (max-width: 767.98px) {
  .project-gallery-stage {
    align-items: center;
  }

  .project-gallery-stage img {
    max-width: none;
    max-height: none;
    transform-origin: center center;
  }
}

.project-gallery-nav {
  position: fixed;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

.project-gallery-nav.is-prev {
  left: 22px;
}

.project-gallery-nav.is-next {
  right: 22px;
}

.project-pdf-overlay {
  position: fixed;
  inset: 0;
  z-index: 2090;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #eef2f6;
  color: #172033;
  outline: 0;
}

.project-pdf-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid rgba(22, 33, 52, 0.14);
  box-shadow: 0 8px 20px rgba(22, 33, 52, 0.08);
}

.project-pdf-bar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-pdf-bar strong,
.project-pdf-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-pdf-bar strong {
  font-size: 15px;
  font-weight: 800;
}

.project-pdf-bar span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-pdf-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-pdf-actions a,
.project-pdf-actions button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #26374f;
  background: #fff;
  text-decoration: none;
}

.project-pdf-actions button:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.project-pdf-actions .project-pdf-zoom {
  width: 62px;
  font-size: 12px;
  font-weight: 800;
}

.project-pdf-page-select {
  width: 112px;
  height: 38px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #4a5d74;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 0 28px 0 10px;
}

.project-pdf-actions a:hover,
.project-pdf-actions a:focus-visible,
.project-pdf-actions button:hover,
.project-pdf-actions button:focus-visible {
  color: #0f5eaa;
  border-color: #9dc7eb;
  background: #edf6ff;
  outline: 0;
}

.project-pdf-stage {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  background: #dfe6ee;
}

.project-pdf-native {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.project-pdf-native iframe {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 72px);
  border: 0;
  background: #fff;
}

.project-pdf-pages {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 18px;
}

.project-pdf-page {
  width: 100%;
  display: grid;
  justify-items: center;
  margin: 0;
}

.project-pdf-canvas {
  max-width: 100%;
  display: block;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(22, 33, 52, 0.14);
}

.project-pdf-state {
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 32px;
  color: #24364d;
  text-align: center;
}

.project-pdf-state .spinner-border {
  width: 34px;
  height: 34px;
}

.project-pdf-state p {
  max-width: 520px;
  margin: 0;
  color: var(--hr-muted);
}

.project-pdf-state.is-error i {
  color: #a33445;
  font-size: 30px;
}

.project-signature-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(12, 20, 32, 0.64);
}

.project-signature-dialog {
  width: min(1180px, 100%);
  max-height: calc(100vh - 44px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(9, 16, 28, 0.28);
  overflow: hidden;
}

.project-signature-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hr-border);
  background: #f8fafc;
}

.project-signature-header div {
  min-width: 0;
}

.project-signature-header p,
.project-signature-header h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-signature-header p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-signature-header h3 {
  color: var(--hr-text);
  font-size: 18px;
  font-weight: 800;
}

.project-signature-header button {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #26374f;
  background: #fff;
}

.project-signature-body {
  min-height: 0;
  overflow: auto;
}

.project-signature-state {
  min-height: 340px;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 34px;
  text-align: center;
}

.project-signature-state.is-error {
  color: #a33445;
}

.project-signature-state p {
  max-width: 560px;
  margin: 0;
  color: var(--hr-muted);
}

.project-signature-loading-spinner {
  width: 2.8rem;
  height: 2.8rem;
  border-width: 0.22rem;
  color: var(--hr-primary);
}

.project-signature-load-progress {
  width: min(420px, 100%);
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--hr-primary-rgb), 0.14);
}

.project-signature-load-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--hr-primary);
  transition: width 0.22s ease;
}

.project-signature-load-eta {
  font-size: 0.86rem;
}

.project-signature-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px;
  padding: 16px;
}

.project-signature-page-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-text);
  background: #f8fafc;
  text-align: left;
}

.project-signature-page-card.active,
.project-signature-page-card:hover,
.project-signature-page-card:focus-visible {
  border-color: #8fc1eb;
  background: #eef7ff;
  outline: 0;
}

.project-signature-page-card img {
  width: 100%;
  aspect-ratio: 1 / 1.38;
  display: block;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}

.project-signature-page-card span {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.project-signature-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  padding: 16px;
  background: #eef2f6;
}

.project-signature-preview {
  min-width: 0;
  min-height: 0;
  display: grid;
  justify-items: center;
  align-items: start;
  overflow: auto;
}

.project-signature-page-positioner {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: crosshair;
}

.project-signature-page-positioner img {
  max-width: 100%;
  display: block;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(22, 33, 52, 0.14);
  user-select: none;
}

.project-signature-marker {
  position: absolute;
  width: 180px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 2px solid #1f6fb2;
  border-radius: 8px;
  color: #14558a;
  background: rgba(238, 247, 255, 0.88);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}

.project-signature-tools {
  position: sticky;
  top: 16px;
  align-self: start;
  min-width: 0;
  max-height: calc(100vh - 132px);
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.project-signature-tool-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.project-signature-tool-head h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 18px;
  font-weight: 800;
}

.project-signature-help {
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.45;
}

.project-signature-action-grid,
.project-signature-action-row {
  display: grid;
  gap: 9px;
}

.project-signature-action-row {
  grid-template-columns: 1fr 1fr;
}

.project-signature-action-grid .btn,
.project-signature-action-row .btn,
.project-signature-tools > .btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.project-signature-draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 2110;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(12, 20, 32, 0.5);
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.project-signature-draw-dialog {
  width: min(720px, 100%);
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 28px 70px rgba(9, 16, 28, 0.3);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.project-signature-draw-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.project-signature-draw-header p,
.project-signature-draw-header h3 {
  margin: 0;
}

.project-signature-draw-header p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-signature-draw-header h3 {
  color: var(--hr-text);
  font-size: 20px;
  font-weight: 800;
}

.project-signature-draw-header button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #26374f;
  background: #fff;
}

.project-signature-canvas {
  width: 100%;
  height: 180px;
  border: 1px dashed #9fb5cc;
  border-radius: 8px;
  background:
    linear-gradient(transparent calc(100% - 38px), rgba(31, 111, 178, 0.12) calc(100% - 38px), rgba(31, 111, 178, 0.12) calc(100% - 36px), transparent calc(100% - 36px)),
    #ffffff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.project-signature-canvas.is-overlay {
  height: 240px;
}

body.email-viewer-open {
  overflow: hidden;
}

.email-viewer-overlay {
  position: fixed;
  inset: 0;
  z-index: 2110;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #edf2f7;
  color: #172033;
  outline: 0;
}

.email-viewer-bar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  background: #ffffff;
  border-bottom: 1px solid rgba(22, 33, 52, 0.14);
  box-shadow: 0 8px 20px rgba(22, 33, 52, 0.08);
}

.email-viewer-bar > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.email-viewer-bar strong,
.email-viewer-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-viewer-bar strong {
  font-size: 15px;
  font-weight: 800;
}

.email-viewer-bar span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.email-viewer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-viewer-actions button {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #26374f;
  background: #fff;
}

.email-viewer-actions button:hover,
.email-viewer-actions button:focus-visible {
  color: #0f5eaa;
  border-color: #9dc7eb;
  background: #edf6ff;
  outline: 0;
}

.email-viewer-read {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.email-viewer-read.is-read {
  color: #176b39;
  background: #e7f7ed;
}

.email-viewer-read.is-unread {
  color: #a33445;
  background: #fff0f1;
}

.email-viewer-stage {
  min-width: 0;
  min-height: 0;
  padding: 14px;
  background: #dfe6ee;
}

.email-viewer-frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(22, 33, 52, 0.14);
}

.email-viewer-state {
  min-height: 100%;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 32px;
  color: #24364d;
  text-align: center;
}

.email-viewer-state .spinner-border {
  width: 34px;
  height: 34px;
}

.email-viewer-state p {
  max-width: 520px;
  margin: 0;
  color: var(--hr-muted);
}

.email-viewer-state.is-error i {
  color: #a33445;
  font-size: 30px;
}

.project-file-list {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.project-upload-area {
  display: grid;
  gap: 10px;
  padding: 16px 16px 0;
}

.project-library-toolbar {
  display: grid;
  grid-template-columns: repeat(3, minmax(145px, 1fr)) minmax(180px, 1.2fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 16px 16px 0;
}

.project-library-toolbar label,
.project-library-upload-grid label {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
}

.project-library-toolbar-actions {
  display: inline-flex;
  gap: 8px;
  justify-content: flex-end;
  white-space: nowrap;
}

.project-library-intro-button {
  border-color: #b7d5ef;
  color: #174f7f;
  background: #eef7ff;
  font-weight: 800;
}

.project-library-intro-button:hover,
.project-library-intro-button:focus-visible {
  border-color: rgba(var(--hr-primary-rgb), 0.58);
  color: var(--hr-primary-dark);
  background: #e4f2ff;
}

.project-library-toggle {
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.project-library-toggle:hover,
.project-library-toggle:focus-within {
  border-color: rgba(var(--hr-primary-rgb), 0.36);
  background: #fbfdff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.project-library-toggle.is-active {
  border-color: rgba(var(--hr-primary-rgb), 0.52);
  background: #eef7ff;
}

.project-library-toggle-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-library-toggle-copy strong {
  overflow: hidden;
  color: #24364d;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-library-toggle-copy small {
  overflow: hidden;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-library-switch {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  padding-left: 0;
}

.project-library-switch .form-check-input {
  width: 42px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}

.project-library-results-card,
.project-library-upload {
  display: grid;
  gap: 12px;
  margin: 16px 16px 0;
  padding: 14px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  background: #fbfcfe;
}

.project-library-results-card .project-library-toolbar,
.project-library-results-card .project-library-matches,
.project-library-results-card .project-library-list {
  padding: 0;
}

.project-library-results-card .project-modal-loading.inline {
  min-height: 160px;
}

.project-library-results-card .project-modal-empty {
  border-radius: 8px;
}

.project-library-results-card .project-file-empty-hero {
  min-height: 220px;
  padding: 36px 20px;
}

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

.project-library-section-head p,
.project-library-section-head h4 {
  margin: 0;
}

.project-library-section-head p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-library-section-head h4 {
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 800;
}

.project-library-upload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  align-items: end;
}

.project-library-upload-name {
  grid-column: span 2;
}

.project-library-dropzone {
  grid-column: 1 / -1;
}

.project-library-matches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 0;
}

.project-library-match-help {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid #c7d8eb;
  border-radius: 6px;
  color: #305c82;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.project-library-match-help:hover,
.project-library-match-help:focus-visible {
  border-color: rgba(var(--hr-primary-rgb), 0.52);
  color: var(--hr-primary-dark);
  background: #eef7ff;
  outline: 0;
}

.project-library-list {
  padding-top: 12px;
}

.project-library-item {
  align-items: start;
}

.project-library-icon {
  color: #7a2f2f;
  background: #fff0f0;
}

.project-library-category {
  border-color: #cfe0f4;
  color: #225f8f;
  background: #eef7ff;
}

.project-library-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

.project-library-meta span {
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #d7e2ef;
  border-radius: 999px;
  color: #334155;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
}

.project-library-actions .btn {
  min-height: 32px;
}

.project-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.project-library-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.project-library-card:hover {
  border-color: rgba(var(--hr-primary-rgb), 0.42);
  background: #fbfdff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
}

.project-library-card:focus-visible {
  outline: 3px solid rgba(var(--hr-primary-rgb), 0.22);
  outline-offset: 2px;
  border-color: rgba(var(--hr-primary-rgb), 0.7);
}

.project-library-card-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  border: 1px solid #d9e4ef;
  border-radius: 8px;
  color: inherit;
  background: #f4f7fb;
  pointer-events: none;
}

.project-library-card-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.project-library-card-preview .project-library-category {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
}

.project-library-card-preview-fallback {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #7a2f2f;
  background: #fff0f0;
  font-size: 26px;
}

.project-library-card-body {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.project-library-card-body h4 {
  margin: 0;
}

.project-library-card-body h4 {
  display: -webkit-box;
  overflow: hidden;
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.28;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.project-library-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
}

.project-library-card-detail {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5b6878;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}

.project-library-card-detail.is-owner {
  grid-column: 1 / -1;
  color: #64748b;
}

.project-library-card-detail i {
  flex: 0 0 auto;
  width: 12px;
  color: #8393a7;
  font-size: 10px;
  text-align: center;
}

.project-library-card-detail span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-library-card-footer {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #edf2f7;
}

.project-library-card-footer .project-library-meta {
  flex: 1 1 130px;
  min-width: 0;
  margin-top: 0;
}

.project-library-card-footer .project-library-meta span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-library-card-reactions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.project-library-card-reactions {
  justify-content: flex-end;
  margin-left: auto;
}

.project-library-card-reactions .btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 34px;
  min-height: 24px;
  padding: 3px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.project-library-card-reactions .btn i {
  font-size: 11px;
  line-height: 1;
}

.project-library-load-more {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 12px 0 2px;
  color: #64748b;
}

.project-library-load-more-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.project-library-load-more .btn {
  min-height: 30px;
  gap: 6px;
  font-weight: 750;
}

.project-library-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 2090;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 24px;
  background: rgba(15, 23, 42, 0.52);
}

.project-library-intro-dialog {
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d1deeb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 26px 76px rgba(15, 23, 42, 0.26);
}

.project-library-intro-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #dce6f1;
  background: #f7fbff;
}

.project-library-intro-header p,
.project-library-intro-header h3,
.project-library-intro-header span {
  margin: 0;
}

.project-library-intro-header p {
  color: var(--hr-primary-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.project-library-intro-header h3 {
  margin-top: 4px;
  color: var(--hr-text);
  font-size: 25px;
  font-weight: 850;
  line-height: 1.15;
}

.project-library-intro-header span {
  display: block;
  max-width: 680px;
  margin-top: 7px;
  color: #526276;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.45;
}

.project-library-intro-header button {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cad8e7;
  border-radius: 8px;
  color: #5d6c7f;
  background: #fff;
}

.project-library-intro-header button:hover,
.project-library-intro-header button:focus-visible {
  border-color: #a9c5df;
  color: var(--hr-primary-dark);
  outline: 0;
}

.project-library-intro-body {
  min-height: 0;
  display: grid;
  gap: 16px;
  overflow: auto;
  padding: 18px 20px 20px;
}

.project-library-intro-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d7e4f1;
  border-radius: 8px;
  background: #f8fafc;
}

.project-library-intro-flow > span {
  min-width: 0;
  min-height: 82px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 10px;
  border: 1px solid #dbe6f2;
  border-radius: 8px;
  color: #26384f;
  background: #fff;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.project-library-intro-flow > span i {
  color: var(--hr-primary);
  font-size: 30px;
  line-height: 1;
}

.project-library-intro-flow > i {
  color: #8da0b5;
  font-size: 13px;
}

.project-library-intro-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.project-library-intro-steps article {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 15px;
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.project-library-intro-step-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  font-size: 19px;
}

.project-library-intro-step-icon.is-upload {
  color: #175f8d;
  background: #e7f4ff;
}

.project-library-intro-step-icon.is-tags {
  color: #557400;
  background: #f1f7d7;
}

.project-library-intro-step-icon.is-project {
  color: #8b3445;
  background: #fff0f3;
}

.project-library-intro-steps small {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d7e3f0;
  border-radius: 999px;
  color: #526276;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.project-library-intro-steps h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 16px;
  font-weight: 850;
  line-height: 1.2;
}

.project-library-intro-steps p {
  margin: 0;
  color: #5b6878;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.project-library-intro-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #cae0d2;
  border-radius: 8px;
  color: #1f5131;
  background: #f0faf3;
}

.project-library-intro-note i {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #1f6b3a;
  background: #dcf2e3;
  font-size: 18px;
}

.project-library-intro-note p {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.project-library-intro-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #dce6f1;
  background: #f8fafc;
}

.project-library-intro-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  font-weight: 850;
}

.project-library-upload-overlay {
  position: fixed;
  inset: 0;
  z-index: 2085;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.48);
}

.project-library-upload-dialog {
  width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d6e2ef;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.project-library-upload-dialog-head,
.project-library-upload-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e0e8f2;
}

.project-library-upload-dialog-actions {
  border-top: 1px solid #e0e8f2;
  border-bottom: 0;
  background: #f8fafc;
}

.project-library-upload-dialog-actions > span {
  min-width: 0;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 700;
}

.project-library-upload-dialog-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.project-library-upload-dialog-head p,
.project-library-upload-dialog-head h3 {
  margin: 0;
}

.project-library-upload-dialog-head p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.project-library-upload-dialog-head h3 {
  color: var(--hr-text);
  font-size: 20px;
  font-weight: 800;
}

.project-library-upload-dialog-head button {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d6e2ef;
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
}

.project-library-upload-dialog-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(270px, 0.9fr) minmax(320px, 1fr);
  gap: 16px;
  overflow: auto;
  padding: 16px;
}

.project-library-upload-preview,
.project-library-upload-form {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

.project-library-upload-preview-head {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.project-library-upload-preview-head strong,
.project-library-upload-preview-head p {
  margin: 0;
}

.project-library-upload-preview-head strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--hr-text);
  font-weight: 800;
}

.project-library-upload-preview-head p {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 700;
}

.project-library-upload-preview-frame {
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d8e3ef;
  border-radius: 8px;
  background: #f4f7fb;
}

.project-library-upload-preview-frame img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
  background: #fff;
}

.project-library-upload-preview-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 28px;
  color: var(--hr-muted);
  text-align: center;
}

.project-library-upload-preview-state strong {
  color: var(--hr-text);
  font-weight: 800;
}

.project-library-upload-preview-state.is-error i {
  color: #9f2f45;
  font-size: 26px;
}

.project-library-upload-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-library-upload-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
}

.project-library-upload-form .project-upload-message,
.project-library-upload-product-action,
.project-library-upload-tags,
.project-library-upload-title-field {
  grid-column: 1 / -1;
}

.project-library-upload-product-action {
  display: flex;
  justify-content: flex-start;
}

.project-library-upload-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-library-upload-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--hr-text);
  font-size: 12px;
  font-weight: 800;
}

.project-library-upload-tag > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-library-upload-tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: var(--hr-muted);
}

.project-library-upload-tag button:hover,
.project-library-upload-tag button:focus-visible {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

.project-library-upload-title-field input[readonly] {
  color: var(--hr-text);
  background: #f8fafc;
  font-weight: 800;
}

.project-document-generator {
  --upload-dropzone-hover-bg: rgba(var(--hr-primary-rgb), 0.08);
  --upload-dropzone-hover-border: rgba(var(--hr-primary-rgb), 0.62);
  display: grid;
  grid-template-columns: 48px minmax(220px, 280px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 16px 16px 0;
  padding: 16px;
  border: 1px dashed #b9cadf;
  border-radius: 8px;
  color: var(--hr-text);
  background: #f8fafc;
  transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.project-document-generator-actions {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.project-document-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.project-document-generator label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
}

.project-document-generator .form-control {
  width: 100%;
  background: #fff;
}

.project-document-generator .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.project-document-generator .project-upload-message {
  grid-column: 2 / -1;
}

.heizreport-generator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, 0.58);
}

.heizreport-generator-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(920px, 100%);
  max-height: min(92vh, 820px);
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #c7d4e3;
  background: #fff;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.vdz-generator-modal {
  width: min(760px, 100%);
}

.heizreport-generator-header,
.heizreport-generator-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid #d9e3ef;
}

.heizreport-generator-actions {
  justify-content: flex-end;
  border-top: 1px solid #d9e3ef;
  border-bottom: 0;
  background: #f8fafc;
}

.heizreport-generator-header p,
.heizreport-generator-section-head p {
  margin: 0;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.heizreport-generator-header h3,
.heizreport-generator-section-head h4 {
  margin: 0;
  color: var(--hr-text);
  font-weight: 800;
}

.heizreport-generator-header button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ccd8e6;
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
}

.heizreport-generator-body {
  display: grid;
  gap: 18px;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.heizreport-generator-section {
  display: grid;
  gap: 12px;
}

.heizreport-generator-section-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.heizreport-generator-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.heizreport-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.heizreport-option-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  min-height: 74px;
  padding: 12px;
  border: 1px solid #d5e0ec;
  border-radius: 8px;
  background: #f8fafc;
}

.heizreport-option-card.is-disabled {
  opacity: 0.62;
  background: #f3f6fa;
}

.heizreport-option-card input,
.heizreport-temperature-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--hr-primary);
}

.heizreport-option-card strong,
.heizreport-temperature-option span {
  display: block;
  color: var(--hr-text);
  font-weight: 800;
}

.heizreport-option-card small {
  display: block;
  margin-top: 2px;
  color: var(--hr-muted);
  line-height: 1.35;
}

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

.heizreport-temperature-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d5e0ec;
  border-radius: 8px;
  background: #fff;
}

.heizreport-fixed-temperature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.heizreport-fixed-temperature-list span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #d5e0ec;
  border-radius: 8px;
  background: #fff;
  color: var(--hr-text);
  font-size: 13px;
}

.project-upload-message {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.project-upload-message.is-error {
  color: #9f2f45;
}

.project-upload-message.is-success {
  color: #24753c;
}

.project-upload-message.is-warning {
  color: #8a5d13;
}

.project-room-offline-badge {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

.project-room-editor-dialog > .project-room-editor-offline-status.project-upload-message {
  display: flex;
  align-self: stretch;
  margin: 10px 18px 0;
  padding: 10px 12px;
  border: 1px solid rgba(181, 122, 24, 0.28);
  border-radius: 8px;
  background: rgba(181, 122, 24, 0.08);
  line-height: 1.35;
}

.project-file-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f8fafc;
}

.project-file-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #9f2f2f;
  background: #fff0f0;
}

.project-file-item strong,
.project-file-item p {
  margin: 0;
}

.project-file-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-file-item strong {
  display: block;
  overflow-wrap: anywhere;
}

.project-file-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid #ffd99f;
  border-radius: 999px;
  color: #955b08;
  background: #fff7e8;
  font-size: 12px;
  font-weight: 800;
}

.project-file-signatures {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.project-file-signature-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--hr-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.project-file-signature-badge.is-success {
  color: #216d3a;
  border-color: #bde7c7;
  background: #ecf9ef;
}

.project-file-signature-badge.is-warning {
  color: #8a5b08;
  border-color: #ffdba3;
  background: #fff8e9;
}

.project-file-signature-badge.is-info {
  color: #1f5f93;
  border-color: #c6ddf3;
  background: #eef7ff;
}

.project-file-item p {
  margin-top: 3px;
  color: var(--hr-muted);
  font-size: 13px;
}

.project-file-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.project-file-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.project-settings-form {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.project-settings-tab {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: start;
}

.project-settings-tab > .project-detail-panel {
  grid-column: 1;
  grid-row: 1;
}

.project-settings-tab > .project-settings-actions-grid {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 1fr;
}

.project-settings-tab .project-settings-actions-grid .project-settings-inline-grid {
  grid-template-columns: 1fr;
}

.project-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.project-settings-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.project-settings-tool {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.project-settings-tool .btn {
  justify-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.project-settings-variant-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-danger-panel {
  border-color: #f2c5c5;
}

.project-settings-inline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 12px;
  align-items: end;
}

.project-settings-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  margin-top: 2px;
  padding: 9px 12px;
  border: 1px solid #d9e3ef;
  border-radius: 8px;
  color: var(--hr-text);
  background: #f5f8fb;
  font-size: 14px;
  font-weight: 800;
}

.project-settings-section-title:first-child {
  margin-top: 0;
}

.project-settings-toggle-row {
  min-height: 50px;
  cursor: pointer;
  font-weight: 800;
}

.project-settings-switch-control {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding-left: 0;
}

.project-settings-switch-control .form-check-input {
  width: 2.65em;
  height: 1.35em;
  margin: 0;
  cursor: pointer;
}

.project-settings-switch-control .form-check-input:disabled {
  cursor: not-allowed;
}

.project-settings-collapse {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -14px;
  opacity: 0;
  transition: grid-template-rows 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
}

.project-settings-collapse.is-open {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
}

.project-settings-collapse-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  min-height: 0;
  overflow: hidden;
}

.project-switch-field {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 26px;
  color: var(--hr-text);
  font-size: 14px;
  font-weight: 700;
}

.project-modal-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 14px;
  font-weight: 700;
}

.project-modal-alert.is-wide {
  grid-column: 1 / -1;
}

.project-modal-alert > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.project-modal-alert small {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.project-modal-alert.is-warning {
  border-color: #ffd99f;
  color: #955b08;
  background: #fff7e8;
}

.project-modal-alert.is-danger {
  border-color: #f4b8b8;
  color: #9f2727;
  background: #fff0f0;
}

.project-alert-overlay {
  position: fixed;
  inset: 0;
  z-index: 2140;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(11, 18, 29, 0.46);
}

.project-alert-dialog {
  width: min(440px, 100%);
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid #f0c1ca;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(17, 28, 44, 0.28);
}

.project-alert-icon {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #a62c45;
  background: #fff0f3;
  font-size: 18px;
}

.project-alert-content {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.project-alert-content h3,
.project-alert-content p,
.project-alert-content strong {
  margin: 0;
}

.project-alert-content h3 {
  color: var(--hr-text);
  font-size: 18px;
  font-weight: 850;
}

.project-alert-content p {
  color: #4b5c73;
  font-size: 14px;
  line-height: 1.45;
}

.project-alert-content strong {
  color: var(--hr-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.project-alert-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.project-alert-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.project-alert-dialog.is-file-conflict {
  width: min(560px, 100%);
}

.project-alert-actions.is-file-conflict {
  flex-wrap: wrap;
}

.project-alert-actions.is-file-conflict .btn {
  min-height: 34px;
}

.project-alert-dialog.is-warning {
  border-color: #ffd99f;
}

.project-alert-dialog.is-warning .project-alert-icon {
  color: #955b08;
  background: #fff7e8;
}

.project-alert-dialog.is-info {
  border-color: #bfd7f3;
}

.project-alert-dialog.is-info .project-alert-icon {
  color: var(--hr-primary-dark);
  background: #eef6ff;
}

.project-alert-dialog.is-primary {
  border-color: rgba(var(--hr-primary-rgb), 0.28);
}

.project-alert-dialog.is-primary .project-alert-icon {
  color: var(--hr-primary-dark);
  background: rgba(var(--hr-primary-rgb), 0.1);
}

.project-alert-note {
  color: #955b08;
  font-weight: 700;
}

.project-field-note {
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
}

.project-field-note.is-success {
  color: #24753c;
  font-weight: 700;
}

.project-funding-tab {
  min-height: 0;
}

.project-funding-empty-hero {
  border: 1px solid var(--hr-border, #d9e2ef);
  border-radius: 8px;
  background: #ffffff;
}

.project-funding-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
}

.project-funding-empty h3,
.project-funding-empty p {
  margin: 0;
}

.project-funding-empty h3 {
  color: var(--hr-text);
  font-size: 18px;
}

.project-funding-empty p {
  margin-top: 4px;
  color: var(--hr-muted);
  line-height: 1.42;
}

.project-funding-empty-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 20px;
}

body.funding-calculator-open,
body.amortisation-calculator-open {
  overflow: hidden;
}

body.funding-application-open {
  overflow: hidden;
}

.funding-application-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2070;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: 24px;
  overflow: hidden;
  background: rgba(16, 32, 63, 0.68);
  outline: 0;
}

.funding-application-embedded {
  min-width: 0;
}

.funding-application-shell {
  width: min(100%, 1320px);
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: var(--hr-app-bg);
  box-shadow: var(--hr-shadow-md);
}

.funding-application-shell.is-embedded {
  width: 100%;
  height: min(860px, calc(100vh - 220px));
  min-height: 620px;
  box-shadow: var(--hr-shadow-sm);
}

.funding-application-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.funding-application-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.funding-application-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.funding-application-title p,
.funding-application-title h2 {
  margin: 0;
}

.funding-application-title h2 {
  max-width: min(54vw, 760px);
  overflow: hidden;
  color: var(--hr-text);
  font-size: 22px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funding-application-title p:last-child {
  max-width: min(54vw, 760px);
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funding-application-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.funding-application-close {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
}

.funding-application-close:hover,
.funding-application-close:focus-visible {
  color: var(--hr-text);
  border-color: #c5d4e7;
  background: #f6f8fb;
}

.funding-application-body {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

.funding-application-nav {
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  border-right: 1px solid var(--hr-border);
  background: #fff;
}

.funding-application-nav-toggle {
  display: none;
}

.funding-nav-toggle-label {
  min-width: 0;
}

.funding-advisor-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #d7e3f0;
  border-radius: 8px;
  background: #f7fbff;
}

.funding-advisor-photo {
  width: 86px;
  height: 86px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #c5d9eb;
  border-radius: 8px;
  color: #0f5eaa;
  background: #fff;
  font-size: 24px;
  font-weight: 900;
}

.funding-advisor-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.funding-advisor-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.funding-advisor-copy small {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.funding-advisor-copy strong,
.funding-advisor-copy span {
  overflow-wrap: anywhere;
}

.funding-advisor-copy strong {
  color: var(--hr-text);
  font-size: 14px;
  line-height: 1.25;
}

.funding-advisor-copy span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
}

.funding-advisor-contact {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #bdd6ec;
  border-radius: 8px;
  color: #0f5eaa;
  background: #fff;
  font-size: 12px;
  font-weight: 800;
}

.funding-advisor-contact:hover,
.funding-advisor-contact:focus-visible {
  color: #fff;
  border-color: #0f5eaa;
  background: #0f5eaa;
  outline: 0;
}

.funding-application-nav-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #506178;
  background: transparent;
  font-weight: 800;
  text-align: left;
}

.funding-application-nav-item i {
  width: 20px;
  text-align: center;
}

.funding-nav-label {
  min-width: 0;
  flex: 1 1 auto;
}

.funding-tab-check {
  margin-left: auto;
  color: var(--hr-green);
}

.funding-application-nav-item.active .funding-tab-check {
  color: #fff;
}

.funding-application-nav-item:hover {
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.funding-application-nav-item.active {
  color: #fff;
  background: var(--hr-primary);
}

.funding-application-content {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 26px 96px;
}

.funding-application-section {
  display: grid;
  gap: 16px;
}

.funding-application-section h3,
.funding-application-section h4,
.funding-application-section p {
  margin: 0;
}

.funding-application-section h3 {
  color: var(--hr-text);
  font-size: 21px;
  line-height: 1.25;
}

.funding-section-help {
  max-width: 860px;
  color: var(--hr-muted);
  line-height: 1.45;
}

.funding-partner-guidance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  max-width: 960px;
  padding: 20px 22px;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  color: #254a6f;
  background: #f4f9ff;
}

.funding-partner-guidance > i {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #e8f3ff;
  font-size: 22px;
}

.funding-partner-guidance h4,
.funding-partner-guidance p {
  margin: 0;
}

.funding-partner-guidance h4 {
  color: var(--hr-primary-dark);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.22;
}

.funding-partner-guidance p {
  margin-top: 6px;
  color: #506178;
  font-size: 15px;
  line-height: 1.45;
}

.funding-collapse-panel,
.funding-collapse-item,
.funding-tech-body,
.funding-collapse-enter-active,
.funding-collapse-leave-active {
  max-height: var(--funding-collapse-max, 3200px);
  overflow: hidden;
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    transform 0.28s ease,
    padding 0.28s ease,
    margin 0.28s ease,
    border-width 0.28s ease;
}

.funding-collapse-enter-from,
.funding-collapse-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
}

.funding-collapse-enter-to,
.funding-collapse-leave-from {
  max-height: var(--funding-collapse-max, 3200px);
  opacity: 1;
  transform: translateY(0);
}

.funding-collapse-panel {
  min-width: 0;
  overflow: hidden;
}

.funding-collapse-shell {
  min-width: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    transform 0.28s ease;
}

.funding-collapse-shell.is-open {
  max-height: var(--funding-collapse-max, 3200px);
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    max-height 0.28s ease,
    opacity 0.2s ease,
    transform 0.28s ease;
}

.funding-collapse-inner {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.funding-collapse-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.funding-toggle-card {
  min-width: 0;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.funding-toggle-card > .funding-form-switch-row {
  min-height: 54px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.funding-toggle-card > .funding-form-switch-row.is-invalid {
  background: transparent;
  box-shadow: none;
}

.funding-toggle-card.is-invalid {
  border-color: var(--hr-red);
  box-shadow: 0 0 0 0.14rem rgba(201, 74, 74, 0.12);
}

.funding-toggle-card.is-invalid > .funding-form-switch-row {
  background: #fff7f7;
}

.funding-toggle-card.is-warning {
  border-color: #f0c879;
  box-shadow: 0 0 0 0.14rem rgba(198, 121, 15, 0.14);
}

.funding-toggle-card.is-warning > .funding-form-switch-row {
  background: #fff8e8;
}

.funding-contract-generator-row {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 16px 14px;
  background: #fff;
}

.funding-contract-generator-row .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.funding-contract-info-panel {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid #d7e2f0;
  border-radius: 8px;
  background: #f7f9fc;
}

.funding-contract-info-panel.is-self-install {
  border-color: #f2d186;
  background: #fff8e8;
}

.funding-contract-info-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #fff;
  font-size: 20px;
}

.funding-contract-info-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.funding-contract-info-copy h4,
.funding-contract-info-copy p {
  margin: 0;
}

.funding-contract-info-copy h4 {
  color: var(--hr-text);
  font-size: 18px;
  line-height: 1.25;
}

.funding-contract-info-copy p {
  color: var(--hr-muted);
  font-size: 14px;
  line-height: 1.45;
}

.funding-contract-info-copy .btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.funding-contract-options {
  display: grid;
  gap: 14px;
}

.funding-contract-choice-card {
  min-width: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.funding-contract-choice-card.is-active {
  border-color: #cfe0f4;
}

.funding-contract-choice-card.is-invalid {
  border-color: var(--hr-red);
  box-shadow: 0 0 0 0.14rem rgba(201, 74, 74, 0.12);
}

.funding-contract-choice-card.is-disabled {
  background: #fbfcfe;
}

.funding-contract-choice-header {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--hr-border);
}

.funding-contract-choice-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 18px;
}

.funding-contract-choice-body {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.funding-contract-choice-body h4,
.funding-contract-choice-body p,
.funding-contract-generator-copy h4,
.funding-contract-generator-copy p {
  margin: 0;
}

.funding-contract-choice-body h4 {
  color: var(--hr-text);
  font-size: 16px;
}

.funding-contract-choice-body p {
  color: var(--hr-muted);
  font-size: 13px;
  line-height: 1.4;
}

.funding-contract-card-content {
  min-width: 0;
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #fbfcfe;
}

.funding-contract-document-actions {
  display: inline-flex;
  align-items: end;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.funding-contract-document-actions .btn {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.funding-contract-muted-panel,
.funding-contract-muted-text {
  color: var(--hr-muted);
  font-weight: 700;
}

.funding-contract-muted-panel {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 13px 14px;
  border: 1px dashed #cfd9e8;
  border-radius: 8px;
  background: #fff;
}

.funding-contract-muted-panel i,
.funding-contract-muted-text i {
  color: var(--hr-green);
}

.funding-contract-generator-hero {
  min-width: 0;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 24px;
  background: #f7f9fc;
}

.funding-contract-generator-icon {
  width: 68px;
  height: 68px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d7e2f0;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #fff;
  font-size: 30px;
}

.funding-contract-generator-copy {
  min-width: 0;
  display: grid;
  gap: 12px;
  justify-items: start;
}

.funding-contract-generator-copy h4 {
  color: var(--hr-text);
  font-size: 24px;
}

.funding-contract-generator-copy p {
  color: var(--hr-muted);
  line-height: 1.45;
}

.funding-contract-generator-copy .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.funding-confirmation-cards {
  display: grid;
  gap: 12px;
}

.funding-confirmation-card-header {
  min-width: 0;
  padding: 16px 16px 0;
}

.funding-confirmation-card-header h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 16px;
}

.funding-confirmation-card > .funding-form-switch-row {
  min-height: 62px;
  border-top: 1px solid var(--hr-border);
}

.funding-warning-panel {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 16px 14px;
  border-top: 1px solid #f0c879;
  color: #8a560c;
  background: #fff8e8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.funding-warning-panel i {
  margin-top: 2px;
  color: var(--hr-amber);
}

.funding-toggle-content {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.funding-toggle-content h4 {
  color: var(--hr-text);
  font-size: 16px;
}

.funding-toggle-content p {
  color: var(--hr-muted);
  line-height: 1.42;
}

.funding-collapse-card h4 {
  color: var(--hr-text);
  font-size: 16px;
}

.funding-collapse-card p {
  color: var(--hr-muted);
  line-height: 1.42;
}

.funding-collapse-divider {
  height: 1px;
  background: var(--hr-border);
}

.funding-legal-list {
  margin: 0;
  padding-left: 20px;
  color: var(--hr-muted);
  line-height: 1.5;
}

.funding-application-hero,
.funding-application-info,
.funding-application-note,
.funding-tech-card,
.funding-upload-card,
.funding-confirmation-stack article,
.funding-step-grid article {
  min-width: 0;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.funding-application-hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  border-color: #caebd4;
  background: #f4fcf6;
}

.funding-application-hero > i {
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-green);
  background: #e5f7ea;
  font-size: 24px;
}

.funding-start-hero {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 18px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  background: #f5faff;
}

.funding-start-hero-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}

.funding-start-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.22);
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #fff;
  font-size: 25px;
}

.funding-start-hero h3 {
  max-width: 760px;
  margin: 2px 0 8px;
  color: var(--hr-text);
  font-size: 28px;
  line-height: 1.16;
}

.funding-start-hero p:not(.section-kicker),
.funding-start-feature-grid p,
.funding-start-action-card p {
  color: var(--hr-muted);
  line-height: 1.45;
}

.funding-start-price {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(var(--hr-primary-rgb), 0.24);
  border-radius: 8px;
  background: #fff;
}

.funding-start-price span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.funding-start-price strong {
  color: var(--hr-primary-dark);
  font-size: 36px;
  line-height: 1;
}

.funding-start-price small {
  color: var(--hr-muted);
  font-weight: 700;
}

.funding-start-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.funding-start-feature-grid article,
.funding-start-action-card {
  min-width: 0;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.funding-start-feature-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.funding-start-feature-grid i {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-green);
  background: #e5f7ea;
}

.funding-start-feature-grid h4,
.funding-start-action-card h4 {
  margin: 0;
  color: var(--hr-text);
  font-size: 16px;
}

.funding-start-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
}

.funding-start-action-card > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.funding-start-muted {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--hr-border);
}

.funding-application-info,
.funding-application-note {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.funding-application-note label,
.funding-application-note small {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.funding-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.funding-status-card {
  --funding-status-color: #506178;
  --funding-status-bg: #f6f8fb;
  --funding-status-border: #d9e2ef;
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--funding-status-border);
  border-radius: 8px;
  background: var(--funding-status-bg);
}

.funding-status-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--funding-status-color);
  background: #fff;
  font-size: 27px;
  line-height: 1;
}

.funding-status-body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.funding-status-body header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.funding-status-body header > span {
  flex: 0 0 auto;
  max-width: 120px;
  color: var(--funding-status-color);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.funding-status-card h4,
.funding-status-card p,
.funding-status-card small,
.funding-status-details dd {
  display: block;
  overflow-wrap: anywhere;
}

.funding-status-card h4 {
  color: var(--hr-text);
  font-size: 15px;
}

.funding-status-card p {
  margin: 0;
  color: var(--funding-status-color);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.funding-status-card small {
  color: var(--hr-muted);
  line-height: 1.35;
}

.funding-status-alert {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border: 1px solid #f4c2c2;
  border-radius: 8px;
  padding: 10px 11px;
  color: #7d2430;
  background: #fff;
  font-size: 12px;
  line-height: 1.4;
}

.funding-status-alert.is-success {
  border-color: #caebd4;
  color: #17643a;
  background: #f1fbf4;
}

.funding-status-alert strong {
  flex: 0 0 auto;
}

.funding-status-alert span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.funding-status-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(40, 57, 80, 0.12);
}

.funding-status-details dt {
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 700;
}

.funding-status-details dd {
  margin: 0;
  color: #24364d;
  font-size: 12px;
  font-weight: 600;
}

.funding-status-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(40, 57, 80, 0.12);
}

.funding-status-action {
  width: 100%;
  min-height: 44px;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 7px;
  border-radius: 8px;
  padding: 6px 8px;
  line-height: 1.15;
  text-align: left;
  white-space: normal;
}

.funding-status-action > i,
.funding-status-action > .spinner-border {
  justify-self: center;
  font-size: 13px;
}

.funding-status-action > .spinner-border {
  width: 13px;
  height: 13px;
}

.funding-file-action,
.funding-email-action {
  border: 1px solid #cbd8e7;
  color: #24364d;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
}

.funding-email-action small,
.funding-email-read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.funding-email-action-text {
  min-width: 0;
  display: grid;
  gap: 0;
  text-align: left;
}

.funding-email-action-text strong,
.funding-email-action-text em {
  display: block;
  overflow-wrap: anywhere;
}

.funding-email-action-text strong {
  color: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.1;
}

.funding-email-action-text em {
  color: var(--hr-muted);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
}

.funding-email-action small,
.funding-email-read {
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 500;
}

.funding-email-action small.is-read,
.funding-email-read.is-read {
  color: #176b39;
  background: #e7f7ed;
}

.funding-email-action small.is-unread,
.funding-email-read.is-unread {
  color: #a33445;
  background: #fff0f1;
}

.funding-file-action:hover,
.funding-file-action:focus-visible,
.funding-email-action:hover,
.funding-email-action:focus-visible {
  color: #0f5eaa;
  border-color: #9dc7eb;
  background: #edf6ff;
  outline: 0;
}

.funding-file-action:disabled,
.funding-email-action:disabled {
  opacity: 0.55;
  pointer-events: none;
}

@media (max-width: 620px) {
  .funding-status-actions {
    grid-template-columns: 1fr;
  }
}

.funding-status-card.is-success {
  --funding-status-color: var(--hr-green);
  --funding-status-bg: #f1fbf4;
  --funding-status-border: #caebd4;
}

.funding-status-card.is-warning {
  --funding-status-color: var(--hr-amber);
  --funding-status-bg: #fff8ea;
  --funding-status-border: #f4d79f;
}

.funding-status-card.is-primary {
  --funding-status-color: var(--hr-primary-dark);
  --funding-status-bg: #f4f9ff;
  --funding-status-border: #cfe0f4;
}

.funding-status-card.is-danger {
  --funding-status-color: var(--hr-red);
  --funding-status-bg: #fff4f4;
  --funding-status-border: #f4c2c2;
}

.funding-form-grid,
.funding-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.funding-form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.funding-form-grid .funding-field-new-row {
  grid-column: 1 / span 1;
}

.funding-form-address-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.funding-form-address-grid .funding-field-half {
  grid-column: span 6;
}

.funding-form-address-grid .funding-field-postal {
  grid-column: span 4;
}

.funding-form-address-grid .funding-field-city {
  grid-column: span 8;
}

.funding-form-address-grid .funding-field-street {
  grid-column: span 9;
}

.funding-form-address-grid .funding-field-house {
  grid-column: span 3;
}

.funding-form-address-grid .funding-field-full {
  grid-column: 1 / -1;
}

.funding-form-grid .filter-field,
.funding-admin-grid .filter-field {
  min-width: 0;
}

.funding-switch-list {
  display: grid;
  gap: 9px;
}

.funding-form-switch-row {
  min-height: 48px;
  cursor: pointer;
}

.funding-switch-label-text {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.funding-switch-label-text > span {
  min-width: 0;
}

.funding-switch-help-button {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--hr-primary);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.funding-switch-help-button:hover,
.funding-switch-help-button:focus-visible {
  background: color-mix(in srgb, var(--hr-primary) 10%, #fff);
  color: var(--hr-primary-dark);
  outline: none;
}

.funding-form-switch-row.is-disabled {
  cursor: default;
}

.funding-form-switch-row.is-invalid,
.funding-tech-card.is-invalid {
  border-color: var(--hr-red);
  box-shadow: 0 0 0 0.14rem rgba(201, 74, 74, 0.12);
}

.funding-form-switch-row.is-invalid {
  background: #fff7f7;
}

.funding-switch-copy {
  display: grid;
  gap: 6px;
}

.funding-switch-copy small {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.funding-switch-copy strong {
  color: var(--hr-text);
}

.funding-switch-control {
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding-left: 0;
}

.funding-switch-control .form-check-input {
  width: 2.65em;
  height: 1.35em;
  margin: 0;
  cursor: pointer;
}

.funding-switch-control .form-check-input:disabled {
  cursor: not-allowed;
}

.funding-tech-switch {
  margin-left: auto;
}

.funding-switch-list.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.funding-tech-stack {
  display: grid;
  gap: 12px;
}

.funding-tech-card {
  overflow: hidden;
}

.funding-tech-card.active {
  border-color: #cfe0f4;
}

.funding-tech-card > header,
.funding-upload-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hr-border);
}

.funding-tech-card > header {
  cursor: pointer;
}

.funding-tech-card > header.is-disabled {
  cursor: default;
}

.funding-tech-card > header span,
.funding-upload-card > header > i {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
}

.funding-tech-card > header strong {
  min-width: 0;
  margin-right: auto;
}

.funding-tech-body {
  display: grid;
  gap: 14px;
  padding: 16px;
  background: #fbfcfe;
}

.funding-bafa-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px dashed #bdd0e8;
  border-radius: 8px;
  background: #fff;
}

.funding-bafa-card-title {
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
}

.funding-bafa-selected {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.funding-bafa-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.funding-bafa-search > * {
  width: 100%;
  min-width: 0;
}

.funding-bafa-results {
  width: 100%;
  inline-size: 100%;
  max-width: none;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  justify-self: stretch;
  align-self: stretch;
}

.funding-bafa-results .list-group-item {
  justify-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  inline-size: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  text-align: left;
  white-space: normal;
}

.funding-bafa-results .list-group-item .fw-semibold,
.funding-bafa-results .list-group-item small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.funding-bafa-results .list-group-item:hover,
.funding-bafa-results .list-group-item:focus-visible {
  border-color: #bdd0e8;
  background: #f4f9ff;
}

.funding-document-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.funding-document-picker.compact {
  grid-template-columns: 1fr;
}

.funding-document-preview {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(220px, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.funding-upload-card .funding-document-preview {
  margin: 0 14px;
}

.funding-document-preview-copy {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}

.funding-document-preview-copy h4 {
  margin: 0;
  font-size: 17px;
}

.funding-document-preview-copy p {
  margin: 0;
  color: var(--hr-muted);
}

.funding-document-preview-copy ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.funding-document-preview-copy li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #e6edf6;
  border-radius: 8px;
  background: #f8fbff;
}

.funding-document-preview-copy strong,
.funding-document-preview-copy small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.funding-document-preview-copy small {
  color: var(--hr-muted);
  line-height: 1.35;
}

.funding-document-preview-copy li i {
  color: var(--hr-red);
  font-size: 19px;
  line-height: 1.2;
}

.funding-document-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.funding-document-preview-actions .btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.funding-document-preview-actions .spinner-border {
  width: 14px;
  height: 14px;
}

.funding-document-preview-frame {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #f4f7fb;
}

.funding-document-preview-frame img {
  display: block;
  width: 100%;
  max-height: 540px;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.funding-document-preview-frame img.is-loaded {
  opacity: 1;
}

.funding-document-preview-spinner,
.funding-document-preview-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.funding-document-preview-fallback {
  gap: 6px;
  padding: 18px;
  color: var(--hr-muted);
  text-align: center;
}

.funding-document-preview-fallback i {
  color: var(--hr-red);
  font-size: 36px;
}

.funding-document-preview-fallback strong,
.funding-document-preview-fallback span {
  display: block;
}

.funding-confirmation-stack,
.funding-upload-grid,
.funding-step-grid {
  display: grid;
  gap: 12px;
}

.funding-confirmation-stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.funding-confirmation-stack article,
.funding-step-grid article {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.funding-confirmation-stack p,
.funding-step-grid p {
  color: var(--hr-muted);
  line-height: 1.42;
}

.funding-upload-grid {
  grid-template-columns: 1fr;
}

.funding-upload-card {
  display: grid;
  gap: 14px;
  padding-bottom: 14px;
  overflow: hidden;
}

.funding-upload-card > header {
  justify-content: flex-start;
}

.funding-upload-card > header > i {
  width: 58px;
  height: 58px;
  font-size: 27px;
}

.funding-upload-card > header p {
  margin-top: 3px;
  color: var(--hr-muted);
  line-height: 1.35;
}

.funding-upload-card .funding-document-picker,
.funding-upload-card .upload-dropzone {
  margin: 0 14px;
}

.funding-type-plate-card {
  padding-bottom: 16px;
}

.funding-picture-preview-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0 14px;
  padding: 12px;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  background: #f7f9fc;
}

.funding-picture-preview-image {
  width: 132px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

.funding-picture-preview-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.funding-picture-preview-copy {
  min-width: 0;
  display: grid;
  justify-items: start;
  gap: 6px;
}

.funding-picture-preview-copy strong {
  color: var(--hr-text);
}

.funding-picture-preview-copy small {
  color: var(--hr-muted);
  font-weight: 700;
}

.funding-picture-preview-copy .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

@media (max-width: 520px) {
  .funding-picture-preview-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .funding-picture-preview-image {
    width: 100%;
  }
}

.funding-declaration-generator-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 14px;
  padding: 14px;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  background: #f4f9ff;
}

.funding-declaration-generator-icon {
  width: 46px;
  height: 46px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #fff;
  font-size: 21px;
}

.funding-declaration-generator-copy {
  min-width: 0;
}

.funding-declaration-generator-copy h5,
.funding-declaration-generator-copy p {
  margin: 0;
}

.funding-declaration-generator-copy h5 {
  font-size: 15px;
  line-height: 1.25;
}

.funding-declaration-generator-copy p {
  margin-top: 4px;
  color: var(--hr-muted);
  line-height: 1.35;
}

.funding-declaration-generator-card .btn {
  min-width: 214px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: normal;
}

.funding-bnd-info-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  padding: 16px;
  background: #f4f9ff;
}

.funding-bnd-info-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #fff;
  font-size: 27px;
  line-height: 1;
}

.funding-bnd-info-copy {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.funding-bnd-info-copy p {
  margin: 0;
  color: var(--hr-primary-dark);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

.funding-bnd-info-copy ul {
  margin: 0;
  padding-left: 20px;
  color: #24364d;
  line-height: 1.5;
}

.funding-bnd-info-copy .btn {
  justify-self: flex-start;
}

.funding-bnd-proof-actions {
  display: flex;
  justify-content: flex-end;
}

.funding-bnd-proof-actions .btn {
  min-height: 42px;
}

.funding-table-wrap {
  min-width: 0;
  overflow-x: auto;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.funding-table-wrap h4 {
  margin-bottom: 10px;
}

.funding-picture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.funding-picture-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.funding-document-list {
  display: grid;
  gap: 10px;
}

.funding-document-list article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.funding-document-list article > i {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-red);
  background: #fff0f0;
}

.funding-document-list strong,
.funding-document-list small {
  display: block;
  overflow-wrap: anywhere;
}

.funding-document-list small {
  color: var(--hr-muted);
}

.funding-document-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.funding-empty {
  padding: 18px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
}

.funding-step-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.funding-step-grid article > span {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--hr-primary);
  font-weight: 800;
}

.funding-application-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 26px;
  border-top: 1px solid var(--hr-border);
  background: #fff;
}

.funding-application-footer > div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.funding-application-footer .btn,
.funding-application-section .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.funding-calculator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2060;
  padding: 24px;
  overflow-y: auto;
  background: rgba(16, 32, 63, 0.68);
  outline: 0;
}

.funding-calculator-shell {
  width: min(100%, 1180px);
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-md);
}

.funding-calculator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.funding-calculator-title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  gap: 13px;
}

.funding-calculator-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.funding-calculator-title p,
.funding-calculator-title h2 {
  margin: 0;
}

.funding-calculator-title p {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.funding-calculator-title h2 {
  overflow: hidden;
  color: var(--hr-text);
  font-size: 22px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funding-calculator-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

.funding-calculator-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.calculator-saved-badge {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--hr-green);
  font-size: 10px;
  line-height: 1;
}

.funding-calculator-close {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
}

.funding-calculator-close:hover,
.funding-calculator-close:focus-visible {
  color: var(--hr-text);
  border-color: #c5d4e7;
  background: #f6f8fb;
}

.funding-calculator-body {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 22px;
  background: #f7f9fc;
}

.funding-calculator-resultbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.funding-calculator-resultbar > div {
  --funding-result-color: var(--hr-primary-dark);
  --funding-result-bg: #f4f9ff;
  --funding-result-border: #cfe0f4;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--funding-result-border);
  border-radius: 8px;
  background: var(--funding-result-bg);
  box-shadow: inset 4px 0 0 var(--funding-result-color);
}

.funding-calculator-resultbar > div:nth-child(2) {
  --funding-result-color: var(--hr-green);
  --funding-result-bg: #f1fbf4;
  --funding-result-border: #caebd4;
}

.funding-calculator-resultbar > div:nth-child(3) {
  --funding-result-color: var(--hr-amber);
  --funding-result-bg: #fff8ea;
  --funding-result-border: #f4d79f;
}

.funding-calculator-resultbar > div:nth-child(4) {
  --funding-result-color: #506178;
  --funding-result-bg: #f5f7fa;
  --funding-result-border: #d5deea;
}

.funding-calculator-resultbar span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.funding-calculator-resultbar strong {
  overflow-wrap: anywhere;
  color: var(--funding-result-color);
  font-size: 18px;
}

.funding-calculator-resultbar > div:first-child strong {
  font-size: 24px;
  line-height: 1.1;
}

.funding-calculator-form {
  display: grid;
  gap: 16px;
}

.funding-calculator-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.funding-calculator-section {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.funding-calculator-section > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--hr-border);
}

.funding-calculator-section > header i {
  width: 28px;
  color: var(--hr-primary);
  font-size: 22px;
  text-align: center;
}

.funding-calculator-section > header h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 800;
}

.funding-calculator-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  padding: 16px;
}

.funding-calculator-fields .filter-field {
  min-width: 0;
}

.funding-calculator-fields .filter-field > span,
.funding-calculator-range-head label {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.funding-calculator-fields .form-select {
  min-height: 42px;
}

.filter-field-full {
  grid-column: 1 / -1;
}

.funding-calculator-range {
  display: grid;
  gap: 12px;
}

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

.funding-calculator-range-head strong {
  color: var(--hr-text);
  white-space: nowrap;
}

.funding-calculator-switches {
  display: grid;
  gap: 9px;
}

.funding-calculator-switch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid #e3ebf5;
  border-radius: 8px;
  color: var(--hr-text);
  background: #fbfcfe;
  font-size: 14px;
  line-height: 1.35;
}

.funding-calculator-switch .form-check-input {
  margin: 2px 0 0;
}

.funding-calculator-bonus-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.funding-calculator-bonus {
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(32px, auto) 38px minmax(0, 1fr);
  gap: 9px;
  padding: 15px;
  border: 1px solid #d8e7f8;
  border-radius: 8px;
  background: #f8fbff;
}

.funding-calculator-bonus.is-muted {
  border-color: #e4e8ee;
  color: #7b8798;
  background: #fbfcfe;
}

.funding-calculator-bonus-value {
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.funding-calculator-bonus-value strong {
  color: var(--hr-primary-dark);
  font-size: 28px;
  line-height: 1;
}

.funding-calculator-bonus.is-muted .funding-calculator-bonus-value strong {
  color: #8b98aa;
}

.funding-calculator-bonus-value i {
  color: var(--hr-green);
  font-size: 20px;
}

.funding-calculator-bonus h4,
.funding-calculator-bonus p {
  margin: 0;
}

.funding-calculator-bonus h4 {
  align-self: start;
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.funding-calculator-bonus.is-muted h4 {
  color: #617083;
}

.funding-calculator-bonus p {
  min-height: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.4;
}

.funding-calculator-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 0 0;
}

.funding-calculator-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--hr-muted);
  font-size: 14px;
  font-weight: 700;
}

.funding-calculator-status i {
  color: var(--hr-primary);
}

.funding-calculator-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.funding-calculator-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.amortisation-calculator-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2065;
  padding: 24px;
  overflow-y: auto;
  background: rgba(16, 32, 63, 0.68);
  outline: 0;
}

.amortisation-calculator-shell {
  width: min(100%, 1180px);
  min-height: calc(100vh - 48px);
  min-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-md);
}

.amortisation-calculator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.amortisation-calculator-title {
  min-width: 0;
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  gap: 13px;
}

.amortisation-calculator-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid #cfe0f4;
  border-radius: 8px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
}

.amortisation-calculator-title p,
.amortisation-calculator-title h2 {
  margin: 0;
}

.amortisation-calculator-title p {
  overflow: hidden;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.amortisation-calculator-title h2 {
  overflow: hidden;
  color: var(--hr-text);
  font-size: 22px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amortisation-calculator-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}

.amortisation-calculator-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.amortisation-calculator-close {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: var(--hr-muted);
  background: #fff;
}

.amortisation-calculator-close:hover,
.amortisation-calculator-close:focus-visible {
  color: var(--hr-text);
  border-color: #c5d4e7;
  background: #f6f8fb;
  outline: 0;
}

.amortisation-calculator-body {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 22px;
  background: #f7f9fc;
}

.amortisation-calculator-resultbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.amortisation-calculator-resultbar > div {
  --amortisation-result-color: #506178;
  --amortisation-result-bg: #f5f7fa;
  --amortisation-result-border: #d5deea;
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid var(--amortisation-result-border);
  border-radius: 8px;
  background: var(--amortisation-result-bg);
  box-shadow: inset 4px 0 0 var(--amortisation-result-color);
}

.amortisation-calculator-resultbar > div.is-success {
  --amortisation-result-color: var(--hr-green);
  --amortisation-result-bg: #f1fbf4;
  --amortisation-result-border: #caebd4;
}

.amortisation-calculator-resultbar > div.is-warning {
  --amortisation-result-color: var(--hr-amber);
  --amortisation-result-bg: #fff8ea;
  --amortisation-result-border: #f4d79f;
}

.amortisation-calculator-resultbar > div.is-danger {
  --amortisation-result-color: #c84d4d;
  --amortisation-result-bg: #fff5f5;
  --amortisation-result-border: #f0caca;
}

.amortisation-calculator-resultbar > div.is-neutral {
  --amortisation-result-color: var(--hr-primary-dark);
  --amortisation-result-bg: #f4f9ff;
  --amortisation-result-border: #cfe0f4;
}

.amortisation-calculator-resultbar span {
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.amortisation-calculator-resultbar strong {
  overflow-wrap: anywhere;
  color: var(--amortisation-result-color);
  font-size: 18px;
  line-height: 1.18;
}

.amortisation-calculator-chart {
  min-width: 0;
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.amortisation-calculator-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--hr-border);
}

.amortisation-calculator-chart-head h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 800;
}

.amortisation-calculator-chart-head p {
  margin: 4px 0 0;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.amortisation-result-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px 0;
  background: #fff;
}

.amortisation-result-tabs button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #d7e2ef;
  border-radius: 8px;
  color: #506178;
  background: #f8fbff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.amortisation-result-tabs button:hover {
  color: var(--hr-primary-dark);
  border-color: #b8cde5;
  background: #eef7ff;
}

.amortisation-result-tabs button.active {
  color: #fff;
  border-color: var(--hr-primary);
  background: var(--hr-primary);
}

.amortisation-result-tabs button i {
  font-size: 13px;
}

.amortisation-calculator-chart-canvas {
  min-width: 0;
  height: 300px;
  padding: 14px;
}

.amortisation-calculator-chart-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.amortisation-calculator-form {
  display: grid;
  gap: 16px;
}

.amortisation-calculator-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.amortisation-calculator-section {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--hr-shadow-sm);
}

.amortisation-calculator-section > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--hr-border);
}

.amortisation-calculator-section > header i {
  width: 28px;
  min-width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  color: var(--hr-primary);
  font-size: 20px;
  text-align: center;
}

.amortisation-calculator-section > header h3 {
  margin: 0;
  color: var(--hr-text);
  font-size: 17px;
  font-weight: 800;
}

.amortisation-calculator-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 13px;
  padding: 16px;
}

.amortisation-calculator-section.is-stacked .amortisation-calculator-fields {
  grid-template-columns: minmax(0, 1fr);
}

.amortisation-input-field {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e4ebf4;
  border-radius: 8px;
  background: #fbfcfe;
}

.amortisation-field-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 8px;
}

.amortisation-field-head label {
  min-width: 0;
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  hyphens: auto;
  overflow-wrap: normal;
  word-break: normal;
}

.amortisation-field-head strong {
  color: var(--hr-text);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.amortisation-field-description {
  margin: -3px 0 2px;
  color: #5f6f83;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.amortisation-calculator-section.is-stacked .amortisation-field-head label {
  font-size: 12px;
}

.amortisation-calculator-section.is-stacked .amortisation-field-head strong {
  font-size: 14px;
}

.amortisation-input-field .form-range {
  min-height: 24px;
}

.amortisation-input-field .form-select,
.amortisation-input-field .form-control {
  min-height: 38px;
  font-size: 14px;
}

.amortisation-switch {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-left: 2.6rem;
}

.amortisation-switch .form-check-input {
  cursor: pointer;
}

.amortisation-switch .form-check-label {
  color: #344258;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.amortisation-subfield-label {
  margin: -2px 0 -3px;
  color: var(--hr-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.amortisation-slider-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -5px;
  color: #7a8797;
  font-size: 11px;
  font-weight: 700;
}

.amortisation-slider-scale span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amortisation-calculator-table {
  margin-bottom: 0;
  background: #fff;
}

.amortisation-result-table {
  padding: 14px 16px 16px;
}

.amortisation-overview-table th:first-child,
.amortisation-overview-table td:first-child {
  text-align: left;
}

.amortisation-overview-spacer td {
  height: 12px;
  padding: 0;
  border-right: 0;
  border-left: 0;
  background: #fff;
}

@media (max-width: 991.98px) {
  .project-modal-header {
    align-items: center;
    flex-direction: row;
    padding: 14px 18px;
  }

  .project-modal-title {
    flex: 1 1 240px;
  }

  .project-modal-title h2 {
    max-width: min(42vw, 520px);
    font-size: 20px;
  }

  .project-modal-header-actions {
    width: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex: 0 1 auto;
    margin-left: auto;
  }

  .project-modal-tabs {
    padding: 0;
  }

  .project-modal-body {
    padding: 16px 18px 24px;
  }

  .project-funding-empty {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .project-funding-empty .btn {
    width: 100%;
  }

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

  .project-sales-actions {
    justify-content: flex-start;
  }

  .project-sales-offer-backdrop {
    padding: 12px;
  }

  .project-sales-offer-modal {
    max-height: calc(100vh - 24px);
  }

  .project-sales-offer-body {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .project-sales-offer-body.is-details-active,
  .project-sales-offer-body.is-positions-active {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-offer-body.is-positions-active .project-sales-offer-side .project-sales-offer-card-head p {
    display: block;
  }

  .project-sales-offer-side,
  .project-sales-offer-workspace {
    overflow: visible;
  }

  .project-sales-offer-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-sales-offer-head-card .project-catalog-field-wide {
    grid-column: 1 / -1;
  }

  .project-sales-copy-search {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-copy-search .btn,
  .project-sales-copy-footer,
  .project-sales-copy-footer .btn {
    width: 100%;
  }

  .project-sales-copy-footer {
    flex-direction: column-reverse;
  }

  .project-sales-offer-text-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-offer-text-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-offer-position-editor-backdrop {
    padding: 12px;
  }

  .project-sales-offer-position-editor {
    max-height: calc(100vh - 24px);
  }

  .project-catalog-backdrop {
    padding: 12px;
  }

  .project-catalog-modal {
    max-height: calc(100vh - 24px);
  }

  .project-catalog-body {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .project-catalog-body.is-editing {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-catalog-main,
  .project-catalog-editor {
    overflow: visible;
  }

  .funding-application-shell.is-embedded {
    height: auto;
    min-height: 0;
  }

  .funding-calculator-backdrop,
  .amortisation-calculator-backdrop {
    padding: 16px;
  }

  .funding-calculator-shell,
  .amortisation-calculator-shell {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
  }

  .funding-calculator-resultbar,
  .funding-calculator-form-grid,
  .funding-calculator-bonus-grid,
  .amortisation-calculator-resultbar,
  .amortisation-calculator-form-grid {
    grid-template-columns: 1fr;
  }

  .funding-application-backdrop {
    padding: 16px;
  }

  .funding-application-shell {
    width: min(100%, 980px);
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
  }

  .funding-application-header {
    align-items: center;
    flex-direction: row;
    padding: 14px 18px;
  }

  .funding-application-title {
    flex: 1 1 auto;
  }

  .funding-application-title h2,
  .funding-application-title p:last-child {
    max-width: min(42vw, 520px);
  }

  .funding-application-header-actions {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
  }

  .funding-application-body {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-application-body {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .funding-application-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    border-right: 1px solid var(--hr-border);
    border-bottom: 0;
  }

  .funding-application-nav-toggle {
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 9px 0;
    border: 1px solid #d7e3f0;
    border-radius: 8px;
    color: #41516a;
    background: #f8fafc;
    font-size: 13px;
    font-weight: 800;
  }

  .funding-application-nav-toggle:hover,
  .funding-application-nav-toggle:focus-visible {
    color: var(--hr-primary-dark);
    border-color: #bdd6ec;
    background: #eef7ff;
    outline: 0;
  }

  .funding-nav-toggle-label {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .funding-advisor-card {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 8px;
    margin-bottom: 4px;
    padding: 8px;
  }

  .funding-advisor-photo {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  .funding-advisor-copy {
    display: none;
  }

  .funding-advisor-contact {
    width: 42px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    font-size: 0;
    gap: 0;
  }

  .funding-advisor-contact i {
    font-size: 14px;
  }

  .funding-application-nav-item {
    position: relative;
    width: 100%;
    min-height: 44px;
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 10px 0;
  }

  .funding-nav-label {
    display: none;
  }

  .funding-tab-check {
    position: absolute;
    top: 6px;
    right: 8px;
    margin-left: 0;
    font-size: 11px;
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-application-nav-toggle {
    justify-content: flex-start;
    gap: 8px;
    padding: 9px 11px;
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-nav-toggle-label,
  .funding-application-shell.is-mobile-nav-expanded .funding-nav-label {
    display: block;
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-application-nav-item {
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 11px;
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-tab-check {
    position: static;
    margin-left: auto;
    font-size: 13px;
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-advisor-card {
    grid-template-columns: 46px minmax(0, 1fr);
    justify-items: stretch;
    align-items: center;
    gap: 8px 10px;
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-advisor-copy {
    display: grid;
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-advisor-contact {
    grid-column: 1 / -1;
    width: 100%;
    height: 38px;
    min-height: 38px;
    padding: 0 10px;
    font-size: 12px;
    gap: 8px;
  }

  .funding-application-content {
    padding: 18px 18px 92px;
  }

  .funding-start-hero,
  .funding-start-action-card {
    grid-template-columns: 1fr;
  }

  .funding-start-feature-grid {
    grid-template-columns: 1fr;
  }

  .funding-start-action-card > div:last-child {
    justify-content: flex-start;
  }

  .funding-status-grid,
  .funding-confirmation-stack,
  .funding-upload-grid,
  .funding-document-preview,
  .funding-step-grid,
  .funding-switch-list.compact,
  .funding-form-grid,
  .funding-form-grid.compact,
  .funding-admin-grid {
    grid-template-columns: 1fr;
  }

  .funding-status-actions {
    grid-template-columns: 1fr;
  }

  .funding-status-action {
    width: 100%;
  }

  .funding-document-list article {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .funding-document-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .funding-declaration-generator-card {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .funding-declaration-generator-card .btn {
    grid-column: 2;
    justify-self: flex-start;
  }

  .funding-form-address-grid .funding-field-half,
  .funding-form-address-grid .funding-field-postal,
  .funding-form-address-grid .funding-field-city,
  .funding-form-address-grid .funding-field-street,
  .funding-form-address-grid .funding-field-house,
  .funding-form-address-grid .funding-field-full {
    grid-column: 1 / -1;
  }

  .project-placeholder-grid,
  .project-settings-actions-grid,
  .project-settings-grid,
  .project-settings-collapse-inner {
    grid-template-columns: 1fr;
  }

  .project-settings-tab {
    grid-template-columns: 1fr;
  }

  .project-settings-tab > .project-detail-panel,
  .project-settings-tab > .project-settings-actions-grid {
    grid-column: auto;
    grid-row: auto;
  }

  .project-start-required-grid,
  .project-start-grid {
    grid-template-columns: 1fr;
  }

  .project-start-grid-wide,
  .project-start-grid-small,
  .project-start-grid-city,
  .project-start-grid-full {
    grid-column: auto;
  }

  .project-overview-hero,
  .project-overview-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-room-view-toggle {
    width: 100%;
  }

  .project-room-view-toggle button {
    flex: 1 1 0;
    justify-content: center;
  }

  .project-room-floor-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-room-floor-summary {
    justify-content: flex-start;
  }

  .project-room-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .project-room-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-file-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .project-file-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .project-library-toolbar,
  .project-library-upload-grid {
    grid-template-columns: 1fr;
  }

  .project-library-toolbar-actions,
  .project-library-upload-name,
  .project-library-dropzone {
    grid-column: 1 / -1;
  }

  .project-library-toolbar-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .project-library-intro-overlay {
    padding: 12px;
  }

  .project-library-intro-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .project-library-intro-flow {
    grid-template-columns: 1fr;
  }

  .project-library-intro-flow > i {
    transform: rotate(90deg);
    justify-self: center;
  }

  .project-library-intro-steps {
    grid-template-columns: 1fr;
  }

  .project-library-upload-overlay {
    padding: 12px;
  }

  .project-library-upload-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .project-library-upload-dialog-body,
  .project-library-upload-form {
    grid-template-columns: 1fr;
  }

  .project-library-upload-dialog-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .project-library-upload-dialog-actions > span {
    flex: 1 1 100%;
  }

  .project-library-upload-preview-frame {
    min-height: 280px;
  }

  .upload-dropzone,
  .project-document-generator {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .upload-dropzone .btn,
  .project-document-generator-actions {
    grid-column: 1 / -1;
    justify-self: flex-start;
  }

  .project-document-generator-actions {
    grid-template-columns: 1fr;
  }

  .project-document-generator .project-upload-message {
    grid-column: 1 / -1;
  }

  .heizreport-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-signature-workspace {
    grid-template-columns: 1fr;
  }

  .project-signature-tools {
    position: static;
    order: -1;
    max-height: none;
    overflow: visible;
  }

  .project-settings-inline-grid {
    grid-template-columns: 1fr;
  }

  .project-exchange-controls {
    grid-template-columns: 1fr;
  }

  .project-exchange-actions {
    justify-content: flex-start;
  }

  .project-exchange-editor {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }

  .project-exchange-editor-body,
  .project-exchange-editor-filters {
    grid-template-columns: 1fr;
  }

  .project-exchange-editor-body {
    grid-template-rows: auto auto;
    overflow-y: auto;
  }

  .project-exchange-editor-side {
    border-right: 0;
    border-bottom: 1px solid var(--hr-border);
  }

  .project-exchange-editor-main {
    display: block;
    overflow: visible;
  }

  .project-hydraulic-editor-main {
    overflow-y: auto;
  }

  .project-hydraulic-editor-grid {
    grid-template-columns: 1fr;
  }

  .project-exchange-editor-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-exchange-editor-list {
    overflow-x: auto;
    overflow-y: visible;
  }

  .project-exchange-editor-list table {
    min-width: 680px;
  }

  .project-gallery-stage {
    padding: 16px 58px 66px;
  }

  .project-gallery-nav.is-prev {
    left: 12px;
  }

  .project-gallery-nav.is-next {
    right: 12px;
  }

  .project-pdf-stage {
    padding: 8px;
  }
}

@media (max-width: 575.98px) {
  .project-modal-header {
    align-items: center;
  }

  .project-modal-title h2 {
    max-width: calc(100vw - 94px);
  }

  .project-modal-header-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .project-modal-header-actions .btn {
    flex: 1 1 150px;
  }

  .project-modal-close {
    flex: 0 0 38px;
  }

  .project-modal-tabs button,
  .project-subtabs button {
    font-size: 13px;
  }

  .project-modal-tabs {
    display: flex;
    grid-template-columns: none;
    overflow-x: visible;
  }

  .project-modal-tabs button {
    justify-content: center;
    min-width: 0;
    border-right: 1px solid var(--hr-border);
    border-bottom: 0;
  }

  .project-modal-tabs button:last-child {
    border-right: 0;
    border-bottom: 0;
  }

  .project-overview-cards {
    grid-template-columns: 1fr;
  }

  .project-sales-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .project-sales-offer-body,
  .project-sales-offer-card {
    padding: 12px;
  }

  .project-sales-offer-grid,
  .project-sales-offer-position-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-offer-card-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .project-sales-offer-position-details {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-offer-head-card .project-catalog-field-wide {
    grid-column: 1 / -1;
  }

  .project-sales-offer-text-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-sales-offer-text-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-offer-text-field-head,
  .project-offer-text-template-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-offer-text-template-picker .btn {
    justify-content: center;
  }

  .project-sales-offer-position-group-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-sales-offer-position-group-body {
    padding: 10px;
  }

  .project-sales-offer-position-list {
    margin: 0 -10px -10px;
  }

  .project-sales-offer-position-group-header > div:last-child,
  .project-sales-offer-position-group-header .btn-outline-primary {
    width: 100%;
  }

  .project-sales-offer-position-number {
    justify-self: start;
  }

  .project-sales-offer-position-actions {
    justify-content: flex-start;
  }

  .project-sales-offer-position-editor-body {
    padding: 12px;
  }

  .project-sales-offer-position-total {
    padding-bottom: 0;
  }

  .project-catalog-toolbar,
  .project-catalog-toolbar .btn,
  .project-catalog-pagination,
  .project-catalog-pagination > div,
  .project-catalog-title-filter,
  .project-catalog-form-actions {
    width: 100%;
  }

  .project-catalog-toolbar .btn,
  .project-catalog-form-actions .btn {
    justify-content: center;
  }

  .project-catalog-pagination,
  .project-catalog-pagination > div {
    align-items: stretch;
    flex-direction: column;
  }

  .project-catalog-form-grid,
  .project-catalog-form-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-heating-surface-head-actions {
    width: auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .project-room-card-grid,
  .project-room-card-metrics {
    grid-template-columns: 1fr;
  }

  .project-note-toggle-header {
    white-space: normal;
  }

  .project-planning-done-toggle {
    white-space: normal;
  }

  .project-panel-actions {
    width: auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  .project-heatpump-workspace {
    grid-template-columns: 1fr;
  }

  .project-heatpump-controls,
  .project-heatpump-selection-summary {
    grid-template-columns: 1fr;
  }

  .project-simulation-input-grid,
  .project-simulation-run-layout,
  .project-simulation-groups,
  .project-simulation-kpi-grid,
  .project-simulation-chart-grid,
  .project-simulation-dynamics-grid,
  .project-kennfeld-layout {
    grid-template-columns: 1fr;
  }

  .project-kennfeld-controls,
  .project-kennfeld-control,
  .project-kennfeld-load-field {
    width: 100%;
  }

  .project-exchange-editor-overlay {
    padding: 8px;
  }

  .project-exchange-editor {
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }

  .project-exchange-editor-head,
  .project-exchange-editor-side,
  .project-exchange-editor-main,
  .project-exchange-editor-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .project-exchange-editor-categories {
    grid-template-columns: 1fr;
  }

  .project-exchange-editor-footer {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .project-exchange-editor-footer .btn {
    width: 100%;
  }

  .project-hydraulic-valve-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-overview-surface {
    padding: 12px;
  }

  .project-overview-date {
    white-space: normal;
  }

  .project-overview-actions {
    justify-content: flex-start;
  }

  .project-overview-calculator-actions {
    align-items: center;
    flex-direction: row;
  }

  .project-overview-actions .btn,
  .project-overview-footer-actions,
  .project-overview-footer-actions .btn,
  .project-building-empty .btn,
  .project-notes-card-body .btn {
    width: 100%;
    justify-content: center;
  }

  .project-field-actions .btn {
    width: auto;
  }

  .project-overview-calculator-actions button {
    flex: 1 1 0;
  }

  .project-link-copy-fallback-control {
    flex-direction: column;
  }

  .project-link-copy-fallback-control .btn {
    width: 100%;
    justify-content: center;
  }

  .project-alert-dialog {
    grid-template-columns: 1fr;
  }

  .project-alert-actions {
    flex-direction: column-reverse;
  }

  .project-alert-actions.is-file-conflict {
    flex-direction: column;
  }

  .project-alert-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .heizreport-generator-backdrop {
    padding: 10px;
  }

  .heizreport-generator-modal {
    max-height: calc(100vh - 20px);
  }

  .heizreport-generator-header,
  .heizreport-generator-actions {
    padding: 14px;
  }

  .heizreport-generator-actions,
  .heizreport-generator-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .heizreport-page-grid,
  .heizreport-temperature-grid {
    grid-template-columns: 1fr;
  }

  .project-signature-overlay {
    padding: 10px;
  }

  .project-signature-draw-overlay {
    padding: 12px;
  }

  .project-signature-dialog {
    max-height: calc(100vh - 20px);
  }

  .project-signature-header {
    align-items: flex-start;
  }

  .project-signature-header h3 {
    max-width: calc(100vw - 96px);
    font-size: 16px;
  }

  .project-signature-pages {
    grid-template-columns: 1fr;
  }

  .project-signature-action-row {
    grid-template-columns: 1fr;
  }

  .project-signature-draw-dialog {
    padding: 14px;
  }

  .project-signature-canvas.is-overlay {
    height: 210px;
  }

  .project-signature-marker {
    width: 150px;
    height: 46px;
  }

  .funding-calculator-backdrop,
  .amortisation-calculator-backdrop {
    padding: 0;
  }

  .funding-calculator-shell,
  .amortisation-calculator-shell {
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
  }

  .funding-calculator-title h2,
  .amortisation-calculator-title h2 {
    font-size: 20px;
  }

  .funding-calculator-header-actions .btn,
  .amortisation-calculator-header-actions .btn {
    flex: 1 1 150px;
  }

  .funding-calculator-close,
  .amortisation-calculator-close {
    flex: 0 0 38px;
  }

  .funding-calculator-body,
  .amortisation-calculator-body {
    padding: 14px;
  }

  .funding-calculator-fields,
  .amortisation-calculator-fields {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .amortisation-calculator-chart-canvas {
    height: 260px;
    padding: 10px;
  }

  .funding-calculator-range-head,
  .funding-calculator-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .funding-calculator-actions,
  .funding-calculator-actions .btn {
    width: 100%;
  }

  .funding-calculator-actions .btn {
    justify-content: center;
  }

  .funding-application-backdrop {
    padding: 0;
  }

  .funding-application-shell {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .funding-application-title h2 {
    max-width: calc(100vw - 120px);
    font-size: 20px;
    white-space: normal;
  }

  .funding-application-title p:last-child {
    max-width: calc(100vw - 120px);
    white-space: normal;
  }

  .funding-application-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .funding-application-header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
  }

  .funding-application-header-actions .list-status {
    flex: 1 1 220px;
    justify-content: center;
  }

  .funding-application-close {
    flex: 0 0 38px;
  }

  .funding-application-body {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .funding-application-shell.is-mobile-nav-expanded .funding-application-body {
    grid-template-columns: min(220px, 62vw) minmax(0, 1fr);
  }

  .funding-application-nav {
    padding: 8px;
  }

  .funding-advisor-card {
    padding: 6px;
  }

  .funding-advisor-photo {
    width: 42px;
    height: 42px;
    font-size: 15px;
  }

  .funding-advisor-contact {
    width: 40px;
    height: 36px;
    min-height: 36px;
  }

  .funding-application-nav-item {
    min-height: 42px;
    padding: 9px 0;
  }

  .funding-tab-check {
    top: 5px;
    right: 6px;
  }

  .funding-application-content {
    padding: 14px 14px 104px;
  }

  .funding-application-hero,
  .funding-status-card {
    grid-template-columns: 1fr;
  }

  .funding-start-hero {
    padding: 16px;
  }

  .funding-start-hero-main {
    grid-template-columns: 1fr;
  }

  .funding-start-hero h3 {
    font-size: 22px;
  }

  .funding-start-price strong {
    font-size: 32px;
  }

  .funding-start-action-card > div:last-child,
  .funding-start-action-card .btn {
    width: 100%;
  }

  .funding-document-picker,
  .funding-bafa-selected,
  .funding-application-footer {
    align-items: flex-start;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .funding-document-preview {
    padding: 12px;
  }

  .funding-document-preview-frame {
    min-height: 220px;
  }

  .funding-declaration-generator-card,
  .self-declaration-stepper,
  .self-declaration-panel {
    grid-template-columns: 1fr;
  }

  .funding-declaration-generator-card .btn,
  .self-declaration-generator-actions .btn {
    width: 100%;
  }

  .funding-application-footer,
  .funding-application-footer > div,
  .funding-application-footer .btn {
    width: 100%;
  }

  .project-summary-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .project-summary-row strong {
    text-align: left;
  }

  .project-picture-grid {
    grid-template-columns: 1fr;
  }

  .project-gallery-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px;
  }

  .project-gallery-actions {
    width: 100%;
    justify-content: space-between;
  }

  .project-gallery-stage {
    padding: 12px 12px 40px;
  }

  .project-gallery-nav {
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .project-gallery-nav.is-prev {
    left: calc(50% - 54px);
  }

  .project-gallery-nav.is-next {
    right: calc(50% - 54px);
  }

  .project-pdf-bar {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px;
  }

  .project-pdf-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .project-pdf-stage {
    padding: 0;
  }

  .project-pdf-canvas {
    border-radius: 0;
    box-shadow: none;
  }
}
.leads-content-grid {
  display: block;
}

.business-leads .leads-header {
  justify-content: space-between;
}

.business-leads .leads-header-actions {
  gap: 8px;
}

.leads-panel-title {
  margin: 0;
  color: var(--hr-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}

.leads-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--hr-border);
  background: #fff;
}

.leads-kpi-card {
  min-height: 82px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  background: #fff;
}

.leads-kpi-card > span {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.leads-kpi-card small {
  display: block;
  color: var(--hr-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.leads-kpi-card strong {
  display: block;
  margin-top: 5px;
  color: var(--hr-text);
  font-size: 24px;
  line-height: 1.1;
}

.leads-kpi-card.is-total > span {
  color: var(--hr-primary);
  background: #eef7ff;
}

.leads-kpi-card.is-heatpump > span {
  color: #955b08;
  background: #fffbeb;
}

.leads-kpi-card.is-funding > span {
  color: #24753c;
  background: #ecfdf5;
}

.leads-type-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.leads-type-tab {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  color: #506178;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.leads-type-tab:hover,
.leads-type-tab:focus-visible {
  border-color: rgba(var(--hr-primary-rgb), .38);
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), .08);
}

.leads-type-tab.active {
  border-color: rgba(var(--hr-primary-rgb), .58);
  color: var(--hr-primary-dark);
  background: rgba(var(--hr-primary-rgb), .04);
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), .12);
}

.leads-type-tab > i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--hr-primary);
  background: #eef7ff;
  font-size: 12px;
  flex: 0 0 auto;
}

.leads-type-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.leads-type-count {
  min-width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--hr-primary-dark);
  background: #eef7ff;
  font-size: 12px;
  line-height: 1.2;
}

.business-leads .leads-filter-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.business-leads .leads-table {
  min-width: 1140px;
}

.business-leads .leads-row-actions {
  flex-wrap: wrap;
  white-space: normal;
}

.lead-new-switch {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--hr-muted);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.lead-new-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lead-new-switch > span {
  width: 42px;
  height: 24px;
  position: relative;
  border-radius: 999px;
  background: #c9d5e3;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.lead-new-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  transition: transform 160ms ease;
}

.lead-new-switch input:checked + span {
  background: var(--hr-primary);
  box-shadow: inset 0 0 0 1px rgba(var(--hr-primary-rgb), 0.18);
}

.lead-new-switch input:checked + span::after {
  transform: translateX(18px);
}

.lead-new-switch.is-on {
  color: var(--hr-primary-dark);
}

.lead-new-switch.is-saving {
  cursor: progress;
  opacity: .68;
}

.lead-new-switch input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(var(--hr-primary-rgb), 0.18);
}

.business-leads .leads-clickable-row.is-transferring td {
  background: #eef8ff;
  opacity: .42;
  transition: opacity .18s ease, background-color .18s ease;
}

.lead-transfer-flyout {
  position: fixed;
  z-index: 1200;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(51, 113, 183, .22);
  border-radius: 8px;
  color: var(--hr-text);
  background: #fff;
  box-shadow: 0 18px 32px rgba(15, 23, 42, .16);
  pointer-events: none;
  transform-origin: center center;
  overflow: hidden;
}

.lead-transfer-flyout-icon {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--hr-primary);
  background: #eef7ff;
}

.lead-transfer-flyout-body {
  min-width: 0;
}

.lead-transfer-flyout-body strong,
.lead-transfer-flyout-body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-transfer-flyout-body strong {
  font-weight: 800;
}

.lead-transfer-flyout-body small {
  margin-top: 3px;
  color: var(--hr-muted);
  font-size: 13px;
}

.business-leads .leads-empty-state {
  min-height: 260px;
}

.business-leads .leads-empty-spinner {
  font-size: inherit;
}

.leads-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1085;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, .35);
}

.leads-detail-modal {
  width: min(560px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -20px 0 40px rgba(15, 23, 42, .18);
  display: grid;
  grid-template-rows: auto 1fr;
}

.leads-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  border-bottom: 1px solid var(--hr-border);
}

.leads-detail-header button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--hr-text);
}

.leads-detail-body {
  overflow: auto;
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

.leads-detail-section {
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  overflow: hidden;
}

.leads-detail-section h4 {
  margin: 0;
  padding: .8rem 1rem;
  background: #f8fafc;
  font-size: .92rem;
}

.leads-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .72rem 1rem;
  border-top: 1px solid var(--hr-border);
}

.leads-detail-row span {
  color: var(--hr-muted);
}

.leads-detail-row strong {
  text-align: right;
}

.leads-json-warning {
  border: 1px solid var(--hr-border);
  border-radius: 8px;
  padding: 1rem;
  color: var(--hr-muted);
}

@media (max-width: 991.98px) {
  .leads-kpi-grid,
  .business-leads .leads-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .business-leads .leads-header {
    align-items: stretch;
    flex-direction: column;
  }

  .business-leads .leads-header-actions {
    justify-content: flex-start;
  }

  .leads-type-tabs {
    width: 100%;
  }

  .leads-type-tab {
    flex: 1 1 min(100%, 210px);
  }

  .business-leads .leads-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .leads-kpi-grid,
  .business-leads .leads-filter-grid {
    grid-template-columns: 1fr;
  }

  .business-leads .leads-row-actions,
  .business-leads .leads-pagination-controls {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .project-room-editor-calculator-drawer,
  .project-room-editor-heating-drawer,
  .project-room-editor-heating-settings-drawer,
  .project-room-editor-uvalue-copy-drawer,
  .project-room-editor-uvalue-calculator-drawer {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results {
    display: grid;
    height: max-content;
    overflow: visible;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results-table-wrap {
    min-height: 0;
    overflow: hidden !important;
    border: 1px solid var(--hr-border) !important;
    border-radius: 8px;
    background: #fff !important;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results table {
    display: grid;
    width: 100% !important;
    min-width: 0 !important;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results thead {
    display: none;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results tbody {
    display: grid;
    gap: 0;
    width: 100%;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
    min-width: 0;
    padding: 10px 11px;
    border: 0;
    border-bottom: 1px solid var(--hr-border);
    border-radius: 0;
    background: #fff;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results tr + tr {
    margin-top: 0;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results tr:last-child {
    border-bottom: 0;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results table > :not(caption) > * > * {
    background: transparent !important;
    border-bottom-width: 0 !important;
    box-shadow: none !important;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results td:first-child {
    display: grid;
    grid-column: 1;
    gap: 1px;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results td:nth-child(2),
  .project-room-editor-heating-drawer .project-room-editor-heating-results td:nth-child(3) {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    grid-column: 1;
    gap: 5px;
    color: var(--hr-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results td:nth-child(2)::before,
  .project-room-editor-heating-drawer .project-room-editor-heating-results td:nth-child(3)::before {
    flex: 0 0 auto;
    color: var(--hr-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results td:nth-child(2)::before {
    content: "Maße:";
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results td:nth-child(3)::before {
    content: "Normleistung:";
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results td:last-child {
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-content: flex-start;
    margin-top: 0;
  }

  .project-room-editor-heating-drawer .project-room-editor-heating-results td:last-child .btn {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }

  .report-heating-modal .report-heating-results-panel,
  .report-heating-modal .report-heating-results-table-wrap {
    min-height: 0;
  }

  .report-heating-modal .report-heating-results-table-wrap {
    overflow: hidden !important;
    border: 1px solid var(--hr-border) !important;
    border-radius: 8px;
    background: #fff !important;
  }

  .report-heating-modal .report-heating-results-table {
    display: grid;
    width: 100% !important;
    min-width: 0 !important;
  }

  .report-heating-modal .report-heating-results-table thead {
    display: none;
  }

  .report-heating-modal .report-heating-results-table tbody {
    display: grid;
    gap: 0;
    width: 100%;
  }

  .report-heating-modal .report-heating-results-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 10px;
    row-gap: 3px;
    align-items: center;
    min-width: 0;
    padding: 10px 11px;
    border: 0;
    border-bottom: 1px solid var(--hr-border);
    border-radius: 0;
    background: #fff;
  }

  .report-heating-modal .report-heating-results-table tr + tr {
    margin-top: 0;
  }

  .report-heating-modal .report-heating-results-table tr:last-child {
    border-bottom: 0;
  }

  .report-heating-modal .report-heating-results-table td {
    display: block;
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  .report-heating-modal .report-heating-results-table > :not(caption) > * > * {
    background: transparent !important;
    border-bottom-width: 0 !important;
    box-shadow: none !important;
  }

  .report-heating-modal .report-heating-results-table td:first-child {
    display: grid;
    grid-column: 1;
    gap: 1px;
  }

  .report-heating-modal .report-heating-results-table td:nth-child(2),
  .report-heating-modal .report-heating-results-table td:nth-child(3) {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    grid-column: 1;
    gap: 5px;
    color: var(--hr-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  .report-heating-modal .report-heating-results-table td:nth-child(2)::before,
  .report-heating-modal .report-heating-results-table td:nth-child(3)::before {
    flex: 0 0 auto;
    color: var(--hr-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .report-heating-modal .report-heating-results-table td:nth-child(2)::before {
    content: "Maße:";
  }

  .report-heating-modal .report-heating-results-table td:nth-child(3)::before {
    content: "Normleistung:";
  }

  .report-heating-modal .report-heating-results-table td:last-child {
    display: flex;
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-content: flex-start;
    margin-top: 0;
  }

  .report-heating-modal .report-heating-results-table td:last-child .btn {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    white-space: normal;
  }
}