.staff-pricing-page {
  min-height: calc(100vh - 76px);
  padding: 30px 32px 40px;
  color: #f4f7fb;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

.pricing-hero,
.pricing-actions,
.pricing-workspace,
.pricing-tabs,
.pricing-row,
.pricing-detail-actions {
  display: flex;
}

.pricing-hero {
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.pricing-hero h1 {
  margin: 0;
  color: #f7f9fd;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 820;
  letter-spacing: 0;
  text-wrap: balance;
}

.pricing-hero p {
  max-width: 62ch;
  margin: 8px 0 0;
  color: #9ba6b6;
  font-size: 14px;
  font-weight: 600;
  text-wrap: pretty;
}

.pricing-actions {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pricing-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(420px, 42vw);
  min-height: 42px;
  padding: 0 13px;
  border-radius: 12px;
  background: #080d13;
  color: #90a0b2;
  box-shadow:
    inset 0 0 0 1px rgba(145, 184, 238, .18),
    0 10px 28px rgba(0, 0, 0, .18);
}

.pricing-search span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  line-height: 1;
  opacity: .8;
}

.pricing-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eef3fb;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.pricing-search input::placeholder {
  color: #657185;
}

.pricing-actions button,
.pricing-detail-actions button {
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  background: #0c1219;
  color: #eef3fb;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(145, 184, 238, .16),
    0 1px 0 rgba(255, 255, 255, .02);
  transition-property: background-color, box-shadow, transform, color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.pricing-actions button:hover,
.pricing-detail-actions button:hover {
  background: #121922;
  box-shadow:
    inset 0 0 0 1px rgba(185, 199, 220, .26),
    0 10px 22px rgba(0, 0, 0, .16);
}

.pricing-actions button:focus-visible,
.pricing-detail-actions button:focus-visible,
.pricing-tabs button:focus-visible,
.pricing-row:focus-visible,
.pricing-search:focus-within {
  outline: 2px solid rgba(143, 216, 213, .88);
  outline-offset: 2px;
}

.pricing-actions button:active,
.pricing-detail-actions button:active,
.pricing-tabs button:active,
.pricing-row:active {
  transform: scale(.96);
}

.pricing-actions button.primary,
.pricing-detail-actions button.primary {
  background: #eef3fb;
  color: #060a0f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 12px 30px rgba(0, 0, 0, .2);
}

.pricing-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.pricing-kpi {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 120px;
  padding: 16px;
  border-radius: 16px;
  background: #0a0f15;
  box-shadow:
    inset 0 0 0 1px rgba(145, 184, 238, .14),
    inset 0 1px 0 rgba(255, 255, 255, .03);
}

.pricing-kpi-media {
  display: block;
  width: 78px;
  height: 62px;
  overflow: hidden;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .015)),
    #0e151e;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 10px 22px rgba(0, 0, 0, .2);
}

.pricing-kpi-media img,
.pricing-row-visual img,
.pricing-detail-visual img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 18%;
  object-fit: contain;
  box-sizing: border-box;
  opacity: .92;
  filter: invert(97%) sepia(5%) saturate(254%) hue-rotate(174deg) brightness(102%) contrast(96%);
}

.pricing-kpi span:not(.pricing-kpi-media) {
  display: block;
  color: #8c9aaf;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.pricing-kpi.violet .pricing-kpi-media {
  background: linear-gradient(145deg, rgba(136, 101, 255, .22), rgba(136, 101, 255, .035)), #0e151e;
}

.pricing-kpi.blue .pricing-kpi-media {
  background: linear-gradient(145deg, rgba(91, 129, 255, .2), rgba(91, 129, 255, .03)), #0e151e;
}

.pricing-kpi.green .pricing-kpi-media {
  background: linear-gradient(145deg, rgba(90, 190, 125, .18), rgba(90, 190, 125, .03)), #0e151e;
}

.pricing-kpi.amber .pricing-kpi-media {
  background: linear-gradient(145deg, rgba(210, 151, 60, .2), rgba(210, 151, 60, .035)), #0e151e;
}

.pricing-kpi strong {
  display: block;
  margin-top: 8px;
  color: #f7f9fd;
  font-size: 25px;
  line-height: 1.08;
  font-weight: 840;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: balance;
}

.pricing-kpi small {
  display: block;
  margin-top: 8px;
  color: #9ba6b6;
  font-size: 12px;
  font-weight: 620;
}

.pricing-workspace {
  align-items: flex-start;
  gap: 18px;
}

.pricing-list-panel,
.pricing-detail {
  border-radius: 18px;
  background: #080d13;
  box-shadow:
    inset 0 0 0 1px rgba(145, 184, 238, .14),
    0 22px 60px rgba(0, 0, 0, .18);
}

.pricing-list-panel {
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.pricing-tabs {
  gap: 8px;
  padding: 14px;
  border-bottom: 1px solid rgba(145, 184, 238, .13);
  overflow-x: auto;
}

.pricing-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 13px;
  border: 0;
  border-radius: 11px;
  background: #0b1118;
  color: #a9b4c3;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(145, 184, 238, .14);
  transition-property: background-color, box-shadow, transform, color;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.pricing-tabs button:hover {
  color: #f1f5fb;
  background: #111821;
}

.pricing-tabs button em {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #151d28;
  color: #d9e1ed;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.pricing-tabs button.active {
  color: #f7f9fd;
  background: #151d29;
  box-shadow:
    inset 0 0 0 1px rgba(143, 216, 213, .55),
    0 8px 24px rgba(0, 0, 0, .18);
}

.pricing-table-head,
.pricing-row {
  display: grid;
  grid-template-columns:
    minmax(330px, 1.6fr)
    minmax(128px, .62fr)
    minmax(150px, .7fr)
    minmax(118px, .54fr);
  gap: 16px;
  align-items: center;
}

.pricing-table-head {
  padding: 13px 18px;
  color: #7f8ea2;
  font-size: 10px;
  font-weight: 840;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(145, 184, 238, .1);
}

.pricing-list {
  min-height: 500px;
  max-height: calc(100vh - 374px);
  overflow: auto;
}

.pricing-row {
  width: 100%;
  min-height: 88px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid rgba(145, 184, 238, .1);
  background: transparent;
  color: #edf2f8;
  text-align: left;
  cursor: pointer;
  transition-property: background-color, box-shadow, transform;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.pricing-row:hover {
  background: #0d141d;
}

.pricing-row.selected {
  background: #111923;
  box-shadow:
    inset 0 0 0 1px rgba(143, 216, 213, .45),
    inset 0 1px 0 rgba(255, 255, 255, .03);
}

.pricing-row-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 13px;
}

.pricing-row-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.pricing-row-visual {
  flex: 0 0 auto;
  width: 54px;
  height: 44px;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)),
    #0e151e;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 8px 18px rgba(0, 0, 0, .16);
}

.pricing-row.bowling .pricing-row-visual {
  background: linear-gradient(145deg, rgba(105, 218, 164, .16), rgba(105, 218, 164, .025)), #0e151e;
}

.pricing-row.laser .pricing-row-visual {
  background: linear-gradient(145deg, rgba(118, 157, 255, .17), rgba(118, 157, 255, .025)), #0e151e;
}

.pricing-row.formula .pricing-row-visual {
  background: linear-gradient(145deg, rgba(225, 185, 93, .17), rgba(225, 185, 93, .025)), #0e151e;
}

.pricing-row.special .pricing-row-visual {
  background: linear-gradient(145deg, rgba(154, 130, 255, .17), rgba(154, 130, 255, .025)), #0e151e;
}

.pricing-row strong,
.pricing-cell.price {
  color: #f7f9fd;
  font-weight: 820;
}

.pricing-row-main strong,
.pricing-row-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pricing-row small,
.pricing-cell small {
  display: block;
  margin-top: 4px;
  color: #8795a8;
  font-size: 12px;
  font-weight: 620;
}

.pricing-row-main small em {
  display: inline-flex;
  margin-right: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #151e2a;
  color: #c8d4e3;
  font-style: normal;
  font-size: 10px;
  font-weight: 820;
}

.pricing-cell {
  color: #cad4e2;
  font-size: 13px;
  font-weight: 720;
}

.pricing-row-tags-inline,
.pricing-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.pricing-row-tags-inline em,
.pricing-tags em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #0f1722;
  color: #bdc8d8;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(145, 184, 238, .14);
}

.pricing-row.bowling .pricing-row-main small em,
.pricing-row.bowling .pricing-row-tags-inline em:first-child,
.pricing-row.bowling .pricing-tags em:first-child {
  color: #9ee4bd;
}

.pricing-row.laser .pricing-row-main small em,
.pricing-row.laser .pricing-row-tags-inline em:first-child,
.pricing-row.laser .pricing-tags em:first-child {
  color: #a7c3ff;
}

.pricing-row.formula .pricing-row-main small em,
.pricing-row.formula .pricing-row-tags-inline em:first-child,
.pricing-row.formula .pricing-tags em:first-child {
  color: #f0d493;
}

.pricing-row.special .pricing-row-main small em,
.pricing-row.special .pricing-row-tags-inline em:first-child,
.pricing-row.special .pricing-tags em:first-child {
  color: #c4b8ff;
}

.pricing-detail {
  width: min(430px, 31vw);
  padding: 18px;
  align-self: flex-start;
  position: sticky;
  top: 20px;
}

.pricing-detail-visual {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: end;
  gap: 15px;
  min-height: 116px;
  padding: 14px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)),
    #0b121a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .03);
}

.pricing-detail-visual img {
  height: 88px;
  border-radius: 14px;
  outline: 1px solid rgba(255, 255, 255, .1);
  background: #0e151e;
}

.pricing-detail-visual span,
.pricing-detail-head span,
.pricing-detail-section h3 {
  color: #8b99ad;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-detail-visual strong {
  display: block;
  margin-top: 7px;
  color: #f7f9fd;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 820;
}

.pricing-detail-head {
  padding: 18px 4px 0;
}

.pricing-detail-head h2 {
  margin: 8px 0 0;
  color: #f7f9fd;
  font-size: 25px;
  line-height: 1.1;
  font-weight: 840;
  letter-spacing: 0;
  text-wrap: balance;
}

.pricing-detail-head p {
  margin: 10px 0 0;
  color: #a4afbf;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 620;
  text-wrap: pretty;
}

.pricing-detail-price {
  margin: 18px 0 14px;
  padding: 16px;
  border-radius: 14px;
  background: #0d141d;
  box-shadow: inset 0 0 0 1px rgba(145, 184, 238, .14);
}

.pricing-detail-price strong {
  display: block;
  color: #f7f9fd;
  font-size: 27px;
  line-height: 1;
  font-weight: 860;
  font-variant-numeric: tabular-nums;
}

.pricing-detail-price span {
  display: block;
  margin-top: 7px;
  color: #8d99ab;
  font-size: 12px;
  font-weight: 680;
}

.pricing-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.pricing-detail-stats div {
  padding: 12px 10px;
  border-radius: 12px;
  background: #0b1118;
  box-shadow: inset 0 0 0 1px rgba(145, 184, 238, .12);
}

.pricing-detail-stats strong {
  display: block;
  color: #f4f7fb;
  font-size: 18px;
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.pricing-detail-stats span {
  display: block;
  margin-top: 3px;
  color: #8492a6;
  font-size: 11px;
  font-weight: 680;
}

.pricing-detail-section {
  margin-top: 18px;
}

.pricing-activity-list,
.pricing-note-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.pricing-activity-list span,
.pricing-note-list span {
  display: block;
  padding: 10px 11px;
  border-radius: 11px;
  background: #0b1118;
  color: #c8d2e0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 680;
  box-shadow: inset 0 0 0 1px rgba(145, 184, 238, .12);
}

.pricing-detail-actions {
  gap: 9px;
  margin-top: 20px;
}

.pricing-detail-actions button {
  flex: 1;
}

.pricing-empty,
.pricing-detail.empty {
  padding: 28px;
  color: #9aa5b5;
  font-weight: 700;
}

@media (max-width: 1320px) {
  .pricing-table-head,
  .pricing-row {
    grid-template-columns: minmax(300px, 1.35fr) minmax(116px, .6fr) minmax(128px, .68fr) minmax(104px, .5fr);
  }
}

@media (max-width: 1180px) {
  .pricing-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-workspace {
    flex-direction: column;
  }

  .pricing-detail {
    position: static;
    width: auto;
  }
}

@media (max-width: 760px) {
  .staff-pricing-page {
    padding: 22px 16px 28px;
  }

  .pricing-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .pricing-actions,
  .pricing-search {
    width: 100%;
  }

  .pricing-kpis {
    grid-template-columns: 1fr;
  }

  .pricing-table-head {
    display: none;
  }

  .pricing-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pricing-row-visual {
    width: 52px;
    height: 42px;
  }

  .pricing-detail-visual {
    grid-template-columns: 112px minmax(0, 1fr);
  }
}