body {
  background: var(--bg);
}

.auth-page,
.app {
  min-height: 100vh;
  min-height: 100dvh;
}

.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.auth-card,
.app {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px 20px 24px;
  background: var(--card-warm);
}


.illustrated-brand,
.nav-logo,
.app-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.illustrated-brand {
  justify-content: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.brand-coin {
  display: inline-flex;
  flex: none;
}

.brand-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.auth-bonus {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 20px;
  margin-bottom: 24px;
  padding: 18px 16px 18px 18px;
  color: var(--ink);
  background: var(--lavender);
}

.auth-bonus__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.auth-bonus span,
.auth-bonus small {
  position: relative;
  z-index: 1;
  display: block;
  max-width: calc(100% - 4px);
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

.auth-bonus small + small {
  margin-top: 6px;
}

.auth-bonus strong {
  position: relative;
  z-index: 1;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 4px;
  font-size: clamp(40px, 12vw, 56px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -2px;
}

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

.btn.block.auth-telegram-btn,
.btn.block.auth-max-btn,
.btn.block.auth-sms-btn {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding-left: 14px;
  padding-right: 10px;
}

.btn.block.auth-sms-btn {
  margin-bottom: 18px;
  padding-left: 18px;
  padding-right: 18px;
  grid-template-columns: 1fr;
  justify-items: center;
}

.auth-telegram-icon,
.auth-max-icon {
  grid-column: 1;
  grid-row: 1;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
}

.auth-telegram-btn > span:not(.badge),
.auth-max-btn > span:not(.badge) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  width: auto;
  text-align: left;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-sms-btn > span {
  grid-column: 1 / -1;
  grid-row: 1;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

.auth-telegram-btn > .badge,
.auth-max-btn > .badge,
.auth-telegram-btn > .auth-reward,
.auth-max-btn > .auth-reward {
  position: static;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  box-sizing: border-box;
  transform: none;
  padding: 4px 8px;
  border: 1px solid #E8CBA9;
  border-radius: 100px;
  color: #1F2742;
  background: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  flex: none;
}

.auth-reward .badge-coin {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

.auth-form a.btn {
  text-decoration: none;
  box-sizing: border-box;
}

.h1,
.page-h {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.7px;
}

.page-h {
  font-size: 26px;
}

@media (min-width: 900px) {
  .page-h {
    font-size: 32px;
  }
}

.sub,
.page-sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14.5px;
}

.scr > .page-sub {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  color: var(--ink);
  background: var(--lavender);
  font-size: 14px;
  font-weight: 700;
}

/* Figma Профиль: карточка личных данных */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 18px 16px;
  border-radius: 20px;
  background: #E9E8FF;
}

.profile-card__top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.profile-card__ava {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #1F2742;
  background: #FED78C;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.profile-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 4px;
}

.profile-card__name {
  color: #1F2742;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

.profile-card__phone {
  color: #1F2742;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.72;
}

.profile-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  margin-top: 0;
}

.profile-card__link,
.profile-card__logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  padding: 0 0 2px;
  color: #1F2742;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.ops-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid rgba(13, 21, 50, 0.2);
  border-radius: 100px;
  background: #FFEDC8;
}

.ops-filter__btn {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 100px;
  padding: 8px 10px;
  color: rgba(31, 39, 66, 0.8);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.ops-filter__btn.is-active {
  color: #1F2742;
  border-color: rgba(31, 39, 66, 0.4);
  background: #fff;
  font-weight: 800;
  cursor: default;
}

.page-sub--spend-legal {
  font-size: 13px;
}

.spend-notice-lead {
  margin-top: 20px;
  margin-bottom: 8px;
  font-weight: 700;
}

.spend-notice-list {
  margin: 0 0 18px;
  padding-left: 1.2em;
  color: var(--muted);
  font-size: 13px;
  list-style: disc;
}

.spend-notice-list li + li {
  margin-top: 6px;
}

.tasks-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 8px 12px 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--card-warm);
  box-shadow: none;
  cursor: pointer;
  user-select: none;
}

.tasks-switch-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tasks-switch-label.is-active {
  color: var(--ink);
}

.tasks-switch-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.tasks-switch-track {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #EFE6D0;
  transition: background 0.18s ease;
}

.tasks-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  transition: transform 0.18s ease, background 0.18s ease;
}

.tasks-switch-input:checked + .tasks-switch-track {
  background: var(--lavender);
}

.tasks-switch-input:checked + .tasks-switch-track .tasks-switch-thumb {
  transform: translateX(20px);
  background: #fff;
}

.tasks-switch-input:focus-visible + .tasks-switch-track {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* Mobile: на всю ширину; desktop (≥900px): 181px как в Figma */
.tasks-switch--segment {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 44px;
  margin: 0 0 18px;
  padding: 4px;
  gap: 4px;
  overflow: visible;
  border: 1px solid rgba(13, 21, 50, 0.2);
  border-radius: 100px;
  background: #FFEDC8;
  box-shadow: none;
}

.tasks-switch--segment .tasks-switch-tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 100px;
  outline: none;
  color: rgba(31, 39, 66, 0.8);
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}

/* Mobile: белый активный таб на половину ширины (50/50) */
.tasks-switch--segment .tasks-switch-tab.is-active {
  flex: 1 1 0;
  padding: 0 8px;
  color: #1F2742;
  background: #fff;
  border-color: rgba(31, 39, 66, 0.4);
  cursor: default;
  font-weight: 800;
  box-shadow: none;
}

.balcard + .page-sub,
.balcard + .tasks-switch {
  margin-top: 14px;
}

.balcard + .spendgrid,
.balcard + .empty-state,
.balcard + .cabinet-kicker {
  margin-top: 22px;
}

.cabinet-kicker + .spendgrid {
  margin-top: 0;
}

.sub b {
  color: var(--ink);
}

.lbl {
  display: block;
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.field {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px;
  color: var(--ink);
  background: #fff;
  box-shadow: none;
  font-size: 16px;
  outline: none;
}

.field:focus {
  border-color: var(--lavender-d);
  box-shadow: 0 0 0 3px rgba(169, 125, 214, 0.18);
}

.code-field {
  letter-spacing: 0.28em;
  text-align: center;
}

.field[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.field-error {
  min-height: 18px;
  margin-top: 5px;
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 800;
}

.err {
  min-height: 20px;
  margin: 10px 0;
  color: var(--danger);
  font-size: 13.5px;
  font-weight: 800;
  text-align: center;
}

.hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.auth-consent-note {
  text-align: left;
}

.text-button {
  border: 0;
  padding: 0;
  color: var(--coral-d);
  background: transparent;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.nav-footer {
  display: none;
}

.abar-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
}

.cabinet-support-email--nav {
  display: none;
  text-decoration: none;
}

.nav-support {
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 1px solid #1F2742;
  border-radius: 16px;
  padding: 8px 16px;
  color: #1F2742;
  background: #FFFBF1;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.nav-support__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.nav-support__icon svg {
  display: block;
  width: 20px;
  height: 20px;
  max-width: none;
}

.cabinet-support-email--abar {
  color: var(--coral-d);
  font-size: 16px;
  font-weight: 800;
  text-decoration: underline;
  white-space: nowrap;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.auth-consent {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.auth-consent[hidden],
.auth-consent-item[hidden],
.auth-consent-note[hidden] {
  display: none !important;
}

.auth-consent .check-row {
  margin-top: 0;
  gap: 10px;
  line-height: 1.4;
}

.auth-consent .check-row span {
  flex: 1;
  min-width: 0;
}

.auth-consent .field-error {
  min-height: 0;
  margin-top: 0;
}

.auth-consent .field-error:not(:empty) {
  margin-top: 4px;
}

.auth-consent .check-row input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card) center / 12px 10px no-repeat;
  cursor: pointer;
}

.auth-consent .check-row input[type="checkbox"]:checked {
  background-color: var(--peach);
  border-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='none' stroke='%231F2742' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 5.5 4.5 8.5 10.5 1.5'/%3E%3C/svg%3E");
}

.auth-consent .check-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

.check-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--peach);
}

.check-row a {
  color: var(--coral-d);
  font-weight: 800;
  text-decoration: underline;
}

.btn {
  display: inline-block;
  border: 1px solid #9689D7;
  border-radius: 12px;
  padding: 12px;
  color: var(--ink);
  background: #D2D0FF;
  box-shadow: none;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  transition: background 0.15s;
  cursor: pointer;
}

.auth-page .btn {
  border: 0;
  border-radius: 14px;
  padding: 15px 22px;
  background: var(--peach);
}

.btn:hover {
  background: #C4C1F5;
}

.auth-page .btn:hover {
  background: var(--peach-d);
}

.btn:active {
  transform: none;
}

.btn.block {
  display: block;
  width: 100%;
}

.btn.ghost {
  color: var(--ink);
  background: #FFFDF7;
  border: 1px solid #6C6D8A;
}

.btn.ghost:hover {
  background: #fff;
}

.btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  box-shadow: none;
}

.btn + .btn {
  margin-top: 10px;
}

.app {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.abar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--line-soft);
  padding: 10px 16px;
  background: rgba(255, 253, 247, 0.94);
  backdrop-filter: blur(10px);
}

.abar-brand {
  display: flex;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
}

.abar-brand__icon {
  display: block;
  width: 36px;
  height: 36px;
  max-width: none;
}

.abar-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  border-radius: 999px;
  padding: 8px 12px 8px 14px;
  background: var(--lavender);
}

.abar-balance__num {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.4px;
}

.abar-balance__coin {
  display: block;
  width: 20px;
  height: 20px;
  max-width: none;
}

.abar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}

.abar-user__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
  text-align: right;
}

.abar-user__name {
  overflow: hidden;
  max-width: 140px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abar-user__phone {
  overflow: hidden;
  max-width: 140px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.abar-avatar {
  display: flex;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.abar-avatar svg {
  display: block;
  width: 28px;
  height: 28px;
  max-width: none;
}

.app-brand,
.nav-logo {
  font-size: 16px;
}

.content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.scr {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  /* Клип длинных .op без трогания .appnav (sibling, fixed) */
  overflow-x: clip;
  /* Figma mobile: контент и Navigation — одинаковый inset 16 (фрейм 360 → w 328) */
  padding: 20px 16px 108px;
  background: var(--bg);
}

#pugovki-cabinet-screen {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.cabinet-kicker,
.sec-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}

.cabinet-kicker {
  margin-bottom: 10px;
}

.sec-title {
  margin: 22px 0 10px;
}

.balcard {
  position: relative;
  overflow: hidden;
  border: 1px solid #A97DD6;
  border-radius: 24px;
  padding: 22px;
  color: var(--ink);
  background: linear-gradient(180deg, #E9E8FF 0%, #E1D7FF 100%);
  box-shadow: 0 2px 12px rgba(150, 137, 215, 0.25);
}

.bc-deco {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 72px;
  height: 66px;
  transform: translateY(-50%);
  pointer-events: none;
}

.bc-deco--spend {
  top: -6px;
  right: -4px;
  width: 100px;
  height: 64px;
  transform: none;
  z-index: 2;
}

.bc-deco--spend .bc-deco__flower,
.bc-deco--spend .bc-deco__clover {
  position: absolute;
  display: block;
  max-width: none;
}

/* Figma: фиолетовая справа сверху, голубая левее и ниже — без пересечения */
.bc-deco--spend .bc-deco__flower {
  top: 0;
  right: 0;
  width: 52px;
  height: 53px;
  z-index: 0;
}

.bc-deco--spend .bc-deco__clover {
  top: 20px;
  right: 56px;
  width: 36px;
  height: 37px;
  z-index: 1;
}

.bc-deco__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.bc-deco__back,
.bc-deco__front {
  position: absolute;
  display: block;
  max-width: none;
}

.bc-deco__back {
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  transform: rotate(-14deg);
  z-index: 0;
}

.bc-deco__front {
  top: 10px;
  right: 0;
  width: 48px;
  height: 48px;
  transform: rotate(8deg);
  z-index: 1;
}

.bc-label,
.bc-sub {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.bc-num {
  margin-top: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 42px;
  font-weight: 800;
  font-feature-settings: "tnum";
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.bc-num small {
  margin-left: 6px;
  color: var(--muted);
  font-size: 17px;
  font-weight: 700;
}

/* Текст баланса не заезжает под угловой декор; ползунок — на всю ширину карточки */
.balcard > .bc-label,
.balcard > .bc-num,
.balcard > .bc-sub {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 88px);
}


.spend-limit {
  --spend-limit-progress: 0%;
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

.spend-limit-bar {
  position: relative;
  height: 32px;
}

.spend-limit-track {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  overflow: hidden;
  height: 10px;
  transform: translateY(-50%);
  border: 1px solid rgba(31, 39, 66, 0.6);
  border-radius: 999px;
  background: #FFFDF7;
  box-sizing: border-box;
}

.spend-limit-fill {
  height: 100%;
  width: var(--spend-limit-progress);
  border-radius: inherit;
  background: #9EEAA2;
  transition: width 0.25s ease;
}

.spend-limit-knob {
  position: absolute;
  top: 50%;
  left: var(--spend-limit-progress);
  display: flex;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(31, 39, 66, 0.18));
  transition: left 0.25s ease;
}

.spend-limit-pugovka {
  display: block;
  width: 32px;
  height: 32px;
  max-width: none;
}

.spend-limit-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: "tnum";
}

.spend-limit-hint {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.spend-limit-hint b {
  font-weight: 800;
}

.spendcard .tc-foot .btn + .btn {
  margin-top: 8px;
}

.spend-redemption-details {
  margin: 8px 0 0;
  font-weight: 700;
}

.quick {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.wallet-tasks,
.wallet-operations {
  margin-top: 22px;
}

.profile-card + .wallet-operations {
  margin-top: 16px;
}

.wallet-exit {
  margin-top: 22px;
  max-width: 280px;
}

.wallet-push {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}

.wallet-push-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wallet-push-copy {
  min-width: 0;
}

.wallet-push-title {
  font-size: 14.5px;
  font-weight: 800;
}

.wallet-push-hint {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.wallet-push .tasks-switch {
  margin: 0;
  flex-shrink: 0;
}

.wallet-push-switch.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Настройки аккаунта (#/settings) */
.settings {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  max-width: 640px;
}

.settings-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.7px;
  line-height: 1.08;
  cursor: pointer;
  text-align: left;
}

.settings-back__arrow {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.settings-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

.settings-hero__ava {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: #F3E6C8;
  font-size: 16px;
  font-weight: 800;
}

.settings-hero__name {
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

.settings-hero__phone {
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  opacity: 0.72;
}

.settings-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}

.settings-field .lbl {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.settings-form .field {
  border: 1px solid var(--ink);
  border-radius: 16px;
  padding: 14px 16px;
  color: var(--ink);
  background: #fff;
  box-shadow: none;
}

.settings-form .field::placeholder {
  color: #9AA0B4;
}

.settings-form .field:focus {
  border-color: var(--ink);
  box-shadow: none;
}

.settings-form .field[readonly] {
  color: var(--ink);
  background: #fff;
  cursor: default;
}

.settings-form .field[readonly]::placeholder {
  color: #9AA0B4;
}

.settings-form .field-error {
  min-height: 0;
}

.settings-form .field-error:empty,
.settings-form .err:empty {
  display: none;
  margin: 0;
  min-height: 0;
}

.settings-form__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.settings-form__actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  margin: 0;
  border-radius: 16px;
  padding: 16px 22px;
  font-size: 16px;
}

.settings-form__actions .btn + .btn {
  margin-top: 0;
}

.settings-form__actions .btn--peach {
  flex: 1 1 auto;
  border-color: transparent;
}

.settings-form__actions .btn.ghost {
  flex: 0 0 auto;
  min-width: 120px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ink);
}

@media (max-width: 899px) {
  .settings-form__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-form__actions .btn,
  .settings-form__actions .btn--peach,
  .settings-form__actions .btn.ghost {
    width: 100%;
    flex: none;
    min-width: 0;
  }
}

.settings-push {
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  width: auto;
  max-width: 100%;
  background: transparent;
}

.settings-push-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: max-content;
  max-width: 100%;
}

.settings-push-copy {
  flex: none;
  width: auto;
}

.settings-push-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.settings-push-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.settings-push .tasks-switch {
  display: inline-flex;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.settings-push .tasks-switch-track {
  width: 48px;
  height: 28px;
  border: 1.5px solid var(--ink);
  background: #fff;
}

.settings-push .tasks-switch-thumb {
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ink);
  background: #fff;
  box-shadow: none;
}

.settings-push .tasks-switch-input:checked + .tasks-switch-track {
  background: #B7E3A8;
}

.settings-push .tasks-switch-input:checked + .tasks-switch-track .tasks-switch-thumb {
  transform: translateX(20px);
}

@media (min-width: 900px) {
  .settings {
    gap: 40px;
    max-width: 720px;
  }

  .settings-back {
    font-size: 32px;
  }
}

.wallet-taskgrid .taskcard:last-child {
  margin-bottom: 0;
}

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

.op {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--card-warm);
}

.wallet-operations .sec-title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  text-transform: none;
}

.spend-limit-pugovka circle:first-child {
  fill: #FF5E33;
  stroke: #AF2E08;
}

.spend-limit-pugovka circle:not(:first-child) {
  fill: #75260F;
}

.op-main {
  flex: 1;
  min-width: 0;
}

.op-t {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.op-time,
.op-desc {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.op-check {
  color: var(--ok);
  font-weight: 800;
}

.op-d {
  order: -1;
  flex: none;
  min-width: 3.2em;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

.op-d.pos {
  color: var(--ok);
}

.op-d.neg {
  color: var(--coral);
}

.op-empty {
  padding: 18px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.op-empty--illustrated {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 32px 16px 40px;
  color: var(--ink);
  background: transparent;
}

.op-empty--illustrated .empty-state__ill {
  margin: 0 0 8px;
}

.op-empty--illustrated strong {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.op-empty--illustrated span {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.op-empty--illustrated .btn {
  width: auto;
  min-width: 200px;
  margin-top: 12px;
  padding-left: 28px;
  padding-right: 28px;
}

.btn--peach {
  border-color: var(--peach-d);
  background: var(--peach);
}

.btn--peach:hover {
  background: var(--peach-d);
}

.op-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.op-pager-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.qbtn {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 10px;
  gap: 7px;
  color: var(--ink);
  background: var(--card);
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.qbtn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.qbtn .qi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--gold);
  font-size: 20px;
  font-weight: 800;
}

.card,
.taskcard {
  border: 0;
  border-radius: 16px;
  padding: 16px;
  background: var(--card-warm);
}

.card {
  margin-bottom: 14px;
}

.card.spendcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #E8CBA9;
  border-radius: 24px;
  background: #FFF4DF;
}

.card.spendcard .tc-head {
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  background: transparent;
}

.card.spendcard .tc-title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.card.spendcard .tc-desc {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.card.spendcard .badge {
  flex: none;
  align-self: flex-start;
  height: auto;
  border: 1px solid #1F2742;
  border-radius: 100px;
  padding: 6px 12px;
  color: #1F2742;
  background: #FFD4C8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.card.spendcard .badge.warn {
  color: #1F2742;
  background: #FFD4C8;
}

.card.spendcard .badge.ok {
  background: var(--mint);
}

.card.spendcard .tc-foot {
  margin-top: 8px;
}

.card.spendcard .btn.block:not(.ghost) {
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--peach);
}

.card.spendcard .btn.block:not(.ghost):hover {
  background: var(--peach-d);
}

.card.spendcard .btn.ghost,
.card.spendcard .btn.ghost:disabled,
.card.spendcard .btn:disabled {
  opacity: 1;
  color: #9CA2B6;
  background: #fff;
  border: 1px solid #C5C8D4;
  border-radius: 14px;
  padding: 14px 16px;
}

.taskcard {
  display: flex;
  flex-direction: column;
  margin-bottom: 11px;
  padding: 0;
  overflow: hidden;
  border: 2px solid #9CA2B6;
  border-radius: 24px;
  background: #FFF4DF;
}

.taskcard.done {
  background: #F3F0E4;
  border-color: #B8BDCB;
}

.taskcard.done .tc-main {
  background: #F7F4EA;
}

.tc-head {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 18px 14px;
  background: #FFF4DF;
}

.taskcard.done .tc-head {
  background: #F3F0E4;
}

.taskcard.is-collapsible {
  border: 1px solid #E8CBA9;
  border-radius: 16px;
  background: #FFFDF7;
}

.taskcard.is-collapsible button.tc-head {
  width: 100%;
  margin: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: #FFF1DF;
  cursor: pointer;
  appearance: none;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 8px 12px 16px;
}

.taskcard.done.is-collapsible button.tc-head {
  background: #F3F0E4;
}

.tc-icon-frame {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  overflow: hidden;
}

.tc-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.5);
  transform-origin: center;
}

.taskcard.is-collapsible .tc-chevron {
  flex: none;
  display: block;
  color: #1F2742;
}

.taskcard.is-collapsible .tc-title {
  color: #1F2742;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.8px;
}

.taskcard.is-collapsible .tc-desc {
  color: #1F2742;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.6px;
}

.taskcard.is-collapsible .tc-foot .btn {
  padding: 8px 12px;
  border-color: #9588D6;
  background: #D1D0FF;
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
}

.taskcard.is-collapsible .tc-foot .btn.ghost {
  border-color: #6C6D8A;
  background: #FFFDF7;
  font-weight: 800;
}

.taskcard.is-collapsible.is-collapsed .tc-main {
  display: none;
}

.taskcard.is-collapsible.is-collapsed .tc-reward {
  cursor: pointer;
}

.taskcard.is-collapsible .tc-main,
.taskcard.done.is-collapsible .tc-main {
  background: #FFFDF7;
}

.taskcard.is-collapsible .tc-reward {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: -8px;
  padding: 4px 12px 8px;
  background: #FFFDF7;
}

.taskcard.is-collapsible:not(.is-collapsed) .tc-main {
  padding-bottom: 8px;
  box-shadow: none;
}

.taskcard.is-collapsible:not(.is-collapsed) .tc-reward {
  z-index: auto;
  margin-top: 0;
  padding-top: 0;
  box-shadow: 0 4px 4px rgba(198, 195, 192, 0.35);
}

.taskcard.fake .tc-fake-front .tc-reward {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding: 0 12px 8px;
  background: #FFFDF7;
}

.taskcard.is-collapsible .tc-reward .badge,
.taskcard.is-collapsible .tc-reward .badge--reward,
.taskcard.done.is-collapsible .tc-reward .badge--reward,
.taskcard.fake .tc-fake-front .tc-reward .badge,
.taskcard.fake .tc-fake-front .tc-reward .badge--reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid #E8CBA9;
  border-radius: 100px;
  color: #1F2742;
  background: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
}

.tc-ic {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--gold);
  font-size: 20px;
  font-weight: 800;
}

.tc-body {
  flex: 1;
  min-width: 0;
}

.tc-title {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.tc-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  margin-top: -8px;
  padding: 16px;
  background: #FFFAEE;
  box-shadow: 0 4px 4px rgba(198, 195, 192, 0.35);
}

.tc-desc,
.card-text {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.taskcard .tc-desc {
  margin-top: 0;
  width: 100%;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.45;
}

.taskcard > .tc-desc {
  margin-top: 12px;
  width: 100%;
  line-height: 1.45;
}

.redemption-status {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--green-soft);
  box-shadow: none;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.badge {
  flex: none;
  border: 0;
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.taskcard .tc-head .badge,
.taskcard .tc-head .badge--reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid #E8CBA9;
  border-radius: 100px;
  color: #1F2742;
  background: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.badge-coin {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
}

.badge.ok,
.taskcard.done .badge {
  color: var(--ink);
  background: var(--mint);
}

.taskcard.done .tc-head .badge--reward {
  background: #fff;
  border-color: #E8CBA9;
}

.badge.warn {
  color: var(--coral-d);
  background: #F8D4C8;
}

.tc-foot {
  margin-top: 20px;
  min-width: 0;
}

.tc-main .tc-foot {
  margin-top: auto;
}

.tc-foot .badge {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.tc-foot .badge + .btn {
  margin-top: 12px;
}

.checkin-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.checkin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkin-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  background: #FFF8E6;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.checkin-chip b {
  color: var(--ink);
  font-weight: 800;
}

.review-limit-foot,
.sim-activation-foot,
.mfo-share-foot {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.mfo-share-foot .tc-hint,
.mfo-share-foot .btn + .btn {
  margin-top: 0;
}

.review-limit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.review-limit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.review-limit-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  background: #FFF8E6;
  box-shadow: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.review-limit-chip b {
  color: var(--ink);
  font-weight: 800;
}

.review-limit-hint {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.checkin-banner,
.checkin-status,
.checkin-today,
.checkin-next,
.checkin-got,
.checkin-hint {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.taskcard.checkin .tc-foot .badge.checkin-status-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
}

.checkin-today,
.checkin-next {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #FFF8E6;
  box-shadow: none;
  font-weight: 700;
}

.checkin-today b,
.checkin-next b {
  font-weight: 800;
}

.checkin-banner {
  border-radius: 12px;
  padding: 8px 10px;
  background: #FFF0EA;
  color: var(--ink);
}

.checkin-hint {
  color: var(--muted);
}

.checkin-scale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
  align-items: stretch;
}

.checkin-scale-item {
  display: grid;
  grid-template-rows: 16px 14px 16px;
  align-items: center;
  justify-items: center;
  gap: 0;
  min-width: 0;
  height: 52px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px 2px;
  background: var(--card);
  box-shadow: none;
  text-align: center;
}

.checkin-scale-day {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: var(--muted);
}

.checkin-scale-amount {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.checkin-scale-today,
.checkin-scale-mark {
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}

.checkin-scale-item.is-done {
  background: var(--mint);
}

.checkin-scale-item.is-done .checkin-scale-day,
.checkin-scale-item.is-current .checkin-scale-day,
.checkin-scale-item.is-next .checkin-scale-day {
  color: var(--ink);
}

.checkin-scale-item.is-current,
.checkin-scale-item.is-next {
  background: var(--gold);
}

.checkin-scale-item.is-upcoming {
  background: #FFFBF1;
}

.checkin-timer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--ink);
  color: #FFF8E6;
  box-shadow: none;
}

.checkin-timer-label {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.86;
}

.checkin-timer {
  flex: none;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.tc-lock-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 16px 18px;
  border: 1.5px solid #FCB15C;
  border-radius: 12px;
  background: #FED78C;
  color: #1F2742;
  box-shadow: none;
}

.tc-lock-banner__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

.tc-lock-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.tc-lock-banner.checkin-timer-wrap {
  justify-content: flex-start;
  border-color: #FCB15C;
  background: #FED78C;
  color: #1F2742;
}

.tc-lock-banner [data-checkin-timer] {
  font-weight: 800;
  white-space: nowrap;
}

.checkin-claim-btn {
  white-space: normal;
  overflow-wrap: anywhere;
}

.checkin-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.checkin-foot.is-just-claimed .checkin-timer-wrap {
  animation: checkin-pop 0.45s ease-out;
}

@keyframes checkin-pop {
  from {
    transform: scale(0.96);
    opacity: 0.4;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .checkin-foot.is-just-claimed .checkin-timer-wrap {
    animation: none;
  }
}

.taskcard.fake {
  cursor: pointer;
  perspective: 1000px;
  border: none;
  background: transparent;
  padding: 0;
  /* Safari: overflow:hidden на perspective-контейнере ломает backface-visibility */
  overflow: visible;
  height: 100%;
}

.taskcard.fake .tc-fake-inner {
  display: grid;
  grid-template-rows: minmax(120px, 1fr);
  grid-template-columns: 1fr;
  flex: 1 1 auto;
  width: 100%;
  min-height: 120px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.taskcard.fake.is-flipped .tc-fake-inner {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.taskcard.fake .tc-fake-face {
  grid-area: 1 / 1;
  box-sizing: border-box;
  align-self: stretch;
  min-height: 120px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* отдельный compositing-слой — иначе Safari рисует оборот зеркально */
  -webkit-transform: translateZ(0.1px);
  transform: translateZ(0.1px);
  border-radius: 24px;
  padding: 16px;
}

.taskcard.fake .tc-fake-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  background: #FFEDC8;
  border: 0;
}

.taskcard.fake .tc-fake-front {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  -webkit-transform: rotateY(180deg) translateZ(0.1px);
  transform: rotateY(180deg) translateZ(0.1px);
  background: #FFFDF7;
  border: 1px solid #E8CBA9;
  border-radius: 16px;
}

.taskcard.fake .tc-fake-front .tc-head {
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 64px;
  padding: 8px 12px 16px;
  background: #FFF1DF;
}

.taskcard.fake .tc-fake-front .tc-title {
  color: #1F2742;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.8px;
}

.taskcard.fake .tc-fake-front .tc-main {
  background: #FFFDF7;
  box-shadow: none;
}

/* Safari часто игнорирует backface-visibility у сложенных grid-сторон */
.taskcard.fake.is-flipped .tc-fake-back,
.taskcard.fake:not(.is-flipped) .tc-fake-front {
  visibility: hidden;
  pointer-events: none;
}

.taskcard.fake .tc-fake-front .tc-desc {
  margin-top: 0;
  width: 100%;
  color: #1F2742;
  font-size: 13px;
  font-weight: 400;
  line-height: 15.6px;
}

.taskcard.fake .tc-fake-front .tc-foot {
  margin-top: 0;
  padding-top: 0;
}

/* Figma Article «Скоро»: lavender reward + title — задания и списание */
.taskcard.fake .tc-fake-back .badge--reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  box-sizing: border-box;
  padding: 4px;
  border: 1px solid #C4C1F5;
  border-radius: 999px;
  color: #1F2742;
  background: #EDECFD;
  font-size: 20px;
  font-weight: 700;
  line-height: 22px;
}

.taskcard.fake .tc-fake-soon {
  position: relative;
  z-index: 1;
  color: #1F2742;
  font-size: 14px;
  font-weight: 600;
  line-height: 16.8px;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}

.taskcard.fake .tc-fake-pattern {
  display: none;
}

@media (max-width: 899px) {
  .taskcard.fake .tc-fake-inner {
    position: relative;
    grid-template-rows: auto;
    min-height: 0;
  }

  .taskcard.fake .tc-fake-face {
    min-height: 0;
    border-radius: 12px;
  }

  .taskcard.fake .tc-fake-back {
    gap: 4px;
    padding: 8px 14px;
    background: #FFEDC8;
    border: 0;
  }

  .taskcard.fake .tc-fake-front {
    border-radius: 16px;
  }

  .taskcard.fake.is-flipped .tc-fake-back,
  .taskcard.fake:not(.is-flipped) .tc-fake-front {
    position: absolute;
    inset: 0;
    width: 100%;
  }

}

/* spendcard.fake наследует .taskcard.fake (тот же markup + класс taskcard) */
.spendgrid--fake .spendcard {
  margin-bottom: 14px;
}

.spendgrid--fake .spendcard:last-child {
  margin-bottom: 0;
}

.taskcard.locked,
.taskcard.checkin.is-waiting {
  opacity: 0.64;
  border-color: rgba(156, 162, 182, 0.4);
  background: #FFF4DF;
}

.taskcard.locked.is-collapsible,
.taskcard.checkin.is-waiting.is-collapsible {
  border: 1px solid #E8CBA9;
  border-radius: 16px;
  background: #FFFDF7;
}

.taskcard.locked .tc-main,
.taskcard.checkin.is-waiting .tc-main {
  background: #FFFAEE;
}

.tc-lock {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.tc-hint {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.btn.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

.empty-state {
  border: 0;
  border-radius: 16px;
  padding: 18px;
  color: var(--muted);
  background: var(--card-warm);
  font-size: 14px;
  text-align: center;
}

.empty-state--loading,
.empty-state--tasks {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--ink);
}

.empty-state--loading {
  min-height: 46vh;
}

/* Figma 344:7504 — пустой список заданий: спящая пуговка + title/sub */
.empty-state--tasks {
  flex: 1;
  gap: 8px;
  margin: 0;
  padding: 32px 16px 48px;
  min-height: 280px;
}

.empty-state__ill {
  display: block;
  flex: none;
  width: 119px;
  height: 83px;
  margin: 0 0 8px;
}

.empty-state--loading strong,
.empty-state--tasks strong {
  margin-top: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.empty-state--loading strong {
  margin-top: 16px;
}

.empty-state--loading span:not(.v2-loader):not(.v2-loader__dot),
.empty-state--tasks span {
  margin-top: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.empty-state--loading span:not(.v2-loader):not(.v2-loader__dot) {
  margin-top: 6px;
}

.v2-loader {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 36px;
}

.v2-loader i,
.v2-loader__dot {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: transparent;
  animation: v2-bounce-pug 1.4s ease-in-out infinite;
}

.v2-loader i:nth-child(1),
.v2-loader__dot:nth-child(1) {
  animation-name: v2-bounce-pug-1;
}

.v2-loader i:nth-child(2),
.v2-loader__dot:nth-child(2) {
  animation-name: v2-bounce-pug-2;
}

.v2-loader i:nth-child(3),
.v2-loader__dot:nth-child(3) {
  animation-name: v2-bounce-pug-3;
}

/* fallback dots if img assets missing */
.v2-loader i:nth-child(1) {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #FFFBF1 0 3px, transparent 3.2px),
    #FF5E33;
}

.v2-loader i:nth-child(2) {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #FFFBF1 0 3px, transparent 3.2px),
    #FCB15C;
}

.v2-loader i:nth-child(3) {
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #FFFBF1 0 3px, transparent 3.2px),
    #A7A5FF;
}

@keyframes v2-bounce-pug-1 {
  0%,
  8%,
  100% {
    transform: translateY(0);
  }
  4% {
    transform: translateY(-14px);
  }
}

@keyframes v2-bounce-pug-2 {
  0%,
  28%,
  36%,
  100% {
    transform: translateY(0);
  }
  32% {
    transform: translateY(-14px);
  }
}

@keyframes v2-bounce-pug-3 {
  0%,
  48%,
  56%,
  100% {
    transform: translateY(0);
  }
  52% {
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-loader i,
  .v2-loader__dot {
    animation: none;
  }
}

.appnav {
  position: fixed;
  /* Как контент .scr: inset 16 внутри колонки .app (max 460) — Figma Navigation 328@360.
     Без 100vw: на Brave/Android горизонтальный overflow + 100vw сдвигали nav вместе с .wallet-operations. */
  left: 16px;
  right: 16px;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  width: auto;
  max-width: 428px;
  margin-inline: auto;
  border: 1px solid var(--ink);
  border-radius: 16px;
  background: #fff;
}

.nav-logo {
  display: none;
}

.nav-items {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.tab {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  border: 0;
  padding: 9px 0 11px;
  gap: 2px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tab .ti {
  position: relative;
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  line-height: 0;
  color: inherit;
  opacity: 0.72;
}

.tab .ti svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 28px;
  height: 28px;
  max-width: none;
}

/* Inactive: only outline. Prefer visibility so tokens `svg{display:block}` cannot resurrect solid. */
.tab .ti .ti__solid {
  visibility: hidden;
}

.tab.active {
  color: var(--ink);
}

.tab.active .ti {
  opacity: 1;
  color: #1F2742;
}

.tab.active .ti .ti__outline {
  visibility: hidden;
}

.tab.active .ti .ti__solid {
  visibility: visible;
  display: block !important; /* override HTML [hidden] + UA stylesheet */
}

/* «Профиль» открывается из шапки и на mobile, и в сайдбаре. */
.tab--profile {
  display: none;
}

.tab--bot {
  color: var(--muted);
  text-decoration: none;
}

.tab--bot .ti {
  opacity: 0.72;
}

.tab > span:last-child {
  line-height: 1.2;
}

.tab--bot > span:last-child {
  max-width: none;
  text-align: center;
  white-space: nowrap;
}

/* Snackbar: пассивные уведомления (Figma 352:20942).
   Mobile/tablet (<900): на всю контентную ширину, 12px над нижней nav.
   Desktop: 16px от сайдбара, 20px от низа вьюпорта. Автоскрытие 5с (JS). */
.toast {
  position: fixed;
  bottom: 108px;
  left: 50%;
  z-index: 60;
  box-sizing: border-box;
  width: max-content;
  max-width: min(484px, calc(100vw - 32px));
  border: 0;
  border-radius: 18px;
  padding: 11px 18px;
  color: #fff;
  background: var(--ink);
  box-shadow: var(--shadow-soft);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
}

.toast--snackbar {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Те же inset 16 / max 428, что у .appnav — без 100vw */
  left: 16px;
  right: 16px;
  /* Fallback до замера .appnav в JS: однострочная nav + gap 12 */
  bottom: calc(max(12px, env(safe-area-inset-bottom, 0px)) + 64px + 12px);
  width: auto;
  max-width: 428px;
  margin-inline: auto;
  min-height: 60px;
  border-radius: 8px;
  padding: 10px 16px;
  color: #fff;
  background: #1a1a1a;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.16);
  font-family: "Onest", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.275;
  text-align: left;
  transform: none;
  animation: toast-in-mobile 0.22s ease;
}

.toast__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #fff;
}

.toast__text {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 8px;
}

.toast__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: auto;
  border: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.toast__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

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

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

@media (min-width: 900px) {
  .toast--snackbar {
    /* Контент справа от сайдбара 236px внутри .app max 1080; +16 от панели */
    left: calc((100vw - min(100vw, 1080px)) / 2 + 236px + 16px);
    right: auto;
    bottom: 20px;
    width: min(484px, calc(100vw - ((100vw - min(100vw, 1080px)) / 2 + 236px + 32px)));
    max-width: min(484px, calc(100vw - ((100vw - min(100vw, 1080px)) / 2 + 236px + 32px)));
    margin: 0;
    transform: none;
    animation-name: toast-in-desktop;
  }
}

/* Figma 346:8994 — карточка по центру экрана; 346:9213 / 352:15663 / 425:23015 — сам chrome */
.reward-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(32px, env(safe-area-inset-top, 0px)) 16px max(32px, env(safe-area-inset-bottom, 0px));
  background: rgba(31, 39, 66, 0.45);
  opacity: 0;
  transition: opacity 400ms ease;
}

.reward-modal-bg.is-open {
  opacity: 1;
}

.reward-modal {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border: 1px solid #FFE9CF;
  border-radius: 32px;
  padding: 72px 24px 24px;
  background: #FFFBF1;
  box-shadow: 0 4px 60px rgba(253, 223, 149, 1);
  transform: translateY(28px);
  transition: transform 400ms ease;
}

.reward-modal-bg.is-open .reward-modal {
  transform: translateY(0);
}

.reward-modal--checkin {
  padding-top: 72px;
}

.reward-modal__ribbon {
  position: absolute;
  top: -28px;
  left: 50%;
  width: min(280px, 86%);
  transform: translateX(-50%);
  pointer-events: none;
}

.reward-modal__ribbon-img,
.reward-modal__ribbon-fallback {
  display: block;
  width: 100%;
  height: auto;
}

.reward-modal__ribbon-fallback {
  height: 72px;
  border-radius: 12px;
  background: #FCB15C;
}

.reward-modal__ribbon-text {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 42%;
  color: #fff;
  font-size: clamp(16px, 4.8vw, 20px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(184, 77, 48, 0.6);
  transform: translateY(-50%);
}

.reward-modal__balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  border: 1px solid rgba(31, 39, 66, 0.4);
  border-radius: 16px;
  padding: 14px 20px;
  background: #fff;
}

.reward-modal__counter {
  color: var(--ink);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.reward-modal__coin {
  display: block;
  width: 36px;
  height: 36px;
  flex: none;
}

.reward-modal__sub {
  margin: 0 0 18px;
  color: #000;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.reward-modal__streak {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.reward-modal__ok {
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .reward-modal-bg,
  .reward-modal-bg.is-open .reward-modal,
  .reward-modal {
    transition: none;
  }
}

@media (min-width: 900px) {
  .reward-modal-bg {
    padding: 24px;
  }

  .reward-modal {
    max-width: 430px;
    padding: 88px 36px 28px;
  }

  .reward-modal__ribbon {
    width: 320px;
    top: -36px;
  }

  .reward-modal__ribbon-text {
    font-size: 22px;
  }
}

.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: max(16px, env(safe-area-inset-top, 0px)) 24px max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(31, 39, 66, 0.54);
}

.modal {
  width: 100%;
  max-width: 380px;
  border: 0;
  border-radius: 20px;
  padding: 22px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}

.modal h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.task-info-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: inherit;
  padding-top: 12px;
  padding-right: 4px;
}

.task-info-modal__close {
  position: absolute;
  top: -16px;
  right: -14px;
  z-index: 1;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.task-info-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 16px;
  padding-right: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}

.task-info-modal__body p {
  margin: 0 0 8px;
}

.task-info-modal__body p:last-child {
  margin-bottom: 0;
}

.task-info-modal__body ul,
.task-info-modal__body ol {
  margin: 0 0 8px;
  padding-left: 1.25em;
}

.task-info-modal__body li {
  margin: 0 0 4px;
}

.task-info-modal__actions {
  flex: 0 0 auto;
  margin-top: auto;
}

.modal.modal--task-info {
  max-height: min(90vh, calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.msub {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13.5px;
}

.redemption-form--wizard .msub.redemption-step2-hint {
  margin: 0 0 4px;
}

.redemption-form--wizard .msub.redemption-step2-hint + .msub.redemption-step2-hint {
  margin-bottom: 12px;
}

.redemption-form--wizard .field-error:empty,
.redemption-form--wizard .err:empty {
  display: none;
  min-height: 0;
  margin: 0;
}

.redemption-form--wizard .field-error:not(:empty) {
  margin-bottom: 8px;
}

.redemption-form--wizard .err:not(:empty) {
  margin: 10px 0;
}

.redemption-form--wizard .form-actions {
  margin-top: 12px;
}

.redemption-amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.redemption-amount-row .redemption-amount-field {
  flex: 1;
  margin: 0;
}

.redemption-amount-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: block;
}

.form-actions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

@media (min-width: 900px) {
  .auth-card {
    max-width: 430px;
  }

  .app {
    max-width: 1080px;
    flex-direction: row;
    align-items: stretch;
    border-right: 1px solid var(--line-soft);
    border-left: 1px solid var(--line-soft);
    box-shadow: none;
  }

  .appnav {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    flex: none;
    flex-direction: column;
    width: 236px;
    max-width: none;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--line-soft);
    border-radius: 0;
    padding: 20px 14px;
    background: var(--card);
    backdrop-filter: none;
  }

  .nav-logo {
    display: flex;
    padding: 6px 10px 18px;
  }

  .nav-items {
    flex: none;
    flex-direction: column;
    gap: 6px;
  }

  .tab {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 11px 12px;
    gap: 11px;
    font-size: 14.5px;
  }

  .tab:hover,
  .tab.active {
    border-color: transparent;
    color: var(--ink);
    background: #FFD88B;
    box-shadow: none;
  }

  .tab .ti {
    width: 28px;
    height: 28px;
    opacity: 0.72;
  }

  .tab.active .ti {
    opacity: 1;
  }

  .nav-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
  }

  .cabinet-support-email--nav,
  .nav-support {
    display: inline-flex;
  }

  /* На desktop «Написать нам» только в сайдбаре, не в карточке профиля. */
  .profile-card__support {
    display: none;
  }

  .cabinet-support-email--abar {
    display: none;
  }

  /* Desktop: шапка остаётся видимой (как в Figma) */
  .abar {
    display: flex;
    gap: 16px;
    min-height: 72px;
    padding: 14px 36px;
    border-bottom: 1px solid var(--line-soft);
  }

  .abar-brand {
    display: none;
  }

  .abar-user__name {
    max-width: 220px;
    font-size: 14px;
  }

  .abar-user__phone {
    max-width: 220px;
    font-size: 12px;
  }

  /* Desktop: фиксированная ширина как в Figma (181px), активный таб по тексту */
  .tasks-switch--segment {
    width: 181px;
    flex-grow: 0;
    align-self: flex-start;
  }

  .tasks-switch--segment .tasks-switch-tab {
    flex: 1 1 auto;
    padding: 0 12px;
  }

  .tasks-switch--segment .tasks-switch-tab.is-active {
    flex: 0 0 auto;
    padding: 0 20px;
  }

  .scr {
    padding: 32px 36px;
  }

  .taskgrid,
  .spendgrid {
    display: grid;
    gap: 18px;
  }

  .taskgrid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 8px;
  }

  .spendgrid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .spendgrid .spendcard,
  .spendgrid .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 0;
  }

  .spendgrid .spendcard .tc-foot,
  .spendgrid .card .tc-foot {
    margin-top: auto;
    padding-top: 20px;
  }

  .taskgrid .taskcard {
    height: auto;
    align-self: start;
    margin-bottom: 0;
  }

  .taskgrid .taskcard.fake .tc-fake-inner {
    min-height: 0;
    height: 100%;
    grid-template-rows: 1fr;
  }

  .taskgrid .taskcard.fake .tc-fake-face {
    min-height: 0;
  }

  .taskgrid .taskcard.fake.is-flipped .tc-fake-back,
  .taskgrid .taskcard.fake:not(.is-flipped) .tc-fake-front {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .taskgrid .taskcard.fake .tc-fake-back {
    height: 100%;
    padding: 12px 14px;
  }

  .taskgrid .taskcard .tc-main .tc-foot {
    margin-top: auto;
  }
}


.v2-deco {
  position: relative;
  display: block;
  flex: none;
  width: 87px;
  height: 80px;
}

.v2-deco__img {
  display: block;
  width: 87px;
  height: 80px;
  max-width: none;
}

.auth-bonus .v2-deco {
  flex: none;
  width: 72px;
  height: 66px;
}

.auth-bonus .v2-deco__img {
  width: 72px;
  height: 66px;
  max-width: none;
}

.illustrated-brand .v2-logo {
  width: 124.29px;
  height: 28px;
}

.app-brand .v2-logo,
.nav-logo .v2-logo {
  width: 124.29px;
  height: 28px;
}