@font-face {
  font-family: "Inter";
  src: url("./assets/inter-cyrillic-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Shared calendar and exact payment marks (06.08 references). */
.segment-payments {
  padding: 0;
  background: transparent;
  border: 0;
}

.segment-payments img {
  box-sizing: border-box;
  width: 36px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  flex: 0 0 36px;
}

.shared-date-control {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

.shared-date-native {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  opacity: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  appearance: none !important;
}

.shared-date-trigger {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #151a22;
  font: inherit;
  font-family: var(--font-sans, "Inter", Arial, sans-serif);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  background: #fff;
  border: 1px solid #bdc9d8;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.shared-date-trigger:hover:not(:disabled) {
  border-color: #8fa6c4;
}

.shared-date-trigger:focus,
.shared-date-trigger:focus-visible {
  outline: 0;
}

.shared-date-trigger:focus-visible {
  border-color: #367be3;
  box-shadow: 0 0 0 3px rgb(54 123 227 / 14%);
}

.shared-date-trigger.is-placeholder {
  color: #718198;
}

.shared-date-trigger.is-invalid {
  border-color: #df3546;
}

.shared-date-trigger:disabled {
  color: #8b96a6;
  background: #f1f4f8;
  cursor: not-allowed;
}

.shared-date-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-date-trigger > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: #367be3;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-calendar-popover {
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
  width: min(320px, calc(100vw - 24px));
  height: 356px;
  max-height: 356px;
  overflow: hidden;
  color: #151a22;
  font-family: var(--font-sans, "Inter", Arial, sans-serif);
  font-size: 13px;
  background: #f7f9fd;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  box-shadow: 0 16px 42px rgb(38 55 78 / 16%);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.shared-calendar-popover[hidden] {
  display: none;
}

.shared-calendar-popover.is-open {
  opacity: 1;
  transform: translateY(0);
}

.shared-calendar-header {
  display: grid;
  height: 38px;
  padding: 0 8px;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
}

.shared-calendar-header strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-calendar-nav {
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: #367be3;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.shared-calendar-nav:hover,
.shared-calendar-nav:focus-visible {
  background: #e7f0fd;
}

.shared-calendar-nav:focus-visible,
.shared-calendar-day:focus-visible,
.shared-calendar-footer button:focus-visible {
  outline: 2px solid #367be3;
  outline-offset: -2px;
}

.shared-calendar-nav svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-calendar-weekdays,
.shared-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 42px);
  justify-content: center;
}

.shared-calendar-weekdays {
  height: 22px;
  align-items: center;
  color: #7c8796;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}

.shared-calendar-grid {
  height: 252px;
  min-height: 252px;
  grid-auto-rows: 42px;
  align-content: start;
}

.shared-calendar-day,
.shared-calendar-blank {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
}

.shared-calendar-day {
  display: grid;
  padding: 0;
  place-items: center;
  color: #1a2029;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: color 140ms ease, background-color 140ms ease;
}

.shared-calendar-day:hover:not(:disabled) {
  color: #0877f9;
  background: #e7f0fd;
}

.shared-calendar-day.is-today:not(.is-selected) {
  color: #0877f9;
  box-shadow: inset 0 0 0 1px #9fc2f3;
}

.shared-calendar-day.is-selected,
.shared-calendar-day.is-selected:hover {
  color: #fff;
  font-weight: 500;
  background: #367be3;
  box-shadow: none;
}

.shared-calendar-day.is-in-range {
  color: #1a2029;
  background: #e7f0fd;
  border-radius: 0;
}

.shared-calendar-day.is-range-start,
.shared-calendar-day.is-range-end {
  color: #fff;
  font-weight: 500;
  background: #367be3;
}

.shared-calendar-day.is-range-start {
  border-radius: 5px 0 0 5px;
}

.shared-calendar-day.is-range-end {
  border-radius: 0 5px 5px 0;
}

.shared-calendar-day.is-range-start.is-range-end {
  border-radius: 5px;
}

.shared-calendar-day:disabled {
  color: #b9c1cd;
  cursor: not-allowed;
}

.shared-calendar-day.is-today:disabled {
  color: #b9c1cd;
  box-shadow: none;
}

.shared-calendar-footer {
  display: flex;
  height: 42px;
  padding: 5px 16px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #dfe5ee;
}

.shared-calendar-footer button {
  min-height: 26px;
  padding: 0 4px;
  color: #367be3;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.shared-calendar-footer button:hover {
  color: #075fbf;
}

.shared-calendar-footer button[hidden] {
  display: none;
}

.shared-calendar-footer [data-shared-calendar-done] {
  margin-left: auto;
}

.duet-order-history > header > .shared-date-control {
  width: 170px;
  grid-column: 2;
  grid-row: 1 / 3;
  justify-self: end;
}

.duet-order-history > header > .shared-date-control .shared-date-trigger {
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  color: #151a22;
  font-size: 11px;
  background: #fff;
  border: 1px solid #bdc9d8;
}

body.customer-mobile-cabinet .customer-mobile-bonus-period .shared-date-control,
.admin-page .admin-maintenance-settings .shared-date-control {
  width: 100%;
}

body.customer-mobile-cabinet .customer-mobile-bonus-period .shared-date-trigger {
  height: 48px;
  min-height: 48px;
}

@media (max-width: 480px) {
  .segment-payments {
    flex-wrap: wrap;
  }

  .segment-payments-label {
    flex: 0 0 100%;
  }

  .shared-calendar-popover {
    box-shadow: 0 12px 32px rgb(38 55 78 / 14%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shared-calendar-popover,
  .shared-calendar-day,
  .shared-calendar-nav,
  .shared-date-trigger {
    transition-duration: 0.01ms !important;
  }
}

/* Admin: canonical catalog menu management */
.admin-page .admin-catalog-manager {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  padding: 4px 18px 20px;
}

.admin-page .admin-catalog-manager > section {
  min-width: 0;
  padding: 0 18px 0 0;
}

.admin-page .admin-catalog-manager > section + section {
  padding: 0 0 0 18px;
  border-left: 1px solid var(--admin-border-soft, #e6ebf2);
}

.admin-page .admin-catalog-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  border-bottom: 1px solid var(--admin-border-soft, #e6ebf2);
}

.admin-page .admin-catalog-manager-head h3 {
  margin: 0;
  color: var(--admin-ink, #172235);
  font-size: 14px;
  font-weight: 600;
}

.admin-page .admin-catalog-manager-head span {
  color: var(--admin-muted, #6f7c8c);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.admin-page .admin-catalog-menu-list {
  display: grid;
}

.admin-page .admin-catalog-menu-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--admin-border-soft, #edf1f6);
}

.admin-page .admin-catalog-menu-row:last-child {
  border-bottom: 0;
}

.admin-page .admin-catalog-menu-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 6px;
  background: #eef5ff;
}

.admin-page .admin-catalog-menu-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.admin-page .admin-catalog-menu-row > button {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-page .admin-catalog-menu-row > button strong {
  overflow: hidden;
  color: var(--admin-ink, #172235);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-page .admin-catalog-menu-row > button small {
  overflow: hidden;
  color: var(--admin-muted, #6f7c8c);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-page .admin-catalog-menu-row > button:hover strong,
.admin-page .admin-catalog-menu-row > button:focus-visible strong {
  color: #0877f9;
}

.admin-page .admin-catalog-menu-row > button:focus-visible {
  outline: 2px solid rgba(8, 119, 249, 0.24);
  outline-offset: 3px;
}

.admin-page .admin-catalog-switch {
  position: relative;
  display: grid;
  width: 40px;
  height: 30px;
  place-items: center;
  cursor: pointer;
}

.admin-page .admin-catalog-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.admin-page .admin-catalog-switch i {
  position: relative;
  display: block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #cbd3de;
  transition: background-color 180ms ease;
}

.admin-page .admin-catalog-switch i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  content: "";
  transition: transform 180ms ease;
}

.admin-page .admin-catalog-switch input:checked + i {
  background: #0877f9;
}

.admin-page .admin-catalog-switch input:checked + i::after {
  transform: translateX(16px);
}

.admin-page .admin-catalog-switch input:focus-visible + i {
  outline: 3px solid rgba(8, 119, 249, 0.2);
  outline-offset: 2px;
}

@media (max-width: 1040px) {
  .admin-page .admin-catalog-manager {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .admin-catalog-manager > section,
  .admin-page .admin-catalog-manager > section + section {
    padding: 0;
    border-left: 0;
  }

  .admin-page .admin-catalog-manager > section + section {
    margin-top: 14px;
    border-top: 1px solid var(--admin-border-soft, #e6ebf2);
  }
}

/* Dialector administration console, 2026-07-15 */
.admin-page {
  --admin-header-height: 76px;
  --admin-sidebar-width: 220px;
  --admin-blue: #0877f9;
  --admin-blue-deep: #0563d1;
  --admin-blue-soft: #e8f2ff;
  margin: 0;
  color: #111318;
  background: #f6f8fb;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}

.admin-page button,
.admin-page input,
.admin-page select,
.admin-page textarea {
  font-family: var(--font-sans);
}

.admin-page button:focus-visible,
.admin-page a:focus-visible,
.admin-page input:focus-visible,
.admin-page select:focus-visible,
.admin-page textarea:focus-visible {
  outline: 2px solid rgba(8, 119, 249, 0.4);
  outline-offset: 2px;
}

.admin-skip-link:focus {
  position: fixed;
  z-index: 130;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 14px;
  margin: 0;
  clip: auto;
  color: #fff;
  background: var(--admin-blue);
  border-radius: 6px;
}

.admin-app {
  min-height: 100vh;
}

.admin-header {
  position: sticky;
  z-index: 70;
  top: 0;
  height: var(--admin-header-height);
  background: #fff;
  border-bottom: 1px solid #dfe5ee;
}

.admin-header-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(1200px, calc(100% - 48px));
  height: 100%;
  margin-inline: auto;
}

.admin-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: 164px;
  height: 44px;
}

.admin-logo img {
  width: 164px;
  height: auto;
}

.admin-product-label {
  flex: 0 0 auto;
  padding: 5px 9px;
  color: #526071;
  background: #f0f4f8;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.admin-global-search {
  position: relative;
  display: flex;
  flex: 1 1 360px;
  align-items: center;
  min-width: 180px;
  max-width: 430px;
  height: 42px;
  margin-left: 10px;
  color: #6f7c8c;
  background: #f6f8fb;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.admin-global-search:focus-within {
  background: #fff;
  border-color: #0877f9;
  box-shadow: none;
}

.admin-global-search > button {
  display: grid;
  flex: 0 0 42px;
  width: 42px;
  height: 40px;
  padding: 0;
  color: #526071;
  background: transparent;
  border: 0;
  border-radius: 0 7px 7px 0;
  place-items: center;
  transition: color 160ms ease, background-color 160ms ease;
}

.admin-global-search > button:hover,
.admin-global-search > button:focus-visible {
  color: #0877f9;
  background: #edf5ff;
  outline: 0;
}

.admin-global-search > button .admin-icon {
  width: 18px;
  height: 18px;
}

.admin-global-search input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 4px 0 14px;
  color: #111318;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.admin-global-search input:focus,
.admin-global-search input:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.admin-global-search input::placeholder {
  color: #6f7c8c;
  opacity: 1;
}

.admin-search-results {
  position: absolute;
  z-index: 90;
  top: calc(100% + 10px);
  left: 0;
  width: min(440px, calc(100vw - 32px));
  padding: 8px;
  color: #111318;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(17, 19, 24, 0.14);
}

.admin-search-results[hidden] {
  display: none;
}

.admin-search-results > span {
  display: block;
  padding: 7px 10px 5px;
  color: #6f7c8c;
  font-size: 12px;
  font-weight: 600;
}

.admin-search-results > button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 7px 9px;
  color: #111318;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  transition: background-color 160ms ease;
}

.admin-search-results > button:hover {
  background: #f0f4f8;
}

.admin-search-results > button > i {
  display: grid;
  width: 36px;
  height: 36px;
  color: #0877f9;
  background: #e8f2ff;
  border-radius: 7px;
  place-items: center;
}

.admin-search-results > button > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.admin-search-results > button strong,
.admin-search-results > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-search-results > button small {
  color: #6f7c8c;
  font-size: 12px;
}

.admin-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.admin-sync-state,
.admin-live-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #526071;
  font-size: 12px;
  white-space: nowrap;
}

.admin-sync-state i,
.admin-live-label i {
  width: 7px;
  height: 7px;
  background: #19a781;
  border-radius: 50%;
}

.admin-icon-button {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #334052;
  background: #fff;
  border: 0;
  border-radius: 7px;
  place-items: center;
  transition: color 160ms ease, background-color 160ms ease;
}

.admin-icon-button:hover {
  color: #0877f9;
  background: #e8f2ff;
}

.admin-icon {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-notification-button b {
  position: absolute;
  top: 2px;
  right: 1px;
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  color: #fff;
  background: #e05872;
  border: 2px solid #fff;
  border-radius: 999px;
  place-items: center;
  font-size: 10px;
  line-height: 1;
}

.admin-popover-anchor {
  position: relative;
}

.admin-popover {
  position: absolute;
  z-index: 90;
  top: calc(100% + 10px);
  right: 0;
  color: #111318;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(17, 19, 24, 0.14);
}

.admin-popover[hidden] {
  display: none;
}

.admin-notifications {
  width: 360px;
  padding: 8px;
}

.admin-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px 11px;
}

.admin-popover-head strong {
  font-size: 15px;
}

.admin-popover-head button {
  padding: 4px;
  color: #0877f9;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 600;
}

.admin-notification-list {
  display: grid;
  max-height: 430px;
  overflow: auto;
}

.admin-notification-list > button {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  transition: background-color 160ms ease;
}

.admin-notification-list > button:hover {
  background: #f0f4f8;
}

.admin-notification-list > button > i {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  background: #0877f9;
  border-radius: 50%;
}

.admin-notification-list > button > i.is-danger { background: #e05872; }
.admin-notification-list > button > i.is-warning { background: #f6a623; }
.admin-notification-list > button > i.is-success { background: #19a781; }
.admin-notification-list > button.is-read > i { background: #b8c0cc; }

.admin-notification-list > button > span {
  display: grid;
  gap: 2px;
}

.admin-notification-list small,
.admin-notification-list time {
  color: #6f7c8c;
  font-size: 12px;
}

.admin-notification-list time {
  margin-top: 3px;
}

.admin-role-toggle {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  min-width: 176px;
  min-height: 48px;
  padding: 5px 7px;
  color: #111318;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  transition: background-color 160ms ease;
}

.admin-role-toggle:hover,
.admin-role-toggle[aria-expanded="true"] {
  background: #f0f4f8;
}

.admin-role-copy {
  display: grid;
  min-width: 0;
}

.admin-role-copy small {
  color: #6f7c8c;
  font-size: 10px;
}

.admin-role-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-role-menu {
  width: 310px;
  padding: 8px;
}

.admin-role-menu > p {
  margin: 0;
  padding: 7px 9px 8px;
  color: #6f7c8c;
  font-size: 12px;
  font-weight: 600;
}

.admin-role-menu > button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px;
  color: #111318;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  transition: background-color 160ms ease;
}

.admin-role-menu > button:hover,
.admin-role-menu > button.is-selected {
  background: #f0f4f8;
}

.admin-role-menu > button > span:first-child {
  display: grid;
  width: 36px;
  height: 36px;
  color: #0877f9;
  background: #e8f2ff;
  border-radius: 7px;
  place-items: center;
}

.admin-role-menu > button > span:nth-child(2) {
  display: grid;
  gap: 2px;
}

.admin-role-menu > button small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-role-menu > button > i {
  width: 8px;
  height: 8px;
  justify-self: center;
  background: transparent;
  border-radius: 50%;
}

.admin-role-menu > button.is-selected > i {
  background: #19a781;
}

.admin-avatar {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  overflow: hidden;
  color: #0563d1;
  background: #e8f2ff;
  border-radius: 50%;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}

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

.admin-avatar--large {
  width: 58px;
  height: 58px;
  font-size: 16px;
}

.admin-mobile-menu {
  display: none;
}

.admin-workspace {
  display: grid;
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
  gap: 24px;
  width: min(1200px, calc(100% - 48px));
  min-height: calc(100vh - var(--admin-header-height));
  margin-inline: auto;
}

.admin-sidebar {
  position: sticky;
  z-index: 40;
  top: var(--admin-header-height);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: auto;
  height: calc(100vh - var(--admin-header-height));
  padding: 22px 0;
  color: #334052;
  background: transparent;
  overflow-y: auto;
}

.admin-navigation {
  display: grid;
  gap: 3px;
}

.admin-navigation > p {
  margin: 15px 12px 5px;
  color: #6f7c8c;
  font-size: 11px;
  font-weight: 600;
}

.admin-navigation > p:first-child {
  margin-top: 0;
}

.admin-navigation > button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  color: #334052;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  transition: color 160ms ease, background-color 160ms ease;
}

.admin-navigation > button:hover {
  color: #111318;
  background: #edf1f6;
}

.admin-navigation > button.is-active {
  color: #0563d1;
  background: #e8f2ff;
  font-weight: 600;
}

.admin-navigation > button .admin-icon {
  width: 19px;
  height: 19px;
}

.admin-navigation > button b {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  color: #526071;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  place-items: center;
  font-size: 10px;
}

.admin-navigation > button.is-active b {
  color: #0563d1;
  border-color: #b8d7ff;
}

.admin-navigation .is-role-hidden,
.admin-sidebar .is-role-hidden {
  display: none;
}

.admin-sidebar-footer {
  display: grid;
  gap: 9px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #dfe5ee;
}

.admin-sidebar-footer > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 10px;
}

.admin-sidebar-footer > div > span:last-child {
  display: grid;
  gap: 2px;
}

.admin-sidebar-footer small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-sidebar-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  color: #0877f9;
  border-radius: 7px;
  font-weight: 600;
}

.admin-sidebar-footer a:hover {
  background: #e8f2ff;
}

.admin-content {
  min-width: 0;
  padding: 30px 0 64px;
}

.admin-view-root,
.admin-view {
  min-width: 0;
}

.admin-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 92px;
  margin-bottom: 24px;
}

.admin-page-header > div:first-child {
  min-width: 0;
}

.admin-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: #6f7c8c;
  font-size: 12px;
}

.admin-breadcrumbs .admin-icon {
  width: 13px;
  height: 13px;
}

.admin-breadcrumbs strong {
  color: #334052;
}

.admin-page-header h1 {
  margin: 0;
  color: #111318;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0;
}

.admin-page-header p {
  max-width: 650px;
  margin: 7px 0 0;
  color: #526071;
  font-size: 14px;
}

.admin-page-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.admin-button,
.admin-small-button,
.admin-text-button,
.admin-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #334052;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.admin-button {
  min-height: 40px;
  padding: 0 14px;
}

.admin-button .admin-icon {
  width: 17px;
  height: 17px;
}

.admin-button--primary {
  color: #fff;
  background: #0877f9;
}

.admin-button--primary:hover {
  background: #0563d1;
}

.admin-button--secondary {
  color: #334052;
  background: #fff;
  border: 1px solid #dfe5ee;
}

.admin-button--secondary:hover,
.admin-button--quiet:hover {
  color: #0563d1;
  background: #e8f2ff;
  border-color: #b8d7ff;
}

.admin-button--quiet {
  color: #526071;
  background: #f0f4f8;
}

.admin-button--success {
  color: #087454;
  background: #dff7ef;
}

.admin-button--success:hover {
  background: #c9f1e3;
}

.admin-button--danger-text {
  color: #c43f5a;
  padding-inline: 8px;
}

.admin-button--danger-text:hover {
  background: #ffe5eb;
}

.admin-text-button {
  min-height: 32px;
  padding: 0 3px;
  color: #0877f9;
}

.admin-text-button:hover {
  color: #0563d1;
}

.admin-text-button .admin-icon {
  width: 15px;
  height: 15px;
}

.admin-row-action {
  width: 34px;
  height: 34px;
  color: #6f7c8c;
}

.admin-row-action:hover {
  color: #0877f9;
  background: #e8f2ff;
}

.admin-row-action .admin-icon {
  width: 17px;
  height: 17px;
}

.admin-surface {
  min-width: 0;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

.admin-surface-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
}

.admin-surface-head h2 {
  margin: 0;
  color: #111318;
  font-size: 17px;
  font-weight: 600;
}

.admin-surface-head p {
  margin: 4px 0 0;
  color: #6f7c8c;
  font-size: 12px;
}

.admin-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.admin-status-symbol {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: #fff;
  background: #7b8796;
  border-radius: 50%;
  place-items: center;
}

.admin-status-symbol .admin-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

.admin-status--success { color: #087454; }
.admin-status--success .admin-status-symbol { background: #159a72; }
.admin-status--warning { color: #8b5600; }
.admin-status--warning .admin-status-symbol { color: #9b6100; background: #fff0cf; border-radius: 7px; }
.admin-status--warning .admin-status-symbol .admin-icon { width: 17px; height: 17px; }
.admin-status--danger { color: #b3324d; }
.admin-status--danger .admin-status-symbol { color: #c13d58; background: #ffe5eb; }
.admin-status--info { color: #0563d1; }
.admin-status--info .admin-status-symbol { background: #0877f9; }
.admin-status--neutral { color: #526071; }
.admin-status--neutral .admin-status-symbol { color: #526071; background: #edf1f6; }

.admin-role-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  color: #334052;
  background: #edf1f6;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.admin-role-badge--admin { color: #0563d1; background: #e8f2ff; }
.admin-role-badge--moderator { color: #5d42bb; background: #eee9ff; }
.admin-role-badge--talent { color: #087454; background: #dff7ef; }

.admin-money {
  color: #0877f9;
  font-weight: 600;
  white-space: nowrap;
}

.admin-muted {
  color: #6f7c8c;
}

.admin-danger-text {
  color: #c43f5a !important;
  font-weight: 600;
}

.admin-rating {
  color: #d28a00;
  white-space: nowrap;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-cyrillic-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-latin-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-cyrillic-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-latin-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
  unicode-range: U+20BD;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-500.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: block;
  unicode-range: U+20BD;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: block;
  unicode-range: U+20BD;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: block;
  unicode-range: U+20BD;
}

@font-face {
  font-family: "Inter";
  src: url("./assets/inter-800.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: block;
  unicode-range: U+20BD;
}

:root {
  color-scheme: light;
  --font-sans: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  --ink-950: #090b10;
  --ink-900: #111318;
  --ink-800: #1d2430;
  --ink-700: #334052;
  --ink-600: #526071;
  --ink-500: #6f7c8c;
  --ink-300: #b8c0cc;
  --ink-200: #dfe5ee;
  --ink-100: #edf1f6;
  --paper: #f6f8fb;
  --surface: #ffffff;
  --surface-muted: #f0f4f8;
  --cobalt: #0877f9;
  --cobalt-700: #0563d1;
  --cobalt-100: #e8f2ff;
  --mint: #19a781;
  --mint-100: #dff7ef;
  --amber: #f6a623;
  --amber-100: #fff0cf;
  --rose: #e05872;
  --rose-100: #ffe5eb;
  --violet: #7357d8;
  --shadow-sm: 0 8px 24px rgba(17, 19, 24, 0.08);
  --shadow-md: 0 18px 60px rgba(17, 19, 24, 0.14);
  --radius: 8px;
  --radius-sm: 6px;
  --container: 1200px;
}

* {
  box-sizing: border-box;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
}

b,
strong,
h1,
h2,
h3,
h4,
h5,
h6,
th {
  font-weight: 600;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink-900);
  background: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-y: scroll;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.app-shell {
  min-height: 100vh;
  overflow-x: hidden;
}

.page-grid {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 50%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  width: min(var(--container), calc(100% - 48px));
  min-height: 64px;
  padding: 10px 12px 10px 18px;
  color: #fff;
  background: rgba(17, 19, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.2);
}

.brand,
.nav-links,
.header-actions,
.hero-metrics,
.panel-topline,
.summary-row,
.catalog-controls,
.builder-steps,
.role-tabs,
.footer-grid,
.admin-actions,
.admin-section-head,
.player-meta {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-weight: 600;
}

.brand > span:last-child {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
}

.brand-mark {
  display: inline-grid;
  grid-template-columns: repeat(3, 5px);
  justify-content: center;
  align-items: center;
  gap: 3px;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  background: var(--cobalt);
  border-radius: var(--radius-sm);
}

.brand-mark span {
  display: block;
  width: 5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: 50% 50%;
  animation: brandWave 8s ease-in-out infinite both;
}

.brand-mark span:nth-child(1) {
  height: 13px;
  animation-delay: 0s;
}

.brand-mark span:nth-child(2) {
  height: 20px;
  animation-delay: 0.1s;
}

.brand-mark span:nth-child(3) {
  height: 15px;
  animation-delay: 0.2s;
}

@keyframes brandWave {
  0%,
  9%,
  18%,
  27%,
  100% {
    transform: scaleY(1);
  }

  3%,
  12%,
  21% {
    transform: scaleY(0.7);
  }

  6%,
  15%,
  24% {
    transform: scaleY(1.16);
  }
}

body.admin-overlay-open,
body.admin-dialog-open,
body.admin-sidebar-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark span {
    animation: none;
  }

  .hero-typing-caret {
    display: none;
  }
}

/* Administration content studio and Directus-ready entities, 2026-07-16 */
.admin-header-inner,
.admin-workspace {
  width: min(1400px, calc(100% - 48px));
}

.admin-workspace {
  grid-template-columns: 232px minmax(0, 1fr);
}

.admin-content-workbench {
  display: grid;
  gap: 12px;
}

.admin-content-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  background: #edf1f6;
  border-radius: 8px;
}

.admin-content-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  color: #526071;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}

.admin-content-tabs button:hover {
  color: #111318;
}

.admin-content-tabs button.is-active {
  color: #0563d1;
  background: #fff;
}

.admin-content-tabs button b {
  display: grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  color: #526071;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  place-items: center;
  font-size: 10px;
}

.admin-content-tabs button.is-active b {
  color: #fff;
  background: #0877f9;
}

.admin-cms-panel {
  overflow: hidden;
}

.admin-cms-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
  padding: 16px 18px;
  border-bottom: 1px solid #dfe5ee;
}

.admin-cms-panel-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.admin-cms-panel-head p {
  margin: 4px 0 0;
  color: #6f7c8c;
  font-size: 12px;
}

.admin-cms-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #087454;
  font-size: 11px;
  font-weight: 600;
}

.admin-cms-live .admin-icon {
  width: 17px;
  height: 17px;
}

.admin-shared-content-list {
  display: grid;
  padding: 8px 14px 14px;
}

.admin-shared-content-list > button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 9px 10px;
  color: #111318;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  transition: background-color 160ms ease;
}

.admin-shared-content-list > button:last-child {
  border-bottom: 0;
}

.admin-shared-content-list > button:hover {
  background: #f6f8fb;
}

.admin-shared-content-list > button > span:first-child {
  display: grid;
  width: 42px;
  height: 42px;
  color: #0877f9;
  background: #e8f2ff;
  border-radius: 8px;
  place-items: center;
}

.admin-shared-content-list > button > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.admin-shared-content-list small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-faq-manager {
  display: grid;
  padding: 8px 14px 14px;
}

.admin-faq-manager > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 66px;
  padding: 8px 10px;
  color: #111318;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf1f6;
  transition: background-color 160ms ease;
}

.admin-faq-manager > button:hover {
  background: #f6f8fb;
}

.admin-faq-manager > button > span:first-child {
  color: #0877f9;
  font-size: 11px;
  font-weight: 600;
}

.admin-faq-manager > button > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-faq-manager strong,
.admin-faq-manager small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-faq-manager small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-seo-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #dfe5ee;
  border-bottom: 1px solid #dfe5ee;
}

.admin-seo-summary > div {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  background: #f9fafc;
}

.admin-seo-summary span {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-seo-summary strong {
  font-size: 20px;
  font-weight: 600;
}

.admin-content-name + code,
.admin-data-table code {
  color: #526071;
  font-family: var(--font-sans);
  font-size: 11px;
}

.admin-promo-code {
  min-height: 30px;
  padding: 0 9px;
  color: #0563d1;
  background: #e8f2ff;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.admin-media-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-media-toolbar > span {
  color: #6f7c8c;
  font-size: 11px;
}

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

.admin-media-grid article {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  min-height: 104px;
  padding: 10px;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  transition: border-color 160ms ease;
}

.admin-media-grid article:hover {
  border-color: #b8c7da;
}

.admin-media-preview {
  display: grid;
  width: 84px;
  height: 84px;
  overflow: hidden;
  color: #0877f9;
  background: #e8f2ff;
  border-radius: 7px;
  place-items: center;
}

.admin-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-media-preview--audio {
  color: #5d42bb;
  background: #eee9ff;
}

.admin-media-preview--document {
  color: #8b5600;
  background: #fff0cf;
}

.admin-media-grid article > div:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.admin-media-grid article strong,
.admin-media-grid article span,
.admin-media-grid article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-media-grid article span,
.admin-media-grid article small {
  color: #6f7c8c;
  font-size: 10px;
}

.admin-media-drawer-preview {
  display: grid;
  min-height: 220px;
  overflow: hidden;
  color: #0877f9;
  background: #f0f4f8;
  border-radius: 8px;
  place-items: center;
}

.admin-media-drawer-preview img {
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.admin-check-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 9px !important;
  min-height: 42px;
  color: #334052;
  font-size: 12px;
}

.admin-check-row input {
  width: 17px;
  height: 17px;
  accent-color: #0877f9;
}

.admin-upload-drop {
  position: relative;
  display: grid;
  min-height: 180px;
  overflow: hidden;
  border: 1px dashed #9bc7ff;
  border-radius: 8px;
  cursor: pointer;
}

.admin-upload-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-upload-drop > span {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  color: #526071;
  text-align: center;
  background: #f7fbff;
}

.admin-upload-drop .admin-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: #0877f9;
}

.admin-upload-drop small {
  max-width: 320px;
  color: #6f7c8c;
  font-size: 11px;
}

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

@media (max-width: 680px) {
  .admin-header-inner,
  .admin-workspace {
    width: calc(100% - 24px);
  }

  .admin-cms-panel-head,
  .admin-media-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-faq-manager > button {
    grid-template-columns: 28px minmax(0, 1fr) 16px;
  }

  .admin-faq-manager .admin-status {
    display: none;
  }

  .admin-seo-summary,
  .admin-media-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Archive 12.07: public utility pages. */
.payment-methods-shell .site-breadcrumbs {
  margin-bottom: 28px;
}

.payment-methods-shell .reference-page-title,
.prices-page .reference-page-title {
  margin-bottom: 46px;
  font-size: 42px;
  font-weight: 600;
}

.prices-page .reference-page-title {
  margin-bottom: 14px;
}

.prices-page .reference-page-description {
  max-width: 780px;
  margin: 0 0 42px;
  color: #526071;
  font-size: 16px;
  line-height: 1.6;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.payment-methods-grid article {
  display: grid;
  min-width: 0;
  height: 180px;
  place-items: center;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
}

.payment-methods-grid img {
  display: block;
  max-width: min(220px, 88%);
  max-height: 112px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.prices-page .pricing-list {
  gap: 20px;
}

.prices-page .pricing-row {
  min-height: 250px;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 34px;
  padding: 28px 30px;
}

.prices-page .pricing-row-copy h2 {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 600;
}

.prices-page .pricing-row-copy h3 {
  margin: 28px 0 9px;
  font-size: 16px;
  font-weight: 600;
}

.prices-page .pricing-row-copy p {
  max-width: 900px;
  font-size: 14px;
  line-height: 1.55;
}

.prices-page .pricing-row-card {
  min-height: 196px;
  align-self: stretch;
  padding: 22px 25px;
  background: #f5f8fc;
  border-radius: 7px;
}

.prices-page .pricing-row-card > strong {
  margin-bottom: 14px;
  font-size: 22px;
  font-weight: 600;
}

.prices-page .pricing-row-card dl {
  gap: 12px;
}

.prices-page .pricing-row-card dt {
  margin-bottom: 3px;
  color: #526071;
  font-size: 12px;
  font-weight: 500;
}

.prices-page .pricing-row-card dd {
  font-size: 14px;
}

.prices-page .pricing-row-card button {
  font-size: 14px;
}

.not-found-page {
  min-height: 100vh;
  margin: 0;
  color: #121212;
  background: #f6f8fb;
  font-family: var(--font-sans);
}

.not-found-main {
  display: grid;
  min-height: 100vh;
  align-content: center;
  justify-items: center;
  padding: 40px 22px;
  text-align: center;
}

.not-found-code {
  color: #367be3;
  font: 600 clamp(112px, 17vw, 226px)/.84 var(--font-sans);
  letter-spacing: 0;
}

.not-found-main h1 {
  margin: 40px 0 0;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

.not-found-main p {
  margin: 12px 0 30px;
  color: #718198;
  font-size: 15px;
  line-height: 1.5;
}

.not-found-main a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  color: #367be3;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: 1px solid #367be3;
  border-radius: 5px;
  transition: color 150ms ease, background-color 150ms ease;
}

.not-found-main a:hover,
.not-found-main a:focus-visible {
  color: #fff;
  background: #367be3;
  outline: none;
}

@media (max-width: 980px) {
  .payment-methods-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prices-page .pricing-row {
    grid-template-columns: minmax(0, 1fr) 290px;
  }
}

@media (max-width: 680px) {
  .payment-methods-grid {
    gap: 12px;
  }

  .payment-methods-grid article {
    height: 130px;
    padding: 22px;
  }

  .prices-page .pricing-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }

  .not-found-main h1 {
    margin-top: 28px;
    font-size: 26px;
  }
}

.support-archive-view {
  display: grid;
  gap: 18px;
}

.support-archive-view h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
}

.support-archive-view form {
  display: grid;
  max-width: 700px;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border-radius: 7px;
}

.support-archive-view label {
  display: grid;
  gap: 7px;
}

.support-archive-view label > span {
  color: #39475a;
  font-size: 11px;
  font-weight: 500;
}

.support-archive-view input,
.support-archive-view select,
.support-archive-view textarea {
  width: 100%;
  padding: 0 12px;
  color: #121212;
  font: 400 12px/1.4 var(--font-sans);
  border: 1px solid #bdc9d8;
  border-radius: 5px;
  outline: none;
}

.support-archive-view input,
.support-archive-view select {
  height: 40px;
}

.support-archive-view textarea {
  min-height: 130px;
  padding-block: 11px;
  resize: vertical;
}

.support-archive-view input:focus,
.support-archive-view select:focus,
.support-archive-view textarea:focus {
  border-color: #7aaef1;
}

.support-archive-view .primary-button {
  justify-self: start;
}

/* Archive 12.07: analytics dashboard. */
.account-profile-page .analytics-archive-layout {
  display: grid;
  gap: 20px;
  width: 100%;
  min-width: 0;
}

.account-profile-page .analytics-archive-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 28px;
  align-items: center;
  min-height: 48px;
  padding: 0;
  margin: 0;
}

.account-profile-page .analytics-archive-head h2 {
  margin: 0;
  color: #121212;
  font: 600 26px/1.2 var(--font-sans);
}

.analytics-period-picker {
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #121212;
  font: 500 13px/1.3 var(--font-sans);
}

.analytics-period-picker > button {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 4px 0;
  color: #0877f9;
  font: 500 13px/1.3 var(--font-sans);
  background: transparent;
  border: 0;
  border-bottom: 1px solid #0877f9;
  border-radius: 0;
  box-shadow: none;
}

.analytics-period-picker > button .dashboard-icon {
  width: 13px;
  height: 13px;
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

.analytics-period-picker > button[aria-expanded="true"] .dashboard-icon {
  transform: rotate(-90deg);
}

.analytics-period-menu {
  position: absolute;
  z-index: 35;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  width: 218px;
  padding: 6px 0;
  opacity: 0;
  background: #fff;
  border: 1px solid #e4eaf2;
  border-radius: 7px;
  box-shadow: 0 14px 30px rgb(31 46 68 / 16%);
  transform: translateY(-5px);
  transition: opacity 170ms ease, transform 170ms ease;
}

.analytics-period-menu[hidden] {
  display: none;
}

.analytics-period-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}

.analytics-period-menu button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  padding: 7px 34px 7px 12px;
  color: #202020;
  font: 400 12px/1.3 var(--font-sans);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.analytics-period-menu button:hover,
.analytics-period-menu button:focus-visible,
.analytics-period-menu button.is-active {
  color: #121212;
  background: #eaf3ff;
  outline: none;
}

.analytics-period-menu button .dashboard-icon {
  display: none;
}

.analytics-period-menu button.is-active::after {
  position: absolute;
  right: 13px;
  width: 10px;
  height: 6px;
  content: "";
  border-bottom: 2px solid #0877f9;
  border-left: 2px solid #0877f9;
  transform: rotate(-45deg) translateY(-2px);
}

.account-profile-page .analytics-export-button {
  min-width: 190px;
  min-height: 40px;
  padding: 0 20px;
  font-size: 13px;
  border-radius: 5px;
  box-shadow: none;
}

.analytics-archive-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, .95fr);
  gap: 20px;
  min-width: 0;
}

.analytics-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.analytics-metric-grid > article,
.analytics-overall-score,
.analytics-voter-score,
.analytics-products-table,
.analytics-archive-chart-card {
  min-width: 0;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.analytics-metric-grid > article {
  display: grid;
  min-height: 136px;
  align-content: space-between;
  padding: 18px 18px 20px;
}

.analytics-metric-grid > article > div {
  display: flex;
  gap: 12px;
  align-items: center;
}

.analytics-metric-grid > article > div > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #0877f9;
}

.analytics-metric-grid .dashboard-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.analytics-metric-grid b {
  color: #121212;
  font: 500 18px/1.25 var(--font-sans);
}

.analytics-metric-grid strong {
  color: #121212;
  font: 500 32px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.analytics-score-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 20px;
}

.analytics-overall-score {
  padding: 17px 16px 14px;
}

.analytics-overall-score h3,
.analytics-voter-score h3,
.analytics-products-table > h3 {
  margin: 0;
  color: #121212;
  font: 500 18px/1.3 var(--font-sans);
}

.analytics-overall-score > div {
  display: flex;
  gap: 22px;
  align-items: end;
  margin-top: 15px;
}

.analytics-overall-score > div > strong {
  font: 500 32px/1 var(--font-sans);
}

.analytics-overall-score p,
.analytics-overall-score p b,
.analytics-overall-score p span {
  display: block;
  margin: 0;
}

.analytics-overall-score p b {
  color: #f2b411;
  font: 600 13px/1 var(--font-sans);
}

.analytics-overall-score p span {
  margin-top: 5px;
  color: #8794a6;
  font: 400 10px/1.2 var(--font-sans);
}

.analytics-voter-score {
  padding: 16px;
}

.analytics-voter-score ul {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 13px 0 0;
  list-style: none;
}

.analytics-voter-score li > div {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.analytics-voter-score li strong {
  font: 500 12px/1.2 var(--font-sans);
}

.analytics-voter-score li span {
  display: flex;
  gap: 11px;
  align-items: center;
}

.analytics-voter-score li span b,
.analytics-voter-score li span em {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  font: 500 11px/1 var(--font-sans);
  font-style: normal;
}

.analytics-voter-score li span b {
  color: #31ad53;
}

.analytics-voter-score li span em {
  color: #8a96a7;
}

.analytics-voter-score .dashboard-icon {
  width: 11px;
  height: 11px;
}

.analytics-voter-score li small {
  display: block;
  margin-top: 4px;
  color: #8b98a9;
  font: 400 9px/1.2 var(--font-sans);
  text-transform: uppercase;
}

.account-profile-page .analytics-products-table {
  padding: 16px;
}

.analytics-products-table > h3 {
  margin-bottom: 18px;
}

.account-profile-page .analytics-products-table th,
.account-profile-page .analytics-products-table td {
  padding: 10px 12px;
  font-size: 11px;
  border: 0;
}

.account-profile-page .analytics-products-table th {
  color: #718198;
  font-weight: 500;
  background: #f4f7fb;
}

.account-profile-page .analytics-products-table tbody tr.is-highlighted td {
  background: #eaf3ff;
}

.account-profile-page .analytics-products-table tbody tr.is-highlighted td:first-child,
.account-profile-page .analytics-products-table th:first-child {
  border-radius: 5px 0 0 5px;
}

.account-profile-page .analytics-products-table tbody tr.is-highlighted td:last-child,
.account-profile-page .analytics-products-table th:last-child {
  border-radius: 0 5px 5px 0;
}

.account-profile-page .analytics-archive-chart-card {
  display: grid;
  padding: 18px 20px 20px;
}

.analytics-chart-toolbar {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.analytics-chart-toolbar .dashboard-chart-controls {
  display: grid;
  width: min(450px, 52%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.analytics-chart-toolbar select {
  width: 100%;
  height: 36px;
  padding: 0 36px 0 13px;
  color: #718198;
  font: 400 12px/1 var(--font-sans);
  background-color: #fff;
  border: 1px solid #b7c5d9;
  border-radius: 5px;
}

.analytics-chart-toolbar .dashboard-chart-scale {
  display: flex;
  gap: 10px;
  padding: 0;
  background: transparent;
}

.analytics-chart-toolbar .dashboard-chart-scale button {
  min-height: 36px;
  padding: 0 14px;
  color: #0877f9;
  font: 500 12px/1 var(--font-sans);
  background: #fff;
  border: 1px solid #0877f9;
  border-radius: 5px;
}

.analytics-chart-toolbar .dashboard-chart-scale button.is-active {
  color: #fff;
  background: #0877f9;
}

.account-profile-page .analytics-archive-chart-card .dashboard-analytics-chart {
  width: 100%;
  min-height: 390px;
}

@media (max-width: 1180px) {
  .analytics-archive-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-score-column {
    grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
    grid-template-rows: auto;
  }
}

@media (max-width: 600px) {
  .account-profile-page .analytics-archive-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .analytics-period-picker {
    justify-self: start;
  }

  .account-profile-page .analytics-export-button {
    width: 100%;
  }

  .analytics-score-column,
  .analytics-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-chart-toolbar {
    display: grid;
  }

  .analytics-chart-toolbar .dashboard-chart-controls {
    width: 100%;
  }

  .analytics-chart-toolbar .dashboard-chart-scale {
    overflow-x: auto;
  }
}

.nav-links {
  justify-content: center;
  gap: 6px;
}

.nav-links a {
  padding: 9px 12px;
  color: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-sm);
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.header-actions,
.admin-actions {
  gap: 8px;
}

.auth-dropdown {
  position: relative;
}

.auth-trigger {
  min-width: 78px;
}

.auth-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 272px;
  padding: 12px;
  gap: 8px;
  visibility: hidden;
  opacity: 0;
  background: var(--surface);
  border: 1px solid rgba(223, 229, 238, 0.94);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.auth-dropdown:hover .auth-menu-panel,
.auth-dropdown:focus-within .auth-menu-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.auth-menu-panel a {
  padding: 10px 12px;
  color: var(--ink-800);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.auth-menu-panel button {
  font: inherit;
}

.social-auth-panel > strong {
  padding: 2px 2px 4px;
  color: var(--ink-900);
  font-size: 0.94rem;
}

.social-login {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 46px;
  width: 100%;
  padding: 10px 12px;
  color: var(--ink-800);
  font-weight: 600;
  text-align: left;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  cursor: pointer;
}

.social-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.yandex-login .social-icon {
  background: #fc3f1d;
}

.vk-login .social-icon {
  background: #0077ff;
}

.auth-role-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-top: 4px;
}

.auth-role-links a {
  display: grid;
  place-items: center;
  min-height: 36px;
  padding: 8px;
  color: var(--ink-700);
  background: #fff;
  border: 1px solid var(--ink-200);
}

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

.auth-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 16, 0.58);
  backdrop-filter: blur(10px);
}

.auth-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 16px;
  width: min(430px, 100%);
  padding: 28px;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.auth-modal-panel h2 {
  margin-bottom: 0;
  font-size: 1.65rem;
}

.auth-mode-tabs,
.auth-role-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: #f8fafc;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

.auth-mode-tabs button,
.auth-role-toggle button {
  min-height: 38px;
  color: var(--ink-600);
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.auth-mode-tabs button.is-active,
.auth-role-toggle button.is-active {
  color: var(--ink-900);
  background: #fff;
  box-shadow: 0 1px 8px rgba(17, 19, 24, 0.08);
}

.auth-email-form {
  display: grid;
  gap: 14px;
}

.auth-email-form .auth-field {
  display: grid;
  gap: 7px;
}

.auth-email-form .auth-field > span:first-child {
  color: var(--ink-600);
  font-size: 0.82rem;
  font-weight: 600;
}

.auth-input-shell {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 0 14px;
  background: #f7f9fc;
  border: 1px solid #e1e6ee;
  border-radius: var(--radius);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.auth-input-shell:focus-within {
  background: #fff;
  border-color: #aeb8c6;
  box-shadow: 0 0 0 3px rgba(82, 96, 113, 0.08);
}

.auth-field-icon,
.auth-field-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.auth-field-icon {
  color: var(--ink-500);
}

.auth-field-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-input-shell input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  color: var(--ink-900);
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.auth-input-shell input:focus {
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--ink-500);
  font-size: 0.82rem;
  font-weight: 600;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--ink-200);
}

.auth-provider-grid {
  display: grid;
  gap: 9px;
}

.auth-provider-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  color: var(--ink-900);
  font-weight: 600;
  text-align: left;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}

.auth-provider-button:hover,
.auth-provider-button:focus-visible {
  border-color: rgba(49, 87, 255, 0.28);
  box-shadow: 0 8px 20px rgba(17, 19, 24, 0.07);
  outline: none;
}

.provider-icon,
.provider-icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.vk-auth-button .provider-icon {
  color: #0077ff;
}

.auth-modal-note {
  margin: 0;
  color: var(--ink-500);
  font-size: 0.86rem;
}

.auth-menu-panel a:hover,
.auth-menu-panel a:focus-visible,
.auth-menu-panel button:hover,
.auth-menu-panel button:focus-visible {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
  outline: none;
}

.notification-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: var(--radius-sm);
}

.notification-button::before {
  display: none;
}

.notification-button::after {
  display: none;
}

.bell-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  background: var(--rose);
  border: 2px solid rgba(17, 19, 24, 0.72);
  border-radius: 99px;
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 4px 12px 4px 5px;
  color: #fff;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
}

.user-chip img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
}

.primary-button,
.ghost-button,
.icon-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.primary-button {
  padding: 0 18px;
  color: #fff;
  font-weight: 600;
  background: var(--cobalt);
  border: 0;
  box-shadow: 0 12px 30px rgba(49, 87, 255, 0.26);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--cobalt-700);
  transform: translateY(-1px);
  outline: none;
}

.ghost-button {
  padding: 0 15px;
  color: inherit;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
}

.ghost-button:hover,
.ghost-button:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}

.secondary-button {
  min-height: 42px;
  padding: 0 14px;
  color: var(--ink-900);
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--ink-200);
}

.secondary-button:hover,
.secondary-button:focus-visible {
  border-color: var(--cobalt);
  outline: none;
}

.wide-button {
  width: 100%;
}

.hero {
  position: relative;
  min-height: 720px;
  padding: 104px 0 26px;
  overflow: hidden;
  color: #fff;
  background: #12151a;
}

.hero-image,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-image {
  inset: 3% auto auto -10%;
  width: 112%;
  height: 112%;
  max-width: none;
  object-fit: cover;
  object-position: center 50%;
  transform: none;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(5, 8, 13, 0.88) 0%, rgba(5, 8, 13, 0.68) 38%, rgba(5, 8, 13, 0.16) 70%, rgba(5, 8, 13, 0.2) 100%),
    linear-gradient(180deg, rgba(5, 8, 13, 0.1) 0%, rgba(5, 8, 13, 0.18) 54%, rgba(5, 8, 13, 0.82) 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 780px);
  align-items: center;
  justify-content: start;
  gap: 32px;
  min-height: 580px;
}

.hero-copy {
  max-width: 720px;
}

.eyebrow,
.panel-kicker {
  margin: 0 0 10px;
  color: var(--cobalt);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #aebcff;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: 0;
}

h1 {
  margin-bottom: 18px;
  font-size: clamp(2.45rem, 4.2vw, 4.15rem);
  line-height: 0.96;
}

.hero h1 {
  white-space: nowrap;
}

h2 {
  margin-bottom: 14px;
  color: var(--ink-900);
  font-size: clamp(1.9rem, 2.7vw, 3.1rem);
  line-height: 1.05;
}

h3 {
  margin-bottom: 8px;
  color: var(--ink-900);
  font-size: 1.12rem;
  line-height: 1.2;
}

.hero-lead {
  max-width: 620px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.2rem;
}

.hero-typing-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  min-height: 34px;
}

.hero-typing-label {
  color: rgba(255, 255, 255, 0.82);
}

.hero-typing-dynamic {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  min-width: 245px;
  min-height: 30px;
  line-height: 30px;
}

.hero-typing-value {
  display: inline-block;
  min-height: 30px;
  line-height: 30px;
  color: #fff;
  font-weight: 600;
}

.hero-typing-caret {
  align-self: center;
  flex: 0 0 2px;
  width: 2px;
  height: 20px;
  background: #fff;
  border-radius: 99px;
  animation: typingCaret 720ms steps(1) infinite;
}

@keyframes typingCaret {
  50% {
    opacity: 0;
  }
}

.hero-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  width: min(640px, 100%);
  padding: 6px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.hero-search input,
.search-field input,
select,
textarea,
input[type="text"],
input[type="search"] {
  width: 100%;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.hero-search input {
  min-height: 48px;
  padding: 0 15px;
  color: var(--ink-900);
  border: 0;
  background: transparent;
}

.hero-search input:focus {
  outline: none;
  box-shadow: none;
}

.search-icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  min-width: 46px;
  height: 46px;
  color: #fff;
  background: var(--cobalt);
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 24px rgba(49, 87, 255, 0.24);
}

.search-icon-button::before,
.search-icon-button::after {
  content: "";
  position: absolute;
}

.search-icon-button::before {
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translate(-2px, -2px);
}

.search-icon-button::after {
  width: 9px;
  height: 2px;
  background: currentColor;
  border-radius: 99px;
  transform: translate(8px, 8px) rotate(45deg);
}

.hero-metrics {
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-metrics div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  width: 220px;
  min-height: 78px;
  padding: 15px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
}

.metric-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  grid-row: 1 / 3;
  margin-bottom: 0;
  color: #fff;
  font-weight: 600;
  border-radius: 50%;
}

.metric-icon::before,
.metric-icon::after {
  content: "";
  position: absolute;
}

.metric-check::before {
  width: 13px;
  height: 7px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translateY(-1px) rotate(-45deg);
}

.metric-time::before {
  inset: 8px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.metric-time::after {
  width: 8px;
  height: 8px;
  border-left: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: translate(2px, -2px) rotate(-45deg);
}

.metric-edit::before {
  width: 14px;
  height: 4px;
  background: currentColor;
  border-radius: 99px;
  transform: rotate(-32deg);
}

.metric-edit::after {
  width: 13px;
  height: 9px;
  border-bottom: 3px solid currentColor;
  border-left: 3px solid currentColor;
  transform: translate(-1px, 4px);
}

.metric-blue {
  background: var(--cobalt);
}

.metric-mint {
  background: var(--mint);
}

.metric-amber {
  background: var(--amber);
}

.hero-metrics strong,
.summary-row strong,
.brief-row strong {
  display: block;
}

.hero-metrics strong {
  color: #fff;
  font-size: 1.32rem;
  line-height: 1;
}

.hero-metrics span {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
}

.hero-metrics .metric-icon {
  display: grid;
  margin-top: 0;
  font-size: inherit;
}

.quick-order-panel,
.invoice-panel,
.selected-panel,
.script-workbench,
.workspace-shell,
.admin-panel {
  background: var(--surface);
  border: 1px solid rgba(223, 229, 238, 0.94);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.quick-order-panel {
  color: var(--ink-900);
  padding: 20px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
}

.panel-topline {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-topline h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.35rem;
}

.status-pill,
.tag,
.queue-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  color: var(--ink-700);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-muted);
  border-radius: 999px;
}

.status-pill {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
}

.field-label,
.control-label {
  display: block;
  margin: 12px 0 7px;
  color: var(--ink-700);
  font-size: 0.86rem;
  font-weight: 600;
}

.control-label {
  margin-top: 0;
}

textarea,
input[type="text"],
input[type="search"],
select {
  color: var(--ink-900);
  min-height: 44px;
  padding: 12px 13px;
}

textarea {
  resize: vertical;
}

textarea:focus,
input:focus,
select:focus {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 4px rgba(49, 87, 255, 0.1);
  outline: none;
}

.quick-order-form input,
.quick-order-form select,
.quick-order-form textarea {
  background: #f8fafc;
  border-color: transparent;
}

.quick-order-form input:focus,
.quick-order-form select:focus,
.quick-order-form textarea:focus {
  background: #fff;
  border-color: var(--ink-300);
  box-shadow: 0 0 0 3px rgba(184, 192, 204, 0.24);
}

.timing-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 10px;
  margin: 12px 0 10px;
}

.compact-control {
  width: 100%;
}

.compact-control button {
  padding: 0 7px;
  font-size: 0.74rem;
}

.quick-order-panel select,
.quick-order-panel textarea,
.quick-order-panel .segmented-control {
  min-width: 0;
}

.order-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 14px;
}

.order-meta span {
  min-width: 0;
  padding: 9px 9px;
  overflow: hidden;
  color: var(--ink-600);
  font-size: 0.76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
}

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

.check-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 12px;
  color: var(--ink-700);
  font-weight: 600;
  line-height: 1.14;
  background: var(--surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.check-card span {
  min-width: 0;
}

.check-card:has(input:checked) {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
  border-color: rgba(49, 87, 255, 0.28);
}

.summary-row {
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  margin-top: 4px;
  border-top: 1px solid var(--ink-200);
}

.summary-row strong {
  font-size: 1.45rem;
}

.section {
  padding: 84px 0;
}

.section-heading {
  max-width: 790px;
  margin-bottom: 28px;
}

.catalog-heading {
  position: relative;
  max-width: none;
  padding-right: 180px;
}

.catalog-more-link {
  position: absolute;
  right: 0;
  bottom: 6px;
}

.section-heading p:not(.eyebrow) {
  color: var(--ink-600);
  font-size: 1.05rem;
}

.section-heading.compact {
  margin-bottom: 18px;
}

.catalog-section {
  background: var(--surface);
}

.catalog-main .catalog-section {
  padding-top: 132px;
}

.catalog-controls {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.search-field {
  flex: 1 1 280px;
}

.catalog-controls select {
  min-width: 170px;
}

.segmented-control {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  padding: 4px;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

.segmented-control button,
.role-tabs button {
  min-height: 38px;
  padding: 0 13px;
  color: var(--ink-600);
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.segmented-control button.is-active,
.role-tabs button.is-active {
  color: var(--ink-900);
  background: var(--surface);
  box-shadow: 0 1px 6px rgba(17, 19, 24, 0.08);
}

.catalog-layout {
  display: block;
}

.selected-panel {
  position: sticky;
  top: 104px;
  padding: 20px;
}

.empty-selection {
  color: var(--ink-600);
}

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

.voice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 348px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  transition: transform 160ms ease, box-shadow 160ms ease, border 160ms ease;
}

.voice-card:hover {
  border-color: rgba(49, 87, 255, 0.34);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.voice-card.is-selected {
  color: #fff;
  background: linear-gradient(145deg, var(--cobalt), #1431a8);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 18px 42px rgba(49, 87, 255, 0.28);
}

.voice-card.is-selected .voice-name,
.voice-card.is-selected .voice-role,
.voice-card.is-selected .voice-specs span,
.voice-card.is-selected .voice-specs strong,
.voice-card.is-selected .voice-specs small,
.voice-card.is-selected .player-meta,
.voice-card.is-selected .player-meta strong {
  color: #fff;
}

.voice-card.is-selected .tag,
.voice-card.is-selected .player {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.voice-card.is-selected .secondary-button {
  color: var(--cobalt-700);
  background: #fff;
  border-color: #fff;
}

.voice-head {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  min-height: 72px;
  margin-bottom: 16px;
}

.voice-title {
  min-width: 0;
}

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  overflow: hidden;
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--avatar-a), var(--avatar-b));
}

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

.voice-presence {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(17, 19, 24, 0.2);
}

.profile-avatar .voice-presence {
  right: 9px;
  bottom: 9px;
  width: 16px;
  height: 16px;
}

.voice-presence.is-online {
  background: #1dbf73;
}

.voice-presence.is-offline {
  background: #e05872;
}

.voice-name {
  display: inline-block;
  max-width: 100%;
  margin: 0 0 7px;
  overflow: hidden;
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-role {
  margin: 0;
  min-height: 40px;
  max-height: 40px;
  overflow: hidden;
  color: var(--ink-600);
  font-size: 0.86rem;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.voice-rating-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 34px;
  padding: 0 10px;
  color: var(--ink-900);
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: 999px;
}

.voice-card.is-selected .voice-rating-pill {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
}

.voice-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
  margin: 0 0 14px;
}

.voice-specs div {
  display: grid;
  align-content: center;
  min-height: 62px;
  padding: 10px;
  background: #f8fafc;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.voice-specs span,
.metric-card span {
  color: var(--ink-600);
  font-size: 0.8rem;
}

.voice-specs strong,
.metric-card strong {
  display: flex;
  align-items: center;
  min-height: 25px;
  margin-top: 2px;
  color: var(--ink-900);
  font-size: 1.02rem;
  line-height: 1.12;
}

.voice-specs div:last-child strong {
  color: var(--cobalt-700);
  font-size: 1.22rem;
  font-weight: 600;
}

.rating-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rating-star {
  color: var(--amber) !important;
  font-size: 0.95em;
  text-shadow: 0 1px 0 rgba(17, 19, 24, 0.12);
}

.rate-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  white-space: nowrap;
}

.voice-specs .rate-value,
.voice-specs .rate-copy,
.voice-specs .rate-prefix,
.voice-specs .rate-amount,
.voice-specs .rate-currency {
  color: var(--cobalt-700);
  font-weight: 600;
}

.voice-specs .rate-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
  font-size: 1rem;
  line-height: 1;
}

.voice-specs .rate-prefix {
  font-size: 0.76rem;
}

.voice-specs .rate-amount {
  font-size: 1.2rem;
}

.voice-specs .rate-currency {
  position: relative;
  top: -0.02em;
  font-size: 1.03rem;
  line-height: 1;
}

.voice-specs small,
.admin-table small {
  display: block;
  color: var(--ink-500);
  font-size: 0.72rem;
  font-weight: 600;
}

.player {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  margin: auto 0 0;
  padding: 10px;
  background: #f8fafc;
  border-radius: var(--radius);
}

.voice-card.is-selected .voice-specs div {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.12);
}

.player-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: var(--cobalt);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(49, 87, 255, 0.22);
}

.player-button::before {
  content: "";
  width: 11px;
  height: 14px;
  margin-left: 3px;
  background: currentColor;
  border: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.player-button.is-playing::before {
  width: 12px;
  height: 14px;
  margin: 0;
  border: 0;
  background:
    linear-gradient(currentColor, currentColor) left / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right / 4px 100% no-repeat;
}

.voice-card.is-selected .player-button {
  color: var(--cobalt);
  background: #fff;
  box-shadow: none;
}

.player-body {
  min-width: 0;
}

.player-range {
  appearance: none;
  display: block;
  width: 100%;
  min-height: 18px;
  padding: 0;
  background: transparent;
  border: 0;
  accent-color: var(--cobalt);
  cursor: pointer;
}

.player-range:focus {
  outline: none;
  box-shadow: none;
}

.player-range::-webkit-slider-runnable-track {
  height: 4px;
  background: #dce4f0;
  border: 0;
  border-radius: 999px;
}

.player-range::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background: var(--cobalt);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.player-range::-moz-range-track {
  height: 4px;
  background: #dce4f0;
  border: 0;
  border-radius: 999px;
}

.player-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--cobalt);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.voice-card.is-selected .player-range {
  accent-color: #fff;
}

.voice-card.is-selected .player-range::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.28);
}

.voice-card.is-selected .player-range::-webkit-slider-thumb {
  background: #fff;
}

.voice-card.is-selected .player-range::-moz-range-track {
  background: rgba(255, 255, 255, 0.28);
}

.voice-card.is-selected .player-range::-moz-range-thumb {
  background: #fff;
}

.player-meta {
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-600);
  font-size: 0.72rem;
}

.player-meta strong {
  color: var(--ink-800);
}

.download-demo-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--cobalt);
  font-size: 0;
  font-weight: 600;
  background: linear-gradient(currentColor, currentColor) center 22px / 16px 2px no-repeat;
  border: 0;
  border-radius: var(--radius-sm);
}

.voice-card.is-selected .download-demo-button {
  color: #fff;
}

.download-demo-button::before,
.download-demo-button::after {
  content: "";
  position: absolute;
}

.download-demo-button::before {
  top: 5px;
  left: 50%;
  width: 2px;
  height: 13px;
  background: currentColor;
  border-radius: 999px;
  transform: translateX(-50%);
}

.download-demo-button::after {
  top: 11px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 62px;
}

.voice-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}

.modal-open {
  overflow: hidden;
}

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

.order-modal {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.order-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 16, 0.58);
  backdrop-filter: blur(8px);
}

.order-modal-panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  color: var(--ink-600);
  font-size: 1.35rem;
  line-height: 1;
  background: var(--surface-muted);
  border: 0;
  border-radius: var(--radius-sm);
}

.modal-voice-summary {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin: 16px 0;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

.modal-voice-summary span {
  display: block;
  color: var(--ink-600);
}

.modal-estimate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.modal-estimate-grid div {
  padding: 14px;
  background: var(--surface-muted);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}

.modal-estimate-grid span {
  display: block;
  color: var(--ink-600);
  font-size: 0.8rem;
  font-weight: 600;
}

.modal-estimate-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 1.18rem;
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick-order-form {
  display: grid;
  gap: 14px;
}

.quick-order-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 12px;
}

.quick-order-fields label,
.quick-order-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.quick-order-fields label > span,
.quick-order-form label > span {
  color: var(--ink-600);
  font-size: 0.82rem;
  font-weight: 600;
}

.quick-order-form textarea {
  min-height: 132px;
  resize: vertical;
}

.quick-order-options {
  margin-bottom: 0;
}

.payment-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

.payment-preview strong,
.payment-preview span {
  display: block;
}

.payment-preview span {
  color: var(--ink-600);
  font-size: 0.9rem;
}

.qr-placeholder {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
  width: 72px;
  height: 72px;
  padding: 9px;
  background:
    linear-gradient(90deg, #111318 8px, transparent 8px) 0 0 / 18px 18px,
    linear-gradient(#111318 8px, transparent 8px) 0 0 / 18px 18px,
    #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}

.qr-placeholder span {
  background: var(--ink-900);
  border-radius: 2px;
}

.calculator-section {
  background: linear-gradient(180deg, var(--paper), #eef2f7);
}

.calculator-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 22px;
  align-items: start;
}

.script-workbench,
.invoice-panel {
  padding: 24px;
}

.chronometer-page {
  background: var(--paper);
}

.chronometer-main {
  padding-top: 28px;
}

.chronometer-section {
  padding-top: 118px;
}

.chronometer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}

.chronometer-result-panel {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 14px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.chronometer-result-panel h2 {
  margin-bottom: 0;
  font-size: 1.55rem;
}

.chronometer-estimate {
  margin-bottom: 0;
}

.chronometer-controls {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.builder-steps {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.builder-steps span {
  min-height: 36px;
  padding: 8px 13px;
  color: var(--ink-600);
  font-weight: 600;
  background: var(--surface-muted);
  border-radius: 999px;
}

.builder-steps span.is-active {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
}

.script-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
}

.brief-block {
  display: grid;
  gap: 10px;
  align-content: start;
}

.brief-row,
.invoice-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px;
  background: var(--surface-muted);
  border-radius: var(--radius-sm);
}

.brief-row span,
.invoice-line span {
  color: var(--ink-600);
}

.invoice-lines {
  display: grid;
  gap: 10px;
}

.summary-row.final {
  margin-top: 18px;
  padding-top: 18px;
}

.accounts-section {
  background: var(--surface);
}

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

.account-card {
  display: grid;
  gap: 10px;
  min-height: 148px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.account-card span {
  color: var(--cobalt);
  font-weight: 600;
}

.account-card strong {
  color: var(--ink-900);
  font-size: 1.12rem;
  line-height: 1.25;
}

.account-card:hover,
.account-card:focus-visible {
  border-color: rgba(49, 87, 255, 0.4);
  outline: none;
  transform: translateY(-2px);
}

.workspace-shell {
  overflow: hidden;
}

.workspace-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 24px;
  background: var(--ink-900);
  color: #fff;
}

.workspace-header h3 {
  color: #fff;
}

.workspace-header p {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.permission-list span {
  padding: 7px 10px;
  color: #dfe7ff;
  font-size: 0.82rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.workspace-body {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
}

.metrics-stack {
  display: grid;
  gap: 12px;
  padding: 20px;
  background: var(--surface-muted);
  border-right: 1px solid var(--ink-200);
}

.metric-card {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

.metric-card strong {
  font-size: 1.35rem;
}

.queue-panel {
  min-width: 0;
  padding: 20px;
}

.role-console-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 20px 20px;
}

.role-console-card {
  display: grid;
  gap: 7px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

.role-console-card strong {
  color: var(--ink-900);
}

.role-console-card span {
  color: var(--ink-600);
  font-size: 0.9rem;
}

.queue-table,
.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.queue-table {
  min-width: 680px;
}

.queue-table th,
.queue-table td,
.admin-table th,
.admin-table td {
  padding: 13px 10px;
  text-align: left;
  border-bottom: 1px solid var(--ink-200);
}

.queue-table th,
.admin-table th {
  color: var(--ink-600);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.queue-table td,
.admin-table td {
  color: var(--ink-800);
  vertical-align: middle;
}

.queue-table td:last-child {
  width: 1%;
  white-space: nowrap;
}

.admin-table td span {
  display: block;
  color: var(--ink-500);
  font-size: 0.78rem;
}

.queue-status.is-ok {
  color: #087454;
  background: var(--mint-100);
}

.queue-status.is-warn {
  color: #8b5600;
  background: var(--amber-100);
}

.queue-status.is-danger {
  color: #aa2944;
  background: var(--rose-100);
}

.admin-page {
  background: #eef2f7;
}

.admin-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  min-height: 100vh;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100vh;
  padding: 22px;
  color: #fff;
  background: var(--ink-950);
}

.admin-brand {
  color: #fff;
}

.admin-brand .brand-logo-image {
  width: 190px;
  max-height: 46px;
}

.admin-menu {
  display: grid;
  gap: 6px;
}

.admin-menu a {
  padding: 11px 12px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

.admin-menu a:hover,
.admin-menu a:focus-visible,
.admin-menu a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.admin-note {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
}

.admin-note span {
  color: #aebcff;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
}

.admin-note strong {
  font-size: 0.9rem;
}

.admin-main {
  min-width: 0;
  padding: 28px;
}

.admin-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.admin-topbar h1 {
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
}

.admin-section {
  margin-bottom: 24px;
  min-width: 0;
}

.admin-section-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  min-width: 0;
}

.admin-section-head > div {
  min-width: 0;
}

.admin-section-head h2 {
  margin-bottom: 0;
  font-size: clamp(1.45rem, 2.2vw, 2.15rem);
  overflow-wrap: anywhere;
}

.compact-head {
  align-items: flex-start;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-stat,
.entity-card,
.settings-grid article,
.kanban-list article {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.admin-stat {
  display: grid;
  gap: 6px;
  padding: 18px;
}

.admin-stat span,
.admin-stat small,
.settings-grid span,
.kanban-list small {
  color: var(--ink-600);
}

.admin-stat strong {
  font-size: 1.45rem;
}

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

.entity-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 214px;
  padding: 18px;
}

.entity-card h3 {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}

.entity-index {
  color: var(--cobalt);
  font-size: 0.86rem;
}

.entity-card p {
  margin: 0;
  color: var(--ink-600);
}

.entity-caption {
  color: var(--ink-900) !important;
  font-weight: 600;
}

.entity-card ul {
  padding-left: 18px;
  margin: 0;
  color: var(--ink-700);
}

.admin-grid-two {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: 18px;
  min-width: 0;
}

.admin-panel {
  min-width: 0;
  padding: 20px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  min-width: 620px;
}

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

.kanban-list article {
  display: grid;
  gap: 7px;
  padding: 14px;
}

.kanban-list strong {
  line-height: 1.25;
}

.role-tabs {
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  width: fit-content;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

.admin-role-tabs {
  margin: 0;
}

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

.settings-grid article {
  display: grid;
  gap: 8px;
  padding: 18px;
}

.is-editable [contenteditable="true"],
.entity-edit-mode [data-editable] {
  outline: 2px dashed rgba(49, 87, 255, 0.32);
  outline-offset: 3px;
  border-radius: 4px;
}

.profile-header {
  color: #fff;
}

.voice-profile-page {
  background: var(--paper);
}

.profile-main {
  padding: 122px 0 80px;
}

.voice-profile-hero {
  margin-bottom: 22px;
}

.profile-hero-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 218px;
  gap: 22px;
  align-items: center;
  padding: 24px;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.profile-hero-card h1 {
  margin-bottom: 8px;
  font-size: clamp(2rem, 3.5vw, 3.1rem);
}

.profile-hero-card p:not(.eyebrow) {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--ink-600);
}

.profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  overflow: hidden;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 600;
  background: var(--surface-muted);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

.profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.profile-order-box {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: var(--surface-muted);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

.profile-order-box span {
  color: var(--ink-600);
  font-weight: 600;
}

.profile-order-box strong {
  font-size: 1.45rem;
}

.profile-column {
  display: grid;
  gap: 18px;
}

.profile-panel,
.profile-aside {
  min-width: 0;
}

.profile-panel {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.profile-panel h2,
.cabinet-form h2,
.notification-panel h2 {
  font-size: clamp(1.35rem, 1.6vw, 1.9rem);
  line-height: 1.12;
}

.sticky-profile-panel {
  position: sticky;
  top: 104px;
  display: grid;
  gap: 14px;
}

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

.equipment-grid span,
.availability-list button,
.week-calendar button {
  padding: 12px;
  color: var(--ink-800);
  font-weight: 600;
  background: var(--surface-muted);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}

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

.availability-list button {
  text-align: left;
}

.availability-list button.is-active {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
  border-color: rgba(49, 87, 255, 0.22);
}

.week-calendar {
  display: grid;
  gap: 8px;
}

.week-calendar button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  text-align: left;
}

.week-calendar button span,
.week-calendar button small {
  color: var(--ink-600);
}

.week-calendar button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.week-calendar button.is-active {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
  border-color: rgba(49, 87, 255, 0.22);
}

.week-calendar button.is-busy {
  color: #8b5600;
  background: var(--amber-100);
  border-color: rgba(246, 166, 35, 0.32);
}

.week-calendar button.is-off {
  color: var(--ink-500);
  background: #f8fafc;
}

.availability-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(86px, 1fr));
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}

.availability-calendar button {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 5px;
  min-width: 0;
  min-height: 112px;
  padding: 10px;
  overflow: hidden;
  text-align: left;
  color: var(--ink-800);
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}

.availability-calendar button span,
.availability-calendar button small {
  color: var(--ink-600);
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-calendar button strong {
  color: var(--ink-900);
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-calendar button em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink-900);
  overflow: hidden;
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.availability-calendar button.is-active {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
  border-color: rgba(49, 87, 255, 0.24);
}

.availability-calendar button.is-busy {
  color: #8b5600;
  background: var(--amber-100);
  border-color: rgba(246, 166, 35, 0.32);
}

.availability-calendar button.is-off {
  color: var(--ink-500);
  background: #f8fafc;
}

.profile-fact-list {
  display: grid;
  gap: 8px;
}

.profile-fact-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--ink-200);
}

.profile-fact-list span {
  color: var(--ink-600);
  font-weight: 600;
}

.profile-fact-list strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

.review-summary span {
  color: var(--ink-600);
}

.review-form {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-top: 12px;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

.review-form > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.review-form label {
  display: grid;
  gap: 6px;
}

.review-form label span {
  color: var(--ink-600);
  font-size: 0.82rem;
  font-weight: 600;
}

.voice-profile-page .voice-card.is-selected {
  color: var(--ink-900);
  background: var(--surface);
  border-color: var(--ink-200);
  box-shadow: none;
}

.chronometer-timing-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.voice-profile-page .voice-card.is-selected .voice-name,
.voice-profile-page .voice-card.is-selected .voice-role,
.voice-profile-page .voice-card.is-selected .voice-specs span,
.voice-profile-page .voice-card.is-selected .voice-specs strong,
.voice-profile-page .voice-card.is-selected .voice-specs small,
.voice-profile-page .voice-card.is-selected .player-meta,
.voice-profile-page .voice-card.is-selected .player-meta strong {
  color: inherit;
}

.voice-profile-page .voice-card.is-selected .voice-role,
.voice-profile-page .voice-card.is-selected .voice-specs span,
.voice-profile-page .voice-card.is-selected .voice-specs small,
.voice-profile-page .voice-card.is-selected .player-meta {
  color: var(--ink-600);
}

.voice-profile-page .voice-card.is-selected .tag,
.voice-profile-page .voice-card.is-selected .player {
  color: var(--ink-900);
  background: #f8fafc;
}

.voice-profile-page .voice-card.is-selected .voice-specs div {
  background: #f8fafc;
  border-color: transparent;
}

.voice-profile-page .voice-card.is-selected .voice-rating-pill {
  color: var(--ink-900);
  background: #f8fafc;
  border-color: transparent;
}

.voice-profile-page .voice-card.is-selected .player-button {
  color: #fff;
  background: var(--cobalt);
}

.voice-profile-page .voice-card.is-selected .download-demo-button {
  color: var(--cobalt);
  background: linear-gradient(currentColor, currentColor) center 22px / 16px 2px no-repeat;
  border-color: var(--ink-200);
}

.profile-demo-panel .voice-card {
  min-height: 238px;
  box-shadow: none;
}

.profile-demo-panel .voice-specs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-demo-panel .voice-specs div {
  min-height: 56px;
}

.profile-price {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: var(--surface-muted);
  border-radius: var(--radius);
}

.profile-price span,
.profile-price small {
  color: var(--ink-600);
}

.profile-price strong {
  font-size: 1.6rem;
}

.account-profile-page {
  background: var(--paper);
}

.account-profile-main {
  padding: 126px 0 84px;
}

.auth-state-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  margin-bottom: 16px;
  color: var(--ink-800);
  background: #eef6ff;
  border: 1px solid rgba(0, 119, 255, 0.18);
  border-radius: var(--radius);
}

.auth-state-banner strong {
  color: #0077ff;
}

.auth-state-banner span {
  min-width: 0;
  color: var(--ink-600);
}

.cabinet-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.cabinet-person,
.cabinet-stat-grid article {
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.cabinet-person {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 22px;
}

.cabinet-person img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
}

.cabinet-person h1 {
  margin-bottom: 8px;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.05;
}

.cabinet-person p:not(.eyebrow) {
  max-width: 720px;
  color: var(--ink-600);
}

.cabinet-person strong,
.cabinet-person span {
  display: block;
}

.cabinet-person span {
  color: var(--ink-600);
}

.cabinet-role-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.cabinet-role-switch a {
  min-height: 32px;
  padding: 6px 10px;
  color: var(--ink-600);
  font-size: 0.82rem;
  font-weight: 600;
  background: #f8fafc;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}

.cabinet-role-switch a.is-active {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
  border-color: rgba(49, 87, 255, 0.22);
}

.cabinet-stat-grid {
  display: grid;
  gap: 10px;
}

.cabinet-stat-grid article {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 82px;
  padding: 16px;
}

.cabinet-stat-grid span {
  color: var(--ink-600);
  font-weight: 600;
}

.cabinet-stat-grid strong {
  font-size: 1.55rem;
}

.cabinet-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  color: var(--ink-900);
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.cabinet-toolbar span {
  display: block;
  color: var(--ink-600);
  font-size: 0.82rem;
  font-weight: 600;
}

.cabinet-toolbar strong {
  font-size: 1.08rem;
}

.cabinet-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cabinet-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.cabinet-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  color: var(--ink-600);
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
}

.cabinet-tabs button.is-active {
  color: var(--ink-900);
  background: #f8fafc;
}

.cabinet-view[hidden] {
  display: none;
}

.cabinet-view.is-active {
  animation: cabinetViewIn 160ms ease-out;
}

@keyframes cabinetViewIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.cabinet-order-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: #f8fafc;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

.cabinet-order-head,
.cabinet-order-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cabinet-order-head > div {
  min-width: 0;
}

.cabinet-order-head span,
.cabinet-order-card p,
.cabinet-order-foot small {
  color: var(--ink-600);
}

.cabinet-order-head strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-900);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabinet-order-card p {
  min-height: 42px;
  margin: 0;
  font-size: 0.9rem;
}

.cabinet-order-progress {
  height: 7px;
  overflow: hidden;
  background: #e4e9f0;
  border-radius: 999px;
}

.cabinet-order-progress span {
  display: block;
  height: 100%;
  background: var(--cobalt);
  border-radius: inherit;
}

.cabinet-finance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.cabinet-finance-grid article {
  display: grid;
  gap: 5px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.cabinet-finance-grid span {
  color: var(--ink-600);
  font-weight: 600;
}

.cabinet-finance-grid strong {
  font-size: 1.45rem;
}

.finance-table td:first-child small {
  display: block;
  margin-top: 3px;
  color: var(--ink-500);
}

.tab-icon {
  position: relative;
  width: 16px;
  height: 16px;
  color: currentColor;
}

.tab-icon::before,
.tab-icon::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.icon-orders::after {
  inset: 6px 3px auto 3px;
  height: 0;
  border-width: 2px 0 0;
  border-radius: 0;
}

.icon-profile::before {
  inset: 2px 5px 8px;
  border-radius: 50%;
}

.icon-profile::after {
  inset: auto 2px 2px;
  height: 6px;
  border-radius: 999px 999px 4px 4px;
}

.icon-finance::before {
  inset: 3px 2px;
  border-radius: 50%;
}

.icon-finance::after {
  inset: 7px 4px;
  border-width: 2px 0 0;
  border-radius: 0;
}

.cabinet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 20px;
  align-items: start;
}

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

.notification-panel,
.cabinet-form {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

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

.notification-list div {
  display: grid;
  gap: 3px;
  padding: 11px;
  background: var(--surface-muted);
  border-left: 3px solid var(--cobalt);
  border-radius: var(--radius-sm);
}

.notification-list span {
  color: var(--ink-600);
  font-size: 0.9rem;
}

.cabinet-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.cabinet-form {
  display: grid;
  gap: 12px;
}

.cabinet-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cabinet-form label span {
  color: var(--ink-600);
  font-size: 0.82rem;
  font-weight: 600;
}

.cabinet-form input,
.cabinet-form textarea,
.cabinet-form select {
  min-width: 0;
  max-width: 100%;
}

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

.review-card {
  margin: 0;
  padding: 16px;
  color: var(--ink-700);
  background: var(--surface-muted);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}

.review-card p {
  margin: 10px 0 0;
}

.review-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.review-card-head strong {
  color: var(--ink-900);
}

.review-card-head time {
  color: var(--ink-500);
  font-size: 0.82rem;
  font-weight: 600;
}

.site-footer {
  padding: 34px 0;
  color: rgba(255, 255, 255, 0.72);
  background: var(--ink-900);
}

.footer-grid {
  justify-content: space-between;
  gap: 18px;
}

.footer-grid p {
  margin: 8px 0 0;
}

.footer-grid a:hover,
.footer-grid a:focus-visible {
  color: #fff;
  outline: none;
}

.footer-brand {
  color: #fff;
}

.toast {
  position: fixed;
  z-index: 40;
  right: 24px;
  bottom: 24px;
  max-width: 360px;
  padding: 14px 16px;
  color: #fff;
  font-weight: 600;
  background: var(--ink-900);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.style-page {
  background: var(--paper);
}

.style-hero {
  padding: 116px 0 40px;
  color: #fff;
  background: var(--ink-900);
}

.style-hero h1 {
  font-size: clamp(3rem, 7vw, 6rem);
}

.token-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

.token-table thead,
.token-table tbody {
  display: table;
  width: 100%;
  min-width: 620px;
}

.token-table th,
.token-table td {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid var(--ink-200);
}

.swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.swatch::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--swatch);
  border: 1px solid rgba(17, 19, 24, 0.12);
  border-radius: var(--radius-sm);
}

.component-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
}

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

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .cabinet-hero,
  .cabinet-layout,
  .cabinet-form-grid {
    grid-template-columns: 1fr;
  }

  .cabinet-order-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .availability-calendar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sticky-profile-panel {
    position: static;
  }

  .admin-stat-grid,
  .account-grid,
  .role-console-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .site-header {
    grid-template-columns: auto auto;
  }

  .nav-links {
    display: none;
  }

  .header-actions {
    justify-content: flex-end;
  }

  .hero-grid,
  .calculator-grid,
  .catalog-layout,
  .workspace-body,
  .admin-grid-two {
    grid-template-columns: 1fr;
  }

  .selected-panel {
    position: static;
  }

  .metrics-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--ink-200);
  }

  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }

  .admin-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 740px) {
  .page-grid,
  .site-header {
    width: min(100% - 28px, var(--container));
  }

  .site-header {
    top: 10px;
    gap: 10px;
    padding: 8px;
  }

  .header-actions .ghost-button {
    display: none;
  }

  .hero {
    min-height: 0;
    padding: 86px 0 4px;
  }

  .hero-grid {
    min-height: 0;
    gap: 24px;
  }

  h1 {
    font-size: 2.35rem;
  }

  .hero h1 {
    white-space: nowrap;
  }

  h2 {
    font-size: 1.85rem;
  }

  .catalog-heading {
    padding-right: 0;
  }

  .catalog-more-link {
    position: static;
    width: fit-content;
    margin-top: 12px;
  }

  .hero-lead,
  .hero-search,
  .hero-metrics {
    display: none;
  }

  .timing-controls,
  .script-grid,
  .workspace-header,
  .admin-topbar,
  .admin-section-head {
    grid-template-columns: 1fr;
  }

  .admin-topbar,
  .admin-section-head {
    display: grid;
  }

  .quick-order-panel,
  .script-workbench,
  .invoice-panel {
    padding: 16px;
  }

  .quick-order-panel textarea {
    min-height: 86px;
    max-height: 86px;
  }

  .quick-order-panel .timing-controls {
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 7px;
  }

  .quick-order-panel .control-label {
    margin-bottom: 4px;
    font-size: 0.74rem;
  }

  .quick-order-panel select {
    min-width: 0;
    padding-inline: 8px;
    font-size: 0.78rem;
  }

  .quick-order-panel .panel-topline {
    margin-bottom: 10px;
  }

  .quick-order-panel .summary-row {
    padding: 10px 0;
  }

  .quick-order-panel .summary-row strong {
    font-size: 1.22rem;
  }

  .quick-order-panel .option-grid {
    gap: 7px;
  }

  .quick-order-panel .check-card {
    min-height: 38px;
    padding: 0 8px;
    font-size: 0.8rem;
  }

  .order-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .order-meta span {
    padding: 7px 6px;
    font-size: 0.72rem;
  }

  .voice-grid,
  .entity-grid,
  .metrics-stack,
  .account-grid,
  .admin-stat-grid,
  .settings-grid,
  .role-console-grid,
  .equipment-grid {
    grid-template-columns: 1fr;
  }

  .cabinet-order-list,
  .cabinet-finance-grid {
    grid-template-columns: 1fr;
  }

  .cabinet-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-actions,
  .modal-estimate-grid {
    grid-template-columns: 1fr;
  }

  .profile-main {
    padding-top: 92px;
  }

  .profile-hero-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .cabinet-person {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .cabinet-toolbar {
    display: grid;
  }

  .availability-calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-avatar {
    width: 92px;
    height: 92px;
    font-size: 1.8rem;
  }

  .catalog-controls select,
  .segmented-control,
  .role-tabs {
    width: 100%;
  }

  .segmented-control {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compact-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .compact-control button {
    min-height: 34px;
    min-width: 0;
    padding: 0 4px;
    font-size: 0.68rem;
  }

  .role-tabs button {
    flex: 1 1 160px;
  }

  .queue-panel {
    overflow-x: auto;
  }

  .queue-table {
    min-width: 640px;
  }

  .admin-main {
    padding: 18px 14px;
  }

  .admin-sidebar {
    padding: 18px 14px;
  }

  .admin-menu {
    grid-template-columns: 1fr 1fr;
  }

  .admin-actions {
    flex-wrap: wrap;
  }

  .footer-grid {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Figma-aligned role dashboard */
.account-profile-page {
  min-width: 320px;
  background: #f4f7fb;
}

.account-profile-main {
  padding: 112px 0 64px;
}

.account-profile-main > .page-grid {
  width: min(100% - 48px, var(--container));
}

.dashboard-shell {
  position: relative;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 760px;
  overflow: clip;
  background: #f4f7fb;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  box-shadow: 0 18px 54px rgba(22, 34, 53, 0.08);
}

.dashboard-sidebar {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 16px;
  background: #fff;
  border-right: 1px solid #e3e8f0;
}

.dashboard-sidebar-profile,
.dashboard-profile-person,
.dashboard-profile-actions,
.dashboard-head-actions,
.dashboard-section-head,
.dashboard-order-head,
.dashboard-order-foot,
.dashboard-history-row,
.dashboard-sidebar-foot,
.dashboard-notification-item,
.dashboard-time-row {
  display: flex;
  align-items: center;
}

.dashboard-sidebar-profile {
  gap: 11px;
  padding: 0 7px 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e3e8f0;
}

.dashboard-sidebar-profile > div,
.dashboard-profile-person > div,
.dashboard-history-row > div,
.dashboard-chat-list button span,
.dashboard-notification-item > div {
  min-width: 0;
}

.dashboard-sidebar-profile strong,
.dashboard-sidebar-profile span,
.dashboard-profile-person h2,
.dashboard-profile-person p {
  display: block;
  margin: 0;
}

.dashboard-sidebar-profile strong {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-sidebar-profile div > span {
  margin-top: 3px;
  color: #778398;
  font-size: 0.76rem;
}

.dashboard-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
}

.dashboard-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #d7e4fb;
  border-radius: 50%;
}

.dashboard-avatar-wrap i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
  background: #31c56a;
  border: 2px solid #fff;
  border-radius: 50%;
}

.dashboard-avatar-wrap i.is-offline {
  background: #e04747;
}

.dashboard-checklist button:disabled {
  cursor: default;
  opacity: 0.72;
}

.dashboard-avatar-wrap.is-large {
  width: 68px;
  height: 68px;
}

.dashboard-nav {
  display: grid;
  gap: 3px;
}

.dashboard-nav-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  color: #313947;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
}

.dashboard-nav-item:hover,
.dashboard-nav-item:focus-visible {
  color: #0b67f0;
  background: #f2f6fd;
  outline: none;
}

.dashboard-nav-item.is-active {
  color: #086cf0;
  background: #eaf2ff;
}

.dashboard-nav-item span {
  min-width: 0;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-nav-item b {
  min-width: 22px;
  padding: 2px 6px;
  color: #086cf0;
  font-size: 0.72rem;
  text-align: center;
  background: #fff;
  border: 1px solid #b8d3fb;
  border-radius: 6px;
}

.dashboard-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-sidebar-foot {
  align-items: stretch;
  flex-direction: column;
  gap: 14px;
  padding-top: 18px;
  margin-top: auto;
  border-top: 1px solid #e3e8f0;
}

.dashboard-role-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 10px;
  background: #f6f8fb;
  border-radius: 6px;
}

.dashboard-role-links > span {
  grid-column: 1 / -1;
  color: #778398;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dashboard-role-links a {
  padding: 7px 5px;
  color: #667186;
  font-size: 0.76rem;
  font-weight: 600;
  text-align: center;
  background: #fff;
  border: 1px solid #e0e6ef;
  border-radius: 5px;
}

.dashboard-role-links a.is-active {
  color: #086cf0;
  border-color: #a9caf8;
}

.dashboard-workspace {
  min-width: 0;
  padding: 26px;
}

.dashboard-workspace-head {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  margin-bottom: 20px;
}

.dashboard-workspace-head p,
.dashboard-workspace-head h1 {
  margin: 0;
}

.dashboard-workspace-head p {
  margin-bottom: 3px;
  color: #788398;
  font-size: 0.78rem;
  font-weight: 600;
}

.dashboard-workspace-head h1 {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.1;
}

.dashboard-head-actions {
  gap: 8px;
  flex: 0 0 auto;
}

.dashboard-head-actions .primary-button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.dashboard-head-actions .primary-button .dashboard-icon {
  width: 17px;
  height: 17px;
}

.dashboard-search-button,
.dashboard-bell-button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #4f5a6b;
  background: #fff;
  border: 1px solid #dce3ed;
  border-radius: 7px;
}

.dashboard-search-button:hover,
.dashboard-bell-button:hover {
  color: #086cf0;
  border-color: #9dc4fa;
}

.dashboard-bell-button .segment-bell-svg {
  width: 24px;
  height: 24px;
}

.dashboard-bell-button b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  color: #fff;
  font-size: 0.65rem;
  line-height: 18px;
  background: #e04747;
  border: 2px solid #f4f7fb;
  border-radius: 999px;
}

.dashboard-view {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.dashboard-view[hidden] {
  display: none;
}

.dashboard-view.is-active {
  animation: cabinetViewIn 150ms ease-out;
}

.dashboard-profile-card,
.dashboard-commission-card,
.dashboard-onboarding-card,
.dashboard-promo-card,
.dashboard-history-card,
.dashboard-order-card,
.dashboard-chat-layout,
.dashboard-review-card,
.dashboard-favorite-card,
.dashboard-form-card,
.dashboard-table-card,
.dashboard-chart-card,
.dashboard-schedule-editor,
.dashboard-finance-grid article {
  min-width: 0;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
}

.dashboard-profile-card {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  min-height: 112px;
  padding: 20px;
}

.dashboard-profile-person {
  gap: 16px;
}

.dashboard-profile-person h2 {
  font-size: 1.25rem;
}

.dashboard-profile-person p {
  margin-top: 5px;
  color: #7b8698;
  font-size: 0.88rem;
}

.dashboard-profile-actions {
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dashboard-client-status {
  padding: 8px 10px;
  color: #17783a;
  font-size: 0.78rem;
  font-weight: 600;
  background: #ebf8ef;
  border-radius: 5px;
}

.dashboard-online-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.dashboard-online-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dashboard-online-switch > span {
  position: relative;
  width: 42px;
  height: 24px;
  background: #b9c3d0;
  border-radius: 999px;
  transition: background 150ms ease;
}

.dashboard-online-switch > span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(21, 35, 56, 0.2);
  transition: transform 150ms ease;
}

.dashboard-online-switch input:checked + span {
  background: #0877f9;
}

.dashboard-online-switch input:checked + span::after {
  transform: translateX(18px);
}

.dashboard-online-switch b {
  color: #086cf0;
  font-size: 0.83rem;
}

.dashboard-commission-card {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 18px 20px;
}

.dashboard-commission-value {
  padding-right: 20px;
  border-right: 1px solid #e3e8f0;
}

.dashboard-commission-value strong {
  display: block;
  color: #0877f9;
  font-size: 2.7rem;
  line-height: 1;
}

.dashboard-commission-value button {
  padding: 6px 0 0;
  color: #4c5666;
  font-size: 0.76rem;
  text-decoration: underline;
  background: transparent;
  border: 0;
}

.dashboard-commission-card h2,
.dashboard-onboarding-card h2,
.dashboard-promo-card h2,
.dashboard-history-card h2,
.dashboard-section-head h2 {
  margin: 0;
  font-size: 1.17rem;
  line-height: 1.25;
}

.dashboard-commission-card h2 span {
  color: #0877f9;
}

.dashboard-commission-card p,
.dashboard-onboarding-card p,
.dashboard-promo-card p {
  margin: 6px 0 12px;
  color: #697488;
  font-size: 0.85rem;
}

.dashboard-level-track,
.dashboard-level-labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.dashboard-level-track i {
  height: 7px;
  background: #e7edf5;
  border-radius: 999px;
}

.dashboard-level-track i.is-current {
  background: #0877f9;
}

.dashboard-level-labels {
  margin-top: 5px;
  color: #4e596a;
  font-size: 0.7rem;
}

.dashboard-level-labels span:not(:first-child) {
  text-align: right;
}

.dashboard-onboarding-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: 24px;
  padding: 20px;
}

.dashboard-onboarding-card .eyebrow,
.dashboard-promo-card .eyebrow,
.dashboard-history-card .eyebrow,
.dashboard-section-head .eyebrow {
  margin: 0 0 4px;
  color: #0877f9;
  font-size: 0.7rem;
}

.dashboard-checklist {
  display: grid;
  gap: 8px;
}

.dashboard-checklist button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 38px;
  padding: 6px 9px;
  color: #293241;
  text-align: left;
  background: #f6f8fb;
  border: 1px solid transparent;
  border-radius: 6px;
}

.dashboard-checklist button:hover {
  border-color: #c1d8f8;
}

.dashboard-checklist button .dashboard-icon {
  width: 18px;
  color: #0877f9;
}

.dashboard-checklist button.is-done {
  color: #6d7889;
}

.dashboard-checklist button.is-done .dashboard-icon {
  color: #28b45b;
}

.dashboard-card-grid,
.dashboard-quick-grid,
.dashboard-finance-grid,
.dashboard-settings-grid,
.dashboard-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-balance-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  color: #fff;
  background: #0877f9;
  border-radius: 8px;
}

.dashboard-balance-card span,
.dashboard-balance-card strong {
  display: block;
}

.dashboard-balance-card > div span {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.83rem;
  font-weight: 600;
}

.dashboard-balance-card > div strong {
  margin-top: 5px;
  font-size: 1.9rem;
}

.dashboard-balance-card > button {
  min-height: 38px;
  color: #086cf0;
  font-weight: 600;
  background: #fff;
  border: 0;
  border-radius: 6px;
}

.dashboard-balance-card footer {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 28px;
  gap: 9px;
  align-items: center;
}

.dashboard-balance-card footer span {
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-balance-card footer > .dashboard-payment-caption {
  display: flex;
  min-width: 0;
  max-width: 100%;
  gap: 6px;
}

.dashboard-balance-card .dashboard-payment-caption > span {
  font: inherit;
}

.dashboard-balance-card .dashboard-payment-name {
  min-width: 0;
  flex: 1 1 auto;
}

.dashboard-balance-card .dashboard-payment-caption > .dashboard-payment-identifier {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
}

.dashboard-balance-card footer button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
}

.dashboard-balance-card footer .dashboard-icon {
  width: 19px;
}

.dashboard-promo-card {
  padding: 20px;
}

.dashboard-promo-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 16px;
}

.dashboard-promo-card input {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #cdd6e3;
  border-radius: 6px;
  outline: none;
}

.dashboard-promo-card input:focus {
  border-color: #7eaff3;
  box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.09);
}

.dashboard-promo-card small {
  display: block;
  margin-top: 12px;
  color: #17843c;
  font-size: 0.73rem;
}

.dashboard-quick-grid > button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  min-height: 92px;
  padding: 16px;
  color: #202a38;
  text-align: left;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
}

.dashboard-quick-grid > button:hover {
  border-color: #9fc5f7;
  box-shadow: 0 10px 28px rgba(23, 61, 111, 0.08);
}

.dashboard-quick-grid > button > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #0877f9;
  background: #edf4ff;
  border-radius: 7px;
}

.dashboard-quick-grid strong,
.dashboard-quick-grid small {
  display: block;
}

.dashboard-quick-grid small {
  margin-top: 4px;
  color: #778398;
}

.dashboard-quick-grid > button > .dashboard-icon {
  width: 18px;
  color: #0877f9;
}

.dashboard-history-card {
  padding: 20px;
}

.dashboard-section-head {
  gap: 16px;
  justify-content: space-between;
  min-width: 0;
}

.dashboard-section-head > div {
  min-width: 0;
}

.dashboard-section-head > button:not(.primary-button),
.dashboard-history-card .dashboard-section-head > button {
  padding: 0;
  color: #086cf0;
  font-size: 0.8rem;
  font-weight: 600;
  background: transparent;
  border: 0;
}

.dashboard-history-filters,
.dashboard-filterbar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin: 18px 0 8px;
  padding-bottom: 2px;
}

.dashboard-history-filters button,
.dashboard-filterbar button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  color: #5f6b7c;
  font-size: 0.78rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: 5px;
}

.dashboard-history-filters button.is-active,
.dashboard-filterbar button.is-active {
  color: #086cf0;
  background: #eaf2ff;
}

.dashboard-history-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 68px;
  border-top: 1px solid #e6ebf2;
}

.dashboard-history-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #086cf0;
  background: #ebf3ff;
  border-radius: 50%;
}

.dashboard-history-icon.is-pending {
  color: #a96d00;
  background: #fff4d9;
}

.dashboard-history-row strong,
.dashboard-history-row small {
  display: block;
}

.dashboard-history-row strong {
  font-size: 0.9rem;
}

.dashboard-history-row small {
  margin-top: 4px;
  color: #92a0b4;
  font-size: 0.75rem;
}

.dashboard-history-row > b {
  color: #253044;
  font-size: 0.91rem;
}

.dashboard-history-row > b.is-success {
  color: #15913f;
}

.dashboard-history-row > b.is-pending {
  color: #79869a;
}

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

.dashboard-order-card {
  display: grid;
  gap: 13px;
  padding: 16px;
}

.dashboard-order-head,
.dashboard-order-foot {
  justify-content: space-between;
  gap: 10px;
}

.dashboard-order-head > div {
  min-width: 0;
}

.dashboard-order-head span,
.dashboard-order-card p,
.dashboard-order-foot small {
  color: #7c889b;
  font-size: 0.78rem;
}

.dashboard-order-head strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 0.96rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-order-card p {
  min-height: 38px;
  margin: 0;
  font-size: 0.84rem;
}

.dashboard-order-progress {
  height: 6px;
  overflow: hidden;
  background: #e7edf4;
  border-radius: 999px;
}

.dashboard-order-progress span {
  display: block;
  height: 100%;
  background: #0877f9;
}

.dashboard-chat-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: 560px;
  overflow: hidden;
}

.dashboard-chat-list {
  padding: 10px;
  border-right: 1px solid #e3e8f0;
}

.dashboard-chat-list button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 66px;
  padding: 9px;
  color: #283243;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
}

.dashboard-chat-list button.is-active {
  background: #edf4ff;
}

.dashboard-chat-list img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 50%;
}

.dashboard-chat-list strong,
.dashboard-chat-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-chat-list strong {
  font-size: 0.82rem;
}

.dashboard-chat-list small {
  margin-top: 4px;
  color: #7e899a;
  font-size: 0.7rem;
}

.dashboard-chat-list b {
  min-width: 20px;
  height: 20px;
  color: #fff;
  font-size: 0.68rem;
  line-height: 20px;
  text-align: center;
  background: #0877f9;
  border-radius: 50%;
}

.dashboard-chat-thread {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}

.dashboard-chat-thread > header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 12px 16px;
  border-bottom: 1px solid #e3e8f0;
}

.dashboard-chat-thread header strong,
.dashboard-chat-thread header span {
  display: block;
}

.dashboard-chat-thread header span {
  margin-top: 3px;
  color: #7c8798;
  font-size: 0.73rem;
}

.dashboard-chat-thread header button {
  padding: 0;
  color: #086cf0;
  font-size: 0.76rem;
  font-weight: 600;
  background: transparent;
  border: 0;
}

.dashboard-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: #fafbfd;
}

.dashboard-messages p {
  width: fit-content;
  max-width: min(76%, 520px);
  padding: 11px 13px;
  margin: 0;
  color: #354054;
  font-size: 0.83rem;
  background: #fff;
  border: 1px solid #e3e8f0;
  border-radius: 7px;
}

.dashboard-messages p.is-own {
  align-self: flex-end;
  color: #fff;
  background: #0877f9;
  border-color: #0877f9;
}

.dashboard-chat-thread form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid #e3e8f0;
}

.dashboard-chat-thread input {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  background: #f7f9fc;
  border: 1px solid #d8e0eb;
  border-radius: 6px;
  outline: none;
}

.dashboard-feature-grid {
  align-items: start;
}

.account-profile-page .dashboard-feature-grid.dashboard-favorite-voice-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 334px));
  gap: 20px;
  justify-content: start;
}

.dashboard-favorite-voice-grid .voice-card.reference-voice-card {
  max-width: 100%;
}

.dashboard-favorites-empty {
  margin: 0;
  padding: 28px 20px;
  color: #718096;
  font-size: 15px;
  text-align: center;
  background: #fff;
  border-radius: 7px;
}

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

.dashboard-review-card,
.dashboard-favorite-card {
  padding: 17px;
}

.dashboard-review-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.dashboard-review-card span {
  color: #f2ad21;
  letter-spacing: 0;
}

.dashboard-review-card time,
.dashboard-review-card small {
  color: #8793a5;
  font-size: 0.72rem;
}

.dashboard-review-card p {
  margin: 14px 0;
  color: #4f5a6d;
  font-size: 0.86rem;
}

.dashboard-news-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.dashboard-news-card:hover {
  background: #fbfdff;
  box-shadow: 0 8px 24px rgba(35, 62, 97, 0.08);
  transform: translateY(-1px);
}

.dashboard-news-card:focus-visible {
  outline: 2px solid rgba(8, 119, 249, 0.42);
  outline-offset: 3px;
}

.dashboard-news-modal-copy {
  display: grid;
  gap: 12px;
  color: #4f5a6d;
  font-size: 0.9rem;
  line-height: 1.65;
}

.dashboard-news-modal-copy p {
  margin: 0;
}

.dashboard-favorite-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
}

.dashboard-favorite-card img {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 7px;
}

.dashboard-favorite-card strong,
.dashboard-favorite-card span,
.dashboard-favorite-card small {
  display: block;
}

.dashboard-favorite-card span {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: #687386;
  font-size: 0.78rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-favorite-card small {
  margin-top: 7px;
  color: #8a6a10;
  font-size: 0.71rem;
}

.dashboard-settings-grid {
  align-items: start;
}

.dashboard-form-card {
  display: grid;
  gap: 13px;
  padding: 20px;
}

.dashboard-form-card.is-wide {
  grid-column: 1 / -1;
}

.dashboard-form-card h3,
.dashboard-schedule-editor h3 {
  margin: 0 0 4px;
  font-size: 1.02rem;
}

.dashboard-form-card label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dashboard-form-card label > span {
  color: #687487;
  font-size: 0.75rem;
  font-weight: 600;
}

.dashboard-form-card input,
.dashboard-form-card select,
.dashboard-form-card textarea,
.dashboard-section-head select,
.dashboard-time-row input,
.dashboard-time-row select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 11px;
  color: #253044;
  background: #f8fafc;
  border: 1px solid #d9e1eb;
  border-radius: 6px;
  outline: none;
}

.dashboard-form-card input:focus,
.dashboard-form-card select:focus,
.dashboard-form-card textarea:focus,
.dashboard-time-row input:focus,
.dashboard-time-row select:focus {
  background: #fff;
  border-color: #7eaff3;
  box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.08);
}

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

.dashboard-upload-zone {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 84px;
  padding: 14px;
  color: #0877f9;
  background: #f3f7fd;
  border: 1px dashed #a8c9f4;
  border-radius: 7px;
}

.dashboard-upload-zone strong,
.dashboard-upload-zone span {
  display: block;
}

.dashboard-upload-zone strong {
  color: #263144;
  font-size: 0.84rem;
}

.dashboard-upload-zone span {
  margin-top: 3px;
  color: #788497;
  font-size: 0.72rem;
}

.dashboard-finance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-finance-grid article {
  display: grid;
  gap: 5px;
  padding: 18px;
}

.dashboard-finance-grid span {
  color: #707c8f;
  font-size: 0.78rem;
  font-weight: 600;
}

.dashboard-finance-grid strong {
  color: #0877f9;
  font-size: 1.5rem;
}

.dashboard-finance-grid small {
  color: #8490a2;
  font-size: 0.7rem;
}

.dashboard-table-card {
  max-width: 100%;
  padding: 8px 14px;
  overflow-x: auto;
}

.dashboard-table-card .queue-table {
  min-width: 720px;
}

.dashboard-chart-card {
  padding: 26px 24px 18px;
}

.dashboard-chart-bars {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  align-items: end;
  height: 280px;
  padding: 12px 0;
  border-bottom: 1px solid #dfe6ef;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 68px, #edf1f6 69px, transparent 70px);
}

.dashboard-chart-bars i {
  min-height: 12px;
  background: #0877f9;
  border-radius: 4px 4px 0 0;
  opacity: 0.82;
}

.dashboard-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: #8793a5;
  font-size: 0.72rem;
}

.dashboard-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(112px, 1fr));
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 5px;
}

.dashboard-week-grid button {
  display: grid;
  gap: 7px;
  min-height: 148px;
  padding: 13px;
  color: #273244;
  text-align: left;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 7px;
}

.dashboard-week-grid button:hover {
  border-color: #8ebaf5;
}

.dashboard-week-grid span {
  color: #086cf0;
  font-weight: 600;
}

.dashboard-week-grid small {
  color: #8490a2;
  font-size: 0.7rem;
}

.dashboard-week-grid strong {
  align-self: end;
  font-size: 0.86rem;
}

.dashboard-week-grid em {
  color: #19833c;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
}

.dashboard-week-grid button.is-busy {
  background: #fffaf0;
  border-color: #f1dba8;
}

.dashboard-week-grid button.is-busy em {
  color: #a16600;
}

.dashboard-week-grid button.is-off {
  background: #f7f9fc;
}

.dashboard-week-grid button.is-off span,
.dashboard-week-grid button.is-off em {
  color: #7f8a9b;
}

.dashboard-schedule-editor {
  display: grid;
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: center;
  padding: 20px;
}

.dashboard-schedule-editor p {
  margin: 6px 0 0;
  color: #748094;
  font-size: 0.8rem;
}

.dashboard-time-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 118px auto 118px auto;
  gap: 8px;
}

.dashboard-notification-drawer {
  position: fixed;
  z-index: 35;
  top: 92px;
  right: max(24px, calc((100vw - var(--container)) / 2));
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100vh - 120px);
  padding: 18px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dce3ed;
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(18, 31, 50, 0.2);
}

.dashboard-notification-drawer[hidden] {
  display: none;
}

.dashboard-notification-drawer > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4e9f0;
}

.dashboard-notification-drawer header p,
.dashboard-notification-drawer header h2 {
  margin: 0;
}

.dashboard-notification-drawer header p {
  color: #0877f9;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dashboard-notification-drawer header h2 {
  margin-top: 4px;
  font-size: 1.2rem;
}

.dashboard-notification-drawer header button {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #7e899a;
  font-size: 1.45rem;
  background: transparent;
  border: 0;
}

.dashboard-notification-drawer > div {
  display: grid;
  gap: 2px;
  margin: 8px 0 14px;
}

.dashboard-notification-item {
  gap: 11px;
  align-items: flex-start;
  padding: 12px 5px;
  border-bottom: 1px solid #edf0f5;
}

.dashboard-notification-item > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  color: #0877f9;
  background: #edf4ff;
  border-radius: 7px;
}

.dashboard-notification-item .dashboard-icon {
  width: 18px;
}

.dashboard-notification-item strong,
.dashboard-notification-item small {
  display: block;
}

.dashboard-notification-item strong {
  font-size: 0.82rem;
}

.dashboard-notification-item p {
  margin: 4px 0;
  color: #657185;
  font-size: 0.76rem;
}

.dashboard-notification-item small {
  color: #9aa5b5;
  font-size: 0.68rem;
}

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

.dashboard-modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.dashboard-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 25, 39, 0.54);
  border: 0;
}

.dashboard-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 560px);
  max-height: min(820px, calc(100vh - 48px));
  padding: 24px;
  overflow-y: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(12, 25, 44, 0.28);
}

.dashboard-modal-panel > .eyebrow {
  margin: 0 0 5px;
  color: #0877f9;
}

.dashboard-modal-panel > h2 {
  margin: 0 42px 20px 0;
  font-size: 1.45rem;
}

.dashboard-modal-body {
  display: grid;
  gap: 14px;
}

.dashboard-modal-body label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.dashboard-modal-body label > span,
.dashboard-modal-body fieldset > legend {
  color: #697589;
  font-size: 0.76rem;
  font-weight: 600;
}

.dashboard-modal-body input,
.dashboard-modal-body select,
.dashboard-modal-body textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  color: #253044;
  background: #f8fafc;
  border: 1px solid #d7e0eb;
  border-radius: 6px;
  outline: none;
}

.dashboard-modal-body textarea {
  min-height: 112px;
  resize: vertical;
}

.dashboard-modal-body input:focus,
.dashboard-modal-body select:focus,
.dashboard-modal-body textarea:focus {
  background: #fff;
  border-color: #7eaff3;
  box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.08);
}

.dashboard-modal-body fieldset {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid #e0e6ef;
  border-radius: 7px;
}

.dashboard-modal-body fieldset label {
  display: flex;
  grid-template-columns: none;
  gap: 9px;
  align-items: center;
  color: #354054;
  font-size: 0.84rem;
  font-weight: 600;
}

.dashboard-modal-body fieldset input {
  width: 17px;
  min-height: 17px;
  padding: 0;
}

.dashboard-modal-summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 13px;
  color: #5f6b7e;
  background: #f2f6fc;
  border-radius: 7px;
}

.dashboard-modal-summary strong {
  color: #0877f9;
  font-size: 1.1rem;
}

.dashboard-modal-note {
  padding: 12px;
  margin: 0;
  color: #5f6b7e;
  font-size: 0.82rem;
  background: #f6f8fb;
  border-radius: 6px;
}

.dashboard-modal-error {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 10px 12px;
  margin: 12px 0 0;
  color: #9f2941;
  font: 500 13px/1.4 var(--font-sans, "Inter", Arial, sans-serif);
  letter-spacing: 0;
  background: #fff3f5;
  border: 1px solid #efc5ce;
  border-radius: 6px;
}

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

.dashboard-modal-error-icon,
.dashboard-modal-error-icon .segment-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.dashboard-modal-error-icon {
  color: #c13d57;
}

.dashboard-modal-error-icon .segment-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-modal-error-text {
  min-width: 0;
}

.dashboard-modal .dashboard-modal-body :is(input, select, textarea)[aria-invalid="true"] {
  background: #fff;
  border-color: #d6576f;
}

.dashboard-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 20px;
}

.dashboard-payment-methods {
  padding: 18px;
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
}

.dashboard-payment-methods-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.dashboard-payment-method {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 58px;
  padding: 9px 11px;
  background: #f7f9fc;
  border-radius: 7px;
}

.dashboard-payment-method > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #0877f9;
  background: #e9f2ff;
  border-radius: 6px;
}

.dashboard-payment-method strong,
.dashboard-payment-method small {
  display: block;
}

.dashboard-payment-method small {
  margin-top: 3px;
  color: #7c889a;
  font-size: 0.72rem;
}

.dashboard-payment-method button {
  padding: 5px;
  color: #8a95a6;
  background: transparent;
  border: 0;
}

.dashboard-payment-method button:hover {
  color: #c33d52;
}

.dashboard-order-card[hidden],
.dashboard-history-row[hidden] {
  display: none;
}

.dashboard-notification-item.is-read {
  opacity: 0.58;
}

@media (max-width: 560px) {
  .dashboard-modal {
    align-items: end;
    padding: 0;
  }

  .dashboard-modal-panel {
    width: 100%;
    max-height: 92vh;
    padding: 20px 16px;
    border-radius: 8px 8px 0 0;
  }

  .dashboard-modal-actions {
    grid-template-columns: 1fr;
  }
}

/* Shared Segment navigation and public home */
.site-header.segment-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 126px;
  min-height: 0;
  padding: 0;
  color: var(--ink-900);
  background: #fff;
  border: 0;
  border-bottom: 1px solid #dfe5ee;
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(25, 41, 65, 0.07);
  transform: none;
  backdrop-filter: none;
  visibility: visible;
  transition: height 220ms ease;
}

.site-header:not(.segment-header) {
  visibility: hidden;
}

.site-header.segment-header.is-compact {
  height: 88px;
}

.segment-utility {
  height: 38px;
  background: #f3f6fa;
  border-bottom: 1px solid #e5eaf1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 220ms ease;
}

.segment-utility-inner,
.segment-mainbar-inner,
.segment-header-actions,
.segment-online,
.segment-footer-bottom,
.segment-payments,
.segment-socials {
  display: flex;
  align-items: center;
}

.segment-utility-inner {
  height: 100%;
  justify-content: space-between;
}

.segment-online {
  gap: 8px;
  color: #718095;
  font-size: 0.75rem;
  font-weight: 600;
}

.segment-online i {
  width: 9px;
  height: 9px;
  background: #31c56a;
  border-radius: 50%;
}

.segment-utility nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.segment-utility nav a {
  color: #687589;
  font-size: 0.75rem;
  font-weight: 600;
}

.segment-utility nav a:hover,
.segment-utility nav a:focus-visible {
  color: #0877f9;
  outline: none;
}

.segment-mainbar {
  height: 88px;
  background: #fff;
  transform: translateY(0);
  transition: transform 220ms ease;
}

.site-header.segment-header.is-compact .segment-utility {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
}

.site-header.segment-header.is-compact .segment-mainbar {
  transform: translateY(-38px);
}

.segment-mainbar-inner {
  display: grid;
  grid-template-columns: 206px 126px minmax(260px, 1fr) auto;
  gap: 14px;
  height: 100%;
}

.segment-brand {
  color: #172235;
}

.segment-brand > span:last-child,
.segment-footer-branding .brand > span:last-child {
  font-size: 1rem;
}

.segment-catalog-button {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  color: #fff;
  font-weight: 600;
  background: #0877f9;
  border-radius: 7px;
}

.segment-catalog-button:hover,
.segment-catalog-button:focus-visible,
.segment-catalog-button.is-active {
  background: #0069e8;
  outline: none;
}

.segment-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-header-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  height: 46px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #b9cef0;
  border-radius: 7px;
}

.segment-header-search input {
  min-width: 0;
  padding: 0 15px;
  background: transparent;
  border: 0;
  outline: none;
}

.segment-header-search:focus-within {
  border-color: #0877f9;
  box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.08);
}

.segment-header-search button {
  display: grid;
  place-items: center;
  color: #0877f9;
  background: transparent;
  border: 0;
}

.segment-header-actions {
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.segment-header-actions .ghost-button {
  color: #3d495c;
  background: #f4f7fb;
  border-color: transparent;
}

.segment-header-actions .notification-button {
  color: #526074;
  background: #f4f7fb;
  border-color: #e0e6ef;
}

.segment-balance {
  display: grid;
  gap: 1px;
  padding: 0 7px;
  white-space: nowrap;
}

.segment-balance small {
  color: #8490a2;
  font-size: 0.64rem;
  font-weight: 600;
}

.segment-balance strong {
  font-size: 0.82rem;
}

.segment-header-actions .user-chip {
  max-width: 152px;
  color: #273244;
  background: #f4f7fb;
}

.segment-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #263246;
  background: #f2f5f9;
  border: 0;
  border-radius: 7px;
}

.segment-mobile-menu[hidden] {
  display: none;
}

.segment-mobile-menu {
  display: grid;
  gap: 4px;
  padding: 12px 18px 18px;
  background: #fff;
  border-top: 1px solid #e2e8f0;
}

.segment-mobile-menu a,
.segment-mobile-menu button {
  min-height: 42px;
  padding: 10px 12px;
  color: #273244;
  font-weight: 600;
  text-align: left;
  background: #f7f9fc;
  border: 0;
  border-radius: 6px;
}

.hero {
  min-height: 820px;
  padding-top: 184px;
}

.hero-copy {
  max-width: 780px;
}

.hero h1 {
  font-size: clamp(2.45rem, 3.8vw, 3.35rem);
}

.catalog-main .catalog-section,
.chronometer-section {
  padding-top: 166px;
}

.profile-main {
  padding-top: 160px;
}

.account-profile-main {
  padding-top: 150px;
}

.style-hero {
  padding-top: 158px;
}

.segment-section {
  padding: 86px 0;
}

.segment-section-heading {
  display: flex;
  gap: 30px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 32px;
}

.segment-section-heading > div,
.segment-section-heading > p {
  min-width: 0;
}

.segment-section-heading h2,
.segment-section-heading p {
  margin-bottom: 0;
}

.segment-section-heading > p {
  max-width: 520px;
  color: #6b778a;
}

.segment-services {
  background: #f5f7fa;
}

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

.segment-service-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 22px;
  gap: 13px;
  align-items: center;
  min-height: 112px;
  padding: 18px;
  color: #253044;
  background: #fff;
  border: 1px solid #e0e6ee;
  border-radius: 8px;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.segment-service-card:hover,
.segment-service-card:focus-visible {
  border-color: #9ac1f5;
  box-shadow: 0 14px 34px rgba(23, 52, 91, 0.09);
  outline: none;
  transform: translateY(-2px);
}

.segment-service-card > b {
  color: #0877f9;
  font-size: 1.2rem;
}

.segment-service-card strong,
.segment-service-card p {
  display: block;
}

.segment-service-card strong {
  font-size: 0.97rem;
}

.segment-service-card p {
  margin: 5px 0 0;
  color: #748094;
  font-size: 0.77rem;
}

.segment-service-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #0877f9;
  background: #eaf3ff;
  border-radius: 8px;
}

.segment-service-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-service-icon.is-mint { color: #128460; background: #e8f7f1; }
.segment-service-icon.is-amber { color: #9d6700; background: #fff3d8; }
.segment-service-icon.is-rose { color: #b13c58; background: #fff0f4; }
.segment-service-icon.is-violet { color: #6c55b8; background: #f0edfb; }
.segment-service-icon.is-slate { color: #536174; background: #eef1f5; }

.segment-process {
  background: #fff;
}

.segment-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #dfe5ed;
  border-bottom: 1px solid #dfe5ed;
}

.segment-process-grid article {
  min-width: 0;
  padding: 28px 24px;
  border-right: 1px solid #dfe5ed;
}

.segment-process-grid article:last-child {
  border-right: 0;
}

.segment-process-grid span {
  display: block;
  margin-bottom: 32px;
  color: #0877f9;
  font-size: 0.78rem;
  font-weight: 600;
}

.segment-process-grid p {
  margin: 9px 0 0;
  color: #6e7a8d;
  font-size: 0.84rem;
}

.segment-benefits {
  color: #fff;
  background: #172335;
}

.segment-benefits-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(420px, 0.9fr);
  gap: 72px;
  align-items: center;
}

.segment-benefits h2 {
  color: #fff;
}

.segment-benefits-copy > p:not(.eyebrow) {
  max-width: 590px;
  color: #bdc7d5;
}

.segment-benefits-copy .primary-button {
  display: inline-flex;
  margin-top: 16px;
}

.segment-benefit-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.segment-benefit-stats article {
  display: grid;
  gap: 5px;
  min-height: 120px;
  align-content: center;
  padding: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.segment-benefit-stats article:nth-child(even) { border-right: 0; }
.segment-benefit-stats article:nth-child(n + 3) { border-bottom: 0; }
.segment-benefit-stats strong { font-size: 1.75rem; }
.segment-benefit-stats span { color: #aeb9c8; font-size: 0.78rem; }

.segment-reviews {
  background: #f5f7fa;
}

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

.segment-review-grid article {
  min-width: 0;
  padding: 22px;
  background: #fff;
  border: 1px solid #e0e6ee;
  border-radius: 8px;
}

.segment-review-grid article > div {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.segment-review-grid span {
  color: #f0aa1d;
  letter-spacing: 0;
}

.segment-review-grid p {
  min-height: 92px;
  margin: 20px 0;
  color: #4e5a6d;
  font-size: 0.88rem;
}

.segment-review-grid small {
  color: #8b96a7;
  font-size: 0.72rem;
}

.segment-faq {
  background: #fff;
}

.segment-faq-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: start;
}

.segment-faq-grid > div:first-child > p:not(.eyebrow) {
  color: #6f7b8e;
}

.segment-faq-list {
  border-top: 1px solid #dfe5ed;
}

.segment-faq-list details {
  padding: 18px 0;
  border-bottom: 1px solid #dfe5ed;
}

.segment-faq-list summary {
  color: #263145;
  font-weight: 600;
  cursor: pointer;
}

.segment-faq-list details p {
  max-width: 680px;
  margin: 12px 0 0;
  color: #6b778a;
  font-size: 0.86rem;
}

.segment-order-cta {
  padding: 52px 0;
  color: #fff;
  background: #0877f9;
}

.segment-order-cta .page-grid {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}

.segment-order-cta h2,
.segment-order-cta p {
  color: #fff;
}

.segment-order-cta h2 {
  margin-bottom: 8px;
}

.segment-order-cta p {
  margin: 0;
  opacity: 0.8;
}

.segment-order-cta .eyebrow {
  color: #d9e9ff;
}

.segment-order-cta .page-grid > div:last-child {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.segment-order-cta .primary-button {
  color: #0877f9;
  background: #fff;
}

.segment-order-cta .secondary-button {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
}

.site-footer.segment-footer {
  padding: 52px 0 0;
  color: #3f4b5e;
  background: #f3f6fa;
  border-top: 1px solid #dce3ec;
}

.segment-footer-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr 1.2fr 1fr;
  gap: 48px;
  padding-bottom: 42px;
}

.segment-footer-column {
  display: grid;
  gap: 9px;
  align-content: start;
}

.segment-footer-column strong {
  margin-bottom: 6px;
  color: #202a3a;
  font-size: 0.83rem;
}

.segment-footer-column a,
.segment-footer-column button {
  width: fit-content;
  padding: 0;
  color: #657185;
  font-size: 0.76rem;
  text-align: left;
  background: transparent;
  border: 0;
}

.segment-footer-column a:hover,
.segment-footer-column button:hover {
  color: #0877f9;
}

.segment-footer-branding .brand {
  color: #202a3a;
}

.segment-footer-branding p {
  margin: 14px 0 20px;
  color: #6d798c;
  font-size: 0.8rem;
}

.segment-socials {
  gap: 7px;
}

.segment-socials a {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  background: #0877f9;
  border-radius: 6px;
}

.segment-footer-bottom {
  min-height: 70px;
  gap: 24px;
  justify-content: space-between;
  color: #667286;
  font-size: 0.72rem;
  border-top: 1px solid #dce3ec;
}

.segment-footer-bottom a {
  color: #273245;
  text-decoration: underline;
}

.segment-payments {
  gap: 6px;
}

.segment-payments b {
  padding: 4px 6px;
  color: #2e4f88;
  font-size: 0.62rem;
  background: #fff;
  border: 1px solid #cdd7e5;
  border-radius: 4px;
}

@media (max-width: 1040px) {
  .segment-utility nav {
    gap: 16px;
  }

  .segment-mainbar-inner {
    grid-template-columns: 170px 110px minmax(220px, 1fr) auto;
    gap: 9px;
  }

  .segment-brand > span:last-child,
  .segment-header-actions .user-chip span {
    display: none;
  }

  .segment-brand {
    width: fit-content;
  }

  .segment-service-grid,
  .segment-review-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segment-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segment-process-grid article:nth-child(2) {
    border-right: 0;
  }

  .segment-process-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid #dfe5ed;
  }

  .segment-benefits-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 760px) {
  .site-header.segment-header {
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    transform: none;
  }

  .segment-utility {
    display: none;
  }

  .segment-mainbar {
    height: 72px;
  }

  .segment-mainbar-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
  }

  .segment-brand > span:last-child,
  .segment-catalog-button,
  .segment-header-actions {
    display: none;
  }

  .site-header .segment-brand {
    width: 142px;
  }

  .site-header .segment-brand .brand-logo-image {
    width: 136px;
    max-height: 34px;
  }

  .segment-header-search {
    height: 42px;
  }

  .segment-menu-toggle {
    display: grid;
  }

  .hero {
    min-height: 700px;
    padding-top: 116px;
  }

  .hero h1 {
    white-space: normal;
  }

  .catalog-main .catalog-section,
  .chronometer-section,
  .profile-main,
  .account-profile-main,
  .style-hero {
    padding-top: 102px;
  }

  .segment-section {
    padding: 62px 0;
  }

  .segment-section-heading,
  .segment-order-cta .page-grid,
  .segment-footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .segment-service-grid,
  .segment-review-grid,
  .segment-faq-grid {
    grid-template-columns: 1fr;
  }

  .segment-process-grid {
    grid-template-columns: 1fr;
  }

  .segment-process-grid article {
    border-right: 0;
    border-bottom: 1px solid #dfe5ed;
  }

  .segment-process-grid article:last-child {
    border-bottom: 0;
  }

  .segment-faq-grid {
    gap: 28px;
  }

  .segment-order-cta .page-grid > div:last-child {
    width: 100%;
    flex-direction: column;
  }

  .segment-order-cta .primary-button,
  .segment-order-cta .secondary-button {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .segment-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }

  .segment-footer-bottom {
    gap: 12px;
    padding: 20px 0;
  }
}

/* Dashboard analytics, export and promo-code references */
.dashboard-analytics-reference,
.dashboard-promocodes-reference {
  display: grid;
  min-width: 0;
  gap: 20px;
}

.dashboard-analytics-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
}

.dashboard-analytics-head h2,
.dashboard-promocodes-reference > h2 {
  margin: 0;
  color: #121212;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
}

.dashboard-analytics-head label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #121212;
  font-size: 14px;
  font-weight: 500;
}

.dashboard-analytics-head select {
  width: auto;
  min-width: 116px;
  height: 38px;
  color: #0877f9;
  background: #fff;
}

.dashboard-analytics-head .primary-button {
  min-width: 208px;
}

.dashboard-analytics-top {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr);
  gap: 20px;
  min-width: 0;
}

.dashboard-analytics-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-analytics-metrics > article,
.dashboard-rating-summary,
.dashboard-rating-breakdown,
.dashboard-products-table,
.dashboard-analytics-chart-card {
  background: #fff;
  border-radius: 8px;
}

.dashboard-analytics-metrics > article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-height: 126px;
  padding: 18px;
}

.dashboard-analytics-metrics > article > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #0877f9;
  background: #e8f2ff;
  border-radius: 8px;
}

.dashboard-analytics-metrics .dashboard-icon {
  width: 20px;
  height: 20px;
}

.dashboard-analytics-metrics b,
.dashboard-analytics-metrics strong {
  display: block;
}

.dashboard-analytics-metrics b {
  color: #121212;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

.dashboard-analytics-metrics strong {
  margin-top: 23px;
  color: #121212;
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dashboard-analytics-reputation {
  display: grid;
  align-content: start;
  gap: 16px;
}

.dashboard-rating-summary,
.dashboard-rating-breakdown {
  padding: 18px;
}

.dashboard-rating-summary > span {
  color: #121212;
  font-size: 16px;
  font-weight: 600;
}

.dashboard-rating-summary > div {
  display: flex;
  gap: 20px;
  align-items: end;
  margin-top: 16px;
}

.dashboard-rating-summary strong {
  color: #121212;
  font-size: 34px;
  line-height: 1;
}

.dashboard-rating-summary p,
.dashboard-rating-summary b,
.dashboard-rating-summary small {
  display: block;
  margin: 0;
}

.dashboard-rating-summary b {
  color: #f6b900;
  font-size: 16px;
  letter-spacing: 0;
}

.dashboard-rating-summary small {
  margin-top: 4px;
  color: #718198;
  font-size: 12px;
}

.dashboard-rating-breakdown h3,
.dashboard-products-table h3 {
  margin: 0 0 16px;
  color: #121212;
  font-size: 18px;
  font-weight: 600;
}

.dashboard-rating-breakdown > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
}

.dashboard-rating-breakdown span b,
.dashboard-rating-breakdown span small {
  display: block;
}

.dashboard-rating-breakdown span b {
  font-size: 13px;
  font-weight: 600;
}

.dashboard-rating-breakdown span small {
  margin-top: 3px;
  color: #8a97a9;
  font-size: 10px;
  text-transform: uppercase;
}

.dashboard-rating-breakdown strong,
.dashboard-rating-breakdown em {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
}

.dashboard-rating-breakdown strong {
  color: #21a94f;
}

.dashboard-rating-breakdown em {
  color: #8a97a9;
}

.dashboard-products-table {
  padding: 18px;
  min-width: 0;
}

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

.dashboard-products-table table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.dashboard-products-table th,
.dashboard-products-table td {
  padding: 13px 12px;
  color: #121212;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid #e5ebf3;
}

.dashboard-products-table th {
  color: #718198;
  font-weight: 500;
  background: #f6f8fb;
}

.dashboard-products-table th:first-child {
  border-radius: 6px 0 0 6px;
}

.dashboard-products-table th:last-child {
  border-radius: 0 6px 6px 0;
}

.dashboard-analytics-chart-card {
  min-width: 0;
  padding: 18px;
}

.dashboard-chart-controls {
  display: grid;
  grid-template-columns: 216px 216px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.dashboard-chart-controls select {
  width: 100%;
}

.dashboard-chart-controls > div {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.dashboard-chart-controls button {
  height: 38px;
  padding: 0 14px;
  color: #0877f9;
  font: 500 13px/1 var(--font-sans);
  background: #fff;
  border: 1px solid #0877f9;
  border-radius: 6px;
}

.dashboard-chart-controls button.is-active {
  color: #fff;
  background: #0877f9;
}

.dashboard-analytics-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 22px;
  overflow: visible;
}

.dashboard-chart-grid line {
  stroke: #d9e1ec;
  stroke-width: 1;
}

.dashboard-analytics-chart path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: d 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboard-analytics-chart path.is-blue {
  stroke: #367be3;
}

.dashboard-analytics-chart path.is-red {
  stroke: #e54c5f;
}

.dashboard-chart-labels text {
  fill: #718198;
  font: 12px var(--font-sans);
}

.dashboard-chart-legend {
  display: flex;
  gap: 44px;
  margin: 14px 0 0 42px;
}

.dashboard-chart-legend span {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: #121212;
  font-size: 13px;
}

.dashboard-chart-legend i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dashboard-chart-legend .is-blue {
  background: #367be3;
}

.dashboard-chart-legend .is-red {
  background: #e54c5f;
}

.dashboard-promocodes-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 20px;
}

.dashboard-promo-offers {
  display: grid;
  gap: 16px;
}

.dashboard-promo-offer,
.dashboard-used-promos {
  padding: 20px;
  color: #121212;
  background: #fff;
  border-radius: 8px;
}

.dashboard-promo-offer.is-featured {
  color: #fff;
  background: #0877f9;
}

.dashboard-promo-offer h3,
.dashboard-used-promos h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.dashboard-promo-offer time {
  display: block;
  margin-top: 8px;
  font-size: 14px;
}

.dashboard-promo-offer p {
  max-width: 68ch;
  margin: 20px 0 14px;
  font-size: 14px;
  line-height: 1.45;
}

.dashboard-promo-offer > button {
  display: inline-grid;
  grid-template-columns: minmax(120px, auto) 20px;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  color: #0877f9;
  font: 500 13px/1 var(--font-sans);
  background: #fff;
  border: 1px solid #0877f9;
  border-radius: 6px;
  transition: color 160ms ease, background-color 160ms ease;
}

.dashboard-promo-offer.is-featured > button {
  border-color: #fff;
}

.dashboard-promo-offer > button.is-copied {
  color: #fff;
  background: #19a781;
  border-color: #19a781;
}

.dashboard-promo-offer .dashboard-icon {
  width: 18px;
  height: 18px;
}

.dashboard-used-promos > div {
  display: grid;
  gap: 5px;
  padding: 15px 0;
  border-bottom: 1px solid #dfe5ee;
}

.dashboard-used-promos > div:last-child {
  border-bottom: 0;
}

.dashboard-used-promos strong,
.dashboard-used-promos span,
.dashboard-used-promos em {
  display: block;
  font-size: 13px;
  font-style: normal;
}

.dashboard-used-promos em {
  color: #e34848;
}

.dashboard-used-promos em.is-active {
  color: #1aa346;
}

.dashboard-export-form {
  display: grid;
  gap: 16px;
}

.dashboard-export-form > label {
  display: grid;
  gap: 8px;
}

.dashboard-export-form > label > span,
.dashboard-export-form legend {
  color: #121212;
  font-size: 14px;
  font-weight: 600;
}

.dashboard-export-form fieldset {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
}

.dashboard-export-form legend {
  margin-bottom: 10px;
}

.dashboard-export-form .dashboard-option-switch {
  grid-template-columns: 46px minmax(0, 1fr);
  width: fit-content;
}

.dashboard-export-form .dashboard-option-switch b {
  font-size: 14px;
  font-weight: 400;
}

@media (max-width: 1120px) {
  .dashboard-analytics-top,
  .dashboard-promocodes-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-chart-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-chart-controls > div {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .dashboard-analytics-head,
  .dashboard-analytics-metrics,
  .dashboard-chart-controls {
    grid-template-columns: 1fr;
  }

  .dashboard-analytics-head label {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-analytics-head select,
  .dashboard-analytics-head .primary-button {
    width: 100%;
  }

  .dashboard-chart-controls > div {
    grid-column: auto;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-analytics-chart path,
  .dashboard-promo-offer > button {
    transition: none;
  }
}

/* Indexable service pages */
.seo-service-page {
  color: #121212;
  background: #f6f8fb;
}

.seo-service-main {
  padding: 166px 0 84px;
}

.seo-service-main > .page-grid {
  width: min(1396px, calc(100vw - 44px));
  max-width: 1396px;
}

.seo-service-main .site-breadcrumbs {
  margin: 0 0 30px;
}

.seo-service-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 72px;
  align-items: center;
  min-height: 350px;
  padding: 30px 0 54px;
  border-bottom: 1px solid #dfe5ee;
}

.seo-service-hero h1 {
  max-width: 780px;
  margin: 0;
  color: #090b10;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.08;
  text-wrap: balance;
}

.seo-service-hero p {
  max-width: 68ch;
  margin: 22px 0 0;
  color: #334052;
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}

.seo-service-hero > div > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.seo-service-hero .primary-button,
.seo-service-hero .secondary-button {
  min-height: 46px;
  text-decoration: none;
}

.seo-service-hero figure {
  display: grid;
  place-items: center;
  width: 280px;
  height: 280px;
  margin: 0;
  color: #fff;
  background: #367be3;
  border-radius: 8px;
}

.seo-service-hero figure img {
  width: 112px;
  height: 112px;
  filter: brightness(0) invert(1);
}

.seo-service-hero figcaption {
  align-self: end;
  padding: 0 20px 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

#seoServiceDynamic {
  display: grid;
  gap: 0;
}

.seo-service-overview,
.seo-service-process,
.seo-service-voices,
.seo-service-faq,
.seo-service-related {
  padding: 64px 0;
  border-bottom: 1px solid #dfe5ee;
}

.seo-service-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 72px;
}

.seo-service-overview h2,
.seo-service-process h2,
.seo-service-section-head h2,
.seo-service-faq h2,
.seo-service-related h2 {
  margin: 0;
  color: #121212;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

.seo-service-overview > div:first-child p {
  max-width: 72ch;
  margin: 22px 0 0;
  color: #334052;
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.seo-service-benefits {
  display: grid;
  align-content: start;
}

.seo-service-benefits article {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dfe5ee;
}

.seo-service-benefits article:last-child {
  margin-bottom: 0;
}

.seo-service-benefits h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.seo-service-benefits p {
  margin: 8px 0 0;
  color: #526071;
  font-size: 14px;
  line-height: 1.5;
}

.seo-service-process ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 32px 0 0;
  list-style: none;
  counter-reset: service-step;
}

.seo-service-process li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: #334052;
  font-size: 15px;
  line-height: 1.45;
  counter-increment: service-step;
}

.seo-service-process li::before {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  content: counter(service-step);
  background: #0877f9;
  border-radius: 50%;
}

.seo-service-process li span {
  padding-top: 7px;
}

.seo-service-section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}

.seo-service-section-head p {
  margin: 8px 0 0;
  color: #526071;
  font-size: 15px;
}

.seo-service-section-head > a {
  color: #0877f9;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.seo-service-voices > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.seo-service-voices .reference-home-voice-row {
  grid-template-columns: 62px minmax(0, 1fr) auto;
  min-height: 142px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
}

.seo-service-voices .reference-home-stats {
  align-self: start;
}

.seo-service-voices .reference-home-player {
  grid-column: 2 / -1;
}

.seo-service-faq {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 72px;
}

.seo-service-faq details {
  padding: 20px 0;
  border-bottom: 1px solid #dfe5ee;
}

.seo-service-faq details:first-child {
  padding-top: 0;
}

.seo-service-faq summary {
  color: #121212;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

.seo-service-faq details p {
  max-width: 72ch;
  margin: 12px 0 0;
  color: #526071;
  font-size: 15px;
  line-height: 1.6;
}

.seo-service-related {
  border-bottom: 0;
}

.seo-service-related nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.seo-service-related a {
  padding: 11px 14px;
  color: #0877f9;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: #e8f2ff;
  border-radius: 6px;
  transition: color 160ms ease, background-color 160ms ease;
}

.seo-service-related a:hover,
.seo-service-related a:focus-visible {
  color: #fff;
  background: #0877f9;
  outline: none;
}

@media (max-width: 980px) {
  .seo-service-hero,
  .seo-service-overview,
  .seo-service-faq {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .seo-service-hero figure {
    width: 220px;
    height: 220px;
  }

  .seo-service-process ol,
  .seo-service-voices > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .seo-service-main {
    padding-top: 126px;
  }

  .seo-service-main > .page-grid {
    width: min(100% - 24px, 560px);
  }

  .seo-service-hero {
    min-height: 0;
    padding-top: 18px;
  }

  .seo-service-hero h1 {
    font-size: 34px;
  }

  .seo-service-hero p {
    font-size: 16px;
  }

  .seo-service-process ol,
  .seo-service-voices > div:last-child {
    grid-template-columns: 1fr;
  }

  .seo-service-section-head {
    align-items: start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-service-related a {
    transition: none;
  }
}

.legal-page {
  background: #f6f8fb;
}

.legal-page main {
  padding: 166px 0 80px;
}

.legal-document {
  width: min(960px, calc(100vw - 44px));
}

.legal-document .site-breadcrumbs {
  margin-bottom: 30px;
}

.legal-document h1 {
  max-width: 820px;
  margin: 0;
  color: #121212;
  font-size: 42px;
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
}

.legal-updated {
  margin: 14px 0 44px;
  color: #718198;
  font-size: 14px;
}

.legal-document section {
  padding: 28px 0;
  border-top: 1px solid #dfe5ee;
}

.legal-document section h2 {
  margin: 0;
  color: #121212;
  font-size: 22px;
  font-weight: 600;
}

.legal-document section p {
  max-width: 75ch;
  margin: 12px 0 0;
  color: #334052;
  font-size: 16px;
  line-height: 1.7;
}

.legal-document section a {
  color: #0877f9;
}

@media (min-width: 821px) {
  .legal-document {
    width: min(1396px, calc(100% - 44px));
  }

  .legal-document > :not(.site-breadcrumbs) {
    width: min(960px, 100%);
  }
}

@media (max-width: 640px) {
  .legal-page main {
    padding-top: 126px;
  }

  .legal-document {
    width: min(100% - 24px, 560px);
  }

  .legal-document h1 {
    font-size: 32px;
  }
}

@media (max-width: 480px) {
  .segment-service-grid,
  .segment-footer-grid,
  .segment-benefit-stats {
    grid-template-columns: 1fr;
  }

  .segment-benefit-stats article {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .segment-benefit-stats article:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 1160px) {
  .dashboard-shell {
    grid-template-columns: 214px minmax(0, 1fr);
  }

  .dashboard-workspace {
    padding: 20px;
  }

  .dashboard-order-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-onboarding-card,
  .dashboard-schedule-editor {
    grid-template-columns: 1fr;
  }

  .dashboard-time-row {
    grid-template-columns: minmax(130px, 1fr) 108px auto 108px;
  }

  .dashboard-time-row .secondary-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .account-profile-main > .page-grid {
    width: min(100% - 48px, var(--container));
  }

  .dashboard-shell {
    display: block;
  }

  .dashboard-sidebar {
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid #e3e8f0;
  }

  .dashboard-sidebar-profile,
  .dashboard-sidebar-foot {
    display: none;
  }

  .dashboard-nav {
    display: flex;
    gap: 5px;
    overflow-x: auto;
  }

  .dashboard-nav-item {
    grid-template-columns: 18px auto auto;
    width: auto;
    min-width: max-content;
    min-height: 38px;
  }

  .dashboard-nav-item span {
    overflow: visible;
  }

  .dashboard-card-grid,
  .dashboard-settings-grid,
  .dashboard-feature-grid,
  .dashboard-chat-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-chat-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #e3e8f0;
  }
}

/* Public voice rating built from the same cards and interaction model as the catalog. */
.rating-page {
  color: #121212;
  background: #f6f8fb;
}

.rating-main {
  min-height: 70vh;
  padding-bottom: 92px;
}

.rating-main > .page-grid {
  width: min(1396px, calc(100vw - 44px));
  max-width: 1396px;
}

.rating-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 284px;
  gap: 64px;
  align-items: center;
  padding: 8px 0 38px;
  border-bottom: 1px solid #dfe5ee;
}

.rating-page-head > div > p {
  margin: 0 0 9px;
  color: #0877f9;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}

.rating-page-head h1 {
  margin: 0;
  color: #090b10;
  font-size: 44px;
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

.rating-page-head > div > span {
  display: block;
  max-width: 760px;
  margin-top: 17px;
  color: #526071;
  font-size: 16px;
  line-height: 1.55;
}

.rating-page-head aside {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 4px 13px;
  align-items: center;
  padding: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.rating-page-head aside > i {
  width: 10px;
  height: 10px;
  background: #24b05a;
  border: 2px solid #dff6e7;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #ecf9f0;
}

.rating-page-head aside > div {
  display: flex;
  gap: 7px;
  align-items: baseline;
}

.rating-page-head aside strong {
  color: #121212;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rating-page-head aside span {
  color: #334052;
  font-size: 13px;
  font-weight: 500;
}

.rating-page-head aside small {
  grid-column: 2;
  color: #8a97a9;
  font-size: 11px;
  line-height: 1.35;
}

.rating-toolbar {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-top: 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.rating-sort-tabs {
  display: flex;
  min-width: 0;
  gap: 4px;
  padding: 4px;
  background: #f1f4f8;
  border-radius: 6px;
}

.rating-sort-tabs button {
  min-height: 36px;
  padding: 0 16px;
  color: #526071;
  font: 500 13px/1 var(--font-sans);
  white-space: nowrap;
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.rating-sort-tabs button:hover,
.rating-sort-tabs button:focus-visible {
  color: #0877f9;
  outline: none;
}

.rating-sort-tabs button.is-active {
  color: #0877f9;
  background: #fff;
  box-shadow: 0 1px 2px rgb(28 45 71 / 8%);
}

.rating-results-head {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 16px;
}

.rating-results-head > div {
  display: flex;
  gap: 7px;
  align-items: baseline;
  color: #718198;
  font-size: 13px;
}

.rating-results-head strong {
  color: #121212;
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rating-results-head a {
  color: #0877f9;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.rating-results-head a:hover,
.rating-results-head a:focus-visible {
  color: #0563d1;
  outline: none;
}

.rating-voice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 334px));
  gap: 24px 20px;
  align-items: start;
  justify-content: space-between;
}

.rating-voice-card {
  position: relative;
  width: 100%;
  max-width: 334px;
  min-width: 0;
}

.rating-voice-card .voice-card.reference-voice-card {
  width: 100%;
  max-width: 334px;
}

.rating-rank-badge {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: grid;
  width: 42px;
  height: 34px;
  grid-template-columns: auto auto;
  gap: 4px;
  place-content: center;
  color: #493200;
  background: #fff6cf;
  border: 1px solid #ecd278;
  border-radius: 6px;
  box-shadow: 0 2px 7px rgb(69 50 0 / 9%);
}

.rating-rank-badge i,
.rating-rank-badge b {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.rating-rank-badge.is-silver {
  color: #46505d;
  background: #f4f7fa;
  border-color: #cbd4df;
}

.rating-rank-badge.is-bronze {
  color: #6d3e20;
  background: #fff0e5;
  border-color: #dfb08e;
}

@media (max-width: 1370px) {
  .rating-voice-grid {
    grid-template-columns: repeat(3, minmax(0, 334px));
    justify-content: center;
  }

  .rating-page-head {
    gap: 36px;
  }

  .rating-toolbar {
    align-items: stretch;
  }

  .rating-sort-tabs {
    overflow-x: auto;
  }
}

@media (max-width: 820px) {
  html {
    scrollbar-gutter: auto;
  }

  body {
    min-width: 0;
    overflow-y: auto;
  }

  .rating-page-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .rating-page-head aside {
    width: min(100%, 360px);
  }

  .rating-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .rating-sort-tabs {
    width: 100%;
  }

  .rating-online-switch {
    justify-self: start;
  }

  .rating-voice-grid {
    grid-template-columns: repeat(2, minmax(0, 334px));
  }
}

/* Extended administration editors */
.admin-page .admin-search-phrases-form {
  display: grid;
  gap: 22px;
}

.admin-page .admin-search-phrases-form > label {
  display: grid;
  gap: 9px;
}

.admin-page .admin-search-phrases-form textarea {
  width: 100%;
  min-height: 330px;
  padding: 18px;
  color: #121212;
  font: 400 14px/1.7 Inter, sans-serif;
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 6px;
  resize: vertical;
  outline: none;
}

.admin-page .admin-search-phrases-form textarea:focus {
  border-color: #8dbaf2;
}

.admin-page .admin-search-phrases-form small {
  color: #778395;
  line-height: 1.5;
}

.admin-page .admin-form-service-list {
  display: grid;
}

.admin-page .admin-form-service-list > button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 10px 20px;
  gap: 14px;
  align-items: center;
  min-height: 72px;
  padding: 12px 4px;
  color: #263245;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e8edf3;
  cursor: pointer;
  transition: color 160ms ease, padding-left 160ms ease;
}

.admin-page .admin-form-service-list > button:hover,
.admin-page .admin-form-service-list > button:focus-visible {
  padding-left: 8px;
  color: #0877f9;
  outline: none;
}

.admin-page .admin-form-service-list > button > span:nth-child(2) {
  display: grid;
  gap: 5px;
}

.admin-page .admin-form-service-list small {
  color: #7a8799;
  font-size: 12px;
  font-weight: 400;
}

.admin-page .admin-service-order {
  color: #8a96a7;
  font-variant-numeric: tabular-nums;
}

.admin-page .admin-publish-dot {
  width: 8px;
  height: 8px;
  background: #c6ced9;
  border-radius: 50%;
}

.admin-page .admin-publish-dot.is-active {
  background: #22a06b;
}

.admin-page .admin-settings-fields--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.admin-page .admin-settings-fields--stacked textarea {
  width: 100%;
  min-height: 92px;
  padding: 12px 14px;
  color: #121212;
  font: inherit;
  border: 1px solid #dfe5ed;
  border-radius: 6px;
  resize: vertical;
  outline: none;
}

.admin-page .admin-maintenance-toggle {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}

.admin-page .admin-service-editor .admin-content-editor-section {
  display: grid;
  gap: 16px;
}

.admin-page .admin-maintenance-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 58px;
  cursor: pointer;
}

.admin-page .admin-maintenance-toggle > span {
  display: grid;
  gap: 4px;
}

.admin-page .admin-maintenance-toggle small {
  color: #748092;
  font-size: 12px;
  font-weight: 400;
}

.admin-page .admin-maintenance-toggle input {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  width: 44px;
  height: 26px;
  margin: 0;
  opacity: 0;
  transform: translateY(-50%);
  cursor: pointer;
}

.admin-page .admin-maintenance-toggle > i {
  position: relative;
  width: 44px;
  height: 26px;
  background: #d5dde7;
  border-radius: 999px;
  transition: background-color 180ms ease;
}

.admin-page .admin-maintenance-toggle > i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.admin-page .admin-maintenance-toggle input:checked + i {
  background: #0877f9;
}

.admin-page .admin-maintenance-toggle input:checked + i::after {
  transform: translateX(18px);
}

.admin-page .admin-test-sound {
  width: fit-content;
  margin-top: 18px;
}

@media (max-width: 560px) {
  .rating-main > .page-grid {
    width: min(100% - 28px, 420px);
  }

  .rating-page-head h1 {
    font-size: 36px;
  }

  .rating-page-head > div > span {
    font-size: 15px;
  }

  .rating-toolbar {
    padding: 12px;
  }

  .rating-voice-grid {
    grid-template-columns: minmax(0, 334px);
  }
}

/* The cabinet becomes a full-width work surface on phones. */
@media (max-width: 780px) {
  .account-profile-page .account-profile-main > .page-grid {
    width: min(100% - 28px, 680px);
  }

  .account-profile-page .dashboard-shell {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .account-profile-page .dashboard-sidebar {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .account-profile-page .dashboard-nav {
    display: flex;
    width: 100%;
    gap: 6px;
    padding: 0 0 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .account-profile-page .dashboard-nav-item,
  .account-profile-page .dashboard-nav-item:nth-child(7) {
    display: grid;
    width: auto;
    min-width: max-content;
    min-height: 40px;
    flex: 0 0 auto;
    grid-template-columns: 18px auto auto;
    gap: 8px;
    padding: 7px 11px;
    margin: 0;
    border: 0;
  }

  .account-profile-page .dashboard-nav-item span {
    overflow: visible;
    font-size: 14px;
    white-space: nowrap;
  }

  .account-profile-page .dashboard-nav-item .dashboard-icon {
    width: 18px;
    height: 18px;
  }

  .account-profile-page .dashboard-sidebar-foot {
    display: none;
  }

  .account-profile-page .dashboard-workspace,
  .account-profile-page .dashboard-view {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .account-profile-main {
    padding-top: 88px;
  }

  .account-profile-main > .page-grid {
    width: min(100% - 28px, var(--container));
  }

  .dashboard-workspace {
    padding: 14px;
  }

  .dashboard-workspace-head,
  .dashboard-profile-card,
  .dashboard-profile-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-head-actions {
    width: 100%;
  }

  .dashboard-head-actions .primary-button {
    flex: 1;
    justify-content: center;
  }

  .dashboard-profile-actions {
    justify-content: flex-start;
  }

  .dashboard-profile-actions .secondary-button {
    text-align: center;
  }

  .dashboard-commission-card {
    grid-template-columns: 1fr;
  }

  .dashboard-commission-value {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid #e3e8f0;
  }

  .dashboard-commission-value strong {
    font-size: 2.2rem;
  }

  .dashboard-card-grid,
  .dashboard-quick-grid,
  .dashboard-order-list,
  .dashboard-finance-grid,
  .dashboard-form-columns {
    grid-template-columns: 1fr;
  }

  .dashboard-onboarding-card,
  .dashboard-profile-card,
  .dashboard-balance-card,
  .dashboard-promo-card,
  .dashboard-history-card,
  .dashboard-form-card {
    padding: 16px;
  }

  .dashboard-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-section-head > .primary-button,
  .dashboard-section-head > select {
    width: 100%;
  }

  .dashboard-favorite-card {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .dashboard-favorite-card .secondary-button {
    grid-column: 1 / -1;
    text-align: center;
  }

  .dashboard-upload-zone {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .dashboard-upload-zone .secondary-button {
    grid-column: 1 / -1;
  }

  .dashboard-time-row {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-time-row select,
  .dashboard-time-row .secondary-button {
    grid-column: 1 / -1;
  }

  .dashboard-time-row > span {
    display: none;
  }

  .dashboard-chat-thread form {
    grid-template-columns: 1fr;
  }
}

/* Unified public design system */
body {
  font-family: var(--font-sans);
  font-size: 16px;
}

button,
.primary-button,
.secondary-button,
.ghost-button,
.icon-button,
.segment-catalog-button,
.search-icon-button,
.provider-button,
.download-demo-button {
  font-family: var(--font-sans);
  box-shadow: none !important;
  transform: none !important;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease !important;
}

.primary-button {
  min-height: 46px;
  padding-inline: 20px;
  font-size: 0.94rem;
  font-weight: 600;
  background: var(--cobalt);
}

.primary-button:hover,
.primary-button:focus-visible {
  background: var(--cobalt-700);
}

.secondary-button,
.ghost-button {
  font-size: 0.92rem;
  font-weight: 600;
}

.segment-utility-inner,
.segment-mainbar-inner,
.segment-footer-grid,
.segment-footer-bottom {
  font-family: var(--font-sans);
}

.segment-online,
.segment-utility nav a {
  font-size: 0.82rem;
  font-weight: 600;
}

.segment-utility nav a:hover,
.segment-utility nav a:focus-visible {
  color: var(--cobalt);
}

.segment-brand > span:last-child,
.segment-footer-branding .brand > span:last-child {
  font-size: 1.08rem;
  font-weight: 600;
}

.segment-catalog-button {
  font-size: 0.94rem;
  font-weight: 600;
  background: var(--cobalt);
  border: 0;
}

.segment-catalog-button:hover,
.segment-catalog-button:focus-visible,
.segment-catalog-button.is-active,
.segment-catalog-button[aria-expanded="true"] {
  background: var(--cobalt-700);
}

.segment-header-search {
  border-color: #a9bee0;
}

.segment-header-search input {
  font-size: 0.94rem;
}

.segment-header-search:focus-within {
  border-color: var(--cobalt);
  box-shadow: none;
}

.segment-header-search button,
.segment-service-card > b,
.dashboard-section-head > button:not(.primary-button) {
  color: var(--cobalt);
}

.segment-order-cta {
  background: var(--cobalt);
}

.segment-order-cta .primary-button {
  color: var(--cobalt-700);
}

.site-footer.segment-footer,
.segment-footer-bottom {
  font-size: 0.84rem;
}

.segment-catalog-menu[hidden] {
  display: none;
}

.segment-catalog-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  width: min(var(--container), calc(100vw - 48px));
  color: var(--ink-900);
  background: #fff;
  border: 1px solid #cfd9e7;
  border-radius: 8px;
  box-shadow: 0 14px 14px -10px rgba(18, 18, 18, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(0.985);
  transform-origin: 28% top;
  transition: opacity 180ms ease, transform 180ms ease;
}

.segment-catalog-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0) scale(1);
}

.segment-catalog-menu-grid {
  display: grid;
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 270px;
  gap: 28px;
  padding: 32px;
}

.segment-catalog-group {
  min-width: 0;
}

.segment-catalog-group > strong {
  display: block;
  margin-bottom: 14px;
  color: #1b283b;
  font-size: 1.05rem;
  font-weight: 600;
}

.segment-catalog-group a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 7px 8px;
  color: #46546a;
  border-radius: 6px;
}

.segment-catalog-group a:hover,
.segment-catalog-group a:focus-visible {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
  outline: none;
}

.segment-catalog-group a:hover > span:first-child,
.segment-catalog-group a:focus-visible > span:first-child {
  color: #fff;
  background: var(--cobalt);
}

.segment-catalog-group a > span:first-child {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--cobalt);
  background: var(--cobalt-100);
  border-radius: 6px;
}

.segment-catalog-group .segment-icon {
  width: 20px;
  height: 20px;
}

.segment-catalog-group a span:last-child {
  display: grid;
  gap: 1px;
}

.segment-catalog-group a b {
  color: inherit;
  font-size: 0.98rem;
  font-weight: 600;
}

.segment-catalog-group a small {
  color: #7b889a;
  font-size: 0.82rem;
}

.segment-catalog-feature {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px;
  background: #f3f7fc;
  border: 1px solid #dbe5f2;
  border-radius: 8px;
}

.segment-catalog-feature span {
  color: var(--cobalt);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
}

.segment-catalog-feature strong {
  display: block;
  margin: 9px 0 7px;
  font-size: 1.3rem;
  line-height: 1.25;
}

.segment-catalog-feature p {
  margin-bottom: 20px;
  color: #66758a;
  font-size: 0.93rem;
}

.segment-catalog-feature a {
  color: var(--cobalt-700);
  font-weight: 600;
}

.order-modal-panel {
  width: min(1040px, 100%);
  max-height: min(92vh, 900px);
  padding: 28px;
  box-shadow: none;
}

.order-modal-panel > .eyebrow {
  margin-bottom: 5px;
}

.order-modal-panel > h2 {
  margin-bottom: 20px;
  font-size: 1.75rem;
}

.order-modal-steps {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
}

.order-modal-steps span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #77859a;
  font-size: 0.82rem;
  font-weight: 600;
}

.order-modal-steps span::before {
  content: attr(data-step);
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #6d7b8f;
  background: #eef2f7;
  border-radius: 50%;
}

.order-modal-steps span.is-active {
  color: var(--cobalt-700);
}

.order-modal-steps span.is-active::before {
  color: #fff;
  background: var(--cobalt);
}

.quick-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}

.quick-order-main {
  display: grid;
  gap: 14px;
}

.quick-order-section {
  padding: 17px;
  border: 1px solid var(--ink-200);
  border-radius: 8px;
}

.quick-order-section-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.quick-order-section-head > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: var(--cobalt-700);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--cobalt-100);
  border-radius: 6px;
}

.quick-order-section-head strong {
  display: block;
  font-size: 0.98rem;
}

.quick-order-section-head small {
  display: block;
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 0.78rem;
}

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

.quick-order-form label > span,
.quick-order-field-label {
  color: #4a586c;
  font-size: 0.8rem;
  font-weight: 600;
}

.quick-order-form select,
.quick-order-form textarea,
.quick-order-form input[type="date"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid #bdc9d9;
  border-radius: 6px;
  outline: none;
}

.quick-order-form textarea {
  min-height: 138px;
  resize: vertical;
}

.quick-order-form select:focus,
.quick-order-form textarea:focus,
.quick-order-form input[type="date"]:focus {
  border-color: var(--cobalt);
  box-shadow: none;
}

.quick-order-text-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 8px;
  color: #6c7a8e;
  font-size: 0.76rem;
}

.quick-order-text-meta strong {
  color: #334156;
}

.quick-order-upload {
  display: flex !important;
  gap: 12px !important;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 9px 12px;
  margin-top: 12px;
  color: #536278;
  background: #f7f9fc;
  border: 1px dashed #b7c5d8;
  border-radius: 6px;
  cursor: pointer;
}

.quick-order-upload input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.quick-order-upload b {
  color: var(--cobalt-700);
  font-size: 0.82rem;
}

.quick-order-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.quick-order-options .check-card {
  display: flex;
  grid-template-columns: none;
  gap: 9px;
  align-items: center;
  min-height: 44px;
  padding: 9px 11px;
  background: #f7f9fc;
  border: 1px solid #d9e1ec;
  border-radius: 6px;
}

.quick-order-options .check-card:has(input:checked) {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
  border-color: #a8c9f4;
}

.quick-order-summary {
  position: sticky;
  top: 0;
  padding: 18px;
  background: #f5f8fc;
  border: 1px solid #dce4ef;
  border-radius: 8px;
}

.quick-order-voice {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding-bottom: 15px;
  margin-bottom: 14px;
  border-bottom: 1px solid #dce4ef;
}

.quick-order-voice img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 50%;
}

.quick-order-voice strong,
.quick-order-voice span {
  display: block;
}

.quick-order-voice strong {
  font-size: 0.92rem;
}

.quick-order-voice span {
  margin-top: 2px;
  color: #718096;
  font-size: 0.76rem;
}

.modal-estimate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 13px;
}

.modal-estimate-grid div {
  padding: 10px;
  background: #fff;
}

.modal-estimate-grid div:last-child {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
}

.modal-estimate-grid div:last-child strong {
  color: var(--cobalt-700);
  font-size: 1.35rem;
}

.quick-order-price-lines {
  display: grid;
  gap: 7px;
  padding: 12px 0;
  margin-bottom: 12px;
  border-top: 1px solid #dce4ef;
  border-bottom: 1px solid #dce4ef;
}

.quick-order-price-lines div {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  color: #66758a;
  font-size: 0.78rem;
}

.quick-order-price-lines b {
  color: #334156;
}

.quick-order-summary .primary-button {
  width: 100%;
}

.quick-order-summary-note {
  margin: 9px 0 0;
  color: #758399;
  font-size: 0.72rem;
  text-align: center;
}

.quick-order-success {
  display: grid;
  max-width: 580px;
  min-height: 360px;
  place-items: center;
  margin: 0 auto;
  text-align: center;
}

.quick-order-success > div {
  display: grid;
  justify-items: center;
}

.quick-order-success-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #fff;
  font-size: 1.4rem;
  background: var(--cobalt);
  border-radius: 50%;
}

.quick-order-success h3 {
  margin: 16px 0 7px;
  font-size: 1.45rem;
}

.quick-order-success p {
  max-width: 440px;
  color: #69778b;
}

.quick-order-success-actions {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

@media (max-width: 1180px) {
  .segment-catalog-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .segment-catalog-feature {
    display: none;
  }
}

@media (max-width: 860px) {
  .quick-order-layout {
    grid-template-columns: 1fr;
  }

  .quick-order-summary {
    position: static;
  }
}

@media (max-width: 760px) {
  .site-header.segment-header,
  .site-header.segment-header.is-compact {
    height: 72px;
  }

  .site-header.segment-header.is-compact .segment-mainbar {
    transform: none;
  }

  .segment-catalog-menu {
    display: none !important;
  }

  .order-modal {
    align-items: start;
    padding: 10px;
  }

  .order-modal-panel {
    max-height: calc(100vh - 20px);
    padding: 20px 16px;
  }

  .quick-order-control-grid,
  .quick-order-options {
    grid-template-columns: 1fr;
  }

  .order-modal-steps {
    overflow-x: auto;
  }

  .order-modal-steps span {
    flex: 0 0 auto;
  }

  .quick-order-success-actions {
    width: 100%;
    flex-direction: column;
  }
}

/* Readable type scale and unified switches */
button,
input,
select,
textarea,
option {
  font-family: var(--font-sans);
  letter-spacing: 0;
}

body {
  font-synthesis: none;
}

strong,
b {
  font-weight: 600;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
}

.eyebrow,
.panel-kicker,
.segment-faq-list summary,
.segment-process-grid span {
  font-weight: 600;
}

.segment-section-heading > p,
.segment-benefits-copy > p:not(.eyebrow),
.segment-faq-grid > div:first-child > p:not(.eyebrow),
.segment-order-cta p {
  font-size: 1rem;
  line-height: 1.6;
}

.segment-service-card strong {
  font-size: 1.06rem;
  font-weight: 600;
}

.segment-service-card p {
  font-size: 0.9rem;
  line-height: 1.45;
}

.segment-process-grid span {
  font-size: 0.86rem;
}

.segment-process-grid h3 {
  font-size: 1.08rem;
}

.segment-process-grid p {
  font-size: 0.94rem;
  line-height: 1.55;
}

.segment-benefit-stats span {
  font-size: 0.9rem;
}

.segment-review-grid p {
  font-size: 0.98rem;
  line-height: 1.58;
}

.segment-review-grid small {
  font-size: 0.84rem;
}

.segment-faq-list summary {
  font-size: 1.02rem;
}

.segment-faq-list details p {
  font-size: 0.95rem;
  line-height: 1.6;
}

.segment-footer-column strong {
  font-size: 0.96rem;
  font-weight: 600;
}

.segment-footer-column a,
.segment-footer-column button {
  font-size: 0.9rem;
  line-height: 1.45;
}

.segment-footer-branding p {
  font-size: 0.9rem;
  line-height: 1.5;
}

.segment-footer-bottom {
  font-size: 0.82rem;
}

.auth-modal-panel,
.dashboard-shell,
.dashboard-modal-panel,
.order-modal-panel {
  font-family: var(--font-sans);
}

.auth-modal-panel h2,
.dashboard-section-head h2,
.dashboard-profile-person h2,
.dashboard-card h2 {
  font-weight: 600;
}

.auth-provider-button,
.auth-mode-tabs button,
.dashboard-nav-item,
.dashboard-content,
.dashboard-modal-body {
  font-size: 0.94rem;
}

.auth-provider-button,
.auth-mode-tabs button,
.dashboard-nav-item {
  font-weight: 600;
}

.segment-catalog-group a.is-female > span:first-child {
  color: #c94175;
  background: #ffe9f1;
}

.segment-catalog-group a.is-male > span:first-child {
  color: var(--cobalt-700);
  background: var(--cobalt-100);
}

.segment-catalog-group a.is-child > span:first-child {
  color: #9a6500;
  background: #fff1c9;
}

.segment-catalog-group a.is-female:hover > span:first-child,
.segment-catalog-group a.is-female:focus-visible > span:first-child {
  color: #fff;
  background: #c94175;
}

.segment-catalog-group a.is-male:hover > span:first-child,
.segment-catalog-group a.is-male:focus-visible > span:first-child {
  color: #fff;
  background: var(--cobalt);
}

.segment-catalog-group a.is-child:hover > span:first-child,
.segment-catalog-group a.is-child:focus-visible > span:first-child {
  color: #fff;
  background: #b87700;
}

.quick-order-options .check-card,
.dashboard-option-switch {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 50px;
  padding: 10px 12px;
  background: #f7f9fc;
  border: 1px solid #d9e1ec;
  border-radius: 7px;
  cursor: pointer;
}

.quick-order-options .check-card:has(input:checked) {
  color: inherit;
  background: #f7f9fc;
  border-color: #b9c7d9;
}

.quick-order-options .check-card > input,
.dashboard-option-switch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.toggle-switch {
  position: relative;
  display: block;
  width: 44px;
  height: 26px;
  background: #b8c3d1;
  border-radius: 999px;
  transition: background-color 180ms ease;
}

.toggle-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transform: translateX(0);
  transition: transform 180ms ease;
}

input:checked + .toggle-switch {
  background: var(--cobalt);
}

input:checked + .toggle-switch i {
  transform: translateX(18px);
}

.toggle-label,
.dashboard-option-switch > span:last-child {
  color: #364459;
  font-size: 0.88rem;
  font-weight: 600;
}

.dashboard-online-switch > span {
  width: 44px;
  height: 26px;
}

.dashboard-online-switch > span::after {
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  box-shadow: none;
}

.dashboard-online-switch input:checked + span::after {
  transform: translateX(18px);
}

.dashboard-online-switch b {
  font-size: 0.9rem;
  font-weight: 600;
}

/* Catalog assistant, aligned menu rows, and branded form controls */
.segment-catalog-menu-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) 286px;
  gap: 20px;
  padding: 26px;
}

.segment-catalog-group {
  display: grid;
  grid-auto-rows: 64px;
  gap: 6px;
  align-content: start;
}

.segment-catalog-group > strong {
  display: none;
}

.segment-catalog-group a {
  min-height: 64px;
  height: 64px;
  padding: 7px;
}

.segment-catalog-group a span:last-child {
  min-width: 0;
}

.segment-catalog-group a b,
.segment-catalog-group a small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-catalog-group a.is-child > span:first-child {
  color: #087f72;
  background: #e0f7f3;
}

.segment-catalog-group a.is-child:hover > span:first-child,
.segment-catalog-group a.is-child:focus-visible > span:first-child {
  color: #fff;
  background: #087f72;
}

.segment-catalog-feature {
  padding: 22px;
  background: #f4f7fb;
  border-color: #dce5f0;
}

.segment-catalog-feature span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--cobalt-700);
}

.segment-catalog-feature .segment-icon {
  width: 17px;
  height: 17px;
}

.segment-catalog-feature .primary-button {
  width: 100%;
}

select {
  appearance: none;
  min-height: 44px;
  padding: 10px 42px 10px 12px;
  color: var(--ink-900);
  font: 500 0.92rem/1.3 var(--font-sans);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232f5f9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  border: 1px solid #b9c7d9;
  border-radius: 6px;
  outline: none;
}

select:hover {
  border-color: #8ba8ce;
}

select:focus-visible {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(30, 91, 184, 0.11);
}

select:disabled {
  color: #8490a1;
  background-color: #f3f5f8;
  cursor: not-allowed;
}

.order-modal-panel {
  width: min(1120px, 100%);
}

.quick-order-layout {
  grid-template-columns: minmax(0, 1fr) 356px;
}

.quick-order-summary,
.quick-order-voice > div,
.modal-estimate-grid div {
  min-width: 0;
}

.modal-estimate-grid div {
  overflow: hidden;
}

.modal-estimate-grid span {
  overflow-wrap: anywhere;
}

.modal-estimate-grid strong,
.quick-order-price-lines b {
  white-space: nowrap;
}

.quick-order-options .check-card,
.dashboard-option-switch {
  min-height: 38px;
  padding: 4px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.quick-order-options .check-card:has(input:checked) {
  background: transparent;
  border-color: transparent;
}

.quick-order-price-lines .is-discount,
.quick-order-price-lines .is-discount b {
  color: #087f72;
}

.quick-order-promo {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.quick-order-promo > label {
  color: #4a586c;
  font-size: 0.8rem;
  font-weight: 600;
}

.quick-order-promo > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.quick-order-promo input {
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  font: 600 0.86rem/1 var(--font-sans);
  text-transform: uppercase;
  border: 1px solid #bdc9d9;
  border-radius: 6px;
  outline: none;
}

.quick-order-promo input:focus {
  border-color: var(--cobalt);
}

.quick-order-promo .secondary-button {
  min-height: 42px;
  padding-inline: 12px;
}

.quick-order-promo small {
  min-height: 16px;
  color: #6f7d91;
  font-size: 0.75rem;
}

.quick-order-promo small.is-success { color: #087f72; }
.quick-order-promo small.is-error { color: #b33a48; }

.voice-assistant-modal[hidden] { display: none; }

.voice-assistant-modal {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
}

.voice-assistant-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 22, 37, 0.56);
}

.voice-assistant-panel {
  position: relative;
  width: min(780px, 100%);
  max-height: min(90vh, 820px);
  overflow: auto;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
}

.voice-assistant-heading {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 15px;
  padding-right: 34px;
}

.voice-assistant-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #fff;
  background: var(--cobalt);
  border-radius: 7px;
}

.voice-assistant-mark .segment-icon { width: 25px; height: 25px; }
.voice-assistant-heading h2 { margin: 3px 0 5px; font-size: 1.55rem; }
.voice-assistant-heading p:last-child { color: #66758a; font-size: 0.93rem; }

.voice-assistant-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 12px;
  align-items: end;
  padding: 20px 0;
}

.voice-assistant-form label { display: grid; gap: 6px; }
.voice-assistant-form label:first-child { grid-row: span 2; }
.voice-assistant-form label > span { color: #445269; font-size: 0.82rem; font-weight: 600; }
.voice-assistant-form textarea { min-height: 132px; padding: 12px; font: 500 0.94rem/1.5 var(--font-sans); resize: vertical; border: 1px solid #b9c7d9; border-radius: 6px; outline: none; }
.voice-assistant-form textarea:focus { border-color: var(--cobalt); }
.voice-assistant-form .primary-button { width: 100%; }

.voice-assistant-results { border-top: 1px solid #dfe6ef; }
.voice-assistant-results:empty { display: none; }
.voice-assistant-advice { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 11px; align-items: start; padding: 14px; margin-top: 18px; background: #edf4ff; border-radius: 7px; }
.voice-assistant-advice > span { display: grid; width: 36px; height: 36px; place-items: center; color: var(--cobalt-700); background: #fff; border-radius: 6px; }
.voice-assistant-advice .segment-icon { width: 19px; height: 19px; }
.voice-assistant-advice p { margin: 3px 0 0; color: #5f6f85; font-size: 0.82rem; line-height: 1.45; }
.voice-assistant-result-head { display: flex; justify-content: space-between; padding: 18px 0 10px; }
.voice-assistant-result-head span { color: #718096; font-size: 0.82rem; }
.voice-assistant-result-grid { display: grid; gap: 8px; }
.voice-assistant-card { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 70px; padding: 10px 10px 10px 34px; background: #f6f8fb; border-radius: 7px; }
.voice-assistant-card img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.voice-assistant-card div { min-width: 0; }
.voice-assistant-card div > * { display: block; }
.voice-assistant-card div > span { margin: 2px 0; overflow: hidden; color: #65748a; font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.voice-assistant-card small { color: #536278; font-size: 0.76rem; }
.voice-assistant-rank { position: absolute; left: 11px; color: var(--cobalt-700); font-size: 0.78rem; font-weight: 600; }
.voice-assistant-help { margin: 10px 0 0; color: #718096; font-size: 0.78rem; }

@media (max-width: 1180px) {
  .segment-catalog-menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .quick-order-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .voice-assistant-panel { padding: 22px 18px; }
  .voice-assistant-heading { grid-template-columns: 42px minmax(0, 1fr); }
  .voice-assistant-mark { width: 42px; height: 42px; }
  .voice-assistant-form { grid-template-columns: 1fr; }
  .voice-assistant-form label:first-child { grid-row: auto; }
  .voice-assistant-card { grid-template-columns: 42px minmax(0, 1fr); }
  .voice-assistant-card img { width: 42px; height: 42px; }
  .voice-assistant-card .secondary-button { grid-column: 1 / -1; width: 100%; }
  .quick-order-options { grid-template-columns: 1fr; }
}

/* Figma catalog menu: node 3416:93553 */
.segment-catalog-button {
  gap: 10px;
  width: 126px;
  min-height: 46px;
  color: #fff;
  background: #367be3;
  border-radius: 6px;
  transition: color 180ms ease, background-color 180ms ease;
}

.segment-catalog-button:hover,
.segment-catalog-button:focus-visible,
.segment-catalog-button.is-active {
  color: #fff;
  background: #276ed6;
}

.segment-catalog-button[aria-expanded="true"],
.segment-catalog-button[aria-expanded="true"]:hover,
.segment-catalog-button[aria-expanded="true"]:focus-visible {
  color: #367be3;
  background: #ebf3ff;
}

.catalog-toggle-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 16px;
  flex: 0 0 20px;
}

.catalog-toggle-icon i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition: top 180ms ease, opacity 130ms ease, transform 180ms ease;
}

.catalog-toggle-icon i:nth-child(1) { top: 2px; }
.catalog-toggle-icon i:nth-child(2) { top: 7px; }
.catalog-toggle-icon i:nth-child(3) { top: 12px; }

.segment-catalog-button[aria-expanded="true"] .catalog-toggle-icon i:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}

.segment-catalog-button[aria-expanded="true"] .catalog-toggle-icon i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.segment-catalog-button[aria-expanded="true"] .catalog-toggle-icon i:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

.segment-catalog-menu {
  top: 100%;
  width: 100vw;
  max-height: calc(100vh - 126px);
  overflow-y: auto;
  background: #fff;
  border: 0;
  border-top: 1px solid #d4dae5;
  border-bottom: 1px solid #d4dae5;
  border-radius: 0;
  box-shadow: 0 14px 14px -10px rgba(18, 18, 18, 0.16);
  transform: translate(-50%, -8px);
  transform-origin: center top;
}

.segment-catalog-menu.is-open {
  transform: translate(-50%, 0);
}

.segment-catalog-menu-grid {
  display: block;
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  padding: 26px 0 30px;
  margin: 0 auto;
}

.segment-catalog-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  margin-bottom: 20px;
}

.segment-catalog-section-head h3,
.segment-catalog-services-title {
  margin: 0;
  color: #121212;
  font-family: var(--font-sans, "Inter", Arial, sans-serif);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}

.segment-catalog-section-head > button {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #b9b9b9;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.segment-catalog-section-head > button:hover,
.segment-catalog-section-head > button:focus-visible {
  color: #367be3;
  background: #ebf3ff;
  outline: none;
}

.segment-catalog-section-head > button span {
  position: absolute;
  top: 13px;
  left: 4px;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

.segment-catalog-section-head > button span:first-child { transform: rotate(45deg); }
.segment-catalog-section-head > button span:last-child { transform: rotate(-45deg); }

.segment-catalog-voice-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px 18px;
}

.segment-catalog-voice-grid a {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  color: #121212;
  border-radius: 6px;
  outline: none;
}

.segment-catalog-voice-grid a > span,
.segment-catalog-service-grid a > span,
.segment-catalog-service-grid button > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: hidden;
  background: #ebf3ff;
  border-radius: 6px;
  transition: background-color 180ms ease;
}

.segment-catalog-voice-grid img,
.segment-catalog-service-grid img {
  display: block;
  width: 46px;
  height: 46px;
  transition: filter 180ms ease;
}

.segment-catalog-voice-grid b,
.segment-catalog-service-grid b {
  min-width: 0;
  overflow: hidden;
  font-size: 0.91rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-catalog-voice-grid a:hover,
.segment-catalog-voice-grid a:focus-visible {
  color: #367be3;
}

.segment-catalog-voice-grid a:hover > span,
.segment-catalog-voice-grid a:focus-visible > span {
  background: #367be3;
}

.segment-catalog-voice-grid a:hover img,
.segment-catalog-voice-grid a:focus-visible img {
  filter: brightness(0) invert(1);
}

.segment-catalog-services-title {
  margin: 55px 0 20px;
}

.segment-catalog-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.segment-catalog-service-grid a,
.segment-catalog-service-grid button {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 8px;
  color: #121212;
  text-align: left;
  background: #ebf3ff;
  border: 0;
  border-radius: 6px;
  outline: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.segment-catalog-service-grid a > span,
.segment-catalog-service-grid button > span {
  background: #fff;
}

.segment-catalog-service-grid a:hover,
.segment-catalog-service-grid a:focus-visible,
.segment-catalog-service-grid button:hover,
.segment-catalog-service-grid button:focus-visible {
  color: #fff;
  background: #367be3;
}

@media (max-width: 1080px) {
  .segment-catalog-voice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .segment-catalog-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .segment-catalog-menu { max-height: calc(100vh - 72px); }
  .segment-catalog-menu-grid { width: min(100% - 28px, 1180px); }
  .segment-catalog-voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segment-catalog-service-grid { grid-template-columns: 1fr; }
}

/* Home page from Figma frame 1440 x 4787 */
.legacy-home[hidden] { display: none !important; }

.home-main {
  min-height: 100vh;
  color: #121212;
  background: #f7f9fd;
}

.home-slider {
  padding: 148px 0 30px;
}

.home-slider-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.home-slider-track {
  display: flex;
  width: 100%;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.home-slide {
  position: relative;
  width: 100%;
  height: 454px;
  flex: 0 0 100%;
  overflow: hidden;
  color: #fff;
  background: #0877f9;
  border-radius: 8px;
}

.home-slide > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 56%;
}

.home-slide-secondary > img {
  object-position: 45% 58%;
  transform: scaleX(-1);
}

.home-slide-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 102, 240, 0.78);
}

.home-slide-secondary .home-slide-overlay {
  background: rgba(0, 147, 113, 0.78);
}

.home-slide-copy {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(570px, 58%);
  height: 100%;
  align-content: center;
  padding: 44px 52px;
}

.home-slide-copy .eyebrow {
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.78);
}

.home-slide-copy h1,
.home-slide-copy h2 {
  max-width: 560px;
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(2.15rem, 4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.home-slide-copy p:not(.eyebrow) {
  max-width: 500px;
  margin: 0;
  color: #fff;
  font-size: 1.02rem;
  line-height: 1.55;
}

.home-slide-copy > div {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 26px;
}

.home-slide-button,
.home-slide-copy > div button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  color: #0877f9;
  font-size: 0.9rem;
  font-weight: 600;
  background: #fff;
  border: 0;
  border-radius: 6px;
}

.home-slide-copy > div button {
  gap: 7px;
  padding-inline: 2px;
  color: #fff;
  background: transparent;
}

.home-slider-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0 0 3px;
  color: #5e6d81;
  font-size: 2rem;
  line-height: 1;
  background: #fff;
  border: 1px solid #dce4ef;
  border-radius: 50%;
}

.home-slider-arrow.is-prev { left: 14px; }
.home-slider-arrow.is-next { right: 14px; }

.home-slider-arrow:hover,
.home-slider-arrow:focus-visible {
  color: #fff;
  background: #367be3;
  border-color: #367be3;
  outline: none;
}

.home-slider-dots {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 20px;
  display: flex;
  gap: 7px;
}

.home-slider-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.48);
  border: 0;
  border-radius: 50%;
}

.home-slider-dots button.is-active {
  width: 24px;
  background: #fff;
  border-radius: 999px;
}

.home-section {
  padding: 34px 0;
}

.home-section h2 {
  margin: 0 0 24px;
  color: #121212;
  font-size: clamp(1.7rem, 2.5vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: 0;
}

.home-section-head {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.home-section-head > a {
  color: #367be3;
  font-size: 0.92rem;
  font-weight: 600;
}

.home-advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-advantage-grid article {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 112px;
  padding: 16px;
  background: #fff;
  border-radius: 6px;
}

.home-advantage-grid article > span {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  background: #0877f9;
  border-radius: 6px;
}

.home-advantage-grid article > span::before {
  content: "";
  width: 26px;
  height: 26px;
  background: #fff;
  mask: center / contain no-repeat var(--home-icon);
}

.home-advantage-grid article:nth-child(1) { --home-icon: url("./assets/catalog-icons/service-05.svg"); }
.home-advantage-grid article:nth-child(2) { --home-icon: url("./assets/catalog-icons/service-09.svg"); }
.home-advantage-grid article:nth-child(3) { --home-icon: url("./assets/catalog-icons/voice-mic.svg"); }
.home-advantage-grid article:nth-child(4) { --home-icon: url("./assets/catalog-icons/service-01.svg"); }
.home-advantage-grid article:nth-child(5) { --home-icon: url("./assets/catalog-icons/service-11.svg"); }
.home-advantage-grid article:nth-child(6) { --home-icon: url("./assets/catalog-icons/service-12.svg"); }

.home-advantage-grid strong {
  display: block;
  margin-bottom: 5px;
  font-size: 0.96rem;
}

.home-advantage-grid p {
  margin: 0;
  color: #66758a;
  font-size: 0.84rem;
  line-height: 1.4;
}

.home-voice-collections,
.home-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-voice-collection {
  min-width: 0;
  padding: 14px;
  background: #fff;
  border-radius: 6px;
}

.home-voice-collection h3 {
  margin: 0 0 12px;
  font-size: 1.02rem;
}

.home-voice-collection > div {
  display: grid;
  gap: 8px;
}

.home-voice-collection > a,
.home-example-card > a {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  color: #367be3;
  font-size: 0.82rem;
  font-weight: 600;
  background: #ebf3ff;
  border-radius: 5px;
}

.home-voice-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  background: #f7f9fd;
  border-radius: 6px;
}

.home-voice-avatar {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
}

.home-voice-avatar > img,
.home-voice-avatar > span:not(.voice-presence) {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  object-fit: cover;
  overflow: hidden;
  border-radius: 5px;
}

.home-voice-info {
  min-width: 0;
}

.home-voice-info > a,
.home-voice-info > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-voice-info > a {
  color: #1b2637;
  font-size: 0.8rem;
  font-weight: 600;
}

.home-voice-info > span {
  margin-top: 3px;
  color: #718096;
  font-size: 0.7rem;
}

.home-voice-badges {
  display: grid;
  gap: 3px;
  justify-items: end;
}

.home-voice-badges small,
.home-voice-badges b {
  padding: 2px 5px;
  font-size: 0.64rem;
  border-radius: 4px;
}

.home-voice-badges small { color: #16874f; background: #e4f7ed; }
.home-voice-badges b { color: #8a6400; background: #fff5cb; }

.home-mini-player {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  grid-column: 1 / -1;
}

.home-mini-play {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 5px;
}

.home-mini-play::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 9px;
  width: 9px;
  height: 11px;
  background: #367be3;
  border: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.home-mini-play.is-playing::before {
  top: 7px;
  left: 8px;
  width: 7px;
  height: 10px;
  background:
    linear-gradient(#367be3, #367be3) left center / 2px 100% no-repeat,
    linear-gradient(#367be3, #367be3) right center / 2px 100% no-repeat;
  border: 0;
  clip-path: none;
}

.home-mini-player input,
.home-audio-demo input {
  width: 100%;
  height: 3px;
  accent-color: #367be3;
}

.home-mini-player .player-meta,
.home-audio-demo .player-meta {
  display: flex;
  gap: 5px;
  color: #8a96a7;
  font-size: 0.6rem;
  white-space: nowrap;
}

.home-mini-player .player-meta strong,
.home-audio-demo .player-meta strong {
  color: inherit;
}

.home-production h2 {
  max-width: 770px;
}

.home-production h2 span {
  color: #367be3;
}

.home-production-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-production-grid article {
  position: relative;
  display: flex;
  min-height: 184px;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
}

.home-production-grid h3 {
  max-width: 300px;
  margin: 0 0 9px;
  font-size: 1.18rem;
  line-height: 1.2;
}

.home-production-grid p {
  max-width: 260px;
  margin: 0;
  color: #718096;
  font-size: 0.82rem;
}

.home-production-grid a {
  margin-top: auto;
  color: #367be3;
  font-size: 0.82rem;
  font-weight: 600;
}

.home-production-grid img {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 88px;
  height: 88px;
}

.home-production-grid .has-visual h3,
.home-production-grid .has-visual p {
  max-width: calc(100% - 86px);
}

.home-example-card {
  min-width: 0;
  padding: 14px;
  background: #fff;
  border-radius: 6px;
}

.home-example-card > header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 58px;
  margin-bottom: 12px;
}

.home-example-card > header > span {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: hidden;
  background: #0877f9;
  border-radius: 6px;
}

.home-example-card > header img {
  width: 46px;
  height: 46px;
  filter: brightness(0) invert(1);
}

.home-example-card h3 {
  margin: 0 0 4px;
  font-size: 0.94rem;
}

.home-example-card header p {
  margin: 0;
  color: #718096;
  font-size: 0.72rem;
}

.home-example-card > div {
  display: grid;
  gap: 8px;
}

.home-audio-demo {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  background: #f7f9fd;
  border-radius: 5px;
}

.home-audio-demo > div {
  display: grid;
  grid-template-columns: minmax(0, 110px) minmax(50px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.home-audio-demo > div > strong {
  overflow: hidden;
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-footer.segment-footer {
  padding-top: 44px;
  background: #f1f4f9;
}

.segment-footer-grid {
  grid-template-columns: 1.15fr repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.segment-footer-column,
.segment-footer-branding {
  min-width: 0;
}

.segment-footer-column strong {
  font-size: 0.92rem;
}

.segment-footer-column a,
.segment-footer-column button {
  font-size: 0.84rem;
  line-height: 1.45;
}

.segment-footer-branding {
  grid-column: auto;
}

.segment-footer-bottom {
  margin-top: 36px;
}

.back-to-top {
  position: fixed;
  z-index: 45;
  right: 24px;
  bottom: 24px;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0 0 3px;
  color: #fff;
  font-size: 1.45rem;
  background: #0877f9;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) !important;
  transition: opacity 180ms ease, transform 180ms ease !important;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) !important;
}

@media (max-width: 980px) {
  .home-advantage-grid,
  .home-voice-collections,
  .home-production-grid,
  .home-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segment-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .home-slider { padding-top: 92px; }
  .home-slide { height: 480px; }
  .home-slide-copy { width: 100%; padding: 34px 26px; align-content: end; }
  .home-slide-copy h1,
  .home-slide-copy h2 { font-size: 2.05rem; }
  .home-slide-copy > div { align-items: stretch; flex-direction: column; gap: 8px; }
  .home-slide-copy > div button { justify-content: flex-start; padding-left: 0; }
  .home-slider-arrow { width: 36px; height: 36px; }
  .home-advantage-grid,
  .home-voice-collections,
  .home-production-grid,
  .home-example-grid,
  .segment-footer-grid { grid-template-columns: 1fr; }
  .home-section { padding: 28px 0; }
  .home-section-head { align-items: flex-start; flex-direction: column; gap: 0; }
  .home-production-grid article { min-height: 170px; }
  .segment-footer-bottom { align-items: flex-start; flex-direction: column; }
  .back-to-top { right: 16px; bottom: 16px; }
}

/* Exact SVG transfer: Главная.svg + Каталог.svg */
.site-header.segment-header .page-grid,
.site-footer.segment-footer .page-grid,
.home-main .page-grid {
  width: min(1396px, calc(100% - 44px));
  max-width: 1396px;
}

.site-header.segment-header {
  height: 145px;
  background: #fff;
  border-bottom: 1px solid #d4dae5;
  box-shadow: none;
  transition: height 220ms ease;
}

.site-header.segment-header.is-compact {
  height: 106px;
}

.segment-utility {
  height: 38px;
  background: #fff;
  border: 0;
}

.segment-utility-inner {
  height: 38px;
}

.segment-online {
  gap: 10px;
  color: #6c7788;
  font-size: 16px;
  font-weight: 500;
}

.segment-online i {
  width: 12px;
  height: 12px;
  background: #5bd170;
}

.segment-utility nav {
  gap: 42px;
}

.segment-utility nav a {
  color: #6c7788;
  font-size: 16px;
  font-weight: 500;
}

.segment-mainbar {
  height: 106px;
}

.site-header.segment-header.is-compact .segment-mainbar {
  transform: translateY(-38px);
}

.segment-mainbar-inner {
  grid-template-columns: 216px 126px minmax(280px, 1fr) 216px;
  gap: 20px;
  height: 106px;
  align-items: center;
}

.segment-logo-placeholder {
  display: block;
  width: 216px;
  height: 70px;
  background: #d9d9d9;
}

.segment-catalog-button {
  width: 126px;
  min-height: 46px;
  gap: 8px;
  padding: 0 17px;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  background: #0877f9;
  border: 1px solid #0877f9;
  border-radius: 6px;
}

.segment-catalog-button:hover,
.segment-catalog-button:focus-visible,
.segment-catalog-button.is-active {
  color: #fff;
  background: #0877f9;
}

.segment-catalog-button[aria-expanded="true"],
.segment-catalog-button[aria-expanded="true"]:hover,
.segment-catalog-button[aria-expanded="true"]:focus-visible {
  color: #0877f9;
  background: #ebf3ff;
  border-color: #ebf3ff;
}

.catalog-toggle-icon {
  width: 13px;
  height: 14px;
  flex-basis: 13px;
}

.catalog-toggle-icon i {
  width: 13px;
  height: 2px;
}

.catalog-toggle-icon i:nth-child(1) { top: 3px; }
.catalog-toggle-icon i:nth-child(2) { top: 7px; }
.catalog-toggle-icon i:nth-child(3) { top: 11px; }

.segment-catalog-button[aria-expanded="true"] .catalog-toggle-icon i:nth-child(1),
.segment-catalog-button[aria-expanded="true"] .catalog-toggle-icon i:nth-child(3) {
  top: 7px;
}

.segment-header-search {
  height: 46px;
  border: 1px solid #0877f9;
  border-radius: 6px;
}

.segment-header-search:focus-within {
  border-color: #0877f9;
  box-shadow: none;
}

.segment-header-search input {
  padding: 0 16px;
  color: #121212;
  font-size: 18px;
}

.segment-header-search input::placeholder {
  color: #6c7788;
}

.segment-header-search button {
  width: 46px;
}

.segment-header-actions .ghost-button,
.segment-header-actions .auth-trigger {
  width: 216px;
  height: 46px;
  padding: 0 18px;
  color: #0877f9;
  font-size: 18px;
  font-weight: 500;
  background: #fff;
  border: 1px solid #0877f9;
  border-radius: 6px;
  box-shadow: none;
}

.segment-header-actions .ghost-button:hover,
.segment-header-actions .ghost-button:focus-visible {
  color: #fff;
  background: #0877f9;
  outline: none;
}

.segment-catalog-menu {
  top: 145px;
  left: 50%;
  z-index: 49;
  width: 100vw;
  max-height: calc(100vh - 145px);
  background: #fff;
  border-top: 0;
  border-bottom: 0;
  box-shadow: 0 14px 14px -10px rgba(18, 18, 18, 0.16);
  transform: translate(-50%, -10px);
}

.site-header.segment-header.is-compact .segment-catalog-menu {
  top: 106px;
}

.segment-catalog-menu-grid {
  width: min(1180px, calc(100vw - 260px));
  padding: 24px 0 30px;
}

.segment-catalog-section-head {
  margin-bottom: 24px;
}

.segment-catalog-section-head h3,
.segment-catalog-services-title {
  font-family: var(--font-sans, "Inter", Arial, sans-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
}

.segment-catalog-section-head > button {
  width: 32px;
  height: 32px;
  color: #b9b9b9;
}

.segment-catalog-voice-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 31px 36px;
}

.segment-catalog-voice-grid a {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  min-height: 46px;
}

.segment-catalog-voice-grid a > span,
.segment-catalog-service-grid a > span,
.segment-catalog-service-grid button > span {
  width: 46px;
  height: 46px;
  background: #ebf3ff;
  border-radius: 6px;
}

.segment-catalog-voice-grid img,
.segment-catalog-service-grid img {
  width: 46px;
  height: 46px;
}

.segment-catalog-voice-grid b,
.segment-catalog-service-grid b {
  color: #121212;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  white-space: normal;
}

.segment-catalog-voice-grid a:hover,
.segment-catalog-voice-grid a:focus-visible {
  color: #0877f9;
}

.segment-catalog-voice-grid a:hover b,
.segment-catalog-voice-grid a:focus-visible b {
  color: #0877f9;
}

.segment-catalog-voice-grid a:hover > span,
.segment-catalog-voice-grid a:focus-visible > span {
  background: #0877f9;
}

.segment-catalog-services-title {
  margin: 51px 0 24px;
}

.segment-catalog-service-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.segment-catalog-service-grid a,
.segment-catalog-service-grid button {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  min-height: 62px;
  padding: 8px;
  color: #121212;
  background: #ebf3ff;
  border-radius: 6px;
}

.segment-catalog-service-grid a > span,
.segment-catalog-service-grid button > span {
  background: #fff;
}

.segment-catalog-service-grid a:hover,
.segment-catalog-service-grid a:focus-visible,
.segment-catalog-service-grid button:hover,
.segment-catalog-service-grid button:focus-visible {
  color: #fff;
  background: #0877f9;
}

.segment-catalog-service-grid a:hover b,
.segment-catalog-service-grid a:focus-visible b,
.segment-catalog-service-grid button:hover b,
.segment-catalog-service-grid button:focus-visible b {
  color: #fff;
}

.home-main {
  background: #f7f9fd;
}

.home-slider {
  padding: 165px 0 58px;
}

.home-slider-viewport {
  overflow: visible;
  border-radius: 0;
}

.home-slider-track {
  gap: 20px;
}

.home-slide {
  flex: 0 0 min(1042px, 74.65vw);
  height: 540px;
  background: #0877f9;
  border-radius: 28px;
}

.home-slide > img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform: none;
  inset: auto auto auto 34%;
  top: -12px;
  width: 195%;
  height: auto;
}

.home-slide-secondary {
  background: #15a564;
}

.home-slide-secondary > img {
  transform: none;
}

.home-slide-overlay {
  background: linear-gradient(90deg, rgba(8, 119, 249, 0.96) 0%, rgba(8, 119, 249, 0.92) 46%, rgba(8, 119, 249, 0.84) 100%);
  mix-blend-mode: normal;
}

.home-slide-secondary .home-slide-overlay {
  background: linear-gradient(90deg, rgba(17, 166, 91, 0.96) 0%, rgba(16, 158, 128, 0.92) 48%, rgba(24, 143, 201, 0.84) 100%);
}

.home-slide-copy {
  width: 620px;
  padding: 0 0 0 50px;
  align-content: center;
}

.home-slide-copy .eyebrow {
  display: none;
}

.home-slide-copy h1,
.home-slide-copy h2 {
  max-width: 640px;
  margin: 0 0 24px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.13;
}

.home-slide-copy p:not(.eyebrow) {
  max-width: 560px;
  font-size: 24px;
  line-height: 1.33;
}

.home-slide-copy > div {
  gap: 30px;
  margin-top: 52px;
}

.home-slide-button,
.home-slide-copy > div button {
  min-height: 46px;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: none;
}

.home-slide-copy > div button {
  gap: 10px;
  padding-inline: 0;
  color: #fff;
  background: transparent;
}

.home-slide-tags {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.home-slide-tags span {
  position: absolute;
  display: inline-flex;
  min-width: 193px;
  min-height: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: #fff;
  font-size: 17px;
  line-height: 1.08;
  background: rgba(255, 255, 255, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  backdrop-filter: blur(7.5px);
}

.home-slide-tags span::after {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin-left: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 6px transparent;
}

.home-slide-tags span::before {
  content: "";
  position: absolute;
  right: 21px;
  top: 17px;
  z-index: 1;
  width: 10px;
  height: 6px;
  border-left: 2px solid #0877f9;
  border-bottom: 2px solid #0877f9;
  transform: rotate(-45deg);
}

.home-slide-tags span:nth-child(1) {
  right: 56px;
  top: 332px;
}

.home-slide-tags span:nth-child(2) {
  right: 191px;
  top: 388px;
}

.home-slide-tags span:nth-child(3) {
  right: 56px;
  top: 444px;
}

.home-slider-arrow {
  top: 270px;
  width: 60px;
  height: 60px;
  color: #121212;
  font-size: 40px;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  box-shadow: 0 10px 18px rgba(40, 55, 78, 0.14);
}

.home-slider-arrow.is-prev {
  left: -28px;
}

.home-slider-arrow.is-next {
  right: -28px;
}

.home-slider-dots {
  display: none;
}

.home-section {
  padding: 28px 0;
}

.home-section h2 {
  margin-bottom: 52px;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
}

.home-advantages {
  padding-top: 20px;
}

.home-advantage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-advantage-grid article {
  min-height: 140px;
  padding: 22px;
  border-radius: 6px;
}

.home-advantage-grid article > span {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.home-advantage-grid strong {
  font-size: 21px;
  line-height: 1.2;
}

.home-advantage-grid p {
  font-size: 16px;
  line-height: 1.35;
}

.home-section-head {
  margin-bottom: 52px;
}

.home-section-head h2 {
  margin: 0;
}

.home-section-head > a {
  color: #0877f9;
  font-size: 18px;
  font-weight: 500;
}

.home-voice-collections {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-voice-collection {
  padding: 16px;
  background: #fff;
  border-radius: 6px;
}

.home-voice-collection h3 {
  margin-bottom: 24px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.12;
}

.home-voice-collection > div {
  gap: 30px;
}

.home-voice-row {
  position: relative;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 0 24px;
  align-items: start;
  min-height: 80px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.home-voice-avatar,
.home-voice-avatar > img,
.home-voice-avatar > span:not(.voice-presence) {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}

.home-voice-avatar > span:not(.voice-presence) {
  background: #eaf3ff;
}

.home-voice-avatar .voice-presence {
  right: -3px;
  top: -5px;
  width: 14px;
  height: 14px;
}

.home-voice-info {
  padding-top: 2px;
}

.home-voice-info > a {
  font-size: 16px;
  font-weight: 600;
}

.home-voice-info > span {
  margin-top: 6px;
  color: #6c7788;
  font-size: 16px;
}

.home-voice-badges {
  align-self: start;
  gap: 8px;
  justify-items: end;
}

.home-voice-badges small {
  color: #fff;
  background: #28bf83;
}

.home-voice-badges b {
  color: #ffbd00;
  background: transparent;
}

.home-voice-badges small,
.home-voice-badges b {
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.home-mini-player {
  grid-column: 2 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  margin-top: 18px;
}

.home-mini-play {
  position: absolute;
  left: 24px;
  top: 24px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
}

.home-mini-player input,
.home-audio-demo input {
  height: 5px;
  accent-color: #0877f9;
}

.home-mini-player .player-meta {
  justify-content: space-between;
  font-size: 11px;
}

.home-voice-collection > a,
.home-example-card > a {
  min-height: 46px;
  margin-top: 30px;
  color: #0877f9;
  font-size: 18px;
  font-weight: 500;
  background: #ebf3ff;
  border-radius: 6px;
}

.home-production {
  padding-top: 48px;
}

.home-production h2 {
  max-width: 850px;
  margin-bottom: 52px;
}

.home-production-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.home-production-grid article {
  min-height: 230px;
  padding: 20px;
  border-radius: 6px;
}

.home-production-grid article:nth-child(3),
.home-production-grid article:nth-child(4) {
  grid-column: span 2;
}

.home-production-grid h3 {
  max-width: 420px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.08;
}

.home-production-grid p {
  color: #121212;
  font-size: 16px;
}

.home-production-grid a {
  color: #0877f9;
  font-size: 18px;
  font-weight: 500;
}

.home-production-grid img {
  right: 28px;
  bottom: 25px;
  width: 168px;
  height: 168px;
  object-fit: contain;
}

.home-production-grid article:nth-child(4) img {
  right: 42px;
  bottom: 30px;
  width: 200px;
  height: 160px;
}

.home-production-grid .has-visual h3,
.home-production-grid .has-visual p {
  max-width: calc(100% - 210px);
}

.home-examples {
  padding-top: 58px;
}

.home-example-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-example-card {
  padding: 16px;
  border-radius: 6px;
}

.home-example-card > header {
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.home-example-card > header > span {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.home-example-card > header img {
  width: 40px;
  height: 40px;
}

.home-example-card h3 {
  font-size: 20px;
}

.home-example-card header p {
  font-size: 16px;
}

.home-audio-demo {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 55px;
  padding: 7px;
  background: #f2f6fc;
  border-radius: 8px;
}

.home-audio-demo .home-mini-play {
  position: relative;
  left: auto;
  top: auto;
}

.home-audio-demo > div {
  grid-template-columns: minmax(0, 160px) minmax(70px, 1fr) auto;
}

.home-audio-demo > div > strong {
  font-size: 14px;
}

.site-footer.segment-footer {
  padding: 40px 0 0;
  background: #f7f9fd;
  border-top: 1px solid #d4dae5;
}

.segment-footer-grid {
  display: grid;
  grid-template-columns: 254px 190px 170px 270px 220px;
  gap: 0;
  justify-content: space-between;
  padding-top: 32px;
}

.segment-footer-branding {
  display: block;
}

.segment-footer-branding .segment-logo-placeholder {
  width: 254px;
  height: 70px;
  margin-bottom: 20px;
}

.segment-socials {
  gap: 14px;
}

.segment-socials a {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 6px;
}

.segment-socials img {
  position: absolute;
  inset: 0;
  display: block;
  width: 30px;
  height: 30px;
  opacity: 1;
}

.segment-socials .segment-social-icon-hover {
  opacity: 0;
}

.segment-footer-column {
  gap: 12px;
}

.segment-footer-column strong {
  margin-bottom: 2px;
  color: #121212;
  font-size: 14px;
  font-weight: 600;
}

.segment-footer-column a,
.segment-footer-column button {
  color: #4a5565;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.12;
}

.segment-footer-bottom {
  min-height: 70px;
  margin-top: 56px;
  padding: 24px 0 0;
  align-items: flex-start;
  justify-content: space-between;
  color: #121212;
  font-size: 15px;
  border-top: 1px solid #d4dae5;
}

.segment-footer-bottom a {
  color: #121212;
  text-decoration: underline;
}

.segment-payments {
  gap: 8px;
  white-space: nowrap;
}

.segment-payments img {
  width: 38px;
  height: 24px;
}

.back-to-top {
  right: 22px;
  bottom: 84px;
  width: 68px;
  height: 68px;
  padding: 0 0 7px;
  font-size: 54px;
  line-height: 1;
  background: #0877f9;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 14px rgba(8, 119, 249, 0.32);
}

@media (max-width: 1180px) {
  .segment-mainbar-inner {
    grid-template-columns: 180px 126px minmax(220px, 1fr) 190px;
  }

  .segment-logo-placeholder {
    width: 180px;
  }

  .segment-header-actions .ghost-button,
  .segment-header-actions .auth-trigger {
    width: 190px;
    font-size: 16px;
  }

  .home-slide {
    flex-basis: calc(100vw - 44px);
  }

  .segment-catalog-menu-grid {
    width: min(1180px, calc(100vw - 48px));
  }
}

@media (max-width: 980px) {
  .segment-mainbar-inner {
    grid-template-columns: 1fr auto auto;
  }

  .segment-header-search,
  .segment-header-actions {
    display: none;
  }

  .segment-menu-toggle {
    display: grid;
  }

  .home-voice-collections,
  .home-example-grid,
  .home-advantage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-production-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-production-grid article:nth-child(3),
  .home-production-grid article:nth-child(4) {
    grid-column: span 1;
  }

  .segment-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }
}

@media (max-width: 680px) {
  .site-header.segment-header {
    height: 98px;
  }

  .segment-utility {
    display: none;
  }

  .segment-mainbar,
  .segment-mainbar-inner {
    height: 98px;
  }

  .segment-logo-placeholder {
    width: 150px;
    height: 50px;
  }

  .home-slider {
    padding-top: 118px;
  }

  .home-slide {
    height: 520px;
    border-radius: 18px;
  }

  .home-slide-copy {
    width: 100%;
    padding: 28px;
    align-content: end;
  }

  .home-slide-copy h1,
  .home-slide-copy h2 {
    font-size: 34px;
  }

  .home-slide-copy p:not(.eyebrow) {
    font-size: 18px;
  }

  .home-slide-tags {
    display: none;
  }

  .home-slide > img {
    left: 6%;
    top: 20px;
    width: 255%;
  }

  .home-section h2 {
    font-size: 34px;
  }

  .home-voice-collections,
  .home-example-grid,
  .home-advantage-grid,
  .home-production-grid,
  .segment-footer-grid {
    grid-template-columns: 1fr;
  }

  .segment-footer-bottom {
    gap: 16px;
  }
}

/* Stabilization pass after SVG transfer */
.segment-mainbar-inner {
  grid-template-columns: 216px 126px minmax(280px, 1fr) 228px;
}

.segment-brand {
  display: inline-flex;
  width: max-content;
  min-width: 0;
  align-items: center;
  gap: 12px;
  color: #121212;
}

.site-header .segment-brand {
  width: 216px;
}

.brand-logo-image {
  display: block;
  width: 181px;
  max-width: 100%;
  height: auto;
  max-height: 44px;
  object-fit: contain;
}

.site-header .segment-brand .brand-logo-image {
  width: 181px;
}

.segment-footer-branding .segment-brand .brand-logo-image {
  width: 190px;
  max-height: 46px;
}

.footer-brand .brand-logo-image {
  width: 188px;
  max-height: 46px;
}

.segment-brand .brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  grid-template-columns: repeat(3, 6px);
  gap: 4px;
  border-radius: 8px;
}

.segment-brand .brand-mark span {
  width: 6px;
}

.segment-brand .brand-mark span:nth-child(1) { height: 17px; }
.segment-brand .brand-mark span:nth-child(2) { height: 27px; }
.segment-brand .brand-mark span:nth-child(3) { height: 20px; }

.segment-brand > span:last-child {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.segment-header-actions .ghost-button,
.segment-header-actions .auth-trigger {
  width: 228px;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

.home-slider-viewport {
  overflow: hidden;
  border-radius: 28px;
}

.home-slider-track {
  gap: 0;
}

.home-slide {
  flex: 0 0 100%;
}

.home-slide > img {
  left: 28%;
  top: -22px;
  width: 178%;
}

.home-slider-arrow.is-prev {
  left: 0;
  transform: translateX(-50%);
}

.home-slider-arrow.is-next {
  right: 0;
  transform: translateX(50%);
}

.home-advantage-grid article {
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  overflow: hidden;
}

.home-advantage-grid article > span {
  grid-column: 1;
  grid-row: 1;
}

.home-advantage-grid article > span::before {
  width: 30px;
  height: 30px;
}

.home-advantage-grid strong,
.home-advantage-grid p {
  position: relative;
  z-index: 1;
}

.home-voice-collection {
  display: flex;
  min-height: 458px;
  flex-direction: column;
  padding: 16px;
}

.home-voice-collection h3 {
  min-height: 68px;
  margin-bottom: 16px;
}

.home-voice-collection > div {
  gap: 18px;
}

.home-voice-row {
  grid-template-columns: 80px minmax(0, 1fr) 52px;
  min-height: 92px;
}

.home-voice-info > a,
.home-voice-info > span {
  white-space: nowrap;
}

.home-mini-player {
  grid-column: 2 / 4;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
}

.home-mini-player input {
  display: block;
  margin: 0;
}

.home-mini-player .player-meta {
  display: flex;
  justify-content: space-between;
  color: #6c7788;
}

.home-voice-collection > a {
  margin-top: auto;
}

.home-production-grid article,
.home-example-card,
.home-voice-collection,
.home-advantage-grid article {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.home-production-grid article:hover,
.home-example-card:hover,
.home-voice-collection:hover,
.home-advantage-grid article:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 46px rgba(25, 41, 65, 0.1);
}

.home-example-card {
  display: flex;
  min-height: 318px;
  flex-direction: column;
}

.home-example-card > div {
  display: grid;
  gap: 12px;
}

.home-audio-demo {
  grid-template-columns: 40px minmax(0, 1fr);
  min-height: 56px;
}

.home-audio-demo > div {
  grid-template-columns: minmax(0, 132px) minmax(80px, 1fr) 46px;
  gap: 10px;
}

.home-audio-demo .player-meta {
  justify-content: flex-end;
}

.home-audio-demo .player-meta span {
  display: none;
}

.home-audio-demo .player-meta strong {
  color: #6c7788;
  font-size: 13px;
}

.site-footer.segment-footer {
  font-family: var(--font-sans);
}

.segment-footer-grid {
  grid-template-columns: 254px 210px 170px 300px 220px;
}

.segment-footer-branding .segment-brand {
  width: max-content;
  margin-bottom: 28px;
}

.segment-footer-column {
  display: grid;
  align-content: start;
  gap: 11px;
}

.segment-footer-column strong {
  min-height: 20px;
  margin: 0 0 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.segment-footer-column a,
.segment-footer-column button {
  width: max-content;
  max-width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.15;
  white-space: nowrap;
}

.segment-footer-bottom {
  align-items: center;
  padding-bottom: 18px;
}

.segment-payments {
  align-items: center;
  gap: 8px;
}

.segment-payments img {
  width: 40px;
  height: 27px;
  object-fit: contain;
}

@media (max-width: 1180px) {
  .segment-mainbar-inner {
    grid-template-columns: 190px 126px minmax(220px, 1fr) 212px;
  }

  .site-header .segment-brand {
    width: 190px;
  }

  .site-header .segment-brand .brand-logo-image {
    width: 172px;
  }

  .segment-brand > span:last-child {
    font-size: 21px;
  }

  .segment-header-actions .ghost-button,
  .segment-header-actions .auth-trigger {
    width: 212px;
    font-size: 15px;
  }
}

@media (max-width: 980px) {
  .segment-mainbar-inner {
    grid-template-columns: 1fr auto auto;
  }

  .home-voice-collection h3 {
    min-height: 0;
  }
}

/* Visual QA pass: shared home/header/footer polish */
.home-main {
  padding-top: 145px;
}

.home-slider {
  padding: 20px 0 58px;
}

.home-slider-viewport {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.home-slider-track {
  display: flex;
  width: 100%;
  gap: 0;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.home-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  overflow: hidden;
}

.home-slide > img {
  left: 22%;
  top: -18px;
  width: 182%;
}

.home-slide-overlay {
  inset: 0;
}

.home-advantage-grid article {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.home-advantage-grid article > span {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.home-advantage-grid article > span::before {
  position: static;
  transform: none;
}

.home-advantage-grid article > div {
  min-width: 0;
}

.home-voice-collection {
  min-height: 604px;
}

.home-voice-collection h3 {
  min-height: 68px;
}

.home-voice-collection > div {
  display: grid;
  gap: 20px;
}

.home-voice-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 54px;
  grid-template-rows: 30px 28px 34px;
  gap: 5px 18px;
  min-height: 122px;
  align-items: start;
}

.home-voice-avatar {
  grid-row: 1 / 3;
}

.home-voice-info {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding-top: 4px;
}

.home-voice-info > a,
.home-voice-info > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-voice-info > span {
  color: #0877f9;
  font-size: 17px;
  font-weight: 500;
}

.home-voice-badges {
  display: grid;
  width: 54px;
  gap: 6px;
  justify-items: end;
}

.home-voice-badges small {
  min-width: 28px;
  padding: 3px 5px;
  color: #fff;
  text-align: center;
  background: #28bf83;
  border-radius: 6px;
}

.home-voice-badges b {
  color: #ffbd00;
  font-size: 13px;
  white-space: nowrap;
}

.home-mini-play {
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(15, 66, 132, 0.16);
}

.home-mini-play::before {
  margin-left: 2px;
}

.home-mini-player {
  grid-column: 2 / 4;
  grid-row: 3;
  display: grid;
  gap: 5px;
  align-self: end;
  margin-top: 4px;
}

.home-mini-player input,
.home-audio-demo input {
  width: 100%;
  min-width: 0;
  height: 4px;
  margin: 0;
  border: 0;
  outline: none;
}

.home-mini-player input:focus,
.home-audio-demo input:focus {
  outline: none;
}

.home-mini-player .player-meta {
  display: flex;
  justify-content: space-between;
  color: #6c7788;
  font-size: 12px;
}

.home-production-grid article,
.home-example-card,
.home-voice-collection,
.home-advantage-grid article {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease;
}

.home-production-grid article:hover,
.home-example-card:hover,
.home-voice-collection:hover,
.home-advantage-grid article:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 52px rgba(20, 45, 86, 0.11);
}

.home-example-card {
  min-height: 348px;
}

.home-audio-demo {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 62px;
  background: #f6f9fe;
}

.home-audio-demo .home-mini-play {
  position: relative;
  left: auto;
  top: auto;
  width: 32px;
  height: 32px;
  box-shadow: none;
}

.home-audio-demo > div {
  display: grid;
  grid-template-columns: minmax(86px, 150px) minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.home-audio-demo > div > strong {
  overflow: hidden;
  color: #121212;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-audio-demo .player-meta {
  display: flex;
  justify-content: flex-end;
  min-width: 42px;
}

.home-audio-demo .player-meta span {
  display: none;
}

.home-audio-demo .player-meta strong {
  color: #6c7788;
  font-size: 13px;
  font-weight: 500;
}

.site-footer.segment-footer {
  color: #121212;
  font-family: var(--font-sans);
}

.segment-footer-grid {
  grid-template-columns: 254px 210px 176px 300px 230px;
  gap: 22px;
}

.segment-footer-branding .segment-brand {
  margin-bottom: 24px;
}

.segment-footer-column strong {
  color: #121212;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.segment-footer-column a,
.segment-footer-column button {
  width: max-content;
  max-width: 100%;
  color: #4a5565;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.18;
  white-space: nowrap;
}

.segment-footer-bottom {
  display: grid;
  grid-template-columns: auto minmax(360px, 1fr) auto;
  gap: 22px;
  align-items: center;
  color: #6c7788;
  font-family: var(--font-sans);
  font-size: 15px;
}

.segment-payments {
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.segment-payments img {
  box-sizing: border-box;
  width: 42px;
  height: 28px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #d4dae5;
  border-radius: 4px;
}

@media (max-width: 1180px) {
  .home-main {
    padding-top: 126px;
  }

  .home-slider {
    padding-top: 18px;
  }

  .home-voice-collections,
  .home-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segment-footer-grid,
  .segment-footer-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .home-main {
    padding-top: 88px;
  }

  .home-voice-collections,
  .home-example-grid,
  .home-advantage-grid,
  .home-production-grid {
    grid-template-columns: 1fr;
  }

  .home-voice-collection {
    min-height: 0;
  }

  .segment-footer-grid,
  .segment-footer-bottom {
    grid-template-columns: 1fr;
  }
}

/* Voice profile transfer from references/Профиль диктора - доп информация.svg */
.voice-profile-page {
  color: #121212;
  background: #f7f9fd;
}

.voice-profile-page .profile-main {
  padding: 145px 0 0;
  background: #f7f9fd;
}

.voice-profile-page .page-grid {
  width: min(1396px, calc(100% - 44px));
  max-width: 1396px;
}

.voice-profile-page .voice-profile-hero {
  padding-top: 18px;
  margin-bottom: 46px;
}

.profile-breadcrumb {
  display: flex;
  gap: 14px;
  align-items: center;
  color: #121212;
  font-size: 14px;
  font-weight: 400;
}

.profile-breadcrumb a:last-child {
  color: #0877f9;
}

.voice-profile-page .profile-grid {
  grid-template-columns: minmax(0, 925px) minmax(0, 453px);
  gap: 20px;
  align-items: start;
}

.voice-profile-page .profile-column,
.profile-side-stack {
  display: grid;
  gap: 20px;
}

.voice-profile-page .profile-panel,
.voice-profile-page .profile-hero-card,
.profile-side-stats,
.profile-related-card {
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.voice-profile-page .profile-panel {
  padding: 16px;
}

.voice-profile-page .profile-hero-card {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 186px;
  gap: 20px;
  min-height: 210px;
  align-items: center;
  padding: 20px;
}

.voice-profile-page .profile-avatar {
  width: 160px;
  height: 160px;
  overflow: visible;
  color: #cfe0f6;
  background: #edf5ff;
  border: 0;
  border-radius: 50%;
}

.profile-svg-placeholder .segment-icon {
  width: 42px;
  height: 42px;
  stroke-width: 1.7;
}

.profile-intro {
  min-width: 0;
}

.profile-status-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.profile-online-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 9px;
  color: #00a31b;
  font-size: 14px;
  background: #dcf8df;
  border-radius: 6px;
}

.profile-icon-button {
  display: inline-grid;
  width: 36px;
  height: 28px;
  place-items: center;
  color: #9cb4d4;
  background: #edf5ff;
  border: 0;
  border-radius: 7px;
}

.profile-icon-button .segment-icon {
  width: 20px;
  height: 20px;
}

.profile-icon-button.is-heart {
  color: #e94f5d;
  background: transparent;
}

.profile-icon-button.is-heart .segment-icon {
  fill: currentColor;
  stroke: currentColor;
}

.profile-intro h1 {
  margin: 0 0 4px;
  color: #121212;
  font-size: 31px;
  font-weight: 500;
  line-height: 1.18;
}

.profile-rating-line {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 14px;
  color: #8b98aa;
  font-size: 13px;
}

.profile-rating-line strong {
  color: #121212;
  font-weight: 600;
}

.profile-rating-line .rating,
.profile-rating-line .profile-stars {
  color: #ffbd00;
  font-size: 13px;
  letter-spacing: 0;
}

.profile-intro p {
  max-width: 548px;
  margin: 0;
  color: #666;
  font-size: 18px;
  line-height: 1.38;
}

.voice-profile-page .profile-order-box {
  display: grid;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
}

.voice-profile-page .profile-order-box .primary-button,
.voice-profile-page .profile-order-box .secondary-button {
  width: 186px;
  height: 46px;
  min-height: 46px;
  justify-content: center;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
}

.voice-profile-page .profile-order-box .secondary-button {
  color: #0877f9;
  background: #ebf3ff;
  border: 0;
}

.profile-schedule-panel {
  min-height: 123px;
}

.voice-profile-page .profile-panel h2,
.profile-related-section h2 {
  margin: 0 0 16px;
  color: #121212;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.18;
}

.voice-profile-page .availability-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
  padding: 0;
}

.voice-profile-page .availability-calendar button {
  display: grid;
  min-width: 0;
  min-height: 57px;
  gap: 3px;
  justify-items: center;
  align-content: center;
  padding: 8px 10px;
  text-align: center;
  color: #00a31b;
  background: #dcf8df;
  border: 0;
  border-radius: 10px;
}

.voice-profile-page .availability-calendar button span {
  color: currentColor;
  font-size: 18px;
  font-weight: 600;
}

.voice-profile-page .availability-calendar button strong {
  color: #121212;
  font-size: 14px;
  font-weight: 400;
}

.voice-profile-page .availability-calendar button.is-off {
  color: #f0444f;
  background: #fff0f1;
}

.voice-profile-page .profile-characteristics {
  min-height: 439px;
}

.profile-characteristic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 56px;
  padding: 2px 0 0;
}

.profile-characteristic-grid article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  min-height: 70px;
}

.profile-characteristic-grid article > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #0877f9;
}

.profile-characteristic-grid .segment-icon {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}

.profile-characteristic-grid strong {
  display: block;
  margin-bottom: 8px;
  color: #121212;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.22;
}

.profile-characteristic-grid p {
  margin: 0;
  color: #666;
  font-size: 17px;
  line-height: 1.24;
}

.profile-side-stats {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
}

.profile-side-stats div {
  display: flex;
  gap: 12px;
  align-items: baseline;
}

.profile-side-stats strong {
  font-size: 22px;
  font-weight: 500;
}

.profile-side-stats span {
  color: #121212;
  font-size: 17px;
}

.profile-side-stats > span {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #00a31b;
  font-size: 16px;
}

.profile-side-stats .segment-icon {
  width: 18px;
  height: 18px;
}

.profile-services-panel {
  min-height: 280px;
}

.profile-service-list {
  display: grid;
  gap: 20px;
}

.profile-service-row {
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto;
  gap: 6px;
  align-items: end;
}

.profile-service-row strong {
  display: block;
  color: #121212;
  font-size: 18px;
  font-weight: 400;
}

.profile-service-row small {
  display: block;
  margin-top: 2px;
  color: #666;
  font-size: 12px;
}

.profile-service-row > span {
  height: 1px;
  margin-bottom: 7px;
  background-image: linear-gradient(90deg, #8f98a7 0 55%, transparent 55% 100%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}

.profile-service-row b {
  color: #121212;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.profile-demo-list-panel {
  min-height: 502px;
}

.profile-demo-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.profile-demo-tabs button {
  min-height: 36px;
  padding: 0 14px;
  color: #0877f9;
  font-size: 16px;
  font-weight: 500;
  background: #fff;
  border: 1px solid #0877f9;
  border-radius: 6px;
}

.profile-demo-tabs button.is-active {
  color: #fff;
  background: #0877f9;
}

.profile-demo-list {
  display: grid;
  gap: 20px;
}

.profile-demo-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 18px;
  min-height: 80px;
  align-items: center;
}

.profile-demo-avatar {
  position: relative;
  display: grid;
  width: 80px;
  height: 80px;
  place-items: center;
  color: #cfe0f6;
  background: #edf5ff;
  border-radius: 10px;
}

.profile-demo-avatar .segment-icon {
  width: 36px;
  height: 36px;
  stroke-width: 1.6;
}

.profile-demo-avatar .voice-presence {
  position: absolute;
  top: -5px;
  right: -4px;
  width: 14px;
  height: 14px;
}

.profile-demo-play {
  position: absolute;
  left: 26px;
  top: 26px;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #0877f9;
  background: rgba(255, 255, 255, 0.94);
  border: 0;
  border-radius: 50%;
}

.profile-demo-play .segment-icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
  stroke-width: 0;
}

.profile-demo-play.is-playing .segment-icon {
  opacity: 0;
}

.profile-demo-play.is-playing::before,
.profile-demo-play.is-playing::after {
  content: "";
  width: 3px;
  height: 13px;
  background: currentColor;
}

.profile-demo-play.is-playing {
  grid-template-columns: repeat(2, 3px);
  gap: 4px;
}

.profile-demo-row > div:last-child {
  min-width: 0;
}

.profile-demo-row strong {
  display: block;
  color: #121212;
  font-size: 16px;
  font-weight: 600;
}

.profile-demo-row > div:last-child > span {
  display: block;
  margin-top: 5px;
  color: #7a8493;
  font-size: 14px;
}

.profile-demo-row input {
  width: 100%;
  height: 5px;
  margin: 18px 0 0;
  accent-color: #0877f9;
}

.profile-demo-row .player-meta {
  display: flex;
  justify-content: space-between;
  color: #7a8493;
  font-size: 10px;
}

.profile-review-module {
  padding: 16px;
}

.profile-review-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 22px;
}

.profile-review-head h2 {
  margin-bottom: 8px;
}

.profile-review-head .primary-button {
  width: 183px;
  height: 46px;
  min-height: 46px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
}

.voice-profile-page .review-summary {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 0;
  margin: 0;
  background: transparent;
}

.voice-profile-page .review-summary strong {
  color: #121212;
  font-size: 45px;
  font-weight: 500;
  line-height: 1;
}

.voice-profile-page .review-summary span {
  color: #8a94a5;
  font-size: 14px;
}

.review-comment-box {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 28px;
  gap: 16px;
  align-items: end;
  min-height: 121px;
  padding: 22px 16px;
  margin-bottom: 20px;
  background: #fafafa;
  border-radius: 10px;
}

.review-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #fff;
  font-size: 22px;
  background: #121212;
  border-radius: 50%;
}

.review-avatar.is-light {
  color: #83a1c9;
  background: #edf5ff;
  border: 1px solid #a9c5eb;
}

.review-comment-box label {
  display: grid;
  gap: 16px;
}

.review-comment-box label span {
  color: #121212;
  font-size: 14px;
}

.review-comment-box input {
  width: 100%;
  height: 47px;
  padding: 0 16px;
  color: #121212;
  font-size: 16px;
  background: #fff;
  border: 1px solid #8d9cb2;
  border-radius: 5px;
  outline: none;
}

.review-comment-box button {
  display: grid;
  width: 28px;
  height: 47px;
  place-items: center;
  color: #0877f9;
  background: transparent;
  border: 0;
}

.review-comment-box .segment-icon {
  width: 24px;
  height: 24px;
  fill: #0877f9;
  stroke-width: 0;
}

.voice-profile-page .review-list {
  gap: 20px;
}

.voice-profile-page .review-card {
  padding: 16px;
  color: #121212;
  background: #fafafa;
  border: 0;
  border-radius: 10px;
}

.voice-profile-page .review-card-head {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}

.voice-profile-page .review-card-head > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  align-items: baseline;
}

.voice-profile-page .review-card-head strong {
  color: #121212;
  font-size: 18px;
  font-weight: 600;
}

.voice-profile-page .review-card-head time {
  color: #758297;
  font-size: 14px;
  font-weight: 400;
}

.voice-profile-page .review-card-head .rating {
  color: #ffbd00;
  font-size: 14px;
}

.voice-profile-page .review-card-head small {
  margin-left: 2px;
  color: #758297;
}

.voice-profile-page .review-card p {
  max-width: 760px;
  margin: 18px 0 18px 92px;
  color: #121212;
  font-size: 16px;
  line-height: 1.45;
}

.voice-profile-page .review-card > button,
.review-reply button {
  margin-left: 92px;
  color: #121212;
  font-size: 14px;
  background: transparent;
  border: 0;
}

.review-reply {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 22px;
  max-width: 600px;
  margin: 22px 0 0 92px;
}

.review-reply p {
  margin: 8px 0 12px !important;
}

.review-reply button {
  margin-left: 0;
}

.profile-related-host {
  padding: 48px 0 40px;
}

.profile-related-section {
  padding: 0;
}

.profile-related-section h2 {
  margin-bottom: 26px;
  font-size: 36px;
  font-weight: 500;
}

.profile-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.profile-related-card {
  min-height: 136px;
  padding: 10px;
}

.related-card-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.related-avatars {
  position: relative;
  display: flex;
  width: 42px;
  height: 42px;
}

.related-avatars span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #cfe0f6;
  background: #edf5ff;
  border-radius: 6px;
}

.related-avatars span + span {
  margin-left: -12px;
}

.related-avatars .segment-icon {
  width: 20px;
  height: 20px;
}

.related-avatars i {
  position: absolute;
  right: 3px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: #53d66b;
  border: 2px solid #fff;
  border-radius: 50%;
}

.related-card-head strong,
.related-card-head small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.related-card-head strong {
  color: #121212;
  font-size: 13px;
  font-weight: 600;
}

.related-card-head small {
  color: #7b8798;
  font-size: 11px;
}

.related-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.related-tags span {
  min-height: 18px;
  padding: 3px 6px;
  color: #506072;
  font-size: 10px;
  background: #edf5ff;
  border-radius: 4px;
}

.related-tags .rating {
  color: #ffbd00;
}

.related-tags .is-online {
  color: #00a31b;
  background: #dcf8df;
}

.related-tags .is-offline {
  color: #f0444f;
  background: #fff0f1;
}

.related-tags.is-muted span {
  color: #506072;
}

.related-card-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px 28px;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.related-card-bottom strong,
.related-card-bottom small {
  display: block;
}

.related-card-bottom strong {
  color: #121212;
  font-size: 14px;
}

.related-card-bottom small {
  color: #7b8798;
  font-size: 10px;
}

.related-card-bottom button:not(.profile-icon-button) {
  height: 30px;
  color: #0877f9;
  font-size: 12px;
  font-weight: 600;
  background: #ebf3ff;
  border: 0;
  border-radius: 5px;
}

.related-card-bottom .profile-icon-button {
  width: 28px;
  height: 30px;
  background: #ebf3ff;
}

@media (max-width: 1180px) {
  .voice-profile-page .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .voice-profile-page .profile-main {
    padding-top: 88px;
  }

  .voice-profile-page .profile-hero-card {
    grid-template-columns: 1fr;
  }

  .voice-profile-page .availability-calendar,
  .profile-characteristic-grid,
  .profile-related-grid {
    grid-template-columns: 1fr;
  }

  .voice-profile-page .profile-order-box .primary-button,
  .voice-profile-page .profile-order-box .secondary-button {
    width: 100%;
  }
}

/* Dashboard SVG alignment + shared product player */
.account-profile-page {
  color: #121212;
  background: #f4f7fb;
}

.account-profile-page .account-profile-main {
  padding: 188px 0 0;
  background: #f4f7fb;
}

.account-profile-main > .page-grid {
  width: min(1396px, calc(100% - 44px));
  max-width: 1396px;
}

.account-profile-page .dashboard-shell {
  display: grid;
  grid-template-columns: 335px 690px minmax(260px, 1fr);
  gap: 20px;
  align-items: start;
  min-height: max(760px, calc(100vh - 188px));
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.account-profile-page .dashboard-sidebar {
  min-height: 562px;
  padding: 0;
  background: transparent;
  border: 0;
}

.account-profile-page .dashboard-sidebar-profile {
  display: none;
}

.account-profile-page .dashboard-nav {
  gap: 0;
  padding-top: 8px;
}

.account-profile-page .dashboard-nav::after,
.account-profile-page .dashboard-nav::before {
  display: none;
}

.account-profile-page .dashboard-nav-item:nth-child(7) {
  padding-top: 20px;
  margin-top: 14px;
  border-top: 1px solid #d4dae5;
}

.account-profile-page .dashboard-nav-item {
  min-height: 36px;
  padding: 6px 10px;
  color: #273140;
  background: transparent;
  border-radius: 6px;
}

.account-profile-page .dashboard-nav-item:hover,
.account-profile-page .dashboard-nav-item:focus-visible,
.account-profile-page .dashboard-nav-item.is-active {
  color: #367be3;
  background: #e7f1ff;
}

.account-profile-page .dashboard-nav-item span {
  font-size: 16px;
  font-weight: 500;
}

.account-profile-page .dashboard-nav-item b {
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  color: #367be3;
  font-size: 12px;
  line-height: 21px;
  background: #eaf2ff;
  border-color: #82b5ff;
}

.account-profile-page .dashboard-sidebar-foot {
  gap: 22px;
  padding-top: 22px;
  border-top: 1px solid #d4dae5;
}

.account-profile-page .dashboard-role-links {
  width: 335px;
  min-height: 76px;
  padding: 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: none;
}

.account-profile-page .dashboard-workspace {
  width: 690px;
  padding: 0;
}

.account-profile-page .dashboard-workspace-head {
  display: none;
}

.account-profile-page .dashboard-view {
  gap: 20px;
}

.account-profile-page .dashboard-profile-card,
.account-profile-page .dashboard-commission-card,
.account-profile-page .dashboard-onboarding-card,
.account-profile-page .dashboard-promo-card,
.account-profile-page .dashboard-history-card,
.account-profile-page .dashboard-order-card,
.account-profile-page .dashboard-chat-layout,
.account-profile-page .dashboard-review-card,
.account-profile-page .dashboard-favorite-card,
.account-profile-page .dashboard-form-card,
.account-profile-page .dashboard-table-card,
.account-profile-page .dashboard-chart-card,
.account-profile-page .dashboard-schedule-editor,
.account-profile-page .dashboard-finance-grid article,
.account-profile-page .dashboard-quick-grid > button {
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.account-profile-page .dashboard-profile-card {
  min-height: 120px;
  padding: 20px;
}

.account-profile-page .dashboard-avatar-wrap.is-large {
  width: 80px;
  height: 80px;
}

.account-profile-page .dashboard-avatar-wrap.is-xl {
  width: 80px;
  height: 80px;
}

.account-profile-page .dashboard-avatar-wrap img {
  border: 1px solid #7caeff;
}

.account-profile-page .dashboard-avatar-wrap i {
  width: 13px;
  height: 13px;
  right: 4px;
  bottom: 4px;
  background: #5cd76b;
}

.account-profile-page .dashboard-profile-person h2 {
  font-size: 20px;
  font-weight: 600;
}

.account-profile-page .dashboard-profile-person p {
  color: #8b98aa;
  font-size: 16px;
}

.account-profile-page .dashboard-card-grid,
.account-profile-page .dashboard-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 335px));
  gap: 20px;
}

.account-profile-page .dashboard-balance-card {
  min-height: 160px;
  padding: 20px;
  background: linear-gradient(135deg, #0877f9 0%, #06a6ff 100%);
  border: 0;
}

.account-profile-page .dashboard-balance-card > div span {
  font-size: 18px;
  font-weight: 600;
}

.account-profile-page .dashboard-balance-card > div strong {
  font-size: 30px;
  font-weight: 600;
}

.account-profile-page .dashboard-balance-card > button {
  height: 37px;
  min-height: 37px;
  color: #367be3;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
}

.account-profile-page .dashboard-promo-card {
  min-height: 160px;
  padding: 20px;
}

.account-profile-page .dashboard-promo-card h2,
.account-profile-page .dashboard-history-card h2,
.account-profile-page .dashboard-section-head h2 {
  font-size: 22px;
  font-weight: 600;
}

.account-profile-page .dashboard-promo-card p:not(.eyebrow) {
  font-size: 16px;
}

.account-profile-page .dashboard-promo-card input {
  height: 37px;
  font-size: 16px;
  border-color: #8d9cb2;
  box-shadow: none;
}

.account-profile-page .dashboard-promo-card input:focus,
.account-profile-page .dashboard-form-card input:focus,
.account-profile-page .dashboard-form-card select:focus,
.account-profile-page .dashboard-form-card textarea:focus,
.account-profile-page .dashboard-time-row input:focus,
.account-profile-page .dashboard-time-row select:focus {
  border-color: #367be3;
  box-shadow: 0 0 0 3px rgba(54, 123, 227, 0.12);
}

.account-profile-page .dashboard-history-card {
  min-height: 372px;
  padding: 20px;
}

.account-profile-page .dashboard-history-row {
  min-height: 86px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
}

.account-profile-page .dashboard-history-row strong {
  font-size: 20px;
  font-weight: 600;
}

.account-profile-page .dashboard-history-row small {
  font-size: 16px;
}

.account-profile-page .dashboard-history-row > b {
  font-size: 20px;
  font-weight: 600;
}

.account-profile-page .dashboard-commission-card {
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 120px;
  padding: 20px;
}

.account-profile-page .dashboard-commission-value strong {
  font-size: 44px;
  font-weight: 500;
}

.account-profile-page .dashboard-onboarding-card {
  min-height: 214px;
  padding: 20px;
}

.account-profile-page .dashboard-checklist button {
  min-height: 38px;
  color: #121212;
  background: #f6f8fb;
  border: 0;
}

.account-profile-page .dashboard-quick-grid > button {
  min-height: 158px;
  overflow: hidden;
}

.account-profile-page .dashboard-quick-grid strong {
  font-size: 20px;
}

.account-profile-page .dashboard-quick-grid small {
  font-size: 16px;
}

.dashboard-account-menu {
  grid-column: 3;
  width: 280px;
  justify-self: end;
  margin-top: 0;
  padding: 36px 16px 18px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 36px rgba(22, 34, 53, 0.11);
}

.dashboard-account-menu[hidden],
.dashboard-message-toast[hidden] {
  display: none;
}

.dashboard-account-close {
  position: absolute;
  transform: translate(238px, -24px);
  width: 28px;
  height: 28px;
  color: #a7b2c3;
  font-size: 30px;
  line-height: 1;
  background: transparent;
  border: 0;
}

.dashboard-account-hero {
  display: grid;
  grid-template-columns: 38px 80px 38px;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.dashboard-account-hero > button,
.dashboard-account-row,
.dashboard-account-nav button {
  color: #273140;
  background: transparent;
  border: 0;
}

.dashboard-account-hero > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #9fb1ca;
  background: #f3f7fe;
  border-radius: 50%;
}

.dashboard-account-title {
  display: grid;
  justify-items: center;
  margin-bottom: 22px;
}

.dashboard-account-title strong {
  font-size: 20px;
  font-weight: 600;
}

.dashboard-account-title span,
.dashboard-account-switch span,
.dashboard-account-nav button span {
  color: #7a8493;
}

.dashboard-account-nav {
  display: grid;
  gap: 1px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d4dae5;
}

.dashboard-account-nav button,
.dashboard-account-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 36px;
  padding: 6px 4px;
  text-align: left;
  border-radius: 6px;
}

.dashboard-account-nav button:hover,
.dashboard-account-nav button.is-active,
.dashboard-account-row:hover {
  color: #367be3;
  background: #e7f1ff;
}

.dashboard-account-switch {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 20px 4px 14px;
}

.dashboard-account-switch strong,
.dashboard-account-switch span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-message-toast {
  position: fixed;
  z-index: 28;
  right: max(24px, calc((100vw - 1396px) / 2 + 72px));
  bottom: 34px;
  width: 315px;
  padding: 14px 44px 14px 12px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(22, 34, 53, 0.16);
}

.dashboard-message-toast > button:first-child {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 0;
  color: #121212;
  text-align: left;
  background: transparent;
  border: 0;
}

.dashboard-toast-thumb {
  width: 54px;
  height: 54px;
  background: #d9d9d9;
  border-radius: 6px;
}

.dashboard-message-toast strong,
.dashboard-message-toast b,
.dashboard-message-toast p {
  display: block;
  margin: 0;
}

.dashboard-message-toast strong {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
}

.dashboard-message-toast b {
  color: #367be3;
  font-size: 14px;
}

.dashboard-message-toast p {
  color: #121212;
  font-size: 12px;
  line-height: 1.25;
}

.dashboard-toast-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  color: #a7b2c3;
  font-size: 26px;
  line-height: 1;
  background: transparent;
  border: 0;
}

.global-audio-player {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 20px;
  width: min(960px, calc(100vw - 44px));
  transform: translate(-50%, 120%);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  opacity: 0;
}

.global-audio-player.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.global-player-core {
  display: grid;
  grid-template-areas: "play voice track download close";
  grid-template-columns: 54px minmax(210px, 270px) minmax(220px, 1fr) 42px 32px;
  gap: 16px;
  align-items: center;
  min-height: 78px;
  padding: 12px 14px;
  color: #121212;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(54, 123, 227, 0.18);
  border-radius: 16px;
  box-shadow: 0 20px 70px rgba(17, 45, 86, 0.22);
  backdrop-filter: blur(18px);
}

.global-player-play {
  grid-area: play;
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  color: #fff;
  background: #0877f9;
  border: 0;
  border-radius: 50%;
}

.global-player-play span {
  width: 15px;
  height: 20px;
  margin-left: 4px;
  background: currentColor;
  border: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.global-audio-player.is-playing .global-player-play span {
  width: 16px;
  height: 18px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65% 100%);
}

.global-player-voice {
  grid-area: voice;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.global-player-avatar {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
}

.global-player-avatar img,
.global-player-avatar > span:not(.voice-presence) {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  object-fit: cover;
  border-radius: 10px;
}

.global-player-avatar .voice-presence {
  right: -4px;
  bottom: -4px;
}

.global-player-voice strong,
.global-player-voice small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-player-voice strong {
  font-size: 16px;
  font-weight: 600;
}

.global-player-voice small {
  margin-top: 4px;
  color: #758297;
  font-size: 13px;
}

.global-player-track {
  grid-area: track;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.global-player-track input {
  width: 100%;
  height: 6px;
  accent-color: #0877f9;
  border: 0;
  outline: none;
}

.global-player-track div {
  display: flex;
  justify-content: space-between;
  color: #758297;
  font-size: 12px;
}

.global-player-download,
.global-player-close {
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
}

.global-player-download {
  grid-area: download;
  width: 42px;
  height: 42px;
  color: #0877f9;
  background: #ebf3ff;
  border-radius: 10px;
}

.global-player-download svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.global-player-close {
  grid-area: close;
  width: 32px;
  height: 32px;
  color: #98a5b8;
  font-size: 28px;
  line-height: 1;
}

.profile-demo-row {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  min-height: 66px;
  padding: 7px;
  background: #f7f9fd;
  border-radius: 10px;
}

.profile-demo-avatar {
  width: 52px;
  height: 52px;
}

.profile-demo-play {
  left: 18px;
  top: 18px;
  width: 24px;
  height: 24px;
}

.profile-demo-row input {
  margin-top: 10px;
  border: 0;
  outline: none;
}

.profile-demo-play:focus {
  outline: none;
}

.profile-demo-play:focus-visible {
  box-shadow: 0 0 0 3px rgba(8, 119, 249, 0.18);
}

.home-slider-arrow.is-prev {
  left: 30px;
  transform: none;
}

.home-slider-arrow.is-next {
  right: 30px;
  transform: none;
}

.home-slide-copy {
  transform: translateX(34px);
}

.home-slide > img {
  left: 6%;
  top: 30px;
  width: 156%;
  height: 112%;
  object-position: 72% 68%;
}

.home-slide-overlay {
  inset: 0;
  background: rgba(0, 102, 240, 0.82);
}

.home-advantage-grid article {
  min-height: 136px;
  padding: 22px;
}

.home-advantage-grid article > span {
  width: 60px;
  height: 60px;
  border-radius: 8px;
}

.home-advantage-grid strong {
  font-size: 20px;
  font-weight: 600;
}

.home-advantage-grid p {
  font-size: 16px;
}

.home-voice-collection {
  min-height: 540px;
}

.home-voice-row {
  min-height: 118px;
  padding: 10px;
}

.home-mini-player {
  margin-top: 8px;
}

.home-mini-player input,
.home-audio-demo input,
.profile-demo-row input {
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

.home-audio-demo {
  grid-template-columns: 42px minmax(0, 1fr);
}

.home-audio-demo > div {
  grid-template-columns: minmax(92px, 150px) minmax(0, 1fr) 42px;
}

.segment-footer-bottom {
  grid-template-columns: 250px minmax(430px, 1fr) auto;
  min-height: 76px;
}

.segment-payments {
  gap: 9px;
}

.segment-payments img {
  width: 40px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.segment-catalog-button {
  gap: 10px;
  padding-inline: 15px;
}

.catalog-toggle-icon {
  width: 18px;
  height: 16px;
  flex: 0 0 18px;
}

.catalog-toggle-icon i {
  width: 18px;
  height: 2px;
  border-radius: 99px;
}

.catalog-toggle-icon i:nth-child(1) { top: 2px; }
.catalog-toggle-icon i:nth-child(2) { top: 7px; }
.catalog-toggle-icon i:nth-child(3) { top: 12px; }

.segment-catalog-button[aria-expanded="true"] .catalog-toggle-icon i:nth-child(1),
.segment-catalog-button[aria-expanded="true"] .catalog-toggle-icon i:nth-child(3) {
  top: 7px;
}

.segment-catalog-menu {
  left: 0;
  right: 0;
  width: 100%;
  transform: translateY(-10px);
}

.segment-catalog-menu.is-open {
  transform: translateY(0);
}

.segment-catalog-menu-grid {
  width: min(1396px, calc(100% - 44px));
  max-width: 1396px;
  margin-left: max(22px, calc((100vw - 1396px) / 2));
  margin-right: auto;
  padding: 28px 0 34px;
}

.segment-catalog-voice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px 28px;
}

.segment-catalog-voice-grid a {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  min-height: 56px;
}

.segment-catalog-voice-grid a > span,
.segment-catalog-service-grid a > span,
.segment-catalog-service-grid button > span {
  width: 52px;
  height: 52px;
}

.segment-catalog-voice-grid img,
.segment-catalog-service-grid img {
  width: 52px;
  height: 52px;
}

.segment-catalog-voice-grid b {
  overflow: hidden;
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-catalog-service-grid a,
.segment-catalog-service-grid button {
  min-height: 70px;
  padding: 10px 12px;
}

.home-slider-arrow {
  z-index: 6;
}

.home-slider-arrow.is-prev {
  left: 22px;
  transform: none;
}

.home-slider-arrow.is-next {
  right: 22px;
  transform: none;
}

.home-slide-copy {
  width: 600px;
  padding-left: 44px;
  transform: translateX(84px);
}

.profile-demo-row[hidden] {
  display: none !important;
}

.profile-demo-row {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 15px;
  min-height: 84px;
  padding: 10px;
}

.profile-demo-avatar {
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.profile-demo-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.profile-demo-play {
  left: 26px;
  top: calc(50% - 16px);
  width: 32px;
  height: 32px;
  box-shadow: 0 8px 18px rgba(8, 119, 249, 0.2);
  transform: none;
}

.profile-demo-play .segment-icon {
  width: 14px;
  height: 14px;
}

.profile-demo-tabs button {
  cursor: pointer;
}

/* Header/account/chronometer refinements from latest SVG references */
.site-header.segment-header {
  height: 150px;
  z-index: 220;
  border-bottom-color: #d4dae5;
}

.site-header.segment-header.is-compact {
  height: 110px;
}

.segment-utility {
  height: 40px;
  background: #f7f9fd;
}

.segment-utility-inner {
  height: 40px;
}

.segment-mainbar {
  height: 110px;
}

.site-header.segment-header.is-compact .segment-mainbar {
  transform: translateY(-40px);
}

.segment-mainbar-inner {
  grid-template-columns: 216px 126px minmax(320px, 1fr) auto;
  gap: 20px;
  height: 110px;
}

.segment-header-actions {
  gap: 18px;
  min-width: 278px;
}

.segment-header-actions .notification-button {
  width: 32px;
  height: 32px;
  color: #a7b2c2;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.segment-header-actions .notification-button .segment-icon {
  width: 32px;
  height: 32px;
  stroke-width: 2;
}

.segment-header-actions .notification-badge {
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  background: #e34848;
  border: 2px solid #fff;
}

.segment-balance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-width: 126px;
  padding: 0;
  color: #121212;
  text-decoration: none;
  background: transparent;
  border: 0;
}

.segment-balance:hover,
.segment-balance:focus-visible {
  color: #0877f9;
  outline: none;
}

.segment-balance small {
  grid-column: 1;
  color: #367be3;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
}

.segment-balance strong {
  grid-column: 1;
  color: #121212;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}

.segment-balance-eye {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: #acb4bd;
}

.segment-balance-eye svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-profile-wrap {
  position: relative;
}

.segment-header-actions .user-chip {
  display: grid;
  width: 46px;
  height: 46px;
  min-height: 46px;
  padding: 0;
  place-items: center;
  background: #e2e2e2;
  border: 1px solid #367be3;
  border-radius: 50%;
  box-shadow: none;
}

.segment-header-actions .user-chip img {
  width: 41px;
  height: 41px;
  border: 2px solid #fff;
}

.segment-header-actions .user-chip span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.segment-header-actions .user-chip:hover,
.segment-header-actions .user-chip:focus-visible {
  background: #edf4ff;
  outline: none;
}

.segment-profile-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 75;
  width: 286px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(54, 123, 227, 0.12);
  border-radius: 10px;
  box-shadow: 0 18px 46px rgba(22, 34, 53, 0.16);
  transform: translateY(-6px);
  transform-origin: top right;
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.segment-profile-dropdown.is-open {
  transform: translateY(0);
  opacity: 1;
}

.segment-profile-dropdown[hidden] {
  display: none;
}

.segment-profile-summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 4px 4px 14px;
  border-bottom: 1px solid #e5ebf4;
}

.segment-profile-summary img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 2px solid #dce9ff;
  border-radius: 50%;
}

.segment-profile-summary strong,
.segment-profile-summary span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-profile-summary strong {
  font-size: 16px;
  font-weight: 600;
}

.segment-profile-summary span {
  margin-top: 3px;
  color: #738193;
  font-size: 13px;
}

.segment-profile-dropdown nav {
  display: grid;
  gap: 2px;
  padding: 10px 0;
}

.segment-profile-dropdown a,
.segment-profile-dropdown > button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 9px;
  color: #273140;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 7px;
}

.segment-profile-dropdown a:hover,
.segment-profile-dropdown a:focus-visible,
.segment-profile-dropdown > button:hover,
.segment-profile-dropdown > button:focus-visible {
  color: #0877f9;
  background: #ebf3ff;
  outline: none;
}

.segment-profile-dropdown .segment-icon {
  width: 20px;
  height: 20px;
}

.segment-profile-dropdown b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  font-size: 12px;
  background: #e34848;
  border-radius: 99px;
}

.segment-catalog-menu {
  top: 150px;
  z-index: 230;
  max-height: calc(100vh - 150px);
}

.site-header.segment-header.is-compact .segment-catalog-menu {
  top: 110px;
  max-height: calc(100vh - 110px);
}

.account-profile-page .account-profile-main {
  padding-top: 188px;
}

.account-profile-page .dashboard-shell {
  grid-template-columns: 335px minmax(0, 1fr);
  gap: 20px;
}

.account-profile-page .dashboard-workspace {
  width: auto;
  min-width: 0;
}

.account-profile-page .dashboard-card-grid,
.account-profile-page .dashboard-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-profile-page .dashboard-settings-grid,
.account-profile-page .dashboard-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-profile-page .dashboard-form-card.is-wide,
.account-profile-page .dashboard-promo-card.is-wide {
  grid-column: 1 / -1;
}

.dashboard-message-toast {
  z-index: 65;
  right: max(24px, calc((100vw - 1396px) / 2 + 22px));
}

.dashboard-toast-thumb {
  position: relative;
  background: #e9f2ff;
}

.dashboard-toast-thumb::before {
  content: "";
  position: absolute;
  inset: 16px;
  background: #367be3;
  border-radius: 50%;
  box-shadow: 0 0 0 9px rgba(54, 123, 227, 0.13);
}

.chronometer-page {
  background: #f7f9fd;
}

.chronometer-main {
  padding-top: 150px;
  background: #f7f9fd;
}

.chronometer-section {
  min-height: 622px;
  padding: 24px 0 90px;
}

.chronometer-grid {
  grid-template-columns: minmax(0, 924px) 452px;
  gap: 20px;
  width: min(1396px, calc(100% - 44px));
  max-width: 1396px;
}

.chronometer-grid .script-workbench {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.chronometer-grid .section-heading.compact {
  max-width: 760px;
  margin-bottom: 34px;
}

.chronometer-grid .section-heading.compact .eyebrow {
  margin-bottom: 8px;
  color: #367be3;
  font-size: 17px;
}

.chronometer-grid .section-heading.compact h1 {
  max-width: 720px;
  margin: 0 0 16px;
  color: #121212;
  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 600;
  line-height: 1.04;
}

.chronometer-grid .section-heading.compact p:not(.eyebrow) {
  max-width: 710px;
  color: #738193;
  font-size: 18px;
  line-height: 1.45;
}

.chronometer-grid .field-label {
  margin-bottom: 10px;
  color: #121212;
  font-size: 18px;
  font-weight: 600;
}

.chronometer-grid textarea {
  min-height: 178px;
  padding: 18px 20px;
  color: #121212;
  font-size: 18px;
  line-height: 1.48;
  background: #fff;
  border: 1px solid #d4dae5;
  border-radius: 6px;
  box-shadow: none;
  resize: vertical;
}

.chronometer-grid textarea:focus {
  border-color: #367be3;
  box-shadow: 0 0 0 3px rgba(54, 123, 227, 0.1);
  outline: none;
}

.chronometer-controls {
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  margin-top: 18px;
}

.chronometer-controls select,
.chronometer-controls .segmented-control {
  min-height: 46px;
  border-color: #d4dae5;
  border-radius: 6px;
  box-shadow: none;
}

.chronometer-result-panel {
  position: static;
  display: grid;
  gap: 20px;
  margin-top: 219px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.chronometer-result-panel > .panel-kicker,
.chronometer-result-panel > h2,
.chronometer-result-panel > .brief-row {
  display: none;
}

.chronometer-estimate {
  display: grid;
  grid-template-columns: repeat(2, 216px);
  gap: 20px;
  margin: 0;
}

.chronometer-estimate > div {
  display: grid;
  min-height: 0;
  height: 73px;
  padding: 10px 16px;
  align-content: center;
  background: #fff;
  border: 0;
  border-radius: 6px;
  box-sizing: border-box;
  box-shadow: none;
}

.chronometer-estimate > div:last-child {
  grid-column: auto;
  display: grid;
  justify-content: stretch;
  padding: 10px 16px;
}

.chronometer-estimate span {
  color: #738193;
  font-size: 15px;
  font-weight: 500;
}

.chronometer-estimate strong {
  color: #121212;
  font-size: 21px;
  font-weight: 600;
}

.chronometer-result-panel .wide-button {
  width: 452px;
  height: 46px;
  min-height: 46px;
  padding: 0 20px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .account-profile-page .dashboard-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .account-profile-page .dashboard-workspace {
    width: auto;
  }

  .dashboard-account-menu {
    display: none;
  }

  .chronometer-grid {
    grid-template-columns: 1fr;
  }

  .chronometer-result-panel {
    margin-top: 0;
  }

  .chronometer-estimate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chronometer-result-panel .wide-button {
    width: 100%;
  }

  .chronometer-text-card + .chronometer-result-panel {
    margin-top: 20px;
  }
}

@media (max-width: 780px) {
  .segment-catalog-menu-grid {
    width: min(100% - 28px, var(--container));
    margin-inline: auto;
  }

  .segment-catalog-voice-grid,
  .segment-catalog-service-grid {
    grid-template-columns: 1fr;
  }

  .home-slide-copy {
    width: 100%;
    padding-left: 26px;
    transform: none;
  }

  .home-slider-arrow.is-prev {
    left: 12px;
  }

  .home-slider-arrow.is-next {
    right: 12px;
  }

  .account-profile-page .account-profile-main {
    padding-top: 104px;
  }

  .account-profile-page .dashboard-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .account-profile-page .dashboard-sidebar,
  .account-profile-page .dashboard-role-links {
    width: 100%;
  }

  .account-profile-page .dashboard-card-grid,
  .account-profile-page .dashboard-quick-grid,
  .account-profile-page .dashboard-onboarding-card,
  .account-profile-page .dashboard-settings-grid,
  .account-profile-page .dashboard-feature-grid,
  .chronometer-controls,
  .chronometer-estimate {
    grid-template-columns: 1fr;
  }

  .chronometer-main {
    padding-top: 104px;
  }

  .chronometer-section {
    padding-top: 24px;
  }

  .global-player-core {
    grid-template-areas:
      "play voice close"
      "track track track";
    grid-template-columns: 48px minmax(0, 1fr) 34px;
  }

  .global-player-download {
    display: none;
  }
}

/* Account header panels from the latest cabinet SVG references */
.segment-header-actions {
  min-width: 332px;
}

.segment-balance {
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-rows: auto;
  column-gap: 8px;
  align-items: center;
  min-width: 132px;
}

.segment-balance-link {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #121212;
  text-decoration: none;
}

.segment-balance-link:hover,
.segment-balance-link:focus-visible {
  color: #0877f9;
  outline: none;
}

.segment-balance-toggle {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  color: #a7b2c2;
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.segment-balance-toggle:hover,
.segment-balance-toggle:focus-visible {
  color: #367be3;
  background: #ebf3ff;
  outline: none;
}

.segment-balance-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-balance-toggle .eye-slash {
  opacity: 0;
}

.segment-balance[data-balance-hidden="true"] .segment-balance-toggle .eye-slash {
  opacity: 1;
}

.segment-balance[data-balance-hidden="true"] .segment-balance-toggle .eye-pupil {
  opacity: 0;
}

.segment-profile-dropdown {
  top: calc(100% + 6px);
  right: -20px;
  width: 320px;
  height: 557px;
  min-height: 557px;
  padding: 16px 20px 24px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  box-shadow: none;
  transform: translateY(-8px);
}

.segment-profile-dropdown.is-open {
  transform: translateY(0);
}

.segment-profile-card {
  display: flex;
  width: 280px;
  height: 517px;
  min-height: 517px;
  padding: 18px 18px 16px;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.segment-profile-hero {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 12px;
  align-items: center;
}

.segment-profile-avatar {
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
  justify-self: center;
}

.segment-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 2px solid #dce9ff;
  border-radius: 50%;
}

.segment-profile-avatar i {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 13px;
  height: 13px;
  background: #5cd76b;
  border: 2px solid #fff;
  border-radius: 50%;
}

.segment-profile-card .segment-profile-mini-action,
.segment-profile-card .segment-profile-nav a,
.segment-profile-card .segment-profile-mode a,
.segment-profile-card .segment-profile-logout {
  color: #273140;
  text-decoration: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.segment-profile-card .segment-profile-mini-action {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 34px;
  min-height: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  background: #ebf3ff;
  border-radius: 10px;
}

.segment-profile-card .segment-icon {
  width: 20px;
  height: 20px;
  color: #367be3;
}

.segment-profile-caption {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  text-align: center;
}

.segment-profile-caption strong {
  overflow: hidden;
  color: #121212;
  font-size: 18px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-profile-caption span {
  overflow: hidden;
  color: #738193;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-profile-nav {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 0;
}

.segment-profile-card .segment-profile-nav a,
.segment-profile-card .segment-profile-mode a,
.segment-profile-card .segment-profile-logout {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 7px 10px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  border-radius: 8px;
}

.segment-profile-card .segment-profile-nav a:hover,
.segment-profile-card .segment-profile-nav a:focus-visible,
.segment-profile-card .segment-profile-mode a:hover,
.segment-profile-card .segment-profile-mode a:focus-visible,
.segment-profile-card .segment-profile-logout:hover,
.segment-profile-card .segment-profile-logout:focus-visible,
.segment-profile-card .segment-profile-mini-action:hover,
.segment-profile-card .segment-profile-mini-action:focus-visible {
  color: #0877f9;
  background: #ebf3ff;
  outline: none;
}

.segment-profile-card b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  color: #fff;
  font-size: 12px;
  background: #e34848;
  border-radius: 99px;
}

.segment-profile-mode {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px solid #e6edf6;
}

.segment-profile-mode > span {
  color: #738193;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.segment-profile-card .segment-profile-mode a b {
  display: block;
  height: auto;
  color: inherit;
  font-size: 14px;
  text-align: left;
  background: transparent;
  border-radius: 0;
}

.segment-profile-card .segment-profile-logout {
  min-height: 38px;
  margin-top: 10px;
  color: #e34848;
}

.segment-profile-card .segment-profile-logout .segment-icon {
  color: currentColor;
}

.account-profile-page .dashboard-shell {
  grid-template-columns: 318px minmax(0, 1fr);
}

.account-profile-page .dashboard-sidebar {
  width: 318px;
}

.account-profile-page .dashboard-role-links {
  width: 318px;
}

.dashboard-notification-drawer {
  z-index: 88;
  top: 150px;
  right: max(20px, calc((100vw - 1396px) / 2 + 20px));
  width: min(376px, calc(100vw - 28px));
  max-height: calc(100vh - 172px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.site-header.segment-header.is-compact ~ .account-profile-main .dashboard-notification-drawer {
  top: 110px;
}

.dashboard-notification-drawer > header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid #e8eef6;
}

.dashboard-notification-drawer header p {
  color: #367be3;
  font-size: 12px;
  letter-spacing: 0;
}

.dashboard-notification-drawer header h2 {
  margin-top: 3px;
  font-size: 20px;
  font-weight: 600;
}

.dashboard-notification-drawer header button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #b9b9b9;
  font-size: 24px;
  line-height: 1;
  border-radius: 8px;
}

.dashboard-notification-drawer header button:hover,
.dashboard-notification-drawer header button:focus-visible {
  color: #367be3;
  background: #ebf3ff;
  outline: none;
}

.dashboard-notification-drawer > div {
  display: grid;
  gap: 0;
  max-height: min(520px, calc(100vh - 280px));
  padding: 6px 12px 0;
  margin: 0;
  overflow-y: auto;
}

.dashboard-notification-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 8px;
  border-bottom: 1px solid #edf2f8;
}

.dashboard-notification-item > span {
  width: 38px;
  height: 38px;
  color: #367be3;
  background: #ebf3ff;
  border-radius: 10px;
}

.dashboard-notification-item strong {
  color: #121212;
  font-size: 15px;
  font-weight: 600;
}

.dashboard-notification-item p {
  margin: 4px 0 5px;
  color: #657185;
  font-size: 13px;
  line-height: 1.35;
}

.dashboard-notification-item small {
  color: #98a4b5;
  font-size: 12px;
}

.dashboard-notification-drawer > .secondary-button {
  width: calc(100% - 40px);
  height: 40px;
  min-height: 40px;
  margin: 14px 20px 20px;
  border-radius: 6px;
  box-shadow: none;
}

.auth-modal {
  place-items: stretch end;
  padding: 0;
}

.auth-modal-backdrop {
  background: rgba(18, 28, 43, 0.3);
  backdrop-filter: none;
}

.auth-modal-panel.auth-side-panel {
  position: relative;
  display: block;
  width: 376px;
  max-width: 100vw;
  min-height: 100vh;
  height: 100vh;
  padding: 0 20px 28px;
  overflow-y: auto;
  color: #121212;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: -18px 0 44px rgba(18, 31, 50, 0.14);
  animation: auth-panel-in 220ms ease both;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.auth-modal-panel.auth-side-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@keyframes auth-panel-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.auth-panel-close {
  position: absolute;
  z-index: 4;
  top: 4px;
  right: 2px;
  display: grid;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  place-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.auth-panel-close > *,
.auth-panel-close .auth-frame-close-icon {
  pointer-events: none;
}

.auth-panel-close span {
  position: absolute;
  top: 11px;
  left: 2px;
  width: 20px;
  height: 2px;
  background: #b9b9b9;
  border-radius: 1px;
}

.auth-panel-close span:first-child {
  transform: rotate(45deg);
}

.auth-panel-close span:last-child {
  transform: rotate(-45deg);
}

.auth-panel-close:hover span,
.auth-panel-close:focus-visible span {
  background: #367be3;
}

.auth-panel-intro {
  padding-top: 96px;
}

.auth-panel-intro .eyebrow {
  margin: 0 0 8px;
  color: #367be3;
  font-size: 13px;
  letter-spacing: 0;
}

.auth-modal-panel.auth-side-panel h2 {
  margin: 0;
  color: #121212;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

.auth-panel-intro p:not(.eyebrow) {
  margin: 10px 0 0;
  color: #738193;
  font-size: 14px;
  line-height: 1.45;
}

.auth-modal-panel .auth-email-form {
  gap: 12px;
  margin-top: 80px;
}

.auth-modal-panel .auth-field {
  position: relative;
}

.auth-modal-panel .auth-field > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.auth-modal-panel .auth-input-shell {
  grid-template-columns: minmax(0, 1fr);
  width: 334px;
  min-height: 36px;
  height: 36px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid #738193;
  border-radius: 6px;
  box-shadow: none;
}

.auth-modal-panel .auth-input-shell:focus-within {
  border-color: #367be3;
  box-shadow: none;
}

.auth-modal-panel .auth-field-icon {
  display: none;
}

.auth-modal-panel .auth-input-shell input {
  min-height: 34px;
  color: #121212;
  font-size: 14px;
}

.auth-modal-panel .auth-input-shell input::placeholder {
  color: #8b98aa;
}

.auth-modal-panel #authEmailSubmit {
  width: 334px;
  height: 36px;
  min-height: 36px;
  margin-top: 8px;
  padding: 0 18px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  background: #367be3;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.auth-modal-panel #authEmailSubmit:hover,
.auth-modal-panel #authEmailSubmit:focus-visible {
  background: #0877f9;
  box-shadow: none;
}

.auth-modal-note {
  width: 334px;
  margin: 10px 0 0;
  color: #657185;
  font-size: 14px;
  line-height: 1.4;
}

.auth-provider-grid {
  display: grid;
  gap: 12px;
  margin-top: 41px;
}

.auth-provider-button {
  width: 334px;
  min-height: 36px;
  height: 36px;
  grid-template-columns: 20px minmax(0, auto);
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.auth-provider-button:hover,
.auth-provider-button:focus-visible {
  box-shadow: none;
  outline: none;
}

.auth-provider-button .provider-icon,
.auth-provider-button .provider-icon svg {
  width: 20px;
  height: 20px;
}

.yandex-auth-button {
  color: #fff;
  background: #01a229;
}

.yandex-auth-button:hover,
.yandex-auth-button:focus-visible {
  background: #079528;
}

.vk-auth-button {
  color: #367be3;
  background: #ebf3ff;
}

.vk-auth-button:hover,
.vk-auth-button:focus-visible {
  color: #0877f9;
  background: #dfeeff;
}

.auth-mode-tabs,
.auth-role-toggle {
  width: 334px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin-top: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.auth-mode-tabs button,
.auth-role-toggle button {
  min-height: 36px;
  color: #367be3;
  font-size: 14px;
  font-weight: 600;
  background: #ebf3ff;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.auth-mode-tabs button.is-active,
.auth-role-toggle button.is-active {
  color: #fff;
  background: #367be3;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .account-profile-page .dashboard-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .account-profile-page .dashboard-sidebar,
  .account-profile-page .dashboard-role-links {
    width: 260px;
  }
}

@media (max-width: 780px) {
  .segment-header-actions {
    min-width: 0;
  }

  .segment-profile-dropdown {
    right: -12px;
    width: min(320px, calc(100vw - 24px));
    padding-inline: 0;
  }

  .segment-profile-card {
    width: min(280px, calc(100vw - 64px));
    margin-inline: auto;
  }

  .account-profile-page .dashboard-sidebar,
  .account-profile-page .dashboard-role-links {
    width: 100%;
  }

  .dashboard-notification-drawer {
    top: 104px;
    right: 14px;
  }
}

/* Header alignment and Frame 23 auth panel transfer */
.segment-mainbar-inner {
  grid-template-columns: 216px 126px minmax(260px, 1fr) max-content;
  gap: 14px;
}

.segment-header-search {
  width: 100%;
  max-width: none;
}

.segment-header-actions {
  min-width: 0;
  gap: 14px;
  justify-content: flex-end;
}

.segment-header-actions .ghost-button,
.segment-header-actions .auth-trigger {
  width: auto;
  min-width: 156px;
  padding-inline: 18px;
  white-space: nowrap;
}

.account-profile-page .segment-mainbar-inner {
  grid-template-columns: 216px 126px minmax(300px, 1fr) max-content;
}

.account-profile-page .segment-header-actions {
  min-width: 306px;
  gap: 14px;
}

.account-profile-page .segment-balance {
  min-width: 124px;
}

.auth-panel-close {
  top: 14px;
  right: 12px;
  display: grid;
  place-items: center;
  color: #b9b9b9;
}

.auth-panel-close span {
  display: none;
}

.auth-frame-close-icon {
  width: 24px;
  height: 22px;
  display: block;
}

.auth-panel-close:hover,
.auth-panel-close:focus-visible {
  color: #367be3;
  outline: none;
}

.auth-modal-panel #authEmailSubmit {
  background: linear-gradient(112deg, #0066ff 1.95%, #0094ff 100%);
}

.auth-modal-panel #authEmailSubmit:hover,
.auth-modal-panel #authEmailSubmit:focus-visible {
  background: #0877f9;
}

.auth-provider-grid {
  width: 334px;
}

.auth-provider-button,
.auth-social-button {
  display: grid;
  align-items: center;
  justify-content: center;
}

.auth-provider-button {
  grid-template-columns: 20px minmax(0, auto);
}

.auth-provider-button-wide {
  grid-template-columns: minmax(0, auto);
}

.auth-provider-button .provider-icon,
.auth-social-button .provider-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
}

.auth-frame-provider-icon,
.auth-provider-button .provider-icon svg,
.auth-social-button .provider-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.yandex-auth-button .provider-icon {
  color: #fff;
}

.auth-social-grid {
  display: grid;
  width: 334px;
  grid-template-columns: 161px 161px;
  gap: 12px;
  margin-top: 12px;
}

.auth-social-button {
  width: 161px;
  height: 36px;
  min-height: 36px;
  grid-template-columns: 20px max-content;
  gap: 8px;
  padding: 0 12px;
  color: #367be3;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: #ebf3ff;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.auth-social-button span:not(.provider-icon):first-child:last-child {
  grid-column: 1 / -1;
}

.auth-social-button:hover,
.auth-social-button:focus-visible {
  color: #0877f9;
  background: #dfeeff;
  outline: none;
}

.auth-panel-switch {
  margin-top: 14px;
}

.auth-panel-switch button {
  min-height: 34px;
}

@media (max-width: 1180px) {
  .segment-mainbar-inner,
  .account-profile-page .segment-mainbar-inner {
    grid-template-columns: 190px 122px minmax(220px, 1fr) max-content;
  }

  .account-profile-page .segment-header-actions {
    min-width: 282px;
  }
}

@media (max-width: 780px) {
  .segment-mainbar-inner,
  .account-profile-page .segment-mainbar-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

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

  .auth-modal-panel.auth-side-panel {
    width: min(376px, 100vw);
  }
}

/* Final shared polish: header controls, demo players, advantages and footer. */
.segment-catalog-button,
.segment-header-search input,
.segment-header-actions .ghost-button,
.segment-header-actions .auth-trigger {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
}

.segment-catalog-button {
  min-height: 46px;
  gap: 9px;
  padding-inline: 15px;
}

.segment-header-search input {
  height: 44px;
  padding-inline: 16px 10px;
  line-height: 44px;
}

.segment-header-actions .ghost-button,
.segment-header-actions .auth-trigger {
  min-height: 46px;
  line-height: 1.1;
}

.segment-catalog-voice-grid b,
.segment-catalog-service-grid b {
  font-size: 17px;
  font-weight: 500;
}

.player-button,
.home-mini-play,
.profile-demo-play,
.global-player-play {
  --play-size: 40px;
  position: relative;
  display: grid;
  width: var(--play-size);
  height: var(--play-size);
  min-width: var(--play-size);
  min-height: var(--play-size);
  place-items: center;
  color: #fff;
  background: var(--cobalt);
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms ease,
    color 180ms ease;
}

.player-button:hover,
.home-mini-play:hover,
.profile-demo-play:hover,
.global-player-play:hover,
.player-button:focus-visible,
.home-mini-play:focus-visible,
.profile-demo-play:focus-visible,
.global-player-play:focus-visible {
  background: var(--cobalt-700);
  outline: none;
  transform: translateY(-1px);
}

.player-button:active,
.home-mini-play:active,
.profile-demo-play:active,
.global-player-play:active {
  transform: translateY(0) scale(0.96);
}

.player-button {
  --play-size: 40px;
}

.home-mini-play {
  --play-size: 36px;
}

.home-audio-demo .home-mini-play {
  --play-size: 34px;
}

.profile-demo-play {
  --play-size: 34px;
}

.global-player-play {
  --play-size: 52px;
}

.profile-demo-play .segment-icon {
  width: 0;
  height: 0;
  opacity: 0;
}

.player-button::before,
.home-mini-play::before,
.profile-demo-play::before,
.global-player-play span {
  content: "";
  width: 11px;
  height: 14px;
  margin-left: 3px;
  background: currentColor;
  border: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition:
    width 160ms ease,
    height 160ms ease,
    margin 160ms ease,
    background-color 160ms ease,
    clip-path 160ms ease;
}

.global-player-play span {
  display: block;
}

.global-player-play span {
  width: 14px;
  height: 18px;
}

.player-button.is-playing::before,
.home-mini-play.is-playing::before,
.profile-demo-play.is-playing::before,
.global-audio-player.is-playing .global-player-play span {
  width: 13px;
  height: 15px;
  margin-left: 0;
  background:
    linear-gradient(currentColor, currentColor) left center / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 4px 100% no-repeat;
  border: 0;
  border-radius: 1px;
  clip-path: none;
}

.global-audio-player.is-playing .global-player-play span {
  width: 15px;
  height: 18px;
  background:
    linear-gradient(currentColor, currentColor) left center / 5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 5px 100% no-repeat;
}

.profile-demo-play.is-playing::after {
  content: none;
}

.voice-card.is-selected .player-button {
  color: #fff;
  background: var(--cobalt);
}

.voice-card.is-selected .player-button:hover,
.voice-card.is-selected .player-button:focus-visible {
  background: var(--cobalt-700);
}

.player,
.home-mini-player,
.home-audio-demo,
.profile-demo-row,
.global-player-track {
  --range-progress: 0%;
}

.player-range,
.home-mini-player input[type="range"],
.home-audio-demo input[type="range"],
.profile-demo-row input[type="range"],
.global-player-track input[type="range"] {
  appearance: none;
  width: 100%;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  accent-color: var(--cobalt);
}

.player-range::-webkit-slider-runnable-track,
.home-mini-player input[type="range"]::-webkit-slider-runnable-track,
.home-audio-demo input[type="range"]::-webkit-slider-runnable-track,
.profile-demo-row input[type="range"]::-webkit-slider-runnable-track,
.global-player-track input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background:
    linear-gradient(
      90deg,
      var(--cobalt) 0 var(--range-progress),
      #e7edf6 var(--range-progress) 100%
    );
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.player-range::-webkit-slider-thumb,
.home-mini-player input[type="range"]::-webkit-slider-thumb,
.home-audio-demo input[type="range"]::-webkit-slider-thumb,
.profile-demo-row input[type="range"]::-webkit-slider-thumb,
.global-player-track input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -3px;
  background: var(--cobalt);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(8, 119, 249, 0.16);
}

.player-range::-moz-range-track,
.home-mini-player input[type="range"]::-moz-range-track,
.home-audio-demo input[type="range"]::-moz-range-track,
.profile-demo-row input[type="range"]::-moz-range-track,
.global-player-track input[type="range"]::-moz-range-track {
  height: 6px;
  background: #e7edf6;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
}

.player-range::-moz-range-progress,
.home-mini-player input[type="range"]::-moz-range-progress,
.home-audio-demo input[type="range"]::-moz-range-progress,
.profile-demo-row input[type="range"]::-moz-range-progress,
.global-player-track input[type="range"]::-moz-range-progress {
  height: 6px;
  background: var(--cobalt);
  border: 0;
  border-radius: 999px;
}

.player-range::-moz-range-thumb,
.home-mini-player input[type="range"]::-moz-range-thumb,
.home-audio-demo input[type="range"]::-moz-range-thumb,
.profile-demo-row input[type="range"]::-moz-range-thumb,
.global-player-track input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--cobalt);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(8, 119, 249, 0.16);
}

.player-range:focus-visible::-webkit-slider-thumb,
.home-mini-player input[type="range"]:focus-visible::-webkit-slider-thumb,
.home-audio-demo input[type="range"]:focus-visible::-webkit-slider-thumb,
.profile-demo-row input[type="range"]:focus-visible::-webkit-slider-thumb,
.global-player-track input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(8, 119, 249, 0.14);
}

.home-mini-player .player-meta,
.home-audio-demo .player-meta,
.profile-demo-row .player-meta,
.global-player-track div {
  font-variant-numeric: tabular-nums;
}

.home-advantage-grid {
  gap: 18px;
}

.home-advantage-grid article {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 136px;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(212, 218, 230, 0.82);
  border-radius: 8px;
  box-shadow: none;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.home-advantage-grid article > span {
  width: 64px;
  height: 64px;
  background: #367be3;
  border-radius: 12px;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease;
}

.home-advantage-grid article > span::before {
  width: 32px;
  height: 32px;
  background: #fff;
}

.home-advantage-grid article:nth-child(1) { --home-icon: url("./assets/catalog-icons/service-06.svg"); }
.home-advantage-grid article:nth-child(2) { --home-icon: url("./assets/catalog-icons/service-01.svg"); }
.home-advantage-grid article:nth-child(3) { --home-icon: url("./assets/catalog-icons/voice-mic.svg"); }
.home-advantage-grid article:nth-child(4) { --home-icon: url("./assets/catalog-icons/service-07.svg"); }
.home-advantage-grid article:nth-child(5) { --home-icon: url("./assets/catalog-icons/service-10.svg"); }
.home-advantage-grid article:nth-child(6) { --home-icon: url("./assets/catalog-icons/service-08.svg"); }

.home-advantage-grid article:hover,
.home-advantage-grid article:focus-within {
  border-color: rgba(54, 123, 227, 0.24);
  box-shadow: 0 16px 38px rgba(20, 45, 86, 0.1);
  transform: translateY(-4px);
}

.home-advantage-grid article:hover > span,
.home-advantage-grid article:focus-within > span {
  background: var(--cobalt);
  transform: translateY(-1px);
}

.home-advantage-grid strong {
  color: #121212;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

.home-advantage-grid p {
  color: #526071;
  font-size: 16px;
  line-height: 1.42;
  text-wrap: pretty;
}

.site-footer.segment-footer .segment-footer-grid {
  grid-template-columns: 250px repeat(4, minmax(158px, 1fr));
  column-gap: clamp(26px, 3vw, 44px);
  row-gap: 32px;
  align-items: start;
}

.segment-footer-column {
  min-width: 0;
}

.segment-footer-column strong {
  margin-bottom: 18px;
}

.segment-footer-column a,
.segment-footer-column button {
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-advantage-grid article {
    grid-template-columns: 56px minmax(0, 1fr);
    min-height: 124px;
    padding: 18px;
  }

  .home-advantage-grid article > span {
    width: 56px;
    height: 56px;
    border-radius: 10px;
  }

  .home-advantage-grid article > span::before {
    width: 28px;
    height: 28px;
  }

  .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .player-button,
  .home-mini-play,
  .profile-demo-play,
  .global-player-play,
  .home-advantage-grid article,
  .home-advantage-grid article > span {
    transition-duration: 1ms;
  }
}

/* Player geometry repair: keep the icon centered and animate only the button shell. */
.player-button,
.home-mini-play,
.global-player-play {
  position: relative;
}

.profile-demo-play {
  --play-size: 32px;
  position: absolute;
  left: 33px;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.voice-profile-page .profile-demo-play,
.profile-demo-row .profile-demo-play {
  left: 26px;
  top: calc(50% - 16px);
  width: var(--play-size);
  height: var(--play-size);
  transform: none;
}

.player-button,
.home-mini-play,
.profile-demo-play,
.global-player-play {
  overflow: hidden;
}

.player-button::before,
.home-mini-play::before,
.profile-demo-play::before,
.global-player-play span {
  width: 11px;
  height: 13px;
  margin-left: 0;
  transform: translateX(1px);
  transition: none;
}

.global-player-play span {
  width: 14px;
  height: 17px;
  transform: translateX(2px);
}

.player-button.is-playing::before,
.home-mini-play.is-playing::before,
.profile-demo-play.is-playing::before,
.global-audio-player.is-playing .global-player-play span {
  width: 12px;
  height: 14px;
  margin-left: 0;
  transform: none;
  transition: none;
}

.global-audio-player.is-playing .global-player-play span {
  width: 15px;
  height: 18px;
}

.profile-demo-play.is-playing {
  grid-template-columns: none;
  gap: 0;
}

.profile-demo-play.is-playing::after {
  content: none !important;
}

.profile-demo-play:hover,
.profile-demo-play:focus-visible,
.voice-profile-page .profile-demo-play:hover,
.voice-profile-page .profile-demo-play:focus-visible,
.profile-demo-row .profile-demo-play:hover,
.profile-demo-row .profile-demo-play:focus-visible {
  transform: translateY(-1px);
}

.profile-demo-play:active,
.voice-profile-page .profile-demo-play:active,
.profile-demo-row .profile-demo-play:active {
  transform: scale(0.96);
}

/* Final play alignment correction for home voice rows and compact players. */
.player-button::before,
.home-mini-play::before,
.profile-demo-play::before,
.global-player-play span {
  position: static;
  top: auto;
  left: auto;
  display: block;
  width: 11px;
  height: 13px;
  margin: 0;
  transform: none;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: none;
}

.global-player-play span {
  width: 14px;
  height: 17px;
  transform: none;
}

.player-button.is-playing::before,
.home-mini-play.is-playing::before,
.profile-demo-play.is-playing::before,
.global-audio-player.is-playing .global-player-play span {
  position: static;
  width: 12px;
  height: 14px;
  margin: 0;
  transform: none;
  clip-path: none;
}

.global-audio-player.is-playing .global-player-play span {
  width: 15px;
  height: 18px;
}

.home-voice-row {
  position: relative;
}

.home-voice-row .home-mini-player {
  position: static;
  grid-template-columns: minmax(0, 1fr) auto;
}

.home-voice-row .home-mini-player input {
  grid-column: 1;
}

.home-voice-row .home-mini-player .player-meta {
  grid-column: 2;
}

.home-voice-row .home-mini-play {
  --play-size: 36px;
  position: absolute;
  left: 32px;
  top: 32px;
  z-index: 3;
  width: var(--play-size);
  height: var(--play-size);
  min-width: var(--play-size);
  min-height: var(--play-size);
  transform: none;
}

.home-voice-row .home-mini-play:hover,
.home-voice-row .home-mini-play:focus-visible {
  transform: translateY(-1px);
}

.home-voice-row .home-mini-play:active {
  transform: scale(0.96);
}

.home-voice-row .home-mini-play {
  color: #fff;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08) 42%, rgba(255, 255, 255, 0.02) 70%),
    linear-gradient(135deg, rgba(255, 190, 96, 0.18), rgba(32, 196, 164, 0.16) 48%, rgba(127, 104, 255, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 7px 14px rgba(12, 32, 58, 0.1);
  backdrop-filter: blur(0.6px) saturate(1.06);
  -webkit-backdrop-filter: blur(0.6px) saturate(1.06);
}

.home-voice-row .home-mini-play::before {
  background: #fff;
  filter: drop-shadow(0 1px 2px rgba(6, 16, 32, 0.32));
}

.home-voice-row .home-mini-play:hover,
.home-voice-row .home-mini-play:focus-visible {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.1) 42%, rgba(255, 255, 255, 0.03) 70%),
    linear-gradient(135deg, rgba(255, 201, 112, 0.24), rgba(31, 202, 170, 0.21) 48%, rgba(131, 111, 255, 0.24));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 8px 16px rgba(12, 32, 58, 0.13);
}

.auth-modal-panel #authEmailSubmit {
  background: #367be3;
  transition:
    background-color 160ms ease,
    color 160ms ease;
  transform: none;
}

.auth-modal-panel #authEmailSubmit:hover,
.auth-modal-panel #authEmailSubmit:focus-visible {
  background: #2f70d6;
  box-shadow: none;
  transform: none;
}

.auth-modal-panel .auth-panel-switch button {
  transition:
    background-color 160ms ease,
    color 160ms ease;
  transform: none;
  box-shadow: none;
}

.auth-modal-panel .auth-panel-switch button:hover,
.auth-modal-panel .auth-panel-switch button:focus-visible {
  color: #0877f9;
  background: #dfeeff;
  outline: none;
  transform: none;
  box-shadow: none;
}

.auth-modal-panel .auth-panel-switch button.is-active,
.auth-modal-panel .auth-panel-switch button.is-active:hover,
.auth-modal-panel .auth-panel-switch button.is-active:focus-visible {
  color: #fff;
  background: #2f70d6;
  transform: none;
  box-shadow: none;
}

/* Home voice cards: keep portraits clean and place playback in the audio row. */
.home-voice-row {
  grid-template-columns: 80px minmax(0, 1fr) 58px;
  grid-template-rows: 34px 26px 36px;
  gap: 5px 18px;
  align-items: start;
}

.home-voice-row .home-voice-avatar {
  grid-column: 1;
  grid-row: 1 / 4;
}

.home-voice-row .home-voice-info {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 2px;
}

.home-voice-row .home-voice-badges {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: start;
}

.home-voice-row .home-mini-player {
  grid-column: 2 / 4;
  grid-row: 3;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 60px;
  gap: 10px;
  align-items: center;
  min-height: 36px;
  margin-top: 0;
}

.home-voice-row .home-mini-player input {
  grid-column: 2;
}

.home-voice-row .home-mini-player .player-meta {
  grid-column: 3;
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}

.home-voice-row .home-mini-play {
  --play-size: 34px;
  position: relative;
  left: auto;
  top: auto;
  grid-column: 1;
  z-index: 1;
  width: var(--play-size);
  height: var(--play-size);
  min-width: var(--play-size);
  min-height: var(--play-size);
  color: #fff;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12) 44%, rgba(255, 255, 255, 0.03) 72%),
    linear-gradient(135deg, rgba(255, 190, 96, 0.34), rgba(32, 196, 164, 0.3) 48%, rgba(127, 104, 255, 0.34)),
    #367be3;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 7px 14px rgba(12, 32, 58, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
}

.home-voice-row .home-mini-play:hover,
.home-voice-row .home-mini-play:focus-visible {
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.14) 44%, rgba(255, 255, 255, 0.04) 72%),
    linear-gradient(135deg, rgba(255, 201, 112, 0.4), rgba(31, 202, 170, 0.36) 48%, rgba(131, 111, 255, 0.4)),
    #2f70d6;
  transform: translateY(-1px);
}

.home-voice-row .home-mini-play:active {
  transform: scale(0.96);
}

.home-mini-play::before,
.player-button::before,
.profile-demo-play::before,
.global-player-play span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  background: currentColor;
  clip-path: polygon(31.25% 18.75%, 87.5% 50%, 31.25% 81.25%);
  filter: none;
  transform: translate(-50%, -50%);
  transition: none;
}

.home-voice-row .home-mini-play::before,
.home-audio-demo .home-mini-play::before {
  background: #fff;
  filter: drop-shadow(0 1px 2px rgba(6, 16, 32, 0.22));
}

.home-mini-play.is-playing::before,
.player-button.is-playing::before,
.profile-demo-play.is-playing::before,
.global-audio-player.is-playing .global-player-play span {
  width: 12px;
  height: 14px;
  clip-path: none;
  background:
    linear-gradient(currentColor, currentColor) left center / 4px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 4px 100% no-repeat;
  transform: translate(-50%, -50%);
}

/* Unified player controls: simple blue surface, centered icon, no jumping states. */
.player-button,
.home-mini-play,
.profile-demo-play,
.global-player-play {
  --play-size: 40px;
  position: relative;
  display: grid;
  flex: 0 0 var(--play-size);
  width: var(--play-size);
  height: var(--play-size);
  min-width: var(--play-size);
  min-height: var(--play-size);
  padding: 0;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background: #0877f9;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  transform: none;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.player-button:hover,
.home-mini-play:hover,
.profile-demo-play:hover,
.global-player-play:hover,
.player-button:focus-visible,
.home-mini-play:focus-visible,
.profile-demo-play:focus-visible,
.global-player-play:focus-visible {
  color: #fff;
  background: #367be3;
  outline: none;
  box-shadow: none;
  transform: translateY(-1px);
}

.player-button:active,
.home-mini-play:active,
.profile-demo-play:active,
.global-player-play:active {
  transform: scale(0.96);
}

.global-player-play {
  --play-size: 40px;
}

.player-button::before,
.home-mini-play::before,
.profile-demo-play::before {
  content: "";
}

.player-button::before,
.home-mini-play::before,
.profile-demo-play::before,
.global-player-play span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  background: currentColor;
  border: 0;
  border-radius: 0;
  clip-path: polygon(28% 16%, 84% 50%, 28% 84%);
  filter: none;
  transform: translate(-50%, -50%);
  transition: none;
}

.player-button.is-playing::before,
.home-mini-play.is-playing::before,
.profile-demo-play.is-playing::before,
.global-audio-player.is-playing .global-player-play span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 16px;
  margin: 0;
  background:
    linear-gradient(currentColor, currentColor) left center / 5px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 5px 100% no-repeat;
  border: 0;
  border-radius: 0;
  clip-path: none;
  transform: translate(-50%, -50%);
}

.home-voice-row {
  grid-template-columns: 80px minmax(0, 1fr) auto;
  grid-template-rows: 30px 22px 42px;
  gap: 6px 16px;
  align-items: center;
  min-height: 122px;
}

.home-voice-row .home-voice-avatar {
  grid-column: 1;
  grid-row: 1 / 4;
}

.home-voice-row .home-voice-info {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-width: 0;
  padding-top: 0;
}

.home-voice-row .home-voice-info > a {
  color: #121212;
  font-size: 15px;
  line-height: 1.2;
}

.home-voice-rate {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  color: #0877f9;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.home-voice-row .home-voice-badges {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  display: flex;
  gap: 0;
}

.home-voice-row .home-voice-badges small {
  display: none;
}

.home-voice-row .home-voice-badges b {
  padding: 0;
  color: #121212;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  background: transparent;
  border-radius: 0;
}

.home-voice-row .home-mini-player {
  grid-column: 2 / 4;
  grid-row: 3;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  margin-top: 0;
}

.home-voice-row .home-mini-play {
  --play-size: 40px;
  position: relative;
  left: auto;
  top: auto;
  grid-column: 1;
  z-index: 1;
  color: #fff;
  background: #0877f9;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-voice-row .home-mini-player input {
  grid-column: 2;
}

.home-voice-row .home-mini-player .player-meta {
  grid-column: 3;
  justify-content: flex-end;
  min-width: 0;
  color: #748195;
  font-size: 12px;
}

.home-voice-row .home-mini-player .player-meta span,
.home-audio-demo .player-meta span {
  display: none;
}

.home-voice-row .home-mini-player .player-meta strong {
  color: inherit;
  font-weight: 600;
}

.home-audio-demo {
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.home-audio-demo .home-mini-play {
  --play-size: 40px;
  position: relative;
  left: auto;
  top: auto;
  align-self: center;
  justify-self: center;
  color: #fff;
  background: #0877f9;
  border: 0;
  box-shadow: none;
}

.home-audio-demo > div {
  grid-template-columns: minmax(92px, 150px) minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.home-audio-demo .player-meta {
  justify-content: flex-end;
  min-width: 0;
}

.home-audio-demo .player-meta strong {
  color: #748195;
  font-size: 12px;
  font-weight: 600;
}

.home-mini-player input[type="range"],
.home-audio-demo input[type="range"],
.player-range,
.profile-demo-row input[type="range"],
.global-player-track input[type="range"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}

/* Talent profile settings reconstructed from the supplied dashboard SVG exports. */
.account-profile-page .dashboard-view[data-cabinet-panel="profile"] {
  width: min(688px, 100%);
  max-width: 688px;
}

.dial-settings-page {
  width: 100%;
  color: #121212;
  font-family: var(--font-sans);
}

.dial-settings-page h1 {
  margin: 0 0 34px;
  color: #121212;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}

.dial-settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  margin-bottom: 19px;
}

.dial-settings-tabs button,
.dial-registration-row button,
.dial-link-button {
  min-height: 36px;
  padding: 0 14px;
  color: #121212;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.dial-settings-tabs button:hover,
.dial-settings-tabs button:focus-visible,
.dial-registration-row button:hover,
.dial-registration-row button:focus-visible,
.dial-link-button:hover,
.dial-link-button:focus-visible {
  color: #0877f9;
  background: #eaf3ff;
  outline: none;
}

.dial-settings-tabs button.is-active,
.dial-registration-row button.is-active {
  color: #0877f9;
  background: #eaf3ff;
}

.dial-settings-panel {
  display: grid;
  gap: 20px;
}

.dial-settings-panel[hidden],
.dial-registration-panel[hidden] {
  display: none;
}

.dial-settings-card {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 20px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  box-sizing: border-box;
}

@media (max-width: 520px) {
  .account-profile-page .dashboard-feature-grid.dashboard-favorite-voice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-profile-page .dashboard-favorite-voice-grid .voice-card.reference-voice-card {
    width: 100%;
  }
}

.dial-settings-card h2,
.dial-doc-card h3 {
  margin: 0;
  color: #121212;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
}

.dial-settings-card p,
.dial-doc-card p,
.dial-withdraw-modal p,
.dial-withdraw-success p {
  max-width: 620px;
  margin: 0;
  color: #121212;
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.dial-settings-card label {
  display: grid;
  gap: 8px;
  margin: 0;
}

.dial-settings-card label > span,
.dial-contract-row span {
  color: #121212;
  font-size: 14px;
  font-weight: 500;
}

.dial-settings-card input,
.dial-settings-card select,
.dial-settings-card textarea,
.dial-withdraw-modal input,
.dial-withdraw-modal select {
  width: 100%;
  min-height: 43px;
  padding: 0 14px;
  color: #121212;
  font: 400 14px/1.3 var(--font-sans);
  background: #fff;
  border: 1px solid #8a9ab2;
  border-radius: 6px;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease;
}

.dial-settings-card textarea {
  min-height: 89px;
  padding-block: 14px;
  resize: vertical;
}

.dial-settings-card select,
.dial-withdraw-modal select {
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, #738193 50%),
    linear-gradient(135deg, #738193 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 13px) 50%;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
}

.dial-settings-card input::placeholder,
.dial-settings-card textarea::placeholder,
.dial-withdraw-modal input::placeholder {
  color: #738193;
  opacity: 1;
}

.dial-settings-card input:focus,
.dial-settings-card select:focus,
.dial-settings-card textarea:focus,
.dial-withdraw-modal input:focus,
.dial-withdraw-modal select:focus {
  border-color: #367be3;
  box-shadow: 0 0 0 3px rgba(54, 123, 227, 0.1);
}

.dial-profile-photo-card {
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 32px;
  align-items: center;
  min-height: 202px;
}

.dial-profile-photo-card > div {
  display: grid;
  gap: 14px;
}

.dial-profile-photo-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.dial-profile-photo-delete {
  min-height: 40px;
  padding: 0 4px;
}

.dial-profile-photo-card .primary-button,
.dial-settings-save,
.dial-withdraw-success .primary-button {
  width: fit-content;
  min-width: 153px;
  height: 46px;
  min-height: 46px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: none;
}

.dial-profile-placeholder {
  display: grid;
  width: 159px;
  height: 159px;
  place-items: center;
  color: #c4d2e7;
  background: #e8f1fb;
  border-radius: 50%;
  overflow: hidden;
}

.dial-profile-placeholder .dashboard-icon {
  width: 82px;
  height: 82px;
  stroke-width: 1.4;
}

.dial-profile-placeholder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.dial-form-grid.is-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dial-inline-field {
  display: grid;
  grid-template-columns: minmax(0, 312px) 160px;
  gap: 12px;
  align-items: end;
}

.dial-inline-field .secondary-button,
.dial-doc-card .secondary-button,
.dial-registration-row .secondary-button,
.dial-contract-row .secondary-button {
  min-height: 37px;
  color: #0877f9;
  font-size: 16px;
  font-weight: 500;
  background: #eaf3ff;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.dial-inline-field .secondary-button:hover,
.dial-doc-card .secondary-button:hover,
.dial-registration-row .secondary-button:hover,
.dial-contract-row .secondary-button:hover,
.dial-inline-field .secondary-button:focus-visible,
.dial-doc-card .secondary-button:focus-visible,
.dial-registration-row .secondary-button:focus-visible,
.dial-contract-row .secondary-button:focus-visible {
  color: #fff;
  background: #0877f9;
  outline: none;
}

.dial-registration-card {
  min-height: 111px;
}

.dial-registration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dial-registration-row > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dial-registration-row button:not(.secondary-button) {
  color: #0877f9;
  border-color: #0877f9;
}

.dial-registration-row button:not(.secondary-button).is-active {
  color: #fff;
  background: #0877f9;
  border-color: #0877f9;
}

.dial-registration-panel {
  display: grid;
  gap: 20px;
}

.dial-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dial-yoomoney-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #121212;
  font-size: 18px;
  font-weight: 600;
}

.dial-yoomoney-logo i {
  width: 26px;
  height: 18px;
  background:
    radial-gradient(circle at 65% 50%, #fff 0 4px, transparent 4.5px),
    linear-gradient(90deg, #8653ff 0 44%, #8653ff 44% 100%);
  border-radius: 999px;
}

.dial-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.dial-doc-card {
  display: grid;
  min-height: 213px;
  padding: 19px 20px 20px;
  align-content: start;
  background: #fff;
  border-radius: 10px;
  box-shadow: none;
}

.dial-doc-card p {
  min-height: 60px;
  margin-top: 12px;
}

.dial-doc-card .secondary-button {
  align-self: end;
  width: 100%;
  margin-top: 28px;
}

.dial-link-button {
  justify-self: start;
  min-height: 28px;
  padding: 0;
  color: #0877f9;
  background: transparent;
}

.dial-doc-thumbs {
  display: flex;
  gap: 12px;
  align-items: center;
  align-self: end;
  margin-top: 36px;
}

.dial-doc-thumbs > span,
.dial-doc-thumbs > button {
  position: relative;
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: #b8c8de;
  background: #eef5ff;
  border: 0;
  border-radius: 6px;
}

.dial-doc-thumbs .dashboard-icon {
  width: 22px;
  height: 22px;
}

.dial-doc-thumbs i {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-style: normal;
  background: #a8b7cc;
  border-radius: 50%;
}

.dial-doc-thumbs > button {
  margin-left: auto;
  color: #0877f9;
  font-size: 26px;
  line-height: 1;
  background: #fff;
  border: 1px solid #0877f9;
  border-radius: 50%;
}

.customer-requisites-document-files {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.customer-requisites-document-file {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 4px 4px 4px 6px;
  color: #344154;
  background: #f1f6fd;
  border-radius: 6px;
}

.customer-requisites-document-file > .dashboard-icon {
  width: 24px;
  height: 24px;
  color: #0877f9;
}

.customer-requisites-document-file [data-profile-document-name] {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-requisites-document-actions {
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: flex-end;
}

.customer-requisites-document-file [data-remove-profile-document],
.customer-requisites-document-file [data-profile-document-delete],
.customer-requisites-document-file [data-profile-document-download] {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  color: #74839a;
  font-size: 20px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 6px;
}

.customer-requisites-document-file [data-profile-document-download] {
  color: #0877f9;
  background-color: transparent;
}

.customer-requisites-document-file [data-remove-profile-document]:hover,
.customer-requisites-document-file [data-remove-profile-document]:focus-visible,
.customer-requisites-document-file [data-profile-document-delete]:hover,
.customer-requisites-document-file [data-profile-document-delete]:focus-visible {
  color: #d9444f;
  background: #fff;
  outline: none;
}

.customer-requisites-document-file [data-profile-document-download]:hover,
.customer-requisites-document-file [data-profile-document-download]:focus-visible {
  color: #045fbf;
  background-color: #fff;
  outline: none;
}

.customer-requisites-document-file button:disabled {
  cursor: wait;
  opacity: 0.55;
}

.customer-requisites-document-file progress {
  width: min(100%, 180px);
  height: 3px;
  margin-top: 2px;
  overflow: hidden;
  accent-color: #0877f9;
  border: 0;
  border-radius: 999px;
}

.customer-requisites-document-file.has-error {
  background: #fff4f5;
}

.customer-requisites-document-file.has-error .customer-requisites-document-details small {
  color: #a82c39;
}

.customer-requisites-document-status {
  min-height: 0 !important;
  margin: 8px 0 0 !important;
  color: #59677a;
  font-size: 13px;
}

.customer-requisites-document.has-files .secondary-button {
  margin-top: 12px;
}

.dial-contract-row {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.dial-contract-row > div {
  display: grid;
  gap: 8px;
}

.dial-contract-row p {
  color: #7a8493;
  font-size: 14px;
}

.dial-toggle-list {
  display: grid;
  gap: 16px;
  padding-top: 8px;
}

.dial-settings-toggle {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 24px;
  cursor: pointer;
}

.dial-settings-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dial-settings-toggle > span {
  position: relative;
  width: 48px;
  height: 24px;
  background: #dfeaf8;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(40, 62, 91, 0.1);
  transition: background-color 160ms ease;
}

.dial-settings-toggle > span i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(27, 49, 78, 0.18);
  transition: transform 160ms ease;
}

.dial-settings-toggle input:checked + span {
  background: #367be3;
}

.dial-settings-toggle input:checked + span i {
  transform: translateX(24px);
}

.dial-settings-toggle input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(54, 123, 227, 0.16);
}

.dial-settings-toggle b {
  color: #121212;
  font-size: 14px;
  font-weight: 400;
}

.dial-settings-save {
  justify-self: end;
  margin-top: 2px;
}

.dial-withdraw-modal {
  display: grid;
  gap: 18px;
}

.dial-withdraw-balance {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: #f3f8ff;
  border-radius: 8px;
}

.dial-withdraw-balance span {
  color: #64748b;
  font-size: 14px;
}

.dial-withdraw-balance strong {
  color: #0877f9;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dial-withdraw-success {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 8px 0 4px;
  text-align: center;
}

.dial-withdraw-success > span {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  color: #fff;
  background: #19a781;
  border-radius: 50%;
}

.dial-withdraw-success .dashboard-icon {
  width: 32px;
  height: 32px;
}

.dial-withdraw-success h3 {
  margin: 0;
  color: #121212;
  font-size: 22px;
  font-weight: 600;
}

.dashboard-modal-panel:has(.dial-withdraw-modal),
.dashboard-modal-panel:has(.dial-withdraw-success) {
  width: min(380px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(17, 19, 24, 0.14);
}

.dashboard-modal-panel:has(.dial-withdraw-success) .dashboard-modal-actions,
.dashboard-modal-panel:has(.dial-withdraw-success) > .eyebrow,
.dashboard-modal-panel:has(.dial-withdraw-success) > h2 {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

@media (max-width: 900px) {
  .dial-profile-photo-card,
  .dial-form-grid,
  .dial-form-grid.is-three,
  .dial-inline-field,
  .dial-contract-row {
    grid-template-columns: 1fr;
  }

  .dial-profile-placeholder {
    justify-self: start;
  }

  .dial-doc-grid {
    grid-template-columns: 1fr;
  }

  .dial-settings-save {
    justify-self: stretch;
    width: 100%;
  }
}

/* Prices/FAQ pages and final account header alignment from latest SVG references. */
.segment-header-actions {
  gap: 26px;
  align-items: center;
  justify-content: flex-end;
}

.segment-header-actions .segment-account-bell {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  min-width: 34px;
  place-items: center;
  color: #9aa8ba;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition: color 160ms ease, background-color 160ms ease;
}

.segment-header-actions .segment-account-bell:hover,
.segment-header-actions .segment-account-bell:focus-visible {
  color: #367be3;
  background: #ebf3ff;
  outline: none;
}

.segment-header-actions .segment-account-bell .segment-bell-svg {
  width: 32px;
  height: 32px;
  color: inherit;
}

.segment-header-actions .segment-account-bell .notification-badge {
  top: 0;
  right: -2px;
  display: grid;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  place-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  background: #e34848;
  border: 2px solid #fff;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

.segment-balance {
  display: grid;
  grid-template-columns: minmax(0, auto) 18px;
  gap: 6px;
  align-items: center;
  min-width: 126px;
  padding: 0;
  color: #121212;
  font-variant-numeric: tabular-nums;
}

.segment-balance-link {
  display: grid;
  gap: 2px;
  color: #121212;
  text-decoration: none;
}

.segment-balance-link small {
  color: #367be3;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.1;
}

.segment-balance-link strong {
  color: #121212;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.12;
}

.segment-balance-link:hover strong,
.segment-balance-link:focus-visible strong {
  color: #0877f9;
}

.segment-balance-toggle {
  display: grid;
  width: 18px;
  height: 18px;
  padding: 0;
  place-items: center;
  color: #aeb7c4;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.segment-balance-toggle:hover,
.segment-balance-toggle:focus-visible {
  color: #367be3;
  background: transparent;
  outline: none;
}

.segment-balance-toggle svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-balance-toggle .eye-slash {
  opacity: 0;
}

.segment-balance[data-balance-hidden="true"] .segment-balance-toggle .eye-slash {
  opacity: 1;
}

.segment-balance[data-balance-hidden="true"] .segment-balance-toggle .eye-pupil {
  opacity: 0;
}

.segment-header-actions .user-chip {
  width: 47px;
  height: 47px;
  min-width: 47px;
  min-height: 47px;
  padding: 0;
  background: #e2e2e2;
  border: 1px solid #367be3;
  border-radius: 50%;
}

.segment-header-actions .user-chip img {
  width: 42px;
  height: 42px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.reference-page {
  background: #f6f8fb;
}

.reference-main {
  min-height: 70vh;
  padding: 194px 0 44px;
}

.reference-page-shell {
  width: min(1396px, calc(100% - 44px));
  margin-inline: auto;
}

.reference-page-title {
  margin: 0 0 48px;
  color: #121212;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

.pricing-list {
  display: grid;
  gap: 20px;
}

.pricing-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 38px;
  min-height: 343px;
  padding: 28px 30px;
  background: #fff;
  border-radius: 8px;
}

.pricing-row-copy {
  max-width: 890px;
}

.pricing-row-copy h2 {
  margin: 0 0 8px;
  color: #121212;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.22;
}

.pricing-row-copy h3 {
  margin: 36px 0 12px;
  color: #121212;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
}

.pricing-row-copy p {
  margin: 0;
  color: #202020;
  font-size: 20px;
  line-height: 1.22;
  text-wrap: pretty;
}

.pricing-row-card {
  align-self: center;
  display: grid;
  min-height: 282px;
  padding: 24px 30px 28px;
  color: #121212;
  background: #f4f7fb;
  border-radius: 10px;
}

.pricing-row-card > strong {
  align-self: start;
  margin: 0 0 18px;
  color: #121212;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.pricing-row-card dl {
  display: grid;
  gap: 18px;
  margin: 0;
}

.pricing-row-card dt {
  margin-bottom: 4px;
  color: #121212;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.pricing-row-card dd {
  margin: 0;
  color: #202020;
  font-size: 19px;
  line-height: 1.25;
}

.pricing-row-card button {
  align-self: end;
  justify-self: start;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 0;
  color: #0877f9;
  font-size: 20px;
  font-weight: 500;
  background: transparent;
  border: 0;
  border-radius: 4px;
  transition: color 160ms ease, transform 160ms ease;
}

.pricing-row-card button:hover,
.pricing-row-card button:focus-visible {
  color: #0563d1;
  outline: none;
  transform: translateX(2px);
}

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.faq-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  transition: background-color 180ms ease;
}

.faq-card > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-height: 96px;
  padding: 18px 20px;
  color: #121212;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 10px;
  transition: background-color 180ms ease;
}

.faq-card > button:hover,
.faq-card > button:focus-visible {
  background: #fff;
  outline: none;
}

.faq-card > button span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}

.faq-chevron {
  display: none;
}

.faq-card > button b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  color: #0877f9;
  font-size: 16px;
  font-weight: 500;
  background: #ebf3ff;
  border-radius: 6px;
  transition: color 180ms ease, background-color 180ms ease;
}

.faq-card:hover > button b,
.faq-card > button:focus-visible b,
.faq-card.is-open > button b {
  color: #0563d1;
  background: #dfeeff;
}

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 20px;
  opacity: 0;
  background: #fff;
  border-radius: 0 0 10px 10px;
  transition:
    grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    padding-bottom 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-panel > div {
  min-height: 0;
  overflow: hidden;
}

.faq-card.is-open .faq-panel {
  grid-template-rows: 1fr;
  padding-bottom: 22px;
  opacity: 1;
}

.faq-card .faq-panel p {
  max-width: 66ch;
  margin: 0;
  padding-top: 2px;
  color: #334052;
  font-size: 16px;
  line-height: 1.48;
  text-wrap: pretty;
  transform: translateY(-4px);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-card.is-open .faq-panel p {
  transform: translateY(0);
}

@media (max-width: 1199px) {
  .faq-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .faq-page .reference-page-shell {
    width: calc(100% - 24px);
  }

  .faq-page .reference-page-title {
    margin-bottom: 24px;
    font-size: 24px;
    line-height: 30px;
  }

  .faq-card > button {
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 12px;
    min-height: 76px;
    padding: 14px;
  }

  .faq-list .faq-card > button > span {
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
  }

  .faq-card > button b {
    display: none;
  }

  .faq-chevron {
    display: flex;
    width: 20px;
    height: 20px;
    color: #367be3;
    transform: rotate(180deg);
  }

  .faq-chevron svg {
    width: 20px;
    height: 20px;
  }

  .faq-card.is-open .faq-chevron {
    transform: none;
  }

  .faq-panel {
    padding-inline: 14px;
  }

  .faq-card.is-open .faq-panel {
    padding-bottom: 14px;
  }

  .faq-card .faq-panel p {
    color: #121212;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-card,
  .faq-card > button,
  .faq-card > button b,
  .faq-panel,
  .faq-panel p {
    transition: none;
    transform: none;
  }
}

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

  .pricing-row-copy p {
    font-size: 18px;
  }
}

@media (max-width: 900px) {
  .reference-main {
    padding-top: 142px;
  }

  .reference-page-shell {
    width: min(100% - 28px, 680px);
  }

  .reference-page-title {
    margin-bottom: 28px;
    font-size: 38px;
  }

  .pricing-row,
  .faq-list {
    grid-template-columns: 1fr;
  }

  .pricing-row {
    min-height: 0;
    padding: 22px;
  }

  .pricing-row-card {
    min-height: 0;
  }

  .faq-card > button span {
    font-size: 19px;
  }
}

@media (max-width: 780px) {
  .segment-header-actions {
    gap: 10px;
  }

  .segment-balance {
    min-width: 112px;
  }

  .segment-balance-link strong {
    font-size: 16px;
  }
}

.account-profile-page .segment-header-actions {
  min-width: 330px;
  gap: 26px;
}

@media (max-width: 780px) {
  .account-profile-page .segment-header-actions {
    min-width: 0;
    gap: 10px;
  }
}

/* Reference transfer: chronometer, catalog filters and dashboard chat. */
.chronometer-page {
  background: #f7f9fd;
}

.chronometer-main {
  padding-top: 150px;
  background: #f7f9fd;
}

.chronometer-section {
  min-height: 622px;
  padding: 22px 0 90px;
}

.chronometer-grid {
  display: grid;
  grid-template-columns: minmax(0, 924px) 452px;
  column-gap: 20px;
  row-gap: 50px;
  width: min(1396px, calc(100% - 44px));
  max-width: 1396px;
  margin-inline: auto;
}

.chronometer-grid > h1 {
  grid-column: 1 / -1;
  margin: 0;
  color: #121212;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

.chronometer-text-card {
  --chronometer-collapsed-height: 420px;

  display: flex;
  flex-direction: column;
  gap: 10px;
  height: var(--chronometer-collapsed-height);
  padding: 16px;
  background: #fff;
  border-radius: 6px;
}

.chronometer-text-card.is-disclaimer-layout {
  height: auto;
}

.chronometer-field-label {
  color: #121212;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
}

.chronometer-text-card textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 12px 16px;
  color: #121212;
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
  border: 1px solid #738193;
  border-radius: 6px;
  box-shadow: none;
  resize: none;
}

.chronometer-text-card > #scriptText {
  flex: 1 1 auto;
}

.chronometer-text-card.is-disclaimer-layout > #scriptText {
  flex: 0 0 var(--chronometer-main-text-height);
  height: var(--chronometer-main-text-height);
}

.chronometer-text-card textarea::placeholder {
  color: #738193;
  opacity: 1;
}

.chronometer-text-card textarea:focus {
  border-color: #738193;
  box-shadow: none;
  outline: none;
}

.chronometer-text-meta {
  display: flex;
  flex: 0 0 auto;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.chronometer-text-meta > p {
  max-width: 560px;
  margin: 0;
  color: #526071;
  font-size: 13px;
  line-height: 1.35;
}

.chronometer-disclaimer-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 36px;
  align-items: center;
  gap: 10px;
  color: #121212;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.chronometer-disclaimer-toggle input,
.chronometer-speed-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.chronometer-toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  background: #b9c3d0;
  border-radius: 999px;
  transition: background-color 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chronometer-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chronometer-disclaimer-toggle input:checked + .chronometer-toggle-track {
  background: #0877f9;
}

.chronometer-disclaimer-toggle input:checked + .chronometer-toggle-track::after {
  transform: translateX(18px);
}

.chronometer-disclaimer-toggle input:focus-visible + .chronometer-toggle-track {
  outline: 3px solid rgba(8, 119, 249, 0.2);
  outline-offset: 2px;
}

.chronometer-input-notice {
  margin: 0;
  padding: 10px 12px;
  color: #6a4a00;
  font-size: 13px;
  line-height: 1.4;
  background: #fff5d9;
  border-radius: 6px;
}

.chronometer-input-notice[hidden],
.chronometer-disclaimer-panel[hidden],
.chronometer-disclaimer-breakdown[hidden] {
  display: none;
}

.chronometer-disclaimer-panel {
  display: block;
  flex: 0 0 auto;
  height: 0;
  min-height: 0;
  margin-top: -10px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    height 460ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 460ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 220ms ease,
    visibility 0s linear 460ms;
  will-change: height, opacity;
}

.chronometer-text-card.is-disclaimer-open .chronometer-disclaimer-panel {
  height: auto;
  margin-top: 4px;
  opacity: 1;
  visibility: visible;
  transition:
    height 460ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 460ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms ease 60ms,
    visibility 0s linear 0s;
}

.chronometer-disclaimer-content {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #dfe5ee;
}

.chronometer-disclaimer-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.chronometer-disclaimer-heading h2 {
  margin: 0;
  color: #121212;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

.chronometer-disclaimer-heading p {
  margin: 0;
  color: #526071;
  font-size: 13px;
  line-height: 1.35;
}

.chronometer-text-card .chronometer-disclaimer-panel textarea {
  flex: none;
  height: 120px;
  min-height: 120px;
  resize: vertical;
}

.chronometer-disclaimer-speed {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.chronometer-disclaimer-speed legend {
  margin-bottom: 9px;
  color: #121212;
  font-size: 15px;
  font-weight: 600;
}

.chronometer-speed-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  background: #edf2f8;
  border-radius: 8px;
}

.chronometer-speed-options label {
  min-width: 0;
  cursor: pointer;
}

.chronometer-speed-options label > span {
  display: grid;
  min-height: 54px;
  padding: 8px 10px;
  place-content: center;
  text-align: center;
  background: transparent;
  border-radius: 6px;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.chronometer-speed-options b {
  color: #334052;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.chronometer-speed-options small {
  margin-top: 3px;
  color: #6f7c8c;
  font-size: 12px;
  line-height: 1;
}

.chronometer-speed-options input:checked + span {
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 19, 24, 0.08);
}

.chronometer-speed-options input:checked + span b,
.chronometer-speed-options input:checked + span small {
  color: #0877f9;
}

.chronometer-speed-options input:focus-visible + span {
  outline: 2px solid #0877f9;
  outline-offset: -2px;
}

.chronometer-disclaimer-speed > p {
  margin: 0;
  color: #526071;
  font-size: 12px;
  line-height: 1.4;
}

@keyframes chronometer-panel-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chronometer-disclaimer-panel,
  .chronometer-disclaimer-breakdown {
    animation: none;
    transition: none;
  }

  .chronometer-toggle-track,
  .chronometer-toggle-track::after,
  .chronometer-speed-options label > span {
    transition: none;
  }
}

.chronometer-result-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.chronometer-duration-card {
  display: grid;
  height: 157px;
  padding: 12px 16px;
  align-content: start;
  color: #121212;
  background: #fff;
  border-radius: 6px;
}

.chronometer-duration-card h2 {
  margin: 0 0 8px;
  color: #121212;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
}

.chronometer-duration-card > strong {
  margin-bottom: 20px;
  color: #367be3;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
}

.chronometer-duration-card > div {
  display: grid;
  grid-template-columns: calc(50% + 6px) minmax(0, 1fr);
  gap: 20px;
}

.chronometer-duration-card span {
  display: grid;
  gap: 8px;
  color: #121212;
  font-size: 16px;
  line-height: 1.2;
}

.chronometer-duration-card b {
  color: #121212;
  font-size: 20px;
  font-weight: 600;
}

.chronometer-disclaimer-breakdown {
  display: block;
  height: 0;
  min-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    height 460ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 460ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 220ms ease,
    visibility 0s linear 460ms;
  will-change: height, opacity;
}

.chronometer-result-panel.is-disclaimer-open .chronometer-disclaimer-breakdown {
  height: auto;
  margin-top: 20px;
  opacity: 1;
  visibility: visible;
  transition:
    height 460ms cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 460ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms ease 60ms,
    visibility 0s linear 0s;
}

.chronometer-disclaimer-breakdown-content {
  display: grid;
  grid-template-columns: calc(50% + 6px) minmax(0, 1fr);
  min-height: 76px;
  padding: 12px 16px;
  gap: 20px;
  align-items: center;
  background: #fff;
  border-radius: 6px;
}

.chronometer-disclaimer-breakdown-content > div {
  display: grid;
  gap: 5px;
}

.chronometer-disclaimer-breakdown span {
  color: #526071;
  font-size: 14px;
  line-height: 1.2;
}

.chronometer-disclaimer-breakdown span small {
  margin-left: 4px;
  color: #0877f9;
  font-size: 12px;
}

.chronometer-disclaimer-breakdown strong {
  color: #121212;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.chronometer-estimate {
  display: grid;
  grid-template-columns: repeat(2, 216px);
  gap: 20px;
}

.chronometer-estimate > div {
  display: grid;
  height: 73px;
  padding: 12px 16px;
  align-content: center;
  background: #fff;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.chronometer-estimate span {
  color: #121212;
  font-size: 16px;
  font-weight: 400;
}

.chronometer-estimate strong {
  margin-top: 4px;
  color: #121212;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.chronometer-estimate > div.chronometer-page-stat {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "note value";
  min-height: 84px;
  height: auto;
  column-gap: 20px;
  align-content: center;
}

.chronometer-page-stat > span {
  grid-area: label;
}

.chronometer-estimate .chronometer-page-stat > strong {
  grid-area: value;
  align-self: center;
  margin-top: 0;
  color: #367be3;
  font-size: 24px;
}

.chronometer-page-note {
  grid-area: note;
  margin-top: 3px;
  color: #526071;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.chronometer-result-panel .wide-button {
  width: 452px;
  height: 46px;
  min-height: 46px;
  padding: 0 20px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  background: #0877f9;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}

.chronometer-result-panel .wide-button:hover,
.chronometer-result-panel .wide-button:focus-visible {
  background: #0563d1;
  outline: none;
}

.catalog-page .catalog-main .page-grid {
  width: min(1396px, calc(100vw - 44px));
  max-width: 1396px;
}

.catalog-controls[data-catalog-filter-card] {
  display: block;
  min-height: 160px;
  margin: 28px 0 24px;
  padding: 22px;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  transition: min-height 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-controls[data-catalog-filter-card].is-expanded {
  min-height: 615px;
}

.catalog-filter-primary {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 170px 170px minmax(292px, auto) 158px;
  gap: 10px;
  align-items: end;
}

.catalog-filter-primary label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.catalog-filter-primary label > span:not(.visually-hidden) {
  color: #738193;
  font-size: 13px;
  font-weight: 600;
}

.catalog-filter-primary input,
.catalog-filter-primary select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  color: #121212;
  font-size: 16px;
  background: #fff;
  border: 1px solid #d6deea;
  border-radius: 6px;
  box-shadow: none;
}

.catalog-filter-primary input:focus,
.catalog-filter-primary select:focus {
  border-color: #367be3;
  outline: none;
}

.catalog-filter-primary .segmented-control {
  min-height: 46px;
  padding: 4px;
  background: #f2f5f9;
  border: 0;
  border-radius: 6px;
}

.catalog-filter-primary .segmented-control button {
  min-height: 38px;
  border-radius: 6px;
}

.catalog-filter-more {
  height: 46px;
  color: #0877f9;
  font-size: 15px;
  font-weight: 600;
  background: #ebf3ff;
  border: 0;
  border-radius: 6px;
}

.catalog-filter-more:hover,
.catalog-filter-more:focus-visible {
  color: #0563d1;
  background: #dfeeff;
  outline: none;
}

.catalog-filter-advanced {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid #edf1f6;
}

.catalog-filter-advanced section {
  min-width: 0;
}

.catalog-filter-advanced h3 {
  margin: 0 0 14px;
  color: #121212;
  font-size: 18px;
  font-weight: 600;
}

.catalog-filter-chipset,
.catalog-filter-options {
  display: grid;
  gap: 10px;
}

.catalog-filter-chipset button,
.catalog-filter-options label {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  color: #2f3d50;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  background: #f4f7fb;
  border: 0;
  border-radius: 6px;
}

.catalog-filter-chipset button:hover,
.catalog-filter-chipset button:focus-visible,
.catalog-filter-chipset button.is-active {
  color: #0877f9;
  background: #ebf3ff;
  outline: none;
}

.catalog-filter-options input {
  width: 16px;
  height: 16px;
  accent-color: #0877f9;
}

.dashboard-view[data-cabinet-panel="messages"] {
  padding: 0;
}

.dashboard-view[data-cabinet-panel="messages"] .dashboard-section-head {
  display: none;
}

.dashboard-chat-layout {
  display: grid;
  grid-template-columns: 334px minmax(0, 1fr);
  height: 600px;
  min-height: 600px;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
}

.dashboard-chat-list {
  display: grid;
  grid-auto-rows: max-content;
  gap: 0;
  padding: 16px 10px 16px 16px;
  overflow: auto;
  background: #fff;
  border-right: 1px solid #dbdbdb;
}

.dashboard-chat-search {
  position: relative;
  display: block;
  margin-bottom: 18px;
}

.dashboard-chat-search input {
  width: 100%;
  height: 44px;
  padding: 0 44px 0 10px;
  color: #121212;
  font-size: 16px;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
}

.dashboard-chat-search input:focus {
  border-color: #367be3;
  outline: none;
}

.dashboard-chat-search .dashboard-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  color: #7c7c7c;
}

.dashboard-chat-list button {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 62px;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px;
  color: #121212;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
}

.dashboard-chat-list button:hover,
.dashboard-chat-list button:focus-visible {
  background: #f4f7fb;
  outline: none;
}

.dashboard-chat-list button.is-active {
  color: #fff;
  background: #0877f9;
}

.dashboard-chat-avatar,
.dashboard-thread-avatar {
  position: relative;
  display: block;
  width: 46px;
  height: 46px;
}

.dashboard-chat-avatar img,
.dashboard-thread-avatar img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 6px;
}

.dashboard-chat-avatar i {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 14px;
  height: 14px;
  background: #5ed46e;
  border: 2px solid #fff;
  border-radius: 50%;
}

.dashboard-chat-list strong,
.dashboard-chat-list small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-chat-list strong {
  font-size: 16px;
  font-weight: 600;
}

.dashboard-chat-list small {
  margin-top: 4px;
  color: #7c7c7c;
  font-size: 13px;
}

.dashboard-chat-list button.is-active small {
  color: rgba(255, 255, 255, 0.82);
}

.dashboard-chat-list time {
  align-self: start;
  margin-top: 5px;
  color: #a5a5a5;
  font-size: 14px;
  font-weight: 400;
}

.dashboard-chat-list button.is-active time {
  color: #fff;
}

.dashboard-chat-list b,
.dashboard-chat-dot {
  position: absolute;
  right: 14px;
  bottom: 15px;
  width: 8px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  color: transparent;
  font-size: 0;
  line-height: 1;
  background: #367be3;
  border-radius: 50%;
}

.dashboard-chat-list button.is-active b,
.dashboard-chat-list button.is-active .dashboard-chat-dot {
  background: #fff;
}

.dashboard-chat-thread {
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr) 54px 50px;
  min-width: 0;
  background: #fff;
}

.dashboard-chat-thread > header {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 60px;
  padding: 12px 16px;
  border-bottom: 1px solid #dbdbdb;
}

.dashboard-chat-thread header strong {
  color: #121212;
  font-size: 17px;
  font-weight: 600;
}

.dashboard-chat-thread header div span {
  display: inline;
  margin-left: 6px;
  color: #7c7c7c;
  font-size: 13px;
  font-weight: 400;
}

.dashboard-chat-thread header button {
  padding: 0;
  color: #0877f9;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 0;
}

.dashboard-messages {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding: 24px 16px 40px;
  overflow: auto;
  background: #fff;
}

.dashboard-messages p {
  display: grid;
  width: min(446px, 74%);
  min-height: 54px;
  margin: 0;
  padding: 10px 12px;
  align-self: flex-start;
  color: #121212;
  font-size: 14px;
  background: #e8f2ff;
  border: 0;
  border-radius: 7px;
}

.dashboard-messages p.is-own {
  align-self: flex-end;
  color: #121212;
  background: #fff;
  border: 1px solid #dbdbdb;
}

.dashboard-messages p time {
  justify-self: end;
  align-self: end;
  color: #a5a5a5;
  font-size: 12px;
}

.dashboard-chat-suggestions {
  display: flex;
  gap: 16px;
  min-width: 0;
  padding: 0 16px;
  align-items: center;
  overflow: hidden;
}

.dashboard-chat-suggestions button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 16px;
  color: #0877f9;
  font-size: 16px;
  font-weight: 500;
  background: #ebf3ff;
  border: 0;
  border-radius: 6px;
}

.dashboard-chat-suggestions button:hover,
.dashboard-chat-suggestions button:focus-visible {
  color: #0563d1;
  background: #dfeeff;
  outline: none;
}

.dashboard-chat-thread form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 6px 16px;
  background: #e8f2ff;
  border-top: 1px solid #dbdbdb;
}

.dashboard-chat-thread input {
  min-width: 0;
  height: 36px;
  padding: 0 14px;
  color: #121212;
  font-size: 14px;
  background: #fff;
  border: 1px solid #738193;
  border-radius: 6px;
  box-shadow: none;
}

.dashboard-chat-thread input:focus {
  border-color: #367be3;
  outline: none;
}

.dashboard-send-icon {
  display: grid;
  width: 42px;
  height: 36px;
  place-items: center;
  color: #0877f9;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.dashboard-send-icon .dashboard-icon {
  width: 26px;
  height: 26px;
  stroke-width: 2.4;
}

.dashboard-send-icon:hover,
.dashboard-send-icon:focus-visible {
  color: #0563d1;
  background: rgba(8, 119, 249, 0.08);
  outline: none;
}

@media (max-width: 1180px) {
  .chronometer-grid,
  .catalog-page .catalog-main .page-grid {
    width: min(100% - 28px, var(--container));
  }

  .chronometer-grid {
    grid-template-columns: 1fr;
  }

  .chronometer-result-panel .wide-button {
    width: 100%;
  }

  .chronometer-estimate {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-filter-primary,
  .catalog-filter-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .chronometer-main {
    padding-top: 104px;
  }

  .chronometer-section {
    padding-top: 24px;
  }

  .chronometer-grid {
    row-gap: 24px;
  }

  .chronometer-grid > h1 {
    font-size: 38px;
  }

  .chronometer-text-card {
    --chronometer-collapsed-height: 440px;

    height: var(--chronometer-collapsed-height);
  }

  .chronometer-text-meta,
  .chronometer-disclaimer-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .chronometer-speed-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chronometer-duration-card > div,
  .chronometer-estimate,
  .catalog-filter-primary,
  .catalog-filter-advanced,
  .dashboard-chat-layout {
    grid-template-columns: 1fr;
  }

  .catalog-controls[data-catalog-filter-card],
  .catalog-controls[data-catalog-filter-card].is-expanded {
    min-height: 0;
  }

  .dashboard-chat-layout {
    height: auto;
    min-height: 0;
  }

  .dashboard-chat-thread {
    min-height: 560px;
  }
}

/* Exact visible state from the supplied filter SVG exports: both files contain
   only the white rounded container, so custom filter controls are hidden here. */
.catalog-page .catalog-controls[data-catalog-filter-card] {
  display: block;
  height: 160px;
  min-height: 160px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}

.catalog-page .catalog-controls[data-catalog-filter-card].is-expanded {
  height: 615px;
  min-height: 615px;
}

.catalog-page .catalog-controls[data-catalog-filter-card] > * {
  display: none !important;
}

/* Reference transfer: catalog promo filters. */
.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] {
  position: relative;
  display: block;
  width: 100%;
  height: 160px;
  min-height: 160px;
  margin: 28px 0 24px;
  padding: 0;
  overflow: hidden;
  color: #121212;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  transition: height 220ms cubic-bezier(0.22, 1, 0.36, 1), min-height 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded {
  height: 615px;
  min-height: 615px;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] > * {
  display: block !important;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card]:not(.is-expanded) .catalog-reference-expanded,
.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-collapsed {
  display: none !important;
  pointer-events: none;
}

.catalog-reference-collapsed,
.catalog-reference-expanded {
  position: absolute;
  inset: 0;
}

.catalog-reference-field,
.catalog-reference-group {
  position: absolute;
  display: block;
  margin: 0;
}

.catalog-reference-field > span,
.catalog-reference-group > span {
  display: block;
  margin: 0 0 10px;
  color: #121212;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

.catalog-reference-field input,
.catalog-reference-field select,
.catalog-reference-price-row input {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  color: #121212;
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
  background: #fff;
  border: 1px solid #738193;
  border-radius: 6px;
  box-shadow: none;
  outline: none;
}

.catalog-reference-field select {
  appearance: none;
  padding-right: 44px;
}

.catalog-reference-field input::placeholder,
.catalog-reference-price-row input::placeholder {
  color: #738193;
  opacity: 1;
}

.catalog-reference-field input:focus,
.catalog-reference-field select:focus,
.catalog-reference-price-row input:focus {
  border-color: #367be3;
}

.catalog-reference-field i {
  position: absolute;
  right: 10px;
  bottom: 7px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #738193;
  pointer-events: none;
}

.catalog-reference-field i svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-reference-search input {
  padding-right: 44px;
}

.catalog-reference-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
}

.catalog-reference-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  color: #121212;
  font-size: 16px;
  font-weight: 400;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition: color 150ms ease, background-color 150ms ease;
}

.catalog-reference-tabs button:hover,
.catalog-reference-tabs button:focus-visible,
.catalog-reference-tabs button.is-active {
  color: #0877f9;
  background: #ebf3ff;
  outline: none;
}

.is-voice-type .catalog-reference-tabs {
  gap: 6px;
}

.is-voice-type .catalog-reference-tabs button {
  padding: 0;
}

.is-voice-type [data-gender-preset="all"] {
  width: 81px;
}

.is-voice-type [data-gender-preset="male"] {
  width: 82px;
}

.is-voice-type [data-gender-preset="female"] {
  width: 88px;
}

.is-voice-type [data-gender-preset="child"] {
  width: 74px;
}

.catalog-reference-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.catalog-reference-price-row em {
  display: block;
  width: 18px;
  height: 1px;
  background: #738193;
}

.is-collapsed-search {
  top: 20px;
  left: 20px;
  width: 314px;
}

.is-voice-type {
  top: 20px;
  left: 354px;
  width: 348px;
}

.is-price {
  top: 20px;
  left: 733px;
  width: 289px;
}

.is-orders {
  top: 20px;
  left: 1042px;
  width: 334px;
}

.catalog-reference-open,
.catalog-reference-apply {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-height: 36px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  background: #0877f9;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transition: background-color 150ms ease;
}

.catalog-reference-open:hover,
.catalog-reference-open:focus-visible,
.catalog-reference-apply:hover,
.catalog-reference-apply:focus-visible {
  background: #0563d1;
  outline: none;
}

.catalog-reference-open {
  top: 104px;
  left: 20px;
  width: 208px;
}

.catalog-reference-switch {
  display: flex !important;
  align-items: center;
  gap: 14px;
  height: 36px;
  margin: 0;
  color: #121212;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.catalog-reference-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.catalog-reference-switch span {
  position: relative;
  flex: 0 0 50px;
  width: 50px;
  height: 24px;
  background: #e8f2ff;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(8, 119, 249, 0.02);
  transition: background-color 150ms ease;
}

.catalog-reference-switch span::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(82, 96, 113, 0.28);
  transition: transform 150ms ease;
}

.catalog-reference-switch input:checked + span {
  background: #0877f9;
}

.catalog-reference-switch input:checked + span::after {
  transform: translateX(26px);
}

.catalog-reference-switch b {
  font-size: 14px;
  font-weight: 400;
}

.catalog-reference-collapsed > .catalog-reference-switch {
  position: absolute;
  top: 104px;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-top-rated]) {
  left: 255px;
  color: #0877f9;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-only-online]) {
  left: 466px;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-duets]) {
  left: 658px;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-dubbing]) {
  left: 842px;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-cleanup]) {
  left: 990px;
}

.catalog-reference-reset {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  color: #738193;
  font-size: 16px;
  font-weight: 400;
  background: #ebf3ff;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.catalog-reference-reset:hover,
.catalog-reference-reset:focus-visible {
  color: #0877f9;
  background: #dfeeff;
  outline: none;
}

.catalog-reference-reset svg {
  width: 16px;
  height: 16px;
  fill: #738193;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
}

.catalog-reference-collapsed > .catalog-reference-reset {
  top: 104px;
  left: 1187px;
  width: 188px;
}

.catalog-reference-expanded h2 {
  position: absolute;
  top: 15px;
  left: 20px;
  margin: 0;
  color: #121212;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
}

.catalog-reference-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
  color: #a0aab8;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition: color 150ms ease, background-color 150ms ease;
}

.catalog-reference-close:hover,
.catalog-reference-close:focus-visible {
  color: #0877f9;
  background: #ebf3ff;
  outline: none;
}

.catalog-reference-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.expanded-search {
  top: 79px;
  left: 20px;
  width: 432px;
}

.expanded-type {
  top: 169px;
  left: 20px;
  width: 432px;
}

.expanded-price {
  top: 259px;
  left: 20px;
  width: 432px;
}

.expanded-orders {
  top: 349px;
  left: 20px;
  width: 432px;
}

.expanded-deadline {
  top: 439px;
  left: 20px;
  width: 432px;
}

.expanded-pitch {
  top: 79px;
  left: 502px;
  width: 432px;
}

.expanded-age {
  top: 169px;
  left: 502px;
  width: 432px;
}

.expanded-traits {
  top: 259px;
  left: 502px;
  width: 432px;
}

.expanded-language {
  top: 349px;
  left: 502px;
  width: 432px;
}

.catalog-reference-expanded-switches {
  position: absolute;
  top: 75px;
  left: 984px;
  display: grid !important;
  gap: 20px;
}

.catalog-reference-expanded-switches .catalog-reference-switch {
  position: relative;
}

.catalog-reference-expanded-switches .catalog-reference-switch:has([data-catalog-top-rated]) {
  color: #0877f9;
}

.catalog-reference-divider {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 86px;
  height: 1px;
  background: #dfe5ee;
}

.catalog-reference-apply {
  left: 20px;
  bottom: 19px;
  width: 240px;
}

.catalog-reference-reset.is-expanded-reset {
  left: 280px;
  bottom: 19px;
  width: 188px;
}

@media (max-width: 1180px) {
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] {
    overflow-x: auto;
  }

  .catalog-reference-collapsed,
  .catalog-reference-expanded {
    width: 1396px;
  }
}

/* Reference transfer: dashboard chat. */
.dashboard-view[data-cabinet-panel="messages"] {
  overflow: hidden;
}

.dashboard-chat-layout {
  width: min(1042px, 100%);
  height: 640px;
  min-height: 640px;
  grid-template-columns: 344px minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
}

.dashboard-chat-list {
  min-width: 0;
  padding: 16px 10px 16px 16px;
  overflow: auto;
  background: #fff;
  border-right: 1px solid #dbdbdb;
}

.dashboard-chat-search {
  width: 318px;
  margin: 0 0 18px;
}

.dashboard-chat-search input {
  height: 43px;
  padding: 0 44px 0 10px;
  color: #121212;
  font-size: 16px;
  border-color: #dbdbdb;
  border-radius: 6px;
}

.dashboard-chat-search .dashboard-icon {
  top: 9px;
  right: 10px;
  width: 26px;
  height: 26px;
  color: #7c7c7c;
  stroke-width: 1.8;
}

.dashboard-chat-list button {
  width: 318px;
  min-height: 62px;
  padding: 8px;
  grid-template-columns: 46px minmax(0, 1fr) 38px;
  gap: 10px;
  border-radius: 6px;
}

.dashboard-chat-list button.is-active {
  background: #0877f9;
}

.dashboard-chat-thread {
  grid-template-rows: 60px minmax(0, 1fr) 54px 50px;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.dashboard-chat-thread > header {
  min-height: 60px;
  padding: 12px 16px;
  grid-template-columns: 42px minmax(0, 1fr);
  border-bottom: 1px solid #dbdbdb;
}

.dashboard-chat-thread header button {
  display: none;
}

.dashboard-thread-avatar,
.dashboard-thread-avatar img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.dashboard-chat-thread header strong {
  font-size: 16px;
  font-weight: 600;
}

.dashboard-chat-thread header div span {
  margin-left: 8px;
  font-size: 13px;
  color: #7c7c7c;
}

.dashboard-messages {
  min-width: 0;
  padding: 24px 16px 40px;
  overflow: auto;
  background: #fff;
}

.dashboard-messages p {
  width: min(446px, 74%);
  min-height: 54px;
  padding: 10px 12px;
  color: #121212;
  font-size: 14px;
  background: #e8f2ff;
  border: 0;
  border-radius: 7px;
}

.dashboard-messages p.is-own {
  width: min(315px, 54%);
  background: #fff;
  border: 1px solid #dbdbdb;
}

.dashboard-chat-suggestions {
  display: flex;
  gap: 16px;
  min-width: 0;
  padding: 8px 16px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  scrollbar-width: none;
}

.dashboard-chat-suggestions::-webkit-scrollbar {
  display: none;
}

.dashboard-chat-suggestions button {
  flex: 0 0 174px;
  width: 174px;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  overflow: hidden;
  color: #0877f9;
  font-size: 16px;
  font-weight: 500;
  text-overflow: clip;
  white-space: nowrap;
  background: #ebf3ff;
  border: 0;
  border-radius: 6px;
}

.dashboard-chat-thread form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  height: 50px;
  min-height: 50px;
  padding: 6px 16px;
  overflow: hidden;
  background: #e8f2ff;
  border-top: 1px solid #dbdbdb;
}

.dashboard-chat-thread input {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #738193;
  border-radius: 6px;
}

.dashboard-send-icon {
  width: 42px;
  height: 36px;
  min-height: 36px;
  color: #0877f9;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

@media (max-width: 780px) {
  .dashboard-chat-layout {
    width: 100%;
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .dashboard-chat-list,
  .dashboard-chat-search,
  .dashboard-chat-list button {
    width: 100%;
  }
}

/* Reference transfer: advantages, home voice promo rows and catalog voice cards. */
.home-advantages {
  background: #f6f8fc;
}

.home-advantages .page-grid,
.home-voices .page-grid {
  width: min(1396px, calc(100vw - 44px));
}

.home-advantages h2 {
  margin: 0 0 48px;
  color: #121212;
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.home-advantage-grid {
  display: grid;
  grid-template-columns: repeat(3, 452px);
  gap: 20px;
}

.home-advantage-grid article {
  display: block;
  width: 452px;
  height: 173px;
  min-height: 173px;
  padding: 16px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  transform: none;
  transition:
    transform 190ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.home-advantage-grid article > span {
  display: block;
  width: 60px;
  height: 60px;
  background-color: transparent;
  background-image: var(--advantage-reference-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  border-radius: 10px;
  transform: none;
}

.home-advantage-grid article > span::before {
  content: none;
}

.home-advantage-grid article:nth-child(1) { --advantage-reference-icon: url("./assets/reference/advantage-01.png"); }
.home-advantage-grid article:nth-child(2) { --advantage-reference-icon: url("./assets/reference/advantage-02.png"); }
.home-advantage-grid article:nth-child(3) { --advantage-reference-icon: url("./assets/reference/advantage-03.png"); }
.home-advantage-grid article:nth-child(4) { --advantage-reference-icon: url("./assets/reference/advantage-04.png"); }
.home-advantage-grid article:nth-child(5) { --advantage-reference-icon: url("./assets/reference/advantage-05.png"); }
.home-advantage-grid article:nth-child(6) { --advantage-reference-icon: url("./assets/reference/advantage-06.png"); }

.home-advantage-grid strong {
  display: block;
  margin-top: 17px;
  color: #121212;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
}

.home-advantage-grid p {
  max-width: 380px;
  margin: 7px 0 0;
  color: #121212;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
}

.home-advantage-grid article:nth-child(3),
.home-advantage-grid article:hover,
.home-advantage-grid article:focus-within {
  box-shadow: 0 12px 28px rgba(40, 72, 128, 0.06);
  transform: translateY(-3px);
}

.home-advantage-grid article:nth-child(3) strong,
.home-advantage-grid article:hover strong,
.home-advantage-grid article:focus-within strong {
  color: #0877f9;
}

.home-voice-collections {
  display: grid;
  grid-template-columns: repeat(3, 452px);
  gap: 28px 20px;
  align-items: start;
}

.home-voice-collection {
  width: 452px;
  min-height: 458px;
  padding: 8px 16px 16px;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.home-voice-collection h3 {
  margin: 0 0 27px;
  color: #121212;
  font-size: 29px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

.home-voice-collection > div {
  display: grid;
  gap: 30px;
}

.home-voice-collection > a {
  display: grid;
  width: 420px;
  height: 45px;
  margin-top: 30px;
  place-items: center;
  color: #0877f9;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  background: #e8f2ff;
  border-radius: 6px;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.home-voice-collection > a:hover,
.home-voice-collection > a:focus-visible {
  color: #fff;
  background: #0877f9;
  outline: none;
}

.reference-home-voice-row,
.home-voice-row.reference-home-voice-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  grid-template-rows: 28px 26px 26px;
  width: 420px;
  min-height: 80px;
  gap: 0 22px;
  align-items: start;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.reference-home-avatar-wrap {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 4;
  width: 80px;
  height: 80px;
}

.reference-home-avatar,
.home-voice-row .reference-home-avatar {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  overflow: visible;
  border-radius: 8px;
  background: #eaf3ff;
}

.reference-home-avatar img,
.reference-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reference-home-avatar img {
  overflow: hidden;
  border-radius: 8px;
}

.reference-home-avatar > span:not(.voice-presence),
.reference-card-avatar > span:not(.voice-presence) {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #8fb8ee;
  font-size: 19px;
  font-weight: 600;
  background: #eaf3ff;
}

.reference-home-avatar .voice-presence {
  position: absolute;
  top: -7px;
  right: -1px;
  z-index: 4;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
}

.reference-home-play,
.home-voice-row .reference-home-play {
  --play-size: 80px;
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  place-items: center;
  color: #fff;
  background: rgba(12, 18, 30, 0.48);
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  opacity: 0;
  transform: none;
  cursor: pointer;
  transition:
    opacity 160ms ease,
    background-color 160ms ease;
}

.reference-home-voice-row:hover .reference-home-play,
.reference-home-voice-row:focus-within .reference-home-play,
.reference-home-voice-row.is-playing .reference-home-play {
  opacity: 1;
}

.reference-home-play:hover,
.reference-home-play:focus-visible,
.home-voice-row .reference-home-play:hover,
.home-voice-row .reference-home-play:focus-visible {
  background: rgba(12, 18, 30, 0.56);
  outline: none;
  transform: none;
}

.reference-home-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31px;
  height: 31px;
  background: currentColor;
  clip-path: polygon(25% 14%, 84% 50%, 25% 86%);
  transform: translate(-45%, -50%);
}

.reference-home-play.is-playing::before,
.reference-home-voice-row.is-playing .reference-home-play::before {
  width: 29px;
  height: 30px;
  background:
    linear-gradient(currentColor, currentColor) left center / 9px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 9px 100% no-repeat;
  clip-path: none;
  transform: translate(-50%, -50%);
}

.reference-home-copy,
.home-voice-row .reference-home-copy {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
  padding: 0;
}

.reference-home-copy > a,
.home-voice-row .reference-home-copy > a {
  display: block;
  max-width: 230px;
  overflow: hidden;
  color: #121212;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-home-copy > span {
  display: block;
  margin-top: 8px;
  color: #738193;
  font-size: 14px;
  line-height: 1;
}

.reference-home-stats {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  justify-items: end;
  gap: 9px;
  color: #738193;
  font-size: 12px;
  line-height: 1;
}

.reference-home-cashback {
  display: inline-flex;
  height: 20px;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  color: #0b9b21;
  font-size: 12px;
  font-weight: 500;
  background: #f0fff0;
  border: 1px solid #5dd10f;
  border-radius: 4px;
}

.reference-home-cashback b {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  background: #17bfb5;
  border-radius: 50%;
}

.reference-home-stars {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #738193;
  font-size: 12px;
  font-weight: 400;
}

.reference-home-stars span {
  color: #ffc107;
  font-size: 14px;
  letter-spacing: -1px;
}

.reference-home-stars b {
  color: #738193;
  font-size: 12px;
  font-weight: 400;
}

.reference-home-player,
.home-voice-row .reference-home-player {
  position: relative;
  grid-column: 2;
  grid-row: 3;
  display: block;
  width: 318px;
  min-height: 22px;
  margin-top: 0;
}

.reference-home-player input[type="range"],
.home-voice-row .reference-home-player input[type="range"],
.reference-card-range {
  width: 100%;
  height: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.reference-home-player input[type="range"]::-webkit-slider-runnable-track,
.reference-card-range::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, #0877f9 0 var(--range-progress, 0%), #c9d4e4 var(--range-progress, 0%) 100%);
  border: 0;
  border-radius: 4px;
}

.reference-home-player input[type="range"]::-moz-range-track,
.reference-card-range::-moz-range-track {
  height: 6px;
  background: #c9d4e4;
  border: 0;
  border-radius: 4px;
}

.reference-home-player input[type="range"]::-moz-range-progress,
.reference-card-range::-moz-range-progress {
  height: 6px;
  background: #0877f9;
  border-radius: 4px;
}

.reference-home-player input[type="range"]::-webkit-slider-thumb,
.reference-card-range::-webkit-slider-thumb {
  width: 0;
  height: 0;
  margin-top: 3px;
  background: transparent;
  border: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.reference-home-player input[type="range"]::-moz-range-thumb,
.reference-card-range::-moz-range-thumb {
  width: 0;
  height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.reference-home-player .player-meta,
.home-voice-row .reference-home-player .player-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: #738193;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.reference-home-player .player-meta span,
.reference-home-player .player-meta strong,
.home-voice-row .reference-home-player .player-meta span,
.home-voice-row .reference-home-player .player-meta strong {
  display: inline;
  color: #738193;
  font-size: 10px;
  font-weight: 400;
}

.catalog-page .voice-grid,
.catalog-results .voice-grid {
  display: grid;
  grid-template-columns: repeat(4, 334px);
  gap: 20px;
  align-items: start;
}

.voice-card.reference-voice-card {
  position: relative;
  display: block;
  width: 334px;
  height: 217px;
  min-height: 217px;
  padding: 0;
  overflow: visible;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  transform: none;
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.voice-card.reference-voice-card:hover,
.voice-card.reference-voice-card:focus-within {
  box-shadow: 0 9px 24px rgba(21, 32, 58, 0.12);
  transform: translateY(-3px);
}

.reference-card-avatar-wrap {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 57px;
  height: 57px;
}

.reference-card-avatar {
  position: relative;
  display: block;
  width: 57px;
  height: 57px;
  overflow: visible;
  border-radius: 10px;
  background: #eaf3ff;
}

.reference-card-avatar img,
.reference-card-avatar > span:not(.voice-presence) {
  overflow: hidden;
  border-radius: 10px;
}

.reference-card-avatar .voice-presence {
  position: absolute;
  top: -5px;
  right: -4px;
  z-index: 5;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
}

.reference-card-play {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  width: 57px;
  height: 57px;
  min-width: 57px;
  min-height: 57px;
  place-items: center;
  color: #fff;
  background: rgba(55, 62, 75, 0.62);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  cursor: pointer;
  opacity: 1;
  transform: none;
  transition:
    background-color 160ms ease,
    opacity 160ms ease;
}

.reference-card-play:hover,
.reference-card-play:focus-visible {
  background: rgba(40, 48, 62, 0.7);
  outline: none;
  transform: none;
}

.reference-card-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background: currentColor;
  clip-path: polygon(26% 15%, 84% 50%, 26% 85%);
  transform: translate(-44%, -50%);
}

.reference-card-play.is-playing::before,
.reference-voice-card.is-playing .reference-card-play::before {
  width: 22px;
  height: 24px;
  background:
    linear-gradient(currentColor, currentColor) left center / 7px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / 7px 100% no-repeat;
  clip-path: none;
  transform: translate(-50%, -50%);
}

.reference-card-name {
  position: absolute;
  top: 18px;
  left: 86px;
  max-width: 232px;
  overflow: hidden;
  color: #121212;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.08;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-card-description {
  position: absolute;
  top: 45px;
  left: 86px;
  display: -webkit-box;
  width: 232px;
  margin: 0;
  overflow: hidden;
  color: #738193;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reference-card-range {
  position: absolute;
  top: 87px;
  left: 16px;
  z-index: 1;
  display: block;
  width: 302px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.reference-voice-card:hover .reference-card-range,
.reference-voice-card:focus-within .reference-card-range,
.reference-voice-card.is-playing .reference-card-range {
  opacity: 1;
}

.reference-card-badges {
  position: absolute;
  top: 88px;
  left: 16px;
  display: grid;
  grid-template-columns: 56px 112px 122px;
  gap: 5px 6px;
  align-items: start;
}

.reference-voice-card:hover .reference-card-badges,
.reference-voice-card:focus-within .reference-card-badges,
.reference-voice-card.is-playing .reference-card-badges {
  top: 104px;
}

.reference-badge {
  display: inline-flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  color: #121212;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  background: #eaf3ff;
  border: 0;
  border-radius: 5px;
}

.reference-badge-rating span {
  color: #FECC1D;
  font-size: 17px;
  line-height: 1;
}

.reference-badge-cashback {
  color: #121212;
  background: #dbf5dd;
}

.reference-badge-cashback span {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  background: #2ac83c;
  border-radius: 50%;
}

.reference-badge-status {
  width: 122px;
  justify-content: center;
  padding: 0 6px;
  font-size: 12px;
}

.reference-badge-status.is-online {
  color: #00b514;
  background: #dbf5dd;
}

.reference-badge-status.is-offline {
  color: #f22d4c;
  background: #ffe5eb;
}

.reference-badge-orders {
  grid-column: 1 / span 2;
  width: 148px;
  justify-content: center;
  gap: 0;
}

.reference-badge-time {
  grid-column: 3;
  width: 148px;
  justify-content: center;
  gap: 0;
}

.reference-card-price {
  position: absolute;
  left: 16px;
  bottom: 16px;
}

.reference-card-price strong {
  display: block;
  color: #121212;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.reference-card-price span {
  display: block;
  margin-top: 3px;
  color: #738193;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.voice-card.reference-voice-card .reference-card-price.is-rate-missing {
  width: min(112px, calc(100% - 204px));
}

.voice-card.reference-voice-card .reference-card-price.is-rate-missing strong {
  font-size: 14px;
  line-height: 18px;
  white-space: normal;
}

.reference-card-order {
  position: absolute;
  right: 62px;
  bottom: 16px;
  display: grid;
  width: 129px;
  height: 36px;
  place-items: center;
  color: #0877f9;
  font-size: 16px;
  font-weight: 400;
  background: #eaf3ff;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

.reference-voice-card:hover .reference-card-order,
.reference-card-order:hover,
.reference-card-order:focus-visible {
  color: #fff;
  background: #0877f9;
  outline: none;
}

.reference-card-favorite {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #f44b5f;
  min-width: 0;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  background: #eaf3ff;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    transform 160ms ease;
}

.reference-card-favorite:hover,
.reference-card-favorite:focus-visible {
  background: #dfeeff;
  outline: none;
}

.reference-card-favorite:active {
  transform: scale(0.96);
}

@media (max-width: 1420px) {
  .home-advantage-grid,
  .home-voice-collections {
    grid-template-columns: repeat(2, 452px);
  }

  .catalog-page .voice-grid,
  .catalog-results .voice-grid {
    grid-template-columns: repeat(3, 334px);
  }
}

@media (max-width: 980px) {
  .home-advantages .page-grid,
  .home-voices .page-grid {
    width: min(452px, calc(100vw - 32px));
  }

  .home-advantage-grid,
  .home-voice-collections {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-advantage-grid article,
  .home-voice-collection {
    width: 100%;
  }

  .home-voice-collection > a,
  .reference-home-voice-row,
  .home-voice-row.reference-home-voice-row {
    width: 100%;
  }

  .reference-home-player,
  .home-voice-row .reference-home-player {
    width: calc(100vw - 150px);
    max-width: 318px;
  }

  .catalog-page .voice-grid,
  .catalog-results .voice-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 334px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-advantage-grid article,
  .home-voice-collection > a,
  .reference-home-play,
  .voice-card.reference-voice-card,
  .reference-card-order,
  .reference-card-favorite {
    transition-duration: 1ms;
  }
}

/* Catalog card/modal polish after visual review. */
body.catalog-filter-modal-open {
  overflow: hidden;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] {
  width: 100%;
  max-width: 1396px;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded {
  position: fixed;
  inset: 0;
  z-index: 1500;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  background: rgba(8, 18, 38, 0.2);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-expanded {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1396px, calc(100vw - 44px));
  height: 615px;
  min-height: 615px;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(18, 32, 58, 0.16);
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: catalogFilterModalIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes catalogFilterModalIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.voice-card.reference-voice-card {
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(222, 231, 242, 0.78);
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.voice-card.reference-voice-card:hover,
.voice-card.reference-voice-card:focus-within {
  box-shadow:
    0 0 0 1px rgba(222, 231, 242, 0.88),
    0 8px 18px rgba(22, 41, 76, 0.09);
  transform: translateY(-2px);
}

.reference-card-play {
  opacity: 0;
  pointer-events: none;
}

.reference-voice-card:hover .reference-card-play,
.reference-voice-card:focus-within .reference-card-play {
  opacity: 1;
  pointer-events: auto;
}

.reference-card-play,
.reference-card-play.is-playing {
  width: 57px;
  height: 57px;
  min-width: 57px;
  min-height: 57px;
}

.reference-card-play::before {
  width: 24px;
  height: 24px;
  transform: translate(-44%, -50%);
}

.reference-card-play.is-playing::before,
.reference-voice-card.is-playing .reference-card-play::before {
  width: 26px;
  height: 26px;
  background: currentColor;
  border-radius: 3px;
  clip-path: inset(9% round 3px);
  transform: translate(-50%, -50%);
}

.reference-card-range,
.reference-voice-card:hover .reference-card-range,
.reference-voice-card:focus-within .reference-card-range,
.reference-voice-card.is-playing .reference-card-range {
  display: none;
  opacity: 0;
}

.reference-card-badges,
.reference-voice-card:hover .reference-card-badges,
.reference-voice-card:focus-within .reference-card-badges,
.reference-voice-card.is-playing .reference-card-badges {
  top: 88px;
  display: block;
  width: 302px;
  height: 57px;
}

.reference-card-badges .reference-badge {
  position: absolute;
}

.reference-badge-rating {
  top: 0;
  left: 0;
  width: 56px;
  background: #EBF3FF;
  transition: background-color 160ms ease;
}

.reference-voice-card:hover .reference-badge-rating,
.reference-voice-card:focus-within .reference-badge-rating {
  background: #FFF5D7;
}

.reference-badge-cashback {
  top: 0;
  left: 62px;
  width: 112px;
}

.reference-badge-status {
  top: 0;
  left: 180px;
  width: 122px;
}

.reference-badge-orders {
  top: 31px;
  left: 0;
  width: 148px;
}

.reference-badge-time {
  top: 31px;
  left: 154px;
  width: 148px;
}

@media (max-width: 1420px) {
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-expanded {
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-expanded {
    animation: none;
  }
}

/* Final interaction polish: modal filters, unified playback glyphs, favorite state. */
.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] {
  width: 100%;
  max-width: 1396px;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded {
  position: relative;
  inset: auto;
  z-index: 1500;
  width: 100%;
  max-width: 1396px;
  height: 160px;
  min-height: 160px;
  margin: 28px 0 24px;
  overflow: visible;
  background: #fff;
  border-radius: 12px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(8, 18, 38, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: catalogFilterBackdropIn 180ms ease-out;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1501;
  width: min(1396px, calc(100vw - 44px));
  height: 615px;
  min-height: 615px;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(18, 32, 58, 0.16);
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: catalogFilterModalIn 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes catalogFilterBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.player-button,
.home-mini-play,
.profile-demo-play,
.global-player-play {
  --play-glyph-size: 16px;
  --pause-bar-width: 5px;
}

.reference-card-play {
  --play-glyph-size: 24px;
  --pause-bar-width: 7px;
  background: rgba(55, 62, 75, 0.62);
  transition:
    opacity 160ms ease,
    background-color 160ms ease;
}

.reference-home-play,
.home-voice-row .reference-home-play {
  --play-glyph-size: 31px;
  --pause-bar-width: 9px;
  background: rgba(12, 18, 30, 0.48);
}

.reference-card-play:hover,
.reference-card-play:focus-visible,
.reference-home-play:hover,
.reference-home-play:focus-visible,
.home-voice-row .reference-home-play:hover,
.home-voice-row .reference-home-play:focus-visible {
  background: var(--play-overlay-bg, rgba(55, 62, 75, 0.62));
  outline: none;
  transform: none;
}

.reference-card-play:hover,
.reference-card-play:focus-visible {
  --play-overlay-bg: rgba(55, 62, 75, 0.62);
}

.reference-home-play:hover,
.reference-home-play:focus-visible,
.home-voice-row .reference-home-play:hover,
.home-voice-row .reference-home-play:focus-visible {
  --play-overlay-bg: rgba(12, 18, 30, 0.48);
}

.player-button::before,
.home-mini-play::before,
.profile-demo-play::before,
.reference-card-play::before,
.reference-home-play::before,
.global-player-play span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--play-glyph-size);
  height: var(--play-glyph-size);
  margin: 0;
  background: currentColor;
  border: 0;
  border-radius: 0;
  clip-path: polygon(28% 15%, 84% 50%, 28% 85%);
  filter: none;
  transform: translate(-44%, -50%);
  transition: none;
}

.player-button.is-playing::before,
.home-mini-play.is-playing::before,
.profile-demo-play.is-playing::before,
.reference-card-play.is-playing::before,
.reference-voice-card.is-playing .reference-card-play::before,
.reference-home-play.is-playing::before,
.reference-home-voice-row.is-playing .reference-home-play::before,
.global-audio-player.is-playing .global-player-play span {
  width: var(--play-glyph-size);
  height: var(--play-glyph-size);
  background:
    linear-gradient(currentColor, currentColor) left center / var(--pause-bar-width) 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / var(--pause-bar-width) 100% no-repeat;
  border: 0;
  border-radius: 0;
  clip-path: none;
  transform: translate(-50%, -50%);
}

.reference-card-play {
  opacity: 0;
  pointer-events: none;
}

.reference-voice-card:hover .reference-card-play,
.reference-voice-card:focus-within .reference-card-play {
  opacity: 1;
  pointer-events: auto;
}

.reference-card-favorite {
  color: #9aa8ba;
}

.dialector-heart {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  fill: currentColor;
  stroke: none;
}

.dialector-heart [data-heart-state="filled"],
.is-favorite > .dialector-heart [data-heart-state="outline"] {
  display: none;
}

.is-favorite > .dialector-heart [data-heart-state="filled"] {
  display: inline;
}

.reference-card-favorite.is-favorite {
  color: #f44b5f;
}

.reference-card-favorite > .dialector-heart {
  width: 24px;
  height: 24px;
}

.home-advantage-grid article,
.home-advantage-grid article:nth-child(3),
.home-advantage-grid article:hover,
.home-advantage-grid article:focus-within {
  height: 173px;
  min-height: 173px;
  padding: 22px;
  box-shadow: none;
  transform: none;
}

.home-advantage-grid article > span,
.home-advantage-grid article:hover > span,
.home-advantage-grid article:focus-within > span {
  width: 60px;
  height: 60px;
  background-color: transparent;
  background-image: var(--advantage-reference-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60px 60px;
  transform: none;
}

.home-advantage-grid strong,
.home-advantage-grid article:nth-child(3) strong,
.home-advantage-grid article:hover strong,
.home-advantage-grid article:focus-within strong {
  margin-top: 17px;
  color: #121212;
}

.home-advantage-grid p {
  max-width: 386px;
}

.home-voice-collection {
  min-height: 458px;
  padding: 15px 16px 16px;
}

.home-voice-collection h3 {
  margin: 0 0 20px;
}

@media (prefers-reduced-motion: reduce) {
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded::before,
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-expanded {
    animation: none;
  }
}

/* Final catalog alignment and shared breadcrumbs pass. */
.site-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #738193;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.site-breadcrumbs a {
  color: #0877f9;
  text-decoration: none;
}

.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus-visible {
  color: #0563d1;
  outline: none;
}

.catalog-heading > .eyebrow {
  display: none;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card],
.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded {
  width: min(1396px, calc(100vw - 44px));
  max-width: 1396px;
}

.catalog-reference-collapsed {
  width: 100%;
}

.is-collapsed-search {
  left: 0;
}

.is-voice-type {
  left: 334px;
}

.is-price {
  left: 713px;
}

.is-orders {
  right: 0;
  left: auto;
}

.catalog-reference-open {
  left: 0;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-top-rated]) {
  left: 235px;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-only-online]) {
  left: 446px;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-duets]) {
  left: 638px;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-dubbing]) {
  left: 822px;
}

.catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-cleanup]) {
  left: 970px;
}

.catalog-reference-collapsed > .catalog-reference-reset {
  right: 0;
  left: auto;
}

.player-button,
.home-mini-play,
.profile-demo-play,
.global-player-play {
  --play-glyph-size: 21px;
  --pause-glyph-size: 18px;
  --pause-bar-width: 5px;
}

.global-player-play {
  --play-glyph-size: 22px;
  --pause-glyph-size: 18px;
}

.reference-card-play {
  --play-glyph-size: 34px;
  --pause-glyph-size: 28px;
  --pause-bar-width: 7px;
}

.reference-home-play,
.home-voice-row .reference-home-play {
  --play-glyph-size: 40px;
  --pause-glyph-size: 34px;
  --pause-bar-width: 9px;
}

.player-button::before,
.home-mini-play::before,
.profile-demo-play::before,
.reference-card-play::before,
.reference-home-play::before,
.global-player-play span {
  width: var(--play-glyph-size);
  height: var(--play-glyph-size);
  clip-path: polygon(25% 11%, 88% 50%, 25% 89%);
  transform: translate(-42%, -50%);
}

.player-button.is-playing::before,
.home-mini-play.is-playing::before,
.profile-demo-play.is-playing::before,
.reference-card-play.is-playing::before,
.reference-voice-card.is-playing .reference-card-play::before,
.reference-home-play.is-playing::before,
.reference-home-voice-row.is-playing .reference-home-play::before,
.global-audio-player.is-playing .global-player-play span {
  width: var(--pause-glyph-size, var(--play-glyph-size));
  height: var(--pause-glyph-size, var(--play-glyph-size));
  background:
    linear-gradient(currentColor, currentColor) left center / var(--pause-bar-width) 100% no-repeat,
    linear-gradient(currentColor, currentColor) right center / var(--pause-bar-width) 100% no-repeat;
  clip-path: none;
  transform: translate(-50%, -50%);
}

.reference-card-favorite.is-favorite {
  background: #ffeaf0;
}

.reference-card-favorite.is-favorite > .dialector-heart {
  animation: favoriteAddedPop 520ms cubic-bezier(0.18, 1.35, 0.28, 1);
}

.reference-card-favorite.is-favorite::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(244, 75, 95, 0.42);
  border-radius: 8px;
  opacity: 0;
  animation: favoriteAddedRing 520ms ease-out;
  pointer-events: none;
}

@keyframes favoriteAddedPop {
  0% {
    transform: translateY(-1px) scale(0.82) rotate(-8deg);
  }
  45% {
    transform: translateY(-1px) scale(1.24) rotate(6deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes favoriteAddedRing {
  0% {
    opacity: 0.5;
    transform: scale(0.72);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

.home-advantage-grid article,
.home-advantage-grid article:nth-child(3),
.home-advantage-grid article:hover,
.home-advantage-grid article:focus-within {
  height: 190px;
  min-height: 190px;
  padding: 24px 22px 26px;
}

.home-advantage-grid p {
  max-width: 390px;
  line-height: 1.28;
}

@media (prefers-reduced-motion: reduce) {
  .reference-card-favorite.is-favorite > .dialector-heart,
  .reference-card-favorite.is-favorite::after {
    animation: none;
  }
}

/* Final visual lock for catalog filters, favorites and shared playback controls. */
.catalog-page .catalog-main .page-grid {
  width: min(1396px, calc(100vw - 44px));
  max-width: 1396px;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card]:not(.is-expanded) {
  height: 160px;
  min-height: 160px;
}

.catalog-reference-collapsed,
.catalog-reference-expanded {
  width: 100%;
}

.catalog-reference-collapsed .is-collapsed-search,
.catalog-reference-collapsed .catalog-reference-open {
  left: 0;
}

.catalog-reference-collapsed .is-voice-type {
  left: 334px;
}

.catalog-reference-collapsed .is-price {
  left: 713px;
}

.catalog-reference-collapsed .is-orders,
.catalog-reference-collapsed > .catalog-reference-reset {
  right: 0;
  left: auto;
}

.catalog-page .voice-grid,
.catalog-results .voice-grid {
  width: 100%;
}

.reference-card-favorite {
  overflow: visible;
}

.reference-card-favorite.is-favorite::after {
  inset: -4px;
  border-color: rgba(244, 75, 95, 0.3);
}

.home-advantage-grid article,
.home-advantage-grid article:nth-child(3),
.home-advantage-grid article:hover,
.home-advantage-grid article:focus-within {
  height: 198px;
  min-height: 198px;
  padding: 26px 22px 30px;
}

.home-advantage-grid strong,
.home-advantage-grid article:nth-child(3) strong,
.home-advantage-grid article:hover strong,
.home-advantage-grid article:focus-within strong {
  margin-top: 18px;
}

.home-advantage-grid p {
  margin-top: 7px;
  line-height: 1.32;
}

.player-button,
.home-mini-play,
.profile-demo-play,
.global-player-play {
  --play-glyph-width: 12px;
  --play-glyph-height: 14px;
  --pause-glyph-width: 13px;
  --pause-glyph-height: 15px;
}

.global-player-play {
  --play-glyph-width: 13px;
  --play-glyph-height: 15px;
  --pause-glyph-width: 14px;
  --pause-glyph-height: 16px;
}

.reference-card-play {
  --play-glyph-width: 18px;
  --play-glyph-height: 20px;
  --pause-glyph-width: 19px;
  --pause-glyph-height: 21px;
}

.reference-home-play,
.home-voice-row .reference-home-play {
  --play-glyph-width: 22px;
  --play-glyph-height: 25px;
  --pause-glyph-width: 24px;
  --pause-glyph-height: 27px;
}

.player-button::before,
.home-mini-play::before,
.profile-demo-play::before,
.reference-card-play::before,
.reference-home-play::before,
.global-player-play span {
  width: var(--play-glyph-width);
  height: var(--play-glyph-height);
  background: currentColor;
  border: 0;
  border-radius: 0;
  clip-path: none;
  transform: translate(-50%, -50%);
  -webkit-mask: url("./assets/player-play-shape.svg") center / contain no-repeat;
  mask: url("./assets/player-play-shape.svg") center / contain no-repeat;
}

.player-button.is-playing::before,
.home-mini-play.is-playing::before,
.profile-demo-play.is-playing::before,
.reference-card-play.is-playing::before,
.reference-voice-card.is-playing .reference-card-play::before,
.reference-home-play.is-playing::before,
.reference-home-voice-row.is-playing .reference-home-play::before,
.global-audio-player.is-playing .global-player-play span {
  width: var(--pause-glyph-width);
  height: var(--pause-glyph-height);
  background: currentColor;
  clip-path: none;
  transform: translate(-50%, -50%);
  -webkit-mask: url("./assets/player-pause-shape.svg") center / contain no-repeat;
  mask: url("./assets/player-pause-shape.svg") center / contain no-repeat;
}

.player-button::after,
.home-mini-play::after,
.profile-demo-play::after,
.reference-card-play::after,
.reference-home-play::after,
.global-player-play::after {
  content: none !important;
  display: none !important;
}

.segment-catalog-voice-grid a > span,
.segment-catalog-service-grid a > span,
.segment-catalog-service-grid button > span {
  transition: none;
}

.segment-catalog-voice-grid img,
.segment-catalog-service-grid img {
  filter: none;
  transition: none;
}

.segment-catalog-voice-grid a:hover img,
.segment-catalog-voice-grid a:focus-visible img {
  filter: brightness(0) invert(1);
}

.segment-catalog-service-grid a:hover img,
.segment-catalog-service-grid a:focus-visible img,
.segment-catalog-service-grid button:hover img,
.segment-catalog-service-grid button:focus-visible img {
  filter: none;
}

/* Mega menu hover polish and browser-saved favorites. */
.segment-catalog-voice-grid a,
.segment-catalog-service-grid a,
.segment-catalog-service-grid button {
  transition:
    color 180ms ease,
    background-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.segment-catalog-voice-grid a > span,
.segment-catalog-service-grid a > span,
.segment-catalog-service-grid button > span {
  transition: background-color 190ms ease;
}

.segment-catalog-voice-grid a:hover,
.segment-catalog-voice-grid a:focus-visible,
.segment-catalog-service-grid a:hover,
.segment-catalog-service-grid a:focus-visible,
.segment-catalog-service-grid button:hover,
.segment-catalog-service-grid button:focus-visible {
  transform: none;
  box-shadow: none;
}

.segment-catalog-voice-grid a:hover > span,
.segment-catalog-voice-grid a:focus-visible > span,
.segment-catalog-service-grid a:hover > span,
.segment-catalog-service-grid a:focus-visible > span,
.segment-catalog-service-grid button:hover > span,
.segment-catalog-service-grid button:focus-visible > span {
  transform: none;
  box-shadow: none;
}

.segment-catalog-voice-grid img,
.segment-catalog-service-grid img {
  transition: none !important;
}

.segment-catalog-voice-grid a:hover img,
.segment-catalog-voice-grid a:focus-visible img {
  filter: brightness(0) invert(1) !important;
}

.segment-catalog-service-grid a,
.segment-catalog-service-grid button {
  gap: 18px;
  padding: 8px 14px 8px 8px;
}

.segment-catalog-service-grid b {
  padding-right: 8px;
}

.favorites-main {
  padding-top: 150px;
  background: #f7f9fd;
}

.favorites-section {
  min-height: 640px;
  padding: 34px 0 96px;
}

.favorites-heading {
  max-width: 760px;
  margin: 0 0 28px;
}

.favorites-heading h1 {
  margin: 8px 0 12px;
  color: #121212;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: 0;
}

.favorites-heading p:last-child {
  margin: 0;
  color: #617087;
  font-size: 18px;
  line-height: 1.45;
}

.favorites-grid.is-empty {
  display: block;
}

.favorites-empty {
  display: grid;
  width: min(100%, 620px);
  gap: 14px;
  padding: 34px;
  background: #fff;
  border: 1px solid rgba(54, 123, 227, 0.12);
  border-radius: 12px;
}

.favorites-empty h2 {
  margin: 0;
  color: #121212;
  font-size: 28px;
  line-height: 1.15;
}

.favorites-empty p {
  margin: 0;
  color: #617087;
  font-size: 17px;
  line-height: 1.45;
}

.favorites-empty .primary-button {
  width: fit-content;
  margin-top: 6px;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .segment-catalog-voice-grid a,
  .segment-catalog-service-grid a,
  .segment-catalog-service-grid button,
  .segment-catalog-voice-grid a > span,
  .segment-catalog-service-grid a > span,
  .segment-catalog-service-grid button > span {
    transition: none;
  }

  .segment-catalog-voice-grid a:hover,
  .segment-catalog-voice-grid a:focus-visible,
  .segment-catalog-service-grid a:hover,
  .segment-catalog-service-grid a:focus-visible,
  .segment-catalog-service-grid button:hover,
  .segment-catalog-service-grid button:focus-visible,
  .segment-catalog-voice-grid a:hover > span,
  .segment-catalog-voice-grid a:focus-visible > span,
  .segment-catalog-service-grid a:hover > span,
  .segment-catalog-service-grid a:focus-visible > span,
  .segment-catalog-service-grid button:hover > span,
  .segment-catalog-service-grid button:focus-visible > span {
    transform: none;
  }
}

/* Service-specific order forms from the supplied Figma exports. */
.order-modal-panel {
  width: min(1396px, calc(100vw - 28px));
  max-height: min(94vh, 1040px);
  padding: 22px;
  background: #f6f8fb;
  border-radius: 12px;
}

.order-modal-panel > .eyebrow {
  display: none;
}

.order-modal-panel > h2 {
  margin: 0 0 18px;
  color: #121212;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  text-align: center;
}

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

.service-order-title {
  margin: 0;
  color: #121212;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0;
}

.service-order-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.service-order-tabs button,
.service-order-kind-tabs button {
  min-height: 36px;
  padding: 0 14px;
  color: #121212;
  font: 500 16px/1 var(--font-sans);
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

.service-order-tabs button:hover,
.service-order-tabs button:focus-visible,
.service-order-kind-tabs button:hover,
.service-order-kind-tabs button:focus-visible {
  color: #0877f9;
  background: #e8f2ff;
  outline: none;
}

.service-order-tabs button.is-active,
.service-order-kind-tabs button.is-active {
  color: #0877f9;
  background: #e8f2ff;
}

.service-order-layout {
  display: grid;
  grid-template-columns: minmax(0, 688px) 334px;
  gap: 20px;
  align-items: start;
  justify-content: center;
}

.service-order-layout.has-alert {
  grid-template-columns: 334px minmax(0, 688px) 334px;
}

.service-order-alert,
.service-order-section,
.service-order-summary-card,
.service-order-promo {
  background: #fff;
  border: 0;
  border-radius: 8px;
}

.service-order-alert {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  color: #ff3b45;
  background: #fff0f1;
}

.service-order-alert > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  font-weight: 600;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.service-order-alert p {
  margin: 0 0 8px;
  color: #ff3b45;
  font-size: 15px;
  line-height: 1.25;
}

.service-order-main {
  display: grid;
  gap: 20px;
}

.service-order-main > h2 {
  display: none;
}

.service-order-section {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.service-order-section h3 {
  margin: 0;
  color: #121212;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

.service-order-section h3 span {
  font-weight: 400;
}

.service-order-section label {
  display: grid;
  gap: 10px;
}

.service-order-label,
.service-order-section label > span,
.performer-field > span,
.performer-attach-row > strong {
  color: #121212;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
}

.service-order-section input[type="text"],
.service-order-section select,
.performer-field input,
.performer-field select,
.performer-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  color: #121212;
  font: 400 15px/1.35 var(--font-sans);
  background: #fff;
  border: 1px solid #7e8fa8;
  border-radius: 5px;
  outline: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}

.service-order-section input[type="text"]:focus,
.service-order-section select:focus,
.performer-field input:focus,
.performer-field select:focus,
.performer-field textarea:focus {
  border-color: #0877f9;
  background: #fff;
}

.service-order-kind-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.service-order-performer-list {
  display: grid;
  gap: 14px;
}

.service-order-performer {
  display: grid;
  gap: 12px;
}

.service-order-performer-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 120px 28px;
  gap: 12px;
  align-items: center;
}

.service-order-avatar {
  position: relative;
  width: 58px;
  height: 58px;
}

.service-order-avatar .avatar,
.service-order-avatar img,
.service-order-avatar > span:first-child {
  width: 58px;
  height: 58px;
  border-radius: 8px;
}

.service-order-avatar .voice-presence {
  right: -2px;
  top: -4px;
}

.service-order-avatar-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(9, 11, 16, 0.5);
  border: 0;
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    background-color 160ms ease;
}

.service-order-avatar-play::before {
  display: block;
  width: 14px;
  height: 16px;
  content: "";
  background: currentColor;
  transform: translateX(1px);
  -webkit-mask: url("./assets/player-play-shape.svg") center / contain no-repeat;
  mask: url("./assets/player-play-shape.svg") center / contain no-repeat;
}

.service-order-avatar-play.is-playing::before,
.service-order-performer.is-playing .service-order-avatar-play::before,
.performer-picker-card.is-playing .service-order-avatar-play::before {
  width: 14px;
  height: 16px;
  transform: none;
  -webkit-mask: url("./assets/player-pause-shape.svg") center / contain no-repeat;
  mask: url("./assets/player-pause-shape.svg") center / contain no-repeat;
}

.service-order-performer:hover .service-order-avatar-play,
.service-order-performer:focus-within .service-order-avatar-play,
.service-order-performer.is-playing .service-order-avatar-play,
.performer-picker-card:hover .service-order-avatar-play,
.performer-picker-card:focus-within .service-order-avatar-play,
.performer-picker-card.is-playing .service-order-avatar-play {
  opacity: 1;
  transform: scale(1);
}

.service-order-performer-copy {
  min-width: 0;
}

.service-order-performer-copy strong,
.service-order-performer-copy span {
  display: block;
}

.service-order-performer-copy strong {
  overflow: hidden;
  color: #121212;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-order-performer-copy span {
  margin-top: 3px;
  color: #121212;
  font-size: 12px;
}

.service-order-performer-meta {
  display: flex;
  gap: 20px;
  color: #121212;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.service-order-performer-meta span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.service-order-performer-meta .segment-icon {
  width: 20px;
  height: 20px;
  color: #0877f9;
  stroke-width: 2.3;
}

.service-order-param-button,
.service-order-add,
.service-order-promo .secondary-button {
  min-height: 36px;
  color: #0877f9;
  font: 500 16px/1 var(--font-sans);
  background: #e8f2ff;
  border: 0;
  border-radius: 6px;
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

.service-order-param-button:hover,
.service-order-param-button:focus-visible,
.service-order-add:hover,
.service-order-add:focus-visible,
.service-order-promo .secondary-button:hover,
.service-order-promo .secondary-button:focus-visible {
  color: #fff;
  background: #0877f9;
  outline: none;
}

.service-order-remove {
  display: grid;
  width: 28px;
  height: 36px;
  place-items: center;
  color: #9aa9bc;
  background: transparent;
  border: 0;
}

.service-order-remove .segment-icon {
  width: 18px;
  height: 18px;
}

.service-order-performer-note {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  color: #526071;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  background: #f6f8fb;
  border-radius: 5px;
}

.service-order-performer-note button {
  justify-self: start;
  margin-top: 2px;
  padding: 0;
  color: #0877f9;
  font: 600 13px/1.2 var(--font-sans);
  font-weight: 600;
  background: transparent;
  border: 0;
}

.service-order-add {
  justify-self: center;
  padding: 0 10px;
  background: transparent;
}

.service-order-add:disabled,
.service-order-blue-banner [data-add-performer]:disabled {
  color: #718198;
  background: #edf1f6;
  cursor: not-allowed;
  opacity: .78;
}

.service-order-add:disabled:hover,
.service-order-add:disabled:focus-visible,
.service-order-blue-banner [data-add-performer]:disabled:hover,
.service-order-blue-banner [data-add-performer]:disabled:focus-visible {
  color: #718198;
  background: #edf1f6;
}

.service-order-blue-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 32px;
  gap: 12px;
  align-items: center;
  min-height: 74px;
  padding: 0 20px;
  color: #fff;
  background: #0877f9;
  border-radius: 8px;
}

.service-order-blue-banner strong {
  font-size: 23px;
  font-weight: 500;
}

.service-order-blue-banner button {
  min-height: 36px;
  color: #0877f9;
  background: #e8f2ff;
  border: 0;
  border-radius: 6px;
}

.service-order-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}

.service-order-extra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

.service-order-check {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px !important;
  align-items: center;
  min-height: 24px;
  color: #121212;
  font-size: 15px;
}

.service-order-check input {
  width: 18px;
  height: 18px;
  accent-color: #0877f9;
}

.service-order-check b {
  font-weight: 600;
}

.service-order-check.is-disabled {
  color: #718198;
}

.service-order-section.service-order-option {
  gap: 0;
  padding: 14px 20px;
  overflow: hidden;
  border-radius: 12px;
}

.service-order-option > .service-order-option-toggle {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 16px !important;
  align-items: center;
  width: 100%;
  min-height: 24px;
  margin: 0;
  cursor: pointer;
}

.service-order-section .service-order-option-toggle > .service-order-option-title {
  min-width: 0;
  color: #121212;
  font: 600 18px/22px var(--font-sans);
  letter-spacing: 0;
  text-wrap: pretty;
}

.service-order-option-title output {
  font: inherit;
  font-variant-numeric: proportional-nums;
}

.service-order-option-title .order-bonus-mark {
  width: 17px;
  height: 17px;
  margin-left: 4px;
  font-size: 10px;
  vertical-align: 1px;
}

.service-order-option-toggle > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.service-order-option-toggle > .service-order-option-switch {
  position: relative;
  display: block;
  grid-column: 2;
  width: 48px;
  height: 24px;
  margin: 0;
  background: #ebf3ff;
  border-radius: 12px;
  transition-property: background-color, box-shadow;
  transition-duration: 180ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.service-order-option-switch i {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid #ebf3ff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgb(54 123 227 / 16%);
  transition-property: transform, border-color, box-shadow;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.service-order-option-toggle > input:checked + .service-order-option-switch {
  background: linear-gradient(117deg, #0066ff 2%, #0094ff 100%);
}

.service-order-option-toggle > input:checked + .service-order-option-switch i {
  border-color: #367be3;
  box-shadow: 0 2px 8px rgb(54 123 227 / 24%);
  transform: translateX(24px);
}

.service-order-option-toggle:has(input:focus-visible) > .service-order-option-switch {
  outline: 2px solid #367be3;
  outline-offset: 3px;
}

.service-order-option-details {
  display: grid;
  grid-template-rows: 0fr;
  min-width: 0;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  transition-property: grid-template-rows, margin-top, opacity, visibility;
  transition-duration: 240ms, 240ms, 150ms, 0s;
  transition-delay: 0s, 0s, 0s, 240ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), cubic-bezier(0.22, 1, 0.36, 1), ease-out, linear;
}

.service-order-option.is-active .service-order-option-details {
  grid-template-rows: 1fr;
  margin-top: 12px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.service-order-option-details-inner {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.service-order-bonus-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  min-height: 36px;
}

.service-order-bonus-meta p {
  display: grid;
  gap: 2px;
  margin: 0;
}

.service-order-bonus-meta strong,
.service-order-bonus-meta span {
  color: #121212;
  font: 400 14px/17px var(--font-sans);
  letter-spacing: 0;
}

.service-order-bonus-meta span {
  color: #738193;
}

.service-order-bonus-meta button,
.service-order-bonus-editor button {
  min-height: 32px;
  padding: 5px 0;
  color: #121212;
  font: 400 14px/20px var(--font-sans);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.service-order-bonus-meta button:hover,
.service-order-bonus-meta button:focus-visible,
.service-order-bonus-editor button:hover,
.service-order-bonus-editor button:focus-visible {
  color: #0877f9;
  outline: none;
}

.service-order-bonus-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding-top: 10px;
}

.service-order-bonus-editor[hidden],
.service-order-bonus-editor input[hidden],
.service-order-bonus-editor button[hidden] {
  display: none;
}

.service-order-bonus-editor label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  align-items: center;
  color: #121212;
  font: 400 14px/20px var(--font-sans);
}

.service-order-bonus-editor input {
  width: 112px;
  min-height: 38px;
  padding: 8px 10px;
  color: #121212;
  font: 400 15px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1px solid #757e89;
  border-radius: 6px;
  outline: none;
}

.service-order-bonus-editor input:focus {
  border-color: #367be3;
  box-shadow: 0 0 0 2px rgb(54 123 227 / 12%);
}

.service-order-option .service-order-option-field {
  display: grid;
  gap: 10px;
  margin: 0;
}

.service-order-option .service-order-option-field > span {
  color: #121212;
  font: 400 15px/19px var(--font-sans);
}

.service-order-option .service-order-option-field select {
  min-height: 44px;
  color: #738193;
  border-color: #757e89;
  border-radius: 6px;
}

.service-order-format {
  padding-block: 10px;
}

.service-order-option-mobile-break {
  display: none;
}

.quick-order-price-lines .is-discount b {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.service-order-aside {
  position: sticky;
  top: 0;
  display: grid;
  gap: 20px;
}

.service-order-summary-card,
.service-order-promo {
  padding: 20px;
}

.service-order-summary-card h3 {
  margin: 0 0 13px;
  color: #121212;
  font-size: 18px;
}

.service-order-summary-primary,
.quick-order-price-lines div,
.service-order-total {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  color: #121212;
  font-size: 15px;
}

.quick-order-price-lines {
  gap: 12px;
  padding: 0 0 15px;
  margin: 0 0 17px;
  border: 0;
  border-bottom: 1px solid #0877f9;
}

.quick-order-price-lines .is-discount,
.quick-order-price-lines .is-discount b {
  color: #0877f9;
}

.service-order-total {
  align-items: center;
  font-size: 18px;
  font-weight: 600;
}

.service-order-total b {
  font-size: 20px;
}

.service-order-promo {
  display: grid;
  gap: 13px;
}

.service-order-promo label {
  color: #121212;
  font-size: 18px;
  font-weight: 600;
}

.service-order-promo input {
  min-height: 38px;
  padding: 9px 14px;
  font: 400 15px/1 var(--font-sans);
  border: 1px solid #7e8fa8;
  border-radius: 5px;
  outline: none;
}

.service-order-submit {
  min-height: 46px;
  font-size: 18px;
}

.service-order-terms {
  margin: -6px 0 0;
  color: #777;
  font-size: 14px;
  line-height: 1.3;
}

.service-order-terms a {
  color: #121212;
}

.performer-params-modal[hidden] {
  display: none;
}

.performer-params-modal {
  position: fixed;
  z-index: 320;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.auth-modal,
.order-modal,
.dashboard-modal,
.voice-assistant-modal {
  z-index: 320;
}

.performer-params-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 11, 16, 0.32);
  backdrop-filter: blur(4px);
}

.performer-params-panel {
  position: relative;
  width: min(688px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 20px;
  overflow: auto;
  color: #121212;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(17, 19, 24, 0.14);
}

.performer-picker-panel {
  position: relative;
  width: min(760px, calc(100vw - 30px));
  max-height: calc(100vh - 30px);
  padding: 22px;
  overflow: auto;
  color: #121212;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 60px rgba(17, 19, 24, 0.14);
}

.performer-picker-head {
  display: grid;
  gap: 6px;
  max-width: 560px;
  margin-bottom: 18px;
}

.performer-picker-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.performer-picker-head p {
  margin: 0;
  color: #526071;
  font-size: 15px;
  line-height: 1.45;
}

.performer-picker-search {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.performer-picker-search span {
  color: #121212;
  font-size: 14px;
  font-weight: 600;
}

.performer-picker-search input {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  color: #121212;
  font: 400 15px/1.35 var(--font-sans);
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  outline: none;
}

.performer-picker-search input:focus {
  border-color: #0877f9;
}

.performer-picker-list {
  display: grid;
  gap: 10px;
}

.performer-picker-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto 116px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

.performer-picker-card.is-used {
  opacity: 0.62;
}

.performer-picker-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.performer-picker-copy strong,
.performer-picker-copy span,
.performer-picker-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performer-picker-copy strong {
  font-size: 15px;
  font-weight: 600;
}

.performer-picker-copy span,
.performer-picker-copy small {
  color: #526071;
  font-size: 13px;
}

.performer-picker-card > b {
  color: #0877f9;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.performer-picker-card .secondary-button {
  min-height: 38px;
  font-size: 14px;
}

.performer-picker-card .secondary-button:disabled {
  color: #6f7c8c;
  cursor: default;
  background: #edf1f6;
}

.performer-picker-empty {
  margin: 0;
  padding: 18px;
  color: #526071;
  background: #f6f8fb;
  border-radius: 8px;
}

.performer-picker-panel {
  width: min(1118px, calc(100vw - 36px));
  padding: 24px;
}

.performer-picker-head {
  max-width: 720px;
}

.performer-picker-filters {
  display: grid;
  grid-template-columns: minmax(250px, 1.15fr) minmax(330px, 1.35fr) minmax(250px, 0.95fr);
  gap: 16px 20px;
  align-items: end;
  margin: 18px 0 22px;
  padding: 18px;
  background: #f6f8fb;
  border: 1px solid #e6ebf3;
  border-radius: 8px;
}

.performer-picker-filters .catalog-reference-field,
.performer-picker-filters .catalog-reference-group {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
}

.performer-picker-filters .catalog-reference-field > span,
.performer-picker-filters .catalog-reference-group > span {
  margin-bottom: 9px;
  color: #121212;
}

.performer-picker-filters .catalog-reference-tabs {
  width: 100%;
}

.performer-picker-filters .catalog-reference-tabs button {
  flex: 1 1 0;
  padding: 0 10px;
}

.performer-picker-filters .catalog-reference-switch,
.performer-picker-filters .performer-picker-reset {
  align-self: end;
}

.performer-picker-filters .performer-picker-reset {
  position: relative;
  inset: auto;
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  min-height: 36px;
}

.performer-picker-list {
  grid-template-columns: repeat(3, 334px);
  gap: 20px;
  justify-content: start;
  align-items: start;
}

.performer-picker-voice-card {
  position: relative;
  width: 334px;
  min-height: 217px;
}

.performer-picker-voice-card .voice-card.reference-voice-card {
  width: 334px;
}

.performer-picker-voice-card .performer-picker-select {
  right: 16px;
}

.performer-picker-voice-card:hover .performer-picker-select,
.performer-picker-voice-card:focus-within .performer-picker-select {
  color: #fff;
  background: #0877f9;
}

.performer-picker-voice-card.is-used {
  opacity: 0.58;
}

.performer-picker-voice-card.is-used .voice-card.reference-voice-card {
  pointer-events: none;
}

.performer-picker-voice-card .performer-picker-select:disabled {
  color: #6f7c8c;
  cursor: default;
  background: #edf1f6;
}

@media (max-width: 1120px) {
  .performer-picker-panel {
    width: min(760px, calc(100vw - 30px));
  }

  .performer-picker-filters {
    grid-template-columns: 1fr;
  }

  .performer-picker-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 334px));
  }
}

/* Shared search, favorites and performer-picker refinements. */
.segment-header-search {
  position: relative;
  overflow: visible;
  box-shadow: none;
}

.segment-header-search:focus-within {
  border-color: #0877f9;
  box-shadow: none !important;
}

.segment-header-search input,
.segment-header-search button {
  color: #121212;
  outline: none !important;
  box-shadow: none !important;
}

.segment-header-search input[type="search"]::-webkit-search-cancel-button,
.segment-header-search input[type="search"]::-webkit-search-decoration {
  appearance: none;
  -webkit-appearance: none;
}

.segment-search-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 2200;
  display: grid;
  gap: 10px;
  padding: 12px;
  color: #121212;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(17, 19, 24, 0.14);
  animation: segmentSearchPanelIn 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.segment-search-panel[hidden] {
  display: none !important;
}

@keyframes segmentSearchPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.segment-search-panel-head,
.segment-search-quick-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.segment-search-panel-head strong {
  font-size: 14px;
  font-weight: 600;
}

.segment-search-panel-head a,
.segment-search-quick-links a {
  color: #0877f9;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.segment-search-result-list {
  display: grid;
  gap: 6px;
}

.segment-search-section {
  display: grid;
  gap: 8px;
}

.segment-search-section > b,
.segment-search-section-title {
  color: #526071;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.segment-search-task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.segment-search-task {
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 10px 12px;
  color: #121212;
  text-decoration: none;
  background: #f6f8fb;
  border-radius: 8px;
  transition: background-color 160ms ease, transform 160ms ease;
}

.segment-search-task:hover,
.segment-search-task:focus-visible {
  background: #e8f2ff;
  outline: none;
  transform: translateY(-1px);
}

.segment-search-task span {
  color: #0877f9;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.segment-search-task b {
  overflow: hidden;
  color: #121212;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-search-task small {
  display: -webkit-box;
  overflow: hidden;
  color: #526071;
  font-size: 12px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.segment-search-result,
.segment-search-empty {
  display: grid;
  align-items: center;
  min-height: 54px;
  color: #121212;
  text-decoration: none;
  background: #f6f8fb;
  border-radius: 8px;
  transition: background-color 160ms ease, transform 160ms ease;
}

.segment-search-result {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px;
}

.segment-search-result:hover,
.segment-search-result:focus-visible,
.segment-search-empty:hover,
.segment-search-empty:focus-visible {
  background: #e8f2ff;
  outline: none;
  transform: translateY(-1px);
}

.segment-search-result img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
}

.segment-search-result span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.segment-search-result b,
.segment-search-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-search-result b {
  font-size: 14px;
  font-weight: 600;
}

.segment-search-result small,
.segment-search-result em {
  color: #526071;
  font-size: 12px;
  font-style: normal;
}

.segment-search-empty {
  padding: 12px;
  color: #526071;
  font-size: 14px;
  line-height: 1.35;
}

.segment-search-quick-links {
  justify-content: flex-start;
}

.favorites-main {
  padding-top: 150px;
}

.favorites-main .page-grid {
  width: min(1396px, calc(100vw - 44px));
  max-width: 1396px;
}

.favorites-section {
  padding-top: 34px;
}

.favorites-heading {
  display: none;
}

.favorites-grid:not(.is-empty) {
  display: grid;
  grid-template-columns: repeat(4, 334px);
  gap: 20px;
  align-items: start;
  width: 100%;
}

.performer-picker-panel {
  width: min(1118px, calc(100vw - 36px));
}

.performer-picker-filters {
  display: block;
  padding: 18px;
}

.performer-picker-all-filters,
.performer-picker-primary-filters {
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) minmax(320px, 1.5fr) minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 16px 20px;
  align-items: end;
}

.performer-picker-filters .catalog-reference-field,
.performer-picker-filters .catalog-reference-group,
.performer-picker-filters .catalog-reference-switch,
.performer-picker-filters .catalog-reference-open,
.performer-picker-filters .catalog-reference-apply,
.performer-picker-filters .performer-picker-reset {
  position: relative;
  inset: auto;
  width: auto;
  min-width: 0;
}

.performer-picker-filters .catalog-reference-field,
.performer-picker-filters .catalog-reference-group {
  display: block;
}

.performer-picker-filters .catalog-reference-tabs {
  width: 100%;
}

.performer-picker-filters .catalog-reference-tabs button {
  flex: 1 1 0;
  padding: 0 10px;
}

.performer-picker-more,
.performer-picker-reset {
  justify-self: start;
}

.performer-picker-switch {
  min-width: 0;
  gap: 12px;
}

.performer-picker-switch-control {
  position: relative;
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 22px;
  cursor: pointer;
}

.performer-picker-switch-control span {
  display: block;
  width: 42px;
  height: 22px;
}

.performer-picker-switch-control span::after {
  top: 1px;
  left: 1px;
  width: 20px;
  height: 20px;
}

.performer-picker-switch-control input:checked + span::after {
  transform: translateX(20px);
}

.performer-picker-switch b {
  min-width: 0;
  pointer-events: auto;
}

.performer-picker-all-filters .catalog-reference-search {
  grid-column: span 1;
}

.performer-picker-all-filters .is-voice-type {
  grid-column: span 1;
}

.performer-picker-all-filters .catalog-reference-tabs {
  gap: 6px;
}

.performer-picker-all-filters .catalog-reference-tabs button {
  min-width: 0;
}

.performer-picker-all-filters .performer-picker-reset {
  align-self: end;
}

.performer-picker-expanded-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #dfe5ee;
  animation: performerPickerFiltersIn 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.performer-picker-expanded-filters[hidden] {
  display: none !important;
}

@keyframes performerPickerFiltersIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.performer-picker-expanded-switches {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
}

.performer-picker-apply {
  grid-column: 1 / -1;
  justify-self: end;
  width: auto;
  min-width: 180px;
}

@media (max-width: 1120px) {
  .favorites-grid:not(.is-empty),
  .performer-picker-all-filters,
  .performer-picker-primary-filters,
  .performer-picker-expanded-filters,
  .performer-picker-expanded-switches {
    grid-template-columns: 1fr;
  }

  .segment-search-panel {
    right: auto;
    width: min(520px, calc(100vw - 28px));
  }

  .segment-search-task-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .segment-search-panel,
  .performer-picker-expanded-filters {
    animation: none;
  }

  .segment-search-result,
  .segment-search-empty {
    transition: none;
  }
}

.performer-params-close {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 32px;
  height: 32px;
  color: #9aa9bc;
  font-size: 30px;
  line-height: 1;
  background: transparent;
  border: 0;
}

.performer-params-panel h2 {
  margin: 0 0 17px;
  font-size: 24px;
  font-weight: 500;
}

.performer-params-person {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto auto auto 24px;
  gap: 12px;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #d7dce4;
}

.performer-params-person strong,
.performer-params-person span {
  display: block;
}

.performer-params-person span {
  margin-top: 4px;
  font-size: 12px;
}

.performer-params-person p,
.performer-params-person b,
.performer-params-person em {
  margin: 0;
  font-style: normal;
  white-space: nowrap;
}

.performer-params-person b {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font-size: 14px;
}

.performer-params-content {
  display: grid;
  gap: 20px;
  padding-top: 25px;
}

.performer-params-content h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.performer-params-content hr {
  width: 100%;
  margin: 4px 0 0;
  border: 0;
  border-top: 1px solid #d7dce4;
}

.performer-field {
  display: grid;
  gap: 10px;
}

.performer-field > span {
  display: flex;
  justify-content: space-between;
}

.performer-field > span b {
  font-weight: 500;
}

.performer-field > span strong {
  color: #0877f9;
}

.performer-field textarea {
  min-height: 120px;
  resize: vertical;
}

.performer-field.is-error textarea {
  border-color: #ff3b45;
}

.performer-field.is-error [data-performer-timing] {
  color: #ff3b45;
}

.performer-timing-error {
  color: #ff3b45;
  font-size: 14px;
}

.performer-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 42px;
}

.performer-attach-row {
  display: grid;
  grid-template-columns: 194px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
}

.performer-attach-row > strong {
  grid-column: 1 / -1;
}

.performer-attach-row button {
  min-height: 36px;
  color: #0877f9;
  font: 500 15px/1 var(--font-sans);
  background: #e8f2ff;
  border: 0;
  border-radius: 6px;
}

.performer-attach-row span {
  color: #718198;
  font-size: 14px;
  line-height: 1.35;
}

.performer-file-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

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

.performer-file-list span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  background: #367be3;
  border-radius: 5px;
}

.performer-file-list b {
  min-width: 0;
  overflow: hidden;
  color: #121212;
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performer-params-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 206px;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
}

.performer-params-footer strong {
  font-size: 20px;
}

.order-page .app-shell {
  background: #f6f8fb;
}

.order-page-main {
  min-height: 100vh;
  padding: 184px 0 88px;
}

.order-page-shell {
  width: min(1396px, calc(100% - 44px));
  max-width: 1396px;
}

.order-page-heading {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 0 24px;
}

.order-page-heading h1 {
  margin: 0;
  color: #121212;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.16;
  text-wrap: balance;
}

.order-page-heading p {
  margin: 0;
  color: #526071;
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

.order-page .site-breadcrumbs {
  margin-bottom: 22px;
}

.order-page-content {
  display: block;
}

.order-page,
.order-page .order-page-content,
.order-page .service-order-form,
.order-page .service-order-form *,
.order-page .performer-params-panel,
.order-page .performer-params-panel * {
  font-family: var(--font-sans);
}

.order-page .service-order-form {
  gap: 22px;
}

.order-page .service-order-layout {
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 24px;
  justify-content: stretch;
}

.order-page .service-order-layout.has-alert {
  grid-template-areas:
    "notice aside"
    "main aside";
  grid-template-columns: minmax(0, 1fr) 430px;
}

.order-page .service-order-layout.has-alert .service-order-alert {
  grid-area: notice;
}

.order-page .service-order-layout.has-alert .service-order-main {
  grid-area: main;
}

.order-page .service-order-layout.has-alert .service-order-aside {
  grid-area: aside;
}

.order-page .service-order-title {
  margin: 0 0 2px;
  color: #121212;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
}

.order-page .service-order-aside {
  top: 132px;
}

.order-page .service-order-alert {
  position: static;
  align-items: start;
  padding: 18px 20px;
}

.order-page .service-order-alert p {
  margin-bottom: 6px;
}

.order-page .service-order-summary-card {
  padding: 22px;
}

.order-page .service-order-summary-card {
  display: grid;
  gap: 14px;
}

.order-page .service-order-summary-card h3 {
  margin: 0;
  color: #121212;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.order-page .service-order-summary-primary {
  padding-bottom: 0;
  color: #334052;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

.order-page .service-order-summary-primary b {
  color: #0877f9;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.order-page .quick-order-price-lines {
  display: grid;
  gap: 9px;
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom-color: #dfe5ee;
}

.order-page .quick-order-price-lines div {
  color: #526071;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
}

.order-page .quick-order-price-lines b {
  color: #121212;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.order-page .quick-order-price-lines .is-discount,
.order-page .quick-order-price-lines .is-discount b {
  color: #0877f9;
}

.order-page .service-order-total {
  padding: 14px 16px;
  color: #121212;
  font-size: 15px;
  font-weight: 600;
  background: #f6f8fb;
  border-radius: 8px;
}

.order-page .service-order-total strong {
  font-weight: 600;
}

.order-page .service-order-total b {
  color: #0877f9;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-page .modal-estimate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: -2px;
}

.order-page .modal-estimate-grid div {
  padding: 10px 12px;
  background: #f6f8fb;
  border: 0;
  border-radius: 8px;
}

.order-page .modal-estimate-grid span {
  color: #526071;
  font-size: 12px;
  font-weight: 500;
}

.order-page .modal-estimate-grid strong {
  color: #121212;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.order-page .modal-estimate-grid div:last-child {
  grid-column: 1 / -1;
}

.order-page .modal-estimate-grid div:last-child strong {
  color: #0877f9;
}

.order-page .service-order-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 8px 10px;
  align-items: center;
  padding: 14px 18px;
}

.order-page .service-order-promo small {
  grid-column: 1 / -1;
}

.order-page .service-order-promo input,
.order-page .service-order-promo .secondary-button,
.order-page .service-order-submit {
  min-height: 40px;
}

.order-page .service-order-promo input {
  height: 40px;
  color: #121212;
  font: 400 14px/1.2 var(--font-sans);
  border-color: #dfe5ee;
  outline: none;
}

.order-page .service-order-promo input:focus {
  border-color: #dfe5ee;
  box-shadow: none;
}

.order-page .service-order-promo .secondary-button {
  font-size: 14px;
  font-weight: 500;
}

.order-page .service-order-promo small {
  min-height: 0;
  color: #526071;
  font-size: 12px;
  line-height: 1.3;
}

.order-page .quick-order-success {
  min-height: 480px;
}

@media (max-width: 1180px) {
  .service-order-layout,
  .service-order-layout.has-alert {
    grid-template-columns: 1fr;
  }

  .service-order-main > h2,
  .service-order-layout.has-alert .service-order-main > h2 {
    margin-top: 0;
  }

  .service-order-alert,
  .service-order-aside {
    position: static;
  }

  .order-page .service-order-layout {
    grid-template-columns: 1fr;
  }

  .order-page .service-order-layout.has-alert {
    grid-template-areas:
      "notice"
      "main"
      "aside";
    grid-template-columns: 1fr;
  }

  .order-page-main {
    padding-top: 150px;
  }

  .order-page-shell {
    width: min(100% - 28px, 1396px);
  }
}

@media (max-width: 760px) {
  .order-page-main {
    padding: 128px 0 56px;
  }

  .order-page-shell {
    width: min(100% - 24px, 560px);
  }

  .order-page-heading h1 {
    font-size: 28px;
  }

  .order-page .service-order-title {
    font-size: 28px;
  }

  .order-page .service-order-promo {
    grid-template-columns: minmax(0, 1fr) clamp(96px, 28vw, 118px);
  }

  .order-page .service-order-promo small {
    grid-column: 1 / -1;
  }

  .order-modal-panel {
    width: 100%;
    max-height: 100vh;
    padding: 16px;
    border-radius: 0;
  }

  .service-order-performer-head,
  .performer-params-person,
  .performer-params-footer,
  .service-order-field-grid,
  .service-order-extra-grid,
  .performer-checkbox-grid,
  .performer-attach-row {
    grid-template-columns: 1fr;
  }

  .service-order-performer-meta {
    flex-wrap: wrap;
  }

  .service-order-blue-banner {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .service-order-option-mobile-break {
    display: initial;
  }

  .order-page .service-order-option > .service-order-option-toggle {
    column-gap: 10px !important;
  }

  .order-page .service-order-section.service-order-option {
    padding-right: 16px;
  }

  .order-page .service-order-section .service-order-option-toggle > .service-order-option-title {
    align-self: center;
    font-size: 17px;
    font-weight: 600;
    line-height: 21px;
  }

  .order-page .service-order-option-toggle > .service-order-option-switch {
    align-self: center;
  }

  .service-order-bonus-editor label {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .service-order-bonus-editor input {
    width: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-order-tabs button,
  .service-order-kind-tabs button,
  .service-order-param-button,
  .service-order-add,
  .service-order-option-switch,
  .service-order-option-switch i,
  .service-order-option-details {
    transition: none;
  }
}

@media (max-width: 360px) {
  .order-page .service-order-extras,
  .order-page .service-order-section.service-order-option {
    padding-inline: 12px;
  }

  .order-page .service-order-option > .service-order-option-toggle {
    column-gap: 8px !important;
  }

  .order-page .service-order-section .service-order-option-toggle > .service-order-option-title {
    font-size: 15px;
    line-height: 20px;
  }
}

/* 2026-07-10 supplied service-form references */
.service-order-language-pair > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 10px;
}

.service-order-language-pair select {
  width: 100%;
}

.service-order-language-pair [data-swap-translation] {
  display: grid;
  width: 36px;
  height: 42px;
  place-items: center;
  color: #0877f9;
  font: 600 22px/1 var(--font-sans);
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

.service-order-language-pair [data-swap-translation]:hover,
.service-order-language-pair [data-swap-translation]:focus-visible {
  background: #e8f2ff;
  outline: none;
}

.service-order-duet-card {
  gap: 14px;
  padding: 16px;
  background: #f6f8fb;
  border-radius: 8px;
}

.service-order-duet-card .service-order-performer-head {
  grid-template-columns: minmax(0, 1fr) auto 120px 28px;
}

.service-order-duet-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.service-order-duet-members > div {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
}

.service-order-duet-members .service-order-avatar-play {
  top: 10px;
  right: auto;
  bottom: 10px;
  left: 10px;
  width: 58px;
}

.service-order-duet-members p,
.service-order-duet-members strong,
.service-order-duet-members small {
  display: block;
  min-width: 0;
  margin: 0;
}

.service-order-duet-members strong {
  overflow: hidden;
  color: #121212;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-order-duet-members small,
.service-order-duet-note {
  color: #718198;
  font-size: 12px;
  line-height: 1.4;
}

.service-order-duet-note {
  margin: 0;
}

.performer-repeat-list {
  display: grid;
  gap: 28px;
}

.performer-repeat-task,
.performer-duet-member {
  display: grid;
  gap: 18px;
}

.performer-repeat-task + .performer-repeat-task,
.performer-duet-member + .performer-duet-member {
  padding-top: 26px;
  border-top: 1px solid #dfe5ee;
}

.performer-duet-person {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.performer-duet-person strong,
.performer-duet-person span {
  display: block;
}

.performer-duet-person span {
  margin-top: 4px;
  color: #526071;
  font-size: 12px;
}

.performer-field-caption {
  color: #121212;
  font-size: 14px;
  font-weight: 500;
}

.performer-reference-warning {
  margin: -2px 0 0;
  padding: 12px 14px;
  color: #d82f3b;
  font-size: 14px;
  line-height: 1.45;
  background: #fff0f2;
  border-radius: 8px;
}

.performer-moderation-note {
  margin: 0;
  color: #526071;
  font-size: 14px;
  line-height: 1.45;
}

.performer-file-list {
  grid-template-columns: 34px minmax(0, 1fr) 28px;
}

.performer-file-list [data-remove-performer-file] {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #9aa9bc;
  font-size: 22px;
  background: transparent;
  border: 0;
}

@media (max-width: 760px) {
  .service-order-language-pair > div,
  .service-order-duet-members,
  .service-order-duet-card .service-order-performer-head {
    grid-template-columns: 1fr;
  }

  .service-order-language-pair [data-swap-translation] {
    transform: rotate(90deg);
  }
}

/* Public profile demo rows mirror the compact reference layout. */
.voice-profile-page .profile-demo-list {
  gap: 20px;
}

.voice-profile-page .profile-demo-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  min-height: 80px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.voice-profile-page .profile-demo-avatar {
  grid-column: 1;
  grid-row: 1;
  width: 80px;
  height: 80px;
  overflow: hidden;
  background: #edf5ff;
  border-radius: 10px;
}

.voice-profile-page .profile-demo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.voice-profile-page .profile-demo-row > div:last-child {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}

.voice-profile-page .profile-demo-row strong {
  overflow: hidden;
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-profile-page .profile-demo-row > div:last-child > span {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.3;
}

.voice-profile-page .profile-demo-row input[type="range"] {
  width: 100%;
  height: 4px;
  margin: 18px 0 0;
}

.voice-profile-page .profile-demo-row .player-meta {
  margin-top: 1px;
  font-size: 10px;
  line-height: 1.2;
}

.voice-profile-page .profile-demo-row .player-meta strong {
  color: #7a8493;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.2;
}

.voice-profile-page .profile-demo-play,
.voice-profile-page .profile-demo-row .profile-demo-play {
  --play-size: 36px;
  --play-glyph-width: 11px;
  --play-glyph-height: 13px;
  --pause-glyph-width: 12px;
  --pause-glyph-height: 14px;
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 3;
  width: var(--play-size);
  height: var(--play-size);
  min-width: var(--play-size);
  min-height: var(--play-size);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    opacity 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
}

.voice-profile-page .profile-demo-row:hover .profile-demo-play,
.voice-profile-page .profile-demo-row:focus-within .profile-demo-play,
.voice-profile-page .profile-demo-play.is-playing {
  opacity: 1;
}

.voice-profile-page .profile-demo-row:hover .profile-demo-avatar::after,
.voice-profile-page .profile-demo-row:focus-within .profile-demo-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 42, 0.16);
  pointer-events: none;
}

.voice-profile-page .profile-demo-play:hover,
.voice-profile-page .profile-demo-play:focus-visible {
  transform: translate(-50%, -50%);
}

.voice-profile-page .profile-demo-play:active {
  transform: translate(-50%, -50%) scale(0.96);
}

@media (max-width: 560px) {
  .voice-profile-page .profile-demo-row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 14px;
    min-height: 64px;
  }

  .voice-profile-page .profile-demo-avatar {
    width: 64px;
    height: 64px;
  }

  .voice-profile-page .profile-demo-play,
  .voice-profile-page .profile-demo-row .profile-demo-play {
    top: 32px;
    left: 32px;
  }
}

/* 2026-07-10 dashboard, home voices, SEO and performer-picker alignment. */
.account-profile-page,
.account-profile-page button,
.account-profile-page input,
.account-profile-page select,
.account-profile-page textarea,
.performer-picker-panel,
.performer-picker-panel button,
.performer-picker-panel input,
.performer-picker-panel select,
.seo-service-page,
.home-main {
  font-family: var(--font-sans);
}

.account-profile-page .dashboard-profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 20px;
  align-items: stretch;
  min-width: 0;
}

.account-profile-page .dashboard-profile-row.is-customer {
  grid-template-columns: minmax(0, 1fr);
}

.account-profile-page .dashboard-profile-row.is-talent {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.8fr);
}

.account-profile-page .dashboard-profile-row .dashboard-profile-card {
  display: flex;
  min-width: 0;
  min-height: 120px;
  align-items: center;
  padding: 20px;
}

.account-profile-page .dashboard-profile-person {
  min-width: 0;
}

.account-profile-page .dashboard-profile-person h2 {
  overflow: hidden;
  color: #121212;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-profile-page .dashboard-profile-person p {
  margin-top: 5px;
  color: #7b8798;
  font-size: 16px;
  font-weight: 400;
}

.account-profile-page .dashboard-profile-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions > :first-child {
  grid-column: 1;
  grid-row: 1;
}

.account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions > :nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}

.account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions > :nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.account-profile-page .dashboard-profile-action-card,
.account-profile-page a.dashboard-profile-action-card {
  display: flex;
  width: 100%;
  height: 55px;
  min-width: 0;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  color: #18202c;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  transition: color 180ms ease, background-color 180ms ease;
}

.account-profile-page a.dashboard-profile-action-card:hover,
.account-profile-page a.dashboard-profile-action-card:focus-visible {
  color: #0877f9;
  background: #eaf3ff;
  outline: none;
}

.account-profile-page .dashboard-online-switch.dashboard-profile-action-card {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

.account-profile-page .dashboard-profile-actions .dashboard-profile-action-card,
.account-profile-page .dashboard-profile-actions .dashboard-profile-action-card:hover,
.account-profile-page .dashboard-profile-actions .dashboard-profile-action-card:focus-visible,
.account-profile-page .dashboard-profile-actions .dashboard-online-switch > .dial-switch-track,
.account-profile-page .dashboard-profile-actions .dashboard-online-switch:hover > .dial-switch-track {
  box-shadow: none;
}

.account-profile-page .dashboard-online-switch.dashboard-profile-action-card b {
  color: #0877f9;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
}

.account-profile-page .dashboard-quick-card,
.account-profile-page .dashboard-quick-grid > button.dashboard-quick-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px;
  width: 100%;
  height: 170px;
  min-height: 170px;
  gap: 8px;
  align-items: stretch;
  padding: 20px;
  overflow: hidden;
  color: #121212;
  text-align: left;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 180ms ease, outline-color 180ms ease;
}

.account-profile-page .dashboard-quick-card:hover {
  outline: none;
  box-shadow: none;
  transform: none;
}

.account-profile-page .dashboard-quick-card:focus-visible {
  outline: 2px solid #0877f9;
  outline-offset: 2px;
  box-shadow: none;
  transform: none;
}

.account-profile-page .dashboard-quick-card > div {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  min-width: 0;
}

.account-profile-page .dashboard-quick-card strong {
  color: #121212;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.account-profile-page .dashboard-quick-card small {
  margin-top: 6px;
  color: #526071;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
}

.account-profile-page .dashboard-quick-card > .dashboard-quick-illustration {
  width: 148px;
  height: 148px;
  align-self: end;
  object-fit: contain;
  object-position: center;
}

.dashboard-quick-arrow { align-self: end; display: grid; place-items: center; width: 30px; height: 30px; color: #0877f9; border: 1px solid #0877f9; border-radius: 50%; font-size: 20px; line-height: 1; }
.account-profile-page .dashboard-profile-panel, .account-profile-page .dashboard-chat-layout, .account-profile-page .dashboard-profile-content { width: 100%; max-width: none; min-width: 0; }
.order-detail-grid { grid-template-columns: minmax(0, 688px) minmax(0, 334px); gap: 20px; }
.order-status-component { display: grid; gap: 8px; min-width: 0; }
@media (max-width: 760px) { .order-detail-grid { grid-template-columns: minmax(0, 1fr); } .dashboard-quick-arrow { width: 30px; height: 30px; } }

.dashboard-message-toast {
  width: 336px;
  min-height: 112px;
  padding: 16px 44px 16px 14px;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(22, 34, 53, 0.16);
}

.dashboard-message-toast > button:first-child {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.dashboard-message-toast .dashboard-toast-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  background: #edf3fb;
  border-radius: 7px;
}

.dashboard-message-toast .dashboard-toast-thumb::before {
  content: none;
}

.dashboard-message-toast strong,
.dashboard-message-toast b,
.dashboard-message-toast p {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.dashboard-message-toast strong {
  margin-bottom: 5px;
  font-size: 15px;
  font-weight: 600;
}

.dashboard-message-toast b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.dashboard-message-toast p {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-promo-offer.is-featured,
.dashboard-promo-offer.is-featured h3,
.dashboard-promo-offer.is-featured time,
.dashboard-promo-offer.is-featured p {
  color: #fff;
}

.dashboard-promo-offer.is-featured h3 {
  font-weight: 600;
}

.home-slider-viewport {
  cursor: grab;
  touch-action: pan-y;
}

.home-slider.is-dragging .home-slider-viewport {
  cursor: grabbing;
}

.home-slider.is-dragging .home-slider-track {
  user-select: none;
  transition: none !important;
}

.home-slider .home-slide img {
  pointer-events: none;
  user-select: none;
}

.home-voice-collection h3 {
  font-weight: 600;
}

.reference-home-copy > a,
.home-voice-row .reference-home-copy > a {
  font-size: 18px;
  font-weight: 500;
}

.reference-home-copy > span {
  color: #748299;
  font-size: 14px;
  font-weight: 400;
}

.reference-home-stars span {
  letter-spacing: 0;
}

.reference-home-player input[type="range"],
.home-voice-row .reference-home-player input[type="range"] {
  border: 0;
  box-shadow: none;
}

.seo-service-hero figure {
  position: relative;
  isolation: isolate;
  min-height: 360px;
  place-items: end start;
  overflow: hidden;
  background: url("./assets/voice-studio-hero.png") 66% center / cover no-repeat;
  border-radius: 8px;
}

.seo-service-hero figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(10, 18, 31, 0.28);
}

.seo-service-hero figure img {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 50px;
  height: 50px;
  padding: 11px;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  filter: none;
}

.seo-service-hero figcaption {
  position: relative;
  z-index: 2;
  padding: 22px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.seo-service-voices {
  margin-top: 24px;
  padding: 54px 0 58px;
  background: #edf5ff;
  box-shadow: 0 0 0 100vmax #edf5ff;
  clip-path: inset(0 -100vmax);
}

.seo-service-voices .seo-service-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.seo-service-voices .seo-service-section-head h2 {
  margin: 0;
  color: #121212;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
}

.seo-service-voices .seo-service-section-head p {
  margin: 7px 0 0;
  color: #526071;
  font-size: 16px;
}

.seo-service-voices .seo-service-section-head > a {
  flex: 0 0 auto;
  color: #0877f9;
  font-size: 15px;
  font-weight: 500;
}

.seo-service-voice-grid,
.seo-service-voices > .seo-service-voice-grid,
.seo-service-voices > div.seo-service-voice-grid:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 334px));
  gap: 20px;
  align-items: start;
  justify-content: space-between;
}

.seo-service-voice-grid .voice-card.reference-voice-card {
  width: 100%;
  max-width: 334px;
}

.performer-picker-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1118px, calc(100vw - 40px));
  height: min(900px, calc(100vh - 40px));
  max-height: none;
  padding: 22px 24px 24px;
  overflow: hidden;
  border-radius: 8px;
}

.performer-picker-head {
  max-width: 760px;
  margin: 0 0 14px;
}

.performer-picker-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  margin: 0 0 16px;
  padding: 14px;
  background: #f5f8fc;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
}

.performer-picker-filter-zone {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.performer-picker-filter-zone legend {
  margin: 0 0 10px;
  padding: 0;
  color: #526071;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.performer-picker-primary-grid {
  display: grid;
  grid-template-columns: minmax(210px, 1.08fr) minmax(300px, 1.38fr) minmax(205px, 0.94fr) minmax(190px, 0.84fr);
  gap: 14px;
  align-items: end;
  min-width: 0;
}

.performer-picker-filter-zone-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.88fr) minmax(0, 1.42fr);
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

.performer-picker-filter-zone-grid > .performer-picker-filter-zone {
  padding: 12px;
  background: #fff;
  border: 1px solid #e3eaf4;
  border-radius: 7px;
}

.performer-picker-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.performer-picker-character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.performer-picker-filters .catalog-reference-field,
.performer-picker-filters .catalog-reference-group,
.performer-picker-filters .catalog-reference-switch,
.performer-picker-filters .performer-picker-switch {
  min-width: 0;
}

.performer-picker-filters .catalog-reference-field > span,
.performer-picker-filters .catalog-reference-group > span {
  display: block;
  margin-bottom: 7px;
  color: #121212;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

.performer-picker-filters input,
.performer-picker-filters select,
.performer-picker-filters .catalog-reference-tabs {
  width: 100%;
  min-width: 0;
}

.performer-picker-filters .catalog-reference-tabs {
  display: flex;
}

.performer-picker-filters .catalog-reference-tabs button {
  min-width: 0;
  flex: 1 1 0;
  padding: 0 7px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.performer-picker-filters .catalog-reference-price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  width: 100%;
}

.performer-picker-switch {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 26px;
  font-size: 13px;
  line-height: 1.25;
}

.performer-picker-switch b {
  min-width: 0;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.performer-picker-reset {
  justify-self: start;
  width: auto;
  min-height: 32px;
  margin-top: 0;
  padding: 6px 12px;
  font-size: 13px;
}

.performer-picker-results {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.performer-picker-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 0 2px 10px;
}

.performer-picker-results-head strong {
  color: #121212;
  font-size: 17px;
  font-weight: 600;
}

.performer-picker-results-head span {
  color: #738193;
  font-size: 13px;
}

.performer-picker-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 334px));
  gap: 20px;
  align-content: start;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0 3px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.performer-picker-empty {
  grid-column: 1 / -1;
  min-height: 160px;
}

@media (max-width: 1180px) {
  .account-profile-page .dashboard-profile-row,
  .account-profile-page .dashboard-profile-row.is-talent {
    grid-template-columns: minmax(0, 1fr) 260px;
  }

  .account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions > :nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }

  .seo-service-voice-grid,
  .seo-service-voices > .seo-service-voice-grid,
  .seo-service-voices > div.seo-service-voice-grid:last-child {
    grid-template-columns: repeat(2, minmax(0, 334px));
    justify-content: start;
  }

  .performer-picker-panel {
    width: min(980px, calc(100vw - 30px));
  }

  .performer-picker-primary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performer-picker-filter-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performer-picker-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .account-profile-page .dashboard-profile-row,
  .account-profile-page .dashboard-profile-row.is-talent {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-profile-page .dashboard-profile-actions,
  .account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions > :nth-child(n) {
    grid-column: auto;
    grid-row: auto;
  }

  .account-profile-page .dashboard-quick-card,
  .account-profile-page .dashboard-quick-grid > button.dashboard-quick-card {
    grid-template-columns: minmax(0, 1fr) 112px;
    height: 148px;
    min-height: 148px;
  }

  .account-profile-page .dashboard-quick-card > .dashboard-quick-illustration {
    width: 112px;
    height: 112px;
  }

  .seo-service-hero figure {
    min-height: 290px;
  }

  .performer-picker-panel {
    height: calc(100vh - 24px);
  }

  .performer-picker-filter-zone-grid,
  .performer-picker-primary-grid,
  .performer-picker-character-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .performer-picker-list {
    grid-template-columns: minmax(0, 334px);
  }
}

@media (max-width: 620px) {
  .account-profile-page .dashboard-profile-actions,
  .account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions,
  .account-profile-page .dashboard-card-grid,
  .account-profile-page .dashboard-quick-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-message-toast {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  .seo-service-voices .seo-service-section-head {
    display: grid;
  }

  .seo-service-voice-grid,
  .seo-service-voices > .seo-service-voice-grid {
    grid-template-columns: minmax(0, 334px);
  }

  .performer-picker-panel {
    display: block;
    width: calc(100vw - 16px);
    height: auto;
    max-height: calc(100vh - 16px);
    padding: 18px 14px;
    overflow: auto;
  }

  .performer-picker-switch-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .performer-picker-results,
  .performer-picker-list {
    height: auto;
    overflow: visible;
  }
}

/* Cabinet components transferred from the 09.08 references. */
.account-profile-page .dashboard-quick-arrow {
  display: block;
  width: 30px;
  height: 30px;
  align-self: end;
  color: #0877f9;
}

.account-profile-page .dashboard-view[data-cabinet-panel="messages"],
.account-profile-page .dashboard-view[data-cabinet-panel="profile"],
.account-profile-page .dashboard-chat-layout,
.account-profile-page .dial-settings-page,
.account-profile-page .customer-settings-page {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.account-profile-page .order-detail-grid {
  width: 100%;
  grid-template-columns: minmax(0, 688px) minmax(0, 334px);
  gap: 20px;
}

.account-profile-page .order-status-card > .order-status-component {
  display: grid;
  gap: 0;
  align-items: initial;
  justify-content: initial;
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.account-profile-page .order-status-card > .order-status-component .order-status-rating > span {
  color: #ffc20a;
  font-size: 21px;
}

.account-profile-page .order-status-card > .order-status-component .order-status-rating > span i {
  color: #dce3ec;
}

.account-profile-page .order-status-card > .order-status-component .order-status-price > span {
  color: #121212;
  font-size: 14px;
  font-weight: 600;
}

.account-profile-page .order-status-card > .order-status-component .order-status-price > strong {
  color: #121212;
  font-size: 16px;
  font-weight: 600;
}

.order-status-component {
  --order-status-color: #0877f9;

  display: grid;
  gap: 0;
  min-width: 0;
  color: #121212;
  font-family: var(--font-sans);
}

.order-status-component.is-in-progress {
  --order-status-color: #f5b91f;
}

.order-status-component.is-moderation,
.order-status-component.is-failed {
  --order-status-color: #f24d57;
}

.order-status-component.is-completed {
  --order-status-color: #43c962;
}

.order-status-heading {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.order-status-marker {
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  color: var(--order-status-color);
  font-size: 0;
  font-style: normal;
  line-height: 14px;
  text-align: center;
  background: currentColor;
  border-radius: 50%;
}

.order-status-component.is-moderation .order-status-marker {
  width: 18px;
  height: 18px;
  margin: 0 0 0 -3px;
  font-size: 12px;
  background: transparent;
  border: 1.5px solid currentColor;
}

.order-status-heading > span {
  display: grid;
  gap: 2px;
}

.order-status-heading b {
  color: var(--order-status-color);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.order-status-heading small {
  color: #121212;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

.order-status-divider {
  height: 1px;
  margin: 16px 0;
  background: #d8dee8;
}

.order-status-rating {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.order-status-rating > b,
.order-status-price > span {
  font-size: 14px;
  font-weight: 600;
}

.order-status-rating > span {
  color: #ffc20a;
  font-size: 21px;
  line-height: 1;
  white-space: nowrap;
}

.order-status-rating > span i {
  color: #dce3ec;
  font-style: normal;
}

.order-status-rating > small {
  color: #121212;
  font-size: 13px;
}

.order-status-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: baseline;
}

.order-status-price > strong {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.order-status-price > small {
  grid-column: 1 / -1;
  color: #8b96a7;
  font-size: 12px;
  line-height: 1.35;
}

.order-status-component > button {
  width: 100%;
  min-height: 36px;
  margin-top: 16px;
  color: #9cb9df;
  font: 500 14px/1 var(--font-sans);
  background: #edf4fd;
  border: 0;
  border-radius: 6px;
}

.dashboard-modal[data-dashboard-modal-variant] .dashboard-modal-panel > .eyebrow {
  display: none;
}

.dashboard-modal[data-dashboard-modal-variant="service-rate"] .dashboard-modal-panel {
  width: min(452px, calc(100vw - 32px));
  padding: 24px 30px 30px;
}

.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-panel,
.dashboard-modal[data-dashboard-modal-variant="topup"] .dashboard-modal-panel {
  width: min(380px, calc(100vw - 32px));
  padding: 24px 30px 30px;
}

.dashboard-modal[data-dashboard-modal-variant] .dashboard-modal-panel > h2 {
  margin: 0 36px 26px 0;
  color: #121212;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.15;
}

.dashboard-rate-editor {
  display: grid;
  gap: 26px;
}

.dashboard-rate-editor section {
  display: grid;
  gap: 10px;
}

.dashboard-rate-editor h3 {
  margin: 0 0 8px;
  color: #121212;
  font-size: 16px;
  font-weight: 600;
}

.dashboard-modal-body .dashboard-rate-editor label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 16px;
  align-items: center;
}

.dashboard-modal-body .dashboard-rate-editor label > span:first-child {
  color: #121212;
  font-size: 14px;
  font-weight: 400;
}

.dashboard-rate-input {
  position: relative;
  display: block;
}

.dashboard-modal-body .dashboard-rate-input input {
  height: 36px;
  min-height: 36px;
  padding: 0 32px 0 12px;
  color: #121212;
  font-size: 14px;
  background: #fff;
  border: 1px solid #8fa1b8;
}

.dashboard-rate-input i {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #718198;
  font-size: 14px;
  font-style: normal;
  transform: translateY(-50%);
  pointer-events: none;
}

.dashboard-modal[data-dashboard-modal-variant="service-rate"] .dashboard-modal-actions,
.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-actions {
  grid-template-columns: 1fr;
  margin-top: 26px;
}

.dashboard-modal[data-dashboard-modal-variant="service-rate"] .dashboard-modal-actions .secondary-button,
.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-actions .secondary-button {
  display: none;
}

.dashboard-modal[data-dashboard-modal-variant="service-rate"] .dashboard-modal-actions .primary-button,
.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-actions .primary-button {
  min-height: 36px;
  color: #0877f9;
  background: #eaf3ff;
}

.dashboard-work-schedule-editor {
  display: grid;
  gap: 10px;
}

.dashboard-modal-body .dashboard-work-day {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.dashboard-modal-body .dashboard-work-day > input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: #367be3;
}

.dashboard-modal-body .dashboard-work-day > span:nth-child(2) {
  color: #121212;
  font-size: 14px;
  font-weight: 400;
}

.dashboard-work-time {
  display: grid;
  grid-template-columns: 56px 10px 56px;
  gap: 5px;
  align-items: center;
}

.dashboard-work-time i {
  color: #121212;
  font-size: 13px;
  font-style: normal;
  text-align: center;
}

.dashboard-modal-body .dashboard-work-time input {
  width: 56px;
  height: 28px;
  min-height: 28px;
  padding: 0 5px;
  color: #121212;
  font-size: 13px;
  background: #fff;
  border: 1px solid #8fa1b8;
}

.dashboard-modal-body .dashboard-work-time input:disabled {
  color: #9aa6b5;
  background: #f5f7fa;
}

.dashboard-modal[data-dashboard-modal-variant="topup"] .dashboard-modal-panel > h2 {
  margin-right: 0;
  text-align: center;
}

.dashboard-topup-editor {
  display: grid;
  gap: 10px;
}

.dashboard-topup-editor > p {
  margin: 0;
  color: #121212;
  font-size: 13px;
  line-height: 1.35;
}

.dashboard-topup-editor > div {
  display: grid;
  grid-template-columns: minmax(0, 165px) minmax(0, 145px);
  gap: 10px;
}

.dashboard-modal-body .dashboard-topup-editor input,
.dashboard-topup-editor button {
  height: 36px;
  min-height: 36px;
  padding: 0 13px;
  font: 400 15px/1 var(--font-sans);
  border-radius: 6px;
}

.dashboard-modal-body .dashboard-topup-editor input {
  color: #121212;
  background: #fff;
  border: 1px solid #8fa1b8;
}

.dashboard-topup-editor button {
  color: #0877f9;
  font-weight: 500;
  background: #eaf3ff;
  border: 0;
}

.dashboard-modal[data-dashboard-modal-variant="topup"] .dashboard-modal-actions {
  display: none;
}

@media (max-width: 900px) {
  .account-profile-page .order-detail-grid,
  .account-profile-page .order-detail-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 09.08 cabinet interaction and readability pass. */
.account-profile-page :is(input, select, textarea):focus,
.account-profile-page :is(input, select, textarea):focus-visible {
  outline: none;
  box-shadow: none !important;
}

.account-profile-page :is(input, select, textarea):not([type="checkbox"]):focus,
.account-profile-page :is(input, select, textarea):not([type="checkbox"]):focus-visible,
.account-profile-page .shared-date-trigger:focus,
.account-profile-page .shared-date-trigger:focus-visible {
  border-color: #367be3;
}

.account-profile-page .shared-date-trigger:focus,
.account-profile-page .shared-date-trigger:focus-visible,
.account-profile-page .segment-header-search:focus-within {
  outline: none;
  box-shadow: none !important;
}

.account-profile-page .dashboard-quick-arrow {
  width: 36px;
  height: 36px;
  margin-top: 16px;
  align-self: start;
  object-fit: contain;
}

.dashboard-modal:not([hidden]) .dashboard-modal-backdrop {
  animation: dashboard-modal-backdrop-in 200ms ease-out both;
}

.dashboard-modal:not([hidden]) .dashboard-modal-panel {
  transform-origin: 50% 54%;
  animation: dashboard-modal-panel-in 300ms cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes dashboard-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dashboard-modal-panel-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dashboard-modal-body :is(input, select, textarea):focus,
.dashboard-modal-body :is(input, select, textarea):focus-visible,
.account-profile-page .dashboard-form-card :is(input, select, textarea):focus,
.account-profile-page .dashboard-form-card :is(input, select, textarea):focus-visible,
.account-profile-page .dashboard-time-row :is(input, select):focus,
.account-profile-page .dashboard-time-row :is(input, select):focus-visible,
.account-profile-page .dashboard-promo-card input:focus,
.account-profile-page .dashboard-promo-card input:focus-visible,
.account-profile-page .dashboard-chat-search input:focus,
.account-profile-page .dashboard-chat-search input:focus-visible,
.account-profile-page .dashboard-chat-thread input:focus,
.account-profile-page .dashboard-chat-thread input:focus-visible,
.account-profile-page .support-archive-view :is(input, select, textarea):focus,
.account-profile-page .support-archive-view :is(input, select, textarea):focus-visible,
.account-profile-page .reviews-feed-list input:focus,
.account-profile-page .reviews-feed-list input:focus-visible,
.account-profile-page .characteristics-field :is(input, select, textarea):focus-visible,
.account-profile-page .dashboard-schedule-time-fields input:focus-visible {
  border-color: #367be3;
  outline: none;
  box-shadow: none !important;
}

.dashboard-modal-body input[type="checkbox"]:focus,
.dashboard-modal-body input[type="checkbox"]:focus-visible,
.account-profile-page .dial-switch-control:hover .dial-switch-track,
.account-profile-page .dial-switch-control input:focus-visible + .dial-switch-track,
.dashboard-modal .dial-switch-control:hover .dial-switch-track,
.dashboard-modal .dial-switch-control input:focus-visible + .dial-switch-track,
.account-profile-page .dial-settings-toggle input:focus-visible + span {
  outline: none;
  box-shadow: none;
}

.account-profile-page .dial-switch-control input:focus-visible + .dial-switch-track,
.dashboard-modal .dial-switch-control input:focus-visible + .dial-switch-track {
  outline: 2px solid #1f64c8;
  outline-offset: -3px;
  box-shadow: none !important;
}

.dashboard-choice {
  position: relative;
  width: 100%;
  min-width: 0;
}

.dashboard-choice-trigger {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #121212;
  font: 400 14px/1 var(--font-sans);
  text-align: left;
  background: #fff;
  border: 1px solid #8fa1b8;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.dashboard-choice-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-choice-trigger > span:last-child {
  flex: 0 0 auto;
  color: #718198;
  font-size: 17px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 160ms ease;
}

.dashboard-choice.is-open .dashboard-choice-trigger > span:last-child {
  transform: translateY(1px) rotate(180deg);
}

.dashboard-choice-trigger:hover:not(:disabled) {
  border-color: #6f8cb2;
}

.dashboard-choice-trigger:focus,
.dashboard-choice-trigger:focus-visible,
.dashboard-choice.is-open .dashboard-choice-trigger {
  background: #fff;
  border-color: #367be3;
  outline: none;
  box-shadow: none;
}

.dashboard-choice.is-disabled .dashboard-choice-trigger,
.dashboard-choice-trigger:disabled {
  color: #9aa6b5;
  background: #f4f6f9;
  border-color: #dbe2eb;
  cursor: not-allowed;
}

.dashboard-choice-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: 100%;
  min-width: 100%;
  max-height: 214px;
  padding: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(24, 39, 61, .14);
}

.dashboard-choice-menu[hidden] {
  display: none;
}

.dashboard-choice-option {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  color: #253044;
  font: 400 13px/1.25 var(--font-sans);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
}

.dashboard-choice-option:hover,
.dashboard-choice-option:focus-visible,
.dashboard-choice-option.is-selected {
  color: #0877f9;
  background: #edf5ff;
  outline: none;
  box-shadow: none;
}

.dashboard-work-time {
  grid-template-columns: 74px 10px 74px;
}

.dashboard-work-time .dashboard-choice-trigger {
  min-height: 32px;
  padding: 0 7px;
  font-size: 13px;
}

.dashboard-work-time .dashboard-choice-trigger > span:last-child {
  font-size: 14px;
}

.dashboard-work-time .dashboard-choice-menu {
  width: 94px;
  min-width: 94px;
  max-height: 188px;
}

.dashboard-topup-editor > .dashboard-topup-quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  animation: dashboard-topup-presets-in 220ms cubic-bezier(.2, .8, .2, 1) both;
}

.dashboard-topup-editor > .dashboard-topup-quick-amounts[hidden] {
  display: none;
}

.dashboard-topup-editor .dashboard-topup-quick-amounts button {
  min-width: 0;
  height: 34px;
  min-height: 34px;
  padding: 0 5px;
  color: #526071;
  font-size: 12px;
  font-weight: 500;
  background: #f5f8fc;
  border: 1px solid #dbe3ed;
  border-radius: 6px;
  box-shadow: none;
}

.dashboard-topup-editor .dashboard-topup-quick-amounts button:hover,
.dashboard-topup-editor .dashboard-topup-quick-amounts button:focus-visible,
.dashboard-topup-editor .dashboard-topup-quick-amounts button.is-selected {
  color: #0877f9;
  background: #edf5ff;
  border-color: #9fc4f7;
  outline: none;
  box-shadow: none;
}

@keyframes dashboard-topup-presets-in {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-profile-page .dashboard-chat-layout {
  width: 100%;
  height: clamp(780px, 86vh, 940px);
  min-height: 780px;
  grid-template-columns: 368px minmax(0, 1fr);
}

.account-profile-page .dashboard-chat-list {
  overflow-x: hidden;
  overflow-y: auto;
}

.account-profile-page .dashboard-chat-search,
.account-profile-page .dashboard-chat-list > button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.account-profile-page .support-archive-view {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.account-profile-page .support-archive-view form {
  width: 100%;
  max-width: none;
  padding: 24px;
  gap: 18px;
  box-sizing: border-box;
}

.account-profile-page .support-archive-view label > span {
  color: #39475a;
  font-size: 14px;
  font-weight: 500;
}

.account-profile-page .support-archive-view :is(input, select) {
  height: 46px;
}

.account-profile-page .support-archive-view :is(input, select, textarea) {
  font-size: 14px;
}

.account-profile-page .reviews-feed-card {
  padding: 20px;
}

.account-profile-page .reviews-feed-card > header > strong {
  font-size: 16px;
}

.account-profile-page .reviews-feed-card .dial-settings-toggle b {
  font-size: 14px;
}

.account-profile-page .reviews-feed-list > article {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
}

.account-profile-page .review-author-avatar {
  width: 48px;
  height: 48px;
  font-size: 13px;
}

.account-profile-page .reviews-feed-list article > div > header strong {
  font-size: 15px;
}

.account-profile-page .reviews-feed-list article > div > header time {
  font-size: 12px;
}

.account-profile-page .review-stars {
  font-size: 14px;
}

.account-profile-page .reviews-feed-list article p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.account-profile-page .review-quick-replies button {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.account-profile-page .reviews-feed-list form {
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  margin-top: 12px;
}

.account-profile-page .reviews-feed-list form input,
.account-profile-page .reviews-feed-list form button {
  height: 40px;
  min-height: 40px;
}

.account-profile-page .reviews-feed-list form input {
  padding: 0 12px;
  font-size: 14px;
}

.account-profile-page .reviews-feed-list form button {
  width: 40px;
}

.account-profile-page .reviews-score-column .analytics-overall-score > button {
  font-size: 13px;
}

.account-profile-page .duets-archive-view h2 {
  font-size: 28px;
}

.account-profile-page .duet-archive-card {
  min-height: 236px;
  padding: 20px;
}

.account-profile-page .duet-card-head h3 {
  font-size: 17px;
}

.account-profile-page .duet-card-head p,
.account-profile-page .duet-pending-note,
.account-profile-page .duet-tags span {
  font-size: 13px;
}

.account-profile-page .duet-archive-card footer button {
  min-height: 40px;
  font-size: 14px;
}

.account-profile-page .duet-participants > h3,
.account-profile-page .duet-order-history h3,
.account-profile-page .duet-detail-layout aside h3 {
  font-size: 17px;
}

.account-profile-page .duet-participants strong,
.account-profile-page .duet-order-history article strong {
  font-size: 14px;
}

.account-profile-page .duet-participants small,
.account-profile-page .duet-participants :is(dt, dd),
.account-profile-page .duet-detail-layout aside :is(dt, dd),
.account-profile-page .duet-order-history article :is(p, time) {
  font-size: 12px;
}

.account-profile-page .duet-order-history > header button,
.account-profile-page .duet-order-history article button {
  min-height: 34px;
  font-size: 13px;
}

@media (max-width: 780px) {
  .account-profile-page .dashboard-chat-layout {
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .account-profile-page .dashboard-chat-list {
    overflow-x: auto;
  }
}

@media (max-width: 480px) {
  .dashboard-work-time {
    grid-template-columns: 76px 10px 76px;
  }

  .dashboard-topup-editor > .dashboard-topup-quick-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-modal:not([hidden]) .dashboard-modal-backdrop,
  .dashboard-modal:not([hidden]) .dashboard-modal-panel,
  .dashboard-topup-editor > .dashboard-topup-quick-amounts {
    animation: none;
  }
}

@media (max-width: 480px) {
  .dashboard-modal[data-dashboard-modal-variant] {
    padding: 12px;
  }

  .dashboard-modal[data-dashboard-modal-variant] .dashboard-modal-panel {
    width: 100%;
    padding: 22px 18px 24px;
  }

  .dashboard-modal-body .dashboard-rate-editor label {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
  }

  .dashboard-modal-body .dashboard-work-day {
    grid-template-columns: 18px minmax(90px, 1fr);
  }

  .dashboard-work-time {
    grid-column: 2;
    justify-self: start;
  }

  .dashboard-topup-editor > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Admin console component layer. Kept last to override the retired CMS prototype. */
.admin-page {
  background: #f6f8fb;
}

.admin-page .admin-sidebar {
  position: sticky;
  z-index: 40;
  top: var(--admin-header-height);
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: auto;
  height: calc(100vh - var(--admin-header-height));
  padding: 22px 0;
  color: #334052;
  background: transparent;
  overflow-y: auto;
}

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

.admin-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  min-height: 132px;
  padding: 20px 20px 18px 24px;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

.admin-task-icon,
.admin-role-icon,
.admin-audit-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
}

.admin-metric::before {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 3px;
  background: #0877f9;
  border-radius: 0 3px 3px 0;
  content: "";
}

.admin-metric--mint::before { background: #159a72; }
.admin-metric--amber::before { background: #d39428; }
.admin-metric--violet::before { background: #745fc7; }

.admin-metric > span {
  color: #526071;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.admin-metric strong {
  margin-top: 1px;
  color: #111318;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.admin-metric small {
  color: #6f7c8c;
  font-size: 13px;
  line-height: 1.4;
}

.admin-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 16px;
  margin-bottom: 16px;
}

.admin-dashboard-grid--lower {
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
}

.admin-attention-list,
.admin-compact-order-list {
  display: grid;
  padding: 0 12px 12px;
}

.admin-attention-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  color: #111318;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid #edf1f6;
  transition: background-color 160ms ease;
}

.admin-attention-row:hover {
  background: #f6f8fb;
}

.admin-attention-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

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

.admin-attention-row small,
.admin-attention-time {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-attention-type {
  display: grid;
  width: 36px;
  height: 36px;
  color: #0563d1;
  background: #e8f2ff;
  border-radius: 7px;
  place-items: center;
}

.admin-attention-type--high {
  color: #b3324d;
  background: #ffe5eb;
}

.admin-attention-type .admin-icon {
  width: 17px;
  height: 17px;
}

.admin-health-list {
  display: grid;
  padding: 0 20px 14px;
}

.admin-health-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 8px;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  border-top: 1px solid #edf1f6;
}

.admin-health-list > div > span {
  color: #526071;
}

.admin-health-list > div > strong {
  font-size: 12px;
  text-align: right;
}

.admin-health-list > div > i {
  width: 7px;
  height: 7px;
  background: #b8c0cc;
  border-radius: 50%;
}

.admin-health-list > div > i.is-success { background: #19a781; }
.admin-health-list > div > i.is-info { background: #0877f9; }
.admin-health-list > div > i.is-danger { background: #e05872; }

.admin-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #526071;
  font-size: 12px;
}

.admin-chart-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.admin-chart-legend i {
  width: 7px;
  height: 7px;
  background: #0877f9;
  border-radius: 2px;
}

.admin-chart-legend span:last-child i {
  background: #5aa98e;
}

.admin-bar-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  height: 210px;
  padding: 8px 22px 18px;
  background-image: linear-gradient(to bottom, transparent calc(25% - 1px), #edf1f6 25%, transparent calc(25% + 1px), transparent calc(50% - 1px), #edf1f6 50%, transparent calc(50% + 1px), transparent calc(75% - 1px), #edf1f6 75%, transparent calc(75% + 1px));
}

.admin-bar-chart > div {
  display: grid;
  grid-template-rows: 1fr 18px;
  gap: 7px;
  height: 100%;
  text-align: center;
}

.admin-bar-chart > div > span {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  height: 100%;
}

.admin-bar-chart i {
  width: min(16px, 42%);
  min-height: 4px;
  background: #0877f9;
  border-radius: 3px 3px 0 0;
}

.admin-bar-chart i:last-child {
  background: #9bc7ff;
}

.admin-bar-chart small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-chart-head {
  display: grid;
  align-items: start;
  gap: 14px;
  padding-bottom: 10px;
}

.admin-chart-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.admin-chart-periods {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: #edf1f6;
  border-radius: 7px;
}

.admin-chart-periods button {
  min-height: 32px;
  padding: 0 10px;
  color: #526071;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}

.admin-chart-periods button:hover {
  color: #111318;
}

.admin-chart-periods button.is-active {
  color: #075fca;
  background: #fff;
}

.admin-line-chart-wrap {
  width: 100%;
  padding: 0 18px 16px;
  overflow: hidden;
}

.admin-line-chart {
  display: block;
  width: 100%;
  min-width: 0;
  height: auto;
}

.admin-line-chart-grid line {
  stroke: #e7ebf1;
  stroke-width: 1;
}

.admin-line-chart-grid text,
.admin-line-chart-labels text {
  fill: #748092;
  font-family: var(--font-sans);
  font-size: 14px;
}

.admin-line-chart-area {
  fill: rgba(8, 119, 249, 0.07);
  stroke: none;
}

.admin-line-chart-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-line-chart-line.is-created {
  stroke: #0877f9;
}

.admin-line-chart-line.is-completed {
  stroke: #5aa98e;
}

.admin-line-chart-points circle {
  fill: #fff;
  stroke-width: 3;
}

.admin-line-chart-points .is-created {
  stroke: #0877f9;
}

.admin-line-chart-points .is-completed {
  stroke: #5aa98e;
}

.admin-compact-order-list > button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 7px 10px;
  color: #111318;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid #edf1f6;
  transition: background-color 160ms ease;
}

.admin-compact-order-list > button:hover {
  background: #f6f8fb;
}

.admin-compact-order-list > button > span {
  display: grid;
  gap: 2px;
}

.admin-compact-order-list > button > span:last-child {
  grid-template-columns: 30px 94px;
  width: 136px;
  align-items: center;
  justify-content: end;
  gap: 12px;
}

.admin-compact-order-list > button > span:last-child > strong {
  min-width: 94px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-compact-order-list small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-list-surface {
  overflow: hidden;
}

.admin-list-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid #dfe5ee;
}

.admin-search-field {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 10px;
  max-width: 410px;
  height: 40px;
  padding: 0 12px;
  color: #6f7c8c;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 7px;
}

.admin-search-field:focus-within {
  border-color: #0877f9;
}

.admin-search-field .admin-icon {
  width: 17px;
  height: 17px;
}

.admin-search-field input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0;
  color: #111318;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
}

.admin-search-field input::placeholder {
  color: #6f7c8c;
  opacity: 1;
}

.admin-filter-group {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 8px;
}

.admin-filter-group label,
.admin-drawer-form label,
.admin-dialog-form label,
.admin-settings-fields label,
.admin-drawer-textarea {
  display: grid;
  gap: 6px;
}

.admin-filter-group label > span,
.admin-drawer-form label > span,
.admin-dialog-form label > span,
.admin-settings-fields label > span,
.admin-drawer-textarea > span {
  color: #526071;
  font-size: 13px;
  font-weight: 600;
}

.admin-filter-group select,
.admin-drawer-form input,
.admin-drawer-form select,
.admin-drawer-form textarea,
.admin-dialog-form input,
.admin-dialog-form select,
.admin-dialog-form textarea,
.admin-settings-fields input {
  width: 100%;
  min-height: 40px;
  padding: 0 11px;
  color: #111318;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 7px;
  outline: 0;
  font-size: 14px;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.admin-filter-group select {
  min-width: 136px;
}

.admin-drawer-form textarea,
.admin-dialog-form textarea {
  min-height: 100px;
  padding-block: 10px;
  resize: vertical;
}

.admin-drawer-form input:focus,
.admin-drawer-form select:focus,
.admin-drawer-form textarea:focus,
.admin-dialog-form input:focus,
.admin-dialog-form select:focus,
.admin-dialog-form textarea:focus,
.admin-settings-fields input:focus {
  border-color: #0877f9;
}

.admin-drawer-form input:disabled,
.admin-drawer-form select:disabled {
  color: #526071;
  background: #f0f4f8;
}

.admin-table-scroll {
  width: 100%;
  overflow-x: auto;
}

.admin-data-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  color: #334052;
}

.admin-data-table th,
.admin-data-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #edf1f6;
  vertical-align: middle;
}

.admin-data-table th {
  color: #6f7c8c;
  background: #f9fafc;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.admin-data-table td {
  height: 72px;
  font-size: 14px;
}

.admin-data-table tbody tr {
  transition: background-color 140ms ease;
}

.admin-data-table tbody tr:hover {
  background: #f9fbfe;
}

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

.admin-person-cell,
.admin-service-name,
.admin-content-name,
.admin-order-id {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: #111318;
  text-align: left;
  background: transparent;
  border: 0;
}

.admin-person-cell > span:last-child,
.admin-order-id {
  min-width: 0;
}

.admin-person-cell > span:last-child,
.admin-order-id {
  display: grid;
  gap: 2px;
}

.admin-person-cell small,
.admin-order-id small,
.admin-payment-state {
  color: #6f7c8c;
  font-size: 12px;
}

.admin-payment-state {
  display: block;
  margin-top: 3px;
}

.admin-presence {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  background: #b8c0cc;
  border-radius: 50%;
}

.admin-presence--online { background: #19a781; }
.admin-presence--offline { background: #e05872; }

.admin-service-name > span,
.admin-content-name > span {
  display: grid;
  width: 34px;
  height: 34px;
  color: #0877f9;
  background: #e8f2ff;
  border-radius: 7px;
  place-items: center;
}

.admin-service-name .admin-icon,
.admin-content-name .admin-icon {
  width: 17px;
  height: 17px;
}

.admin-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 10px 16px;
  color: #6f7c8c;
  background: #f9fafc;
  border-top: 1px solid #edf1f6;
  font-size: 12px;
}

.admin-orders-table {
  min-width: 1120px;
}

.admin-order-service {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 172px;
  color: #111318;
}

.admin-order-service > span,
.admin-service-code {
  display: inline-grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: #0563d1;
  background: #e8f2ff;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  place-items: center;
}

.admin-order-service strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.admin-service-code--small {
  width: 23px;
  height: 23px;
  border-radius: 5px;
  font-size: 9px;
}

.admin-compact-order-list small {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-empty-state {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 42px 24px;
  color: #6f7c8c;
  text-align: center;
}

.admin-empty-state .admin-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 4px;
  color: #0877f9;
}

.admin-empty-state strong {
  color: #111318;
  font-size: 14px;
}

.admin-order-summary,
.admin-finance-summary {
  display: grid;
  gap: 1px;
  margin-bottom: 16px;
  overflow: hidden;
  background: #dfe5ee;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

.admin-order-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-finance-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-order-summary > div,
.admin-finance-summary > article {
  display: grid;
  gap: 3px;
  min-height: 88px;
  padding: 16px 18px;
  background: #fff;
}

.admin-order-summary span,
.admin-finance-summary span {
  color: #526071;
  font-size: 12px;
}

.admin-order-summary strong,
.admin-finance-summary strong {
  color: #111318;
  font-size: 20px;
  font-weight: 600;
}

.admin-finance-summary small {
  color: #6f7c8c;
  font-size: 11px;
}

/* Archive 12.07: talent characteristics. */
.characteristics-archive-view {
  display: grid;
  gap: 18px;
}

.characteristics-archive-view > h2 {
  margin: 0;
  color: #121212;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
}

.characteristics-archive-layout {
  display: grid;
  grid-template-columns: minmax(0, 688px) minmax(230px, 334px);
  gap: 20px;
  align-items: start;
  justify-content: space-between;
}

.characteristics-panels,
.characteristics-side-nav {
  background: #fff;
  border-radius: 8px;
}

.characteristics-panels {
  display: flex;
  min-width: 0;
  min-height: 558px;
  padding: 20px;
  flex-direction: column;
}

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

.characteristics-panel-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
}

.characteristics-panel-heading h3 {
  margin: 0;
  color: #121212;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
}

.characteristics-panel-heading p {
  max-width: 62ch;
  margin: 0;
  color: #6f7c8c;
  font-size: 13px;
  line-height: 1.5;
}

.characteristics-group + .characteristics-group {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #edf1f6;
}

.characteristics-group h4 {
  margin: 0 0 14px;
  color: #334052;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

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

.characteristics-switch-grid .dial-switch-control {
  width: 100%;
  grid-template-columns: 48px minmax(0, 1fr);
}

.characteristics-switch-grid .dial-switch-control > :is(b, .dial-switch-label) {
  color: #121212;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

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

.characteristics-field {
  display: grid;
  min-width: 0;
  gap: 8px;
}

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

.characteristics-field > span {
  color: #334052;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.characteristics-field :is(input, select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 12px;
  color: #121212;
  font: 400 14px/1.45 var(--font-sans);
  background: #fff;
  border: 1px solid #d7e0ea;
  border-radius: 6px;
  outline: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.characteristics-field textarea {
  min-height: 92px;
  resize: vertical;
}

.characteristics-field :is(input, select, textarea):focus-visible {
  border-color: #367be3;
  box-shadow: 0 0 0 3px rgb(54 123 227 / 12%);
}

.characteristics-equipment-options {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid #edf1f6;
}

.characteristics-side-nav {
  display: grid;
  padding: 12px;
  position: sticky;
  top: 132px;
}

.characteristics-side-nav button {
  min-height: 36px;
  padding: 0 14px;
  color: #39475a;
  font: 500 14px/1.2 var(--font-sans);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  transition: color 180ms ease, background-color 180ms ease;
}

.characteristics-side-nav button:hover,
.characteristics-side-nav button:focus-visible,
.characteristics-side-nav button.is-active {
  color: #0877f9;
  background: #eaf3ff;
  outline: none;
}

@media (max-width: 980px) {
  .characteristics-archive-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .characteristics-side-nav {
    grid-row: 1;
    grid-template-columns: repeat(4, minmax(max-content, 1fr));
    position: static;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .characteristics-side-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 520px) {
  .characteristics-archive-view {
    gap: 14px;
  }

  .characteristics-archive-view > h2 {
    font-size: 24px;
  }

  .characteristics-side-nav {
    width: 100%;
    padding: 8px;
  }

  .characteristics-side-nav button {
    min-height: 40px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .characteristics-panels {
    min-height: 0;
    padding: 16px;
  }

  .characteristics-switch-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

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

  .characteristics-field.is-wide {
    grid-column: auto;
  }

}

/* Archive 12.07: duets. */
.duets-archive-view,
.duets-archive-view [data-duet-list-view] {
  display: grid;
  gap: 18px;
}

.duets-archive-view [data-duet-list-view][hidden],
.duet-detail-view[hidden] {
  display: none;
}

.duets-archive-view h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
}

.duets-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.duet-archive-card {
  display: grid;
  min-height: 222px;
  align-content: space-between;
  padding: 16px;
  background: #fff;
  border-radius: 7px;
}

.duet-card-head {
  display: flex;
  gap: 14px;
  align-items: start;
  justify-content: space-between;
}

.duet-card-head h3,
.duet-card-head p {
  margin: 0;
}

.duet-card-head h3 {
  font-size: 14px;
  font-weight: 600;
}

.duet-card-head p {
  margin-top: 5px;
  color: #718198;
  font-size: 10px;
  line-height: 1.45;
}

.duet-card-avatars {
  display: flex;
  gap: 6px;
}

.duet-card-avatars button {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  padding: 0;
  place-items: center;
  overflow: visible;
  background: #8d949d;
  border: 0;
  border-radius: 7px;
}

.duet-card-avatars img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32;
  border-radius: inherit;
}

.duet-card-avatars .dashboard-icon {
  position: relative;
  z-index: 1;
  width: 25px;
  height: 25px;
  color: #fff;
  fill: currentColor;
  stroke: none;
}

.duet-card-avatars i {
  position: absolute;
  z-index: 2;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  background: #36ba64;
  border: 2px solid #fff;
  border-radius: 50%;
}

.duet-pending-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  margin: 12px 0;
  color: #39475a;
  font-size: 10px;
  line-height: 1.4;
}

.duet-pending-note .dashboard-icon {
  width: 18px;
  height: 18px;
  color: #0877f9;
}

.duet-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.duet-tags span {
  min-height: 24px;
  padding: 6px 8px;
  color: #39475a;
  font-size: 9px;
  background: #f2f5f9;
  border-radius: 4px;
}

.duet-archive-card footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 10px;
}

.duet-archive-card footer button {
  min-height: 36px;
  font-size: 11px;
}

.duet-archive-card footer .secondary-button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  color: #0877f9;
  background: #edf5ff;
  border: 0;
}

.duet-archive-card footer .dashboard-icon {
  width: 16px;
  height: 16px;
}

.duet-create-card {
  display: flex;
  min-height: 222px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  color: #0877f9;
  font: 500 13px/1.3 var(--font-sans);
  background: transparent;
  border: 1px dashed #0877f9;
  border-radius: 7px;
}

.duet-create-card:hover,
.duet-create-card:focus-visible {
  background: #edf5ff;
  outline: none;
}

.duet-create-card .dashboard-icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  color: #fff;
  background: #0877f9;
  border-radius: 6px;
}

.duet-detail-view {
  display: grid;
  gap: 16px;
}

.duet-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, .8fr);
  gap: 16px;
  align-items: start;
}

.duet-detail-main,
.duet-detail-layout > aside {
  display: grid;
  gap: 16px;
}

.duet-participants,
.duet-order-history,
.duet-detail-layout > aside > section {
  padding: 18px;
  background: #fff;
  border-radius: 7px;
}

.duet-participants > h3,
.duet-order-history h3,
.duet-detail-layout aside h3 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
}

.duet-participants > article {
  display: grid;
  gap: 13px;
  padding: 14px 0;
  border-bottom: 1px solid #e9eef5;
}

.duet-participants > article:last-child {
  border-bottom: 0;
}

.duet-participants article > div {
  display: flex;
  gap: 10px;
  align-items: center;
}

.duet-participants article > div > span {
  position: relative;
}

.duet-participants img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

.duet-participants article > div > span i {
  position: absolute;
  right: -2px;
  bottom: 1px;
  width: 11px;
  height: 11px;
  background: #36ba64;
  border: 2px solid #fff;
  border-radius: 50%;
}

.duet-participants p,
.duet-participants strong,
.duet-participants small {
  display: block;
  margin: 0;
}

.duet-participants strong {
  font-size: 11px;
  font-weight: 600;
}

.duet-participants small {
  margin-top: 3px;
  color: #718198;
  font-size: 9px;
}

.duet-participants dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.duet-participants dl > div,
.duet-detail-layout aside dl > div {
  display: flex;
  justify-content: space-between;
}

.duet-participants dt,
.duet-participants dd,
.duet-detail-layout aside dt,
.duet-detail-layout aside dd {
  margin: 0;
  font-size: 10px;
}

.duet-participants dt,
.duet-detail-layout aside dt {
  color: #718198;
}

.duet-order-history > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.duet-order-history > header > div {
  display: flex;
  gap: 6px;
  grid-column: 1;
}

.duet-order-history > header button,
.duet-order-history article button {
  min-height: 30px;
  padding: 0 10px;
  color: #0877f9;
  font-size: 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.duet-order-history > header button.is-active,
.duet-order-history article button {
  background: #edf5ff;
}

.duet-order-history > header input {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 34px;
  padding: 0 10px;
  border: 1px solid #bdc9d8;
  border-radius: 4px;
}

.duet-order-history > article {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid #e9eef5;
}

.duet-order-history > article:last-child {
  border-bottom: 0;
}

.duet-order-history article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #0877f9;
  background: #edf5ff;
  border-radius: 50%;
}

.duet-order-history article > span.is-failed {
  color: #e34b60;
  background: #fff0f2;
}

.duet-order-history article strong,
.duet-order-history article p,
.duet-order-history article time {
  display: block;
  margin: 0;
}

.duet-order-history article strong {
  font-size: 11px;
  font-weight: 600;
}

.duet-order-history article p,
.duet-order-history article time {
  margin-top: 4px;
  color: #718198;
  font-size: 9px;
}

.duet-detail-layout aside dl {
  display: grid;
  gap: 11px;
  margin: 0;
}

.duet-detail-layout aside > button {
  width: 100%;
}

.duet-dialog-partner {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px;
  background: #f5f8fc;
  border-radius: 5px;
}

.duet-dialog-partner img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}

.duet-dialog-partner strong,
.duet-dialog-partner p {
  display: block;
  margin: 0;
}

.duet-dialog-partner strong {
  font-size: 12px;
  font-weight: 600;
}

.duet-dialog-partner p {
  margin-top: 4px;
  color: #718198;
  font-size: 10px;
}

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

  .duet-detail-layout > aside {
    grid-template-columns: minmax(0, 1fr) repeat(2, auto);
  }
}

@media (max-width: 680px) {
  .duets-archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .duet-detail-layout > aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Archive 12.07: reviews. */
.reviews-archive-view {
  display: grid;
  grid-column: 1 / -1;
  gap: 16px;
  min-width: 0;
}

.reviews-archive-view > h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
}

.reviews-archive-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(250px, .8fr);
  gap: 16px;
  align-items: start;
}

.reviews-feed-card,
.reviews-score-column > article {
  background: #fff;
  border-radius: 7px;
}

.reviews-feed-card {
  min-width: 0;
  padding: 16px;
}

.reviews-feed-card > header {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf1f6;
}

.reviews-feed-card > header > strong {
  font-size: 13px;
  font-weight: 600;
}

.reviews-feed-card > header > strong span {
  color: #8794a6;
  font-weight: 400;
}

.reviews-feed-card .dial-settings-toggle {
  width: auto;
  grid-template-columns: 32px auto;
}

.reviews-feed-card .dial-settings-toggle b {
  font-size: 10px;
  font-weight: 400;
}

.reviews-feed-list {
  display: grid;
}

.reviews-feed-list > article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid #edf1f6;
}

.reviews-feed-list > article:last-child {
  border-bottom: 0;
}

.review-author-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff;
  font: 500 11px/1 var(--font-sans);
  background: #121212;
  border-radius: 50%;
}

.reviews-feed-list article > div > header {
  display: flex;
  gap: 14px;
  align-items: center;
}

.reviews-feed-list article > div > header strong {
  font-size: 11px;
  font-weight: 600;
}

.reviews-feed-list article > div > header time {
  color: #8794a6;
  font-size: 9px;
}

.review-stars {
  display: block;
  margin-top: 4px;
  color: #ffc20a;
  font-size: 10px;
}

.reviews-feed-list article p {
  margin: 9px 0 0;
  color: #39475a;
  font-size: 11px;
  line-height: 1.5;
}

.review-quick-replies {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.review-quick-replies button {
  min-height: 26px;
  padding: 0 10px;
  color: #0877f9;
  font: 400 9px/1 var(--font-sans);
  background: #edf5ff;
  border: 0;
  border-radius: 4px;
}

.reviews-feed-list form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
  margin-top: 9px;
}

.reviews-feed-list form input {
  height: 30px;
  padding: 0 10px;
  font: 400 10px/1 var(--font-sans);
  border: 1px solid #cdd6e1;
  border-radius: 4px;
  outline: 0;
}

.reviews-feed-list form input:focus {
  border-color: #7aaef1;
}

.reviews-feed-list form button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 0;
  place-items: center;
  color: #0877f9;
  background: transparent;
  border: 0;
}

.reviews-feed-list form button .dashboard-icon {
  width: 18px;
  height: 18px;
}

.review-owner-response {
  padding: 8px 10px;
  color: #216bcf !important;
  background: #edf5ff;
  border-radius: 4px;
}

.reviews-score-column {
  display: grid;
  gap: 16px;
}

.reviews-score-column .analytics-overall-score > button {
  margin-top: 10px;
  padding: 0;
  color: #718198;
  font-size: 9px;
  background: transparent;
  border: 0;
}

@media (max-width: 980px) {
  .reviews-archive-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviews-score-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .reviews-score-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .reviews-feed-card > header {
    align-items: start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-slider-viewport,
  .home-slider-track,
  .account-profile-page .dashboard-quick-card {
    transition: none;
  }
}

@media (max-width: 980px) {
  .site-footer.segment-footer .segment-footer-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .site-footer.segment-footer .segment-footer-bottom > * {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .site-footer.segment-footer .segment-payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: normal;
  }
}

/* Exact 420x85 home voice promo geometry from the supplied SVG. */
.home-voice-collection {
  width: 452px;
  height: 458px;
  min-height: 458px;
  padding: 8px 16px 16px;
}

.home-voice-collection h3 {
  width: 420px;
  height: 30px;
  min-height: 0;
  margin: 0 0 24px;
  overflow: hidden;
  font-size: 29px;
  font-weight: 600;
  line-height: 30px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-voice-collection > div {
  display: grid;
  gap: 25px;
}

.home-voice-collection > a {
  width: 420px;
  height: 46px;
  margin-top: 29px;
}

.reference-home-voice-row,
.home-voice-row.reference-home-voice-row {
  position: relative;
  display: block;
  width: 420px;
  height: 85px;
  min-height: 85px;
  padding: 0;
}

.reference-home-avatar-wrap {
  position: absolute;
  top: 4px;
  left: 0;
  width: 80px;
  height: 80px;
}

.reference-home-avatar,
.home-voice-row .reference-home-avatar,
.reference-home-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 12px;
}

.reference-home-avatar .voice-presence {
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border: 2px solid #f7f9fd;
}

.reference-home-play,
.home-voice-row .reference-home-play {
  inset: 0;
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  border-radius: 12px;
}

.reference-home-copy,
.home-voice-row .reference-home-copy {
  position: static;
  display: contents;
}

.reference-home-copy > a,
.home-voice-row .reference-home-copy > a {
  position: absolute;
  top: 5px;
  left: 102px;
  width: 230px;
  max-width: 230px;
  height: 20px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reference-home-copy > span {
  position: absolute;
  top: 33px;
  left: 102px;
  width: 230px;
  height: 14px;
  margin: 0;
  color: #738193;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  white-space: nowrap;
}

.reference-home-stats {
  position: absolute;
  inset: 0;
  display: block;
  color: #738193;
  pointer-events: none;
}

.reference-home-cashback {
  position: absolute;
  top: 4px;
  right: 0;
  display: flex;
  width: 80px;
  height: 20px;
  align-items: center;
  gap: 0;
  padding: 2px;
  color: #fff;
  background: linear-gradient(90deg, #deee06 0%, #33c522 40%, #0daeb8 93.65%);
  border: 0;
  border-radius: 10px;
}

.reference-home-cashback > span {
  display: grid;
  width: 28px;
  height: 16px;
  flex: 0 0 28px;
  place-items: center;
  color: #121212;
  font-size: 10px;
  font-weight: 600;
  line-height: 10px;
  background: #fff;
  border-radius: 8px;
}

.reference-home-cashback > strong {
  display: grid;
  width: 32px;
  height: 16px;
  flex: 0 0 32px;
  place-items: center;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.reference-home-cashback > b {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: url("./assets/cashback-mark.svg") center / 16px 16px no-repeat;
  border-radius: 0;
}

.reference-home-stars {
  position: absolute;
  top: 35px;
  right: 3px;
  display: flex;
  height: 12px;
  align-items: center;
  gap: 0;
  color: #738193;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}

.reference-home-rating-stars {
  display: flex;
  width: 60px;
  height: 12px;
  align-items: center;
}

.reference-home-rating-stars i {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  background: #fecc1d;
  clip-path: polygon(50% 1%, 61% 35%, 97% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 3% 35%, 39% 35%);
}

.reference-home-stars b {
  margin-left: 1px;
  color: #738193;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}

.reference-home-player,
.home-voice-row .reference-home-player {
  position: absolute;
  top: 67px;
  left: 102px;
  display: block;
  width: 318px;
  height: 18px;
  min-height: 18px;
  margin: 0;
}

.home-voice-row.reference-home-voice-row .reference-home-player input[type="range"] {
  position: absolute;
  top: -6px;
  left: 0;
  display: block;
  width: 318px;
  height: 18px;
  margin: 0;
  padding: 0;
}

.home-voice-row.reference-home-voice-row .reference-home-player input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: radial-gradient(circle at 3px 50%, #738193 0 3px, transparent 3.2px), #d4dae5;
  border-radius: 3px;
}

.home-voice-row.reference-home-voice-row.is-playing .reference-home-player input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #0877f9 0 var(--range-progress, 0%), #d4dae5 var(--range-progress, 0%) 100%);
}

.home-voice-row.reference-home-voice-row .reference-home-player input[type="range"]::-moz-range-track {
  height: 6px;
  background: #d4dae5;
  border-radius: 3px;
}

.home-voice-row.reference-home-voice-row .reference-home-player input[type="range"]::-moz-range-progress {
  height: 6px;
  background: #0877f9;
  border-radius: 3px;
}

.reference-home-player .player-meta,
.home-voice-row .reference-home-player .player-meta {
  position: absolute;
  top: 9px;
  left: 0;
  display: flex;
  width: 318px;
  height: 10px;
  justify-content: space-between;
  margin: 0;
  color: #738193;
  font-size: 10px;
  font-weight: 400;
  line-height: 10px;
  pointer-events: none;
}

.account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions > :nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions > :nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

.account-profile-page .dashboard-profile-row.is-talent .dashboard-profile-actions > :nth-child(4) {
  grid-column: 2;
  grid-row: 2;
}

.account-profile-page .dashboard-profile-rating {
  color: #526071;
  cursor: default;
}

.account-profile-page .dashboard-profile-rating .dashboard-icon {
  width: 20px;
  height: 20px;
  color: #fecc1d;
  fill: currentColor;
}

.account-profile-page .dashboard-profile-rating span,
.account-profile-page .dashboard-profile-rating b {
  color: #526071;
  font-size: 15px;
  font-weight: 400;
}

.account-profile-page .dashboard-profile-rating b {
  color: #121212;
  font-weight: 600;
}

@media (max-width: 560px) {
  .home-voice-collection {
    width: 100%;
    height: auto;
  }

  .home-voice-collection h3,
  .home-voice-collection > a,
  .reference-home-voice-row,
  .home-voice-row.reference-home-voice-row {
    width: 100%;
  }

  .reference-home-copy > a,
  .home-voice-row .reference-home-copy > a,
  .reference-home-copy > span {
    width: calc(100% - 190px);
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .reference-home-player,
  .home-voice-row .reference-home-player {
    width: calc(100% - 102px);
    max-width: none;
  }

  .home-voice-row.reference-home-voice-row .reference-home-player input[type="range"] {
    width: 100%;
    max-width: none;
  }
}

/* Platform price range, performer picker, SEO services and final shared chrome polish. */
.catalog-reference-price-row input,
.performer-picker-filters .catalog-reference-price-row input {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] > .catalog-reference-collapsed {
  display: grid !important;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  grid-template-rows: 60px 36px;
  row-gap: 24px;
  align-items: end;
  padding-top: 20px;
}

.catalog-page .catalog-reference-collapsed > .catalog-reference-field,
.catalog-page .catalog-reference-collapsed > .catalog-reference-group,
.catalog-page .catalog-reference-collapsed > .catalog-reference-open,
.catalog-page .catalog-reference-collapsed > .catalog-reference-switch,
.catalog-page .catalog-reference-collapsed > .catalog-reference-reset {
  position: relative;
  inset: auto;
  right: auto;
  left: auto;
  width: auto;
  min-width: 0;
  margin-right: 12px;
}

.catalog-page .catalog-reference-collapsed > .is-collapsed-search { grid-column: 1 / span 7; grid-row: 1; }
.catalog-page .catalog-reference-collapsed > .is-voice-type { grid-column: 8 / span 7; grid-row: 1; }
.catalog-page .catalog-reference-collapsed > .is-price { grid-column: 15 / span 7; grid-row: 1; }
.catalog-page .catalog-reference-collapsed > .is-orders { grid-column: 22 / span 7; grid-row: 1; margin-right: 0; }
.catalog-page .catalog-reference-collapsed > .catalog-reference-open { grid-column: 1 / span 5; grid-row: 2; }
.catalog-page .catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-top-rated]) { grid-column: 6 / span 4; grid-row: 2; }
.catalog-page .catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-only-online]) { grid-column: 10 / span 4; grid-row: 2; }
.catalog-page .catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-duets]) { grid-column: 14 / span 3; grid-row: 2; }
.catalog-page .catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-dubbing]) { grid-column: 17 / span 3; grid-row: 2; }
.catalog-page .catalog-reference-collapsed > .catalog-reference-switch:has([data-catalog-cleanup]) { grid-column: 20 / span 4; grid-row: 2; }
.catalog-page .catalog-reference-collapsed > .catalog-reference-reset { grid-column: 24 / span 5; grid-row: 2; margin-right: 0; }

.catalog-page .catalog-reference-collapsed > .catalog-reference-switch {
  gap: 6px;
  margin-right: 4px;
  overflow: hidden;
  font-size: 12px;
}

.catalog-page .catalog-reference-collapsed > .catalog-reference-switch b {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
}

.catalog-page .catalog-reference-collapsed > .catalog-reference-switch span {
  width: 38px;
  height: 20px;
  flex-basis: 38px;
}

.catalog-page .catalog-reference-collapsed > .catalog-reference-switch span::after {
  width: 18px;
  height: 18px;
}

.catalog-page .catalog-reference-collapsed > .catalog-reference-switch input:checked + span::after {
  transform: translateX(18px);
}

.catalog-page .catalog-reference-collapsed > .catalog-reference-open,
.catalog-page .catalog-reference-collapsed > .catalog-reference-reset {
  font-size: 14px;
}

.segment-catalog-voice-grid a,
.segment-catalog-service-grid a,
.segment-catalog-service-grid button {
  -webkit-tap-highlight-color: transparent;
}

.segment-catalog-voice-grid a:hover,
.segment-catalog-voice-grid a:focus,
.segment-catalog-voice-grid a:focus-visible,
.segment-catalog-voice-grid a:active,
.segment-catalog-voice-grid a:hover b,
.segment-catalog-voice-grid a:focus b,
.segment-catalog-voice-grid a:focus-visible b,
.segment-catalog-voice-grid a:active b {
  color: #0877f9;
}

.segment-catalog-voice-grid a:hover > span,
.segment-catalog-voice-grid a:focus > span,
.segment-catalog-voice-grid a:focus-visible > span,
.segment-catalog-voice-grid a:active > span {
  background: #0877f9;
}

.segment-catalog-voice-grid a:hover img,
.segment-catalog-voice-grid a:focus img,
.segment-catalog-voice-grid a:focus-visible img,
.segment-catalog-voice-grid a:active img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0) invert(1) !important;
}

.segment-catalog-service-grid a:hover,
.segment-catalog-service-grid a:focus,
.segment-catalog-service-grid a:focus-visible,
.segment-catalog-service-grid a:active,
.segment-catalog-service-grid button:hover,
.segment-catalog-service-grid button:focus,
.segment-catalog-service-grid button:focus-visible,
.segment-catalog-service-grid button:active,
.segment-catalog-service-grid a:hover b,
.segment-catalog-service-grid a:focus b,
.segment-catalog-service-grid a:focus-visible b,
.segment-catalog-service-grid a:active b,
.segment-catalog-service-grid button:hover b,
.segment-catalog-service-grid button:focus b,
.segment-catalog-service-grid button:focus-visible b,
.segment-catalog-service-grid button:active b {
  color: #fff;
  background: #0877f9;
}

.segment-catalog-service-grid a:hover b,
.segment-catalog-service-grid a:focus b,
.segment-catalog-service-grid a:focus-visible b,
.segment-catalog-service-grid a:active b,
.segment-catalog-service-grid button:hover b,
.segment-catalog-service-grid button:focus b,
.segment-catalog-service-grid button:focus-visible b,
.segment-catalog-service-grid button:active b {
  background: transparent;
}

.segment-catalog-service-grid a:hover > span,
.segment-catalog-service-grid a:focus > span,
.segment-catalog-service-grid a:focus-visible > span,
.segment-catalog-service-grid a:active > span,
.segment-catalog-service-grid button:hover > span,
.segment-catalog-service-grid button:focus > span,
.segment-catalog-service-grid button:focus-visible > span,
.segment-catalog-service-grid button:active > span {
  background: #fff;
}

.segment-catalog-service-grid a:hover img,
.segment-catalog-service-grid a:focus img,
.segment-catalog-service-grid a:focus-visible img,
.segment-catalog-service-grid a:active img,
.segment-catalog-service-grid button:hover img,
.segment-catalog-service-grid button:focus img,
.segment-catalog-service-grid button:focus-visible img,
.segment-catalog-service-grid button:active img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.segment-catalog-voice-grid a:focus,
.segment-catalog-voice-grid a:active,
.segment-catalog-voice-grid a:focus > span,
.segment-catalog-voice-grid a:active > span,
.segment-catalog-voice-grid a:focus img,
.segment-catalog-voice-grid a:active img,
.segment-catalog-service-grid a:focus,
.segment-catalog-service-grid a:active,
.segment-catalog-service-grid button:focus,
.segment-catalog-service-grid button:active,
.segment-catalog-service-grid a:focus > span,
.segment-catalog-service-grid a:active > span,
.segment-catalog-service-grid button:focus > span,
.segment-catalog-service-grid button:active > span,
.segment-catalog-service-grid a:focus img,
.segment-catalog-service-grid a:active img,
.segment-catalog-service-grid button:focus img,
.segment-catalog-service-grid button:active img {
  transition: none !important;
}

.segment-catalog-voice-grid a:focus,
.segment-catalog-voice-grid a:focus-visible,
.segment-catalog-voice-grid a:active,
.segment-catalog-voice-grid a:focus > span,
.segment-catalog-voice-grid a:focus-visible > span,
.segment-catalog-voice-grid a:active > span,
.segment-catalog-service-grid a:focus,
.segment-catalog-service-grid a:focus-visible,
.segment-catalog-service-grid a:active,
.segment-catalog-service-grid button:focus,
.segment-catalog-service-grid button:focus-visible,
.segment-catalog-service-grid button:active,
.segment-catalog-service-grid a:focus > span,
.segment-catalog-service-grid a:focus-visible > span,
.segment-catalog-service-grid a:active > span,
.segment-catalog-service-grid button:focus > span,
.segment-catalog-service-grid button:focus-visible > span,
.segment-catalog-service-grid button:active > span {
  transform: none !important;
}

.segment-catalog-voice-grid a.is-activating,
.segment-catalog-voice-grid a.is-activating b {
  color: #0877f9;
}

.segment-catalog-voice-grid a.is-activating > span {
  background: #0877f9;
}

.segment-catalog-voice-grid a.is-activating img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0) invert(1) !important;
}

.segment-catalog-service-grid a.is-activating,
.segment-catalog-service-grid button.is-activating {
  color: #fff;
  background: #0877f9;
}

.segment-catalog-service-grid a.is-activating b,
.segment-catalog-service-grid button.is-activating b {
  color: #fff;
  background: transparent;
}

.segment-catalog-service-grid a.is-activating > span,
.segment-catalog-service-grid button.is-activating > span {
  background: #fff;
}

.segment-catalog-service-grid a.is-activating img,
.segment-catalog-service-grid button.is-activating img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.segment-catalog-voice-grid a.is-activating,
.segment-catalog-voice-grid a.is-activating > span,
.segment-catalog-voice-grid a.is-activating img,
.segment-catalog-service-grid a.is-activating,
.segment-catalog-service-grid button.is-activating,
.segment-catalog-service-grid a.is-activating > span,
.segment-catalog-service-grid button.is-activating > span,
.segment-catalog-service-grid a.is-activating img,
.segment-catalog-service-grid button.is-activating img {
  transform: none !important;
  transition: none !important;
}

.performer-params-modal {
  padding: 6px 12px;
}

.performer-picker-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 24px));
  height: min(980px, calc(100vh - 12px));
  height: min(980px, calc(100dvh - 12px));
  max-height: none;
  padding: 18px 20px 20px;
  overflow: hidden;
}

.performer-picker-head {
  gap: 4px;
  margin: 0 0 10px;
}

.performer-picker-head h2 {
  font-size: 22px;
}

.performer-picker-head p {
  font-size: 14px;
  line-height: 1.35;
}

.performer-picker-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  margin: 0 0 12px;
  padding: 12px;
  background: #f5f8fc;
  border: 1px solid #e2e9f3;
  border-radius: 8px;
}

.performer-picker-filter-zone {
  min-width: 0;
  margin: 0;
  border: 0;
}

.performer-picker-filter-zone > h3 {
  margin: 0 0 8px;
  color: #526071;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.performer-picker-primary-grid {
  display: grid;
  grid-template-columns: minmax(210px, 1.08fr) minmax(300px, 1.38fr) minmax(205px, 0.94fr) minmax(190px, 0.84fr);
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.performer-picker-filter-zone-grid {
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.68fr);
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

.performer-picker-filter-zone-grid > .performer-picker-filter-zone {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e3eaf4;
  border-radius: 7px;
}

.performer-picker-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}

.performer-picker-switch {
  min-height: 22px;
  gap: 8px;
}

.performer-picker-switch-control,
.performer-picker-switch-control span {
  width: 38px;
  height: 20px;
}

.performer-picker-switch-control {
  flex-basis: 38px;
}

.performer-picker-switch-control span::after {
  width: 18px;
  height: 18px;
}

.performer-picker-switch-control input:checked + span::after {
  transform: translateX(18px);
}

.performer-picker-character-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "traits traits age age language language"
    "deadline deadline deadline pitch pitch pitch";
  gap: 8px 12px;
  align-items: end;
}

.performer-picker-character-grid .is-traits { grid-area: traits; }
.performer-picker-character-grid .is-age { grid-area: age; }
.performer-picker-character-grid .is-language { grid-area: language; }
.performer-picker-character-grid .is-deadline { grid-area: deadline; }
.performer-picker-character-grid .is-pitch { grid-area: pitch; }

.performer-picker-filters .catalog-reference-field > span,
.performer-picker-filters .catalog-reference-group > span {
  margin-bottom: 5px;
  font-size: 12px;
}

.performer-picker-filters input,
.performer-picker-filters select,
.performer-picker-filters .catalog-reference-tabs {
  min-height: 36px;
}

.performer-picker-filters .catalog-reference-tabs button {
  min-height: 36px;
  padding: 0 6px;
  font-size: 12px;
}

.performer-picker-reset,
.performer-picker-filters .performer-picker-reset {
  width: auto;
  min-height: 28px;
  margin: 8px 0 0;
  padding: 4px 10px;
  font-size: 12px;
}

.performer-picker-results {
  min-height: 0;
}

.performer-picker-results-head {
  min-height: 34px;
  padding-bottom: 8px;
}

.performer-picker-list {
  grid-template-columns: repeat(3, minmax(0, 334px));
  gap: 20px;
  align-content: start;
  justify-content: center;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
}

.seo-service-main {
  padding-top: 184px;
}

.seo-service-main .site-breadcrumbs {
  display: flex;
  min-height: 20px;
  align-items: center;
  gap: 9px;
  margin: 0 0 30px;
  color: #738193;
  font-size: 14px;
  line-height: 1.4;
}

.seo-service-main .site-breadcrumbs a {
  color: #526071;
  text-decoration: none;
}

.seo-service-main .site-breadcrumbs a:hover,
.seo-service-main .site-breadcrumbs a:focus-visible {
  color: #0877f9;
  outline: none;
}

.seo-service-main .site-breadcrumbs [aria-hidden="true"] {
  color: #aab5c4;
}

.seo-service-main .site-breadcrumbs [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  color: #121212;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-service-hero {
  grid-template-columns: minmax(0, 1fr) minmax(480px, 560px);
  gap: 56px;
  min-height: 410px;
}

.seo-service-hero figure {
  width: 100%;
  height: 360px;
  min-height: 360px;
  background-position: 62% center;
}

.seo-service-voice-grid,
.seo-service-voices > .seo-service-voice-grid,
.seo-service-voices > div.seo-service-voice-grid:last-child {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  justify-content: stretch;
}

.seo-service-related nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.seo-service-related a {
  display: flex;
  min-height: 62px;
  align-items: center;
  padding: 12px 14px;
  line-height: 1.3;
}

.segment-socials img {
  transition: opacity 180ms ease;
}

.segment-socials a:hover {
  outline: none;
}

.segment-socials a:focus-visible {
  outline: 2px solid #0877f9;
  outline-offset: 2px;
}

.segment-socials a:hover .segment-social-icon-default,
.segment-socials a:focus-visible .segment-social-icon-default {
  opacity: 0;
}

.segment-socials a:hover .segment-social-icon-hover,
.segment-socials a:focus-visible .segment-social-icon-hover {
  opacity: 1;
}

@media (max-width: 1180px) {
  .seo-service-hero {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 470px);
    gap: 40px;
  }

  .seo-service-voice-grid,
  .seo-service-voices > .seo-service-voice-grid,
  .seo-service-voices > div.seo-service-voice-grid:last-child {
    grid-template-columns: repeat(2, minmax(0, 334px));
    justify-content: start;
  }

  .seo-service-related nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .performer-picker-panel {
    width: min(980px, calc(100vw - 20px));
  }

  .performer-picker-primary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performer-picker-filter-zone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performer-picker-character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
  }

  .performer-picker-character-grid .is-traits,
  .performer-picker-character-grid .is-age,
  .performer-picker-character-grid .is-language,
  .performer-picker-character-grid .is-deadline,
  .performer-picker-character-grid .is-pitch {
    grid-area: auto;
  }

  .performer-picker-list {
    grid-template-columns: repeat(2, 334px);
    gap: 10px 16px;
    justify-content: center;
  }
}

@media (max-width: 980px) {
  .seo-service-main {
    padding-top: 154px;
  }

  .seo-service-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-service-hero figure {
    height: auto;
    min-height: 320px;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 820px) {
  .performer-params-modal {
    place-items: start center;
    padding: 8px;
  }

  .performer-picker-panel {
    display: block;
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    padding: 18px 16px;
    overflow-y: auto;
  }

  .performer-picker-filter-zone-grid,
  .performer-picker-primary-grid,
  .performer-picker-character-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .performer-picker-results {
    overflow: visible;
  }

  .performer-picker-list {
    grid-template-columns: minmax(0, 334px);
    height: auto;
    overflow: visible;
  }

  .seo-service-related nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .seo-service-main {
    padding-top: 130px;
  }

  .seo-service-voice-grid,
  .seo-service-voices > .seo-service-voice-grid,
  .seo-service-voices > div.seo-service-voice-grid:last-child,
  .seo-service-related nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-service-hero figure {
    min-height: 240px;
  }
}

/* Service pages: richer, service-specific editorial layouts */
.seo-service-hero figure {
  display: block;
  background: #dce7f3;
}

.seo-service-hero figure::before {
  z-index: 1;
  background: rgba(9, 20, 35, 0.2);
}

.seo-service-hero figure .seo-service-hero-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: cover;
  object-position: center;
  background: transparent;
  border-radius: 0;
  filter: none;
}

.seo-service-hero figure .seo-service-hero-icon {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  width: 52px;
  height: 52px;
  padding: 11px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  filter: none;
}

.seo-service-hero figcaption {
  z-index: 2;
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 22px;
  padding: 0;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.34);
}

.seo-service-main[data-seo-visual="voice"] .seo-service-hero-photo {
  object-position: 50% 43%;
}

.seo-service-main[data-seo-visual="audio"] .seo-service-hero-photo {
  object-position: 50% 54%;
}

.seo-service-main[data-seo-visual="vocal"] .seo-service-hero-photo,
.seo-service-main[data-seo-visual="role"] .seo-service-hero-photo {
  object-position: 50% 38%;
}

.seo-service-main[data-seo-visual="script"] .seo-service-hero-photo,
.seo-service-main[data-seo-visual="translation"] .seo-service-hero-photo {
  object-position: 50% 46%;
}

.seo-service-main[data-seo-visual="ivr"] .seo-service-hero-photo {
  object-position: 50% 42%;
}

.seo-service-main[data-seo-visual="audio-logo"] .seo-service-hero-photo {
  object-position: 50% 52%;
}

.seo-service-main[data-seo-visual="longread"] .seo-service-hero-photo,
.seo-service-main[data-seo-visual="audiobook"] .seo-service-hero-photo {
  object-position: 50% 48%;
}

.seo-service-main[data-seo-visual="duets"] .seo-service-hero-photo {
  object-position: 50% 36%;
}

.seo-service-overview,
.seo-service-process,
.seo-service-deep-dive,
.seo-service-voices,
.seo-service-faq,
.seo-service-related {
  padding: 72px 0;
}

.seo-service-deep-dive {
  --seo-visual-accent: #58a5ff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.92fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
  border-bottom: 1px solid #dfe5ee;
}

.seo-service-main[data-seo-visual="vocal"] .seo-service-deep-dive,
.seo-service-main[data-seo-visual="audio-logo"] .seo-service-deep-dive,
.seo-service-main[data-seo-visual="duets"] .seo-service-deep-dive {
  --seo-visual-accent: #eab2e1;
}

.seo-service-main[data-seo-visual="script"] .seo-service-deep-dive,
.seo-service-main[data-seo-visual="longread"] .seo-service-deep-dive,
.seo-service-main[data-seo-visual="audiobook"] .seo-service-deep-dive {
  --seo-visual-accent: #76d8b7;
}

.seo-service-main[data-seo-visual="role"] .seo-service-deep-dive {
  --seo-visual-accent: #f3b6a1;
}

.seo-service-kicker {
  margin: 0 0 14px;
  color: #0877f9;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.seo-service-deep-copy h2 {
  max-width: 720px;
  margin: 0;
  color: #121212;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.seo-service-deep-copy > p:not(.seo-service-kicker) {
  max-width: 72ch;
  margin: 20px 0 0;
  color: #334052;
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.seo-service-deep-copy ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  padding: 0;
  margin: 30px 0 0;
  list-style: none;
}

.seo-service-deep-copy li {
  position: relative;
  min-height: 48px;
  padding: 13px 0 13px 22px;
  color: #273446;
  font-size: 14px;
  line-height: 1.5;
  border-top: 1px solid #dfe5ee;
}

.seo-service-deep-copy li::before {
  position: absolute;
  top: 21px;
  left: 2px;
  width: 7px;
  height: 7px;
  content: "";
  background: #0877f9;
  border-radius: 50%;
}

.seo-service-delivery-visual {
  display: grid;
  min-height: 338px;
  align-content: space-between;
  padding: 28px;
  margin: 0;
  color: #fff;
  background: #152b43;
  border-radius: 8px;
}

.seo-service-delivery-head {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.seo-service-delivery-head > span {
  display: grid;
  flex: 0 0 48px;
  width: 48px;
  height: 38px;
  place-items: center;
  background: #fff;
  border-radius: 8px;
}

.seo-service-delivery-head img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}

.seo-service-delivery-head div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.seo-service-delivery-head strong {
  overflow: hidden;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-service-delivery-head small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seo-service-delivery-wave {
  display: grid;
  height: 112px;
  grid-template-columns: repeat(16, minmax(3px, 1fr));
  gap: clamp(4px, 0.7vw, 9px);
  align-items: center;
  margin: 30px 0 24px;
}

.seo-service-delivery-wave i {
  display: block;
  height: var(--seo-wave-height);
  min-height: 16px;
  background: var(--seo-visual-accent);
  border-radius: 2px;
  opacity: 0.9;
}

.seo-service-delivery-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.seo-service-delivery-formats span {
  padding: 7px 10px;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.seo-service-delivery-visual figcaption {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.45;
}

.seo-service-faq {
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: clamp(46px, 6vw, 88px);
}

.seo-service-faq-heading {
  align-self: start;
  position: sticky;
  top: 152px;
}

.seo-service-faq-heading p,
.seo-service-related > div > p {
  max-width: 42ch;
  margin: 12px 0 0;
  color: #526071;
  font-size: 15px;
  line-height: 1.6;
}

.seo-service-faq details {
  padding: 22px 0;
}

.seo-service-faq details:first-child {
  padding-top: 0;
}

.seo-service-faq summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 18px;
  align-items: center;
  list-style: none;
  transition: color 180ms ease;
}

.seo-service-faq summary::-webkit-details-marker {
  display: none;
}

.seo-service-faq summary::after {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #0877f9;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  content: "+";
  background: #edf5ff;
  border-radius: 50%;
  transition: color 180ms ease, background-color 180ms ease, transform 220ms ease;
}

.seo-service-faq summary:hover {
  color: #0877f9;
}

.seo-service-faq details[open] summary::after {
  color: #fff;
  content: "−";
  background: #0877f9;
  transform: rotate(180deg);
}

.seo-service-faq details p {
  margin-top: 14px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.seo-service-faq details[open] p {
  opacity: 1;
  transform: translateY(0);
}

.seo-service-related {
  padding-bottom: 18px;
}

.seo-service-related nav {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 30px;
}

.seo-service-related a {
  display: grid;
  min-width: 0;
  min-height: 78px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  color: #1d2b3d;
  background: #f3f7fb;
  border-radius: 8px;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.seo-service-related a > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  background: #fff;
  border-radius: 8px;
}

.seo-service-related a img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  transition: filter 180ms ease;
}

.seo-service-related a b {
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.seo-service-related a:hover,
.seo-service-related a:focus-visible {
  color: #fff;
  background: #0877f9;
  outline: none;
  transform: translateY(-2px);
}

.seo-service-related a:hover img,
.seo-service-related a:focus-visible img {
  filter: brightness(0) invert(1);
}

.seo-service-related a:hover > span,
.seo-service-related a:focus-visible > span {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 1180px) {
  .seo-service-deep-dive {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.9fr);
    gap: 42px;
  }

  .seo-service-related nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .seo-service-overview,
  .seo-service-deep-dive,
  .seo-service-faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-service-faq-heading {
    position: static;
  }

  .seo-service-delivery-visual {
    width: min(100%, 620px);
  }
}

@media (max-width: 820px) {
  .seo-service-related nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .seo-service-overview,
  .seo-service-process,
  .seo-service-deep-dive,
  .seo-service-voices,
  .seo-service-faq,
  .seo-service-related {
    padding: 52px 0;
  }

  .seo-service-deep-copy h2 {
    font-size: 28px;
  }

  .seo-service-deep-copy ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-service-delivery-visual {
    min-height: 310px;
    padding: 22px;
  }

  .seo-service-delivery-head strong,
  .seo-service-delivery-head small {
    white-space: normal;
  }

  .seo-service-delivery-wave {
    gap: 4px;
  }

  .seo-service-related nav {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Service page guides, measured FAQ motion and mega-menu related links */
.seo-service-guide {
  padding: 80px 0;
  border-bottom: 1px solid #dfe5ee;
}

.seo-service-guide-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: end;
}

.seo-service-guide-heading h2 {
  max-width: 820px;
  margin: 0;
  color: #121212;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

.seo-service-guide-heading p {
  max-width: 62ch;
  margin: 0;
  color: #445267;
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}

.seo-service-guide-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 46px;
  border-top: 1px solid #dfe5ee;
}

.seo-service-guide article {
  min-width: 0;
  padding: 30px clamp(24px, 2.6vw, 38px) 28px;
}

.seo-service-guide article.is-primary {
  grid-row: auto;
  padding-left: 0;
}

.seo-service-guide article + article {
  border-left: 1px solid #dfe5ee;
}

.seo-service-guide article:last-child {
  padding-right: 0;
}

.seo-service-guide h3 {
  max-width: 690px;
  margin: 0;
  color: #172234;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.32;
  text-wrap: balance;
}

.seo-service-guide article:not(.is-primary) h3 {
  font-size: 20px;
}

.seo-service-guide article p {
  max-width: 78ch;
  margin: 16px 0 0;
  color: #445267;
  font-size: 16px;
  line-height: 1.72;
  text-wrap: pretty;
}

.seo-service-guide ul {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}

.seo-service-guide li {
  position: relative;
  min-height: 42px;
  padding: 10px 0 10px 22px;
  color: #273446;
  font-size: 14px;
  line-height: 1.5;
  border-top: 1px solid #dfe5ee;
}

.seo-service-guide li::before {
  position: absolute;
  top: 18px;
  left: 2px;
  width: 7px;
  height: 7px;
  content: "";
  background: #0877f9;
  border-radius: 50%;
}

.seo-service-faq-item {
  padding: 22px 0;
  border-bottom: 1px solid #dfe5ee;
}

.seo-service-faq-item:first-child {
  padding-top: 0;
}

.seo-service-faq-toggle {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 18px;
  align-items: center;
  padding: 0;
  color: #121212;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 180ms ease;
}

.seo-service-faq-toggle:hover {
  color: #0877f9;
}

.seo-service-faq-toggle:focus-visible {
  outline: 2px solid rgba(8, 119, 249, 0.45);
  outline-offset: 6px;
  border-radius: 2px;
}

.seo-service-faq-toggle i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #0877f9;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  background: #edf5ff;
  border-radius: 50%;
  transition:
    color 220ms ease,
    background-color 220ms ease,
    transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.seo-service-faq-toggle i::before {
  content: "+";
}

.seo-service-faq-item.is-open .seo-service-faq-toggle i {
  color: #fff;
  background: #0877f9;
  transform: rotate(45deg);
}

.seo-service-faq-answer {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    height 460ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms ease;
}

.seo-service-faq-item.is-open .seo-service-faq-answer {
  opacity: 1;
  transition:
    height 460ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 300ms ease 70ms;
}

.seo-service-faq-answer > div {
  min-height: 0;
  overflow: hidden;
}

.seo-service-faq-answer p {
  padding: 14px 0 2px;
  margin: 0;
  color: #526071;
  font-size: 15px;
  line-height: 1.6;
  opacity: 1;
  transform: none;
  transition: none;
}

.seo-service-related {
  padding: 76px 0 34px;
}

.seo-service-related > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: end;
}

.seo-service-related > div > p {
  max-width: 56ch;
  margin: 0;
  font-size: 16px;
}

.seo-service-related nav {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.seo-service-related a {
  display: grid;
  min-width: 0;
  min-height: 96px;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 10px 14px 10px 10px;
  color: #121212;
  background: #ebf3ff;
  border-radius: 6px;
  transition:
    color 180ms ease,
    background-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.seo-service-related a > .seo-service-related-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
}

.seo-service-related a img {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: none;
}

.seo-service-related a > .seo-service-related-copy {
  display: grid;
  width: auto;
  height: auto;
  min-width: 0;
  place-items: initial;
  align-content: center;
  gap: 5px;
  background: transparent;
  border-radius: 0;
}

.seo-service-related a b {
  min-width: 0;
  color: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.22;
  text-wrap: pretty;
}

.seo-service-related a small {
  color: #526071;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.38;
  text-wrap: pretty;
  transition: color 180ms ease;
}

.seo-service-related a:hover,
.seo-service-related a:focus-visible {
  color: #fff;
  background: #0877f9;
  outline: none;
  transform: translateY(-1px);
}

.seo-service-related a:hover img,
.seo-service-related a:focus-visible img {
  filter: none;
}

.seo-service-related a:hover > .seo-service-related-icon,
.seo-service-related a:focus-visible > .seo-service-related-icon {
  background: #fff;
}

.seo-service-related a:hover > .seo-service-related-copy,
.seo-service-related a:focus-visible > .seo-service-related-copy {
  background: transparent;
}

.seo-service-related a:hover small,
.seo-service-related a:focus-visible small {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1180px) {
  .seo-service-guide-heading,
  .seo-service-related > div {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
    gap: 42px;
  }

  .seo-service-guide-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .seo-service-related nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .seo-service-guide {
    padding: 64px 0;
  }

  .seo-service-guide-heading,
  .seo-service-related > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .seo-service-guide-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    margin-top: 34px;
  }

  .seo-service-guide article,
  .seo-service-guide article.is-primary {
    grid-row: auto;
    padding: 26px 0;
    border-left: 0;
    border-right: 0;
  }

  .seo-service-guide article:not(.is-primary) {
    border-top: 1px solid #dfe5ee;
  }

  .seo-service-related nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 620px) {
  .seo-service-guide {
    padding: 52px 0;
  }

  .seo-service-guide-heading h2 {
    font-size: 28px;
  }

  .seo-service-guide-heading p,
  .seo-service-guide article p {
    font-size: 15px;
    line-height: 1.68;
  }

  .seo-service-guide h3,
  .seo-service-guide article:not(.is-primary) h3 {
    font-size: 19px;
  }

  .seo-service-related {
    padding-top: 52px;
  }

  .seo-service-related a {
    min-height: 94px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-service-faq-answer,
  .seo-service-faq-toggle i,
  .seo-service-related a {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* Service editorial layout: spacious photography, readable process and stable related links */
.seo-service-hero {
  grid-template-columns: minmax(0, 1fr) minmax(600px, 650px);
  gap: clamp(52px, 5.2vw, 78px);
  min-height: 520px;
  padding: 44px 0 84px;
  border-bottom: 0;
}

.seo-service-hero > div {
  max-width: 650px;
}

.seo-service-hero h1 {
  max-width: 640px;
  font-size: clamp(46px, 3.55vw, 54px);
  line-height: 1.08;
}

.seo-service-hero p {
  max-width: 60ch;
  margin-top: 28px;
  font-size: 18px;
  line-height: 1.65;
}

.seo-service-hero > div > div {
  gap: 14px;
  margin-top: 38px;
}

.seo-service-hero figure {
  position: relative;
  width: 100%;
  height: 460px;
  min-height: 460px;
  overflow: hidden;
  margin: 0;
  background: #dce7f3;
  border-radius: 8px;
}

.seo-service-hero figure::before,
.seo-service-hero figure .seo-service-hero-icon,
.seo-service-hero figure figcaption {
  display: none;
}

.seo-service-hero figure .seo-service-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seo-service-overview {
  padding: 88px 0;
}

.seo-service-process {
  display: grid;
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 92px);
  align-items: start;
  padding: 88px 0 94px;
}

.seo-service-process-heading p {
  max-width: 34ch;
  margin: 16px 0 0;
  color: #526071;
  font-size: 15px;
  line-height: 1.65;
}

.seo-service-process ol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  margin: 2px 0 0;
}

.seo-service-process ol::before {
  position: absolute;
  top: 23px;
  right: 8%;
  left: 8%;
  height: 1px;
  content: "";
  background: #d9e1eb;
}

.seo-service-process li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 17px;
  align-content: start;
  color: #253347;
  counter-increment: none;
}

.seo-service-process li::before {
  display: none;
}

.seo-service-process-number {
  z-index: 1;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  padding: 0;
  color: #0877f9;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  background: #f6f8fb;
  border: 1px solid #9fc8fb;
  border-radius: 50%;
}

.seo-service-process strong {
  display: block;
  color: #172234;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.42;
}

.seo-service-process li p {
  margin: 9px 0 0;
  color: #617085;
  font-size: 14px;
  line-height: 1.58;
}

.seo-service-deep-dive {
  grid-template-columns: minmax(520px, 0.98fr) minmax(0, 1fr);
  gap: clamp(54px, 6vw, 86px);
  padding: 98px 0;
  border-bottom: 0;
}

.seo-service-secondary-creative,
.seo-service-guide-creative {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  background: #dce7f3;
  border-radius: 8px;
}

.seo-service-secondary-creative {
  min-height: 420px;
  aspect-ratio: 4 / 3;
}

.seo-service-secondary-creative img,
.seo-service-guide-creative img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seo-service-main[data-seo-visual="script"] .seo-service-secondary-creative img,
.seo-service-main[data-seo-visual="audio"] .seo-service-secondary-creative img {
  object-position: center 48%;
}

.seo-service-main[data-seo-visual="role"] .seo-service-secondary-creative img,
.seo-service-main[data-seo-visual="translation"] .seo-service-secondary-creative img,
.seo-service-main[data-seo-visual="audiobook"] .seo-service-secondary-creative img {
  object-position: center 34%;
}

.seo-service-kicker {
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
}

.seo-service-deep-copy h2 {
  font-size: 34px;
  line-height: 1.2;
}

.seo-service-deep-copy > p:not(.seo-service-kicker) {
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.74;
}

.seo-service-voices {
  padding: 86px 0 92px;
  border-top: 0;
  border-bottom: 0;
}

.seo-service-guide {
  padding: 96px 0 92px;
  border-bottom: 1px solid #dfe5ee;
}

.seo-service-guide-heading {
  grid-template-columns: minmax(0, 1fr) minmax(520px, 0.86fr);
  gap: clamp(56px, 6vw, 88px);
  align-items: center;
}

.seo-service-guide-heading-copy {
  min-width: 0;
}

.seo-service-guide-heading h2 {
  max-width: 760px;
  font-size: 36px;
  line-height: 1.18;
}

.seo-service-guide-heading p {
  max-width: 68ch;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.74;
}

.seo-service-guide-creative {
  min-height: 360px;
  aspect-ratio: 16 / 10;
}

.seo-service-main[data-seo-visual="vocal"] .seo-service-guide-creative img,
.seo-service-main[data-seo-visual="translation"] .seo-service-guide-creative img {
  object-position: center 34%;
}

.seo-service-guide-content {
  margin-top: 60px;
}

.seo-service-guide article {
  padding-top: 34px;
  padding-bottom: 32px;
}

.seo-service-faq {
  padding: 92px 0;
}

.seo-service-related {
  padding: 92px 0 52px;
}

.seo-service-related nav {
  gap: 18px;
  margin-top: 40px;
}

.seo-service-related a {
  min-height: 116px;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding: 15px 18px 15px 14px;
}

.seo-service-related a small {
  display: -webkit-box;
  height: 2.84em;
  min-height: 2.84em;
  overflow: hidden;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 1240px) {
  .seo-service-hero {
    grid-template-columns: minmax(0, 1fr) minmax(500px, 0.95fr);
    gap: 46px;
  }

  .seo-service-hero figure {
    height: 430px;
    min-height: 430px;
  }

  .seo-service-deep-dive,
  .seo-service-guide-heading {
    grid-template-columns: minmax(460px, 0.95fr) minmax(0, 1fr);
    gap: 48px;
  }

  .seo-service-guide-heading {
    grid-template-columns: minmax(0, 1fr) minmax(460px, 0.9fr);
  }
}

@media (max-width: 980px) {
  .seo-service-hero,
  .seo-service-deep-dive,
  .seo-service-guide-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .seo-service-hero {
    gap: 44px;
    min-height: 0;
  }

  .seo-service-hero > div {
    max-width: 760px;
  }

  .seo-service-hero figure,
  .seo-service-secondary-creative,
  .seo-service-guide-creative {
    width: 100%;
  }

  .seo-service-process {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .seo-service-process-heading p {
    max-width: 58ch;
  }

  .seo-service-process ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
  }

  .seo-service-process ol::before {
    display: none;
  }

  .seo-service-guide-heading-copy {
    order: 0;
  }

  .seo-service-guide-creative {
    order: 1;
  }
}

@media (max-width: 620px) {
  .seo-service-hero {
    gap: 34px;
    padding: 26px 0 58px;
  }

  .seo-service-hero h1 {
    font-size: 38px;
  }

  .seo-service-hero p {
    margin-top: 22px;
    font-size: 16px;
  }

  .seo-service-hero > div > div {
    margin-top: 30px;
  }

  .seo-service-hero figure {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .seo-service-overview,
  .seo-service-process,
  .seo-service-deep-dive,
  .seo-service-voices,
  .seo-service-guide,
  .seo-service-faq,
  .seo-service-related {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .seo-service-process ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .seo-service-process li {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 16px;
  }

  .seo-service-process li p {
    margin-top: 6px;
  }

  .seo-service-secondary-creative,
  .seo-service-guide-creative {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .seo-service-deep-copy h2,
  .seo-service-guide-heading h2 {
    font-size: 29px;
  }

  .seo-service-guide-content {
    margin-top: 38px;
  }

  .seo-service-related nav {
    margin-top: 30px;
  }

  .back-to-top {
    right: 10px;
    bottom: 16px;
    width: 46px;
    height: 46px;
    padding-bottom: 4px;
    font-size: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-service-related a {
    transition-duration: 0.01ms;
  }
}

@media (max-width: 480px) {
  .seo-service-hero {
    gap: 24px;
    padding: 16px 0 28px;
  }

  .seo-service-hero h1 {
    font-size: 28px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .seo-service-hero p {
    margin-top: 16px;
  }

  .seo-service-hero > div > div {
    margin-top: 20px;
  }

  .seo-service-overview,
  .seo-service-process,
  .seo-service-deep-dive,
  .seo-service-voices,
  .seo-service-guide,
  .seo-service-faq,
  .seo-service-related {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* Performer picker: one flat filter console with aligned catalog cards */
body.is-performer-modal-open,
html:has(body.is-performer-modal-open) {
  overflow: hidden;
}

.performer-params-modal {
  padding: 2px 8px;
}

.performer-picker-panel {
  display: grid;
  width: min(1100px, calc(100vw - 16px));
  height: min(996px, calc(100dvh - 4px));
  max-height: none;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 16px 18px 6px;
  overflow: hidden;
  border-radius: 8px;
  animation: performer-picker-enter 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.performer-picker-head {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding-right: 42px;
  margin: 0 0 10px;
}

.performer-picker-head-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.performer-picker-head h2 {
  font-size: 23px;
  line-height: 1.2;
}

.performer-picker-head p {
  max-width: 64ch;
  font-size: 14px;
  line-height: 1.45;
}

.performer-picker-close {
  top: 15px;
  right: 18px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0 0 3px;
  color: #7b899b;
  font-size: 28px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}

.performer-picker-close:hover,
.performer-picker-close:focus-visible {
  color: #121212;
  background: #f0f4f8;
  outline: none;
}

.performer-picker-head .performer-picker-reset,
.performer-picker-head .catalog-reference-reset.performer-picker-reset {
  position: static;
  inset: auto;
  display: inline-flex;
  width: auto;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  margin: 0;
  color: #526071;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 6px;
  cursor: pointer;
  justify-self: end;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.performer-picker-head .performer-picker-reset:hover,
.performer-picker-head .performer-picker-reset:focus-visible {
  color: #0877f9;
  background: #f4f8fd;
  border-color: #b9d3f5;
  outline: none;
}

.performer-picker-head .performer-picker-reset svg {
  width: 14px;
  height: 14px;
}

.performer-picker-filters,
.performer-picker-filters.performer-picker-all-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  padding: 0;
  margin: 0 0 10px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.performer-picker-primary-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.12fr) minmax(360px, 1.55fr) minmax(220px, 0.95fr) minmax(190px, 0.85fr);
  gap: 12px;
  align-items: end;
  min-width: 0;
  padding: 0 0 9px;
}

.performer-picker-filter-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 9px 0 0;
  margin: 0;
  color: #121212;
  background: transparent;
  border: 0;
  box-shadow: inset 0 1px 0 #e6ebf2;
}

.performer-picker-filter-row + .performer-picker-filter-row {
  margin-top: 8px;
}

.performer-picker-filter-row > h3 {
  margin: 0;
  color: #334052;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.performer-picker-switch-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 0.92fr 0.82fr 1.25fr 1.15fr;
  gap: 8px;
  min-width: 0;
}

.performer-picker-switch {
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.performer-picker-switch b {
  min-width: 0;
  overflow: visible;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: normal;
  white-space: nowrap;
}

.performer-picker-character-grid {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(220px, 1.55fr) minmax(220px, 1.55fr) minmax(140px, 1fr);
  grid-template-areas: none;
  gap: 12px;
  align-items: end;
  min-width: 0;
}

.performer-picker-character-grid .is-traits,
.performer-picker-character-grid .is-age,
.performer-picker-character-grid .is-language,
.performer-picker-character-grid .is-deadline,
.performer-picker-character-grid .is-pitch {
  grid-area: auto;
}

.performer-picker-filters .catalog-reference-field > span,
.performer-picker-filters .catalog-reference-group > span {
  margin-bottom: 4px;
  color: #334052;
  font-size: 12px;
  font-weight: 500;
}

.performer-picker-filters input,
.performer-picker-filters select,
.performer-picker-filters .catalog-reference-tabs {
  min-height: 34px;
}

.performer-picker-filters .catalog-reference-tabs button {
  min-height: 34px;
  padding: 0 6px;
  font-size: 12px;
}

.performer-picker-results-head {
  min-height: 30px;
  padding: 0 8px 7px;
}

.performer-picker-list {
  grid-template-columns: repeat(3, 334px);
  grid-auto-rows: 217px;
  gap: 8px 13px;
  align-items: start;
  justify-content: start;
  width: 100%;
  padding: 6px 8px 12px;
  overflow-x: hidden;
  scrollbar-gutter: auto;
}

.performer-picker-list.is-scrollable {
  scrollbar-gutter: stable;
}

.performer-picker-voice-card {
  position: relative;
  width: 334px;
  min-height: 217px;
  overflow: visible;
}

.performer-picker-voice-card .voice-card.reference-voice-card {
  width: 334px;
  max-width: 334px;
}

.performer-picker-voice-card:hover .performer-picker-select,
.performer-picker-voice-card:focus-within .performer-picker-select {
  color: #fff;
  background: #0877f9;
  outline: none;
}

.performer-picker-voice-card.is-used {
  opacity: 0.58;
}

.performer-picker-voice-card.is-used .voice-card.reference-voice-card {
  pointer-events: none;
}

.performer-picker-voice-card .performer-picker-select:disabled {
  color: #758295;
  cursor: default;
  background: #edf1f6;
}

body.is-performer-modal-open .global-audio-player {
  z-index: 340;
  width: min(960px, calc(100vw - 76px));
  bottom: 28px;
}

@keyframes performer-picker-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  .performer-picker-panel {
    width: min(980px, calc(100vw - 24px));
  }

  .performer-picker-primary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performer-picker-filter-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .performer-picker-switch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .performer-picker-character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performer-picker-list {
    grid-template-columns: repeat(2, minmax(0, 334px));
  }
}

@media (max-width: 820px) {
  .performer-params-modal {
    place-items: start center;
    padding: 8px;
  }

  .performer-picker-panel {
    display: block;
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    padding: 18px 16px;
    overflow-y: auto;
  }

  .performer-picker-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-right: 38px;
  }

  .performer-picker-head .performer-picker-reset {
    justify-self: start;
  }

  .performer-picker-filters {
    padding-right: 0;
  }

  .performer-picker-primary-grid,
  .performer-picker-character-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .performer-picker-switch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performer-picker-results {
    overflow: visible;
  }

  .performer-picker-results-head {
    padding-right: 0;
  }

  .performer-picker-list {
    width: 100%;
    max-width: 334px;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .performer-picker-voice-card,
  .performer-picker-voice-card .voice-card.reference-voice-card {
    width: 100%;
    max-width: 334px;
  }
}

@media (max-width: 520px) {
  .performer-picker-switch-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .performer-picker-switch b {
    white-space: normal;
  }

  .performer-picker-card {
    grid-template-columns: 52px minmax(0, 1fr) 84px;
    gap: 8px;
    padding: 8px;
  }

  .performer-picker-avatar-wrap,
  .performer-picker-avatar {
    width: 52px;
    height: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .performer-picker-panel {
    animation: none;
  }
}

/* Analytics workspace: compact overview, comparison chart and quality signals. */
.dashboard-analytics-reference {
  display: grid;
  min-width: 0;
  gap: 22px;
  color: #121212;
}

.dashboard-analytics-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
}

.dashboard-analytics-title {
  min-width: 0;
}

.dashboard-analytics-title > p {
  margin: 0 0 7px;
  color: #0877f9;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
}

.dashboard-analytics-head .dashboard-analytics-title h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
}

.dashboard-analytics-title > span {
  display: block;
  margin-top: 7px;
  color: #718198;
  font-size: 14px;
  line-height: 1.45;
}

.dashboard-analytics-actions {
  display: flex;
  gap: 10px;
  align-items: end;
}

.dashboard-analytics-actions label {
  display: grid;
  min-width: 126px;
  gap: 6px;
  color: #718198;
  font-size: 12px;
  font-weight: 500;
}

.dashboard-analytics-actions select {
  width: 100%;
  min-width: 126px;
  height: 42px;
  color: #121212;
  font-size: 14px;
  background-color: #fff;
}

.dashboard-analytics-actions .primary-button {
  display: inline-flex;
  min-width: 164px;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 16px;
}

.dashboard-analytics-actions .dashboard-icon {
  width: 17px;
  height: 17px;
}

.dashboard-analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-width: 0;
  background: #fff;
  border: 1px solid #e5ebf3;
  border-radius: 8px;
}

.dashboard-analytics-summary > article {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 20px 18px;
}

.dashboard-analytics-summary > article + article::before {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 1px;
  content: "";
  background: #e9eef5;
}

.dashboard-analytics-summary > article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #0877f9;
  background: #edf5ff;
  border-radius: 7px;
}

.dashboard-analytics-summary .dashboard-icon {
  width: 19px;
  height: 19px;
}

.dashboard-analytics-summary b,
.dashboard-analytics-summary strong,
.dashboard-analytics-summary small {
  display: block;
}

.dashboard-analytics-summary b {
  min-height: 2.7em;
  color: #526071;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.dashboard-analytics-summary strong {
  margin-top: 9px;
  overflow: hidden;
  color: #121212;
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-analytics-summary small {
  min-height: 2.6em;
  margin-top: 8px;
  color: #8a97a9;
  font-size: 11px;
  line-height: 1.3;
}

.dashboard-analytics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.72fr);
  gap: 20px;
  min-width: 0;
  align-items: stretch;
}

.dashboard-analytics-chart-card,
.dashboard-analytics-quality,
.dashboard-products-table {
  min-width: 0;
  background: #fff;
  border: 1px solid #e5ebf3;
  border-radius: 8px;
}

.dashboard-analytics-chart-card {
  display: grid;
  align-content: start;
  padding: 22px;
}

.dashboard-chart-head {
  display: flex;
  gap: 20px;
  align-items: start;
  justify-content: space-between;
}

.dashboard-chart-head h3,
.dashboard-products-head h3,
.dashboard-analytics-quality h3 {
  margin: 0;
  color: #121212;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.dashboard-chart-head p,
.dashboard-products-head p {
  margin: 5px 0 0;
  color: #8a97a9;
  font-size: 12px;
  line-height: 1.4;
}

.dashboard-chart-scale {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 3px;
  background: #f1f4f8;
  border-radius: 6px;
}

.dashboard-chart-scale button {
  height: 30px;
  padding: 0 10px;
  color: #718198;
  font: 500 12px/1 var(--font-sans);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.dashboard-chart-scale button:hover,
.dashboard-chart-scale button:focus-visible {
  color: #0877f9;
  outline: none;
}

.dashboard-chart-scale button.is-active {
  color: #0877f9;
  background: #fff;
  box-shadow: 0 1px 2px rgb(28 45 71 / 8%);
}

.dashboard-chart-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 190px));
  gap: 10px;
  align-items: end;
  margin-top: 18px;
}

.dashboard-chart-controls label {
  display: grid;
  gap: 5px;
  color: #718198;
  font-size: 11px;
  font-weight: 500;
}

.dashboard-chart-controls select {
  width: 100%;
  min-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 12px;
}

.dashboard-analytics-chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  overflow: visible;
}

.dashboard-chart-grid line {
  stroke: #e6ebf2;
  stroke-width: 1;
}

.dashboard-analytics-chart path {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: d 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dashboard-analytics-chart path.is-blue {
  stroke: #0877f9;
}

.dashboard-analytics-chart path.is-red {
  stroke: #e95463;
}

.dashboard-chart-points circle {
  fill: #fff;
  stroke: #0877f9;
  stroke-width: 3;
}

.dashboard-chart-labels text {
  fill: #8a97a9;
  font: 500 11px var(--font-sans);
}

.dashboard-chart-legend {
  display: flex;
  gap: 26px;
  margin: 10px 0 0 42px;
}

.dashboard-chart-legend span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #526071;
  font-size: 12px;
}

.dashboard-chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dashboard-chart-legend .is-blue {
  background: #0877f9;
}

.dashboard-chart-legend .is-red {
  background: #e95463;
}

.dashboard-analytics-quality {
  display: grid;
  align-content: start;
  padding: 22px;
}

.dashboard-quality-head {
  display: flex;
  gap: 14px;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid #e9eef5;
}

.dashboard-quality-head > div span,
.dashboard-quality-head > div strong,
.dashboard-quality-head p,
.dashboard-quality-head b,
.dashboard-quality-head small {
  display: block;
  margin: 0;
}

.dashboard-quality-head > div span {
  color: #718198;
  font-size: 12px;
  font-weight: 500;
}

.dashboard-quality-head > div strong {
  margin-top: 6px;
  font-size: 34px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.dashboard-quality-head b {
  color: #f2b411;
  font-size: 14px;
  font-weight: 600;
}

.dashboard-quality-head small {
  margin-top: 5px;
  color: #8a97a9;
  font-size: 10px;
  white-space: nowrap;
}

.dashboard-analytics-quality h3 {
  margin-top: 18px;
  font-size: 14px;
}

.dashboard-quality-bars {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 17px 0 0;
  list-style: none;
}

.dashboard-quality-bars li > div {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: #526071;
  font-size: 11px;
}

.dashboard-quality-bars li > div b {
  color: #121212;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dashboard-quality-bars li > span {
  display: block;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  background: #edf1f6;
  border-radius: 3px;
}

.dashboard-quality-bars li > span i {
  display: block;
  height: 100%;
  background: #0877f9;
  border-radius: inherit;
}

.dashboard-quality-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #e9eef5;
}

.dashboard-quality-stats > div {
  display: grid;
  min-width: 0;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 7px;
  align-items: center;
}

.dashboard-quality-stats > div > span {
  display: grid;
  width: 24px;
  height: 24px;
  grid-row: 1 / 3;
  place-items: center;
  color: #0877f9;
  background: #edf5ff;
  border-radius: 5px;
}

.dashboard-quality-stats .dashboard-icon {
  width: 13px;
  height: 13px;
}

.dashboard-quality-stats b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.dashboard-quality-stats small {
  overflow: hidden;
  color: #8a97a9;
  font-size: 9px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-products-table {
  padding: 22px;
}

.dashboard-products-head {
  display: flex;
  gap: 24px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dashboard-products-head a {
  flex: 0 0 auto;
  color: #0877f9;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.dashboard-products-head a:hover,
.dashboard-products-head a:focus-visible {
  color: #0563d1;
  outline: none;
}

.dashboard-products-table table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.dashboard-products-table th,
.dashboard-products-table td {
  padding: 12px 13px;
  color: #334052;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid #e9eef5;
}

.dashboard-products-table th {
  color: #718198;
  font-weight: 500;
  background: #f6f8fb;
}

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

.dashboard-products-table td:first-child {
  white-space: nowrap;
}

.dashboard-products-table td:first-child > * {
  vertical-align: middle;
}

.dashboard-service-mark {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-right: 8px;
  color: #0877f9;
  background: #edf5ff;
  border-radius: 5px;
}

.dashboard-service-mark .dashboard-icon {
  width: 14px;
  height: 14px;
}

.dashboard-products-table td strong {
  font-weight: 500;
}

.dashboard-table-rating {
  color: #c78b00;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .dashboard-analytics-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-analytics-quality {
    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1.3fr);
    gap: 0 24px;
  }

  .dashboard-quality-head {
    grid-row: 1 / 3;
    align-content: start;
    align-items: start;
    border-right: 1px solid #e9eef5;
    border-bottom: 0;
    padding: 0 24px 0 0;
  }

  .dashboard-analytics-quality h3,
  .dashboard-quality-bars {
    grid-column: 2;
  }

  .dashboard-quality-stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 920px) {
  .dashboard-analytics-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-analytics-actions {
    justify-content: space-between;
  }

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

  .dashboard-analytics-summary > article:nth-child(3)::before {
    display: none;
  }

  .dashboard-analytics-summary > article:nth-child(n + 3)::after {
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 1px;
    content: "";
    background: #e9eef5;
  }
}

@media (max-width: 680px) {
  .dashboard-analytics-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-analytics-actions .primary-button {
    width: 100%;
  }

  .dashboard-analytics-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-analytics-summary > article + article::before {
    top: 0;
    right: 18px;
    bottom: auto;
    left: 18px;
    width: auto;
    height: 1px;
  }

  .dashboard-analytics-summary > article:nth-child(n + 3)::after {
    display: none;
  }

  .dashboard-chart-head,
  .dashboard-products-head {
    display: grid;
  }

  .dashboard-chart-scale {
    justify-self: start;
  }

  .dashboard-chart-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-analytics-chart-card,
  .dashboard-analytics-quality,
  .dashboard-products-table {
    padding: 18px;
  }

  .dashboard-analytics-quality {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-quality-head {
    grid-row: auto;
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid #e9eef5;
  }

  .dashboard-analytics-quality h3,
  .dashboard-quality-bars,
  .dashboard-quality-stats {
    grid-column: 1;
  }

  .dashboard-chart-labels text:nth-child(even) {
    display: none;
  }
}

/* One breadcrumb component and one public-page rhythm across every route. */
.segment-online b {
  color: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.site-breadcrumbs,
.seo-service-main .site-breadcrumbs,
.legal-document .site-breadcrumbs,
.order-page .site-breadcrumbs,
.order-page-main .site-breadcrumbs {
  display: flex;
  min-height: 21px;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0;
  margin: 0 0 30px;
  color: #738193;
  font: 500 14px/1.5 var(--font-sans);
}

.site-breadcrumbs a,
.seo-service-main .site-breadcrumbs a,
.legal-document .site-breadcrumbs a,
.order-page .site-breadcrumbs a,
.order-page-main .site-breadcrumbs a {
  color: #526071;
  text-decoration: none;
  transition: color 150ms ease;
}

.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus-visible,
.seo-service-main .site-breadcrumbs a:hover,
.seo-service-main .site-breadcrumbs a:focus-visible,
.legal-document .site-breadcrumbs a:hover,
.legal-document .site-breadcrumbs a:focus-visible,
.order-page .site-breadcrumbs a:hover,
.order-page .site-breadcrumbs a:focus-visible,
.order-page-main .site-breadcrumbs a:hover,
.order-page-main .site-breadcrumbs a:focus-visible {
  color: #0877f9;
  outline: none;
}

.site-breadcrumbs [aria-hidden="true"],
.seo-service-main .site-breadcrumbs [aria-hidden="true"],
.legal-document .site-breadcrumbs [aria-hidden="true"],
.order-page .site-breadcrumbs [aria-hidden="true"],
.order-page-main .site-breadcrumbs [aria-hidden="true"] {
  color: #aab5c4;
}

.site-breadcrumbs [aria-current="page"],
.seo-service-main .site-breadcrumbs [aria-current="page"],
.legal-document .site-breadcrumbs [aria-current="page"],
.order-page .site-breadcrumbs [aria-current="page"],
.order-page-main .site-breadcrumbs [aria-current="page"] {
  min-width: 0;
  overflow: hidden;
  color: #121212;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-page .catalog-main .catalog-section,
.chronometer-main,
.reference-main,
.favorites-main,
.rating-main,
.profile-main,
.seo-service-main,
.legal-page main,
.order-page-main {
  padding-top: 184px;
}

@media (max-width: 900px) {
  .catalog-page .catalog-main .catalog-section,
  .chronometer-main,
  .reference-main,
  .favorites-main,
  .rating-main,
  .profile-main,
  .seo-service-main,
  .legal-page main,
  .order-page-main {
    padding-top: 170px;
  }

  .site-breadcrumbs,
  .seo-service-main .site-breadcrumbs,
  .legal-document .site-breadcrumbs,
  .order-page .site-breadcrumbs,
  .order-page-main .site-breadcrumbs {
    margin-bottom: 24px;
  }
}

/* Final mobile cabinet lock: later desktop dashboard rules must not restore columns. */
@media (max-width: 780px) {
  .account-profile-page .account-profile-main {
    padding-top: 170px;
  }

  .account-profile-page .account-profile-main > .page-grid {
    width: min(100% - 28px, 680px);
  }

  .account-profile-page .dashboard-shell {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .account-profile-page .dashboard-sidebar {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .account-profile-page .dashboard-nav {
    display: flex;
    width: 100%;
    gap: 6px;
    padding: 0 0 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .account-profile-page .dashboard-nav-item,
  .account-profile-page .dashboard-nav-item:nth-child(7) {
    display: grid;
    width: auto;
    min-width: max-content;
    min-height: 40px;
    flex: 0 0 auto;
    grid-template-columns: 18px auto auto;
    gap: 8px;
    padding: 7px 11px;
    margin: 0;
    border: 0;
  }

  .account-profile-page .dashboard-nav-item span {
    overflow: visible;
    font-size: 14px;
    white-space: nowrap;
  }

  .account-profile-page .dashboard-nav-item .dashboard-icon {
    width: 18px;
    height: 18px;
  }

  .account-profile-page .dashboard-sidebar-foot {
    display: none;
  }

  .account-profile-page .dashboard-workspace,
  .account-profile-page .dashboard-view {
    width: 100%;
    min-width: 0;
  }
}

/* Rating places live inside each card; chronometer uses the shared page rhythm once. */
.rating-page-head {
  display: block;
  padding-bottom: 34px;
}

.rating-page-head > div {
  max-width: 820px;
}

.rating-voice-grid {
  margin-top: 28px;
}

.rating-rank-badge,
.rating-rank-badge.is-silver,
.rating-rank-badge.is-bronze {
  position: absolute;
  z-index: 6;
  top: auto;
  right: auto;
  bottom: -7px;
  left: -7px;
  display: grid;
  width: 29px;
  height: 29px;
  min-width: 29px;
  grid-template-columns: none;
  place-items: center;
  padding: 0;
  color: #fff;
  background-color: #d4af37;
  background-image: linear-gradient(145deg, #fff0a6 0%, #d4af37 38%, #a97805 70%, #efd66f 100%);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 72%),
    inset 0 -1px 2px rgb(89 61 0 / 25%),
    0 2px 7px rgb(60 43 0 / 16%);
  pointer-events: none;
}

.rating-rank-badge.is-rank-2 {
  color: #fff;
  background-color: #c0c0c0;
  background-image: linear-gradient(145deg, #f8fafb 0%, #c0c0c0 38%, #8d969e 70%, #e7eaec 100%);
  border-color: #fff;
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 88%),
    inset 0 -1px 2px rgb(64 72 80 / 22%),
    0 2px 7px rgb(55 63 72 / 14%);
}

.rating-rank-badge.is-rank-3 {
  color: #fff;
  background-color: #cd7f32;
  background-image: linear-gradient(145deg, #f1bd79 0%, #cd7f32 38%, #8d4b20 70%, #dfa166 100%);
  border-color: #fff;
  box-shadow:
    inset 0 1px 1px rgb(255 244 226 / 70%),
    inset 0 -1px 2px rgb(74 34 13 / 28%),
    0 2px 7px rgb(91 48 21 / 16%);
}

.rating-rank-badge b {
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-shadow: 0 1px 2px rgb(0 0 0 / 34%);
}

.chronometer-main .chronometer-section {
  padding-top: 0;
}

.chronometer-grid {
  row-gap: 0;
}

.chronometer-grid > .site-breadcrumbs {
  grid-column: 1 / -1;
}

.chronometer-grid > h1 {
  margin-bottom: 48px;
}

@media (max-width: 900px) {
  .chronometer-grid > h1 {
    margin-bottom: 32px;
  }
}

/* Archive 12.07: shared account chrome, authentication and notifications. */
.segment-header-actions {
  align-items: center;
}

.account-profile-page .segment-mainbar-inner {
  grid-template-columns: 216px 126px minmax(280px, 1fr) max-content;
}

.account-profile-page .segment-header-actions {
  min-width: 284px;
  gap: 18px;
}

.segment-header-actions .segment-account-bell {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  place-items: center;
  color: #526071;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.segment-header-actions .segment-account-bell:hover,
.segment-header-actions .segment-account-bell:focus-visible {
  color: #0877f9;
  background: #f1f6fd;
  outline: none;
  box-shadow: none;
}

.segment-header-actions .segment-account-bell .segment-bell-svg {
  width: 28px;
  height: 28px;
}

.segment-header-actions .segment-account-bell .notification-badge {
  position: absolute;
  top: 0;
  right: -1px;
  display: grid;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #ee4055;
  border: 2px solid #fff;
  border-radius: 50%;
  font: 600 9px/1 var(--font-sans);
  box-sizing: border-box;
}

.segment-balance {
  display: grid;
  min-width: 132px;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
}

.segment-balance-link {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-decoration: none;
}

.segment-balance-link small {
  color: #7f8b9c;
  font: 500 11px/1.2 var(--font-sans);
  white-space: nowrap;
}

.segment-balance-link strong {
  color: #121212;
  font: 600 15px/1.2 var(--font-sans);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.segment-balance-toggle {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  color: #718198;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.segment-balance-toggle:hover,
.segment-balance-toggle:focus-visible {
  color: #0877f9;
  background: #f1f6fd;
  outline: none;
}

.segment-balance-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-profile-wrap {
  position: relative;
}

.segment-profile-wrap .user-chip {
  display: grid;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  place-items: center;
  overflow: visible;
  background: #edf3fb;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.segment-profile-wrap .user-chip img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #dfe7f1;
}

.segment-profile-wrap .user-chip:hover img,
.segment-profile-wrap .user-chip:focus-visible img {
  box-shadow: 0 0 0 2px #b9d5fa;
}

.segment-profile-dropdown {
  position: absolute;
  z-index: 110;
  top: calc(100% + 14px);
  right: 0;
  width: 320px;
  padding: 0;
  opacity: 0;
  transform: translateY(-7px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.segment-profile-dropdown.is-open {
  opacity: 1;
  transform: translateY(0);
}

.segment-profile-card {
  width: 320px;
  padding: 20px;
  color: #121212;
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 7px;
  box-shadow: 0 18px 46px rgb(31 48 73 / 14%);
}

.segment-profile-hero {
  display: grid;
  grid-template-columns: 32px 76px 32px;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

.segment-profile-avatar {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
}

.segment-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.segment-profile-avatar i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 13px;
  height: 13px;
  background: #32b66a;
  border: 3px solid #fff;
  border-radius: 50%;
}

.segment-profile-card .segment-profile-mini-action {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #718198;
  background: #f3f6fa;
  border-radius: 50%;
}

.segment-profile-card .segment-profile-mini-action:hover,
.segment-profile-card .segment-profile-mini-action:focus-visible {
  color: #0877f9;
  background: #eaf3ff;
  outline: none;
}

.segment-profile-card .segment-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-profile-caption {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 12px 0 17px;
}

.segment-profile-caption strong {
  font: 600 15px/1.25 var(--font-sans);
}

.segment-profile-caption span {
  color: #8794a6;
  font: 400 12px/1.3 var(--font-sans);
}

.segment-profile-nav {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid #edf1f6;
  border-bottom: 1px solid #edf1f6;
}

.segment-profile-card .segment-profile-nav a,
.segment-profile-card .segment-profile-add,
.segment-profile-card .segment-profile-logout {
  display: grid;
  min-height: 40px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  padding: 7px 10px;
  color: #39475a;
  font: 500 13px/1.25 var(--font-sans);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  text-align: left;
}

.segment-profile-card .segment-profile-nav a:hover,
.segment-profile-card .segment-profile-nav a:focus-visible,
.segment-profile-card .segment-profile-nav a.is-active,
.segment-profile-card .segment-profile-add:hover,
.segment-profile-card .segment-profile-add:focus-visible,
.segment-profile-card .segment-profile-logout:hover,
.segment-profile-card .segment-profile-logout:focus-visible {
  color: #0877f9;
  background: #edf5ff;
  outline: none;
}

.segment-profile-card .segment-profile-nav b {
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  color: #fff;
  background: #ee4055;
  border-radius: 10px;
  font: 600 9px/1 var(--font-sans);
}

.segment-profile-mode {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 15px 10px 10px;
}

.segment-profile-secondary-avatar,
.segment-profile-secondary-avatar img {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
}

.segment-profile-mode > span:last-child {
  display: grid;
  gap: 2px;
}

.segment-profile-mode b,
.segment-profile-mode small {
  display: block;
}

.segment-profile-mode b {
  font: 500 12px/1.2 var(--font-sans);
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  color: #121212;
  background: transparent;
  border-radius: 0;
}

.segment-profile-mode small {
  color: #8b98a9;
  font: 400 10px/1.2 var(--font-sans);
}

.segment-profile-card .segment-profile-add,
.segment-profile-card .segment-profile-logout {
  width: 100%;
}

.segment-profile-card .segment-profile-logout {
  margin-top: 4px;
  color: #e54a5f;
}

.auth-modal[hidden],
.auth-view[hidden] {
  display: none !important;
}

.auth-modal-panel.auth-side-panel {
  width: 376px;
  max-width: 100vw;
  padding: 0 21px 32px;
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.auth-view {
  min-height: calc(100vh - 32px);
  opacity: 0;
  transform: translateX(10px);
}

.auth-view.is-active {
  opacity: 1;
  transform: translateX(0);
  animation: auth-view-in 200ms ease both;
}

@keyframes auth-view-in {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.auth-panel-intro {
  position: relative;
  padding-top: 92px;
}

.auth-panel-intro h2,
.auth-reset-sent h2 {
  margin: 0;
  color: #121212;
  font: 600 25px/1.16 var(--font-sans);
  letter-spacing: 0;
}

.auth-panel-intro p,
.auth-reset-sent p {
  margin: 10px 0 0;
  color: #718198;
  font: 400 14px/1.5 var(--font-sans);
}

.auth-back {
  position: absolute;
  top: 48px;
  left: 0;
  display: grid;
  width: 34px;
  height: 34px;
  padding: 0;
  place-items: center;
  color: #526071;
  background: #f3f6fa;
  border: 0;
  border-radius: 50%;
}

.auth-back:hover,
.auth-back:focus-visible {
  color: #0877f9;
  background: #eaf3ff;
  outline: none;
}

.auth-email-form,
.auth-modal-panel .auth-email-form {
  display: grid;
  gap: 12px;
  width: 334px;
  margin-top: 46px;
}

.auth-register-form,
.auth-modal-panel .auth-register-form {
  margin-top: 22px;
}

.auth-field {
  display: grid;
  gap: 6px;
}

.auth-modal-panel .auth-field > span:first-child {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  overflow: visible;
  color: #526071;
  font: 500 12px/1.25 var(--font-sans);
}

.auth-modal-panel .auth-input-shell {
  display: block;
  width: 334px;
  height: 42px;
  min-height: 42px;
  padding: 0 13px;
  background: #fff;
  border: 1px solid #cdd6e1;
  border-radius: 5px;
  box-shadow: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.auth-modal-panel .auth-input-shell:focus-within {
  background: #fbfdff;
  border-color: #7aaef1;
  box-shadow: none;
  outline: none;
}

.auth-modal-panel .auth-input-shell input {
  width: 100%;
  min-height: 40px;
  padding: 0;
  color: #121212;
  font: 400 14px/40px var(--font-sans);
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.auth-modal-panel .auth-input-shell input::placeholder {
  color: #98a4b4;
}

.auth-text-link {
  justify-self: start;
  padding: 0;
  color: #0877f9;
  font: 500 12px/1.3 var(--font-sans);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.auth-text-link.is-centered {
  justify-self: center;
}

.auth-modal-panel #authEmailSubmit,
.auth-modal-panel .auth-email-form .primary-button,
.auth-reset-sent .primary-button {
  width: 334px;
  height: 42px;
  min-height: 42px;
  margin-top: 4px;
  color: #fff;
  font: 600 14px/1 var(--font-sans);
  background: #367be3;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  transition: background-color 150ms ease;
}

.auth-modal-panel #authEmailSubmit:hover,
.auth-modal-panel #authEmailSubmit:focus-visible,
.auth-modal-panel .auth-email-form .primary-button:hover,
.auth-modal-panel .auth-email-form .primary-button:focus-visible,
.auth-reset-sent .primary-button:hover,
.auth-reset-sent .primary-button:focus-visible {
  background: #216bcf;
  outline: none;
  box-shadow: none;
}

.auth-divider {
  position: relative;
  width: 334px;
  margin: 28px 0 24px;
  text-align: center;
}

.auth-divider::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: #e5ebf2;
}

.auth-divider span {
  position: relative;
  padding: 0 11px;
  color: #98a4b4;
  font: 400 11px/1 var(--font-sans);
  background: #fff;
}

.auth-provider-grid {
  display: grid;
  width: 334px;
  gap: 10px;
  margin: 0;
}

.auth-provider-button,
.auth-social-button {
  height: 42px;
  min-height: 42px;
  font: 500 14px/1 var(--font-sans);
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.auth-provider-button {
  display: grid;
  width: 334px;
  grid-template-columns: 20px max-content;
  gap: 9px;
  align-items: center;
  justify-content: center;
}

.sber-auth-button {
  color: #fff;
  background: #19a95b;
}

.sber-auth-button[hidden] {
  display: none;
}

.sber-auth-button:hover,
.sber-auth-button:focus-visible {
  background: #14934e;
  outline: none;
}

.phone-auth-button {
  color: #367be3;
  background: #edf5ff;
}

.phone-auth-button:hover,
.phone-auth-button:focus-visible {
  color: #216bcf;
  background: #dfeeff;
  outline: none;
}

.auth-social-grid {
  display: grid;
  width: 334px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.auth-social-button {
  display: grid;
  width: 162px;
  grid-template-columns: 20px max-content;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: #314258;
  background: #f2f5f9;
}

.auth-social-button:hover,
.auth-social-button:focus-visible {
  color: #0877f9;
  background: #eaf2fc;
  outline: none;
}

.auth-provider-button .provider-icon,
.auth-social-button .provider-icon,
.auth-provider-button .provider-icon svg,
.auth-social-button .provider-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.auth-role-toggle {
  display: grid;
  width: 334px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  margin-top: 28px;
  background: #f1f4f8;
  border-radius: 6px;
}

.auth-role-toggle button {
  height: 36px;
  min-height: 36px;
  color: #657185;
  font: 500 13px/1 var(--font-sans);
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.auth-role-toggle button.is-active {
  color: #0877f9;
  background: #fff;
  box-shadow: 0 1px 4px rgb(42 59 82 / 9%);
}

.auth-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  color: #718198;
  font: 400 11px/1.45 var(--font-sans);
}

.auth-consent input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #367be3;
}

.auth-panel-foot {
  width: 334px;
  margin: 24px 0 0;
  color: #718198;
  font: 400 13px/1.4 var(--font-sans);
  text-align: center;
}

.auth-panel-foot button {
  padding: 0;
  color: #0877f9;
  font: 500 inherit;
  background: transparent;
  border: 0;
}

.auth-reset-sent {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.auth-reset-sent p {
  max-width: 310px;
  margin-bottom: 28px;
}

.auth-success-icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  place-items: center;
  color: #0877f9;
  background: #eaf3ff;
  border-radius: 50%;
}

.auth-success-icon .segment-icon {
  width: 30px;
  height: 30px;
}

.toast-stack {
  position: fixed;
  z-index: 240;
  right: 28px;
  bottom: 28px;
  display: grid;
  width: min(362px, calc(100vw - 32px));
  gap: 12px;
  pointer-events: none;
}

.site-toast {
  display: grid;
  min-height: 132px;
  grid-template-columns: 64px minmax(0, 1fr) 24px;
  gap: 14px;
  align-items: center;
  padding: 18px;
  opacity: 0;
  color: #121212;
  background: #fff;
  border: 1px solid #e8edf4;
  border-radius: 7px;
  box-shadow: 0 18px 48px rgb(28 44 67 / 16%);
  transform: translate3d(0, 18px, 0);
  animation: site-toast-in 280ms cubic-bezier(.2,.8,.2,1) forwards;
  pointer-events: auto;
}

.site-toast.is-leaving {
  animation: site-toast-out 230ms ease forwards;
}

@keyframes site-toast-in {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes site-toast-out {
  to { opacity: 0; transform: translate3d(14px, 0, 0); }
}

.site-toast-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: #0877f9;
  background: #edf5ff;
  border-radius: 6px;
}

.site-toast-mark .segment-icon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-toast > div {
  min-width: 0;
}

.site-toast strong,
.site-toast p,
.site-toast small {
  display: block;
  margin: 0;
}

.site-toast strong {
  font: 600 14px/1.3 var(--font-sans);
}

.site-toast p {
  margin-top: 6px;
  color: #526071;
  font: 400 12px/1.45 var(--font-sans);
}

.site-toast small {
  margin-top: 7px;
  color: #98a4b4;
  font: 400 10px/1.2 var(--font-sans);
}

.site-toast > button {
  align-self: start;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  color: #98a4b4;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.site-toast > button:hover,
.site-toast > button:focus-visible {
  color: #39475a;
  background: #f1f4f8;
  outline: none;
}

.site-toast > button .segment-icon {
  width: 15px;
  height: 15px;
}

.site-toast.is-error .site-toast-mark {
  color: #d93e53;
  background: #fff0f2;
}

.back-to-top {
  display: grid;
  width: 62px;
  height: 62px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #367be3;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgb(54 123 227 / 13%);
  transition: opacity 180ms ease, transform 180ms ease, background-color 150ms ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: #216bcf;
  outline: none;
}

.back-to-top svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1180px) {
  .account-profile-page .segment-mainbar-inner {
    grid-template-columns: 190px 122px minmax(220px, 1fr) max-content;
  }

  .account-profile-page .segment-header-actions {
    min-width: 270px;
    gap: 12px;
  }
}

@media (max-width: 780px) {
  .account-profile-page .segment-mainbar-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .segment-profile-dropdown {
    right: -10px;
    width: min(320px, calc(100vw - 24px));
  }

  .segment-profile-card {
    width: 100%;
  }

  .toast-stack {
    right: 16px;
    bottom: 18px;
  }

  .back-to-top {
    width: 52px;
    height: 52px;
    box-shadow: 0 0 0 6px rgb(54 123 227 / 13%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-view.is-active,
  .site-toast,
  .site-toast.is-leaving {
    animation-duration: 1ms;
  }
}

/* Archive 12.07: orders, order states and customer settings. */
.orders-archive-view {
  display: grid;
  min-width: 0;
  gap: 18px;
}

.orders-archive-view .dashboard-section-head {
  margin-bottom: 0;
}

.orders-archive-view .dashboard-section-head h2 {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.orders-archive-search {
  position: relative;
  display: block;
}

.orders-archive-search input {
  width: 100%;
  height: 52px;
  padding: 0 50px 0 16px;
  color: #121212;
  font: 400 16px/1 var(--font-sans);
  background: #fff;
  border: 1px solid #cfd9e6;
  border-radius: 7px;
  outline: 0;
  box-shadow: none;
  transition: border-color 160ms ease-out;
}

.orders-archive-search input:focus {
  border-color: #78aaf0;
}

.orders-archive-search .dashboard-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 21px;
  height: 21px;
  color: #91a1b5;
  transform: translateY(-50%);
}

.orders-archive-filters {
  display: grid;
  grid-template-columns: 0.78fr 1.14fr 0.96fr 1.34fr 1.28fr 0.58fr;
  gap: 8px;
  padding: 0;
  background: transparent;
}

.orders-archive-filters button {
  min-width: 0;
  min-height: 42px;
  padding: 0 10px;
  color: #0877f9;
  font: 500 14px/1.2 var(--font-sans);
  background: #fff;
  border: 1px solid #86b5f2;
  border-radius: 7px;
  box-shadow: none;
  white-space: nowrap;
  transition: color 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out;
}

.orders-archive-filters button:hover,
.orders-archive-filters button:focus-visible,
.orders-archive-filters button.is-active {
  color: #fff;
  background: #367be3;
  border-color: #367be3;
  outline: none;
}

.dashboard-order-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.orders-archive-view[hidden] {
  display: none !important;
}

.account-profile-page .order-archive-card {
  display: grid;
  gap: 0;
  min-height: 226px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

.account-profile-page .order-archive-card[hidden] {
  display: none !important;
}

.order-archive-card > header {
  display: flex;
  min-width: 0;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 17px;
  border-bottom: 1px solid #dce4ee;
}

.order-archive-identity {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.order-archive-card > header strong {
  overflow: hidden;
  font: 600 16px/1.25 var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-archive-card > header small {
  color: #8190a4;
  font: 400 13px/1.25 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.order-archive-state {
  display: flex;
  min-width: 0;
  flex: 0 0 auto;
  gap: 18px;
  align-items: center;
}

.order-status {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font: 500 14px/1 var(--font-sans);
  border-radius: 7px;
  white-space: nowrap;
}

.order-status.is-new {
  color: #0877f9;
  background: #eaf3ff;
}

.order-status.is-in-progress {
  color: #aa7a00;
  background: #fff5cf;
}

.order-status.is-moderation {
  color: #7958c7;
  background: #f0ebff;
}

.order-status.is-failed {
  color: #d94155;
  background: #fff0f2;
}

.order-status.is-completed {
  color: #249b4f;
  background: #eaf8ef;
}

.order-archive-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 315px);
  grid-template-areas: "service payment";
  gap: 28px;
  padding: 20px;
}

.order-archive-service {
  display: flex;
  grid-area: service;
  min-width: 0;
  min-height: 116px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.order-archive-service dl,
.order-payment-summary dl {
  display: grid;
  width: 100%;
  gap: 10px;
  margin: 0;
}

.order-archive-service dl > div,
.order-payment-summary dl > div {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(126px, 0.9fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: baseline;
}

.order-archive-service dt,
.order-payment-summary dt {
  color: #8190a4;
  font: 400 14px/1.4 var(--font-sans);
}

.order-archive-service dd,
.order-payment-summary dd {
  min-width: 0;
  margin: 0;
  color: #171b23;
  font: 500 15px/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}

.order-archive-action {
  z-index: 1;
  grid-area: service;
  width: fit-content;
  align-self: end;
  justify-self: start;
  width: fit-content;
  min-height: 42px;
  padding: 0 17px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: none;
}

.order-payment-summary {
  display: grid;
  grid-area: payment;
  min-width: 0;
  align-content: start;
  gap: 13px;
  padding: 16px 18px;
  background: #f5f7fb;
  border-radius: 10px;
}

.order-payment-summary h3 {
  margin: 0;
  color: #171b23;
  font: 600 16px/1.3 var(--font-sans);
}

.order-payment-summary dl > div {
  grid-template-columns: 110px minmax(0, 1fr);
}

.order-payment-summary dt {
  white-space: nowrap;
}

.order-payment-summary dd {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}

.order-payment-summary dl > div:last-child dd {
  font-weight: 600;
}

.order-bonus-mark {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  color: #fff;
  font: 600 9px/1 var(--font-sans);
  font-style: normal;
  background: #42c968;
  border-radius: 50%;
}

.order-card-rating {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
}

.order-card-rating > span {
  color: #ffc20a;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.order-card-rating > span i {
  color: #d7dee7;
  font-style: normal;
}

.order-card-rating small {
  color: #171b23;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.orders-archive-empty {
  margin: 0;
  padding: 28px 20px;
  color: #718096;
  font-size: 15px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
}

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

.order-detail-view[hidden] {
  display: none;
}

.order-detail-view {
  display: grid;
  gap: 14px;
}

.order-detail-back {
  display: inline-flex;
  width: fit-content;
  gap: 7px;
  align-items: center;
  padding: 0;
  color: #0877f9;
  font: 500 13px/1.4 var(--font-sans);
  background: transparent;
  border: 0;
}

.order-detail-back .dashboard-icon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.order-detail-title {
  display: flex;
  gap: 20px;
  align-items: start;
  justify-content: space-between;
}

.order-detail-title small {
  color: #8794a6;
  font-size: 12px;
  line-height: 1.4;
}

.order-detail-title h2 {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 600;
}

.order-detail-title > button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  color: #0877f9;
  font: 500 13px/1.4 var(--font-sans);
  background: transparent;
  border: 0;
}

.order-detail-title > button .dashboard-icon {
  width: 15px;
  height: 15px;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(245px, .85fr);
  gap: 14px;
  align-items: start;
}

.order-detail-main,
.order-detail-aside {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.order-detail-card {
  min-width: 0;
  padding: 18px;
  background: #fff;
  border-radius: 7px;
}

.order-detail-card h3 {
  margin: 0 0 15px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.order-facts-card dl {
  display: grid;
  gap: 9px;
  margin: 0;
}

.order-facts-card dl > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
}

.order-facts-card dt,
.order-facts-card dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.order-facts-card dt {
  color: #718198;
}

.order-facts-card dd {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: #121212;
  font-weight: 500;
}

.order-facts-card dd .dashboard-icon {
  width: 15px;
  height: 15px;
  color: #0877f9;
}

.order-facts-card .order-detail-participants {
  display: grid;
  gap: 8px;
  align-items: stretch;
}

.order-detail-participants > span {
  display: grid;
  gap: 2px;
}

.order-detail-participants strong,
.order-detail-participants small {
  display: block;
}

.order-detail-participants small {
  color: #718198;
  font-size: 12px;
  font-weight: 400;
}

.order-task-card > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid #edf1f6;
}

.order-task-card strong,
.order-task-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.order-task-card strong {
  font-weight: 500;
}

.order-task-card p {
  color: #526071;
}

.order-upload-card {
  display: grid;
  gap: 13px;
}

.order-file-drop {
  display: grid;
  min-height: 52px;
  grid-template-columns: 20px auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  color: #0877f9;
  background: #edf5ff;
  border: 0;
  border-radius: 5px;
  text-align: left;
}

.order-file-drop span {
  font-size: 14px;
  font-weight: 500;
}

.order-file-drop small {
  color: #8794a6;
  font-size: 12px;
  line-height: 1.4;
}

.order-audio-file {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 24px;
  gap: 10px;
  align-items: center;
}

.order-audio-file > .dashboard-icon {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 7px;
  color: #0877f9;
  background: #edf5ff;
  border-radius: 50%;
}

.order-audio-file > div {
  display: grid;
  gap: 6px;
}

.order-audio-file strong {
  font-size: 13px;
  font-weight: 500;
}

.order-audio-file > div > span {
  display: block;
  height: 4px;
  overflow: hidden;
  background: #e6ebf2;
  border-radius: 2px;
}

.order-audio-file > div > span i {
  display: block;
  height: 100%;
  background: #0877f9;
}

.order-audio-file small {
  color: #8794a6;
  font-size: 12px;
}

.order-audio-file button {
  color: #a1adbd;
  background: transparent;
  border: 0;
}

.order-status-card {
  display: grid;
  gap: 9px;
}

.order-status-card .order-status {
  justify-self: start;
}

.order-status-card > small {
  color: #718198;
  font-size: 12px;
  line-height: 1.45;
}

.order-status-card > div {
  display: flex;
  align-items: end;
  justify-content: space-between;
  padding-top: 13px;
  margin-top: 4px;
  border-top: 1px solid #edf1f6;
}

.order-status-card > div span {
  color: #718198;
  font-size: 12px;
}

.order-status-card > div strong {
  font-size: 15px;
  font-weight: 600;
}

.order-client-card > div {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.order-client-card img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 5px;
}

.order-client-card > div span {
  display: grid;
  gap: 3px;
}

.order-client-card > div strong {
  font-size: 14px;
  font-weight: 600;
}

.order-client-card > div small {
  color: #8794a6;
  font-size: 12px;
  line-height: 1.35;
}

.order-client-card dl {
  display: grid;
  gap: 7px;
  margin: 14px 0;
}

.order-client-card dl > div {
  display: flex;
  justify-content: space-between;
}

.order-client-card dt,
.order-client-card dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.order-client-card dt {
  color: #718198;
}

.order-client-card dd {
  color: #121212;
  font-weight: 500;
}

.order-party-card > p {
  margin: 0 0 14px;
  color: #526071;
  font-size: 14px;
  line-height: 1.5;
}

.order-client-card > button {
  display: flex;
  width: 100%;
  min-height: 34px;
  gap: 7px;
  align-items: center;
  justify-content: center;
  color: #0877f9;
  font-size: 13px;
  background: #edf5ff;
  border: 0;
  border-radius: 4px;
}

.order-client-card > button .dashboard-icon {
  width: 14px;
  height: 14px;
}

.order-detail-primary {
  width: 100%;
}

.order-detail-actions {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.order-detail-actions:empty {
  display: none;
}

.order-detail-decline {
  color: #657185;
  font-size: 13px;
  background: transparent;
  border: 0;
}

.review-dialog-person {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.review-dialog-person img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 6px;
}

.review-dialog-person strong,
.review-dialog-person p {
  display: block;
  margin: 0;
}

.review-dialog-person strong {
  font-size: 14px;
  font-weight: 600;
}

.review-dialog-person p {
  margin-top: 4px;
  color: #657185;
  font-size: 11px;
}

.review-criteria {
  display: grid;
  gap: 10px;
  padding: 16px 0;
}

.review-criteria > div {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.review-criteria strong {
  font-size: 12px;
  font-weight: 500;
}

.review-criteria span {
  display: flex;
  gap: 2px;
}

.review-criteria button {
  padding: 0;
  color: #d8dfe8;
  font-size: 25px;
  line-height: 1;
  background: transparent;
  border: 0;
}

.review-criteria button.is-active {
  color: #ffc20a;
}

.review-anonymous {
  margin-top: 4px;
}

.customer-settings-page .dial-registration-row > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .orders-archive-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .order-archive-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-archive-service {
    min-height: 108px;
  }

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

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

@media (max-width: 620px) {
  .orders-archive-view {
    gap: 14px;
  }

  .orders-archive-view .dashboard-section-head h2 {
    font-size: 26px;
  }

  .orders-archive-search input {
    height: 48px;
    font-size: 15px;
  }

  .orders-archive-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .orders-archive-filters button {
    min-height: 40px;
    padding: 0 8px;
    font-size: 13px;
  }

  .dashboard-order-list {
    gap: 14px;
  }

  .order-archive-card > header {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
  }

  .order-archive-state {
    width: 100%;
    justify-content: space-between;
  }

  .order-card-rating > span {
    font-size: 18px;
  }

  .order-status {
    min-height: 34px;
    padding: 0 11px;
    font-size: 13px;
  }

  .order-archive-body {
    gap: 16px;
    padding: 16px;
  }

  .order-archive-service {
    min-height: 0;
    gap: 18px;
  }

  .order-archive-service dl > div,
  .order-payment-summary dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .order-archive-action {
    width: 100%;
  }

  .order-payment-summary {
    padding: 15px;
  }

  .order-payment-summary dd {
    justify-content: flex-start;
    white-space: normal;
  }

  .order-detail-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-task-card > div,
  .order-facts-card dl > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Dialector admin final layer */
.admin-page {
  background: #f6f8fb;
}

.admin-page .admin-sidebar {
  position: sticky;
  z-index: 40;
  top: var(--admin-header-height);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: auto;
  height: calc(100vh - var(--admin-header-height));
  padding: 14px 0;
  color: #334052;
  background: transparent;
  overflow-y: auto;
}

.admin-page .admin-navigation > p {
  margin-top: 10px;
  margin-bottom: 3px;
}

.admin-page .admin-navigation > button {
  min-height: 36px;
  padding-block: 6px;
}

.admin-page .admin-sidebar-footer {
  gap: 5px;
  padding-top: 10px;
}

.admin-page .admin-sidebar-footer > div {
  padding-block: 5px;
}

.admin-page .admin-sidebar-footer a {
  min-height: 36px;
  padding-block: 6px;
}

.admin-moderation-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.admin-segmented {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: #edf1f6;
  border-radius: 8px;
}

.admin-segmented button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  color: #526071;
  background: transparent;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  transition: color 160ms ease, background-color 160ms ease;
}

.admin-segmented button:hover {
  color: #111318;
}

.admin-segmented button.is-active {
  color: #0563d1;
  background: #fff;
}

.admin-segmented button b {
  min-width: 19px;
  padding: 2px 5px;
  background: #fff;
  border-radius: 999px;
  font-size: 10px;
}

.admin-segmented button.is-active b {
  color: #fff;
  background: #0877f9;
}

.admin-sla-hint,
.admin-risk-note,
.admin-version-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6f7c8c;
  font-size: 11px;
  white-space: nowrap;
}

.admin-sla-hint .admin-icon,
.admin-risk-note .admin-icon {
  width: 16px;
  height: 16px;
  color: #0877f9;
}

.admin-moderation-list {
  display: grid;
  gap: 10px;
}

.admin-moderation-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 112px;
  padding: 17px 18px;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  transition: border-color 160ms ease, transform 160ms ease;
}

.admin-moderation-task:hover {
  border-color: #c8d4e2;
  transform: translateY(-1px);
}

.admin-moderation-main {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  min-width: 0;
}

.admin-task-icon {
  width: 42px;
  height: 42px;
  color: #0563d1;
  background: #e8f2ff;
  border-radius: 8px;
}

.admin-task-icon--demo { color: #5d42bb; background: #eee9ff; }
.admin-task-icon--review { color: #b3324d; background: #ffe5eb; }
.admin-task-icon--profile { color: #087454; background: #dff7ef; }

.admin-moderation-main > div {
  min-width: 0;
}

.admin-task-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6f7c8c;
  font-size: 10px;
}

.admin-task-meta b {
  color: #0563d1;
  font-size: 10px;
}

.admin-task-meta i {
  padding: 3px 6px;
  color: #b3324d;
  background: #ffe5eb;
  border-radius: 999px;
  font-style: normal;
  font-weight: 600;
}

.admin-task-meta small {
  margin-left: auto;
}

.admin-moderation-main h3 {
  margin: 5px 0 2px;
  font-size: 14px;
  font-weight: 600;
}

.admin-moderation-main p {
  margin: 0;
  color: #526071;
  font-size: 12px;
}

.admin-task-author {
  display: block;
  margin-top: 5px;
  color: #6f7c8c;
  font-size: 11px;
}

.admin-task-actions,
.admin-inline-actions,
.admin-action-stack {
  display: flex;
  align-items: center;
  gap: 7px;
}

.admin-task-actions {
  flex: 0 0 auto;
}

.admin-small-button {
  min-height: 30px;
  padding: 0 9px;
  color: #526071;
  background: #fff;
  border: 1px solid #dfe5ee;
  font-size: 11px;
}

.admin-small-button:hover {
  color: #0563d1;
  border-color: #9bc7ff;
}

.admin-small-button--primary {
  color: #fff;
  background: #0877f9;
  border-color: #0877f9;
}

.admin-small-button--primary:hover {
  color: #fff;
  background: #0563d1;
}

.admin-finance-head {
  align-items: center;
}

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

.admin-role-overview article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  min-height: 134px;
  padding: 16px;
  background: #fff;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

.admin-role-icon {
  width: 40px;
  height: 40px;
  color: #0563d1;
  background: #e8f2ff;
  border-radius: 8px;
}

.admin-role-icon--moderator { color: #5d42bb; background: #eee9ff; }
.admin-role-icon--talent { color: #087454; background: #dff7ef; }
.admin-role-icon--customer { color: #9a6100; background: #fff0cf; }

.admin-role-overview h3 {
  margin: 1px 0 4px;
  font-size: 13px;
  font-weight: 600;
}

.admin-role-overview p {
  margin: 0;
  color: #526071;
  font-size: 11px;
  line-height: 1.4;
}

.admin-role-overview small {
  display: block;
  margin-top: 8px;
  color: #6f7c8c;
  font-size: 10px;
}

.admin-access-matrix {
  overflow: hidden;
}

.admin-access-matrix .admin-data-table th:not(:first-child),
.admin-access-matrix .admin-data-table td:not(:first-child) {
  text-align: center;
}

.admin-permission {
  display: inline-grid;
  width: 25px;
  height: 25px;
  color: #9aa5b3;
  place-items: center;
}

.admin-permission.is-allowed {
  color: #19a781;
}

.admin-permission .admin-icon {
  width: 18px;
  height: 18px;
}

.admin-audit-surface {
  padding: 8px 20px;
}

.admin-audit-timeline {
  display: grid;
  max-width: 780px;
}

.admin-audit-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
}

.admin-audit-timeline article:not(:last-child)::before {
  position: absolute;
  top: 47px;
  bottom: -5px;
  left: 18px;
  width: 1px;
  background: #dfe5ee;
  content: "";
}

.admin-audit-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  color: #0563d1;
  background: #e8f2ff;
  border-radius: 50%;
}

.admin-audit-icon--approve { color: #087454; background: #dff7ef; }
.admin-audit-icon--warning,
.admin-audit-icon--return { color: #b3324d; background: #ffe5eb; }
.admin-audit-icon--role { color: #5d42bb; background: #eee9ff; }

.admin-audit-icon .admin-icon {
  width: 16px;
  height: 16px;
}

.admin-audit-timeline article > div {
  padding-top: 1px;
}

.admin-audit-timeline article p {
  margin: 3px 0;
  color: #526071;
  font-size: 12px;
}

.admin-audit-timeline article small {
  color: #6f7c8c;
  font-size: 10px;
}

.admin-settings-form {
  display: grid;
  gap: 12px;
}

.admin-settings-form > section {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.2fr);
  gap: 28px;
  padding: 22px;
}

.admin-settings-copy h2 {
  margin: 0 0 6px;
  font-size: 16px;
}

.admin-settings-copy p {
  max-width: 360px;
  margin: 0;
  color: #6f7c8c;
  font-size: 12px;
}

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

.admin-toggle-list {
  display: grid;
}

.admin-toggle-list > label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  border-bottom: 1px solid #edf1f6;
  cursor: pointer;
}

.admin-toggle-list > label:last-child {
  border-bottom: 0;
}

.admin-toggle-list > label > span {
  display: grid;
  gap: 3px;
}

.admin-toggle-list small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-toggle-list input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-toggle-list label > i {
  position: relative;
  width: 38px;
  height: 22px;
  background: #c7cfda;
  border-radius: 999px;
  transition: background-color 180ms ease;
}

.admin-toggle-list label > i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  content: "";
  transition: transform 180ms ease;
}

.admin-toggle-list input:checked + i {
  background: #0877f9;
}

.admin-toggle-list input:checked + i::after {
  transform: translateX(16px);
}

.admin-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 4px;
}

.admin-form-footer span {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-overlay,
.admin-dialog-layer,
.admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
}

.admin-overlay {
  z-index: 90;
  background: rgba(17, 19, 24, 0.28);
  backdrop-filter: blur(2px);
}

.admin-overlay[hidden],
.admin-dialog-layer[hidden],
.admin-sidebar-backdrop[hidden] {
  display: none;
}

.admin-drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  width: min(520px, calc(100vw - 24px));
  height: 100vh;
  color: #111318;
  background: #fff;
  box-shadow: -18px 0 60px rgba(17, 19, 24, 0.14);
  transform: translateX(105%);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}

.admin-drawer.is-open {
  transform: translateX(0);
}

.admin-drawer-head {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  background: #fff;
  border-bottom: 1px solid #dfe5ee;
}

.admin-drawer-head span {
  color: #0877f9;
  font-size: 11px;
  font-weight: 600;
}

.admin-drawer-head h2 {
  margin: 5px 0 2px;
  font-size: 21px;
  font-weight: 600;
}

.admin-drawer-head p {
  margin: 0;
  color: #6f7c8c;
  font-size: 12px;
}

.admin-drawer-head > button,
.admin-dialog-head > button {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #526071;
  background: #f0f4f8;
  border: 0;
  border-radius: 7px;
  place-items: center;
}

.admin-drawer-body {
  display: grid;
  gap: 20px;
  padding: 22px 24px 34px;
}

.admin-drawer-profile {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.admin-drawer-profile > div {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.admin-drawer-profile > div > strong {
  font-size: 15px;
}

.admin-drawer-profile > div > span:not(.admin-status) {
  color: #6f7c8c;
  font-size: 12px;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: #dfe5ee;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
}

.admin-detail-field {
  display: grid;
  gap: 4px;
  min-height: 70px;
  padding: 13px;
  background: #f9fafc;
}

.admin-detail-field span {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-detail-field strong {
  font-size: 13px;
}

.admin-drawer-form,
.admin-dialog-form {
  display: grid;
  gap: 14px;
}

.admin-content-editor {
  gap: 24px;
}

.admin-content-editor-section {
  display: grid;
  gap: 14px;
}

.admin-content-editor-section > h3 {
  padding-bottom: 10px;
  border-bottom: 1px solid #e7ebf1;
  font-size: 15px;
}

.admin-content-publication {
  padding: 16px;
  background: #f7f9fc;
  border-radius: 8px;
}

.admin-content-publication input[readonly] {
  color: #526071;
  background: #edf1f6;
}

.admin-drawer-form h3,
.admin-drawer-section h3,
.admin-checklist h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

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

.admin-input-suffix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  border: 1px solid #dfe5ee;
  border-radius: 7px;
  overflow: hidden;
}

.admin-input-suffix:focus-within {
  border-color: #0877f9;
}

.admin-input-suffix input {
  border: 0;
  border-radius: 0;
}

.admin-input-suffix b {
  color: #526071;
  font-size: 12px;
}

.admin-drawer-actions,
.admin-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 5px;
}

.admin-drawer-actions--spread {
  justify-content: space-between;
}

.admin-drawer-actions--spread > span {
  display: flex;
  gap: 8px;
}

.admin-permission-note {
  padding: 11px 12px;
  color: #526071;
  background: #f0f4f8;
  border-radius: 7px;
  font-size: 11px;
}

.admin-drawer-section {
  display: grid;
  gap: 11px;
  padding-top: 2px;
}

.admin-drawer-section > p {
  margin: 0;
  color: #526071;
  font-size: 12px;
}

.admin-availability-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 0 12px;
  background: #f6f8fb;
  border-radius: 7px;
  font-size: 12px;
}

.admin-action-stack {
  align-items: stretch;
  flex-direction: column;
}

.admin-order-drawer-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-order-drawer-summary > div {
  display: grid;
  gap: 4px;
  min-height: 92px;
  padding: 14px;
  background: #f6f8fb;
  border-radius: 8px;
}

.admin-order-drawer-summary span,
.admin-order-drawer-summary small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-order-drawer-summary strong {
  color: #0877f9;
  font-size: 18px;
}

.admin-file-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 8px;
  background: #f6f8fb;
  border-radius: 7px;
}

.admin-file-row > span,
.admin-file-row > button {
  display: grid;
  width: 34px;
  height: 34px;
  color: #0877f9;
  background: #e8f2ff;
  border: 0;
  border-radius: 7px;
  place-items: center;
}

.admin-file-row > div {
  display: grid;
  gap: 2px;
}

.admin-file-row small {
  color: #6f7c8c;
  font-size: 10px;
}

.admin-moderation-preview {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  background: #f6f8fb;
  border-radius: 8px;
}

.admin-moderation-preview p {
  margin: 5px 0 0;
  color: #526071;
  font-size: 12px;
}

.admin-checklist {
  display: grid;
  gap: 10px;
}

.admin-checklist label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #334052;
  font-size: 12px;
}

.admin-checklist input {
  width: 16px;
  height: 16px;
  accent-color: #0877f9;
}

.admin-dialog-layer {
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 24px;
}

.admin-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 19, 24, 0.38);
  backdrop-filter: blur(3px);
}

.admin-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgba(17, 19, 24, 0.18);
  animation: adminDialogIn 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.admin-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 21px 22px 16px;
  border-bottom: 1px solid #dfe5ee;
}

.admin-dialog-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.admin-dialog-head p {
  margin: 5px 0 0;
  color: #6f7c8c;
  font-size: 12px;
}

.admin-dialog-body {
  padding: 20px 22px 22px;
}

.admin-toast-region {
  position: fixed;
  z-index: 130;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: min(360px, calc(100vw - 32px));
  gap: 8px;
}

.admin-toast {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 10px 10px 10px 12px;
  color: #111318;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 34px rgba(17, 19, 24, 0.16);
  animation: adminToastIn 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.admin-toast.is-leaving {
  animation: adminToastOut 180ms ease both;
}

.admin-toast > span {
  display: grid;
  width: 34px;
  height: 34px;
  color: #087454;
  background: #dff7ef;
  border-radius: 7px;
  place-items: center;
}

.admin-toast--warning > span { color: #8b5600; background: #fff0cf; }
.admin-toast--danger > span { color: #b3324d; background: #ffe5eb; }

.admin-toast > div {
  display: grid;
  gap: 3px;
}

.admin-toast small {
  color: #6f7c8c;
  font-size: 11px;
}

.admin-toast > button {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #6f7c8c;
  background: transparent;
  border: 0;
  place-items: center;
}

.admin-toast > button .admin-icon {
  width: 16px;
  height: 16px;
}

@keyframes adminDialogIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes adminToastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes adminToastOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(6px); }
}

@media (max-width: 1120px) {
  .admin-sync-state {
    display: none;
  }

  .admin-product-label {
    display: none;
  }

  .admin-global-search {
    margin-left: 0;
  }

  .admin-workspace {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 18px;
  }

  .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-role-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .admin-header-inner,
  .admin-workspace {
    width: min(100% - 32px, 1200px);
  }

  .admin-mobile-menu {
    display: grid;
  }

  .admin-logo {
    width: 142px;
  }

  .admin-logo img {
    width: 142px;
  }

  .admin-global-search {
    max-width: none;
  }

  .admin-role-copy,
  .admin-role-toggle > .admin-icon {
    display: none;
  }

  .admin-role-toggle {
    display: grid;
    grid-template-columns: 36px;
    min-width: 42px;
    width: 42px;
    padding: 3px;
  }

  .admin-workspace {
    display: block;
  }

  .admin-page .admin-sidebar {
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    width: min(286px, calc(100vw - 52px));
    height: 100vh;
    padding: 24px 16px;
    background: #fff;
    box-shadow: 18px 0 50px rgba(17, 19, 24, 0.16);
    transform: translateX(-105%);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .admin-page .admin-sidebar.is-open {
    transform: translateX(0);
  }

  .admin-sidebar-backdrop {
    z-index: 100;
    background: rgba(17, 19, 24, 0.28);
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .admin-sidebar-backdrop.is-visible {
    opacity: 1;
  }

  .admin-content {
    padding-top: 24px;
  }

  .admin-dashboard-grid,
  .admin-dashboard-grid--lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-settings-form > section {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

@media (max-width: 680px) {
  .admin-page {
    --admin-header-height: 64px;
  }

  .admin-header-inner,
  .admin-workspace {
    width: calc(100% - 24px);
  }

  .admin-header-inner {
    gap: 6px;
  }

  .admin-logo {
    width: 124px;
  }

  .admin-logo img {
    width: 124px;
  }

  .admin-global-search {
    display: none;
  }

  .admin-header-actions {
    gap: 2px;
  }

  .admin-page-header {
    display: grid;
    align-items: start;
    min-height: 0;
    margin-bottom: 18px;
  }

  .admin-page-header h1 {
    font-size: 24px;
  }

  .admin-page-actions {
    width: 100%;
    overflow-x: auto;
  }

  .admin-metric-grid,
  .admin-order-summary,
  .admin-finance-summary,
  .admin-role-overview,
  .admin-settings-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-metric {
    min-height: 102px;
  }

  .admin-surface-head,
  .admin-list-toolbar,
  .admin-moderation-toolbar,
  .admin-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-list-toolbar {
    display: grid;
  }

  .admin-search-field {
    max-width: none;
  }

  .admin-filter-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-filter-group select {
    min-width: 0;
  }

  .admin-moderation-toolbar {
    display: grid;
  }

  .admin-segmented {
    width: 100%;
    overflow-x: auto;
  }

  .admin-moderation-task {
    display: grid;
  }

  .admin-task-actions {
    justify-content: flex-end;
  }

  .admin-task-actions .admin-button--quiet {
    margin-right: auto;
  }

  .admin-attention-row {
    grid-template-columns: 38px minmax(0, 1fr) 16px;
  }

  .admin-attention-time {
    display: none;
  }

  .admin-chart-legend {
    align-self: flex-start;
  }

  .admin-table-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-notifications,
  .admin-role-menu {
    position: fixed;
    top: 70px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .admin-detail-grid,
  .admin-form-grid,
  .admin-order-drawer-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-drawer {
    width: 100vw;
  }

  .admin-drawer-head,
  .admin-drawer-body {
    padding-right: 18px;
    padding-left: 18px;
  }

  .admin-dialog-layer {
    padding: 12px;
  }

  .admin-dialog {
    max-height: calc(100vh - 24px);
  }

  .admin-drawer-actions--spread,
  .admin-drawer-actions--spread > span {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-drawer-actions--spread > .admin-button {
    order: 2;
  }

  .admin-toast-region {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
}

body.admin-overlay-open,
body.admin-dialog-open,
body.admin-sidebar-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .admin-page *,
  .admin-page *::before,
  .admin-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Admin console clarity pass, 2026-07-18 */
.admin-page,
.admin-page button,
.admin-page input,
.admin-page select,
.admin-page textarea {
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
}

.admin-page :where(h1, h2, h3, h4, strong, b, th, .admin-button, .admin-small-button) {
  font-weight: 600;
}

.admin-page .admin-button,
.admin-page .admin-small-button {
  font-size: 14px;
}

.admin-page .admin-button .admin-icon,
.admin-page .admin-text-button .admin-icon {
  display: none;
}

.admin-page .admin-button,
.admin-page .admin-text-button {
  gap: 0;
}

.admin-page .admin-metric {
  min-height: 128px;
  padding: 20px;
}

.admin-page .admin-metric::before {
  display: none;
}

.admin-page .admin-metric > span {
  font-size: 14px;
  font-weight: 500;
}

.admin-page .admin-metric strong {
  font-size: 29px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-page .admin-metric small,
.admin-page .admin-surface-head p {
  font-size: 13px;
}

.admin-page .admin-data-table th {
  font-size: 13px;
  font-weight: 500;
}

.admin-page .admin-data-table td {
  font-size: 14px;
}

.admin-page .admin-data-table :where(strong, b),
.admin-page .admin-order-service strong {
  font-weight: 600;
}

.admin-page .admin-status {
  display: inline-grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  vertical-align: middle;
  place-items: center;
}

.admin-page .admin-status-symbol {
  box-sizing: border-box;
  flex-basis: 30px;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.admin-page .admin-status-symbol .admin-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.admin-page .admin-status--success .admin-status-symbol {
  color: #0b8f69;
  background: #e1f5ed;
}

.admin-page .admin-status--warning .admin-status-symbol {
  color: #9b6100;
  background: #fff0cf;
}

.admin-page .admin-status--danger .admin-status-symbol {
  color: #c13d58;
  background: #ffe5eb;
}

.admin-page .admin-status--info .admin-status-symbol {
  color: #0877f9;
  background: #e7f1ff;
}

.admin-page .admin-status--neutral .admin-status-symbol {
  color: #526071;
  background: #edf1f6;
}

.admin-page .admin-status--state-new .admin-status-symbol {
  color: #7359c8;
  background: #efebfb;
}

.admin-page .admin-status--state-recording .admin-status-symbol {
  color: #0877f9;
  background: #e7f1ff;
}

.admin-page .admin-status--state-moderation .admin-status-symbol {
  color: #8b5600;
  background: #fff0cf;
}

.admin-page .admin-status--state-revision .admin-status-symbol {
  color: #9f4d18;
  background: #ffeadc;
}

.admin-page .admin-status--state-dispute .admin-status-symbol,
.admin-page .admin-status--state-blocked .admin-status-symbol,
.admin-page .admin-status--state-returned .admin-status-symbol {
  color: #b3324d;
  background: #ffe5eb;
}

.admin-page .admin-status--state-cancelled .admin-status-symbol,
.admin-page .admin-status--state-draft .admin-status-symbol,
.admin-page .admin-status--state-expired .admin-status-symbol,
.admin-page .admin-status--state-offline .admin-status-symbol {
  color: #526071;
  background: #edf1f6;
}

.admin-page .admin-data-table tbody tr[data-open-user],
.admin-page .admin-data-table tbody tr[data-open-talent],
.admin-page .admin-data-table tbody tr[data-open-order],
.admin-page .admin-data-table tbody tr[data-open-service],
.admin-page .admin-data-table tbody tr[data-open-content],
.admin-page .admin-data-table tbody tr[data-open-promo],
.admin-page [data-admin-clickable-row] {
  cursor: pointer;
}

.admin-page .admin-data-table tbody tr[data-open-user]:hover,
.admin-page .admin-data-table tbody tr[data-open-talent]:hover,
.admin-page .admin-data-table tbody tr[data-open-order]:hover,
.admin-page .admin-data-table tbody tr[data-open-service]:hover,
.admin-page .admin-data-table tbody tr[data-open-content]:hover,
.admin-page .admin-data-table tbody tr[data-open-promo]:hover {
  background: #f3f7fc;
}

.admin-page .admin-data-table tbody tr:focus-within {
  background: #f3f7fc;
  outline: 2px solid rgba(8, 119, 249, 0.32);
  outline-offset: -2px;
}

.admin-page .admin-orders-table {
  min-width: 1040px;
}

.admin-page .admin-moderation-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 104px;
  padding: 18px 20px;
  background: #fff;
  transition-property: background-color, border-color;
  transition-duration: 160ms;
  transition-timing-function: ease-out;
}

.admin-page .admin-moderation-task:hover {
  background: #f9fbfe;
  border-color: #c8d4e2;
  transform: none;
}

.admin-page .admin-moderation-task:focus-visible,
.admin-page .admin-media-grid article:focus-visible {
  outline: 2px solid rgba(8, 119, 249, 0.42);
  outline-offset: 2px;
}

.admin-page .admin-moderation-main {
  display: block;
}

.admin-page .admin-moderation-main > div {
  width: 100%;
}

.admin-page .admin-task-meta {
  min-height: 20px;
  font-size: 12px;
}

.admin-page .admin-task-meta small {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.admin-page .admin-task-meta i {
  padding: 3px 7px;
  font-size: 11px;
}

.admin-page .admin-moderation-main h3 {
  margin: 4px 0;
  font-size: 15px;
  font-weight: 600;
}

.admin-page .admin-moderation-main p {
  font-size: 13px;
}

.admin-page .admin-task-author {
  margin-top: 6px;
  font-size: 12px;
}

.admin-page .admin-task-actions {
  gap: 8px;
}

.admin-page .admin-task-actions .admin-button {
  min-height: 40px;
}

.admin-page .admin-moderation-preview {
  grid-template-columns: minmax(0, 1fr);
}

.admin-page .admin-media-grid article {
  grid-template-columns: 84px minmax(0, 1fr);
}

.admin-page .admin-media-grid article span,
.admin-page .admin-media-grid article small {
  font-size: 12px;
}

@media (max-width: 700px) {
  .admin-page .admin-moderation-task {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .admin-task-actions {
    justify-content: flex-start;
  }
}

/* Managed contacts and maintenance surfaces */
.contacts-page-shell {
  width: min(1280px, calc(100% - 48px));
  min-height: 680px;
  margin: 0 auto;
  padding: 52px 0 96px;
}

.contacts-intro {
  max-width: 760px;
  margin-bottom: 48px;
}

.contacts-intro > span,
.contacts-form > div:first-child > span {
  color: #0877f9;
  font-size: 13px;
  font-weight: 600;
}

.contacts-intro h1 {
  margin: 12px 0 16px;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

.contacts-intro p {
  max-width: 680px;
  color: #526071;
  font-size: 18px;
  line-height: 1.6;
}

.contacts-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
  gap: 72px;
  align-items: start;
}

.contacts-details {
  display: grid;
}

.contacts-primary-link {
  display: grid;
  gap: 8px;
  padding: 22px 0;
  color: #121212;
  border-bottom: 1px solid #e5eaf0;
  text-decoration: none;
  transition: color 180ms ease, padding-left 180ms ease;
}

.contacts-primary-link:hover,
.contacts-primary-link:focus-visible {
  padding-left: 8px;
  color: #0877f9;
  outline: none;
}

.contacts-primary-link small,
.contacts-meta-row small {
  color: #748092;
  font-size: 13px;
}

.contacts-primary-link strong {
  font-size: 24px;
  font-weight: 500;
}

.contacts-meta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 28px 0;
}

.contacts-meta-row span {
  display: grid;
  gap: 8px;
}

.contacts-meta-row strong {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.contacts-details > p {
  max-width: 58ch;
  margin: 12px 0 24px;
  color: #5f6c7d;
  font-size: 15px;
  line-height: 1.65;
}

.contacts-account-link {
  width: fit-content;
}

.contacts-form {
  display: grid;
  gap: 20px;
  padding: 34px;
  background: #f5f8fc;
  border-radius: 8px;
}

.contacts-form h2 {
  margin: 8px 0;
  font-size: 28px;
  font-weight: 600;
}

.contacts-form > div:first-child p {
  color: #687588;
  font-size: 14px;
  line-height: 1.55;
}

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

.contacts-form label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.contacts-form label > span {
  color: #435064;
  font-size: 13px;
  font-weight: 500;
}

.contacts-form input,
.contacts-form select,
.contacts-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  color: #121212;
  font: inherit;
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 6px;
  outline: 0;
  transition: border-color 160ms ease;
}

.contacts-form textarea {
  min-height: 132px;
  resize: vertical;
}

.contacts-form input:focus,
.contacts-form select:focus,
.contacts-form textarea:focus {
  border-color: #8dbaf2;
}

.contacts-form-actions {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.contacts-form-actions p {
  margin-right: auto;
  color: #18794e;
  font-size: 13px;
  line-height: 1.4;
}

.maintenance-screen {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #121212;
  background: #f7f9fc;
}

.maintenance-screen-inner {
  display: grid;
  width: min(660px, 100%);
  justify-items: center;
  text-align: center;
}

.maintenance-screen-inner > img {
  width: 190px;
  height: auto;
  margin-bottom: 56px;
}

.maintenance-screen-inner > span {
  color: #0877f9;
  font-size: 14px;
  font-weight: 600;
}

.maintenance-screen-inner h1 {
  margin: 12px 0 16px;
  font-size: clamp(42px, 7vw, 72px);
  font-weight: 600;
  line-height: 1;
}

.maintenance-screen-inner > p {
  max-width: 52ch;
  color: #617084;
  font-size: 17px;
  line-height: 1.6;
}

.maintenance-countdown {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 34px 0;
}

.maintenance-countdown span {
  display: grid;
  min-width: 78px;
  gap: 4px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e0e6ee;
  border-radius: 8px;
}

.maintenance-countdown b {
  font-size: 28px;
  font-weight: 500;
}

.maintenance-countdown small,
.maintenance-screen-inner > small {
  color: #748092;
}

.maintenance-screen-inner > small a {
  color: #0877f9;
}

@media (max-width: 820px) {
  .contacts-page-shell {
    width: min(100% - 32px, 680px);
    padding: 34px 0 72px;
  }

  .contacts-layout,
  .contacts-form-grid,
  .contacts-meta-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .contacts-layout {
    gap: 40px;
  }

  .contacts-form {
    padding: 24px 18px;
  }

  .contacts-form-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Dialector admin visual system, 2026-07-20. Public pages are intentionally untouched. */
.admin-page {
  --admin-header-height: 70px;
  --admin-sidebar-width: 212px;
  --admin-shell-width: 1360px;
  --admin-ink: #172033;
  --admin-ink-soft: #334155;
  --admin-muted: #667386;
  --admin-muted-light: #7d8998;
  --admin-border: #dce4ed;
  --admin-border-soft: #e9eef4;
  --admin-surface: #ffffff;
  --admin-surface-soft: #f7f9fc;
  --admin-canvas: #f3f6fa;
  color: var(--admin-ink);
  background: var(--admin-canvas);
  font-size: 14px;
  line-height: 1.5;
}

.admin-page,
.admin-page button,
.admin-page input,
.admin-page select,
.admin-page textarea {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
  letter-spacing: 0;
}

.admin-page :where(h1, h2, h3, h4) {
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.admin-page :where(.admin-money, .admin-metric strong, .admin-order-summary strong, .admin-finance-summary strong, .admin-task-meta, .admin-data-table td, .admin-table-footer) {
  font-variant-numeric: tabular-nums;
}

.admin-page .admin-header {
  height: var(--admin-header-height);
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--admin-border);
  box-shadow: 0 1px 0 rgba(23, 32, 51, 0.02);
}

.admin-page .admin-header-inner,
.admin-page .admin-workspace {
  width: min(var(--admin-shell-width), calc(100% - 40px));
}

.admin-page .admin-header-inner {
  gap: 12px;
}

.admin-page .admin-logo,
.admin-page .admin-logo img {
  width: 154px;
}

.admin-page .admin-logo {
  height: 40px;
}

.admin-page .admin-product-label {
  padding: 5px 8px;
  color: #536174;
  background: #edf2f7;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
}

.admin-page .admin-global-search {
  flex-basis: 390px;
  max-width: 480px;
  height: 40px;
  margin-left: 6px;
  color: var(--admin-muted);
  background: var(--admin-surface-soft);
  border-color: var(--admin-border);
  border-radius: 7px;
}

.admin-page .admin-global-search:focus-within {
  background: var(--admin-surface);
  border-color: #75aff7;
}

.admin-page .admin-global-search input {
  padding-left: 13px;
  color: var(--admin-ink);
  font-size: 14px;
}

.admin-page .admin-global-search > button {
  flex-basis: 40px;
  width: 40px;
  height: 38px;
}

.admin-page .admin-header-actions {
  gap: 8px;
}

.admin-page .admin-sync-state,
.admin-page .admin-live-label {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-icon-button {
  width: 40px;
  height: 40px;
  color: var(--admin-ink-soft);
}

.admin-page .admin-notification-button .admin-icon {
  width: 21px;
  height: 21px;
}

.admin-page .admin-notification-button b {
  top: 0;
  right: -1px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
}

.admin-page .admin-role-toggle {
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  min-width: 168px;
  min-height: 44px;
  gap: 8px;
  padding: 4px 6px;
}

.admin-page .admin-role-copy small {
  color: var(--admin-muted-light);
  font-size: 11px;
}

.admin-page .admin-role-copy strong {
  color: var(--admin-ink);
  font-size: 13px;
  font-weight: 600;
}

.admin-page .admin-workspace {
  grid-template-columns: var(--admin-sidebar-width) minmax(0, 1fr);
  gap: 24px;
}

.admin-page .admin-sidebar {
  gap: 10px;
  padding: 18px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.admin-page .admin-sidebar:hover {
  scrollbar-color: #cbd5e1 transparent;
}

.admin-page .admin-sidebar::-webkit-scrollbar {
  width: 6px;
}

.admin-page .admin-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

.admin-page .admin-sidebar:hover::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

.admin-page .admin-navigation {
  gap: 2px;
}

.admin-page .admin-navigation > p {
  margin: 14px 10px 5px;
  color: var(--admin-muted-light);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.admin-page .admin-navigation > p:first-child {
  margin-top: 0;
}

.admin-page .admin-navigation > button {
  grid-template-columns: 21px minmax(0, 1fr) auto;
  gap: 9px;
  min-height: 38px;
  padding: 7px 10px;
  color: #445165;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
}

.admin-page .admin-navigation > button:hover {
  color: var(--admin-ink);
  background: #e9eef5;
}

.admin-page .admin-navigation > button.is-active {
  color: #075fca;
  background: #e5f0ff;
  font-weight: 600;
}

.admin-page .admin-navigation > button:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(8, 119, 249, 0.36);
}

.admin-page .admin-navigation > button .admin-icon {
  width: 18px;
  height: 18px;
}

.admin-page .admin-navigation > button b {
  min-width: 21px;
  height: 21px;
  color: #59677a;
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--admin-border);
  font-size: 10px;
}

.admin-page .admin-sidebar-footer {
  gap: 4px;
  padding-top: 12px;
  border-color: var(--admin-border);
}

.admin-page .admin-sidebar-footer > div,
.admin-page .admin-sidebar-footer a {
  min-height: 38px;
  padding: 7px 10px;
}

.admin-page .admin-sidebar-footer small {
  color: var(--admin-muted-light);
  font-size: 11px;
}

.admin-page .admin-content {
  padding: 22px 0 52px;
}

.admin-page .admin-page-header {
  min-height: 74px;
  margin-bottom: 18px;
}

.admin-page .admin-breadcrumbs {
  margin-bottom: 6px;
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-breadcrumbs strong {
  color: var(--admin-ink-soft);
}

.admin-page .admin-page-header h1 {
  color: var(--admin-ink);
  font-size: 29px;
  font-weight: 600;
  line-height: 1.2;
}

.admin-page .admin-page-header p {
  margin-top: 5px;
  color: var(--admin-muted);
  font-size: 14px;
}

.admin-page .admin-button,
.admin-page .admin-small-button,
.admin-page .admin-text-button,
.admin-page .admin-row-action {
  border-radius: 6px;
  font-weight: 600;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

.admin-page .admin-button {
  min-height: 38px;
  padding: 0 13px;
  font-size: 13px;
}

.admin-page .admin-button--secondary {
  color: #3e4b5f;
  border-color: var(--admin-border);
}

.admin-page .admin-button--secondary:hover {
  color: #075fca;
  background: #eef5ff;
  border-color: #b8d5fa;
}

.admin-page .admin-surface {
  background: var(--admin-surface);
  border-color: var(--admin-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.025);
}

.admin-page .admin-surface-head {
  align-items: center;
  padding: 17px 20px 14px;
}

.admin-page .admin-surface-head h2 {
  color: var(--admin-ink);
  font-size: 17px;
  line-height: 1.3;
}

.admin-page .admin-surface-head p {
  margin-top: 3px;
  color: var(--admin-muted);
  font-size: 13px;
}

.admin-page .admin-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--admin-border);
  border: 1px solid var(--admin-border);
  border-radius: 8px;
}

.admin-page .admin-metric {
  min-height: 110px;
  gap: 5px;
  padding: 17px 19px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.admin-page .admin-metric > span {
  color: #526075;
  font-size: 13px;
  font-weight: 500;
}

.admin-page .admin-metric strong {
  margin-top: 0;
  color: var(--admin-ink);
  font-size: 27px;
  font-weight: 600;
}

.admin-page .admin-metric small {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-dashboard-grid {
  gap: 14px;
  margin-bottom: 14px;
}

.admin-page .admin-dashboard-grid--lower {
  grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
}

.admin-page .admin-attention-list,
.admin-page .admin-compact-order-list {
  padding: 0 12px 11px;
}

.admin-page .admin-attention-row {
  min-height: 60px;
  padding: 7px 9px;
}

.admin-page .admin-attention-row strong,
.admin-page .admin-compact-order-list strong {
  color: var(--admin-ink);
  font-size: 13px;
}

.admin-page .admin-attention-row small,
.admin-page .admin-attention-time,
.admin-page .admin-compact-order-list small {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-health-list {
  padding: 0 18px 12px;
}

.admin-page .admin-health-list > div {
  min-height: 48px;
}

.admin-page .admin-health-list > div > span {
  color: #526075;
}

.admin-page .admin-health-list > div > strong {
  color: var(--admin-ink);
  font-size: 12px;
}

.admin-page .admin-chart-head {
  gap: 11px;
  padding-bottom: 8px;
}

.admin-page .admin-chart-periods,
.admin-page .admin-content-tabs,
.admin-page .admin-segmented {
  background: #edf2f7;
  border-radius: 7px;
}

.admin-page .admin-chart-periods button,
.admin-page .admin-content-tabs button,
.admin-page .admin-segmented button {
  min-height: 34px;
  color: #556277;
  border-radius: 5px;
  font-size: 13px;
}

.admin-page .admin-chart-periods button.is-active,
.admin-page .admin-content-tabs button.is-active,
.admin-page .admin-segmented button.is-active {
  color: #075fca;
  background: #fff;
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.06);
}

.admin-page .admin-line-chart-wrap {
  padding: 0 16px 14px;
}

.admin-page .admin-compact-order-list > button {
  min-height: 58px;
  padding: 8px 9px;
}

.admin-page .admin-list-toolbar {
  align-items: center;
  padding: 14px 16px;
  border-color: var(--admin-border);
}

.admin-page .admin-search-field {
  max-width: 440px;
  height: 40px;
  border-color: var(--admin-border);
}

.admin-page .admin-search-field:focus-within,
.admin-page .admin-filter-group select:focus {
  border-color: #75aff7;
  box-shadow: none;
}

.admin-page .admin-filter-group label > span,
.admin-page .admin-drawer-form label > span,
.admin-page .admin-dialog-form label > span,
.admin-page .admin-settings-fields label > span {
  color: #536174;
  font-size: 12px;
  font-weight: 600;
}

.admin-page .admin-filter-group select,
.admin-page .admin-drawer-form input,
.admin-page .admin-drawer-form select,
.admin-page .admin-drawer-form textarea,
.admin-page .admin-dialog-form input,
.admin-page .admin-dialog-form select,
.admin-page .admin-dialog-form textarea,
.admin-page .admin-settings-fields input,
.admin-page .admin-settings-fields textarea {
  min-height: 40px;
  color: var(--admin-ink);
  border-color: var(--admin-border);
  border-radius: 6px;
  font-size: 14px;
}

.admin-page .admin-data-table {
  color: var(--admin-ink-soft);
}

.admin-page .admin-data-table th,
.admin-page .admin-data-table td {
  padding: 12px 15px;
  border-color: var(--admin-border-soft);
}

.admin-page .admin-data-table th {
  color: #687589;
  background: #f7f9fc;
  font-size: 12px;
  font-weight: 600;
}

.admin-page .admin-data-table td {
  height: 62px;
  color: #344156;
  font-size: 14px;
}

.admin-page .admin-data-table tbody tr:hover {
  background: #f5f8fc;
}

.admin-page .admin-person-cell small,
.admin-page .admin-order-id small,
.admin-page .admin-payment-state,
.admin-page .admin-muted {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-order-service strong {
  color: var(--admin-ink);
  font-size: 13px;
}

.admin-page .admin-order-summary,
.admin-page .admin-finance-summary {
  margin-bottom: 14px;
  background: var(--admin-border);
  border-color: var(--admin-border);
}

.admin-page .admin-order-summary > div,
.admin-page .admin-finance-summary > article {
  min-height: 76px;
  padding: 13px 16px;
}

.admin-page .admin-order-summary span,
.admin-page .admin-finance-summary span {
  color: #59677a;
  font-size: 12px;
}

.admin-page .admin-order-summary strong,
.admin-page .admin-finance-summary strong {
  color: var(--admin-ink);
  font-size: 20px;
}

.admin-page .admin-table-footer {
  min-height: 46px;
  color: var(--admin-muted);
  background: #f7f9fc;
  border-color: var(--admin-border-soft);
  font-size: 12px;
}

.admin-page .admin-moderation-toolbar {
  margin-bottom: 12px;
}

.admin-page .admin-sla-hint,
.admin-page .admin-risk-note,
.admin-page .admin-version-label {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-moderation-list {
  gap: 8px;
}

.admin-page .admin-moderation-task {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 86px;
  gap: 20px;
  padding: 14px 16px;
  border-color: var(--admin-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.02);
}

.admin-page .admin-moderation-task:hover {
  background: #f8fafd;
  border-color: #c9d5e2;
}

.admin-page .admin-task-meta {
  min-height: 18px;
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-task-meta i {
  padding: 2px 6px;
  font-size: 10px;
}

.admin-page .admin-moderation-main h3 {
  margin: 3px 0 2px;
  color: var(--admin-ink);
  font-size: 15px;
}

.admin-page .admin-moderation-main p,
.admin-page .admin-task-author {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-task-author {
  margin-top: 3px;
}

.admin-page .admin-task-actions .admin-button {
  min-height: 36px;
}

.admin-page .admin-content-workbench {
  gap: 12px;
}

.admin-page .admin-content-tabs {
  gap: 3px;
  padding: 4px;
}

.admin-page .admin-cms-panel-head {
  min-height: 68px;
  padding: 14px 17px;
}

.admin-page .admin-settings-form {
  gap: 12px;
}

.admin-page .admin-settings-form > section {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 20px;
}

.admin-page .admin-settings-copy {
  grid-column: 1;
  grid-row: auto;
}

.admin-page .admin-settings-copy h2 {
  margin-bottom: 5px;
  color: var(--admin-ink);
  font-size: 16px;
  font-weight: 600;
}

.admin-page .admin-settings-copy p {
  max-width: 68ch;
  color: var(--admin-muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-page .admin-settings-fields,
.admin-page .admin-toggle-list {
  grid-column: 1;
  grid-row: auto;
}

.admin-page .admin-settings-fields {
  gap: 12px;
}

.admin-page .admin-toggle-list > label {
  min-height: 52px;
  border-color: var(--admin-border-soft);
}

.admin-page .admin-toggle-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.admin-page .admin-toggle-list > label:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.admin-page .admin-toggle-list > label > span {
  gap: 1px;
}

.admin-page .admin-toggle-list strong {
  color: var(--admin-ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.admin-page .admin-toggle-list small {
  color: var(--admin-muted);
  font-size: 11px;
}

.admin-page .admin-test-sound {
  grid-column: 1;
  grid-row: auto;
  align-self: start;
  justify-self: start;
  margin-top: 0;
}

.admin-page .admin-settings-fields--stacked {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-page .admin-maintenance-toggle {
  grid-column: 1 / -1;
  min-height: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--admin-border-soft);
}

.admin-page .admin-settings-fields textarea {
  min-height: 88px;
  padding: 10px 11px;
  resize: vertical;
}

.admin-page .admin-form-footer {
  padding-top: 2px;
}

.admin-page .admin-form-footer span {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-drawer,
.admin-page .admin-popover,
.admin-page .admin-dialog {
  color: var(--admin-ink);
}

.admin-page .admin-drawer-head,
.admin-page .admin-dialog-head {
  border-color: var(--admin-border);
}

.admin-page .admin-drawer-head h2 {
  font-size: 20px;
}

.admin-page .admin-role-overview {
  gap: 10px;
  margin-bottom: 14px;
}

.admin-page .admin-role-overview article {
  min-height: 112px;
  padding: 15px;
}

.admin-page .admin-role-overview h3 {
  color: var(--admin-ink);
  font-size: 14px;
}

.admin-page .admin-role-overview p {
  color: var(--admin-muted);
  font-size: 12px;
}

.admin-page .admin-role-overview small {
  color: var(--admin-muted-light);
  font-size: 11px;
}

@media (max-width: 1180px) {
  .admin-page {
    --admin-sidebar-width: 196px;
  }

  .admin-page .admin-header-inner,
  .admin-page .admin-workspace {
    width: min(100% - 32px, var(--admin-shell-width));
  }

  .admin-page .admin-workspace {
    gap: 18px;
  }

  .admin-page .admin-sync-state,
  .admin-page .admin-product-label {
    display: none;
  }

  .admin-page .admin-global-search {
    margin-left: 0;
  }
}

@media (max-width: 860px) {
  .admin-page .admin-header-inner,
  .admin-page .admin-workspace {
    width: min(100% - 32px, var(--admin-shell-width));
  }

  .admin-page .admin-logo,
  .admin-page .admin-logo img {
    width: 140px;
  }

  .admin-page .admin-mobile-menu {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    color: var(--admin-ink-soft);
    place-items: center;
  }

  .admin-page .admin-mobile-menu span {
    position: absolute;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
  }

  .admin-page .admin-mobile-menu span:nth-child(1) {
    transform: translateY(-6px);
  }

  .admin-page .admin-mobile-menu span:nth-child(3) {
    transform: translateY(6px);
  }

  .admin-page .admin-role-copy,
  .admin-page .admin-role-toggle > .admin-icon {
    display: none;
  }

  .admin-page .admin-role-toggle {
    grid-template-columns: 34px;
    min-width: 42px;
    width: 42px;
    padding: 4px;
  }

  .admin-page .admin-content {
    padding-top: 20px;
  }

  .admin-page .admin-dashboard-grid--lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .admin-settings-form > section {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .admin-page .admin-settings-copy,
  .admin-page .admin-settings-fields,
  .admin-page .admin-toggle-list,
  .admin-page .admin-test-sound {
    grid-column: 1;
    grid-row: auto;
  }

  .admin-page .admin-settings-copy p {
    max-width: 56ch;
  }
}

@media (max-width: 680px) {
  .admin-page {
    --admin-header-height: 62px;
  }

  .admin-page .admin-header-inner,
  .admin-page .admin-workspace {
    width: calc(100% - 24px);
  }

  .admin-page .admin-logo,
  .admin-page .admin-logo img {
    width: 122px;
  }

  .admin-page .admin-content {
    padding: 18px 0 40px;
  }

  .admin-page .admin-page-header {
    margin-bottom: 16px;
  }

  .admin-page .admin-page-header h1 {
    font-size: 25px;
  }

  .admin-page .admin-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .admin-metric {
    min-height: 92px;
    padding: 15px 16px;
  }

  .admin-page .admin-surface-head {
    align-items: stretch;
    padding: 16px;
  }

  .admin-page .admin-moderation-task {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .admin-page .admin-task-actions {
    justify-content: flex-start;
  }

  .admin-page .admin-settings-form > section {
    padding: 17px 16px;
  }

  .admin-page .admin-toggle-list,
  .admin-page .admin-settings-fields--stacked {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-page .admin-toggle-list > label {
    border-bottom: 1px solid var(--admin-border-soft);
  }

  .admin-page .admin-toggle-list > label:last-child {
    border-bottom: 0;
  }
}

/* Shared public chrome: header account controls, user menu and back-to-top. */
@media (min-width: 1181px) {
  .segment-header--account .segment-mainbar-inner,
  .account-profile-page .segment-mainbar-inner {
    grid-template-columns: 216px 126px minmax(280px, 1fr) 267px;
    column-gap: 20px;
  }

  .segment-header--account .segment-header-actions,
  .account-profile-page .segment-header-actions {
    width: 267px;
    min-width: 267px;
    gap: 26px;
  }

  .segment-header--account .segment-header-actions {
    display: grid;
    grid-template-columns: 32px 126px 46px;
    justify-content: end;
  }

  .segment-header--account .segment-balance {
    width: 126px;
    min-width: 126px;
    grid-template-columns: minmax(0, 1fr) 18px;
  }
}

/* Shared cabinet history and avatar geometry. */

.account-profile-page .dashboard-avatar-wrap img {
  border: 0;
  box-shadow: none;
}

.account-profile-page .dashboard-history-card--overview {
  min-height: 390px;
  padding: 20px;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-title h2 {
  margin: 0;
  color: #121212;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-toolbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 8px;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-filters {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-filters button {
  min-height: 36px;
  padding: 7px 13px;
  font-size: 14px;
  font-weight: 500;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-date-control {
  display: block;
  width: min(260px, 38%);
  min-width: 210px;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-date-control > input,
.account-profile-page .dashboard-history-card--overview .dashboard-history-date-control .shared-date-trigger {
  width: 100%;
  min-height: 40px;
  font-size: 14px;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-row {
  min-width: 0;
  min-height: 78px;
  align-items: center;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-row[hidden],
.account-profile-page .dashboard-history-card--overview .dashboard-history-more[hidden] {
  display: none !important;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-viewport {
  min-width: 0;
  min-height: 312px;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-action-row {
  display: flex;
  height: 48px;
  min-height: 48px;
  padding-top: 12px;
  align-items: center;
  justify-content: center;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-more {
  min-height: 36px;
  padding: 7px 14px;
  color: #0877f9;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: none;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-more:hover,
.account-profile-page .dashboard-history-card--overview .dashboard-history-more:focus-visible {
  color: #075fbf;
  background: #f1f6ff;
  border-color: #c9ddfa;
  outline: none;
}

.account-profile-page .dashboard-history-card--overview [data-dashboard-history-list] > .dashboard-history-row:first-child {
  border-top: 0;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-row strong,
.account-profile-page .dashboard-history-card--overview .dashboard-history-row > b {
  font-size: 16px;
  font-weight: 600;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-row small {
  font-size: 14px;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-empty {
  display: grid;
  min-height: 312px;
  margin: 0;
  place-items: center;
  color: #718198;
  font-size: 14px;
  text-align: center;
}

.account-profile-page .dashboard-history-card--overview .dashboard-history-empty[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .account-profile-page .dashboard-history-card--overview {
    padding: 18px;
  }

  .account-profile-page .dashboard-history-card--overview .dashboard-history-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .account-profile-page .dashboard-history-card--overview .dashboard-history-date-control {
    width: 100%;
    min-width: 0;
  }
}

.segment-header-actions .segment-account-bell {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  place-items: center;
  color: #a7b2c2;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: color 160ms ease;
}

.segment-header-actions .segment-account-bell:hover,
.segment-header-actions .segment-account-bell:focus-visible {
  color: #367be3;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.segment-header-actions .segment-account-bell .segment-bell-svg {
  display: block;
  width: 32px;
  height: 32px;
}

.segment-header-actions .segment-account-bell .notification-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  display: grid;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #e34848;
  border: 2px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
  font: 600 10px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.segment-header-actions .segment-account-bell .notification-badge[hidden],
.segment-profile-nav b[hidden] {
  display: none !important;
}

.segment-balance {
  display: grid;
  min-width: 126px;
  grid-template-columns: minmax(0, auto) 18px;
  gap: 6px;
  align-items: center;
  padding: 0;
  color: #121212;
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.segment-balance-link {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 0;
  color: #121212;
  font: inherit;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.segment-balance-link small {
  color: #367be3;
  font: 500 11px/1.1 var(--font-sans);
  letter-spacing: 0;
  white-space: nowrap;
}

.segment-balance-link strong {
  color: #121212;
  font: 600 18px/1.12 var(--font-sans);
  letter-spacing: 0;
  white-space: nowrap;
}

.segment-balance-link:hover strong,
.segment-balance-link:focus-visible strong {
  color: #0877f9;
}

.segment-balance-toggle {
  display: grid;
  width: 18px;
  height: 18px;
  padding: 0;
  place-items: center;
  color: #acb4bd;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.segment-balance-toggle:hover,
.segment-balance-toggle:focus-visible {
  color: #367be3;
  background: transparent;
  outline: none;
  box-shadow: none;
}

.segment-balance-toggle .segment-balance-eye-svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-balance-toggle .eye-show-glyph {
  display: none;
}

.segment-balance[data-balance-hidden="true"] .segment-balance-toggle .eye-hide-glyph {
  display: none;
}

.segment-balance[data-balance-hidden="true"] .segment-balance-toggle .eye-show-glyph {
  display: block;
}

.segment-profile-wrap {
  position: relative;
}

.segment-header-actions .segment-profile-wrap .user-chip {
  display: grid;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 1px;
  place-items: center;
  overflow: visible;
  background: #367be3;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.segment-header-actions .segment-profile-wrap .user-chip img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: cover;
  background: #ebf3ff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: none;
}

.segment-header-actions .segment-profile-wrap .user-chip:hover,
.segment-header-actions .segment-profile-wrap .user-chip:focus-visible {
  background: #0877f9;
  outline: none;
}

.segment-header-actions .segment-profile-wrap .user-chip:hover img,
.segment-header-actions .segment-profile-wrap .user-chip:focus-visible img {
  box-shadow: none;
}

.segment-profile-dropdown {
  position: absolute;
  z-index: 110;
  top: calc(100% + 14px);
  right: -20px;
  width: 320px;
  height: 557px;
  min-height: 557px;
  padding: 16px 20px 24px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  border: 0;
  box-sizing: border-box;
  transform: translateY(-7px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.segment-profile-dropdown[hidden] {
  display: none !important;
}

.segment-profile-dropdown.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.segment-profile-card {
  position: relative;
  display: flex;
  width: 280px;
  height: 517px;
  min-height: 517px;
  padding: 0 10px 10px;
  flex-direction: column;
  color: #121212;
  background: #fff;
  border: 0;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: 0 4px 20px rgb(0 0 0 / 15%);
}

.segment-profile-close {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 8px;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: #a7b2c2;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.segment-profile-close:hover,
.segment-profile-close:focus-visible {
  color: #367be3;
  background: #f7f9fd;
  outline: none;
}

.segment-profile-close .segment-icon {
  width: 22px;
  height: 22px;
}

.segment-profile-hero {
  display: grid;
  height: 80px;
  margin-top: 36px;
  grid-template-columns: 36px 80px 36px;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.segment-profile-avatar {
  position: relative;
  display: block;
  width: 80px;
  height: 80px;
  padding: 1px;
  background: #367be3;
  border-radius: 50%;
  box-sizing: border-box;
}

.segment-profile-avatar img {
  display: block;
  width: 78px;
  height: 78px;
  object-fit: cover;
  background: #ebf3ff;
  border: 2px solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

.segment-profile-avatar i {
  position: absolute;
  top: 5px;
  right: 4px;
  bottom: auto;
  width: 12px;
  height: 12px;
  background: #63d76f;
  border: 2px solid #f7f9fd;
  border-radius: 50%;
  box-sizing: content-box;
}

.segment-profile-card .segment-profile-mini-action {
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  color: #a7b2c2;
  background: #f7f9fd;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.segment-profile-card .segment-profile-mini-action:hover,
.segment-profile-card .segment-profile-mini-action:focus-visible {
  color: #367be3;
  background: #ebf3ff;
  outline: none;
}

.segment-profile-card .segment-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.segment-profile-caption {
  display: grid;
  justify-items: center;
  gap: 2px;
  height: 48px;
  margin: 10px 0 0;
  text-align: center;
}

.segment-profile-caption strong {
  max-width: 240px;
  overflow: hidden;
  color: #121212;
  font: 500 16px/20px var(--font-sans);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-profile-caption span {
  max-width: 240px;
  overflow: hidden;
  color: #738193;
  font: 400 13px/18px var(--font-sans);
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-profile-dropdown .segment-profile-nav {
  display: grid;
  gap: 0;
  margin-top: 15px;
  padding: 0 0 10px;
  border-top: 0;
  border-bottom: 1px solid #e6edf6;
}

.segment-profile-card .segment-profile-nav a,
.segment-profile-card .segment-profile-add,
.segment-profile-card .segment-profile-logout {
  display: grid;
  width: 260px;
  min-height: 36px;
  height: 36px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 0 8px;
  color: #2e2e2e;
  font: 400 15px/1.2 var(--font-sans);
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  box-sizing: border-box;
}

.segment-profile-card .segment-profile-nav a:hover,
.segment-profile-card .segment-profile-nav a:focus-visible,
.segment-profile-card .segment-profile-nav a.is-active,
.segment-profile-card .segment-profile-add:hover,
.segment-profile-card .segment-profile-add:focus-visible,
.segment-profile-card .segment-profile-logout:hover,
.segment-profile-card .segment-profile-logout:focus-visible {
  color: #367be3;
  background: #ebf3ff;
  outline: none;
}

.segment-profile-card .segment-profile-nav b {
  display: grid;
  width: 24px;
  min-width: 24px;
  height: 21px;
  padding: 0;
  place-items: center;
  color: #367be3;
  background: transparent;
  border: 1px solid #367be3;
  border-radius: 6px;
  box-sizing: border-box;
  font: 500 10px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.segment-profile-mode {
  display: grid;
  width: 260px;
  height: 56px;
  min-height: 56px;
  margin: 10px 0 0;
  padding: 0 6px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 0;
  box-sizing: border-box;
}

.segment-profile-secondary-avatar,
.segment-profile-secondary-avatar img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
}

.segment-profile-mode > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
  color: inherit;
  font-weight: 400;
  text-transform: none;
}

.segment-profile-mode b,
.segment-profile-mode small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment-profile-mode b {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  color: #121212;
  background: transparent;
  border: 0;
  border-radius: 0;
  font: 500 14px/18px var(--font-sans);
}

.segment-profile-mode small {
  color: #738193;
  font: 400 11px/15px var(--font-sans);
}

.segment-profile-card .segment-profile-add,
.segment-profile-card .segment-profile-logout {
  margin: 0;
}

.segment-profile-card .segment-profile-logout {
  color: #2e2e2e;
}

.back-to-top {
  display: grid;
  width: 78px;
  height: 78px;
  padding: 0;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  transition: opacity 180ms ease, transform 180ms ease, filter 150ms ease;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: transparent;
  filter: brightness(0.97);
  outline: none;
}

.back-to-top svg {
  display: block;
  width: 78px;
  height: 78px;
  overflow: visible;
  fill: none;
  stroke: none;
}

@media (max-width: 1180px) and (min-width: 781px) {
  .segment-header--account .segment-mainbar-inner,
  .account-profile-page .segment-header--account .segment-mainbar-inner {
    grid-template-columns: 190px 122px minmax(220px, 1fr) max-content;
    gap: 14px;
  }

  .segment-header--account .segment-header-actions,
  .account-profile-page .segment-header--account .segment-header-actions {
    width: auto;
    min-width: 0;
    gap: 14px;
  }
}

@media (max-width: 780px) {
  .segment-profile-dropdown {
    right: -10px;
    width: min(320px, calc(100vw - 24px));
    padding-inline: max(12px, calc((100% - 280px) / 2));
  }

  .segment-profile-card {
    width: min(280px, 100%);
  }

  .back-to-top {
    width: 58px;
    height: 58px;
  }

  .back-to-top svg {
    width: 58px;
    height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .segment-profile-dropdown,
  .back-to-top {
    transition-duration: 1ms;
  }
}

/* Temporarily hide the shared back-to-top control while preserving the component. */
.back-to-top[data-back-to-top] {
  display: none !important;
}

/* SVG-derived cabinet navigation shared by customer and performer accounts. */
.account-profile-page .dashboard-nav-item {
  grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: 10px;
}

.account-profile-page .dashboard-nav-item .dashboard-nav-icon {
  display: block;
  width: 24px;
  min-width: 24px;
  height: 24px;
  overflow: visible;
  color: inherit;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--dashboard-nav-mask);
  mask-image: var(--dashboard-nav-mask);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  filter: drop-shadow(0 3px 1px rgba(210, 228, 255, 0.9));
  transition: color 180ms ease, filter 180ms ease;
}

.dashboard-nav-item.is-active .dashboard-nav-icon {
  filter: none;
}

.dashboard-nav-icon--overview { --dashboard-nav-mask: url("./assets/dashboard-icons/overview.svg"); }
.dashboard-nav-icon--news { --dashboard-nav-mask: url("./assets/dashboard-icons/news.svg"); }
.dashboard-nav-icon--chat { --dashboard-nav-mask: url("./assets/dashboard-icons/chat.svg"); }
.dashboard-nav-icon--orders { --dashboard-nav-mask: url("./assets/dashboard-icons/orders.svg"); }
.dashboard-nav-icon--reviews { --dashboard-nav-mask: url("./assets/dashboard-icons/reviews.svg"); }
.dashboard-nav-icon--settings { --dashboard-nav-mask: url("./assets/dashboard-icons/settings.svg"); }
.dashboard-nav-icon--characteristics { --dashboard-nav-mask: url("./assets/dashboard-icons/characteristics.svg"); }
.dashboard-nav-icon--schedule { --dashboard-nav-mask: url("./assets/dashboard-icons/schedule.svg"); }
.dashboard-nav-icon--analytics { --dashboard-nav-mask: url("./assets/dashboard-icons/analytics.svg"); }
.dashboard-nav-icon--bonus { --dashboard-nav-mask: url("./assets/dashboard-icons/bonus.svg"); }
.dashboard-nav-icon--promocodes { --dashboard-nav-mask: url("./assets/dashboard-icons/promocodes.svg"); }
.dashboard-nav-icon--level { --dashboard-nav-mask: url("./assets/dashboard-icons/level.svg"); }
.dashboard-nav-icon--duets { --dashboard-nav-mask: url("./assets/dashboard-icons/duets.svg"); }
.dashboard-nav-icon--favorites { --dashboard-nav-mask: url("./assets/figma-icons/heart-outline.svg?v=bf77d0aa"); }
.dashboard-nav-item.is-active .dashboard-nav-icon--favorites { --dashboard-nav-mask: url("./assets/figma-icons/heart-filled.svg?v=51016fc6"); }
.dashboard-nav-icon--support { --dashboard-nav-mask: url("./assets/dashboard-icons/support.svg"); }

.segment-header-search input::placeholder {
  color: #748092;
  font-weight: 400;
  opacity: 1;
}

/* Stable shared chrome and utility-page alignment. */
.site-header.segment-header:not([data-shared-chrome-ready="true"]) .segment-header-actions {
  visibility: hidden;
}

.site-breadcrumbs-row {
  width: min(1396px, calc(100% - 44px));
  margin: 0 auto;
}

.segment-utility nav a.is-active {
  color: #121212;
}

@media (min-width: 1181px) {
  .site-header.segment-header .segment-mainbar-inner {
    grid-template-columns: 216px 126px minmax(280px, 1fr) 267px;
    column-gap: 20px;
  }

  .site-header.segment-header .segment-header-actions {
    width: 267px;
    min-width: 267px;
  }

  .site-header.segment-header:not(.segment-header--account) .segment-header-actions .auth-trigger {
    width: 216px;
    margin-left: auto;
  }
}

.favorites-main .favorites-section {
  padding-top: 0;
}

.reference-main .contacts-page-shell {
  width: min(1396px, calc(100% - 44px));
  padding-top: 0;
}

.contacts-intro h1 {
  margin: 10px 0 14px;
  font-size: 48px;
  line-height: 1.05;
}

@media (max-width: 900px) {
  .site-breadcrumbs-row {
    width: min(100% - 28px, 680px);
  }

  .reference-main .contacts-page-shell {
    width: min(100% - 28px, 680px);
  }

  .contacts-intro h1 {
    font-size: 38px;
  }
}

@media (max-width: 1120px) {
  .account-profile-page .dashboard-nav-item,
  .account-profile-page .dashboard-nav-item:nth-child(7) {
    grid-template-columns: 20px auto auto;
  }

  .account-profile-page .dashboard-nav-item .dashboard-nav-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
  }
}

/* Shared header surfaces use one motion language and one active state. */
.dashboard-notification-drawer {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-7px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.dashboard-notification-drawer.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-notification-drawer {
    transition-duration: 1ms;
    transform: none;
  }
}

/* Public voice profile: one shared component system for profile, demos and reviews. */
.voice-profile-page {
  overflow-x: clip;
}

.voice-profile-page .profile-main {
  padding-top: 145px;
  overflow: clip;
}

.voice-profile-page #voiceProfile {
  padding-top: 18px;
  margin-bottom: 30px;
}

.voice-profile-page #voiceProfile .site-breadcrumbs {
  margin-bottom: 0;
}

.voice-profile-page .profile-grid {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 453px);
  gap: 18px;
}

.voice-profile-page .profile-column,
.voice-profile-page .profile-aside,
.voice-profile-page .profile-side-stack {
  min-width: 0;
}

.voice-profile-page .profile-hero-card {
  grid-template-columns: 150px minmax(0, 1fr) 176px;
  gap: 22px;
  min-height: 204px;
  padding: 22px;
}

.voice-profile-page .profile-avatar {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  background: #eaf3ff;
  border-radius: 50%;
}

.voice-profile-page .profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-profile-page .profile-avatar .voice-presence {
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 17px;
  height: 17px;
  border-width: 3px;
}

.voice-profile-page .profile-status-row {
  min-height: 36px;
  gap: 10px;
  margin-bottom: 9px;
}

.voice-profile-page .profile-online-pill {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
}

.voice-profile-page .profile-online-pill.is-offline {
  color: #d9344d;
  background: #ffe8ed;
}

.voice-profile-page .reference-card-favorite.profile-favorite-button {
  position: relative;
  right: auto;
  bottom: auto;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  background: #edf5ff;
}

.voice-profile-page .profile-icon-button:not(.is-heart) {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 6px;
  transition: color 160ms ease, background-color 160ms ease;
}

.voice-profile-page .profile-icon-button:not(.is-heart):hover,
.voice-profile-page .profile-icon-button:not(.is-heart):focus-visible {
  color: #0877f9;
  background: #e1eeff;
  outline: none;
}

.voice-profile-page .profile-intro h1 {
  margin-bottom: 7px;
  font-size: 30px;
  font-weight: 600;
}

.voice-profile-page .profile-rating-line {
  margin-bottom: 12px;
}

.voice-profile-page .profile-rating-line > span:last-child {
  color: #738193;
}

.voice-profile-page .profile-intro p {
  max-width: 100%;
  color: #526071;
  font-size: 16px;
  line-height: 1.48;
}

.voice-profile-page .profile-order-box {
  align-content: center;
}

.voice-profile-page .profile-order-box .primary-button,
.voice-profile-page .profile-order-box .secondary-button {
  width: 176px;
  min-height: 44px;
  height: 44px;
  font-size: 16px;
  border-radius: 6px;
  box-shadow: none;
}

.voice-profile-page .profile-panel {
  padding: 20px;
}

.voice-profile-page .profile-panel h2,
.voice-profile-page .profile-related-section h2 {
  font-size: 21px;
  font-weight: 600;
}

.voice-profile-page .availability-calendar {
  gap: 10px;
}

.voice-profile-page .availability-calendar button {
  min-height: 60px;
  transition: transform 160ms ease, background-color 160ms ease;
}

.voice-profile-page .availability-calendar button:hover,
.voice-profile-page .availability-calendar button:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.voice-profile-page .profile-characteristic-grid {
  gap: 26px 36px;
}

.voice-profile-page .profile-characteristic-grid strong {
  font-size: 17px;
  font-weight: 600;
}

.voice-profile-page .profile-characteristic-grid p {
  color: #667487;
  font-size: 15px;
  line-height: 1.42;
}

.voice-profile-page .profile-side-stats {
  min-height: 62px;
  padding: 0 20px;
}

.voice-profile-page .profile-side-stats strong {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.voice-profile-page .profile-side-stats span {
  font-size: 15px;
}

.voice-profile-page .profile-service-list {
  gap: 18px;
}

.voice-profile-page .profile-service-row strong,
.voice-profile-page .profile-service-row b {
  font-size: 16px;
}

.voice-profile-page .profile-demo-list-panel {
  min-height: 486px;
}

.voice-profile-page .profile-demo-tabs {
  gap: 8px;
  margin-bottom: 22px;
}

.voice-profile-page .profile-demo-tabs button {
  min-height: 34px;
  padding: 0 13px;
  font-size: 14px;
  border-color: #b8d5fb;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.voice-profile-page .profile-demo-tabs button:hover,
.voice-profile-page .profile-demo-tabs button:focus-visible {
  color: #075fc6;
  background: #eef6ff;
  border-color: #83b8f7;
  outline: none;
}

.voice-profile-page .profile-demo-tabs button.is-active {
  color: #fff;
  background: #0877f9;
  border-color: #0877f9;
}

.voice-profile-page .profile-demo-list {
  display: grid;
  gap: 20px;
}

.voice-profile-page .profile-demo-row.reference-home-voice-row {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 85px;
  min-height: 85px;
  padding: 0;
  background: transparent;
  border: 0;
}

.voice-profile-page .profile-demo-row.reference-home-voice-row[hidden] {
  display: none;
}

.voice-profile-page .profile-demo-row .reference-home-copy > a {
  font-weight: 600;
}

.voice-profile-page .profile-demo-row .reference-home-copy > span {
  max-width: 225px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-profile-page .profile-demo-row .reference-home-player {
  width: min(318px, calc(100% - 102px));
}

.voice-profile-page .profile-demo-row .reference-home-player input[type="range"],
.voice-profile-page .profile-demo-row .reference-home-player .player-meta {
  width: 100%;
}

.voice-profile-page .profile-review-module {
  padding: 22px;
}

.voice-profile-page .profile-review-head {
  gap: 22px;
  margin-bottom: 20px;
}

.voice-profile-page .profile-review-head .primary-button {
  width: auto;
  min-width: 166px;
  height: 44px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 16px;
  box-shadow: none;
}

.voice-profile-page .review-summary {
  align-items: center;
  gap: 14px;
}

.voice-profile-page .review-summary strong {
  font-size: 38px;
  font-variant-numeric: tabular-nums;
}

.voice-profile-page .review-summary > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-profile-page .review-summary .profile-review-stars {
  color: #ffbd00;
}

.profile-review-stars {
  color: #ffbd00;
  font-size: 15px;
  letter-spacing: 0;
  white-space: nowrap;
}

.profile-review-form {
  display: grid;
  gap: 16px;
  padding: 18px;
  margin-bottom: 18px;
  background: #f7f9fc;
  border-radius: 8px;
}

.profile-review-form[hidden],
.review-reply-form[hidden] {
  display: none;
}

.profile-review-rating-row,
.profile-review-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-review-rating-row > strong {
  font-size: 15px;
  font-weight: 600;
}

.profile-review-rating-buttons {
  display: flex;
  gap: 3px;
}

.profile-review-rating-buttons button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  color: #c7cfda;
  font-size: 22px;
  background: transparent;
  border: 0;
  transition: color 130ms ease, transform 130ms ease;
}

.profile-review-rating-buttons button.is-active {
  color: #ffbd00;
}

.profile-review-rating-buttons button:hover,
.profile-review-rating-buttons button:focus-visible {
  color: #f5ad00;
  outline: none;
  transform: scale(1.08);
}

.profile-review-form textarea {
  width: 100%;
  min-height: 108px;
  padding: 13px 14px;
  resize: vertical;
  color: #121212;
  font: 400 15px/1.45 var(--font-sans);
  background: #fff;
  border: 1px solid #d7dfe9;
  border-radius: 6px;
  outline: none;
}

.profile-review-form textarea:focus {
  border-color: #8dbcf7;
  box-shadow: none;
}

.profile-review-form-actions span {
  color: #738193;
  font-size: 13px;
}

.profile-review-form-actions .primary-button {
  min-height: 40px;
  padding: 0 18px;
  box-shadow: none;
}

.voice-profile-page .review-list {
  display: grid;
  gap: 16px;
}

.voice-profile-page .review-card {
  padding: 18px;
  background: #f8fafc;
  border-radius: 8px;
}

.voice-profile-page .review-card-head {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
}

.voice-profile-page .review-avatar {
  width: 48px;
  height: 48px;
  font-size: 16px;
}

.voice-profile-page .review-card-head > div {
  gap: 4px 12px;
}

.voice-profile-page .review-card-head strong {
  font-size: 16px;
}

.voice-profile-page .review-card-head time {
  font-size: 13px;
}

.profile-review-score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
}

.profile-review-score small {
  color: #738193;
  font-size: 12px;
}

.voice-profile-page .review-card > p {
  max-width: none;
  margin: 14px 0 12px 62px;
  color: #344153;
  font-size: 15px;
  line-height: 1.55;
}

.review-card-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: 62px;
}

.review-card-actions span {
  color: #8a96a6;
  font-size: 12px;
}

.voice-profile-page .review-card-actions button,
.voice-profile-page .review-reply button {
  margin: 0;
  padding: 0;
  color: #0877f9;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 0;
}

.review-replies {
  display: grid;
  gap: 12px;
}

.voice-profile-page .review-reply {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  max-width: 680px;
  padding-top: 14px;
  margin: 12px 0 0 62px;
  border-top: 1px solid #e4e9f0;
}

.voice-profile-page .review-reply .review-avatar {
  width: 42px;
  height: 42px;
}

.review-reply-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.review-reply-head strong {
  font-size: 14px;
}

.review-reply-head time {
  color: #8a96a6;
  font-size: 12px;
}

.voice-profile-page .review-reply p {
  margin: 7px 0 8px !important;
  color: #526071;
  font-size: 14px;
  line-height: 1.5;
}

.review-reply-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 14px 0 0 62px;
}

.review-reply-form input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  color: #121212;
  font: 400 14px/1 var(--font-sans);
  background: #fff;
  border: 1px solid #d3dce8;
  border-radius: 6px;
  outline: none;
}

.review-reply-form input:focus {
  border-color: #8dbcf7;
  box-shadow: none;
}

.review-reply-form button {
  min-width: 108px;
  height: 42px;
  padding: 0 14px;
  color: #fff;
  font: 500 14px/1 var(--font-sans);
  background: #0877f9;
  border: 0;
  border-radius: 6px;
}

.voice-profile-page .profile-related-host {
  padding-top: 52px;
}

.voice-profile-page .profile-related-section h2 {
  margin-bottom: 24px;
  font-size: 34px;
}

.voice-profile-page .profile-related-grid {
  grid-template-columns: repeat(auto-fit, 334px);
  justify-content: start;
  gap: 15px;
}

@media (max-width: 1320px) and (min-width: 761px) {
  .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .voice-profile-page .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .voice-profile-page .profile-aside {
    max-width: 100%;
  }

  .voice-profile-page .profile-side-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .voice-profile-page .profile-demo-list-panel {
    width: min(100%, 453px);
  }
}

@media (max-width: 760px) {
  .voice-profile-page .profile-main {
    padding-top: 170px;
  }

  .voice-profile-page #voiceProfile {
    padding-top: 0;
    margin-bottom: 22px;
  }

  .voice-profile-page .profile-hero-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .voice-profile-page .profile-avatar {
    width: 92px;
    height: 92px;
    align-self: start;
  }

  .voice-profile-page .profile-intro h1 {
    font-size: 25px;
  }

  .voice-profile-page .profile-intro p {
    font-size: 15px;
  }

  .voice-profile-page .profile-order-box {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-profile-page .profile-order-box .primary-button,
  .voice-profile-page .profile-order-box .secondary-button {
    width: 100%;
  }

  .voice-profile-page .availability-calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voice-profile-page .profile-characteristic-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .voice-profile-page .profile-review-head,
  .profile-review-rating-row,
  .profile-review-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .voice-profile-page .profile-review-head .primary-button {
    width: 100%;
  }

  .voice-profile-page .review-card > p,
  .review-card-actions,
  .voice-profile-page .review-reply,
  .review-reply-form {
    margin-left: 0;
  }

  .voice-profile-page .profile-related-grid {
    grid-template-columns: 334px;
  }
}

@media (max-width: 420px) {
  .voice-profile-page .profile-hero-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .voice-profile-page .profile-avatar {
    width: 112px;
    height: 112px;
  }

  .voice-profile-page .profile-order-box {
    grid-template-columns: minmax(0, 1fr);
  }

  .voice-profile-page .profile-side-stats {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }

  .voice-profile-page .profile-demo-row.reference-home-voice-row {
    transform: scale(0.88);
    transform-origin: left center;
  }
}

/* Cabinet schedule and analytics: shared, readable working surfaces. */
.account-profile-page .dashboard-nav {
  gap: 2px;
}

.account-profile-page .dashboard-nav-divider {
  display: block;
  height: 1px;
  margin: 14px 0 12px;
  background: #d4dae5;
}

.account-profile-page .dashboard-nav-item,
.account-profile-page .dashboard-nav-item:nth-child(7) {
  min-height: 40px;
  padding: 7px 10px;
  margin: 0;
  border-top: 0;
}

.account-profile-page .dashboard-sidebar-foot {
  gap: 16px;
  padding-top: 14px;
  margin-top: 14px;
}

.account-profile-page .dashboard-sidebar-foot > .dashboard-nav-item {
  min-height: 40px;
}

.account-profile-page [data-cabinet-panel="analytics"],
.account-profile-page .dashboard-schedule-view {
  padding-bottom: 72px;
}

.account-profile-page .analytics-archive-layout {
  gap: 22px;
}

.account-profile-page .analytics-archive-head {
  min-height: 50px;
  gap: 24px;
}

.account-profile-page .analytics-archive-head h2 {
  font-size: 28px;
  font-weight: 600;
}

.analytics-period-picker {
  gap: 9px;
  font-size: 14px;
}

.analytics-period-picker > button {
  min-height: 36px;
  gap: 7px;
  padding: 0 10px;
  color: #0877f9;
  font-size: 14px;
  background: #eef5ff;
  border: 0;
  border-radius: 6px;
  transition: color 160ms ease, background-color 160ms ease;
}

.analytics-period-picker > button:hover,
.analytics-period-picker > button:focus-visible {
  color: #0563d1;
  background: #e2efff;
  outline: none;
}

.analytics-period-menu {
  width: 236px;
}

.analytics-period-menu button {
  min-height: 38px;
  padding-inline: 14px 38px;
  font-size: 13px;
}

.account-profile-page .analytics-export-button {
  min-height: 42px;
  font-size: 14px;
}

.analytics-archive-top {
  grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr);
  gap: 18px;
}

.analytics-metric-grid {
  gap: 16px;
}

.analytics-metric-grid > article {
  min-height: 138px;
  padding: 20px;
}

.analytics-metric-grid > article > div {
  gap: 13px;
}

.analytics-metric-grid > article > div > span {
  width: 28px;
  height: 28px;
}

.analytics-metric-grid b {
  font-size: 17px;
  font-weight: 500;
}

.analytics-metric-grid strong {
  font-size: 33px;
  font-weight: 500;
}

.analytics-score-column {
  gap: 16px;
}

.analytics-overall-score {
  padding: 20px;
}

.analytics-overall-score h3,
.analytics-voter-score h3,
.analytics-products-table > h3 {
  font-size: 19px;
  font-weight: 500;
}

.analytics-overall-score > div {
  gap: 20px;
  margin-top: 16px;
}

.analytics-overall-score > div > strong {
  font-size: 35px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.analytics-overall-score p b {
  font-size: 15px;
}

.analytics-overall-score p span {
  margin-top: 7px;
  color: #68778b;
  font-size: 12px;
}

.analytics-voter-score {
  padding: 20px;
}

.analytics-voter-score ul {
  gap: 14px;
  margin-top: 16px;
}

.analytics-voter-score li > div {
  gap: 14px;
}

.analytics-voter-score li strong {
  font-size: 13px;
}

.analytics-voter-score li span b,
.analytics-voter-score li span em {
  font-size: 12px;
}

.analytics-voter-score .dashboard-icon {
  width: 12px;
  height: 12px;
}

.analytics-voter-score li small {
  margin-top: 5px;
  color: #718198;
  font-size: 10.5px;
  text-transform: none;
}

.account-profile-page .analytics-products-table {
  padding: 20px;
}

.analytics-products-table > h3 {
  margin-bottom: 18px;
  font-size: 20px;
}

.account-profile-page .analytics-products-table th,
.account-profile-page .analytics-products-table td {
  height: 48px;
  padding: 11px 14px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.account-profile-page .analytics-products-table th {
  color: #526071;
  font-size: 13px;
  font-weight: 500;
}

.account-profile-page .analytics-products-table td:first-child {
  color: #121212;
  font-weight: 500;
}

.account-profile-page .analytics-archive-chart-card {
  padding: 22px 24px 24px;
}

.analytics-chart-heading {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.analytics-chart-heading h3 {
  margin: 0;
  color: #121212;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.analytics-chart-heading p {
  margin: 5px 0 0;
  color: #718198;
  font-size: 13px;
}

.analytics-chart-heading .dashboard-chart-scale {
  gap: 4px;
  padding: 3px;
  background: #f0f4f8;
  border-radius: 7px;
}

.analytics-chart-heading .dashboard-chart-scale button {
  min-height: 34px;
  padding: 0 13px;
  color: #526071;
  font-size: 13px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
}

.analytics-chart-heading .dashboard-chart-scale button:hover,
.analytics-chart-heading .dashboard-chart-scale button:focus-visible {
  color: #0877f9;
  outline: none;
}

.analytics-chart-heading .dashboard-chart-scale button.is-active {
  color: #0877f9;
  background: #fff;
  box-shadow: 0 1px 3px rgb(34 53 80 / 10%);
}

.analytics-chart-toolbar {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto;
  gap: 20px;
  align-items: end;
  margin-bottom: 14px;
}

.analytics-chart-toolbar .dashboard-chart-controls {
  display: grid;
  width: min(440px, 100%);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.analytics-chart-toolbar .dashboard-chart-controls label {
  gap: 7px;
  color: #526071;
  font-size: 12px;
}

.analytics-chart-toolbar select {
  height: 42px;
  padding-inline: 13px 38px;
  color: #121212;
  font-size: 14px;
  border-color: #cbd5e2;
}

.analytics-chart-values {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
}

.analytics-chart-values > span {
  display: grid;
  grid-template-columns: 8px auto;
  column-gap: 8px;
  align-items: center;
}

.analytics-chart-values i {
  width: 8px;
  height: 8px;
  grid-row: 1 / span 2;
  border-radius: 50%;
}

.analytics-chart-values i.is-blue {
  background: #0877f9;
}

.analytics-chart-values i.is-red {
  background: #e95463;
}

.analytics-chart-values b {
  color: #718198;
  font-size: 11px;
  font-weight: 500;
}

.analytics-chart-values strong {
  margin-top: 3px;
  color: #121212;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.account-profile-page .analytics-archive-chart-card .dashboard-analytics-chart {
  width: 100%;
  min-height: 0;
  margin-top: 4px;
  overflow: visible;
}

.analytics-chart-viewport {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.dashboard-chart-grid line {
  stroke: #e4eaf2;
}

.dashboard-chart-grid line:nth-child(n + 6) {
  opacity: 0.52;
}

.dashboard-chart-y-labels text,
.dashboard-chart-labels text {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
}

.dashboard-chart-y-labels.is-primary text {
  fill: #4174b8;
}

.dashboard-chart-y-labels.is-secondary text {
  fill: #b85b66;
}

.dashboard-chart-labels text {
  fill: #68778b;
}

.dashboard-analytics-chart path {
  stroke-width: 2.5;
}

.dashboard-chart-points circle {
  fill: #fff;
  stroke: #0877f9;
  stroke-width: 2.5;
  cursor: help;
  transition: r 150ms ease, fill 150ms ease;
}

.dashboard-chart-points.is-secondary circle {
  stroke: #e95463;
}

.dashboard-chart-points circle:hover,
.dashboard-chart-points circle:focus-visible {
  r: 7px;
  fill: #fff;
  outline: none;
}

.dashboard-schedule-head > div > span {
  display: block;
  margin-top: 7px;
  color: #68778b;
  font-size: 14px;
  line-height: 1.45;
}

.account-profile-page .dashboard-week-grid {
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  gap: 10px;
  padding: 2px;
  overflow-x: auto;
}

.account-profile-page .dashboard-week-grid button {
  display: grid;
  min-height: 142px;
  grid-template-rows: auto auto 1fr auto;
  gap: 7px;
  align-content: center;
  justify-items: center;
  padding: 14px 10px;
  color: #121212;
  text-align: center;
  background: #dcf8df;
  border: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgb(0 163 27 / 8%);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.account-profile-page .dashboard-week-grid button:hover,
.account-profile-page .dashboard-week-grid button:focus-visible {
  outline: none;
  transform: translateY(-1px);
}

.account-profile-page .dashboard-week-grid button.is-selected {
  box-shadow: inset 0 0 0 2px #367be3;
}

.account-profile-page .dashboard-week-grid span {
  color: #00a31b;
  font-size: 18px;
  font-weight: 600;
}

.account-profile-page .dashboard-week-grid small {
  color: #526071;
  font-size: 11px;
  font-weight: 500;
}

.account-profile-page .dashboard-week-grid strong {
  align-self: end;
  color: #121212;
  font-size: 14px;
  font-weight: 500;
}

.account-profile-page .dashboard-week-grid em {
  color: #00a31b;
  font-size: 12px;
  font-weight: 600;
}

.account-profile-page .dashboard-week-grid button.is-busy {
  background: #fff6dc;
  box-shadow: inset 0 0 0 1px rgb(166 102 0 / 9%);
}

.account-profile-page .dashboard-week-grid button.is-busy span,
.account-profile-page .dashboard-week-grid button.is-busy em {
  color: #986500;
}

.account-profile-page .dashboard-week-grid button.is-off {
  background: #fff0f1;
  box-shadow: inset 0 0 0 1px rgb(240 68 79 / 8%);
}

.account-profile-page .dashboard-week-grid button.is-off span,
.account-profile-page .dashboard-week-grid button.is-off em {
  color: #f0444f;
}

.account-profile-page .dashboard-schedule-editor {
  grid-template-columns: minmax(230px, 0.65fr) minmax(0, 1.35fr);
  gap: 28px;
  padding: 22px 24px;
  border-radius: 10px;
}

.account-profile-page .dashboard-schedule-editor h3 {
  font-size: 18px;
  font-weight: 600;
}

.account-profile-page .dashboard-schedule-editor p {
  max-width: 34ch;
  color: #68778b;
  font-size: 13px;
  line-height: 1.45;
}

.account-profile-page .dashboard-time-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.75fr) minmax(118px, 1fr) auto minmax(118px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.account-profile-page .dashboard-time-row label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.account-profile-page .dashboard-time-row label > span {
  color: #526071;
  font-size: 12px;
  font-weight: 500;
}

.account-profile-page .dashboard-time-row select,
.account-profile-page .dashboard-time-row input,
.account-profile-page .dashboard-time-row button {
  width: 100%;
  min-width: 0;
  height: 44px;
}

.account-profile-page .dashboard-time-row input:disabled {
  color: #8a96a7;
  background: #f2f5f8;
  cursor: not-allowed;
}

.dashboard-time-separator {
  align-self: end;
  padding-bottom: 13px;
  color: #718198;
}

@media (max-width: 1180px) {
  .analytics-archive-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-score-column {
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: auto;
  }

  .analytics-chart-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-chart-values {
    justify-content: flex-start;
  }

  .account-profile-page .dashboard-schedule-editor {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .account-profile-page .dashboard-nav-divider {
    display: none;
  }

  .account-profile-page [data-cabinet-panel="analytics"],
  .account-profile-page .dashboard-schedule-view {
    padding-bottom: 48px;
  }

  .account-profile-page .analytics-archive-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .analytics-period-picker {
    flex-wrap: wrap;
  }

  .analytics-score-column,
  .analytics-metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-chart-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .analytics-chart-heading .dashboard-chart-scale {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .analytics-chart-heading .dashboard-chart-scale button {
    padding-inline: 8px;
    white-space: nowrap;
  }

  .analytics-chart-toolbar .dashboard-chart-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .analytics-chart-values {
    flex-wrap: wrap;
  }

  .account-profile-page .analytics-archive-chart-card {
    padding: 18px 14px 20px;
  }

  .account-profile-page .analytics-archive-chart-card .dashboard-analytics-chart {
    width: 720px;
    max-width: none;
  }

  .account-profile-page .analytics-chart-viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .dashboard-schedule-head {
    display: grid;
    gap: 16px;
  }

  .dashboard-schedule-head .primary-button {
    width: 100%;
  }

  .account-profile-page .dashboard-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .account-profile-page .dashboard-week-grid button {
    min-height: 130px;
  }

  .account-profile-page .dashboard-time-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-profile-page .dashboard-time-row label:first-child,
  .account-profile-page .dashboard-time-row .secondary-button {
    grid-column: 1 / -1;
  }

  .dashboard-time-separator {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-profile-page .dashboard-week-grid button,
  .analytics-period-picker > button,
  .dashboard-chart-points circle {
    transition-duration: 1ms;
  }
}

/* 25.07 shared notifications and contacts reference surfaces */
.toast-stack {
  position: fixed;
  z-index: 320;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: min(362px, calc(100vw - 32px));
  justify-items: end;
  pointer-events: none;
}

.site-toast {
  box-sizing: border-box;
  display: grid;
  width: 334px;
  max-width: 100%;
  min-height: 114px;
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  grid-template-rows: 20px minmax(58px, auto);
  gap: 8px 12px;
  align-items: center;
  padding: 14px;
  opacity: 0;
  color: #121212;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgb(29 47 74 / 15%);
  transform: translate3d(16px, 0, 0) scale(.985);
  animation: site-toast-reference-in 300ms cubic-bezier(.22, 1, .36, 1) forwards;
  pointer-events: auto;
}

.site-toast.is-leaving {
  animation: site-toast-reference-out 240ms cubic-bezier(.4, 0, 1, 1) forwards;
}

@keyframes site-toast-reference-in {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes site-toast-reference-out {
  to { opacity: 0; transform: translate3d(14px, 0, 0) scale(.985); }
}

.site-toast-title {
  grid-column: 1 / 3;
  grid-row: 1;
  overflow: hidden;
  color: #121212;
  font: 600 15px/20px var(--font-sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-toast-visual {
  display: grid;
  width: 58px;
  height: 58px;
  grid-column: 1;
  grid-row: 2;
  place-items: center;
  overflow: hidden;
  background: #edf1f5;
  border-radius: 8px;
}

.site-toast-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-toast-copy {
  min-width: 0;
  grid-column: 2 / 4;
  grid-row: 2;
  align-self: center;
}

.site-toast-copy b,
.site-toast-copy p {
  display: block;
  margin: 0;
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.site-toast-copy b {
  overflow: hidden;
  color: #0877f9;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-toast-copy p {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: #303744;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.site-toast > button {
  align-self: start;
  display: grid;
  width: 18px;
  height: 18px;
  grid-column: 3;
  grid-row: 1;
  padding: 0;
  place-items: center;
  color: #a0a9b6;
  background: transparent;
  border: 0;
  border-radius: 50%;
}

.site-toast > button:hover,
.site-toast > button:focus-visible {
  color: #3b4656;
  background: #f1f4f8;
  outline: none;
}

.site-toast > button .segment-icon {
  width: 13px;
  height: 13px;
}

.site-toast.is-error .site-toast-visual {
  outline: 2px solid #ffe1e6;
  outline-offset: -2px;
}

.dashboard-notification-drawer {
  position: fixed;
  z-index: 310;
  top: 132px;
  right: max(16px, calc((100vw - 1180px) / 2));
  box-sizing: border-box;
  width: min(452px, calc(100vw - 32px));
  max-height: calc(100vh - 154px);
  padding: 0;
  overflow: hidden;
  opacity: 0;
  color: #121212;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 14px 38px rgb(28 45 70 / 17%);
  transform: translate3d(0, -8px, 0) scale(.99);
  transform-origin: top right;
  transition: opacity 180ms cubic-bezier(.22, 1, .36, 1), transform 180ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.dashboard-notification-drawer[hidden] {
  display: none;
}

.dashboard-notification-drawer.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
}

.site-header.segment-header.is-compact ~ .dashboard-notification-drawer,
.site-header.segment-header.is-compact + .dashboard-notification-drawer {
  top: 92px;
}

.dashboard-notification-drawer > .dashboard-notification-list {
  display: grid;
  max-height: min(420px, calc(100vh - 220px));
  padding: 0;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.dashboard-notification-drawer:not([data-notification-state="items"]) > .dashboard-notification-list {
  scrollbar-gutter: auto;
}

.dashboard-notification-item {
  display: grid;
  min-height: 105px;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 18px 22px;
  border-bottom: 1px solid #e8edf4;
}

.dashboard-notification-item:last-child {
  border-bottom: 0;
}

.dashboard-notification-avatar,
.dashboard-notification-item > span.dashboard-notification-avatar {
  display: block;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background: #eaf3ff;
  border-radius: 6px;
}

.dashboard-notification-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard-notification-item strong,
.dashboard-notification-item p,
.dashboard-notification-item small {
  display: block;
  margin: 0;
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.dashboard-notification-item strong {
  color: #121212;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.dashboard-notification-item p {
  margin-top: 4px;
  color: #4f5969;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.dashboard-notification-item small {
  margin-top: 7px;
  color: #929dac;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.dashboard-notification-empty {
  display: grid;
  min-height: 180px;
  gap: 10px;
  place-content: center;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

.dashboard-notification-empty > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #98a3b2;
}

.dashboard-notification-empty .segment-bell-svg {
  width: 27px;
  height: 27px;
}

.dashboard-notification-empty strong {
  color: #6f7b8c;
  font-size: 13px;
  font-weight: 500;
}

.dashboard-notification-all[hidden] {
  display: none;
}

.dashboard-notification-all {
  display: grid;
  width: 100%;
  min-height: 54px;
  padding: 0 22px;
  place-items: center;
  color: #0877f9;
  font: 500 13px/1 var(--font-sans);
  background: #fff;
  border: 0;
  border-top: 1px solid #e8edf4;
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
}

.dashboard-notification-all:hover,
.dashboard-notification-all:focus-visible {
  color: #075fca;
  background: #f7faff;
  outline: none;
}

.contacts-page,
.contacts-page button,
.contacts-page input,
.contacts-page select,
.contacts-page textarea {
  font-family: var(--font-sans);
}

.contacts-page {
  color: #121212;
  background: #f5f7fb;
}

.contacts-page .reference-main {
  padding-bottom: 110px;
  background: #f5f7fb;
}

.contacts-page .site-breadcrumbs-row {
  width: min(1180px, calc(100% - 44px));
  margin-bottom: 24px;
}

.reference-main .contacts-page-shell {
  display: grid;
  width: min(872px, calc(100% - 32px));
  min-height: 0;
  gap: 24px;
  margin: 0 auto;
  padding: 0;
}

.contacts-page-shell > h1 {
  margin: 18px 0 46px;
  color: #0d0f12;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  letter-spacing: 0;
}

.contact-requisites-card,
.contact-form-card {
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  border-radius: 8px;
}

.contact-requisites-card {
  display: flex;
  min-height: 390px;
  flex-direction: column;
  padding: 36px 38px;
}

.contact-requisites-card h2,
.contact-form-card h2 {
  margin: 0;
  color: #121212;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
}

.contact-requisites-list,
.contact-diadoc-list {
  display: grid;
  padding: 0;
  margin: 0;
}

.contact-requisites-list {
  width: min(470px, 100%);
  gap: 9px;
  margin-top: 38px;
}

.contact-diadoc-list {
  gap: 7px;
  margin-top: 32px;
}

.contact-requisites-list > div,
.contact-diadoc-list > div {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: baseline;
}

.contact-requisites-list dt,
.contact-requisites-list dd,
.contact-diadoc-list dt,
.contact-diadoc-list dd {
  padding: 0;
  margin: 0;
  color: #20242b;
  font-size: 14px;
  line-height: 1.45;
}

.contact-requisites-list dt,
.contact-diadoc-list dt {
  font-weight: 600;
}

.contact-requisites-list dd,
.contact-diadoc-list dd {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
}

.contact-diadoc-list dt span {
  color: #00cbb3;
  font-weight: 400;
}

.contact-download-button {
  width: fit-content;
  min-height: 46px;
  margin-top: auto;
  padding: 0 20px;
  border-radius: 5px;
  box-shadow: none;
}

.contact-form-card {
  padding: 34px 38px 36px;
}

.contact-form-heading {
  margin-bottom: 32px;
}

.contact-form-heading p {
  margin: 9px 0 0;
  color: #252a31;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
}

.contact-form-card .contacts-form {
  display: grid;
  gap: 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

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

.contact-form-card .contact-field {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.contact-form-card .contact-field > span:not(.sr-only) {
  color: #20242b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  padding: 14px 18px;
  color: #181c22;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  background-color: #fff;
  border: 1px solid #8f9bad;
  border-radius: 5px;
  outline: 0;
  box-shadow: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder,
.contact-form-card select:invalid {
  color: #8290a3;
  opacity: 1;
}

.contact-form-card select {
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23778699' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}

.contact-form-card textarea {
  min-height: 118px;
  resize: vertical;
}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
  border-color: #367be3;
  box-shadow: 0 0 0 3px rgb(54 123 227 / 10%);
}

.contact-form-card .contacts-form.is-validated :invalid {
  border-color: #d94b5e;
  box-shadow: 0 0 0 3px rgb(217 75 94 / 8%);
}

.contact-form-success {
  margin: -4px 0 0;
  color: #18794e;
  font-size: 13px;
  font-weight: 500;
}

.contact-form-card .contacts-form-actions {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
}

.contact-form-card .contacts-form-actions > button {
  min-width: 142px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 5px;
  box-shadow: none;
}

.contact-form-card .contacts-consent {
  margin: 0;
  color: #303640;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
}

.contact-form-card .contacts-consent a {
  color: inherit;
  text-underline-offset: 2px;
}

@media (max-width: 820px) {
  .site-header.segment-header,
  .site-header.segment-header.is-compact {
    height: 98px;
  }

  .site-header.segment-header .segment-utility {
    display: none;
  }

  .site-header.segment-header .segment-mainbar,
  .site-header.segment-header .segment-mainbar-inner {
    height: 98px;
  }

  .site-header.segment-header.is-compact .segment-mainbar {
    transform: none;
  }

  .site-header.segment-header .segment-mainbar-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }

  .site-header.segment-header .segment-catalog-button,
  .site-header.segment-header .segment-header-search,
  .site-header.segment-header .segment-header-actions {
    display: none;
  }

  .site-header.segment-header .segment-menu-toggle {
    display: grid;
  }

  .site-header.segment-header .segment-brand {
    width: 154px;
  }

  .site-header.segment-header .segment-brand .brand-logo-image {
    width: 148px;
    max-height: 38px;
  }

  .catalog-page .catalog-main .catalog-section,
  .chronometer-main,
  .reference-main,
  .favorites-main,
  .rating-main,
  .profile-main,
  .seo-service-main,
  .legal-page main,
  .order-page-main,
  .account-profile-page .account-profile-main {
    padding-top: 132px;
  }

  .account-profile-page .dashboard-nav {
    scrollbar-width: none;
  }

  .account-profile-page .dashboard-nav::-webkit-scrollbar {
    display: none;
  }

  .dashboard-notification-drawer {
    top: 112px;
    right: 16px;
  }

  .reference-main .contacts-page-shell {
    width: min(680px, calc(100% - 32px));
  }

  .contacts-page-shell > h1 {
    margin-bottom: 30px;
    font-size: 40px;
  }

  .contact-requisites-card,
  .contact-form-card {
    padding-right: 28px;
    padding-left: 28px;
  }

  .contact-requisites-list > div,
  .contact-diadoc-list > div {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

.segment-mobile-notifications {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.segment-mobile-notifications .segment-bell-svg {
  width: 24px;
  height: 24px;
  color: #7e8a9b;
}

.segment-mobile-notifications b {
  display: grid;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  place-items: center;
  color: #fff;
  font: 600 11px/1 var(--font-sans);
  background: #e34848;
  border-radius: 11px;
}

.segment-mobile-notifications b[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .toast-stack {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
  }

  .site-toast {
    width: min(334px, 100%);
  }

  .dashboard-notification-drawer {
    top: 104px;
    right: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 120px);
  }

  .dashboard-notification-item {
    min-height: 0;
    padding: 16px;
  }

  .contacts-page .reference-main {
    padding-bottom: 72px;
  }

  .contacts-page .site-breadcrumbs-row,
  .reference-main .contacts-page-shell {
    width: calc(100% - 28px);
  }

  .contacts-page-shell > h1 {
    margin: 10px 0 24px;
    font-size: 34px;
    text-align: left;
  }

  .contact-requisites-card,
  .contact-form-card {
    padding: 24px 18px;
  }

  .contact-requisites-card {
    min-height: 0;
  }

  .contact-requisites-card h2,
  .contact-form-card h2 {
    font-size: 24px;
  }

  .contact-requisites-list {
    margin-top: 28px;
  }

  .contact-diadoc-list {
    margin-top: 24px;
  }

  .contact-requisites-list > div,
  .contact-diadoc-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .contact-download-button {
    width: 100%;
    margin-top: 28px;
  }

  .contact-form-heading p {
    font-size: 15px;
  }

  .contact-form-card .contacts-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .contact-form-card .contacts-form-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .contact-form-card .contacts-form-actions > button {
    width: 100%;
  }

  .contact-form-card .contacts-consent br {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-toast,
  .site-toast.is-leaving {
    animation-duration: 1ms;
  }

  .dashboard-notification-drawer {
    transition-duration: 1ms;
    transform: none;
  }
}

/* 25.07 public mobile reference: compact chrome and utility surfaces. */
.mobile-catalog-links,
.mobile-rating-filter {
  display: none;
}

.segment-footer-toggle {
  display: flex;
  width: 100%;
  min-height: 24px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  color: #121212;
  font: 600 17px/1.2 var(--font-sans);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.segment-footer-toggle .segment-icon {
  display: none;
}

.segment-footer-links {
  display: grid;
  gap: 9px;
  align-content: start;
}

@media (min-width: 821px) {
  .segment-footer-toggle {
    margin-bottom: 18px;
    cursor: default;
    pointer-events: none;
  }

  .contacts-page .reference-main .contacts-page-shell {
    width: min(1180px, calc(100% - 44px));
  }
}

@media (max-width: 820px) {
  body:not(.account-profile-page).mobile-menu-open {
    overflow: hidden;
  }

  body:not(.account-profile-page) .site-header.segment-header,
  body:not(.account-profile-page) .site-header.segment-header.is-compact {
    height: 170px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar,
  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar-inner {
    height: 114px;
  }

  body:not(.account-profile-page) .site-header.segment-header.is-compact .segment-mainbar {
    transform: none;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar-inner {
    width: min(100% - 28px, 680px);
    grid-template-columns: minmax(0, 1fr) 42px;
    grid-template-rows: 44px 42px;
    gap: 10px 14px;
    padding: 9px 0;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-brand {
    width: 148px;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-brand .brand-logo-image {
    width: 144px;
    max-height: 35px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-menu-toggle {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-catalog-button,
  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions {
    display: none;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-search {
    display: grid;
    width: 100%;
    min-width: 0;
    height: 42px;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-search input {
    height: 40px;
    min-width: 0;
    padding-inline: 13px 8px;
    font-size: 15px;
    line-height: 40px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-search button {
    width: 42px;
  }

  body:not(.account-profile-page) .mobile-catalog-links {
    display: grid;
    width: 100%;
    height: 56px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    padding: 0 10px;
    background: #fff;
    border-top: 1px solid #e5ebf3;
  }

  body:not(.account-profile-page) .mobile-catalog-links a {
    display: grid;
    min-width: 0;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 5px;
    align-items: center;
    padding: 6px 5px;
    color: #334052;
    font: 500 10px/1.15 var(--font-sans);
    text-decoration: none;
  }

  body:not(.account-profile-page) .mobile-catalog-links .segment-icon {
    width: 18px;
    height: 18px;
    color: #0877f9;
  }

  body:not(.account-profile-page) .mobile-catalog-links span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body:not(.account-profile-page) .segment-mobile-menu {
    position: fixed;
    z-index: 420;
    inset: 0;
    display: block;
    box-sizing: border-box;
    width: 100vw;
    height: 100dvh;
    padding: 0 16px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 0;
  }

  body:not(.account-profile-page) .segment-mobile-menu[hidden] {
    display: none;
  }

  body:not(.account-profile-page) .segment-mobile-menu-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #e5ebf3;
  }

  body:not(.account-profile-page) .segment-mobile-menu-head .segment-online {
    font-size: 12px;
  }

  body:not(.account-profile-page) .segment-mobile-menu-close {
    display: grid;
    width: 40px;
    min-height: 40px;
    padding: 0;
    place-items: center;
    color: #273244;
    background: #f2f5f9;
    border-radius: 6px;
  }

  body:not(.account-profile-page) .segment-mobile-guest,
  body:not(.account-profile-page) .segment-mobile-account {
    display: grid;
    gap: 8px;
    padding: 22px 4px;
    border-bottom: 1px solid #e5ebf3;
  }

  body:not(.account-profile-page) .segment-mobile-guest h2,
  body:not(.account-profile-page) .segment-mobile-guest p,
  body:not(.account-profile-page) .segment-mobile-services h2 {
    margin: 0;
    letter-spacing: 0;
  }

  body:not(.account-profile-page) .segment-mobile-guest h2,
  body:not(.account-profile-page) .segment-mobile-services h2 {
    color: #121212;
    font-size: 18px;
    font-weight: 600;
  }

  body:not(.account-profile-page) .segment-mobile-guest p {
    color: #718198;
    font-size: 13px;
  }

  body:not(.account-profile-page) .segment-mobile-guest button,
  body:not(.account-profile-page) .segment-mobile-menu-action a,
  body:not(.account-profile-page) .segment-mobile-menu-action button {
    display: grid;
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    place-items: center;
    color: #fff;
    font: 600 14px/1 var(--font-sans);
    text-align: center;
    background: #367be3;
    border: 0;
    border-radius: 6px;
  }

  body:not(.account-profile-page) .segment-mobile-utility {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 18px 0;
    border-bottom: 1px solid #e5ebf3;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-utility a,
  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-utility button {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    padding: 9px 11px;
    color: #334052;
    font-size: 13px;
    background: #f5f7fb;
  }

  body:not(.account-profile-page) .segment-mobile-services {
    padding: 20px 0 8px;
  }

  body:not(.account-profile-page) .segment-mobile-services > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services a,
  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services button {
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    overflow-wrap: anywhere;
    font-size: 12px;
    background: #f5f7fb;
  }

  body:not(.account-profile-page) .segment-mobile-menu-action {
    padding-top: 12px;
  }

  body:not(.account-profile-page) .home-main {
    padding-top: 170px;
  }

  body:not(.account-profile-page) .home-slide-copy {
    align-content: start;
    padding: 28px 22px 82px;
  }

  body:not(.account-profile-page) .home-slide-copy h1,
  body:not(.account-profile-page) .home-slide-copy h2 {
    margin-bottom: 14px;
    font-size: clamp(28px, 9vw, 34px);
    line-height: 1.12;
  }

  body:not(.account-profile-page) .home-slide-copy p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.42;
  }

  body:not(.account-profile-page) .home-slide-copy > div {
    gap: 8px;
    margin-top: 20px;
  }

  body:not(.account-profile-page) .home-slide-button,
  body:not(.account-profile-page) .home-slide-copy > div button {
    min-height: 42px;
    font-size: 15px;
  }

  body:not(.account-profile-page) .home-slider-arrow {
    top: auto;
    bottom: 18px;
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

  body:not(.account-profile-page) .home-slider-arrow.is-prev {
    left: 20px;
  }

  body:not(.account-profile-page) .home-slider-arrow.is-next {
    right: 20px;
  }

  body:not(.account-profile-page) .catalog-page .catalog-main .catalog-section,
  body:not(.account-profile-page) .chronometer-main,
  body:not(.account-profile-page) .reference-main,
  body:not(.account-profile-page) .favorites-main,
  body:not(.account-profile-page) .rating-main,
  body:not(.account-profile-page) .profile-main,
  body:not(.account-profile-page) .seo-service-main,
  body:not(.account-profile-page).legal-page main,
  body:not(.account-profile-page) .order-page-main {
    padding-top: 196px;
  }

  body:not(.account-profile-page) .home-section {
    padding-block: 42px;
  }

  body:not(.account-profile-page) .home-advantage-grid,
  body:not(.account-profile-page) .home-voice-collections,
  body:not(.account-profile-page) .home-production-grid,
  body:not(.account-profile-page) .home-example-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: none;
    justify-content: start;
    gap: 14px;
    padding: 2px 2px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body:not(.account-profile-page) .home-advantage-grid::-webkit-scrollbar,
  body:not(.account-profile-page) .home-voice-collections::-webkit-scrollbar,
  body:not(.account-profile-page) .home-production-grid::-webkit-scrollbar,
  body:not(.account-profile-page) .home-example-grid::-webkit-scrollbar {
    display: none;
  }

  body:not(.account-profile-page) .home-advantage-grid {
    grid-auto-columns: minmax(250px, 78vw);
  }

  body:not(.account-profile-page) .home-voice-collections,
  body:not(.account-profile-page) .home-example-grid {
    grid-auto-columns: minmax(286px, 86vw);
  }

  body:not(.account-profile-page) .home-production-grid {
    grid-auto-columns: minmax(260px, 82vw);
  }

  body:not(.account-profile-page) .home-advantage-grid > *,
  body:not(.account-profile-page) .home-voice-collections > *,
  body:not(.account-profile-page) .home-production-grid > *,
  body:not(.account-profile-page) .home-example-grid > * {
    scroll-snap-align: start;
  }

  body:not(.account-profile-page) .home-voice-collection {
    min-height: 0;
  }

  .mobile-rating-filter {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    margin-top: 22px;
    color: #0877f9;
    font: 600 14px/1 var(--font-sans);
    background: #eef5ff;
    border: 0;
    border-radius: 6px;
  }

  .rating-toolbar {
    display: none;
    margin-top: 12px;
  }

  .rating-toolbar.is-mobile-open {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .rating-voice-grid {
    grid-template-columns: minmax(0, 334px);
    justify-content: center;
  }

  .faq-list {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .payment-methods-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body:not(.account-profile-page) .auth-modal-panel.auth-side-panel {
    inset: 0;
    box-sizing: border-box;
    width: 100vw;
    max-width: none;
    min-height: 100dvh;
    height: 100dvh;
    max-height: none;
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0;
  }

  body:not(.account-profile-page) .auth-modal-panel .auth-panel-close {
    position: fixed;
    z-index: 32;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

  body:not(.account-profile-page) .auth-modal-panel .auth-email-form,
  body:not(.account-profile-page) .auth-modal-panel .auth-input-shell,
  body:not(.account-profile-page) .auth-modal-panel #authEmailSubmit,
  body:not(.account-profile-page) .auth-modal-panel .auth-email-form .primary-button,
  body:not(.account-profile-page) .auth-modal-panel .auth-divider,
  body:not(.account-profile-page) .auth-modal-panel .auth-provider-grid {
    width: 100%;
  }

  body.account-profile-page .auth-modal-panel [data-auth-view="email-code"] .auth-email-form,
  body.account-profile-page .auth-modal-panel [data-auth-view="email-code"] #authEmailCodeSubmit {
    width: 100%;
    max-width: 100%;
  }

  .global-audio-player {
    right: auto;
    bottom: 0;
    left: 14px;
    width: calc(100vw - 28px);
    transform: translateY(120%);
  }

  .global-audio-player.is-visible {
    transform: translateY(0);
  }

  .global-player-core {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .site-footer.segment-footer {
    padding-top: 34px;
  }

  .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 24px;
  }

  .segment-footer-branding {
    padding-bottom: 24px;
  }

  .segment-footer-column {
    display: block;
    border-top: 1px solid #dce3ec;
  }

  .segment-footer-toggle {
    min-height: 54px;
    font-size: 15px;
  }

  .segment-footer-toggle .segment-icon {
    display: block;
    width: 18px;
    height: 18px;
    transition: transform 160ms ease;
    transform: rotate(180deg);
  }

  .segment-footer-column.is-expanded .segment-footer-toggle .segment-icon {
    transform: rotate(0deg);
  }

  .segment-footer-links {
    display: none;
    gap: 10px;
    padding: 2px 0 22px;
  }

  .segment-footer-column.is-expanded .segment-footer-links {
    display: grid;
  }

  .segment-footer-column .segment-footer-links a,
  .segment-footer-column .segment-footer-links button {
    width: fit-content;
    white-space: normal;
  }

  .site-footer.segment-footer .segment-footer-bottom {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding-block: 22px 28px;
  }

  .site-footer.segment-footer .segment-payments {
    flex-wrap: wrap;
    white-space: normal;
  }

  .contacts-page .site-breadcrumbs-row {
    display: none;
  }

  .contacts-page .reference-main .contacts-page-shell {
    width: min(680px, calc(100% - 28px));
  }

  .contacts-page-shell > h1 {
    margin-top: 0;
  }
}

@media (max-width: 360px) {
  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar-inner {
    width: calc(100% - 24px);
  }

  body:not(.account-profile-page) .mobile-catalog-links {
    padding-inline: 6px;
  }

  body:not(.account-profile-page) .mobile-catalog-links a {
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 3px;
    padding-inline: 3px;
    font-size: 9px;
  }

  body:not(.account-profile-page) .mobile-catalog-links .segment-icon {
    width: 16px;
    height: 16px;
  }

  body:not(.account-profile-page) .segment-mobile-services > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Desktop cabinet role controls and page rhythm. */
@media (min-width: 821px) {
  .account-profile-page .account-profile-main {
    padding-bottom: 72px;
  }

  .account-profile-page .dashboard-sidebar {
    height: max(760px, calc(100vh - 188px));
    min-height: max(760px, calc(100vh - 188px));
  }

  .account-profile-page .dashboard-nav {
    flex: 1 1 auto;
    align-content: start;
  }

  .account-profile-page .dashboard-sidebar-foot {
    flex: 0 0 auto;
  }

  .account-profile-page .dashboard-role-links {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 78px;
    padding: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 38px;
    gap: 8px 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3eaf3;
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(34, 67, 108, 0.06);
  }

  .account-profile-page .dashboard-role-links::before,
  .account-profile-page .dashboard-role-links::after {
    position: absolute;
    bottom: 10px;
    height: 38px;
    content: "";
    border-radius: 7px;
  }

  .account-profile-page .dashboard-role-links::before {
    right: 10px;
    left: 10px;
    z-index: -2;
    background: #f0f4f9;
    box-shadow: inset 0 0 0 1px #e5ebf3;
  }

  .account-profile-page .dashboard-role-links::after {
    left: 11px;
    z-index: -1;
    width: calc((100% - 22px) / 2);
    height: 36px;
    bottom: 11px;
    background: #367be3;
    box-shadow: 0 4px 12px rgba(54, 123, 227, 0.24);
    transform: translateX(0);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
  }

  .account-profile-page .dashboard-role-links.is-talent::after {
    transform: translateX(100%);
  }

  .account-profile-page .dashboard-role-links > span {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    color: #6f7d91;
    font: 500 11px/14px var(--font-sans);
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .account-profile-page .dashboard-role-links a {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    min-height: 38px;
    padding: 0 8px;
    place-items: center;
    color: #536174;
    font: 500 13px/18px var(--font-sans);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 7px;
    box-shadow: none;
    transition: color 160ms ease, background-color 160ms ease;
  }

  .account-profile-page .dashboard-role-links a:hover:not(.is-active) {
    color: #1f64cd;
    background: rgba(54, 123, 227, 0.06);
  }

  .account-profile-page .dashboard-role-links a:focus-visible {
    outline: 2px solid #7eb0f6;
    outline-offset: -3px;
  }

  .account-profile-page .dashboard-role-links a.is-active {
    color: #fff;
    background: transparent;
    border-color: transparent;
  }

  .account-profile-page .dashboard-role-links[data-switching="true"] a {
    pointer-events: none;
  }
}

.segment-profile-card a.segment-profile-mode {
  display: grid;
  width: 260px;
  height: 56px;
  min-height: 56px;
  margin: 10px 0 0;
  padding: 0 8px 0 6px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: #273140;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  transition: color 180ms ease, background-color 180ms ease;
}

.segment-profile-card a.segment-profile-mode:hover,
.segment-profile-card a.segment-profile-mode:focus-visible {
  color: #0877f9;
  background: #ebf3ff;
  outline: none;
}

.segment-profile-card a.segment-profile-mode:focus-visible {
  box-shadow: inset 0 0 0 2px #8dbaf8;
}

.segment-profile-mode > .segment-profile-switch-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
  color: inherit;
  font-weight: 400;
  text-transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .account-profile-page .dashboard-role-links::after,
  .account-profile-page .dashboard-role-links a {
    transition-duration: 0.01ms;
  }
}

/* 04.08 public contacts and mobile chrome alignment. */
.auth-trigger-short {
  display: none;
}

.segment-menu-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.segment-menu-icon i {
  position: absolute;
  top: 7px;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.segment-menu-icon i:nth-child(1) {
  transform: translateY(-6px);
}

.segment-menu-icon i:nth-child(3) {
  transform: translateY(6px);
}

.segment-menu-toggle.is-active .segment-menu-icon i:nth-child(1) {
  transform: rotate(45deg);
}

.segment-menu-toggle.is-active .segment-menu-icon i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.35);
}

.segment-menu-toggle.is-active .segment-menu-icon i:nth-child(3) {
  transform: rotate(-45deg);
}

.contact-form-card .contacts-consent {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  cursor: pointer;
}

.contact-form-card .contacts-consent input {
  appearance: none;
  display: grid;
  width: 18px;
  height: 18px;
  min-height: 18px;
  place-items: center;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #738193;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
}

.contact-form-card .contacts-consent input:checked {
  background: #367be3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.25 6.15 2.3 2.3 5.2-5.2' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  border-color: #367be3;
}

.contact-form-card .contacts-consent input:focus-visible {
  outline: 2px solid #8dbaf8;
  outline-offset: 2px;
  box-shadow: none;
}

.contact-form-card .contacts-form-actions > button:disabled {
  color: #f7f9fc;
  background: #9aa8ba;
  cursor: not-allowed;
  opacity: 1;
}

@media (min-width: 821px) {
  .contacts-page .site-breadcrumbs-row,
  .contacts-page .reference-main .contacts-page-shell {
    width: min(1396px, calc(100% - 44px));
  }

  .contacts-page .reference-main .contacts-page-shell {
    gap: 56px;
  }

  .contacts-page-shell > h1,
  .contact-requisites-card,
  .contact-form-card {
    width: min(688px, 100%);
    justify-self: start;
  }

  .contacts-page-shell > h1 {
    margin: 8px 0 0;
    font-size: 44px;
    text-align: left;
  }

  .contact-requisites-card,
  .contact-form-card {
    height: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .contact-requisites-card {
    min-height: 0;
  }

  .contact-requisites-card h2,
  .contact-form-card h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  .contact-requisites-list {
    gap: 7px;
    margin-top: 28px;
  }

  .contact-diadoc-list {
    gap: 5px;
    margin-top: 24px;
  }

  .contact-requisites-list > div,
  .contact-diadoc-list > div {
    grid-template-columns: 248px minmax(0, 1fr);
  }

  .contact-download-button {
    min-height: 36px;
    margin-top: 28px;
    padding: 0 15px;
  }

  .contact-form-card {
    min-height: 0;
  }

  .contact-form-heading {
    margin-bottom: 24px;
  }

  .contact-form-heading p {
    margin-top: 7px;
    font-size: 16px;
  }

  .contact-form-card .contacts-form {
    gap: 18px;
  }

  .contact-form-card .contacts-form-grid {
    gap: 20px;
  }

  .contact-form-card input,
  .contact-form-card select {
    height: 46px;
    min-height: 46px;
    padding-block: 11px;
  }

  .contact-form-card textarea {
    height: 92px;
    min-height: 92px;
  }

  .contact-form-card .contact-field {
    gap: 8px;
  }

  .contact-form-card .contacts-form-actions {
    display: grid;
    min-height: 36px;
    align-items: center;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
  }

  .contact-form-card .contacts-consent {
    align-items: center;
    align-self: center;
  }

  .contact-form-card .contacts-form-actions > button {
    width: 112px;
    min-width: 112px;
    min-height: 36px;
    padding: 0 12px;
  }

  .mobile-catalog-links {
    display: none !important;
  }
}

@media (max-width: 820px) {
  body:not(.account-profile-page) .site-header.segment-header,
  body:not(.account-profile-page) .site-header.segment-header.is-compact {
    height: 180px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar,
  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar-inner {
    height: 112px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar-inner {
    display: grid;
    width: min(calc(100% - 40px), 680px);
    padding: 9px 0;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: 42px 42px;
    gap: 10px 8px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-menu-toggle {
    display: grid;
    width: 40px;
    height: 40px;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    color: #253247;
    background: transparent;
    border: 0;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-brand {
    width: clamp(108px, 32vw, 136px);
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-brand .brand-logo-image {
    width: 100%;
    max-height: 34px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions {
    display: flex;
    min-width: 0;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  body:not(.account-profile-page) .segment-header-actions .auth-trigger {
    width: auto;
    min-width: 54px;
    min-height: 36px;
    padding: 0 9px;
    color: #1769d2;
    font-size: 12px;
    background: #edf5ff;
    border: 1px solid #d4e5fb;
  }

  body:not(.account-profile-page) .segment-header-actions .auth-trigger-long {
    display: none;
  }

  body:not(.account-profile-page) .segment-header-actions .auth-trigger-short {
    display: inline;
  }

  body:not(.account-profile-page) .segment-header-actions .segment-account-bell,
  body:not(.account-profile-page) .segment-header-actions .segment-balance {
    display: none;
  }

  body:not(.account-profile-page) .segment-header-actions .segment-profile-wrap,
  body:not(.account-profile-page) .segment-header-actions .user-chip {
    display: block;
  }

  body:not(.account-profile-page) .segment-header-actions .segment-profile-wrap .user-chip {
    width: 38px;
    height: 38px;
    padding: 0;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-search {
    display: grid;
    height: 42px;
    grid-column: 1 / -1;
    grid-row: 2;
  }

  body:not(.account-profile-page) .mobile-catalog-links {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 68px;
    gap: 8px;
    align-items: center;
    padding: 8px max(20px, calc((100vw - 680px) / 2));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    background: #fff;
    border-top: 1px solid #e5ebf3;
    scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body:not(.account-profile-page) .mobile-catalog-links::-webkit-scrollbar {
    display: none;
  }

  body:not(.account-profile-page) .mobile-catalog-links a {
    display: grid;
    min-width: 132px;
    height: 50px;
    flex: 0 0 auto;
    padding: 5px 10px 5px 7px;
    grid-template-columns: 32px auto;
    gap: 7px;
    align-items: center;
    color: #334052;
    font: 500 12px/1.2 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    background: #f7f9fc;
    border: 1px solid #e4eaf2;
    border-radius: 6px;
    scroll-snap-align: start;
  }

  body:not(.account-profile-page) .mobile-catalog-links .mobile-catalog-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
  }

  body:not(.account-profile-page) .mobile-catalog-links .mobile-catalog-icon img {
    display: block;
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  body:not(.account-profile-page) .mobile-catalog-links .mobile-catalog-label {
    min-width: 0;
  }

  body:not(.account-profile-page) .segment-mobile-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
    transform: translateY(-10px) scale(0.995);
    transform-origin: top center;
  }

  body:not(.account-profile-page) .segment-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
    transform: none;
  }

  body:not(.account-profile-page) .home-main {
    padding-top: 180px;
  }
}

.account-profile-page .mobile-catalog-links {
  display: none !important;
}

@media (max-width: 480px) {
  .contacts-page .reference-main {
    padding-bottom: 68px;
  }

  .contacts-page .reference-main .contacts-page-shell {
    width: calc(100% - 40px);
    gap: 34px;
  }

  .contacts-page-shell > h1 {
    width: 100%;
    margin: 0;
    font-size: 32px;
    line-height: 1.15;
    text-align: left;
  }

  .contact-requisites-card,
  .contact-form-card {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .contact-requisites-card h2,
  .contact-form-card h2 {
    font-size: 24px;
    line-height: 1.25;
  }

  .contact-requisites-list {
    margin-top: 24px;
  }

  .contact-diadoc-list {
    margin-top: 22px;
  }

  .contact-requisites-list > div,
  .contact-diadoc-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .contact-requisites-list dd,
  .contact-diadoc-list dd {
    overflow-wrap: anywhere;
  }

  .contact-download-button {
    width: 100%;
    min-height: 44px;
    margin-top: 26px;
  }

  .contact-form-heading {
    margin-bottom: 24px;
  }

  .contact-form-heading p {
    margin-top: 8px;
    font-size: 15px;
  }

  .contact-form-card .contacts-form,
  .contact-form-card .contacts-form-grid {
    gap: 16px;
  }

  .contact-form-card .contacts-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form-card input,
  .contact-form-card select,
  .contact-form-card textarea {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 16px;
    background-color: #fff;
  }

  .contact-form-card textarea {
    min-height: 104px;
  }

  .contact-form-card .contacts-form-actions {
    display: flex;
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .contact-form-card .contacts-form-actions > button {
    order: 2;
    width: 100%;
    min-height: 44px;
  }

  .contact-form-card .contacts-consent {
    order: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .segment-menu-icon i,
  body:not(.account-profile-page) .segment-mobile-menu {
    transition-duration: 0.01ms;
  }
}

/* Mobile menu reference alignment and final contacts legibility. */
.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder,
.contact-form-card select:invalid {
  color: #5f6c7d;
}

@media (min-width: 821px) {
  .contact-requisites-list > div,
  .contact-diadoc-list > div {
    grid-template-columns: 228px minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  body:not(.account-profile-page) .segment-mobile-menu {
    padding-inline: 20px;
  }

  body:not(.account-profile-page) .segment-mobile-menu-close {
    width: 32px;
    min-height: 32px;
    color: #9aa8ba;
    background: transparent;
    border-radius: 0;
  }

  body:not(.account-profile-page) .segment-mobile-guest,
  body:not(.account-profile-page) .segment-mobile-account {
    gap: 10px;
    padding: 20px 0;
  }

  body:not(.account-profile-page) .segment-mobile-account-summary {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
  }

  body:not(.account-profile-page) .segment-mobile-account-summary > span {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  body:not(.account-profile-page) .segment-mobile-account-summary strong,
  body:not(.account-profile-page) .segment-mobile-account-summary b {
    display: block;
    min-width: 0;
    color: #121212;
    font: 600 18px/1.25 var(--font-sans);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  body:not(.account-profile-page) .segment-mobile-account-summary em {
    display: grid;
    min-width: 47px;
    min-height: 24px;
    padding: 0 8px;
    place-items: center;
    color: #fff;
    font: 600 12px/1 var(--font-sans);
    font-style: normal;
    background: #29bd5f;
    border-radius: 12px;
  }

  body:not(.account-profile-page) .segment-mobile-account > a {
    display: grid;
    width: 100%;
    min-height: 44px;
    place-items: center;
    color: #fff;
    font: 500 15px/1 var(--font-sans);
    text-decoration: none;
    background: #0877f9;
    border-radius: 6px;
  }

  body:not(.account-profile-page) .segment-mobile-utility {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-utility a,
  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-utility button {
    min-height: 33px;
    padding: 5px 0;
    color: #121212;
    font: 400 16px/1.35 var(--font-sans);
    background: transparent;
    border-radius: 0;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-utility .segment-mobile-notifications {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 9px;
  }

  body:not(.account-profile-page) .segment-mobile-services {
    padding-top: 16px;
  }

  body:not(.account-profile-page) .segment-mobile-services > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services a,
  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services button {
    display: grid;
    min-width: 0;
    min-height: 58px;
    padding: 5px 12px 5px 6px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: #121212;
    font: 400 14px/1.25 var(--font-sans);
    text-decoration: none;
    background: #e9f2ff;
    border-radius: 6px;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services a > span,
  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services button > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    background: #fff;
    border-radius: 6px;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services b {
    min-width: 0;
    color: inherit;
    font: inherit;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .contacts-page-shell > h1 {
    font-size: 26px;
  }
}

/* 04.08 mobile shared chrome geometry and componentized footer. */
.segment-footer-support {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.segment-payments-label {
  display: inline;
}

.segment-balance-compact {
  display: none;
}

@media (max-width: 820px) {
  body:not(.account-profile-page) .site-header.segment-header,
  body:not(.account-profile-page) .site-header.segment-header.is-compact {
    height: 160px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar,
  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar-inner {
    height: 104px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-mainbar-inner {
    width: min(calc(100% - 40px), 680px);
    padding: 4px 0;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: 52px 36px;
    column-gap: 10px;
    row-gap: 8px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-menu-toggle {
    width: 40px;
    height: 48px;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    place-items: center;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-menu-icon {
    width: 22px;
    height: 16px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-menu-icon i {
    width: 22px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-brand {
    width: 128px;
    height: 32px;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    margin-top: 0;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-brand .brand-logo-image {
    display: block;
    width: 128px;
    height: 32px;
    max-height: none;
    object-fit: contain;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions {
    height: 52px;
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    gap: 8px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions .segment-balance {
    display: none;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-balance-toggle {
    display: none;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions .segment-account-bell {
    display: grid;
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    place-items: center;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions .segment-account-bell .segment-bell-svg {
    width: 28px;
    height: 28px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions .segment-account-bell .notification-badge {
    top: 0;
    right: 0;
    width: 18px;
    min-width: 18px;
    height: 18px;
  }

  body:not(.account-profile-page) .segment-header-actions .auth-trigger {
    width: 86px;
    min-width: 86px;
    min-height: 30px;
    height: 30px;
    padding: 0 10px;
    color: #fff;
    font-size: 13px;
    background: #367be3;
    border: 0;
  }

  body:not(.account-profile-page) .segment-header-actions .segment-profile-wrap .user-chip {
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-search {
    width: 100%;
    height: 36px;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) 36px;
    border-color: #367be3;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-search input {
    box-sizing: border-box;
    height: 34px;
    min-height: 0;
    padding-block: 0;
    padding-inline: 13px 8px;
    font-size: 14px;
    line-height: 34px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-search button {
    width: 36px;
    height: 34px;
  }

  body:not(.account-profile-page) .segment-mobile-menu {
    padding: 0 20px 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }

  body:not(.account-profile-page) .segment-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  body:not(.account-profile-page) .segment-mobile-menu-head {
    display: grid;
    width: 100%;
    height: 60px;
    min-height: 60px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    justify-content: stretch;
  }

  body:not(.account-profile-page) .segment-mobile-menu--account .segment-mobile-menu-head {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
  }

  body:not(.account-profile-page) .segment-mobile-menu--account .segment-mobile-menu-head .segment-online {
    justify-self: end;
  }

  body:not(.account-profile-page) .segment-mobile-menu-close {
    display: grid;
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    align-self: start;
    justify-self: start;
    margin-top: 6px;
    place-items: center;
    color: #253247;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  body:not(.account-profile-page) .segment-mobile-menu-head .segment-online {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-self: end;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
  }

  body:not(.account-profile-page) .segment-mobile-menu-head .segment-online > i {
    width: 10px;
    min-width: 10px;
    height: 10px;
    margin: 0;
    flex: 0 0 10px;
  }

  body:not(.account-profile-page) .segment-mobile-menu-head .segment-online b {
    min-width: 0;
    font-variant-numeric: tabular-nums;
  }

  body:not(.account-profile-page) .segment-mobile-menu-notifications {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    justify-self: end;
    place-items: center;
    color: #253247;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  body:not(.account-profile-page) .segment-mobile-menu-notifications .segment-bell-svg {
    display: block;
    width: 28px;
    height: 28px;
  }

  body:not(.account-profile-page) .segment-mobile-menu-notifications .notification-badge {
    top: 0;
    right: 0;
    display: grid;
    box-sizing: border-box;
    width: 18px;
    min-width: 18px;
    height: 18px;
    padding: 0;
    place-items: center;
    color: #fff;
    font: 600 10px/1 var(--font-sans);
    text-align: center;
    background: #e34848;
    border: 2px solid #fff;
    border-radius: 50%;
  }

  body:not(.account-profile-page) .segment-mobile-menu-notifications .notification-badge[hidden] {
    display: none !important;
  }

  body:not(.account-profile-page) .segment-menu-toggle:focus:not(:focus-visible),
  body:not(.account-profile-page) .segment-mobile-menu-close:focus:not(:focus-visible),
  body:not(.account-profile-page) .segment-mobile-menu-notifications:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  body:not(.account-profile-page) .segment-menu-toggle:focus-visible,
  body:not(.account-profile-page) .segment-mobile-menu-close:focus-visible,
  body:not(.account-profile-page) .segment-mobile-menu-notifications:focus-visible {
    outline: 2px solid #0877f9;
    outline-offset: 2px;
    box-shadow: none;
  }

  body:not(.account-profile-page) .segment-mobile-account-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.account-profile-page) .segment-mobile-account-summary > span {
    width: 100%;
  }

  body:not(.account-profile-page) .segment-mobile-account-summary em,
  body:not(.account-profile-page) .segment-mobile-utility .segment-mobile-notifications {
    display: none;
  }

  body:not(.account-profile-page) .dashboard-notification-drawer {
    top: 172px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 184px);
  }

  body:not(.account-profile-page) .segment-mobile-services > div {
    gap: 10px;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services a,
  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services button {
    box-sizing: border-box;
    height: 58px;
    min-height: 58px;
    padding: 5px 12px 5px 6px;
    grid-template-columns: 46px minmax(0, 1fr);
    border-radius: 6px;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services a > span,
  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services button > span {
    width: 46px;
    height: 46px;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services img {
    width: 46px;
    height: 46px;
  }

  body:not(.account-profile-page) .segment-mobile-menu .segment-mobile-services b {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body:not(.account-profile-page) .segment-mobile-menu.is-pointer-open .segment-mobile-menu-close:focus,
  body:not(.account-profile-page) .segment-mobile-menu.is-pointer-open .segment-mobile-menu-close:focus-visible {
    outline: none;
    box-shadow: none;
  }

  body:not(.account-profile-page) .mobile-catalog-links {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    gap: 12px;
    align-items: center;
    padding: 10px max(20px, calc((100vw - 680px) / 2));
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    background: #fff;
    border: 0;
    scroll-padding-inline: 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body:not(.account-profile-page) .mobile-catalog-links a {
    display: grid;
    width: max-content;
    min-width: max-content;
    height: 36px;
    flex: 0 0 auto;
    padding: 6px 10px;
    grid-template-columns: 24px auto;
    gap: 8px;
    align-items: center;
    color: #121212;
    font: 400 14px/1.2 var(--font-sans);
    white-space: nowrap;
    background: #ebf3ff;
    border: 0;
    border-radius: 6px;
    scroll-snap-align: start;
  }

  body:not(.account-profile-page) .mobile-catalog-links [data-mobile-catalog-item="all"] {
    width: 123px;
    min-width: 123px;
  }

  body:not(.account-profile-page) .mobile-catalog-links [data-mobile-catalog-item="featured"] {
    width: 166px;
    min-width: 166px;
  }

  body:not(.account-profile-page) .mobile-catalog-links [data-mobile-catalog-item="male"] {
    width: 123px;
    min-width: 123px;
  }

  body:not(.account-profile-page) .mobile-catalog-links .mobile-catalog-icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
  }

  body:not(.account-profile-page) .mobile-catalog-links .mobile-catalog-icon img {
    width: 24px;
    height: 24px;
  }

  body:not(.account-profile-page) .catalog-page .catalog-main .catalog-section,
  body:not(.account-profile-page) .chronometer-main,
  body:not(.account-profile-page) .reference-main,
  body:not(.account-profile-page) .favorites-main,
  body:not(.account-profile-page) .rating-main,
  body:not(.account-profile-page) .profile-main,
  body:not(.account-profile-page) .seo-service-main,
  body:not(.account-profile-page).legal-page main,
  body:not(.account-profile-page) .order-page-main,
  body:not(.account-profile-page) .home-main {
    padding-top: 160px;
  }

  .site-footer.segment-footer {
    padding-top: 34px;
    background: #f7f9fd;
  }

  .site-footer.segment-footer .segment-footer-grid,
  .site-footer.segment-footer .segment-footer-bottom {
    width: min(calc(100% - 40px), 680px);
  }

  .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0 0 20px;
  }

  .site-footer.segment-footer .segment-footer-branding {
    display: grid;
    justify-items: center;
    padding: 0 0 26px;
  }

  .site-footer.segment-footer .segment-footer-branding .segment-brand {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 320 / 74;
    margin: 0 0 20px;
  }

  .site-footer.segment-footer .segment-footer-branding .brand-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .site-footer.segment-footer .segment-socials {
    display: flex;
    justify-content: center;
    gap: 14px;
  }

  .site-footer.segment-footer .segment-socials a,
  .site-footer.segment-footer .segment-socials img {
    width: 30px;
    height: 30px;
  }

  .site-footer.segment-footer .segment-footer-column {
    display: block;
    border: 0;
  }

  .site-footer.segment-footer .segment-footer-toggle {
    display: flex;
    width: 100%;
    min-height: 50px;
    height: 50px;
    padding: 0;
    align-items: center;
    justify-content: space-between;
    color: #121212;
    font: 600 16px/1.2 var(--font-sans);
    text-align: left;
    background: transparent;
    border: 0;
  }

  .site-footer.segment-footer .segment-footer-toggle .segment-icon {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform 180ms ease;
    transform: rotate(180deg);
  }

  .site-footer.segment-footer .segment-footer-column.is-expanded .segment-footer-toggle .segment-icon {
    transform: rotate(0deg);
  }

  .site-footer.segment-footer .segment-footer-links {
    display: grid;
    max-height: 0;
    gap: 10px;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 240ms ease, opacity 180ms ease, padding-bottom 240ms ease, visibility 0s linear 240ms;
  }

  .site-footer.segment-footer .segment-footer-column.is-expanded .segment-footer-links {
    display: grid;
    max-height: 640px;
    padding: 2px 0 20px;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .site-footer.segment-footer .segment-footer-bottom {
    display: flex;
    min-height: 0;
    margin-top: 0;
    padding: 0 0 28px;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    border-top: 0;
  }

  .site-footer.segment-footer .segment-footer-support {
    display: grid;
    order: 1;
    width: 100%;
    padding: 22px 0;
    justify-items: start;
    gap: 6px;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    border-top: 1px solid #d4dae5;
  }

  .site-footer.segment-footer .segment-footer-support a {
    color: #121212;
  }

  .site-footer.segment-footer .segment-payments {
    display: flex;
    order: 2;
    width: 100%;
    padding: 22px 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    border-top: 1px solid #d4dae5;
  }

  .site-footer.segment-footer .segment-payments-label {
    display: none;
  }

  .site-footer.segment-footer .segment-payments img {
    width: 38px;
    height: 24px;
    flex: 0 0 auto;
  }

  .site-footer.segment-footer .segment-footer-copyright {
    order: 3;
    width: 100%;
    padding-top: 2px;
    text-align: center;
  }
}

@media (max-width: 360px) {
  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions {
    gap: 6px;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-header-actions .segment-balance {
    grid-template-columns: minmax(0, auto);
    gap: 0;
  }

  body:not(.account-profile-page) .site-header.segment-header [data-balance-text] {
    display: none;
  }

  body:not(.account-profile-page) .site-header.segment-header .segment-balance-link .segment-balance-compact {
    display: block;
    font-size: 12px;
  }
}

@media (min-width: 721px) and (max-width: 820px) {
  body:not(.account-profile-page) .segment-mobile-menu {
    padding-inline: calc(50vw - 340px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.account-profile-page) .segment-mobile-menu,
  body:not(.account-profile-page) .segment-menu-icon i,
  .site-footer.segment-footer .segment-footer-links,
  .site-footer.segment-footer .segment-footer-toggle .segment-icon {
    transition-duration: 0.01ms;
  }
}

.segment-mobile-menu-close.is-active .segment-menu-icon i:nth-child(1) {
  transform: rotate(45deg);
}

.segment-mobile-menu-close.is-active .segment-menu-icon i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.35);
}

.segment-mobile-menu-close.is-active .segment-menu-icon i:nth-child(3) {
  transform: rotate(-45deg);
}

/* Authenticated mobile logout and talent shared-menu contract. */
.customer-mobile-account-logout[hidden] {
  display: none !important;
}

@media (max-width: 820px) {
  .segment-mobile-menu .segment-mobile-account .segment-mobile-account-logout {
    display: grid;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    color: #435065;
    font: 500 14px/1.25 var(--font-sans);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
    transition: color 180ms ease, background-color 180ms ease;
  }

  .segment-mobile-menu .segment-mobile-account .segment-mobile-account-logout:hover,
  .segment-mobile-menu .segment-mobile-account .segment-mobile-account-logout:focus-visible {
    color: #0877f9;
    background: #ebf3ff;
  }

  .segment-mobile-menu .segment-mobile-account .segment-mobile-account-logout .segment-icon {
    width: 22px;
    height: 22px;
  }

  body.customer-mobile-cabinet .customer-mobile-account-logout > svg {
    width: 28px;
    height: 28px;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu {
    position: fixed;
    z-index: 420;
    inset: 0;
    display: block;
    box-sizing: border-box;
    width: 100vw;
    height: 100dvh;
    padding: 0 20px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #fff;
    border: 0;
    transform: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu[hidden] {
    display: none;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    width: 100%;
    height: 60px;
    min-height: 60px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e5ebf3;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu-close {
    display: grid;
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    align-self: start;
    justify-self: start;
    margin-top: 6px;
    place-items: center;
    color: #253247;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu-head .segment-online {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-self: end;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu-head .segment-online > i {
    width: 10px;
    min-width: 10px;
    height: 10px;
    margin: 0;
    flex: 0 0 10px;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-guest,
  body.account-profile-page[data-account-role="talent"] .segment-mobile-account {
    display: grid;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid #e5ebf3;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-account-summary,
  body.account-profile-page[data-account-role="talent"] .segment-mobile-account-summary > span {
    display: grid;
    min-width: 0;
    gap: 5px;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-account-summary strong,
  body.account-profile-page[data-account-role="talent"] .segment-mobile-account-summary b {
    display: block;
    min-width: 0;
    color: #121212;
    font: 600 18px/1.25 var(--font-sans);
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-account > a {
    display: grid;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    place-items: center;
    color: #fff;
    font: 500 15px/1 var(--font-sans);
    text-align: center;
    text-decoration: none;
    background: #0877f9;
    border-radius: 6px;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-utility {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 18px 0;
    border-bottom: 1px solid #e5ebf3;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu .segment-mobile-utility a,
  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu .segment-mobile-utility button {
    display: flex;
    min-width: 0;
    min-height: 33px;
    align-items: center;
    padding: 5px 0;
    color: #121212;
    font: 400 16px/1.35 var(--font-sans);
    background: transparent;
    border-radius: 0;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-services {
    padding: 16px 0 8px;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-services h2 {
    margin: 0;
    color: #121212;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-services > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu .segment-mobile-services a,
  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu .segment-mobile-services button {
    display: grid;
    min-width: 0;
    min-height: 58px;
    padding: 5px 12px 5px 6px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: #121212;
    font: 400 14px/1.25 var(--font-sans);
    text-decoration: none;
    background: #e9f2ff;
    border-radius: 6px;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu .segment-mobile-services a > span,
  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu .segment-mobile-services button > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    background: #fff;
    border-radius: 6px;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu .segment-mobile-services img {
    display: block;
    width: 46px;
    height: 46px;
    object-fit: contain;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu .segment-mobile-services b {
    min-width: 0;
    color: inherit;
    font: inherit;
    overflow-wrap: anywhere;
  }

  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu-action {
    padding-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .segment-mobile-account-logout,
  body.account-profile-page[data-account-role="talent"] .segment-mobile-menu {
    transition-duration: 0.01ms;
  }
}

/* Shared cabinet news interaction and read-only modal state. */
.dashboard-modal {
  z-index: 1200;
}

.account-profile-page .dashboard-news-card {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.account-profile-page .dashboard-news-card:hover {
  background: #fbfdff;
  box-shadow: 0 8px 24px rgba(35, 62, 97, 0.08);
  transform: translateY(-1px);
}

.dashboard-modal-actions:has(#dashboardModalSubmit[hidden]) {
  grid-template-columns: 1fr;
}

#dashboardModalSubmit[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .account-profile-page .dashboard-news-card {
    transition-duration: 0.01ms;
  }

  .account-profile-page .dashboard-news-card:hover {
    transform: none;
  }
}

/* Dialector shared player 06.08 reference */
.global-audio-player {
  position: fixed;
  z-index: 360;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 106px;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(100% + 16px));
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease;
  will-change: transform, opacity;
}

.global-audio-player.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.is-performer-modal-open .global-audio-player {
  z-index: 360;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
}

.global-player-core {
  display: grid;
  width: 100%;
  height: 106px;
  min-height: 0;
  box-sizing: border-box;
  grid-template-areas:
    "track track track track"
    "transport download voice close";
  grid-template-columns: 130px 40px minmax(0, 1fr) 40px;
  grid-template-rows: 16px 90px;
  column-gap: 10px;
  align-items: center;
  padding: 0 24px;
  overflow: hidden;
  color: #121212;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 -10px 34px rgba(26, 48, 82, 0.13);
  backdrop-filter: none;
}

.global-player-track {
  position: relative;
  grid-area: track;
  display: block;
  width: calc(100% + 48px);
  height: 16px;
  min-width: 0;
  align-self: start;
  margin: 0 0 0 -24px;
  overflow: visible;
}

.global-player-track input[type="range"] {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 16px;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  accent-color: #0877f9;
  background: linear-gradient(
    to right,
    #0877f9 0 var(--range-progress, 0%),
    #dce2e9 var(--range-progress, 0%) 100%
  );
  border: 0;
  border-radius: 0;
  outline: 0;
}

.global-player-track input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.global-player-track input[type="range"]::-webkit-slider-thumb {
  width: 1px;
  height: 16px;
  margin-top: 0;
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.global-player-track input[type="range"]::-moz-range-track {
  width: 100%;
  height: 16px;
  background: #dce2e9;
  border: 0;
  border-radius: 0;
}

.global-player-track input[type="range"]::-moz-range-progress {
  height: 16px;
  background: #0877f9;
  border-radius: 0;
}

.global-player-track input[type="range"]::-moz-range-thumb {
  width: 1px;
  height: 16px;
  opacity: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.global-player-track input[type="range"]:focus-visible {
  outline: 2px solid rgba(8, 119, 249, 0.38);
  outline-offset: -2px;
}

.global-player-track .global-player-times {
  position: absolute;
  z-index: 2;
  inset: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #68768a;
  font: 500 11px/16px var(--font-sans);
  letter-spacing: 0;
  pointer-events: none;
}

.global-player-current {
  color: #fff;
  text-shadow: 0 1px 2px rgba(31, 60, 98, 0.42);
}

.global-player-total {
  margin-left: auto;
}

.global-player-remaining {
  display: none;
}

.global-player-transport {
  grid-area: transport;
  display: flex;
  width: 135px;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  transform: translate(-5px, -16px);
}

.global-player-skip,
.global-player-play,
.global-player-download,
.global-player-close {
  position: relative;
  display: grid;
  width: 38px;
  min-width: 38px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
  color: #8492a6;
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.global-player-play {
  grid-area: auto;
  color: #0877f9;
}

.global-player-download {
  grid-area: download;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  color: #8492a6;
  transform: translate(5px, -16px);
}

.global-player-close {
  grid-area: close;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  justify-self: end;
  color: #9aa6b7;
  font-size: 0;
  transform: translateY(-16px);
}

.global-player-skip:hover,
.global-player-skip:focus-visible,
.global-player-play:hover,
.global-player-play:focus-visible,
.global-player-download:hover,
.global-player-download:focus-visible,
.global-player-close:hover,
.global-player-close:focus-visible {
  color: #0877f9;
  background: #eef5ff;
  outline: none;
}

.global-player-skip:focus-visible,
.global-player-play:focus-visible,
.global-player-download:focus-visible,
.global-player-close:focus-visible {
  box-shadow: 0 0 0 2px rgba(8, 119, 249, 0.22);
}

.global-player-skip svg {
  display: block;
  width: 22px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.global-player-play span {
  position: static;
  top: auto;
  left: auto;
  display: block;
  width: 13px;
  height: 16px;
  margin: 0 0 0 2px;
  background: currentColor;
  border: 0;
  border-radius: 0;
  clip-path: none;
  filter: none;
  transform: none;
  transition: none;
  -webkit-mask: url("./assets/player-play-shape.svg") center / contain no-repeat;
  mask: url("./assets/player-play-shape.svg") center / contain no-repeat;
}

.global-audio-player.is-playing .global-player-play span {
  width: 16px;
  height: 18px;
  margin: 0;
  background: currentColor;
  clip-path: none;
  transform: none;
  -webkit-mask: url("./assets/player-pause-shape.svg") center / contain no-repeat;
  mask: url("./assets/player-pause-shape.svg") center / contain no-repeat;
}

.global-player-play::after {
  content: none !important;
  display: none !important;
}

.global-player-download svg,
.global-player-close svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.global-player-voice {
  grid-area: voice;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 21px;
  align-items: center;
  min-width: 0;
  transform: translateY(-16px);
}

.global-player-avatar {
  position: relative;
  display: block;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 6px;
}

.global-player-avatar img,
.global-player-avatar > span:not(.voice-presence) {
  display: grid;
  width: 70px;
  height: 70px;
  place-items: center;
  object-fit: cover;
  border-radius: 6px;
}

.global-player-avatar .voice-presence {
  display: none;
}

.global-player-copy {
  min-width: 0;
}

.global-player-voice strong,
.global-player-voice small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.global-player-voice strong {
  color: #121212;
  font: 500 16px/1.3 var(--font-sans);
}

.global-player-voice small {
  margin-top: 3px;
  color: #77859a;
  font: 400 13px/1.35 var(--font-sans);
}

@media (max-width: 600px) {
  .global-audio-player {
    right: auto;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 50%;
    width: min(360px, calc(100vw - 32px));
    max-width: none;
    height: 220px;
    transform: translate(-50%, calc(100% + 32px));
  }

  .global-audio-player.is-visible {
    transform: translate(-50%, 0);
  }

  body.is-performer-modal-open .global-audio-player {
    right: auto;
    bottom: max(16px, env(safe-area-inset-bottom));
    left: 50%;
    width: min(360px, calc(100vw - 32px));
    max-width: none;
  }

  body.customer-mobile-cabinet .global-audio-player,
  body.customer-mobile-cabinet.is-performer-modal-open .global-audio-player {
    bottom: calc(var(--customer-mobile-nav-height, 50px) + 12px);
  }

  .global-player-core {
    width: 100%;
    height: 220px;
    grid-template-areas:
      "download empty close"
      "voice voice voice"
      "track track track"
      "transport transport transport";
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-rows: 38px 48px 62px 56px;
    gap: 0;
    padding: 10px 20px 6px;
    background: #fff;
    border: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
  }

  .global-player-download {
    grid-area: download;
    align-self: start;
    justify-self: start;
    transform: none;
  }

  .global-player-close,
  .global-player-voice {
    transform: none;
  }

  .global-player-close {
    grid-area: close;
    align-self: start;
    justify-self: end;
  }

  .global-player-voice {
    grid-area: voice;
    display: block;
    align-self: center;
    min-width: 0;
    text-align: center;
  }

  .global-player-avatar {
    display: none;
  }

  .global-player-copy {
    width: 100%;
    min-width: 0;
  }

  .global-player-voice strong,
  .global-player-voice small {
    max-width: 100%;
    text-align: center;
  }

  .global-player-voice strong {
    font-size: 16px;
    line-height: 1.3;
  }

  .global-player-voice small {
    margin-top: 3px;
    color: #738193;
    font-size: 13px;
  }

  .global-player-track {
    grid-area: track;
    width: 100%;
    height: 62px;
    align-self: stretch;
    margin: 0;
    overflow: visible;
  }

  .global-player-track .global-player-times {
    inset: 4px 0 auto;
    height: 18px;
    color: #79808d;
    font-size: 12px;
    line-height: 18px;
    text-shadow: none;
  }

  .global-player-current {
    color: #79808d;
    text-shadow: none;
  }

  .global-player-total {
    display: none;
  }

  .global-player-remaining {
    display: inline;
    margin-left: auto;
  }

  .global-player-track input[type="range"] {
    top: 32px;
    bottom: auto;
    width: 100%;
    height: 4px;
    background: linear-gradient(
      to right,
      #0877f9 0 var(--range-progress, 0%),
      #d4dae5 var(--range-progress, 0%) 100%
    );
    border-radius: 999px;
  }

  .global-player-track input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border-radius: 999px;
  }

  .global-player-track input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    opacity: 1;
    background: #0877f9;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(8, 119, 249, 0.32);
  }

  .global-player-track input[type="range"]::-moz-range-track {
    height: 4px;
    background: #d4dae5;
    border-radius: 999px;
  }

  .global-player-track input[type="range"]::-moz-range-progress {
    height: 4px;
    background: #0877f9;
    border-radius: 999px;
  }

  .global-player-track input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    opacity: 1;
    background: #0877f9;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(8, 119, 249, 0.32);
  }

  .global-player-transport {
    grid-area: transport;
    width: auto;
    height: 56px;
    align-self: center;
    justify-self: center;
    justify-content: center;
    gap: 18px;
    transform: translateY(-28px);
  }

  .global-player-skip,
  .global-player-play {
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .global-player-skip svg {
    width: 24px;
    height: 20px;
  }

  .global-player-play span {
    width: 14px;
    height: 18px;
  }

  .global-player-play {
    color: #79808d;
  }

  .global-audio-player.is-playing .global-player-play span {
    width: 17px;
    height: 19px;
  }
}

/* Shared typography contract: public amounts keep Inter's proportional figures. */
:where(html, html *) {
  font-variant-numeric: proportional-nums !important;
  font-feature-settings: "pnum" 1, "tnum" 0 !important;
}

.voice-specs :is(.rate-amount, .rate-currency) {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1;
}

.voice-specs .rate-currency {
  position: static;
  top: auto;
}

@media (min-width: 601px) and (max-width: 780px) {
  body.customer-mobile-cabinet .global-audio-player,
  body.customer-mobile-cabinet.is-performer-modal-open .global-audio-player {
    bottom: var(--customer-mobile-nav-height, 50px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-audio-player,
  .global-player-skip,
  .global-player-play,
  .global-player-download,
  .global-player-close {
    transition-duration: 0.01ms;
  }
}

/* Dialector shared player 06.08 geometry correction */
.global-audio-player {
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 106px;
  background: #fff;
  box-shadow: none;
  transform: translateY(calc(100% + 16px));
}

.global-audio-player.is-visible {
  transform: translateY(0);
}

body.is-performer-modal-open .global-audio-player,
body.customer-mobile-cabinet .global-audio-player,
body.customer-mobile-cabinet.is-performer-modal-open .global-audio-player {
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
}

.global-player-core {
  display: grid;
  width: min(100%, 1200px);
  max-width: 1200px;
  height: 106px;
  margin: 0 auto;
  grid-template-areas:
    "track track track track track track"
    ". transport download voice close .";
  grid-template-columns: 12px 132px 40px minmax(0, 1fr) 40px 12px;
  grid-template-rows: 16px 90px;
  gap: 0 8px;
  align-items: center;
  padding: 0;
  overflow: hidden;
  color: #121212;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.global-player-track {
  position: relative;
  grid-area: track;
  display: block;
  width: 100%;
  height: 16px;
  min-width: 0;
  align-self: start;
  margin: 0;
  overflow: visible;
}

.global-player-track input[type="range"] {
  inset: 0;
  width: 100%;
  height: 16px;
  margin: 0;
  background: linear-gradient(
    to right,
    #0877f9 0 var(--range-progress, 0%),
    #dce2e9 var(--range-progress, 0%) 100%
  );
  border-radius: 0;
}

.global-player-track input[type="range"]::-webkit-slider-runnable-track {
  height: 16px;
  border-radius: 0;
}

.global-player-track input[type="range"]::-webkit-slider-thumb {
  width: 1px;
  height: 16px;
  margin-top: 0;
  opacity: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.global-player-track input[type="range"]::-moz-range-track,
.global-player-track input[type="range"]::-moz-range-progress {
  height: 16px;
  border-radius: 0;
}

.global-player-track input[type="range"]::-moz-range-track {
  background: #dce2e9;
}

.global-player-track input[type="range"]::-moz-range-progress {
  background: #0877f9;
}

.global-player-track input[type="range"]::-moz-range-thumb {
  width: 1px;
  height: 16px;
  opacity: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.global-player-track .global-player-times {
  inset: 0 12px;
  height: 16px;
  color: #68768a;
  font: 500 11px/16px var(--font-sans);
  text-shadow: none;
}

.global-player-current {
  color: #fff;
  text-shadow: 0 1px 2px rgba(31, 60, 98, 0.42);
}

.global-player-total {
  display: inline;
  margin-left: auto;
}

.global-player-remaining {
  display: none;
}

.global-player-transport {
  grid-area: transport;
  display: flex;
  width: 132px;
  height: 48px;
  align-self: center;
  justify-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  transform: none;
}

.global-player-skip,
.global-player-play {
  width: 38px;
  min-width: 38px;
  height: 40px;
  min-height: 40px;
}

.global-player-skip svg {
  width: 22px;
  height: 18px;
}

.global-player-play {
  color: #0877f9;
}

.global-player-play span {
  width: 13px;
  height: 16px;
}

.global-audio-player.is-playing .global-player-play span {
  width: 16px;
  height: 18px;
}

.global-player-download {
  grid-area: download;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  align-self: center;
  justify-self: center;
  transform: none;
}

.global-player-close {
  grid-area: close;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  align-self: center;
  justify-self: center;
  transform: none;
}

.global-player-voice {
  grid-area: voice;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 21px;
  align-self: center;
  align-items: center;
  min-width: 0;
  text-align: left;
  transform: none;
}

.global-player-avatar {
  display: block;
  width: 70px;
  height: 70px;
}

.global-player-copy {
  width: auto;
  min-width: 0;
}

.global-player-voice strong,
.global-player-voice small {
  max-width: 100%;
  text-align: left;
}

.global-player-voice strong {
  font-size: 16px;
  line-height: 1.3;
}

.global-player-voice small {
  margin-top: 3px;
  color: #77859a;
  font-size: 13px;
}

@media (max-width: 480px) {
  .global-audio-player {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 220px;
    background: transparent;
    box-shadow: none;
    transform: translateY(calc(100% + 16px));
  }

  .global-audio-player.is-visible {
    transform: translateY(0);
  }

  body.is-performer-modal-open .global-audio-player {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
  }

  body.customer-mobile-cabinet .global-audio-player,
  body.customer-mobile-cabinet.is-performer-modal-open .global-audio-player {
    bottom: var(--customer-mobile-nav-height, 50px);
  }

  .global-player-core {
    width: 100%;
    max-width: none;
    height: 220px;
    margin: 0;
    grid-template-areas:
      "download . close"
      "voice voice voice"
      "track track track"
      "transport transport transport"
      ". . .";
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-rows: 40px 58px 44px 32px 46px;
    gap: 0;
    padding: 0 20px;
    background: #fff;
    border: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: none;
  }

  .global-player-download,
  .global-player-close {
    align-self: center;
    transform: none;
  }

  .global-player-download {
    justify-self: start;
  }

  .global-player-close {
    justify-self: end;
  }

  .global-player-voice {
    display: block;
    align-self: center;
    min-width: 0;
    text-align: center;
    transform: none;
  }

  .global-player-avatar {
    display: none;
  }

  .global-player-copy {
    width: 100%;
  }

  .global-player-voice strong,
  .global-player-voice small {
    text-align: center;
  }

  .global-player-track {
    width: 100%;
    height: 44px;
    align-self: stretch;
    margin: 0;
  }

  .global-player-track .global-player-times {
    inset: 2px 0 auto;
    height: 18px;
    color: #79808d;
    font-size: 12px;
    line-height: 18px;
    text-shadow: none;
  }

  .global-player-current {
    color: #79808d;
    text-shadow: none;
  }

  .global-player-total {
    display: none;
  }

  .global-player-remaining {
    display: inline;
    margin-left: auto;
  }

  .global-player-track input[type="range"] {
    inset: 18px 0 auto;
    width: 100%;
    height: 4px;
    background: linear-gradient(
      to right,
      #0877f9 0 var(--range-progress, 0%),
      #d4dae5 var(--range-progress, 0%) 100%
    );
    border-radius: 999px;
  }

  .global-player-track input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 999px;
  }

  .global-player-track input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
    margin-top: -4px;
    opacity: 1;
    background: #0877f9;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: none;
  }

  .global-player-track input[type="range"]::-moz-range-track,
  .global-player-track input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 999px;
  }

  .global-player-track input[type="range"]::-moz-range-track {
    background: #d4dae5;
  }

  .global-player-track input[type="range"]::-moz-range-progress {
    background: #0877f9;
  }

  .global-player-track input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    opacity: 1;
    background: #0877f9;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: none;
  }

  .global-player-transport {
    display: grid;
    width: 128px;
    height: 32px;
    grid-template-columns: repeat(3, 32px);
    column-gap: 16px;
    align-self: center;
    justify-self: center;
    align-items: center;
    justify-content: center;
    transform: none;
  }

  .global-player-skip,
  .global-player-play {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
  }

  .global-player-skip svg {
    width: 24px;
    height: 20px;
  }

  .global-player-play {
    color: #79808d;
  }

  .global-player-play span {
    width: 14px;
    height: 18px;
  }

  .global-audio-player.is-playing .global-player-play span {
    width: 17px;
    height: 19px;
  }
}

@media (min-width: 1200px) {
  .global-player-track {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
  }
}

/* Payment artwork is displayed without a surrounding card. */
.site-footer.segment-footer .segment-payments {
  padding: 0;
  background: transparent;
  border: 0;
}

.site-footer.segment-footer .segment-payments > img {
  box-sizing: border-box;
  width: 36px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  flex: 0 0 36px;
}

/* Shared atom: the only binary switch used across Dialector. */
.dial-switch-control {
  position: relative;
  display: grid;
  width: fit-content;
  max-width: 100%;
  min-height: 24px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  cursor: pointer;
}

.dial-switch-control > input {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 48px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
}

.dial-switch-control > .dial-switch-track {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 48px;
  min-width: 48px;
  height: 24px;
  min-height: 24px;
  background: #ebf3ff;
  border: 0;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgb(40 62 91 / 8%);
  transition: background-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dial-switch-control > .dial-switch-track i {
  position: absolute;
  top: 1px;
  left: 1px;
  display: block;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 1px solid #d7e5f7;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(27 49 78 / 18%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.dial-switch-control > input:checked + .dial-switch-track {
  background: linear-gradient(117deg, #0066ff 2%, #0094ff 100%);
}

.dial-switch-control > input:checked + .dial-switch-track i {
  border-color: #367be3;
  box-shadow: 0 2px 8px rgb(54 123 227 / 24%);
  transform: translateX(24px);
}

.dial-switch-control > input:focus-visible + .dial-switch-track {
  outline: 2px solid #367be3;
  outline-offset: 3px;
}

.dial-switch-control:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.dial-switch-control > :is(b, .dial-switch-label) {
  min-width: 0;
  color: #121212;
  font: 400 14px/1.4 var(--font-sans);
}

.dashboard-online-switch.dial-switch-control,
.dashboard-option-switch.dial-switch-control,
.dial-settings-toggle.dial-switch-control,
.reviews-feed-card .dial-settings-toggle.dial-switch-control,
.characteristics-switch-grid .dial-settings-toggle.dial-switch-control {
  grid-template-columns: 48px minmax(0, 1fr);
}

.dashboard-online-switch > .dial-switch-track::after {
  content: none;
}

.service-order-option-toggle.dial-switch-control {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 48px;
}

.service-order-option-toggle.dial-switch-control > .service-order-option-title {
  grid-column: 1;
  grid-row: 1;
}

.service-order-option-toggle.dial-switch-control > .service-order-option-switch {
  grid-column: 2;
  grid-row: 1;
}

.service-order-option-toggle.dial-switch-control > input {
  top: 50%;
  right: 0;
  left: auto;
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .dial-switch-control > .dial-switch-track,
  .dial-switch-control > .dial-switch-track i {
    transition-duration: 0.01ms;
  }
}

/* Cabinet page-title contract and interactive talent schedule. */
.account-profile-page h1.dashboard-page-title,
.account-profile-page h2.dashboard-page-title {
  margin: 0;
  color: #121212;
  font: 600 30px/1.2 var(--font-sans);
  letter-spacing: 0;
}

.account-profile-page .dashboard-page-head {
  min-height: 44px;
  align-items: flex-start;
}

.account-profile-page .dashboard-analytics-head,
.account-profile-page .dashboard-analytics-head.analytics-archive-head {
  align-items: flex-start;
}

.account-profile-page .dial-settings-page > .dashboard-page-title {
  margin-bottom: 18px;
}

.account-profile-page .dashboard-schedule-view {
  overflow: visible;
}

.account-profile-page .dashboard-week-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  max-width: 100%;
  padding: 2px;
  overflow: visible;
}

.account-profile-page .dashboard-schedule-day {
  position: relative;
  min-width: 0;
  transition: margin-bottom 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.account-profile-page .dashboard-schedule-day.is-editor-open {
  z-index: 20;
  margin-bottom: 158px;
}

.account-profile-page .dashboard-schedule-day.is-editor-open:has(.dashboard-schedule-error:not([hidden])) {
  margin-bottom: 184px;
}

.account-profile-page .dashboard-week-grid > .dashboard-schedule-day > .dashboard-schedule-day-button {
  display: grid;
  width: 100%;
  min-width: 0;
  min-height: 142px;
  grid-template-rows: auto auto 1fr auto;
  gap: 7px;
  align-content: center;
  justify-items: center;
  padding: 14px 10px;
  color: #121212;
  text-align: center;
  background: #dcf8df;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(0 163 27 / 8%);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 180ms ease, background-color 180ms ease;
}

.account-profile-page .dashboard-week-grid > .dashboard-schedule-day > .dashboard-schedule-day-button:hover,
.account-profile-page .dashboard-week-grid > .dashboard-schedule-day > .dashboard-schedule-day-button:focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgb(0 163 27 / 18%);
}

.account-profile-page .dashboard-schedule-day.is-editor-open > .dashboard-schedule-day-button {
  box-shadow: inset 0 0 0 2px #367be3;
}

.account-profile-page .dashboard-week-grid > .dashboard-schedule-day > .dashboard-schedule-day-button.is-busy {
  background: #fff6dc;
  box-shadow: inset 0 0 0 1px rgb(166 102 0 / 9%);
}

.account-profile-page .dashboard-week-grid > .dashboard-schedule-day > .dashboard-schedule-day-button.is-off {
  background: #fff0f1;
  box-shadow: inset 0 0 0 1px rgb(240 68 79 / 8%);
}

.account-profile-page .dashboard-schedule-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  left: 50%;
  box-sizing: border-box;
  width: 286px;
  padding: 14px;
  color: #121212;
  background: #fff;
  border: 1px solid #dfe7f1;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgb(31 50 76 / 9%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -5px);
  transition: opacity 190ms ease, transform 190ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 190ms;
}

.account-profile-page .dashboard-schedule-popover[hidden] {
  display: none;
}

.account-profile-page .dashboard-schedule-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.account-profile-page .dashboard-schedule-day:nth-child(-n + 2) .dashboard-schedule-popover {
  left: 0;
  transform: translateY(-5px);
}

.account-profile-page .dashboard-schedule-day:nth-child(-n + 2) .dashboard-schedule-popover.is-open {
  transform: translateY(0);
}

.account-profile-page .dashboard-schedule-day:nth-last-child(-n + 2) .dashboard-schedule-popover {
  right: 0;
  left: auto;
  transform: translateY(-5px);
}

.account-profile-page .dashboard-schedule-day:nth-last-child(-n + 2) .dashboard-schedule-popover.is-open {
  transform: translateY(0);
}

.account-profile-page .dashboard-schedule-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: #f3f6fa;
  border-radius: 8px;
}

.account-profile-page .dashboard-week-grid .dashboard-schedule-status > button {
  display: inline-flex;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  color: #5c697b;
  font: 500 12px/1.2 var(--font-sans);
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  transition: color 170ms ease, background-color 170ms ease, border-color 170ms ease;
}

.account-profile-page .dashboard-week-grid .dashboard-schedule-status > button:hover {
  color: #121212;
  background: rgb(255 255 255 / 64%);
}

.account-profile-page .dashboard-week-grid .dashboard-schedule-status > button:focus-visible {
  outline: 2px solid #367be3;
  outline-offset: 2px;
}

.account-profile-page .dashboard-week-grid .dashboard-schedule-status > button.is-work[aria-pressed="true"] {
  color: #087a2d;
  background: #fff;
  border-color: #bde8c7;
}

.account-profile-page .dashboard-week-grid .dashboard-schedule-status > button.is-busy[aria-pressed="true"] {
  color: #8c5b00;
  background: #fff;
  border-color: #efd99f;
}

.account-profile-page .dashboard-week-grid .dashboard-schedule-status > button.is-off[aria-pressed="true"] {
  color: #d93743;
  background: #fff;
  border-color: #f2c7cb;
}

.account-profile-page .dashboard-schedule-time-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.account-profile-page .dashboard-schedule-time-fields label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.account-profile-page .dashboard-schedule-time-fields label > span {
  color: #526071;
  font: 500 12px/1.3 var(--font-sans);
}

.account-profile-page .dashboard-schedule-time-fields input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 9px;
  color: #121212;
  font: 400 13px/1 var(--font-sans);
  background: #fff;
  border: 1px solid #d9e2ed;
  border-radius: 6px;
  outline: none;
}

.account-profile-page .dashboard-schedule-time-fields input:focus-visible {
  border-color: #367be3;
  box-shadow: 0 0 0 3px rgb(54 123 227 / 10%);
}

.account-profile-page .dashboard-schedule-time-fields input:disabled {
  color: #8a96a7;
  background: #f2f5f8;
  cursor: not-allowed;
}

.account-profile-page .dashboard-schedule-error {
  margin: 9px 0 0;
  color: #c73440;
  font: 500 12px/1.35 var(--font-sans);
}

.account-profile-page .dashboard-schedule-error[hidden] {
  display: none;
}

@media (max-width: 780px) {
  .account-profile-page h1.dashboard-page-title,
  .account-profile-page h2.dashboard-page-title,
  body.account-profile-page.customer-mobile-cabinet .dashboard-section-head.dashboard-page-head h2.dashboard-page-title {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
  }

  .account-profile-page .dashboard-page-head {
    min-height: 38px;
  }

  body.account-profile-page.customer-mobile-cabinet .dashboard-section-head.dashboard-page-head {
    align-items: flex-start !important;
    margin: 0 !important;
  }

  .account-profile-page .dashboard-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .account-profile-page .dashboard-week-grid > .dashboard-schedule-day > .dashboard-schedule-day-button {
    min-height: 130px;
  }

  .account-profile-page .dashboard-schedule-day.is-editor-open {
    margin-bottom: 238px;
  }

  .account-profile-page .dashboard-schedule-day.is-editor-open:has(.dashboard-schedule-error:not([hidden])) {
    margin-bottom: 264px;
  }

  .account-profile-page .dashboard-schedule-popover {
    left: 0;
    width: calc(200% + 10px);
    transform: translateY(-5px);
  }

  .account-profile-page .dashboard-schedule-popover.is-open {
    transform: translateY(0);
  }

  .account-profile-page .dashboard-schedule-day:nth-child(even) .dashboard-schedule-popover {
    right: 0;
    left: auto;
  }

  .account-profile-page .dashboard-schedule-day:nth-child(odd) .dashboard-schedule-popover {
    right: auto;
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-profile-page .dashboard-week-grid > .dashboard-schedule-day > .dashboard-schedule-day-button,
  .account-profile-page .dashboard-schedule-day,
  .account-profile-page .dashboard-schedule-popover,
  .account-profile-page .dashboard-week-grid .dashboard-schedule-status > button {
    transition-duration: 0.01ms;
  }
}

/* Frame 23: shared login view. Keep overrides isolated from recovery and registration. */
.auth-modal-panel [data-auth-view="login"] .auth-panel-intro {
  padding-top: clamp(112px, 20.8vh, 206px);
}

.auth-modal-panel [data-auth-view="login"] .auth-panel-intro h2 {
  max-width: 334px;
  font: 600 26px/1.24 var(--font-sans);
}

.auth-modal-panel [data-auth-view="login"] .auth-field > span:first-child {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.auth-modal-panel [data-auth-view="login"] .auth-email-form {
  gap: 12px;
  margin-top: 32px;
}

.auth-modal-panel [data-auth-view="login"] .auth-input-shell,
.auth-modal-panel [data-auth-view="login"] #authEmailSubmit,
.auth-modal-panel [data-auth-view="login"] .auth-provider-button,
.auth-modal-panel [data-auth-view="login"] .auth-social-button {
  min-height: 36px;
  height: 36px;
}

.auth-modal-panel [data-auth-view="login"] .auth-input-shell input {
  min-height: 34px;
  font: 400 14px/34px var(--font-sans);
}

.auth-modal-panel [data-auth-view="login"] #authEmailSubmit {
  margin-top: 8px;
}

.auth-modal-panel [data-auth-view="login"] .auth-provider-grid {
  gap: 12px;
  margin-top: 56px;
}

.auth-modal-panel [data-auth-view="login"] .auth-provider-button {
  width: 334px;
}

.auth-modal-panel [data-auth-view="login"] .phone-auth-button {
  grid-template-columns: max-content;
}

.auth-modal-panel [data-auth-view="login"] .auth-social-grid {
  grid-template-columns: repeat(2, 161px);
  gap: 12px;
}

.auth-modal-panel [data-auth-view="login"] .auth-social-button {
  width: 161px;
  color: #367be3;
  background: #edf4ff;
}

.auth-modal-panel [data-auth-view="login"] .auth-panel-foot {
  margin-top: 58px;
  color: #718198;
  font: 400 13px/1.4 var(--font-sans);
}

.auth-modal-panel [data-auth-view="login"] .auth-login-helper {
  justify-self: center;
  margin-top: 5px;
}

.auth-modal-panel [data-auth-view="login"] .auth-panel-foot button {
  color: #0877f9;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 820px) {
  .auth-modal-panel [data-auth-view] .auth-input-shell input {
    font-size: 16px;
  }

  body:not(.account-profile-page) .auth-modal-panel [data-auth-view="login"] .auth-provider-button,
  body:not(.account-profile-page) .auth-modal-panel [data-auth-view="login"] .auth-social-grid {
    width: 100%;
  }

  body:not(.account-profile-page) .auth-modal-panel [data-auth-view="login"] .auth-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.account-profile-page) .auth-modal-panel [data-auth-view="login"] .auth-social-button {
    width: 100%;
  }
}

.auth-modal-panel #authEmailSubmit {
  touch-action: manipulation;
}

.auth-modal-panel .auth-inline-status {
  width: 100%;
  margin: 0;
  color: #c33f52;
  font: 500 12px/1.4 var(--font-sans);
}

.auth-modal-panel [data-auth-view="email-code"] .auth-email-form {
  gap: 12px;
}

.auth-pin-field {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.auth-pin-label {
  color: #526176;
  font: 500 13px/1.35 var(--font-sans);
}

.auth-pin-group {
  --auth-pin-length: 6;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--auth-pin-length), minmax(0, 1fr));
  gap: clamp(6px, 1.8vw, 8px);
  width: 100%;
  min-width: 0;
  font-variant-numeric: normal;
  font-feature-settings: normal;
  letter-spacing: 0;
}

.auth-pin-group[data-pin-length="4"] {
  --auth-pin-length: 4;
  width: min(232px, 100%);
  margin-inline: auto;
}

.auth-pin-value {
  display: none;
}

.auth-pin-digit {
  display: block;
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  padding: 0;
  overflow: hidden;
  color: #182033;
  font: 500 20px/1 var(--font-sans);
  font-variant-numeric: normal;
  font-feature-settings: normal;
  letter-spacing: 0;
  text-align: center;
  caret-color: #0877f9;
  background: #fff;
  border: 1px solid #cfd8e6;
  border-radius: 5px;
  outline: none;
  box-shadow: none;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.auth-pin-digit.is-filled {
  color: #121a2b;
  background: #f5f8fc;
  border-color: #b8c7da;
}

.auth-pin-digit.is-current,
.auth-pin-digit:focus {
  background: #fff;
  border-color: #0877f9;
  outline: none;
  box-shadow: none;
}

.auth-pin-group.is-error .auth-pin-digit {
  color: #a8263b;
  background: #fff4f6;
  border-color: #d84f65;
  outline: none;
  box-shadow: none;
}

.auth-code-actions {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  margin-top: 2px;
}

.auth-code-action {
  min-height: 40px;
  padding: 8px 12px;
  color: #66758a;
  font: 500 13px/1.25 var(--font-sans);
  background: transparent;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
  transition: color 140ms ease, background-color 140ms ease;
}

.auth-code-resend {
  display: inline-grid;
  grid-template-columns: 18px max-content;
  gap: 8px;
  align-items: center;
}

.auth-code-resend .segment-icon {
  width: 18px;
  height: 18px;
}

.auth-code-action:hover,
.auth-code-action:focus-visible {
  color: #0877f9;
  background: #edf4ff;
  outline: none;
  box-shadow: none;
}

.auth-code-change {
  color: #718198;
  font-weight: 400;
}

.auth-code-action:disabled {
  color: #93a0b2;
  background: transparent;
  box-shadow: none;
  cursor: wait;
}

.auth-modal-panel .auth-email-form[aria-busy="true"] .auth-input-shell {
  background: #f5f7fa;
}

.auth-modal-panel .auth-email-form[aria-busy="true"] .auth-pin-digit {
  background: #f5f7fa;
}

.auth-modal-panel .auth-email-form .primary-button:disabled {
  cursor: wait;
  background: #8fb3e8;
}

.auth-modal-panel .auth-email-form .auth-text-link:disabled {
  color: #93a0b2;
  cursor: wait;
}

/* Talent overview aligned to the supplied desktop cabinet reference. */
.account-profile-page .talent-overview {
  gap: 20px;
}

.account-profile-page .talent-overview .dashboard-commission-card {
  min-height: 120px;
  padding: 20px;
}

.account-profile-page .talent-overview .dashboard-commission-card h2 {
  color: #121212;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}

.account-profile-page .talent-overview .dashboard-commission-card p {
  margin: 8px 0 12px;
  color: #526071;
  font-size: 14px;
  line-height: 1.45;
}

.account-profile-page .talent-overview .dashboard-onboarding-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-height: 210px;
  padding: 20px;
}

.account-profile-page .talent-overview .dashboard-onboarding-copy h2 {
  margin: 0;
  color: #121212;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.account-profile-page .talent-overview .dashboard-onboarding-copy p {
  max-width: 690px;
  margin: 8px 0 0;
  color: #39485c;
  font-size: 15px;
  line-height: 1.45;
}

.account-profile-page .talent-overview .dashboard-checklist {
  gap: 4px;
}

.account-profile-page .talent-overview .dashboard-checklist button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  min-height: 34px;
  padding: 3px 0;
  color: #252f3d;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.account-profile-page .talent-overview .dashboard-checklist button:not(.is-done) > span:last-child {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.account-profile-page .talent-overview .dashboard-checklist button:not(.is-done):hover,
.account-profile-page .talent-overview .dashboard-checklist button:not(.is-done):focus-visible {
  color: #0877f9;
  border-color: transparent;
  outline: none;
}

.account-profile-page .talent-overview .dashboard-checklist-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #0877f9;
  background: #fff;
  border: 1.5px solid #6fa6f4;
  border-radius: 50%;
}

.account-profile-page .talent-overview .dashboard-checklist-mark .dashboard-icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.1;
}

.account-profile-page .talent-overview .dashboard-checklist button.is-done {
  color: #b0bac8;
  opacity: 1;
}

.account-profile-page .talent-overview .dashboard-checklist button.is-done .dashboard-checklist-mark {
  color: #55cf75;
  border-color: #55cf75;
}

.account-profile-page .talent-overview .dashboard-card-grid {
  align-items: stretch;
}

@media (min-width: 481px) and (max-width: 1199px) {
  .account-profile-page [data-cabinet-panel="overview"] > .dashboard-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
    align-items: stretch;
  }

}

.account-profile-page [data-cabinet-panel="overview"] .dashboard-promo-card > [data-dashboard-promo-status] {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-profile-page .talent-overview .dashboard-balance-card,
.account-profile-page .talent-overview .dashboard-promo-card {
  min-height: 196px;
  padding: 20px;
}

.account-profile-page .talent-overview .dashboard-balance-card {
  grid-template-rows: auto 37px auto;
  align-content: space-between;
}

.account-profile-page .talent-overview .dashboard-balance-card > div span {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.account-profile-page .talent-overview .dashboard-balance-card > div strong {
  margin-top: 6px;
  font-size: 28px;
  line-height: 1.1;
}

.account-profile-page .talent-overview .dashboard-promo-card {
  display: flex;
  flex-direction: column;
}

.account-profile-page .talent-overview .dashboard-promo-card h2 {
  margin: 0;
  color: #121212;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.account-profile-page .talent-overview .dashboard-promo-card p {
  margin: 7px 0 0;
  color: #39485c;
  font-size: 15px;
  line-height: 1.4;
}

.account-profile-page .talent-overview .dashboard-promo-card > div {
  margin-top: 14px;
}

.account-profile-page .talent-overview .dashboard-promo-card small {
  margin-top: auto;
  padding-top: 10px;
  color: #2e9c49;
  font-size: 13px;
  line-height: 1.35;
}

.account-profile-page .talent-overview .dashboard-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.account-profile-page .talent-overview .dashboard-quick-card,
.account-profile-page .talent-overview .dashboard-quick-grid > button.dashboard-quick-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  height: auto;
  min-height: 170px;
  padding: 20px 160px 62px 20px;
  border: 1px solid transparent;
  box-shadow: none;
  transform: none;
  transition: color 180ms ease, border-color 180ms ease;
}

.account-profile-page .talent-overview .dashboard-quick-card:hover,
.account-profile-page .talent-overview .dashboard-quick-card:focus-visible {
  border-color: #b7d3f7;
  box-shadow: none;
  transform: none;
}

.account-profile-page .talent-overview .dashboard-quick-card > div {
  display: block;
  align-self: start;
  overflow-wrap: anywhere;
}

.account-profile-page .talent-overview .dashboard-quick-card strong {
  font-size: 20px;
  font-weight: 600;
}

.account-profile-page .talent-overview .dashboard-quick-card small {
  margin-top: 7px;
  color: #39485c;
  font-size: 15px;
}

.account-profile-page .talent-overview .dashboard-quick-card > .dashboard-quick-illustration {
  position: absolute;
  right: -32px;
  bottom: -32px;
  width: 180px;
  height: 180px;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}

.account-profile-page .talent-overview .dashboard-history-card {
  min-height: 390px;
  padding: 20px;
}

.account-profile-page .talent-overview .dashboard-history-title h2 {
  margin: 0;
  color: #121212;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}

.account-profile-page .talent-overview .dashboard-history-toolbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 8px;
}

.account-profile-page .talent-overview .dashboard-history-filters {
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}

.account-profile-page .talent-overview .dashboard-history-filters button {
  min-height: 36px;
  padding: 7px 13px;
  font-size: 14px;
  font-weight: 500;
}

.account-profile-page .talent-overview .dashboard-history-date-control {
  display: block;
  width: min(260px, 38%);
  min-width: 210px;
}

.account-profile-page .talent-overview .dashboard-history-date-control > input,
.account-profile-page .talent-overview .dashboard-history-date-control .shared-date-trigger {
  width: 100%;
  min-height: 40px;
  font-size: 14px;
}

.account-profile-page .talent-overview .dashboard-history-row {
  min-height: 78px;
  align-items: center;
  min-width: 0;
}

.account-profile-page .talent-overview .dashboard-history-row[hidden],
.account-profile-page .talent-overview .dashboard-history-more[hidden] {
  display: none !important;
}

.account-profile-page .talent-overview .dashboard-history-viewport {
  min-width: 0;
  min-height: 312px;
}

.account-profile-page .talent-overview .dashboard-history-viewport [data-dashboard-history-list] {
  min-width: 0;
}

.account-profile-page .talent-overview .dashboard-history-action-row {
  display: flex;
  height: 48px;
  min-height: 48px;
  padding-top: 12px;
  align-items: center;
  justify-content: center;
}

.account-profile-page .talent-overview .dashboard-history-more {
  min-height: 36px;
  padding: 7px 14px;
  color: #0877f9;
  font-size: 14px;
  font-weight: 500;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  box-shadow: none;
}

.account-profile-page .talent-overview .dashboard-history-more:hover,
.account-profile-page .talent-overview .dashboard-history-more:focus-visible {
  color: #075fbf;
  background: #f1f6ff;
  border-color: #c9ddfa;
  outline: none;
}

.account-profile-page .talent-overview [data-dashboard-history-list] > .dashboard-history-row:first-child {
  border-top: 0;
}

.account-profile-page .talent-overview .dashboard-history-row strong,
.account-profile-page .talent-overview .dashboard-history-row > b {
  font-size: 16px;
  font-weight: 600;
}

.account-profile-page .talent-overview .dashboard-history-row small {
  font-size: 14px;
}

.account-profile-page .talent-overview .dashboard-history-empty {
  display: grid;
  min-height: 312px;
  margin: 0;
  place-items: center;
  color: #718198;
  font-size: 14px;
  text-align: center;
}

.account-profile-page .talent-overview .dashboard-history-empty[hidden] {
  display: none;
}

@media (max-width: 820px) {
  .account-profile-page .talent-overview .dashboard-quick-card,
  .account-profile-page .talent-overview .dashboard-quick-grid > button.dashboard-quick-card {
    padding-right: 112px;
  }

  .account-profile-page .talent-overview .dashboard-quick-card strong {
    font-size: 18px;
  }

  .account-profile-page .talent-overview .dashboard-quick-card > .dashboard-quick-illustration {
    right: -36px;
    width: 136px;
    height: 136px;
  }
}

@media (max-width: 620px) {
  .account-profile-page .talent-overview .dashboard-onboarding-card,
  .account-profile-page .talent-overview .dashboard-balance-card,
  .account-profile-page .talent-overview .dashboard-promo-card,
  .account-profile-page .talent-overview .dashboard-history-card {
    padding: 18px;
  }

  .account-profile-page .talent-overview .dashboard-history-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .account-profile-page .talent-overview .dashboard-history-date-control {
    width: 100%;
    min-width: 0;
  }

  .account-profile-page .talent-overview .dashboard-quick-card,
  .account-profile-page .talent-overview .dashboard-quick-grid > button.dashboard-quick-card {
    padding-right: 84px;
  }

  .account-profile-page .talent-overview .dashboard-quick-card strong {
    font-size: 16px;
  }

  .account-profile-page .talent-overview .dashboard-quick-card small {
    font-size: 13px;
  }

  .account-profile-page .talent-overview .dashboard-quick-card > .dashboard-quick-illustration {
    right: -32px;
    width: 104px;
    height: 104px;
  }
}

/* Final cabinet geometry overrides must stay after the legacy reference layers. */
.account-profile-page .dashboard-quick-arrow {
  border: 0;
  border-radius: 0;
  font-size: 0;
  align-self: start;
  margin-top: 10px;
}

/* Shared checkbox and stable cabinet choice geometry. */
.dial-checkbox-control {
  position: relative;
  display: inline-grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: center;
  color: #121212;
  font: 400 14px/1.35 var(--font-sans);
  cursor: pointer;
}

.dial-checkbox-control > input {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  transform: translateY(-50%);
}

.dial-checkbox-label {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.dial-checkbox-box {
  display: grid;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  place-items: center;
  color: transparent;
  background: #fff;
  border: 1px solid #a9b6c7;
  border-radius: 4px;
  box-shadow: none;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.dial-checkbox-box svg {
  width: 16px;
  height: 16px;
  overflow: visible;
}

.dial-checkbox-control > input:checked + .dial-checkbox-label .dial-checkbox-box {
  color: #fff;
  background: #367be3;
  border-color: #367be3;
}

.dial-checkbox-control > input:focus-visible + .dial-checkbox-label .dial-checkbox-box {
  border-color: #1f64c8;
  outline: 2px solid #1f64c8;
  outline-offset: -3px;
  box-shadow: none;
}

.dial-checkbox-control:has(input:disabled) {
  color: #8c98a8;
  cursor: not-allowed;
}

.dial-checkbox-control:has(input:disabled) .dial-checkbox-box {
  background: #f4f6f9;
  border-color: #dbe2eb;
}

.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-panel {
  width: min(380px, calc(100vw - 32px));
  height: min(452px, calc(100dvh - 32px));
  max-height: min(452px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.dashboard-modal[data-dashboard-modal-variant="work-schedule"] #dashboardModalForm {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-body {
  min-height: 0;
  padding-right: 4px;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}

.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-body::-webkit-scrollbar {
  display: none;
}

.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-actions {
  flex: 0 0 auto;
  margin-top: 18px;
}

.dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-work-schedule-editor {
  gap: 4px;
}

.dashboard-modal-body .dashboard-work-day {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
}

.dashboard-modal-body .dashboard-work-day > .dial-checkbox-control {
  width: 100%;
}

.dashboard-work-time {
  min-width: 134px;
  grid-template-columns: 56px 10px 56px;
  gap: 6px;
}

.dashboard-work-time .dashboard-choice-trigger {
  height: 28px;
  min-height: 28px;
}

.dashboard-choice-trigger {
  justify-content: flex-start;
}

.dashboard-choice .dashboard-choice-trigger > [data-dashboard-choice-label],
.dashboard-choice.is-open .dashboard-choice-trigger > [data-dashboard-choice-label] {
  flex: 1 1 auto;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  transform: none;
  transition: none;
}

.dashboard-work-time .dashboard-choice .dashboard-choice-trigger > [data-dashboard-choice-label],
.dashboard-work-time .dashboard-choice.is-open .dashboard-choice-trigger > [data-dashboard-choice-label] {
  font-size: 13px;
  transform: none;
}

.dashboard-choice.is-dropup .dashboard-choice-menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.dashboard-work-schedule-all-day {
  display: flex;
  min-height: 30px;
  margin-top: 0;
  padding-top: 6px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid #edf1f6;
}

.dashboard-work-schedule-all-day > span {
  color: #121212;
  font: 400 14px/1.35 var(--font-sans);
}

.dashboard-work-schedule-all-day .dial-switch-control {
  flex: 0 0 auto;
}

.dashboard-work-schedule-all-day .dashboard-work-round-clock {
  width: 100%;
}

.dashboard-topup-editor .dashboard-topup-quick-amounts button {
  border: 0;
}

.dashboard-topup-editor .dashboard-topup-quick-amounts button:hover,
.dashboard-topup-editor .dashboard-topup-quick-amounts button:focus-visible,
.dashboard-topup-editor .dashboard-topup-quick-amounts button.is-selected {
  border: 0;
}

/* Service-rate controls: editable value with compact suggested amounts. */
.dashboard-modal[data-dashboard-modal-variant="service-rate"] .dashboard-modal-panel {
  width: min(452px, calc(100vw - 32px));
  max-height: min(627px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scrollbar-gutter: stable;
}

.dashboard-modal[data-dashboard-modal-variant="service-rate"] #dashboardModalForm {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

.dashboard-modal[data-dashboard-modal-variant="service-rate"] .dashboard-modal-body {
  min-height: 0;
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.dashboard-modal[data-dashboard-modal-variant="service-rate"] .dashboard-modal-actions {
  flex: 0 0 auto;
}

.dashboard-modal-body .dashboard-rate-editor .dashboard-rate-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 16px;
  align-items: center;
}

.dashboard-modal-body .dashboard-rate-row > label {
  display: block;
  grid-template-columns: none;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #121212;
  font: 400 14px/1.35 var(--font-sans);
}

.dashboard-modal-body .dashboard-rate-row .dashboard-rate-input {
  min-width: 0;
}

.dashboard-modal-body .dashboard-rate-row .dashboard-rate-input input {
  width: 100%;
  min-width: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}

.dashboard-modal-body .dashboard-rate-row .dashboard-rate-input input::-webkit-inner-spin-button,
.dashboard-modal-body .dashboard-rate-row .dashboard-rate-input input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.dashboard-modal-body .dashboard-rate-row .dashboard-rate-input input:focus,
.dashboard-modal-body .dashboard-rate-row .dashboard-rate-input input:focus-visible {
  border-color: #8fa1b8;
  outline: none;
  box-shadow: none;
}

.dashboard-rate-suggestions {
  position: absolute;
  z-index: 50;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  width: 220px;
  max-width: calc(100vw - 64px);
  padding: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  background: #fff;
  border: 1px solid #d7e0eb;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(24, 39, 61, 0.13);
}

.dashboard-rate-suggestions[hidden] {
  display: none;
}

.dashboard-rate-input.is-dropup .dashboard-rate-suggestions {
  top: auto;
  bottom: calc(100% + 6px);
}

.dashboard-rate-suggestions button {
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  color: #46566b;
  font: 500 12px/1.2 var(--font-sans);
  background: #f5f8fc;
  border: 0;
  border-radius: 5px;
  box-shadow: none;
}

.dashboard-rate-suggestions button:hover,
.dashboard-rate-suggestions button:focus-visible,
.dashboard-rate-suggestions button.is-selected {
  color: #0877f9;
  background: #edf5ff;
  outline: none;
  box-shadow: none;
}

.account-profile-page .order-detail-grid {
  width: 100%;
  grid-template-columns: minmax(0, 688px) minmax(0, 334px);
  gap: 20px;
}

@media (max-width: 900px) {
  .account-profile-page .order-detail-grid,
  .account-profile-page .order-detail-aside {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .dashboard-modal-body .dashboard-rate-editor .dashboard-rate-row {
    grid-template-columns: minmax(0, 1fr) 126px;
    gap: 12px;
  }

  .dashboard-modal-body .dashboard-work-day {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  .dashboard-work-time {
    grid-column: 1;
    min-width: 0;
    margin-left: 30px;
  }
}

/* Shared talent presence inside the authenticated header mini-profile. */
.segment-profile-wrap[data-account-voice-id] .user-chip {
  position: relative;
}

.segment-profile-wrap[data-account-voice-id] .user-chip > .voice-presence {
  z-index: 1;
  top: 1px;
  right: 0;
  bottom: auto;
  width: 10px;
  height: 10px;
  border-width: 2px;
  box-shadow: none;
  box-sizing: content-box;
}

@media (max-width: 480px) {
  .dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-modal-body .dashboard-work-day {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 0;
  }

  .dashboard-modal[data-dashboard-modal-variant="work-schedule"] .dashboard-work-time {
    grid-column: auto;
    min-width: 134px;
    margin-left: 0;
  }
}

.segment-profile-avatar > .voice-presence.is-online {
  background: #63d76f;
}

.segment-profile-avatar > .voice-presence.is-offline {
  background: #e05872;
}

.account-profile-page .dashboard-avatar-wrap > .voice-presence.is-online {
  background: #5cd76b;
}

.account-profile-page .dashboard-avatar-wrap > .voice-presence.is-offline {
  background: #e04747;
}

/* Guest chrome keeps equal gutters while giving search the available width. */
@media (min-width: 1181px) {
  .site-header.segment-header:not(.segment-header--account) .segment-mainbar-inner {
    grid-template-columns: 216px 126px minmax(0, 1fr) 198px;
    column-gap: 20px;
  }

  .site-header.segment-header:not(.segment-header--account) .segment-header-actions {
    width: 198px;
    min-width: 198px;
    gap: 0;
  }

  .site-header.segment-header:not(.segment-header--account) .segment-header-actions .auth-trigger {
    width: 100%;
    min-width: 0;
  }
}

/* Final shared-profile geometry overrides stay last in the cascade. */
.segment-profile-dropdown {
  height: auto;
  min-height: 0;
  max-height: calc(100vh - 118px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.segment-profile-card {
  height: auto;
  min-height: 0;
}

.account-profile-page .talent-overview .dashboard-quick-card {
  position: relative;
}

.account-profile-page .talent-overview .dashboard-quick-card .dashboard-quick-arrow {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: block;
  width: 28px;
  height: 28px;
  margin: 0;
  align-self: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Final responsive geometry for the shared public surface. */
@media (min-width: 821px) and (max-width: 1420px) {
  .home-advantages .page-grid,
  .home-voices .page-grid {
    width: min(1396px, calc(100vw - 44px));
    max-width: 1396px;
  }

  .home-advantage-grid,
  .home-voice-collections {
    gap: 20px;
  }

  .home-advantage-grid article,
  .home-voice-collection,
  .home-voice-collection h3,
  .home-voice-collection > a,
  .reference-home-voice-row,
  .home-voice-row.reference-home-voice-row {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .home-voice-collection {
    height: auto;
    min-height: 458px;
  }

  .reference-home-player,
  .home-voice-row .reference-home-player {
    width: calc(100% - 102px);
    min-width: 0;
    max-width: none;
  }

  .reference-home-copy > a,
  .home-voice-row .reference-home-copy > a {
    max-width: min(230px, calc(100% - 72px));
  }
}

@media (min-width: 1181px) and (max-width: 1420px) {
  .home-advantage-grid,
  .home-voice-collections {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-advantage-grid > *,
  .home-voice-collections > * {
    min-width: 0;
    max-width: 100%;
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .home-advantage-grid,
  .home-voice-collections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1181px) and (max-width: 1320px) {
  .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: minmax(190px, 1.15fr) repeat(4, minmax(0, 1fr));
    column-gap: clamp(14px, 1.6vw, 24px);
    row-gap: 32px;
  }

  .segment-footer-grid > *,
  .segment-footer-column,
  .segment-footer-branding {
    min-width: 0;
  }

  .segment-footer-grid a {
    overflow-wrap: anywhere;
  }

  .site-footer.segment-footer .segment-footer-column a,
  .site-footer.segment-footer .segment-footer-column button {
    width: auto;
    max-width: 100%;
    white-space: normal;
  }
}

/* Final shared avatar ring stays last in the cascade. */
.segment-header-actions .segment-profile-wrap .user-chip,
.segment-header-actions .segment-profile-wrap .user-chip:hover,
.segment-header-actions .segment-profile-wrap .user-chip:focus-visible,
.segment-profile-avatar,
.segment-profile-secondary-avatar,
.account-profile-page .dashboard-avatar-wrap,
.customer-mobile-avatar {
  padding: 0;
  background: transparent;
  border: 3px solid #d1e1f6;
  border-radius: 50%;
  box-shadow: none;
  box-sizing: border-box;
}

.segment-profile-secondary-avatar {
  overflow: hidden;
}

.segment-header-actions .segment-profile-wrap .user-chip img,
.segment-profile-avatar img,
.segment-profile-secondary-avatar img,
.account-profile-page .dashboard-avatar-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  box-sizing: border-box;
}

html,
body,
.app-shell {
  background-color: #f6f8fb;
}

/* Final shared interaction and pre-hydration safeguards. */
html,
:where(a, button, input, select, textarea, summary, label, [role="button"], [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}

:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

.site-footer:empty {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: inherit;
  background: #f6f8fb;
  border: 0;
}

.global-player-play span,
.global-audio-player.is-playing .global-player-play span {
  position: static;
  top: auto;
  left: auto;
  display: block;
  width: 16px;
  height: 18px;
  margin: 0;
  transform: none;
}

/* Final public mobile chrome uses one viewport-relative gutter. */
@media (max-width: 820px) {
  body:not(.account-profile-page):not(.admin-page),
  body:not(.account-profile-page):not(.admin-page) * {
    -webkit-tap-highlight-color: transparent;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-mainbar-inner {
    width: calc(100% - 24px);
    max-width: none;
  }

  body:not(.account-profile-page):not(.admin-page) .mobile-catalog-links {
    padding-inline: 12px;
    scroll-padding-inline: 12px;
  }

  body:not(.account-profile-page):not(.admin-page) .segment-mobile-menu {
    padding-right: 12px;
    padding-left: 12px;
  }

  body:not(.account-profile-page):not(.admin-page) main :where(.page-grid, #voiceProfile, .site-breadcrumbs-row):has(> .site-breadcrumbs) {
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  body:not(.account-profile-page):not(.admin-page) .site-breadcrumbs-row,
  body:not(.account-profile-page):not(.admin-page).contacts-page .site-breadcrumbs-row {
    display: block;
  }

  body:not(.account-profile-page):not(.admin-page) .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page) .seo-service-main .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page) .legal-document .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page) .order-page .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page) .order-page-main .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page).voice-profile-page #voiceProfile .site-breadcrumbs {
    width: 100%;
    min-height: 21px;
    margin: 0 0 24px;
    font: 500 14px/1.5 var(--font-sans);
  }

  .site-footer.segment-footer .segment-footer-toggle {
    justify-content: flex-start;
    gap: 6px;
  }

  .site-footer.segment-footer .segment-footer-toggle > span {
    min-width: 0;
    flex: 0 1 auto;
  }
}

/* Public responsive contract: breadcrumbs, voice-card grids, performer picker and footer share stable breakpoints. */
.catalog-page .voice-grid,
.catalog-results .voice-grid,
.favorites-grid:not(.is-empty),
.rating-voice-grid,
.seo-service-voice-grid,
.seo-service-voices > .seo-service-voice-grid,
.seo-service-voices > div.seo-service-voice-grid:last-child {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  justify-content: start;
}

.catalog-page .voice-grid > .voice-card.reference-voice-card,
.catalog-results .voice-grid > .voice-card.reference-voice-card,
.favorites-grid:not(.is-empty) > .voice-card.reference-voice-card,
.rating-voice-card,
.rating-voice-card > .voice-card.reference-voice-card,
.seo-service-voice-grid > .voice-card.reference-voice-card,
.seo-service-voices > .seo-service-voice-grid > .voice-card.reference-voice-card,
.seo-service-voices > div.seo-service-voice-grid:last-child > .voice-card.reference-voice-card {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.voice-card.reference-voice-card .reference-card-name {
  right: 16px;
  max-width: none;
}

.voice-card.reference-voice-card .reference-card-description {
  right: 16px;
  width: auto;
}

.voice-card.reference-voice-card .reference-card-range,
.voice-card.reference-voice-card .reference-card-badges {
  right: 16px;
  width: auto;
}

.voice-card.reference-voice-card .reference-card-badges .reference-badge-status {
  right: 0;
  left: 180px;
  width: auto;
}

.voice-card.reference-voice-card .reference-card-badges .reference-badge-orders {
  width: calc(50% - 3px);
}

.voice-card.reference-voice-card .reference-card-badges .reference-badge-time {
  right: 0;
  left: auto;
  width: calc(50% - 3px);
}

.voice-card.reference-voice-card .reference-card-order {
  width: clamp(112px, calc(100% - 205px), 180px);
}

.rating-voice-card .reference-card-name,
.rating-voice-card .reference-card-description {
  right: 70px;
}

@media (min-width: 700px) and (max-width: 820px) {
  .performer-picker-list {
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 13px;
    justify-content: start;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .performer-picker-voice-card,
  .performer-picker-voice-card .voice-card.reference-voice-card {
    width: 100%;
    max-width: 334px;
    min-width: 0;
  }
}

@media (min-width: 361px) and (max-width: 699px) {
  .performer-picker-list {
    justify-content: start;
    margin-right: 0;
    margin-left: 0;
  }
}

@media (max-width: 820px) {
  body:not(.account-profile-page):not(.admin-page) .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page) .seo-service-main .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page) .legal-document .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page) .order-page .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page) .order-page-main .site-breadcrumbs,
  body:not(.account-profile-page):not(.admin-page).voice-profile-page #voiceProfile .site-breadcrumbs {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
  }

  body:not(.account-profile-page):not(.admin-page) .site-breadcrumbs > a,
  body:not(.account-profile-page):not(.admin-page) .site-breadcrumbs > [aria-current="page"] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.account-profile-page):not(.admin-page) .site-breadcrumbs > a {
    flex: 0 0 auto;
  }

  body:not(.account-profile-page):not(.admin-page) .site-breadcrumbs > [aria-current="page"] {
    flex: 1 1 auto;
  }

  .site-footer.segment-footer .segment-footer-grid,
  .site-footer.segment-footer .segment-footer-bottom {
    width: calc(100% - 24px);
    max-width: none;
  }
}

@media (max-width: 360px) {
  .performer-params-modal {
    padding: 4px;
  }

  .performer-picker-panel {
    width: calc(100vw - 8px);
    height: calc(100dvh - 8px);
    padding-right: 8px;
    padding-left: 8px;
  }

  .performer-picker-list {
    max-width: none;
    justify-content: start;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }

  .performer-picker-voice-card,
  .performer-picker-voice-card .voice-card.reference-voice-card {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .voice-card.reference-voice-card .reference-card-description {
    width: calc(100% - 102px);
  }

  .voice-card.reference-voice-card .reference-card-badges,
  .voice-card.reference-voice-card:hover .reference-card-badges,
  .voice-card.reference-voice-card:focus-within .reference-card-badges,
  .voice-card.reference-voice-card.is-playing .reference-card-badges {
    display: grid;
    width: calc(100% - 32px);
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: repeat(2, 26px);
    gap: 5px 6px;
  }

  .voice-card.reference-voice-card .reference-card-badges .reference-badge {
    position: static;
    width: 100%;
    min-width: 0;
    gap: 3px;
    padding-right: 4px;
    padding-left: 4px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
  }

  .voice-card.reference-voice-card .reference-badge-rating {
    grid-column: 1;
    grid-row: 1;
  }

  .voice-card.reference-voice-card .reference-badge-cashback {
    grid-column: 2;
    grid-row: 1;
  }

  .voice-card.reference-voice-card .reference-badge-status {
    grid-column: 3;
    grid-row: 1;
  }

  .voice-card.reference-voice-card .reference-card-badges .reference-badge-orders {
    position: absolute;
    top: 31px;
    left: 0;
    right: auto;
    grid-column: auto;
    grid-row: auto;
    width: calc(50% - 3px);
    justify-content: center;
    font-size: 9.5px;
  }

  .voice-card.reference-voice-card .reference-card-badges .reference-badge-time {
    position: absolute;
    top: 31px;
    left: auto;
    right: 0;
    grid-column: auto;
    grid-row: auto;
    width: calc(50% - 3px);
    justify-content: center;
    font-size: 9px;
  }

  .voice-card.reference-voice-card .reference-card-name {
    max-width: calc(100% - 102px);
    font-size: 15px;
  }

  .voice-card.reference-voice-card .reference-card-description {
    font-size: 11px;
  }

  .voice-card.reference-voice-card .reference-card-price strong {
    font-size: 18px;
  }

  .voice-card.reference-voice-card .reference-card-price span {
    font-size: 10px;
  }

  .voice-card.reference-voice-card .reference-card-order {
    right: 58px;
    width: min(112px, calc(100% - 168px));
    font-size: 14px;
  }

  .rating-voice-card .reference-card-name,
  .rating-voice-card .reference-card-description {
    right: 70px;
    width: auto;
    max-width: none;
  }
}

/* Catalog filters use the exact reference canvas only when its full 1396px width is available. */
@media (max-width: 1439px) {
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card],
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    padding: 16px;
    overflow: visible;
  }

  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card]:not(.is-expanded) {
    height: auto;
    min-height: 0;
  }

  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] .catalog-reference-collapsed {
    position: relative;
    inset: auto;
    display: grid !important;
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 16px;
    align-items: stretch;
    padding: 0;
  }

  .catalog-page .catalog-reference-collapsed > :is(
    .catalog-reference-field,
    .catalog-reference-group,
    .catalog-reference-open,
    .catalog-reference-switch,
    .catalog-reference-reset
  ) {
    position: relative;
    inset: auto !important;
    width: 100% !important;
    min-width: 0;
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0;
  }

  .catalog-page .catalog-reference-collapsed .is-collapsed-search,
  .catalog-page .catalog-reference-collapsed .is-voice-type,
  .catalog-page .catalog-reference-collapsed .catalog-reference-open {
    grid-column: 1 / -1 !important;
  }

  .catalog-page .catalog-reference-tabs {
    display: grid;
    width: 100%;
    height: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .catalog-page .catalog-reference-tabs button,
  .catalog-page .is-voice-type .catalog-reference-tabs button {
    width: auto;
    min-width: 0;
    padding: 0 6px;
    font-size: 14px;
    white-space: normal;
  }

  .catalog-page .catalog-reference-collapsed > .catalog-reference-switch {
    min-height: 44px;
    height: auto;
    gap: 10px;
    margin: 0;
    overflow: visible;
    font-size: 14px;
    white-space: normal;
  }

  .catalog-page .catalog-reference-collapsed > .catalog-reference-switch b {
    min-width: 0;
    overflow: visible;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  .catalog-page .catalog-reference-collapsed > .catalog-reference-switch span {
    width: 50px;
    height: 24px;
    flex-basis: 50px;
  }

  .catalog-page .catalog-reference-collapsed > .catalog-reference-switch span::after {
    width: 22px;
    height: 22px;
  }

  .catalog-page .catalog-reference-collapsed > .catalog-reference-switch input:checked + span::after {
    transform: translateX(26px);
  }

  .catalog-page .catalog-reference-open,
  .catalog-page .catalog-reference-reset {
    min-height: 44px;
    height: auto;
    padding-block: 8px;
    white-space: normal;
  }

  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    display: grid !important;
    box-sizing: border-box;
    width: min(1120px, calc(100vw - 32px));
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 32px);
    padding: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .catalog-page .catalog-reference-expanded > h2 {
    position: static;
    grid-column: 1 / -1;
    padding-right: 42px;
    font-size: clamp(23px, 3vw, 28px);
    line-height: 1.12;
  }

  .catalog-page .catalog-reference-expanded > :is(
    .catalog-reference-field,
    .catalog-reference-group,
    .catalog-reference-expanded-switches,
    .catalog-reference-divider,
    .catalog-reference-apply,
    .catalog-reference-reset
  ) {
    position: relative;
    inset: auto !important;
    width: 100% !important;
    min-width: 0;
  }

  .catalog-page .catalog-reference-expanded > .catalog-reference-expanded-switches {
    display: grid !important;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px 16px;
  }

  .catalog-page .catalog-reference-expanded > .catalog-reference-divider {
    grid-column: 1 / -1;
  }

  .catalog-page .catalog-reference-expanded > .catalog-reference-apply,
  .catalog-page .catalog-reference-expanded > .catalog-reference-reset {
    min-height: 44px;
    height: auto;
  }
}

@media (min-width: 981px) and (max-width: 1439px) {
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] .catalog-reference-collapsed,
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-expanded {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .catalog-page .catalog-reference-collapsed .is-collapsed-search,
  .catalog-page .catalog-reference-collapsed .catalog-reference-open {
    grid-column: auto !important;
  }

  .catalog-page .catalog-reference-collapsed .is-voice-type {
    grid-column: span 2 !important;
  }

  .catalog-page .catalog-reference-expanded > .catalog-reference-apply,
  .catalog-page .catalog-reference-expanded > .catalog-reference-reset {
    grid-column: span 2;
  }
}

@media (max-width: 620px) {
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card].is-expanded .catalog-reference-expanded {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 16px;
  }

  .catalog-page .catalog-reference-expanded > h2,
  .catalog-page .catalog-reference-expanded > .catalog-reference-expanded-switches,
  .catalog-page .catalog-reference-expanded > .catalog-reference-divider {
    grid-column: 1;
  }
}

@media (max-width: 480px) {
  .catalog-page .catalog-controls.catalog-reference-filter[data-catalog-filter-card] .catalog-reference-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .catalog-page .catalog-reference-collapsed .is-collapsed-search,
  .catalog-page .catalog-reference-collapsed .is-voice-type,
  .catalog-page .catalog-reference-collapsed .catalog-reference-open {
    grid-column: 1 !important;
  }

  .catalog-page .catalog-reference-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 821px) and (max-width: 1180px) {
  .site-footer.segment-footer {
    padding-top: 34px;
    background: #f7f9fd;
  }

  .site-footer.segment-footer .segment-footer-grid,
  .site-footer.segment-footer .segment-footer-bottom {
    width: calc(100% - 44px);
    max-width: none;
  }

  .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 7vw, 84px);
    row-gap: 36px;
    padding: 0 0 36px;
  }

  .site-footer.segment-footer .segment-footer-branding {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 26px;
    border-bottom: 1px solid #d4dae5;
  }

  .site-footer.segment-footer .segment-footer-branding .segment-brand {
    width: min(320px, 50%);
    max-width: 320px;
    aspect-ratio: 320 / 74;
    margin: 0;
  }

  .site-footer.segment-footer .segment-footer-branding .brand-logo-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .site-footer.segment-footer .segment-socials {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 14px;
  }

  .site-footer.segment-footer .segment-socials a,
  .site-footer.segment-footer .segment-socials img {
    width: 30px;
    height: 30px;
  }

  .site-footer.segment-footer .segment-footer-column {
    display: block;
    min-width: 0;
    border: 0;
  }

  .site-footer.segment-footer .segment-footer-column[data-managed-footer-services] {
    display: grid;
    align-content: start;
    gap: 10px;
  }

  .site-footer.segment-footer .segment-footer-column[data-managed-footer-services] > strong {
    display: block;
    margin: 0 0 8px;
  }

  .site-footer.segment-footer .segment-footer-toggle {
    display: flex;
    width: 100%;
    min-height: 0;
    height: auto;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    color: #121212;
    font: 600 16px/1.2 var(--font-sans);
    text-align: left;
    background: transparent;
    border: 0;
    pointer-events: none;
  }

  .site-footer.segment-footer .segment-footer-toggle > span {
    min-width: 0;
    flex: 0 1 auto;
  }

  .site-footer.segment-footer .segment-footer-toggle .segment-icon {
    display: none;
  }

  .site-footer.segment-footer .segment-footer-links {
    display: grid;
    max-height: none;
    gap: 10px;
    overflow: visible;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .site-footer.segment-footer .segment-footer-column.is-expanded .segment-footer-links {
    max-height: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
  }

  .site-footer.segment-footer .segment-footer-column a,
  .site-footer.segment-footer .segment-footer-column button {
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .site-footer.segment-footer .segment-footer-bottom {
    display: flex;
    min-height: 0;
    margin-top: 0;
    padding: 0 0 28px;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    border-top: 0;
  }

  .site-footer.segment-footer .segment-footer-support {
    display: grid;
    order: 1;
    width: 100%;
    padding: 22px 0;
    justify-items: start;
    gap: 6px;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
    border-top: 1px solid #d4dae5;
  }

  .site-footer.segment-footer .segment-payments {
    display: flex;
    order: 2;
    width: 100%;
    padding: 22px 0;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    border-top: 1px solid #d4dae5;
  }

  .site-footer.segment-footer .segment-payments-label {
    display: none;
  }

  .site-footer.segment-footer .segment-payments img {
    width: 38px;
    height: 24px;
    flex: 0 0 auto;
  }

  .site-footer.segment-footer .segment-footer-copyright {
    order: 3;
    width: 100%;
    padding-top: 2px;
    text-align: center;
  }
}

.site-header.segment-header .segment-catalog-button,
.site-header.segment-header .segment-catalog-button:is(:hover, :active, :focus-visible, [aria-expanded="true"]) {
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 180ms ease, color 180ms ease !important;
}

/* Authoritative public responsive contract: phone, tablet, desktop and wide canvas. */
.home-advantage-grid,
.home-voice-collections,
.home-production-grid,
.home-example-grid,
.home-advantage-grid > *,
.home-voice-collections > *,
.home-production-grid > *,
.home-example-grid > * {
  min-width: 0;
  max-width: 100%;
}

.home-advantage-grid article,
.home-voice-collection,
.home-voice-collection > a,
.home-production-grid article,
.home-example-card {
  width: 100%;
}

.home-voice-collection h3,
.reference-home-voice-row,
.home-voice-row.reference-home-voice-row {
  width: 100%;
  max-width: 100%;
}

.reference-home-copy > a,
.home-voice-row .reference-home-copy > a,
.reference-home-copy > span {
  width: min(230px, calc(100% - 190px));
  max-width: min(230px, calc(100% - 190px));
}

.reference-home-player,
.home-voice-row .reference-home-player {
  width: calc(100% - 102px);
  min-width: 0;
  max-width: none;
}

.home-voice-row.reference-home-voice-row .reference-home-player input[type="range"],
.reference-home-player .player-meta,
.home-voice-row .reference-home-player .player-meta {
  width: 100%;
  max-width: none;
}

@media (max-width: 480px) {
  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-utility {
    display: none;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-mainbar-inner,
  body:not(.account-profile-page):not(.admin-page) .home-main .page-grid,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-grid,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-bottom {
    width: calc(100% - 24px);
    max-width: none;
  }

  body:not(.account-profile-page):not(.admin-page) .home-main {
    padding-top: 160px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider {
    padding: 18px 0 48px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-viewport {
    width: calc(100% - 24px);
    max-width: none;
    margin-inline: auto;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h1,
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h2 {
    font-size: 34px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-section h2,
  body:not(.account-profile-page):not(.admin-page) .home-advantages h2,
  body:not(.account-profile-page):not(.admin-page) .home-production h2 {
    font-size: 34px;
    line-height: 1.08;
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid,
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections,
  body:not(.account-profile-page):not(.admin-page) .home-production-grid,
  body:not(.account-profile-page):not(.admin-page) .home-example-grid {
    width: 100%;
    max-width: 100%;
    grid-template-columns: none;
    grid-auto-flow: column;
    gap: 14px;
    justify-content: start;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid {
    grid-auto-columns: min(78vw, 300px);
  }

  body:not(.account-profile-page):not(.admin-page) .home-voice-collections,
  body:not(.account-profile-page):not(.admin-page) .home-production-grid,
  body:not(.account-profile-page):not(.admin-page) .home-example-grid {
    grid-auto-columns: min(82vw, 334px);
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid > *,
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections > *,
  body:not(.account-profile-page):not(.admin-page) .home-production-grid > *,
  body:not(.account-profile-page):not(.admin-page) .home-example-grid > * {
    width: 100%;
    min-width: 0;
    max-width: none;
    grid-column: auto;
    scroll-snap-align: start;
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid::-webkit-scrollbar,
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections::-webkit-scrollbar,
  body:not(.account-profile-page):not(.admin-page) .home-production-grid::-webkit-scrollbar,
  body:not(.account-profile-page):not(.admin-page) .home-example-grid::-webkit-scrollbar {
    display: none;
  }

  body:not(.account-profile-page):not(.admin-page) .home-voice-collection h3 {
    font-size: 22px;
    line-height: 30px;
  }
}

@media (min-width: 481px) and (max-width: 1199px) {
  .account-profile-page .account-profile-main {
    padding-top: 170px;
  }

  body:not(.admin-page) .site-header.segment-header {
    height: 150px;
  }

  body:not(.admin-page) .site-header.segment-header.is-compact {
    height: 110px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-utility {
    display: block;
    height: 40px;
    overflow: hidden;
  }

  body:not(.admin-page) .site-header.segment-header .segment-utility-inner {
    display: flex;
    width: calc(100% - 32px);
    max-width: 1396px;
    height: 40px;
    min-width: 0;
    gap: 18px;
    align-items: center;
    overflow: hidden;
  }

  body:not(.admin-page) .site-header.segment-header .segment-online {
    min-width: max-content;
    flex: 0 0 auto;
    font-size: 13px;
    white-space: nowrap;
  }

  body:not(.admin-page) .site-header.segment-header .segment-utility nav {
    display: flex;
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(18px, 2.4vw, 30px);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    white-space: nowrap;
    scrollbar-width: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-utility nav::-webkit-scrollbar {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-utility nav a {
    min-width: max-content;
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  body:not(.admin-page) .site-header.segment-header .segment-mainbar,
  body:not(.admin-page) .site-header.segment-header .segment-mainbar-inner {
    height: 110px;
  }

  body:not(.admin-page) .site-header.segment-header.is-compact .segment-mainbar {
    transform: translateY(-40px);
  }

  body:not(.admin-page) .site-header.segment-header .segment-mainbar-inner {
    display: grid;
    width: calc(100% - 44px);
    max-width: 1396px;
    min-width: 0;
    gap: 12px;
    align-items: center;
  }

  body:not(.admin-page) .site-header.segment-header .segment-brand,
  body:not(.admin-page) .site-header.segment-header .segment-brand .brand-logo-image {
    width: 150px;
    max-width: 100%;
    height: auto;
    max-height: 40px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-catalog-button,
  body:not(.admin-page) .site-header.segment-header .segment-header-search,
  body:not(.admin-page) .site-header.segment-header .segment-header-actions {
    min-width: 0;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search {
    display: grid;
    width: 100%;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions {
    display: flex;
    width: auto;
    min-width: 0;
    gap: 8px;
    justify-self: end;
  }

  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links,
  body:not(.account-profile-page):not(.admin-page) .mobile-catalog-links {
    display: none !important;
  }

  body:not(.account-profile-page):not(.admin-page) main :where(.page-grid, #voiceProfile, .site-breadcrumbs-row):has(> .site-breadcrumbs),
  body:not(.account-profile-page):not(.admin-page).legal-page .legal-document {
    box-sizing: border-box;
    max-width: 1396px;
    margin-right: auto;
    margin-left: auto;
  }

  body:not(.account-profile-page):not(.admin-page) .home-main {
    padding-top: 150px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider {
    padding: 18px 0 52px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-main .page-grid,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-grid,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-bottom {
    width: calc(100% - 44px);
    max-width: 1396px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h1,
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h2 {
    font-size: 42px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid,
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections,
  body:not(.account-profile-page):not(.admin-page) .home-production-grid,
  body:not(.account-profile-page):not(.admin-page) .home-example-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    justify-content: stretch;
    overflow: visible;
  }

  body:not(.account-profile-page):not(.admin-page) .home-production-grid article:nth-child(3),
  body:not(.account-profile-page):not(.admin-page) .home-production-grid article:nth-child(4) {
    grid-column: span 1;
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid > *,
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections > *,
  body:not(.account-profile-page):not(.admin-page) .home-production-grid > *,
  body:not(.account-profile-page):not(.admin-page) .home-example-grid > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer {
    padding-top: 34px;
    background: #f7f9fd;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 7vw, 84px);
    row-gap: 36px;
    padding: 0 0 36px;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-branding {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 0 26px;
    border-bottom: 1px solid #d4dae5;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-branding .segment-brand {
    width: min(280px, 50%);
    max-width: 280px;
    margin: 0;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-column,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-column[data-managed-footer-services] {
    display: block;
    min-width: 0;
    border: 0;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-toggle {
    display: flex;
    width: 100%;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    pointer-events: none;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-toggle .segment-icon {
    display: none;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-links,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-column.is-expanded .segment-footer-links {
    display: grid;
    max-height: none;
    gap: 10px;
    overflow: visible;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-bottom {
    display: flex;
    min-height: 0;
    padding: 0 0 28px;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    border-top: 0;
  }
}

@media (min-width: 481px) and (max-width: 639px) {
  .account-profile-page .account-profile-main {
    padding-top: 164px;
  }

  body:not(.admin-page) .site-header.segment-header {
    height: 144px;
  }

  body:not(.admin-page) .site-header.segment-header.is-compact {
    height: 104px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-mainbar,
  body:not(.admin-page) .site-header.segment-header .segment-mainbar-inner {
    height: 104px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-mainbar-inner {
    width: calc(100% - 32px);
    padding: 4px 0;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: 52px 36px;
    column-gap: 10px;
    row-gap: 8px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-menu-toggle {
    display: grid;
    width: 40px;
    height: 48px;
    grid-column: 1;
    grid-row: 1;
    place-items: center;
    justify-self: start;
    background: transparent;
  }

  body:not(.admin-page) .site-header.segment-header .segment-brand {
    width: 128px;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  body:not(.admin-page) .site-header.segment-header .segment-brand .brand-logo-image {
    width: 128px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-catalog-button {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions {
    grid-column: 3;
    grid-row: 1;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search {
    height: 36px;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search input,
  body:not(.admin-page) .site-header.segment-header .segment-header-search button {
    height: 34px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-balance,
  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-balance-toggle {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-account-bell,
  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-profile-wrap .user-chip {
    display: grid;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    place-items: center;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .auth-trigger {
    width: 86px;
    min-width: 86px;
    height: 32px;
    min-height: 32px;
    padding: 0 10px;
  }

  body:not(.admin-page) .site-header.segment-header .auth-trigger-long {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .auth-trigger-short {
    display: inline;
  }

  body:not(.account-profile-page):not(.admin-page) .home-main {
    padding-top: 144px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-main .page-grid,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-grid,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-bottom {
    width: calc(100% - 32px);
  }

  body:not(.account-profile-page):not(.admin-page) main :where(.page-grid, #voiceProfile, .site-breadcrumbs-row):has(> .site-breadcrumbs),
  body:not(.account-profile-page):not(.admin-page).legal-page .legal-document {
    width: calc(100% - 32px);
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h1,
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h2 {
    font-size: 38px;
  }
}

@media (min-width: 640px) and (max-width: 1199px) {
  body:not(.account-profile-page):not(.admin-page) main :where(.page-grid, #voiceProfile, .site-breadcrumbs-row):has(> .site-breadcrumbs),
  body:not(.account-profile-page):not(.admin-page).legal-page .legal-document {
    width: calc(100% - 44px);
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid,
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections,
  body:not(.account-profile-page):not(.admin-page) .home-production-grid,
  body:not(.account-profile-page):not(.admin-page) .home-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections,
  body:not(.account-profile-page):not(.admin-page) .home-production-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) and (max-width: 899px) {
  body:not(.account-profile-page):not(.admin-page) .home-voice-collection h3 {
    font-size: 24px;
    line-height: 30px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  body:not(.account-profile-page):not(.admin-page) .home-production-grid article:nth-child(3),
  body:not(.account-profile-page):not(.admin-page) .home-production-grid article:nth-child(4) {
    grid-column: span 2;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  body:not(.admin-page) .site-header.segment-header .segment-mainbar-inner {
    grid-template-columns: 128px 112px minmax(120px, 1fr) 92px;
    grid-template-rows: 1fr;
  }

  body:not(.admin-page) .site-header.segment-header .segment-menu-toggle {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-brand {
    width: 128px;
    grid-column: 1;
    grid-row: 1;
  }

  body:not(.admin-page) .site-header.segment-header .segment-brand .brand-logo-image {
    width: 128px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-catalog-button {
    display: flex;
    width: 112px;
    grid-column: 2;
    grid-row: 1;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search {
    height: 46px;
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search input,
  body:not(.admin-page) .site-header.segment-header .segment-header-search button {
    height: 44px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions {
    width: 92px;
    height: auto;
    grid-column: 4;
    grid-row: 1;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-balance,
  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-balance-toggle {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .auth-trigger {
    width: 92px;
    min-width: 92px;
  }

  body:not(.admin-page) .site-header.segment-header .auth-trigger-long {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .auth-trigger-short {
    display: inline;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  body:not(.admin-page) .site-header.segment-header .segment-mainbar-inner {
    grid-template-columns: 180px 122px minmax(180px, 1fr) auto;
    grid-template-rows: 1fr;
    gap: 14px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-menu-toggle {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-catalog-button {
    display: flex;
    grid-column: 2;
    grid-row: 1;
  }

  body:not(.admin-page) .site-header.segment-header .segment-brand {
    grid-column: 1;
    grid-row: 1;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search {
    height: 46px;
    grid-column: 3;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search input,
  body:not(.admin-page) .site-header.segment-header .segment-header-search button {
    height: 44px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions {
    height: auto;
    grid-column: 4;
    grid-row: 1;
  }
}

@media (min-width: 1200px) {
  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-utility-inner,
  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-mainbar-inner,
  body:not(.account-profile-page):not(.admin-page) .home-main .page-grid,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-grid,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-bottom {
    width: min(1396px, calc(100% - 44px));
    max-width: 1396px;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-utility nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
    white-space: nowrap;
  }

  body:not(.account-profile-page):not(.admin-page) .home-main {
    padding-top: 150px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider {
    padding: 18px 0 58px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid,
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections,
  body:not(.account-profile-page):not(.admin-page) .home-example-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  body:not(.account-profile-page):not(.admin-page) .home-production-grid {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  body:not(.account-profile-page):not(.admin-page) .home-production-grid article:nth-child(3),
  body:not(.account-profile-page):not(.admin-page) .home-production-grid article:nth-child(4) {
    grid-column: span 2;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-grid {
    grid-template-columns: minmax(220px, 1.2fr) repeat(4, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    row-gap: 32px;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-branding,
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-column {
    min-width: 0;
    grid-column: auto;
  }
}

/* Final public header, slider and advantage geometry contract. */
.segment-online {
  column-gap: 5px;
}

.segment-online > i {
  margin: 0;
  flex: 0 0 auto;
}

.segment-online-copy {
  display: inline;
  min-width: max-content;
  white-space: nowrap;
}

.segment-header-actions .segment-profile-wrap .user-chip > .segment-user-avatar {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.segment-profile-wrap[data-account-voice-id] .user-chip > .segment-user-avatar > .voice-presence {
  z-index: 2;
  top: -4px;
  right: -4px;
  bottom: auto;
  width: 10px;
  height: 10px;
  border-width: 2px;
  box-sizing: content-box;
  box-shadow: none;
}

@media (min-width: 481px) and (max-width: 1199px) {
  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-utility-inner {
    gap: 16px;
    overflow: hidden;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-online,
  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-online-copy {
    min-width: max-content;
    flex: 0 0 auto;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-utility nav {
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-utility nav a {
    min-width: max-content;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (min-width: 640px) and (max-width: 1199px) {
  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-catalog-menu:not([hidden]) {
    display: block !important;
    top: 150px;
    max-height: calc(100vh - 150px);
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header.is-compact .segment-catalog-menu:not([hidden]) {
    top: 110px;
    max-height: calc(100vh - 110px);
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-catalog-menu[hidden] {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 780px) {
  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-catalog-menu-grid {
    width: calc(100% - 32px);
    padding: 20px 0 24px;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-catalog-voice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-catalog-services-title {
    margin-top: 32px;
  }

  body:not(.account-profile-page):not(.admin-page) .site-header.segment-header .segment-catalog-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

body:not(.account-profile-page):not(.admin-page) .home-slider-viewport .home-slider-arrow,
body:not(.account-profile-page):not(.admin-page) .home-slider-viewport .home-slider-arrow:hover,
body:not(.account-profile-page):not(.admin-page) .home-slider-viewport .home-slider-arrow:focus-visible {
  top: 50%;
  bottom: auto;
  translate: 0 -50%;
}

body:not(.account-profile-page):not(.admin-page) .home-slider-viewport .home-slider-arrow.is-prev {
  left: 20px;
}

body:not(.account-profile-page):not(.admin-page) .home-slider-viewport .home-slider-arrow.is-next {
  right: 20px;
}

body:not(.account-profile-page):not(.admin-page) .home-slide-copy {
  max-width: 100%;
  box-sizing: border-box;
  transform: none;
  width: min(760px, 65%);
  padding: 0 0 0 104px;
  justify-items: start;
  text-align: left;
}

body:not(.account-profile-page):not(.admin-page) .home-slide-copy > * {
  max-width: 100%;
}

.home-slide-copy h1,
.home-slide-copy h2 {
  font-size: 46px;
  font-weight: 700;
  line-height: 1.17;
}

.home-slide-copy p:not(.eyebrow) {
  max-width: 523px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}

.home-slide > img {
  inset: 0;
  width: 100%;
  height: 125%;
  object-fit: cover;
  object-position: center top;
  transform: scaleX(-1);
}

.home-slide-overlay,
.home-slide-secondary .home-slide-overlay {
  background: none;
}

.home-advantage-grid {
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.home-advantage-grid article,
.home-advantage-grid article:nth-child(3),
.home-advantage-grid article:hover,
.home-advantage-grid article:focus-within {
  display: flex;
  height: auto;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 16px;
  gap: 16px;
  overflow: visible;
  box-sizing: border-box;
}

.home-advantage-grid article strong,
.home-advantage-grid article:nth-child(3) strong,
.home-advantage-grid article:hover strong,
.home-advantage-grid article:focus-within strong {
  margin-top: 0;
  font-size: 20px;
}

.home-advantage-grid article > div {
  width: 100%;
  max-width: none;
}

.home-advantage-grid article > span {
  flex: 0 0 auto;
}

.home-advantage-grid p {
  font-size: 17px;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .home-advantage-grid strong { font-size: 20px; }
  .home-advantage-grid p { font-size: 16px; }
}

@media (min-width: 481px) and (max-width: 767px) {
  .home-advantage-grid strong { font-size: 19px; }
  .home-advantage-grid p { font-size: 15px; }
}

@media (max-width: 480px) {
  .home-advantage-grid article strong,
  .home-advantage-grid article:nth-child(3) strong,
  .home-advantage-grid article:hover strong,
  .home-advantage-grid article:focus-within strong { font-size: 16px; line-height: 20px; }
  .home-advantage-grid p { font-size: 14px; line-height: 20px; }
  .home-advantage-grid article,
  .home-advantage-grid article:nth-child(3),
  .home-advantage-grid article:hover,
  .home-advantage-grid article:focus-within {
    padding: 14px;
    gap: 12px;
  }
  .home-advantage-grid article > span,
  .home-advantage-grid article:hover > span,
  .home-advantage-grid article:focus-within > span {
    width: 40px;
    height: 40px;
    background-size: contain;
  }
}

/* Authoritative home and mobile player correction: 20260823-271. */
/* Phone home and player contract. */
@media (max-width: 480px) {
  body:not(.account-profile-page):not(.admin-page) .home-slider {
    padding: 10px 0 0;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-viewport,
  body:not(.account-profile-page):not(.admin-page) .home-slider-track,
  body:not(.account-profile-page):not(.admin-page) .home-slide {
    height: auto;
    min-height: 0;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-viewport,
  body:not(.account-profile-page):not(.admin-page) .home-slide {
    border-radius: 8px !important;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide > img {
    inset: 0 -36% auto auto;
    width: 140%;
    height: 130%;
    object-fit: contain;
    object-position: center top;
    transform: scaleX(-1);
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-arrow {
    display: none !important;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 244px;
    padding: 20px 16px 16px;
    align-content: start;
    justify-items: start;
    text-align: left;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h1,
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h2 {
    width: 72%;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy p:not(.eyebrow) {
    max-width: 70%;
    font-size: 12px;
    line-height: 16px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy > div {
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-button,
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy > div button {
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 36px;
    align-self: center;
    padding-inline: 10px;
    font-size: 12px;
    line-height: 16px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy > div button {
    padding-inline: 0;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-dots {
    display: none;
  }

  body:not(.account-profile-page):not(.admin-page) .home-section {
    padding-block: 22px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-section h2 {
    margin-bottom: 18px;
    font-size: 22px;
    line-height: 26px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-advantage-grid,
  body:not(.account-profile-page):not(.admin-page) .home-voice-collections {
    gap: 10px;
    padding: 2px 2px 8px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-voices .page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body:not(.account-profile-page):not(.admin-page) .home-voices .home-section-head {
    display: contents;
  }

  body:not(.account-profile-page):not(.admin-page) .home-voices .home-section-head h2 {
    order: 1;
  }

  body:not(.account-profile-page):not(.admin-page) .home-voices .home-voice-collections {
    order: 2;
  }

  body:not(.account-profile-page):not(.admin-page) .home-voices .home-section-head > a {
    order: 3;
    justify-self: start;
    margin-top: 12px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-voice-collection {
    height: auto;
    min-height: 0;
    padding: 14px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-voice-collection h3 {
    height: auto;
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 20px;
  }

  .home-voice-collection > div { gap: 14px; }

  .home-voice-collection > a {
    height: 36px;
    min-height: 36px;
    margin-top: 16px;
    font-size: 14px;
  }

  .home-voice-collection .home-voice-row.reference-home-voice-row {
    height: 56px;
    min-height: 56px;
  }

  .home-voice-collection .reference-home-avatar-wrap,
  .home-voice-collection .reference-home-avatar,
  .home-voice-collection .reference-home-avatar img,
  .home-voice-collection .home-voice-row .reference-home-play {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 8px;
  }

  .home-voice-collection .reference-home-avatar-wrap { top: 0; }

  .home-voice-collection .home-voice-row .reference-home-copy > a {
    top: 0;
    left: 62px;
    width: calc(100% - 112px);
    font-size: 14px;
    line-height: 18px;
  }

  .home-voice-collection .reference-home-copy > span {
    top: 20px;
    left: 62px;
    width: calc(100% - 62px);
    max-width: none;
    font-size: 11px;
    line-height: 14px;
  }

  .home-voice-collection .reference-home-stars {
    top: 38px;
    right: auto;
    left: 62px;
  }

  .home-voice-collection .reference-home-cashback {
    top: 0;
    width: 44px;
    height: 16px;
  }

  .home-voice-collection .reference-home-cashback > span { display: none; }
  .home-voice-collection .reference-home-cashback > strong { width: 26px; flex-basis: 26px; font-size: 10px; }
  .home-voice-collection .reference-home-cashback > b { width: 12px; height: 12px; flex-basis: 12px; background-size: contain; }

  .home-voice-collection .home-voice-row .reference-home-player {
    display: none;
  }

  .global-player-core {
    box-shadow: 0 -8px 24px rgb(31 60 98 / 7%);
  }

  .global-player-track {
    position: relative;
    display: grid;
    height: 44px;
    grid-template-rows: 18px 12px;
    row-gap: 8px;
    align-content: start;
  }

  .global-player-track .global-player-times {
    position: relative;
    inset: auto;
    display: flex;
    width: 100%;
    height: 18px;
    grid-row: 1;
    pointer-events: none;
  }

  .global-player-track input[type="range"] {
    position: relative;
    inset: auto;
    width: 100%;
    height: 12px;
    grid-row: 2;
    margin: 0;
    align-self: center;
  }

  body.customer-mobile-cabinet .global-audio-player,
  body.customer-mobile-cabinet.is-performer-modal-open .global-audio-player {
    bottom: var(--customer-mobile-nav-height, 50px);
  }
}

/* Tablet home contract. */
@media (min-width: 481px) and (max-width: 1199px) {
  body:not(.account-profile-page):not(.admin-page) .home-slider {
    padding: 18px 0 16px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-viewport,
  body:not(.account-profile-page):not(.admin-page) .home-slider-track,
  body:not(.account-profile-page):not(.admin-page) .home-slide {
    height: 380px;
    min-height: 0;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide > img {
    inset: 0;
    width: 100%;
    height: 125%;
    object-fit: cover;
    object-position: center top;
    transform: scaleX(-1);
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-tags {
    display: none;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy {
    width: min(85%, 680px);
    max-width: 680px;
    padding: 0 64px;
    align-content: center;
    justify-items: start;
    text-align: left;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h1,
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h2 {
    margin-bottom: 14px;
    max-width: 22ch;
    font-size: 30px;
    line-height: 36px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy p:not(.eyebrow) {
    max-width: 36ch;
    font-size: 16px;
    line-height: 1.4;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-copy > div {
    width: auto;
    max-width: 100%;
    margin-top: 24px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slide-button,
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy > div button {
    width: auto;
    min-width: 0;
    max-width: 100%;
    align-self: center;
    font-size: 16px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-section {
    padding-block: 34px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-section h2 {
    margin-bottom: 28px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-section-head {
    margin-bottom: 28px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-section-head h2 {
    margin-bottom: 0;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-arrow {
    display: grid !important;
    top: 50%;
    bottom: auto;
    place-items: center;
    translate: 0 -50%;
  }
}

/* Wide-tablet copy width refinement. */
@media (min-width: 768px) and (max-width: 1199px) {
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy {
    width: min(85%, 680px);
    padding-left: 96px;
  }
}

@media (min-width: 481px) and (max-width: 639px) {
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h1,
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy h2 {
    font-size: 24px;
    line-height: 28px;
  }
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy p:not(.eyebrow) {
    font-size: 14px;
    line-height: 20px;
  }
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy > div {
    gap: 8px;
  }
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy > div button,
  body:not(.account-profile-page):not(.admin-page) .home-slide-button {
    font-size: 14px;
  }
}

/* Slider arrow safe area and header presence visibility: 20260828-274. */
.segment-header-actions .segment-profile-wrap .user-chip > .segment-user-avatar {
  overflow: visible;
  clip: auto;
}

.segment-header-actions .segment-profile-wrap .user-chip > .segment-user-avatar > img {
  border-radius: 50%;
}

@media (min-width: 481px) and (max-width: 780px) {
  body:not(.account-profile-page):not(.admin-page) .home-slide-copy {
    width: 100%;
    max-width: none;
    padding-right: 64px;
    padding-left: 64px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-viewport .home-slider-arrow.is-prev {
    left: 10px;
  }

  body:not(.account-profile-page):not(.admin-page) .home-slider-viewport .home-slider-arrow.is-next {
    right: 10px;
  }
}

/* Shared authenticated mobile chrome: one header, service strip, profile menu and bottom navigation. */
:root {
  --shared-mobile-page-gutter: 12px;
  --shared-mobile-viewport-bottom: 0px;
  --shared-mobile-bottom-nav-height: calc(50px + env(safe-area-inset-bottom, 0px));
  --shared-mobile-bottom-nav-space: calc(var(--shared-mobile-bottom-nav-height) + var(--shared-mobile-viewport-bottom));
}

.segment-mobile-bottom-nav {
  display: none;
}

@media (min-width: 320px) and (max-width: 480px) {
  html,
  body:not(.admin-page) {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  @supports (overflow: clip) {
    html,
    body:not(.admin-page) {
      overflow-x: clip;
    }
  }

  body:not(.admin-page) .site-header.segment-header,
  body:not(.admin-page) .site-header.segment-header.is-compact {
    display: block !important;
    height: 160px;
    overflow: visible;
    transition: height 240ms cubic-bezier(.22, 1, .36, 1);
  }

  body:not(.admin-page) .site-header.segment-header .segment-utility {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-mainbar,
  body:not(.admin-page) .site-header.segment-header .segment-mainbar-inner,
  body:not(.admin-page) .site-header.segment-header.is-compact .segment-mainbar {
    height: 104px;
    transform: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-mainbar-inner {
    display: grid;
    width: calc(100% - 24px);
    max-width: none;
    padding: 4px 0;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-rows: 52px 36px;
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
  }

  body:not(.admin-page) .site-header.segment-header .segment-menu-toggle {
    display: grid;
    width: 40px;
    height: 48px;
    grid-column: 1;
    grid-row: 1;
    place-items: center;
    justify-self: start;
    background: transparent;
  }

  body:not(.admin-page) .site-header.segment-header .segment-menu-icon {
    width: 22px;
    height: 16px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-menu-icon i {
    width: 22px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-brand {
    width: 128px;
    height: 32px;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin: 0;
  }

  body:not(.admin-page) .site-header.segment-header .segment-brand .brand-logo-image {
    display: block;
    width: 128px;
    height: 32px;
    max-height: none;
    object-fit: contain;
  }

  body:not(.admin-page) .site-header.segment-header .segment-catalog-button {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions {
    display: flex;
    height: 52px;
    min-width: 0;
    grid-column: 3;
    grid-row: 1;
    align-items: center;
    justify-self: end;
    gap: 8px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-balance,
  body:not(.admin-page) .site-header.segment-header .segment-balance-toggle {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-account-bell,
  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-profile-wrap .user-chip {
    display: grid;
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    place-items: center;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-account-bell .segment-bell-svg {
    width: 28px;
    height: 28px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-actions .segment-account-bell .notification-badge {
    top: 0;
    right: 0;
    width: 18px;
    min-width: 18px;
    height: 18px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search {
    display: grid;
    width: 100%;
    height: 36px;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr) 36px;
    border-color: #367be3;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search input,
  body:not(.admin-page) .site-header.segment-header .segment-header-search button {
    box-sizing: border-box;
    height: 34px;
    min-height: 0;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search input {
    padding: 0 8px 0 13px;
    font-size: 14px;
    line-height: 34px;
  }

  body:not(.admin-page) .site-header.segment-header .segment-header-search button {
    width: 36px;
  }

  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links,
  body.account-profile-page .site-header.segment-header .mobile-catalog-links {
    display: flex !important;
    box-sizing: border-box;
    width: 100%;
    height: 56px;
    max-height: 56px;
    gap: 12px;
    align-items: center;
    padding: 10px var(--shared-mobile-page-gutter);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    opacity: 1;
    visibility: visible;
    background: #fff;
    border: 0;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    transition:
      opacity 180ms ease,
      transform 240ms cubic-bezier(.22, 1, .36, 1),
      clip-path 240ms cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 0s;
    scroll-padding-inline: var(--shared-mobile-page-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links::-webkit-scrollbar {
    display: none;
  }

  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links a {
    display: grid;
    width: max-content;
    min-width: max-content;
    height: 36px;
    flex: 0 0 auto;
    padding: 6px 10px;
    grid-template-columns: 24px auto;
    gap: 8px;
    align-items: center;
    color: #121212;
    font: 400 14px/1.2 var(--font-sans);
    text-decoration: none;
    white-space: nowrap;
    background: #ebf3ff;
    border: 0;
    border-radius: 6px;
    scroll-snap-align: start;
  }

  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links [data-mobile-catalog-item="all"] {
    width: 123px;
    min-width: 123px;
  }

  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links [data-mobile-catalog-item="featured"] {
    width: 166px;
    min-width: 166px;
  }

  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links [data-mobile-catalog-item="male"] {
    width: 123px;
    min-width: 123px;
  }

  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links .mobile-catalog-icon,
  body:not(.admin-page) .site-header.segment-header .mobile-catalog-links .mobile-catalog-icon img {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    object-fit: contain;
  }

  body:not(.admin-page) .site-header.segment-header.is-mobile-catalog-hidden,
  body:not(.admin-page) .site-header.segment-header.is-compact.is-mobile-catalog-hidden {
    height: 104px;
  }

  body:not(.admin-page) .site-header.segment-header.is-mobile-catalog-hidden .mobile-catalog-links {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-8px);
    transition:
      opacity 160ms ease,
      transform 240ms cubic-bezier(.22, 1, .36, 1),
      clip-path 240ms cubic-bezier(.22, 1, .36, 1),
      visibility 0s linear 240ms;
  }

  body:not(.admin-page) .segment-mobile-menu {
    position: fixed;
    z-index: 980;
    inset: 0;
    display: block;
    box-sizing: border-box;
    width: 100vw;
    height: 100dvh;
    padding: 0 12px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #fff;
    border: 0;
    transform: none;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }

  body:not(.admin-page) .segment-mobile-menu[hidden] {
    display: none;
  }

  body.has-shared-mobile-bottom-nav .segment-mobile-menu {
    bottom: var(--shared-mobile-bottom-nav-space);
    width: 100%;
    height: calc(100dvh - var(--shared-mobile-bottom-nav-space));
  }

  body:not(.admin-page) .segment-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  body:not(.admin-page) .segment-mobile-menu-head {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    width: 100%;
    height: 60px;
    min-height: 60px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e5ebf3;
  }

  body:not(.admin-page) .segment-mobile-menu-close {
    display: grid;
    width: 40px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    place-items: center;
    color: #253247;
    background: transparent;
    border: 0;
  }

  body:not(.admin-page) .segment-mobile-menu-head .segment-online {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-self: end;
    gap: 5px;
    font-size: 12px;
    white-space: nowrap;
  }

  body:not(.admin-page) .segment-mobile-guest,
  body:not(.admin-page) .segment-mobile-account {
    display: grid;
    gap: 10px;
    padding: 20px 0;
    border-bottom: 1px solid #e5ebf3;
  }

  body:not(.admin-page) .segment-mobile-utility {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 18px 0;
    border-bottom: 1px solid #e5ebf3;
  }

  body:not(.admin-page) .segment-mobile-menu .segment-mobile-utility a,
  body:not(.admin-page) .segment-mobile-menu .segment-mobile-utility button {
    display: flex;
    min-height: 33px;
    align-items: center;
    padding: 5px 0;
    color: #121212;
    font: 400 16px/1.35 var(--font-sans);
    text-decoration: none;
    background: transparent;
    border: 0;
  }

  body:not(.admin-page) .segment-mobile-services {
    padding: 16px 0 8px;
  }

  body:not(.admin-page) .segment-mobile-services > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
  }

  body:not(.admin-page) .segment-mobile-menu .segment-mobile-services a,
  body:not(.admin-page) .segment-mobile-menu .segment-mobile-services button {
    display: grid;
    box-sizing: border-box;
    min-height: 58px;
    padding: 5px 12px 5px 6px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    color: #121212;
    font: 400 14px/1.25 var(--font-sans);
    text-decoration: none;
    background: #e9f2ff;
    border: 0;
    border-radius: 6px;
  }

  body:not(.admin-page) .segment-mobile-menu .segment-mobile-services a > span,
  body:not(.admin-page) .segment-mobile-menu .segment-mobile-services button > span,
  body:not(.admin-page) .segment-mobile-menu .segment-mobile-services img {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    object-fit: contain;
  }

  body.has-shared-mobile-bottom-nav .segment-mobile-bottom-nav {
    position: fixed;
    z-index: 970;
    inset: auto 0 var(--shared-mobile-viewport-bottom);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: auto;
    height: var(--shared-mobile-bottom-nav-height);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    border-top: 1px solid #d4dae5;
    background: #f7f9fd;
    transition:
      bottom 180ms cubic-bezier(.22, 1, .36, 1),
      opacity 160ms ease,
      transform 180ms cubic-bezier(.22, 1, .36, 1);
  }

  body.has-shared-mobile-bottom-nav .segment-mobile-bottom-nav > button {
    position: relative;
    display: grid;
    width: 100%;
    height: 50px;
    min-height: 50px;
    padding: 3px 0 2px;
    place-items: center;
    color: #273244;
    font: 400 10px/12px var(--font-sans);
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  body.has-shared-mobile-bottom-nav .segment-mobile-bottom-nav > button[aria-current="page"] {
    color: #0877f9;
  }

  body.has-shared-mobile-bottom-nav .segment-mobile-bottom-nav > button > span:last-of-type {
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    overflow: hidden;
    line-height: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.has-shared-mobile-bottom-nav .customer-mobile-nav-icon {
    position: absolute;
    top: 9px;
    left: 50%;
    display: block;
    width: 20px;
    height: 20px;
    color: inherit;
    background: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    transform: translateX(-50%);
  }

  body.has-shared-mobile-bottom-nav .customer-mobile-nav-icon.is-overview {
    mask-image: url("./assets/dashboard-icons/overview.svg");
  }

  body.has-shared-mobile-bottom-nav .customer-mobile-nav-icon.is-messages {
    mask-image: url("./assets/dashboard-icons/chat.svg");
  }

  body.has-shared-mobile-bottom-nav .customer-mobile-nav-icon.is-orders {
    mask-image: url("./assets/dashboard-icons/orders.svg");
  }

  body.has-shared-mobile-bottom-nav .customer-mobile-nav-icon.is-profile {
    mask-image: url("./assets/dashboard-icons/settings.svg");
  }

  body.has-shared-mobile-bottom-nav .customer-mobile-nav-icon.is-search {
    width: 18px;
    height: 18px;
    background: transparent;
    border: 2px solid currentColor;
    border-radius: 50%;
    mask-image: none;
  }

  body.has-shared-mobile-bottom-nav .customer-mobile-nav-icon.is-search::after {
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 8px;
    height: 2px;
    border-radius: 3px;
    background: currentColor;
    content: "";
    transform: rotate(45deg);
  }

  body.has-shared-mobile-bottom-nav .customer-mobile-nav-icon.is-menu {
    background:
      radial-gradient(circle at 5px 2px, currentColor 0 1.75px, transparent 2px),
      radial-gradient(circle at 15px 9px, currentColor 0 1.75px, transparent 2px),
      radial-gradient(circle at 7px 16px, currentColor 0 1.75px, transparent 2px),
      linear-gradient(currentColor, currentColor) 0 1px / 20px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 8px / 20px 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 15px / 20px 2px no-repeat;
    mask-image: none;
  }

  body.has-shared-mobile-bottom-nav .segment-mobile-bottom-nav [data-mobile-cabinet-badge] {
    position: absolute;
    top: 5px;
    left: calc(50% + 4px);
    display: grid;
    width: 14px;
    min-width: 14px;
    height: 14px;
    padding: 0;
    place-items: center;
    color: transparent;
    background: #e34848;
    border: 2px solid #f7f9fd;
    border-radius: 50%;
  }

  body.has-shared-mobile-bottom-nav .segment-mobile-bottom-nav [data-mobile-cabinet-badge][hidden] {
    display: none;
  }

  body.has-shared-mobile-bottom-nav .site-footer.segment-footer .segment-footer-bottom {
    padding-bottom: calc(28px + var(--shared-mobile-bottom-nav-space));
  }

  body.has-shared-mobile-bottom-nav .global-audio-player {
    bottom: var(--shared-mobile-bottom-nav-space);
  }

  body.has-shared-mobile-bottom-nav.is-shared-mobile-keyboard-open .segment-mobile-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
  }

  body.account-profile-page.customer-mobile-cabinet {
    --customer-mobile-header-height: 160px;
  }

  body.account-profile-page.customer-mobile-cabinet .customer-mobile-header,
  body.account-profile-page.customer-mobile-cabinet.customer-mobile-chat-active .customer-mobile-header {
    display: none !important;
  }

  body.account-profile-page.customer-mobile-cabinet .site-header.segment-header,
  body.account-profile-page.customer-mobile-cabinet.customer-mobile-chat-active .site-header.segment-header,
  body.account-profile-page.customer-mobile-cabinet .site-footer.segment-footer {
    display: block !important;
  }

  body.account-profile-page.customer-mobile-cabinet .account-profile-main {
    padding-top: 160px !important;
    padding-bottom: var(--shared-mobile-bottom-nav-space) !important;
  }

  body:not(.account-profile-page):not(.admin-page).contacts-page .contacts-page-shell {
    width: calc(100% - 24px);
    max-width: none;
    margin-right: auto;
    margin-left: auto;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-footer-branding,
  body:not(.admin-page) .site-footer.segment-footer .segment-footer-column,
  body:not(.admin-page) .site-footer.segment-footer .segment-footer-support,
  body:not(.admin-page) .site-footer.segment-footer .segment-footer-copyright {
    text-align: left;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-footer-branding {
    justify-items: start;
    align-items: flex-start;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-footer-branding .segment-brand,
  body:not(.admin-page) .site-footer.segment-footer .segment-socials {
    margin-right: 0;
    margin-left: 0;
    justify-self: start;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-socials {
    width: auto;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-footer-branding .brand-logo-image {
    object-position: left center;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-socials,
  body:not(.admin-page) .site-footer.segment-footer .segment-payments {
    justify-content: flex-start;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-footer-support {
    align-items: start;
    justify-items: start;
    gap: 0;
    color: #121212;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-footer-toggle .segment-icon {
    color: #367be3;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-footer-links :is(a, button) {
    color: #121212;
    font: 400 16px/24px var(--font-sans);
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-footer-links :is(a, button):is(:hover, :focus-visible) {
    color: #0877f9;
  }

  body:not(.admin-page) .site-footer.segment-footer .segment-payments {
    padding-block: 20px;
    border-top: 1px solid #d4dae5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.segment-header,
  .site-header.segment-header .mobile-catalog-links,
  .segment-mobile-menu {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}

/* Package 298: Figma-aligned rating controls and tablet footer geometry. */
.rating-page .rating-page-head {
  display: block;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.rating-page .rating-toolbar {
  position: relative;
  z-index: 20;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin-top: 28px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.rating-sort-control {
  display: block;
  width: 240px;
  min-width: 0;
}

.rating-page .rating-sort-control .dashboard-choice-trigger {
  width: 100%;
  height: 40px;
  min-height: 40px;
  justify-content: flex-start;
  padding: 0;
  color: #172235;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transition: color 180ms ease;
}

.rating-page .rating-sort-control .dashboard-choice-trigger:is(:hover, :focus-visible),
.rating-page .rating-sort-control .dashboard-choice.is-open .dashboard-choice-trigger {
  color: #0877f9;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.rating-page .rating-sort-control .dashboard-choice-trigger [data-dashboard-choice-label],
.rating-page .rating-sort-control .dashboard-choice.is-open .dashboard-choice-trigger [data-dashboard-choice-label] {
  flex: 1 1 auto;
  color: inherit;
  font: 500 14px/1.2 var(--font-sans);
  transform: none;
  transition: none;
}

.rating-page .rating-sort-control .dashboard-choice-menu {
  right: auto;
  left: 0;
  width: min(240px, calc(100vw - 24px));
}

.rating-page .rating-online-switch {
  flex: 0 0 auto;
  align-self: center;
}

.rating-page .rating-voice-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

@media (min-width: 481px) and (max-width: 1199px) {
  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer {
    border-top: 0;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-branding {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 7vw, 84px);
    align-items: center;
    justify-content: initial;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-branding .segment-brand {
    width: max-content;
    max-width: 100%;
    justify-self: start;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-branding .brand-logo-image {
    object-position: left center;
  }

  body:not(.account-profile-page):not(.admin-page) .site-footer.segment-footer .segment-footer-branding .segment-socials {
    grid-column: 2;
    justify-self: start;
    justify-content: flex-start;
  }
}

@media (max-width: 699px) {
  .rating-page .rating-toolbar {
    gap: 12px;
  }

  .rating-sort-control {
    width: min(220px, 52vw);
  }
}

@media (max-width: 480px) {
  .rating-page .rating-toolbar {
    display: none;
  }
}

/* Package 299: visible rating sort affordance and one footer heading style. */
.rating-page .rating-sort-control .dashboard-choice-trigger {
  padding: 0 14px;
  color: #172235;
  background: #eef5ff;
  border: 1px solid #cfe0f7;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.rating-page .rating-sort-control .dashboard-choice-trigger:is(:hover, :focus-visible),
.rating-page .rating-sort-control .dashboard-choice.is-open .dashboard-choice-trigger {
  color: #0877f9;
  background: #e4efff;
  border: 1px solid #9fc0ec;
  box-shadow: none;
  outline: none;
}

.site-footer.segment-footer .segment-footer-toggle {
  color: #121212;
  font: 600 16px/1.2 var(--font-sans);
}

/* Package 300: white rating choice with the shared Figma disclosure glyph. */
.rating-page .rating-sort-control .dashboard-choice-trigger {
  justify-content: space-between;
  gap: 10px;
  color: #172235;
  background: #fff;
  border: 0;
  box-shadow: none;
}

.rating-page .rating-sort-control .dashboard-choice-trigger:is(:hover, :focus-visible),
.rating-page .rating-sort-control .dashboard-choice.is-open .dashboard-choice-trigger {
  color: #0877f9;
  background: #eef5ff;
  border: 0;
  box-shadow: none;
}

.rating-page .rating-sort-control .dashboard-choice-chevron {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  color: #718198;
  transform: rotate(180deg);
  transition: color 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.rating-page .rating-sort-control .dashboard-choice-chevron .segment-icon {
  display: block;
  width: 18px;
  height: 18px;
}

.rating-page .rating-sort-control .dashboard-choice.is-open .dashboard-choice-chevron {
  color: #0877f9;
  transform: rotate(0deg);
}

/* Package 301: compact rating choice and separated menu states. */
.rating-page .rating-sort-control {
  width: min(184px, 100%);
}

.rating-page .rating-sort-control .dashboard-choice-menu {
  width: min(184px, calc(100vw - 24px));
  min-width: 0;
  gap: 4px;
}

.rating-page .rating-sort-control .dashboard-choice-option:not(.is-selected):is(:hover, :focus-visible) {
  color: #253044;
  background: #f4f6f8;
}

.rating-page .rating-sort-control .dashboard-choice-option.is-selected,
.rating-page .rating-sort-control .dashboard-choice-option.is-selected:is(:hover, :focus-visible) {
  color: #0877f9;
  background: #edf5ff;
}

/* Package 297: the admin mobile drawer keeps its toggle reachable and stateful. */
@media (max-width: 860px) {
  body.admin-sidebar-open .admin-header {
    z-index: 102;
  }

  body.admin-sidebar-open .admin-header-inner > :not(.admin-mobile-menu) {
    pointer-events: none;
  }

  .admin-page .admin-sidebar {
    top: var(--admin-header-height);
    height: calc(100dvh - var(--admin-header-height));
  }

  .admin-page .admin-mobile-menu span {
    transition: opacity 160ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1);
  }

  .admin-page .admin-mobile-menu[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg);
  }

  .admin-page .admin-mobile-menu[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .admin-page .admin-mobile-menu[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg);
  }
}

/* Package 305: one public-title scale; heroes, cabinet titles and names stay separate. */
:root {
  --public-page-title-size: 44px;
}

:is(.catalog-page .catalog-heading, .rating-page .rating-page-head, .legal-page .legal-document) h1,
.faq-page #faqTitle,
.contacts-page #contactsTitle {
  max-width: 100%;
  font-size: var(--public-page-title-size) !important;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

@media (min-width: 481px) and (max-width: 1199px) {
  :root { --public-page-title-size: 32px; }
}

@media (max-width: 480px) {
  :root { --public-page-title-size: 24px; }
}

/* Touch devices cannot rely on hover to discover the existing demo control. */
@media (hover: none), (any-pointer: coarse) {
  .reference-voice-card .reference-card-play {
    opacity: 1;
    pointer-events: auto;
  }

  .reference-voice-card .reference-card-play:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

.rating-page .rating-filter-trigger {
  display: none;
}

/* The root scrolls on public pages; body.modal-open alone does not lock it. */
html:has(.rating-page #dashboardModal[data-dashboard-modal-variant="rating-filters"]:not([hidden])) {
  overflow: hidden;
  overscroll-behavior: none;
}

.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .dashboard-modal-backdrop {
  touch-action: none;
}

.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .dashboard-modal-panel {
  width: min(100%, 440px);
  max-height: calc(100dvh - 24px);
  overscroll-behavior: contain;
}

.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .rating-filter-fields {
  display: grid;
  gap: 20px;
  padding-block: 4px 12px;
}

.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .rating-sort-control,
.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .dashboard-choice-menu {
  width: 100%;
}

.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .dashboard-choice-trigger {
  min-height: 44px;
  background: #f4f6f8;
}

.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .rating-online-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  justify-self: start;
}

.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .rating-online-switch > b {
  font: 500 14px/20px var(--font-sans);
}

.dashboard-modal[data-dashboard-modal-variant="rating-filters"] .dashboard-modal-actions {
  margin-top: 12px;
}

@media (max-width: 480px) {
  .rating-page .rating-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    margin-top: 20px;
    padding: 0 12px;
    border: 0;
    border-radius: 6px;
    font: 500 14px/20px var(--font-sans);
  }
}

/* Package 319: continuous tablet cabinet navigation and stacked phone rates. */
@media (min-width: 481px) and (max-width: 1023px) {
  .account-profile-page .dashboard-shell {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .account-profile-page .dashboard-sidebar {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .account-profile-page .dashboard-sidebar-profile,
  .account-profile-page .dashboard-sidebar-foot,
  .account-profile-page .dashboard-nav-divider {
    display: none;
  }

  .account-profile-page .dashboard-nav {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 6px;
    padding: 0 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .account-profile-page .dashboard-nav::-webkit-scrollbar {
    display: none;
  }

  .account-profile-page .dashboard-nav-item,
  .account-profile-page .dashboard-nav-item:nth-child(7) {
    display: grid;
    width: auto;
    min-width: max-content;
    min-height: 40px;
    flex: 0 0 auto;
    grid-template-columns: 20px auto auto;
    gap: 8px;
    padding: 7px 11px;
    margin: 0;
    border: 0;
  }

  .account-profile-page .dashboard-nav-item span {
    overflow: visible;
    font-size: 14px;
    white-space: nowrap;
  }

  .account-profile-page .dashboard-nav-item .dashboard-nav-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
  }

  .account-profile-page .dashboard-workspace,
  .account-profile-page .dashboard-view {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .dashboard-modal-body .dashboard-rate-editor .dashboard-rate-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }

  .dashboard-modal-body .dashboard-rate-row > label,
  .dashboard-modal-body .dashboard-rate-row .dashboard-rate-input,
  .dashboard-modal-body .dashboard-rate-row .dashboard-rate-input input {
    width: 100%;
    min-width: 0;
  }
}

/* Package 320: cabinet interaction history, centered checks, mobile commission and search rhythm. */
.dashboard-commission-heading {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0 4px;
  align-items: baseline;
}

.dashboard-commission-tier {
  color: #0877f9;
  font-size: 1.17rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 639px) {
  body:not(.admin-page) .site-header.segment-header .segment-header-search input {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 16px;
    line-height: 20px;
  }
}

@media (min-width: 320px) and (max-width: 480px) {
  body.talent-mobile-cabinet .dashboard-view .dashboard-commission-card {
    grid-template-rows: auto auto auto auto auto auto;
    row-gap: 6px !important;
    min-height: 182px !important;
  }

  body.talent-mobile-cabinet .dashboard-view .dashboard-commission-heading {
    display: contents;
  }

  body.talent-mobile-cabinet .dashboard-view .dashboard-commission-value button {
    min-height: 20px;
    color: #8090a4;
    line-height: 20px;
    text-decoration: none;
  }

  body.talent-mobile-cabinet .dashboard-view .dashboard-commission-value strong {
    grid-column: 1;
    grid-row: 2 !important;
    align-self: center;
  }

  body.talent-mobile-cabinet .dashboard-view .dashboard-commission-card h2 {
    grid-column: 2;
    grid-row: 2 !important;
    align-self: center;
  }

  body.talent-mobile-cabinet .dashboard-view .dashboard-commission-tier {
    grid-column: 2;
    grid-row: 3 !important;
    color: #0877f9;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
  }

  body.talent-mobile-cabinet .dashboard-view .dashboard-commission-card p {
    grid-column: 1 / -1;
    grid-row: 4 !important;
    margin-top: 2px !important;
    padding-top: 10px;
  }

  body.talent-mobile-cabinet .dashboard-view .dashboard-level-track {
    grid-row: 5 !important;
  }

  body.talent-mobile-cabinet .dashboard-view .dashboard-level-labels {
    grid-row: 6 !important;
  }
}

/* Package 321: authoritative public catalog loading and empty states. */
.public-voice-catalog-state {
  display: flex;
  min-width: 0;
  min-height: 112px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 6px;
  background: #ffffff;
  color: #526273;
  text-align: center;
}

.public-voice-catalog-state p {
  max-width: 520px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
}

.service-order-catalog-state {
  width: 100%;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 6px;
  background: #eaf3ff;
  color: #526273;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.service-order-submit:disabled,
.service-order-submit[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

@media (max-width: 480px) {
  .public-voice-catalog-state {
    min-height: 96px;
    padding: 20px 16px;
  }

  .service-order-catalog-state {
    margin-top: 12px;
    padding: 12px 14px;
  }
}