.empty {
  color: var(--muted);
}

.invalid {
  color: var(--danger);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes alert-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1080px) {
  .main-grid,
  .detail-grid,
  .new-accounts-layout,
  .yandex-direct-layout,
  .login-cpl-layout,
  .user-dialog-fields,
  .permission-checklist {
    grid-template-columns: 1fr;
  }

  .login-cpl-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-selection-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-selection-actions {
    grid-column: 1 / -1;
  }

  .yandex-direct-connect {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .yandex-direct-stats-pane .pane-head {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .yandex-direct-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .yandex-direct-actions #refreshAllYandexDirectBtn {
    width: 100%;
  }

  .yandex-direct-period-popover {
    left: auto;
    right: 0;
    grid-template-columns: 1fr;
  }

  .yandex-direct-period-popover .period-filter-actions {
    grid-column: 1;
  }

  .yandex-direct-campaign-toggle {
    grid-template-columns: 26px minmax(0, 1fr);
  }

  .yandex-direct-campaign-metrics {
    grid-column: 2;
  }

  .yandex-direct-ad-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .yandex-direct-ad-list {
    margin-left: 12px;
  }

  .login-cpl-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .login-cpl-aside {
    position: static;
  }

  .detail-grid {
    margin-bottom: 24px;
  }
}

@media (max-width: 680px) {
  .yandex-direct-actions {
    grid-template-columns: 1fr;
  }

  .yandex-direct-period-popover {
    width: calc(100vw - 32px);
    right: auto;
    left: 0;
    padding: 16px;
  }

  .yandex-direct-period-calendars {
    grid-template-columns: 1fr;
  }

  .yandex-campaigns-period-popover .period-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .yandex-campaigns-period-popover .period-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .yandex-campaigns-period-popover .period-filter-actions button {
    min-width: 0;
  }
}

@media (max-width: 1280px) {
  .payroll-layout,
  .new-accounts-layout {
    grid-template-columns: 1fr;
  }

  .payroll-report-pane,
  .account-creation-pane,
  .manager-accounts-pane {
    max-width: none;
  }

  .payroll-report-open {
    min-width: 760px;
  }

  .payroll-report-list {
    overflow-x: auto;
  }
}

@media (max-width: 1180px) {
  .main-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .side-pane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side-pane section + section {
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .side-pane section:nth-child(2n + 1) {
    border-left: 0;
  }

  .side-pane section:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 16px;
  }

  .topbar,
  .pane-head {
    display: grid;
    justify-content: stretch;
  }

  .operations-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .audit-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .audit-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .audit-filter-field {
    justify-content: space-between;
  }

  .login-cpl-toolbar,
  .login-cpl-summary,
  .login-cpl-tracking-stats,
  .login-selection-toolbar,
  .login-selection-summary {
    grid-template-columns: 1fr;
  }

  .login-selection-actions {
    display: grid;
    grid-column: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-selection-results-head,
  .login-selection-results-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .login-selection-summary div {
    min-height: 64px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .login-selection-summary div:last-child {
    border-bottom: 0;
  }

  .login-cpl-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-cpl-history-head,
  .login-cpl-history-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .login-cpl-summary div,
  .login-cpl-summary-card,
  .login-cpl-tracking-stats div {
    min-height: 64px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .login-cpl-summary div:last-child,
  .login-cpl-summary-card:last-child,
  .login-cpl-tracking-stats div:last-child {
    border-bottom: 0;
  }

  .login-cpl-duplicates-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .login-cpl-duplicate-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .audit-filter-field input,
  .audit-filter-field select {
    max-width: 100%;
  }

  .operations-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .operations-status-filter {
    justify-content: space-between;
  }

  .operations-toolbar-meta {
    justify-content: space-between;
  }

  .period-filter summary {
    justify-content: space-between;
  }

  .period-filter-popover {
    left: -1px;
    width: calc(100vw - 34px);
  }

  .period-date-fields,
  .period-presets {
    grid-template-columns: 1fr;
  }

  .status-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .status-strip > .impersonation-badge,
  .status-strip > #currentUserEmail {
    grid-column: 1 / -1;
  }

  .tabs {
    margin-right: -16px;
    padding-right: 16px;
  }

  .status-strip span,
  .status-strip button,
  .pane-head button,
  .actions button,
  .settings-actions button,
  .users-head-actions button,
  .user-actions button,
  .user-dialog-actions button {
    justify-content: center;
  }

  .settings-pane .settings-form {
    grid-template-columns: 1fr;
  }

  .manager-account-form,
  .account-creation-form,
  .payroll-layout,
  .payroll-employee-form,
  .creation-agency-fields,
  .side-pane,
  .permission-checklist {
    grid-template-columns: 1fr;
  }

  .side-pane section + section,
  .side-pane section:nth-child(n + 3) {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .payroll-employee-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .payroll-employee-meta {
    justify-items: start;
  }

  .payroll-report-controls,
  .payroll-totals,
  .payroll-report-kpis,
  .payroll-buyer-history-totals,
  .topup-balance-preview,
  .topup-balance-preview.compact {
    grid-template-columns: 1fr;
  }

  .payroll-report-summary-head {
    display: grid;
    justify-items: start;
  }

  .payroll-report-legend {
    justify-content: flex-start;
  }

  .payroll-report-summary-tools {
    justify-content: flex-start;
  }

  .payroll-report-chart {
    min-width: 460px;
  }

  .payroll-report-controls {
    display: grid;
  }

  .payroll-report-controls input {
    width: 100%;
  }

  .payroll-extra-inputs,
  .payroll-extra-head,
  .payroll-organization-expense-row {
    grid-template-columns: 1fr;
  }

  .payroll-extra-head span {
    grid-column: auto;
  }

  .agency-specific-settings {
    grid-template-columns: 1fr;
  }

  .invoice-cards {
    grid-template-columns: 1fr;
  }

  .login-preview-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manager-account-summary {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .manager-badges {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .manager-created-row {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 9px 0;
  }

  .user-row,
  .audit-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .user-meta {
    justify-content: flex-start;
  }

  .users-head-actions,
  .user-actions,
  .user-dialog-actions {
    justify-content: stretch;
  }

  .users-head-actions,
  .user-actions,
  .user-dialog-actions {
    display: grid;
  }

  textarea {
    min-height: 330px;
  }

  .topup-review-shell {
    padding: 16px;
  }

  .topup-review-dialog,
  .topup-review-dialog.user-dialog,
  .user-dialog,
  .payroll-report-dialog,
  .payroll-buyer-history-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 16px);
    border-radius: 10px;
  }

  .user-dialog-shell,
  .payroll-report-dialog-shell,
  .payroll-buyer-history-shell {
    max-height: calc(100svh - 16px);
    padding: 16px;
  }

  .topup-review-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .topup-review-head h2,
  .user-dialog-shell .topup-review-head h2 {
    font-size: 22px;
  }

  .topup-review-summary {
    grid-template-columns: 1fr;
  }

  .topup-review-summary div,
  .topup-review-summary div:first-child,
  .topup-review-summary div + div {
    border-left: 0;
    padding: 12px 0;
  }

  .topup-review-summary div + div {
    border-top: 1px solid var(--line);
  }

  .topup-balance-preview p {
    justify-self: stretch;
    text-align: left;
  }

  .topup-review-summary div {
    display: grid;
    gap: 4px;
  }

  .topup-review-footer {
    display: grid;
  }

  .topup-errors-footer,
  .topup-errors-footer > div {
    display: grid;
  }

  .topup-errors-footer button {
    width: 100%;
  }

  .topup-review-footer .primary-action {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .auth-shell {
    padding: 14px;
  }

  .auth-card {
    padding: 18px;
  }

  .app-shell {
    padding: 10px;
  }

  .topbar {
    min-height: auto;
    gap: 14px;
    padding-bottom: 14px;
  }

  h1 {
    font-size: clamp(30px, 14vw, 42px);
  }

  .tabs {
    margin-right: -10px;
    padding-right: 10px;
  }

  .input-pane,
  .summary-pane,
  .table-pane,
  .operations-pane,
.settings-pane,
.yandex-direct-form-pane,
.invoices-pane,
  .balances-pane,
  .payroll-directory-pane,
  .payroll-report-pane,
  .users-pane,
  .audit-pane,
  .manager-accounts-pane,
  .account-creation-pane,
  .side-pane section {
    padding: 14px;
  }

  .status-strip,
  .login-cpl-actions,
  .period-filter-actions,
  .delete-operations-actions {
    grid-template-columns: 1fr;
  }

  .status-strip > * {
    width: 100%;
  }

  .operation-alerts {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
  }

  .operation-alert {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .table-wrap {
    margin-inline: -1px;
  }

  table {
    font-size: 13px;
  }

  th,
  td {
    padding: 9px 10px;
  }

  .login-preview-list,
  .automation-summary,
  .cpl-analytics {
    grid-template-columns: 1fr;
  }

  .agency-row,
  .total-box,
  .review-controls,
  .rule-item,
  .cut-rule-item,
  .saved-agency-item,
  .cpl-item,
  .account-result-row {
    grid-template-columns: 1fr;
  }

  .account-result-row .account-result-detail {
    text-align: left;
  }

  .account-result-row .marking-badge {
    justify-self: start;
  }

  .agency-amount,
  .topup-review-columns span:last-child,
  .topup-review-row span {
    text-align: left;
  }

  .agency-summary-actions {
    justify-items: start;
  }

  .cut-rule-form {
    grid-template-columns: 1fr;
  }

  .cut-preset-form {
    grid-template-columns: 1fr;
  }

  .operations-toolbar-meta,
  .audit-filter-field,
  .operations-status-filter {
    display: grid;
    grid-template-columns: 1fr;
  }

  .operations-pagination {
    flex-wrap: wrap;
  }

  .topup-review-columns,
  .topup-review-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .topup-review-row strong {
    white-space: normal;
  }

  .topup-review-list {
    max-height: clamp(140px, calc(100svh - 470px), 360px);
  }

  .topup-errors-list {
    margin-inline: -16px;
    border-top: 1px solid var(--line);
  }
}