.modal-layer{z-index:3000!important;touch-action:none!important;overscroll-behavior:contain!important}.bottom-nav{z-index:1000!important}.modal-layer .sheet{will-change:transform;transform:translateY(0);transition:transform .28s cubic-bezier(.22,.8,.36,1)}.modal-layer.is-sheet-dragging .sheet{transition:none!important}.modal-layer .sheet__handle{touch-action:none!important;cursor:grab}.modal-layer.is-sheet-dragging .sheet__handle{cursor:grabbing}`r`n.toast{z-index:3100!important;color:#3FE576!important;background:rgba(32,32,40,.9)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:999px!important;gap:9px!important;max-width:calc(100% - 36px)!important;padding:6px 14px 6px 7px!important;font-size:14px!important;font-weight:640!important;box-shadow:none!important}.toast>svg{display:none!important}.toast::before{content:"";display:block;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:#50505A url("./tick-square.svg") center/18px 18px no-repeat!important}`r`n`r`n.toast{border-radius:9999px!important;background:#202028!important;opacity:0!important}.toast.is-visible{opacity:.9!important}.toast:not(.is-visible){opacity:0!important}`r`n
/* Final toast appearance and top-to-bottom motion */
.toast{z-index:3100!important;color:#3FE576!important;background:rgba(32,32,40,.9)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:9999px!important;opacity:0!important;transform:translate(-50%,-18px)!important;transition:opacity .24s ease,transform .24s cubic-bezier(.22,.8,.36,1)!important}
.toast.is-visible{opacity:1!important;transform:translate(-50%,0)!important}
.toast:not(.is-visible){opacity:0!important;transform:translate(-50%,-18px)!important}/* Toast final override */
.toast{z-index:3100!important;top:calc(var(--safe-top) + 8px)!important;left:50%!important;display:flex!important;align-items:center!important;gap:9px!important;max-width:calc(100% - 36px)!important;padding:6px 14px 6px 7px!important;color:#3FE576!important;background:rgba(32,32,40,.9)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:9999px!important;box-shadow:none!important;opacity:0!important;transform:translate(-50%,-22px)!important;transition:opacity .28s ease,transform .28s cubic-bezier(.22,.8,.36,1)!important}
.toast.is-visible{opacity:1!important;transform:translate(-50%,0)!important}
.toast:not(.is-visible){opacity:0!important;transform:translate(-50%,-22px)!important}
.toast>svg{display:none!important}
.toast::before{content:""!important;display:block!important;width:30px!important;height:30px!important;flex:0 0 30px!important;border-radius:50%!important;background:#50505A url("./tick-square.svg") center/18px 18px no-repeat!important}/* Toast final motion and border reset */
.toast{box-sizing:border-box!important;width:calc(100% - 36px)!important;max-width:430px!important;border:0!important;outline:0!important;box-shadow:none!important;transform:translate3d(-50%,-22px,0)!important;transition:opacity .3s ease,transform .3s cubic-bezier(.22,.8,.36,1)!important}
.toast.is-visible{opacity:1!important;transform:translate3d(-50%,0,0)!important}
.toast:not(.is-visible){opacity:0!important;transform:translate3d(-50%,-22px,0)!important}/* Toast match ready subscription card */
.toast{width:max-content!important;max-width:calc(100% - 28px)!important;padding:5px 16px 5px 5px!important;gap:9px!important;color:#3FE576!important;background:rgba(32,32,40,.9)!important;border:0!important;border-radius:var(--radius-lg)!important;box-shadow:none!important}
.toast span{white-space:nowrap!important;color:#ffffff!important}
.toast::before{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:50%!important;background:#50505A url("./tick-square.svg") center/20px 20px no-repeat!important}/* Match index card exactly, with restored circle color */
.toast{background:#202028!important;opacity:0!important;border:0!important;border-radius:9999px!important}
.toast.is-visible{opacity:1!important}
.toast::before{background:#50505A url("./tick-square.svg") center/20px 20px no-repeat!important}/* Use the same surface token as index ready-strip */
.toast{background:var(--surface)!important;opacity:0!important}
.toast.is-visible{opacity:1!important}
.toast::before{background:#50505A url("./tick-square.svg") center/20px 20px no-repeat!important}/* Slightly lighter toast surface with 10% transparency */
.toast{background:rgba(42,42,50,.8)!important}
.toast.is-visible{opacity:1!important}/* Toast circle transparency and glass blur */
.toast{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
.toast::before{opacity:.7!important}/* Reduced toast blur */
.toast{backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important}/* Toast exit: smooth upward movement */
.toast{transition:transform .34s cubic-bezier(.22,.8,.36,1),opacity .01s linear!important}
.toast.is-visible{transform:translate3d(-50%,0,0)!important;opacity:1!important}
.toast:not(.is-visible){transform:translate3d(-50%,calc(-100% - 10px),0)!important;opacity:0!important;transition:transform .34s cubic-bezier(.22,.8,.36,1),opacity .01s linear .34s!important}/* Revert the last exit-animation change */
.toast{transition:opacity .3s ease,transform .3s cubic-bezier(.22,.8,.36,1)!important}
.toast.is-visible{opacity:1!important;transform:translate3d(-50%,0,0)!important}
.toast:not(.is-visible){opacity:0!important;transform:translate3d(-50%,-22px,0)!important;transition:opacity .3s ease,transform .3s cubic-bezier(.22,.8,.36,1)!important}/* Preserve toast width while it exits */
.toast{width:var(--toast-width,max-content)!important}/* Final notification toast appearance */.toast{background:rgba(42,42,50,.8)!important}.toast span{color:#ffffff!important;font-family:inherit!important;font-size:14px!important;font-weight:640!important;line-height:1.2!important}.toast::before{width:26px!important;height:26px!important;flex-basis:26px!important;border-radius:50%!important;background:#50505A url("./notification-3.svg") center/18px 18px no-repeat!important;opacity:.6!important}
/* Keep 18px between toast text and its right edge */
.toast{padding-right:18px!important}

/* Final bottom-sheet interaction and appearance */
.modal-layer .sheet > .sheet__handle,
.modal-layer .sheet__handle {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
}
.modal-layer .sheet__header .icon-button,
.modal-layer .sheet__header > button[aria-label="Закрыть"] {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.modal-layer .sheet__header .icon-button svg,
.modal-layer .sheet__header > button[aria-label="Закрыть"] svg,
.modal-layer .sheet__header .icon-button svg *,
.modal-layer .sheet__header > button[aria-label="Закрыть"] svg * {
  stroke: #fff !important;
  fill: none !important;
  color: #fff !important;
}
html.modal-sheet-open,
body.modal-sheet-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}
/* Bottom-sheet input style matched to the promo-code field */
.modal-layer .sheet input,
.modal-layer .sheet textarea {
  background: rgba(255,255,255,.05) !important;
}
.modal-layer .sheet input:focus,
.modal-layer .sheet textarea:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 1px var(--blue) !important;
  outline: none !important;
}
/* Bottom-sheet bottom corners */
.modal-layer .sheet {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Final bottom-sheet layout and controls */
html body .modal-layer .sheet {
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding-bottom: calc(20px + var(--safe-bottom)) !important;
}
html body .modal-layer .sheet > .sheet__handle {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  flex: none !important;
}
html body .modal-layer .sheet > .sheet__header {
  justify-content: flex-start !important;
}
html body .modal-layer .sheet > .sheet__header > .icon-button,
html body .modal-layer .sheet > .sheet__header > button[aria-label="Закрыть"] {
  display: none !important;
}
html body .modal-layer .sheet:has(.legal-text) .legal-text {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

/* The sheet owns the close gesture; only the legal copy owns text scrolling. */
html body .modal-layer .sheet:has(.legal-text) {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
}
html body .modal-layer .sheet > button.button {
  margin-bottom: 0 !important;
  border-radius: 18px !important;
}
/* Ensure legal bottom-sheet action buttons keep the full 25px edge gap */
html body .modal-layer .sheet:has(.legal-text) {
  padding-bottom: calc(20px + var(--safe-bottom)) !important;
}
/* Center legal-sheet titles and leave a 10px gap below the title block. */
html body .modal-layer .sheet:has(.legal-text) > .sheet__header {
  justify-content: center !important;
  padding-bottom: 10px !important;
}
html body .modal-layer .sheet:has(.legal-text) > .sheet__header > h2 {
  width: 100% !important;
  text-align: center !important;
}
html body .modal-layer .sheet:has(.legal-text) > button.button,
html body .modal-layer .sheet:has(.legal-text) > .button--secondary {
  margin-bottom: 0 !important;
}

/* Subtle outline for bottom-sheet action buttons in their idle state */
html body .modal-layer .sheet > button.button:not(:hover):not(:active):not(:focus-visible),
html body .modal-layer .sheet > .button--secondary:not(:hover):not(:active):not(:focus-visible) {
  border: 1px solid rgba(255, 255, 255, .05) !important;
}

/* Keep the idle outline above page-level legal-sheet overrides */
html body .modal-layer .sheet button.button.button--primary:not(:hover):not(:active),
html body .modal-layer .sheet button.button.button--secondary:not(:hover):not(:active) {
  border: 1px solid rgba(255, 255, 255, .05) !important;
  outline: 1px solid rgba(255, 255, 255, .05) !important;
  outline-offset: -1px !important;
}

.modal-layer .sheet:has(.legal-text)>.button--secondary:hover,.modal-layer .sheet:has(.legal-text)>.button--secondary:focus-visible{background:linear-gradient(135deg,rgba(255,143,240,.6),#D992D0)!important;background-image:linear-gradient(135deg,rgba(255,143,240,.6),#D992D0)!important;border-color:transparent!important;color:#fff!important;filter:none!important}