/* Native visual states over the preserved Studio runtime. */
html:root .app-shell .loader .brand-mark {
  width: 220px !important;
  height: 215px !important;
  background: url("/zolix-landing/waiting-person.png?v=03084ec69572") center/contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: hp-person-wait 2.8s ease-in-out infinite !important;
}
html:root .app-shell .loader[role="alert"] .brand-mark {
  background-image: url("/zolix-landing/sad-person.png?v=ea2480a02aca") !important;
  animation: none !important;
}
html:root .app-shell .loader[role="alert"]:after {
  display: none !important;
}
html:root .app-shell .loader .brand-mark img,
html:root .app-shell .loader .brand-mark-spinner {
  display: none !important;
}
html:root .login-brand-auth:after {
  background-image: url("/zolix-landing/waiting-person.png?v=03084ec69572") !important;
}
@keyframes hp-person-wait {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  html:root .app-shell .loader .brand-mark {
    animation: none !important;
  }
}

/* Keep the key kind and panel name on separate lines in both Studio runtimes. */
html:root .hn-dashboard .hn-key-list.hn-key-list.hn-key-list > button > span:last-of-type,
html:root .hn-dashboard .hn-key-selection > strong {
  min-width: 0 !important;
  white-space: pre-line !important;
  overflow-wrap: anywhere;
  text-align: left !important;
  line-height: 1.4 !important;
}
@media (min-width: 1024px) {
  html:root .hn-dashboard .hn-key-list.hn-key-list.hn-key-list > button {
    height: auto !important;
    min-height: 60px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  html:root .hn-dashboard .hn-key-list.hn-key-list.hn-key-list > button > :is(svg, small, .hn-key-kind) {
    flex-shrink: 0 !important;
  }
  html:root .hn-dashboard .hn-key-list.hn-key-list.hn-key-list > button > small {
    margin-left: auto !important;
    white-space: nowrap !important;
  }
}

/* Native shared controls retain their explicit sizing within the preserved Studio design. */
html.theme-key-harpynet-studio .support-admin-composer-actions .message-image-dropzone {
  box-sizing: border-box !important;
  height: var(--message-image-compact-height) !important;
  min-height: var(--message-image-compact-height) !important;
  padding-block: 0 !important;
}
html.theme-key-harpynet-studio :is(.admin-screen-wrap, .dialog-card:has(.admin-btn))
  :is(input, button).ui-control[data-control-size],
html.theme-key-harpynet-studio .webapp-pagination.webapp-pagination
  :is(input, button).ui-control[data-control-size],
html.theme-key-harpynet-studio .copy-link-field.copy-link-field
  :is(input, button).ui-control[data-control-size] {
  box-sizing: border-box !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  padding-block: 0 !important;
}
html.theme-key-harpynet-studio .admin-pagination .admin-pagination-page[aria-current="page"] {
  background: var(--hn-admin-accent) !important;
  color: var(--hn-admin-accent-text) !important;
}
html.theme-key-harpynet-studio .ticket-message-bubble.ticket-message-bubble {
  padding-block: 6px !important;
}
html.theme-key-harpynet-studio:has(.app-shell) .app-shell .ticket-message-bubble.ticket-message-bubble .ticket-message-text.ticket-message-text,
html.theme-key-harpynet-studio:has(.app-shell) .app-shell .ticket-message-bubble.ticket-message-bubble .ticket-message-text.ticket-message-text p {
  color: inherit !important;
}
html.theme-key-harpynet-studio .account-merge-dialog .account-merge-body .btn {
  white-space: normal !important;
  overflow-wrap: anywhere;
  min-width: 0 !important;
  max-width: 100%;
}
html.theme-key-harpynet-studio :is(
  .partner-network-select-trigger, .partner-network-select-content, .partner-network-select-item
) {
  font-family: var(--font-ui, var(--font-sans, system-ui)) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
html.theme-key-harpynet-studio .partners-admin-page .partners-kpi-card {
  min-height: 96px;
}
@media (min-width: 601px) {
  html.theme-key-harpynet-studio:has(.app-shell) .app-shell:has(.bottom-nav) .phone-screen {
    padding-top: max(104px, var(--content-safe-area-top), var(--studio-nav-content-offset, 0px)) !important;
  }
}
@media (max-width: 1023px) {
  html.theme-key-harpynet-studio .app-shell:has(.bottom-nav)
    .phone-screen:has(.support-ticket-screen) > nav.bottom-nav.bottom-nav {
    display: none !important;
  }
}
html.theme-key-harpynet-studio .phone-screen .ticket-composer-row.ticket-composer-row
  :is(.message-image-icon-trigger, .ticket-composer-send).ui-control {
  box-sizing: border-box !important;
  height: var(--ui-control-height) !important;
  min-height: var(--ui-control-height) !important;
  padding-block: 0 !important;
}
html.theme-key-harpynet-studio:is(
  [data-telegram-fullscreen-requested="true"], [data-telegram-fullscreen="true"]
) .dialog {
  padding-top: max(12px, var(--content-safe-area-top)) !important;
  padding-bottom: max(12px, var(--content-safe-area-bottom)) !important;
}
html.theme-key-harpynet-studio:is(
  [data-telegram-fullscreen-requested="true"], [data-telegram-fullscreen="true"]
) .dialog-card {
  max-height: calc(100dvh - var(--content-safe-area-top) - var(--content-safe-area-bottom) - 24px) !important;
}
@media (max-width: 600px) {
  html.theme-key-harpynet-studio .support-admin-composer-actions {
    --message-image-compact-height: 44px;
  }
  html.theme-key-harpynet-studio .phone-screen .support-screen--create .ProseMirror {
    min-height: max(240px, calc(100dvh - 360px)) !important;
  }
  html.theme-key-harpynet-studio[data-telegram-fullscreen-requested="true"]
    .app-shell:has(.bottom-nav) nav.bottom-nav.bottom-nav,
  html.theme-key-harpynet-studio[data-telegram-fullscreen="true"]
    .app-shell:has(.bottom-nav) nav.bottom-nav.bottom-nav {
    bottom: max(6px, var(--content-safe-area-bottom)) !important;
  }
}

/* Corrections shared by the preserved Studio runtime and source components. */
html:root .hn-dashboard .hn-overview .hn-metrics {
  display: grid !important;
}
html:root .hn-dashboard .hn-metrics > .hn-metric:nth-child(1) {
  order: 2 !important;
}
html:root .hn-dashboard .hn-metrics > .hn-metric:nth-child(2) {
  order: 1 !important;
}
html:root .hn-dashboard .hn-metrics > .hn-metric:nth-child(3) {
  order: 3 !important;
}
html:root .hn-dashboard .hn-metrics > .hn-metric:nth-child(4) {
  order: 4 !important;
}

@media (max-width: 1023px) {
  html:root .hn-dashboard .hn-chart-workspace.has-keys > nav.hn-key-list.hn-key-list.hn-key-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 1px dashed var(--border) !important;
    border-radius: 16px !important;
    background: var(--panel) !important;
  }
  html:root
    .hn-dashboard
    .hn-chart-workspace.has-keys
    > nav.hn-key-list.hn-key-list.hn-key-list
    > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  html:root
    .hn-dashboard
    .hn-chart-workspace.has-keys
    > nav.hn-key-list.hn-key-list.hn-key-list
    > button
    > :is(span, small) {
    display: none !important;
  }
  html:root
    .hn-dashboard
    .hn-chart-workspace.has-keys
    > nav.hn-key-list.hn-key-list.hn-key-list
    > button
    > svg {
    display: block !important;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
  }
  html:root
    .hn-dashboard
    .hn-chart-workspace.has-keys
    > nav.hn-key-list.hn-key-list.hn-key-list
    > .hn-key-selection {
    display: grid !important;
    flex: 1 0 100% !important;
    align-self: flex-start !important;
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    gap: 5px !important;
    padding: 2px 0 0 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }
}
html:root .hn-dashboard .hn-range button {
  border-radius: 999px !important;
}

html:root .dialog-card.webapp-device-disconnect-dialog {
  --device-dialog-background: #232323;
  --device-cancel-background: #303030;
  --device-dialog-border: #4a4a4a;
  --device-danger-background: #302323;
  --device-danger-border: #7a4a4a;
  --device-danger-text: #ffb4ad;
  background: var(--device-dialog-background) !important;
  border-color: var(--device-dialog-border) !important;
}
html:root:has(.app-shell.theme-light) .dialog-card.webapp-device-disconnect-dialog {
  --device-dialog-background: #ffffff;
  --device-cancel-background: #f3f3f3;
  --device-dialog-border: #d5d5d5;
  --device-danger-background: #fff4f3;
  --device-danger-border: #e5b0aa;
  --device-danger-text: #a82b23;
}
html:root .dialog-card.webapp-device-disconnect-dialog .payment-dialog-body > button.btn {
  background: var(--device-cancel-background) !important;
  border-color: var(--device-dialog-border) !important;
  color: var(--text) !important;
}
html:root
  .dialog-card.webapp-device-disconnect-dialog
  .payment-dialog-body
  > button.btn.device-danger-button {
  background: var(--device-danger-background) !important;
  border-color: var(--device-danger-border) !important;
  color: var(--device-danger-text) !important;
}

@media (min-width: 590px) and (max-width: 1023px) {
  html:root:has(.app-shell) .app-shell:has(.bottom-nav) .phone-screen.home-screen.home-screen {
    display: block !important;
    padding-top: 24px !important;
  }
  html:root .phone-screen.home-screen:has(.hn-overview) > .app-header {
    display: none !important;
  }
  html:root .phone-screen.home-screen > .hn-home-dashboard {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  html:root .hn-dashboard .hn-overview.hn-overview {
    display: block !important;
    padding: 22px !important;
    margin-top: 0 !important;
  }
  html:root .hn-dashboard .hn-overview .hn-overview-head {
    display: block !important;
    margin-bottom: 18px !important;
  }
  html:root .hn-dashboard .hn-overview .hn-overview-head :is(.hn-eyebrow, .hn-date) {
    display: none !important;
  }
  html:root .hn-dashboard .hn-overview .hn-overview-head h1 {
    display: block !important;
    font-size: 25px !important;
    line-height: 1.3 !important;
  }
  html:root .hn-dashboard .hn-overview .hn-overview-head p {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  html:root .hn-dashboard .hn-overview .hn-metrics.hn-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }
  html:root .hn-dashboard .hn-overview .hn-metrics > .hn-metric.hn-metric {
    display: flex !important;
    flex-direction: column !important;
    min-height: 164px !important;
    padding: 15px 18px !important;
    gap: 10px !important;
  }
  html:root
    .hn-dashboard
    .hn-metrics
    > .hn-metric
    > :is(.hn-metric-label, strong, .hn-metric-foot) {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  html:root .hn-dashboard .hn-metrics > .hn-metric > strong {
    margin: 0 !important;
    font-size: 25px !important;
    line-height: 1.3 !important;
  }
  html:root .hn-dashboard .hn-metrics > .hn-metric .hn-metric-foot {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: auto !important;
    width: 100% !important;
    gap: 10px !important;
  }
  html:root .hn-dashboard .hn-metrics > .hn-metric .hn-metric-label {
    font-size: 14px !important;
  }
  html:root .hn-dashboard .hn-metrics > .hn-metric .hn-metric-foot button {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
}

/* Top-up surfaces follow Studio's neutral palette, including disabled controls. */
html:root:has(.app-shell)
  .dialog-card.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog {
  --topup-surface: #222222;
  --topup-inset: #292929;
  --topup-border: #454545;
  --topup-disabled: #303030;
  --topup-muted: #b5b5b5;
  background: var(--topup-surface) !important;
  border-color: var(--topup-border) !important;
}
html:root:has(.app-shell.theme-light)
  .dialog-card.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog {
  --topup-surface: #ffffff;
  --topup-inset: #f5f5f5;
  --topup-border: #d6d6d6;
  --topup-disabled: #e9e9e9;
  --topup-muted: #707070;
}
html:root:has(.app-shell)
  .dialog-card.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog
  :is(.balance-topup-current, .empty-card) {
  background: var(--topup-inset) !important;
  border-color: var(--topup-border) !important;
}
html:root:has(.app-shell)
  .dialog-card.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog
  .balance-topup-current
  > span {
  background: var(--topup-disabled) !important;
  color: var(--text) !important;
}
html:root:has(.app-shell)
  .dialog-card.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog
  .payment-submit-button:disabled {
  background: var(--topup-disabled) !important;
  border-color: var(--topup-border) !important;
  color: var(--topup-muted) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
html:root:has(.app-shell.theme-light)
  .dialog-card.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog
  :is(.balance-topup-current, .empty-card) {
  background: var(--topup-inset) !important;
  border-color: var(--topup-border) !important;
}
html:root:has(.app-shell.theme-light)
  .dialog-card.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog.balance-topup-dialog
  .payment-submit-button:disabled {
  background: var(--topup-disabled) !important;
  border-color: var(--topup-border) !important;
  color: var(--topup-muted) !important;
}

/* Both navigation alerts use the same round marker, including legacy Studio. */
html:root
  .app-shell
  nav.bottom-nav.bottom-nav
  button[data-nav-level="primary"]
  > .nav-attention-dot {
  box-sizing: border-box !important;
  width: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
}

@media (min-width: 1024px) {
  html:root
    .app-shell
    nav.bottom-nav.bottom-nav
    button[data-nav-level="primary"]
    > .nav-attention-dot {
    top: 2px !important;
    right: 5px !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    background: #ef6268 !important;
    box-shadow: 0 0 0 3px #ef62681c !important;
    animation: none !important;
  }
}

/* Readable checkout controls and centered, compact edit/close buttons. */
html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-tariff-editor-facts {
  gap: 10px !important;
}
html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-tariff-editor-fact {
  gap: 6px !important;
  padding: 12px 14px 8px !important;
}
html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-tariff-editor-copy {
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
}
html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-tariff-editor-title {
  gap: 8px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}
html:root:has(.app-shell)
  .checkout-tariff-card.checkout-tariff-card
  .checkout-tariff-editor-copy
  small {
  font-size: 13px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
}
html:root:has(.app-shell)
  .checkout-tariff-card.checkout-tariff-card
  .checkout-tariff-editor-title
  .checkout-tariff-limit-icon {
  width: 22px !important;
  height: 22px !important;
}
html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-slider {
  --checkout-slider-thumb-size: 22px;
  height: 44px !important;
}
html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-slider-track {
  height: 6px !important;
}
html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-slider-thumb {
  width: 22px !important;
  height: 22px !important;
}
html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-slider-tick > span {
  width: 4px !important;
  height: 4px !important;
}
html:root:has(.app-shell)
  .dialog-card.dialog-card.dialog-card
  :is(.checkout-tariff-toggle, .dialog-close-button) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 var(--checkout-control-size, 40px) !important;
  width: var(--checkout-control-size, 40px) !important;
  min-width: var(--checkout-control-size, 40px) !important;
  height: var(--checkout-control-size, 40px) !important;
  min-height: var(--checkout-control-size, 40px) !important;
  padding: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
}
html:root:has(.app-shell)
  .dialog-card.dialog-card.dialog-card
  :is(.checkout-tariff-toggle, .dialog-close-button)
  svg {
  display: block !important;
  flex: 0 0 var(--checkout-control-icon-size, 18px) !important;
  width: var(--checkout-control-icon-size, 18px) !important;
  height: var(--checkout-control-icon-size, 18px) !important;
  margin: 0 !important;
  transform: none !important;
}
html:root:has(.app-shell)
  .dialog-card.dialog-card.dialog-card
  :is(.checkout-tariff-toggle, .dialog-close-button):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 3px !important;
}
@media (max-width: 480px) {
  html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-tariff-fact-label {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  html:root:has(.app-shell)
    .checkout-tariff-card.checkout-tariff-card
    .checkout-tariff-fact-label
    .checkout-addon-label {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  html:root:has(.app-shell) .checkout-tariff-editor-fact {
    padding-inline: 12px !important;
  }
  html:root:has(.app-shell) .checkout-tariff-editor-copy small {
    flex: 1 1 100%;
    padding-left: 30px;
  }
}

html:root:has(.app-shell) .dialog-card .checkout-tariff-toggle {
  --checkout-control-size: 25px;
  --checkout-control-icon-size: 15px;
}

html:root:has(.app-shell) .checkout-tariff-card.checkout-tariff-card .checkout-tariff-editor-inner {
  padding-inline: 0 !important;
}
html:root:has(.app-shell)
  .checkout-tariff-card.checkout-tariff-card
  .checkout-tariff-editor-title
  .checkout-addon-label {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
html:root:has(.app-shell)
  .checkout-tariff-card.checkout-tariff-card
  .checkout-tariff-editor-title
  svg {
  width: 18px !important;
  height: 18px !important;
}

.checkout-payment-column {
  display: contents;
}
@media (min-width: 900px) {
  html:root:has(.app-shell)
    .dialog-card.webapp-payment-dialog.webapp-payment-dialog
    .payment-dialog-body:has(> .checkout-payment-column):has(> .period-grid) {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important;
    grid-template-rows: min-content min-content !important;
    align-items: start !important;
    align-content: start !important;
    gap: 16px 24px !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .payment-dialog-body
    > .checkout-tariff-card {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .payment-dialog-body
    > :is(.hwid-renewal-option, .subscription-purchase-description) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .payment-dialog-body
    > .period-grid {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .payment-dialog-body
    > .checkout-payment-column {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    align-content: start !important;
    gap: 16px !important;
    min-width: 0;
  }
  html:root:has(.app-shell) .dialog-card.webapp-payment-dialog.webapp-payment-dialog {
    max-height: var(--dialog-available-height) !important;
  }
  html:root:has(.app-shell) .dialog:has(.webapp-payment-dialog) {
    --dialog-padding-top: max(24px, min(64px, 7dvh), var(--content-safe-area-top, 0px));
    align-items: start !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .payment-dialog-body:has(> :is(.hwid-renewal-option, .subscription-purchase-description)) {
    grid-template-rows: min-content min-content min-content !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .payment-dialog-body:has(> :is(.hwid-renewal-option, .subscription-purchase-description))
    > .period-grid {
    grid-row: 3 !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .payment-dialog-body:has(> :is(.hwid-renewal-option, .subscription-purchase-description))
    > .checkout-payment-column {
    grid-row: 1 / span 3 !important;
  }
  html:root:has(.app-shell) .checkout-payment-column > * {
    margin-block: 0 !important;
    min-width: 0;
  }
}
@media (max-width: 700px) {
  html:root:has(.app-shell) .webapp-payment-dialog.webapp-payment-dialog .period-grid.period-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .period-grid
    > .period-card {
    grid-column: span 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  html:root:has(.app-shell)
    .webapp-payment-dialog.webapp-payment-dialog
    .period-grid
    > .period-card:last-child:nth-child(odd) {
    grid-column: 2 / span 2 !important;
  }
}

/* Give compact icon buttons a clear target without changing their geometry. */
html:root:has(.app-shell)
  .dialog-card.dialog-card.dialog-card
  :is(.checkout-tariff-toggle, .dialog-close-button) {
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}
html:root:has(.app-shell)
  .dialog-card.dialog-card.dialog-card
  :is(.checkout-tariff-toggle, .dialog-close-button)
  svg {
  position: static !important;
  inset: auto !important;
  align-self: center !important;
  vertical-align: middle !important;
  stroke-width: 2 !important;
}
html:root:has(.app-shell)
  .dialog-card.dialog-card.dialog-card
  :is(.checkout-tariff-toggle, .dialog-close-button):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--text) 16%, var(--surface, #252525)) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
html:root:has(.app-shell)
  .dialog-card.dialog-card.dialog-card
  :is(.checkout-tariff-toggle, .dialog-close-button):active {
  background: color-mix(in srgb, var(--text) 24%, var(--surface, #252525)) !important;
}
@media (prefers-reduced-motion: reduce) {
  html:root:has(.app-shell)
    .dialog-card.dialog-card.dialog-card
    :is(.checkout-tariff-toggle, .dialog-close-button) {
    transition: none !important;
  }
}

/* Keep all customer screens in the same work area when the rail is visible. */
@media (min-width: 590px) and (max-width: 1023px) {
  html:root:has(.app-shell)
    .app-shell:has(.bottom-nav)
    .phone-screen.phone-screen:not(.auth-screen):not(.home-screen) {
    display: block !important;
    min-width: 0 !important;
    padding-top: max(24px, var(--content-safe-area-top, 0px)) !important;
  }
}

@media (min-width: 590px) {
  html:root:has(.app-shell) .phone-screen.phone-screen:not(.auth-screen) > :is(main, .app-header) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 1140px !important;
    margin-inline: auto !important;
  }
  html:root:has(.app-shell) .phone-screen.phone-screen:not(.home-screen) > .app-header {
    margin-bottom: 14px !important;
  }
  html:root:has(.app-shell) .phone-screen.phone-screen .settings-links-block {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    gap: 10px !important;
  }
}

/* Match the wide desktop dashboard; keep tablet and mobile gutters independent. */
@media (min-width: 1024px) {
  html:root:has(.app-shell) .phone-screen.phone-screen:not(.auth-screen) > :is(main, .app-header) {
    max-width: 1440px !important;
  }
}

html:root:has(.app-shell)
  .phone-screen.phone-screen
  :is(.settings-row, .settings-row > span, .support-heading-copy, .subscription-connection) {
  min-width: 0 !important;
}
html:root:has(.app-shell) .phone-screen.phone-screen .settings-row small {
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.45 !important;
}

@media (max-width: 1023px) {
  html:root:has(.app-shell) .phone-screen.phone-screen .subscription-actions {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)) !important;
    gap: 10px !important;
  }
  html:root:has(.app-shell) .phone-screen.phone-screen .subscription-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    white-space: normal !important;
    padding: 10px 12px !important;
  }
  html:root:has(.app-shell)
    .phone-screen.phone-screen
    .support-overview-card:not(.support-create-card) {
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  html:root:has(.app-shell) .phone-screen.phone-screen .support-new-ticket-button {
    max-width: 100% !important;
    min-height: 44px !important;
  }
}

@media (min-width: 590px) and (max-width: 850px) {
  html:root .hn-dashboard .hn-metrics.hn-metrics {
    grid-auto-rows: 1fr !important;
  }
  html:root .hn-dashboard .hn-metrics > .hn-metric.hn-metric {
    align-items: stretch !important;
    text-align: left !important;
    min-height: 200px !important;
  }
  html:root .hn-dashboard .hn-metrics > .hn-metric.hn-metric > :is(strong, .hn-metric-label) {
    align-self: stretch !important;
    text-align: left !important;
    justify-content: space-between !important;
  }
  html:root .hn-dashboard .hn-metrics > .hn-metric.hn-metric .hn-metric-foot {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-content: end !important;
  }
  html:root .hn-dashboard .hn-metrics > .hn-metric.hn-metric .hn-metric-foot > button {
    justify-self: start !important;
  }
}

@media (max-width: 589px) {
  html:root:has(.app-shell) .dialog-card.dialog-card:not(.trial-captcha-dialog, .admin-dialog) {
    box-sizing: border-box;
    max-width: calc(100vw - 24px) !important;
    max-height: min(calc(100dvh - 24px), var(--dialog-available-height)) !important;
    padding: 18px !important;
  }
  html:root:has(.app-shell) .dialog-card .dialog-title-copy {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* Shared EmailCodeScreen: keep the heading and OTP together in every context. */
html:root .app-shell .phone-screen.auth-screen:has(> .otp-wrap):not(.embedded) {
  box-sizing: border-box !important;
  display: grid !important;
  place-items: stretch !important;
  align-content: start !important;
  align-self: center !important;
  width: min(520px, calc(100% - 32px)) !important;
  max-width: 520px !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 32px auto !important;
  padding: clamp(20px, 4vw, 32px) !important;
  gap: 28px !important;
  background: var(--email-code-surface) !important;
  border: 1px solid var(--email-code-border) !important;
  border-radius: 24px !important;
}
html:root .auth-screen:has(> .otp-wrap) > .screen-head {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}
html:root .auth-screen:has(> .otp-wrap) > .screen-head > span:last-child {
  display: none !important;
}
html:root .auth-screen:has(> .otp-wrap) .screen-head h1 {
  color: var(--email-code-text) !important;
  font-size: clamp(20px, 3vw, 26px) !important;
  line-height: 1.25 !important;
  margin: 0 0 8px !important;
}
html:root .auth-screen:has(> .otp-wrap) .screen-head p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--email-code-muted) !important;
  overflow-wrap: anywhere;
  margin: 0 !important;
}
html:root .auth-screen > .otp-wrap {
  display: grid !important;
  align-content: start !important;
  min-height: 0 !important;
  width: 100% !important;
  gap: 18px !important;
  margin: 0 !important;
}
html:root .auth-screen .otp-input-wrap {
  width: 100% !important;
  min-width: 0 !important;
}
html:root .auth-screen .otp-input-wrap input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: text;
}
html:root .auth-screen .otp-slots {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1.5vw, 10px) !important;
}
html:root .auth-screen .otp-slots > span {
  display: grid !important;
  place-items: center !important;
  aspect-ratio: 1;
  min-width: 0 !important;
  border-radius: 12px !important;
  background: var(--email-code-inset) !important;
  border: 1px solid var(--email-code-border) !important;
  color: var(--email-code-text) !important;
  font-size: clamp(24px, 5vw, 32px) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
html:root .auth-screen .otp-input-wrap:focus-within .otp-slots > span {
  border-color: var(--email-code-accent) !important;
}
html:root .auth-screen .otp-slots > span.filled {
  background: color-mix(in srgb, var(--email-code-accent) 12%, var(--email-code-inset)) !important;
}
html:root .auth-screen > .otp-wrap > :is(button, .wide) {
  min-height: 48px !important;
  width: 100% !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
}
html:root .auth-screen > .otp-wrap > .link-button:disabled {
  opacity: 1 !important;
  color: var(--email-code-muted) !important;
}

html:root .auth-screen:has(> .otp-wrap) {
  --email-code-surface: #202220;
  --email-code-inset: #292c29;
  --email-code-text: #f1f3ee;
  --email-code-muted: #b5bdb4;
  --email-code-border: #596255;
  --email-code-accent: #cce2d4;
  color: var(--email-code-text) !important;
}
html:root .theme-light .auth-screen:has(> .otp-wrap),
html:root.theme-light .auth-screen:has(> .otp-wrap) {
  --email-code-surface: #ffffff;
  --email-code-inset: #f4f6f1;
  --email-code-text: #20271e;
  --email-code-muted: #56624f;
  --email-code-border: #a6b29d;
  --email-code-accent: #d7e3cb;
}
html:root .auth-screen > .otp-wrap > .wide {
  background: var(--email-code-accent) !important;
  color: #18251e !important;
}
html:root .auth-screen > .otp-wrap > .wide:disabled {
  background: var(--email-code-inset) !important;
  color: var(--email-code-muted) !important;
  opacity: 1 !important;
}

/* The existing accessible language select is a visible, left-aligned action. */
html:root .auth-screen .auth-legal {
  box-sizing: border-box !important;
  justify-items: start !important;
  width: 100% !important;
  padding: 8px 24px 20px !important;
  gap: 10px !important;
}
html:root .auth-screen .auth-language-trigger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: start !important;
  width: fit-content !important;
  min-width: 132px !important;
  min-height: 44px !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border: 1px solid #626b5b !important;
  border-radius: 14px !important;
  background: #30352e !important;
  color: #f1f3ee !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  cursor: pointer;
}
html:root .auth-screen .auth-language-trigger > span {
  text-decoration: none !important;
}
html:root .auth-screen .auth-language-trigger > svg {
  width: 16px !important;
  height: 16px !important;
}
html:root .auth-screen .auth-language-trigger:is(:hover, [data-state="open"]) {
  background: #414b3c !important;
  border-color: #aec2a0 !important;
}
html:root .auth-screen .auth-language-trigger:focus-visible {
  outline: 2px solid #aec2a0 !important;
  outline-offset: 3px !important;
}
html:root .theme-light .auth-screen .auth-language-trigger,
html:root.theme-light .auth-screen .auth-language-trigger {
  background: #eef3e9 !important;
  border-color: #a2b195 !important;
  color: #253024 !important;
}
html:root .theme-light .auth-screen .auth-language-trigger:is(:hover, [data-state="open"]),
html:root.theme-light .auth-screen .auth-language-trigger:is(:hover, [data-state="open"]) {
  background: #dde8d5 !important;
}

/* Site nodes reuse the shared settings groups, fields, badges and buttons. */
html:root .admin-screen-wrap .site-nodes {
  width: 100%;
  max-width: 1200px;
  min-width: 0;
  gap: 18px;
}
html:root
  .admin-screen-wrap
  .site-nodes
  > .admin-settings-group
  ~ .admin-settings-group
  > .admin-settings-group-body {
  display: grid;
  gap: 18px;
  padding: 18px;
}
html:root .admin-screen-wrap .site-nodes .site-node-actions {
  gap: 8px;
  align-items: center;
}
html:root .admin-screen-wrap .site-nodes .site-node-actions .admin-btn {
  min-height: 40px;
  white-space: normal;
}
html:root
  .admin-screen-wrap
  .site-nodes
  > .admin-settings-group
  ~ .admin-settings-group
  .admin-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
  align-items: stretch;
}
html:root
  .admin-screen-wrap
  .site-nodes
  > .admin-settings-group
  ~ .admin-settings-group
  .admin-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  background: var(--admin-surface);
}
html:root
  .admin-screen-wrap
  .site-nodes
  > .admin-settings-group
  ~ .admin-settings-group
  .admin-field:first-child {
  grid-column: 1 / -1;
}
html:root
  .admin-screen-wrap
  .site-nodes
  .admin-field-label
  > span:last-of-type {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
html:root .admin-screen-wrap .site-nodes .admin-field-label > span:first-child {
  font-size: 12px;
  font-weight: 500;
  color: var(--admin-muted);
}
html:root .admin-screen-wrap .site-nodes .copy-link-field {
  max-width: 720px;
  min-width: 0;
}
html:root .admin-screen-wrap .site-nodes p {
  margin: 0;
  color: var(--admin-muted);
  font-size: 13px;
  line-height: 1.5;
}
html:root .admin-screen-wrap .site-nodes details {
  min-width: 0;
  border-top: 1px solid var(--admin-border);
  padding-top: 14px;
}
html:root .admin-screen-wrap .site-nodes summary {
  cursor: pointer;
  min-height: 32px;
  line-height: 1.5;
  font-weight: 600;
}
@media (max-width: 600px) {
  html:root .admin-screen-wrap .site-nodes .site-node-actions .admin-btn {
    flex: 1 1 140px;
  }
  html:root
    .admin-screen-wrap
    .site-nodes
    > .admin-settings-group
    ~ .admin-settings-group
    > .admin-settings-group-body {
    padding: 14px;
    gap: 14px;
  }
}