.screen.ranking {
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0068b7 !important;
  overflow: hidden !important;
  transform: none !important;
}

.screen.ranking::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url('../mcp/exact/ranking/ranking-pattern-exact.png?v=20260415-1') !important;
  background-repeat: repeat !important;
  background-size: calc(36px * var(--figma-stage-scale)) calc(36px * var(--figma-stage-scale)) !important;
  opacity: 0.2 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.ranking .topbar,
.screen.ranking .topbar.is-dark {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

.screen.ranking .topbar__button,
.screen.ranking .topbar__slot {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.ranking .topbar__brand,
.screen.ranking .topbar__brand-lockup,
.screen.ranking .topbar__brand-image {
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.screen.screen--landing .landing__actions .cta {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.topbar__button[aria-label="back"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--figma-topbar-icon-size) !important;
  height: var(--figma-topbar-icon-size) !important;
  min-width: var(--figma-topbar-icon-size) !important;
  min-height: var(--figma-topbar-icon-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.topbar__button[aria-label="back"] .topbar__icon {
  display: block !important;
  width: var(--figma-topbar-icon-size) !important;
  height: var(--figma-topbar-icon-size) !important;
  object-fit: contain !important;
  filter: none !important;
}

.member-form-screen__body {
  padding-top: calc(var(--safe-top) + 178px) !important;
  padding-bottom: 25px !important;
}

.member-form-screen .member-line__input {
  font-variant-numeric: tabular-nums !important;
}

.member-form-screen .member-line__input--address-trigger[data-action="open-address-search"] {
  cursor: pointer !important;
  caret-color: transparent !important;
}

.member-form-screen .member-line__input[readonly],
.member-form-screen .member-line__input[aria-readonly="true"] {
  user-select: text !important;
}

.member-form-screen .member-address-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
}

.member-form-screen .member-line--address {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.member-form-screen .member-line--address .member-line__input {
  padding-right: 0 !important;
}

.member-form-screen .member-address-row__search {
  position: static !important;
  flex: 0 0 109px !important;
  width: 109px !important;
  min-width: 109px !important;
}

.member-form-screen .member-address-row__search:disabled {
  opacity: 0.42 !important;
  cursor: default !important;
}

.member-form-screen .screen__footer {
  padding-top: 10px !important;
  padding-bottom: 44px !important;
}

.register-screen__body,
.register-screen__body .page-title--brand {
  width: calc(var(--figma-stage-width) - 90px) !important;
  max-width: calc(var(--figma-stage-width) - 90px) !important;
}

.register-input {
  min-height: 58px !important;
  height: 58px !important;
}

.register-input__field {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.register-screen__body .cta {
  min-height: 60px !important;
  height: 60px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.cta,
.modal-card__button,
.modal-card__single,
.member-address-row__search,
.search-button,
.panel-button,
.community-action-sheet button,
.screen.community-me .community-feedback-dialog__button,
.screen.community-me .community-confirm-modal__button {
  --button-press-fill: 0%;
  --button-press-tint: rgba(0, 0, 0, 0);
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  opacity: 1 !important;
  background-image: linear-gradient(90deg, var(--button-press-tint), var(--button-press-tint)) !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: var(--button-press-fill) 100% !important;
  transition:
    background-size 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 220ms ease,
    box-shadow 220ms ease,
    transform 180ms ease,
    opacity 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover,
  .modal-card__button:hover,
  .modal-card__single:hover,
  .member-address-row__search:hover,
  .search-button:hover,
  .panel-button:hover,
  .community-action-sheet button:hover,
  .screen.community-me .community-feedback-dialog__button:hover,
  .screen.community-me .community-confirm-modal__button:hover {
    --button-press-fill: 42%;
    --button-press-tint: rgba(0, 0, 0, 0.16);
    opacity: 1 !important;
    filter: brightness(0.93) saturate(1.04) !important;
    box-shadow: 0 calc(10px * var(--figma-stage-scale, 1)) calc(22px * var(--figma-stage-scale, 1)) rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-1px) !important;
  }
}

.cta:active,
.modal-card__button:active,
.modal-card__single:active,
.member-address-row__search:active,
.search-button:active,
.panel-button:active,
.community-action-sheet button:active,
.screen.community-me .community-feedback-dialog__button:active,
.screen.community-me .community-confirm-modal__button:active {
  --button-press-fill: 100%;
  --button-press-tint: rgba(0, 0, 0, 0.22);
  opacity: 1 !important;
  filter: brightness(0.88) saturate(1.04) !important;
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.04), 0 calc(4px * var(--figma-stage-scale, 1)) calc(10px * var(--figma-stage-scale, 1)) rgba(0, 0, 0, 0.16) !important;
  transform: translateY(0) scale(1) !important;
}

.cta:disabled,
.modal-card__button:disabled,
.modal-card__single:disabled,
.member-address-row__search:disabled,
.search-button:disabled,
.panel-button:disabled,
.community-action-sheet button:disabled,
.screen.community-me .community-feedback-dialog__button:disabled,
.screen.community-me .community-confirm-modal__button:disabled {
  --button-press-fill: 0% !important;
  filter: none !important;
  box-shadow: none !important;
}

.topbar__button,
.screen .home-flow-nav__button {
  transition:
    background-color 220ms ease,
    filter 220ms ease,
    box-shadow 220ms ease,
    transform 180ms ease,
    opacity 180ms ease !important;
  opacity: 1 !important;
}

.topbar__button--back {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topbar__button--back .topbar__icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

@media (hover: hover) and (pointer: fine) {
  .topbar__button:hover,
  .screen .home-flow-nav__button:hover {
    background-color: rgba(0, 0, 0, 0.18) !important;
    filter: brightness(0.9) !important;
    box-shadow: 0 calc(6px * var(--figma-stage-scale, 1)) calc(14px * var(--figma-stage-scale, 1)) rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px) !important;
  }
}

.topbar__button:active,
.screen .home-flow-nav__button:active {
  background-color: rgba(0, 0, 0, 0.22) !important;
  filter: brightness(0.86) !important;
  box-shadow: 0 calc(3px * var(--figma-stage-scale, 1)) calc(8px * var(--figma-stage-scale, 1)) rgba(0, 0, 0, 0.18) !important;
  transform: translateY(0) scale(1) !important;
}

.package-choice,
.package-choice__card-image,
.package-screen__footer .cta {
  transition:
    transform 180ms ease,
    opacity 180ms ease,
    filter 180ms ease,
    background-color 180ms ease,
    color 180ms ease !important;
}

.package-choice {
  will-change: transform, opacity, filter !important;
}

.package-choice-grid.has-selection .package-choice.is-selected {
  transform: translateY(calc(-4px * var(--figma-stage-scale))) scale(1.01) !important;
}

.screen.ranking .ranking__hero {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  display: block !important;
  width: var(--figma-stage-width) !important;
  height: calc(452px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  z-index: 3 !important;
}

.screen.ranking .ranking__hero-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: var(--figma-stage-width) !important;
  height: calc(340px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  object-fit: fill !important;
  object-position: center top !important;
  user-select: none !important;
  pointer-events: none !important;
}

.screen.ranking .ranking__back {
  position: absolute !important;
  top: calc(382px * var(--figma-stage-scale)) !important;
  left: calc(12px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  z-index: 4 !important;
}

.screen.ranking .ranking__back img {
  display: block !important;
  width: calc(13.0833px * var(--figma-stage-scale)) !important;
  height: calc(24.1667px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-podium {
  position: absolute !important;
  width: calc(109px * var(--figma-stage-scale)) !important;
  height: calc(152px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  text-align: center !important;
}

.screen.ranking .ranking-podium--primary {
  top: calc(157px * var(--figma-stage-scale)) !important;
  left: calc(133px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--secondary {
  top: calc(215px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--tertiary {
  top: calc(246px * var(--figma-stage-scale)) !important;
  left: calc(250px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium__plate {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: calc(109px * var(--figma-stage-scale)) !important;
  height: calc(152px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-podium__copy {
  position: absolute !important;
  top: calc(12px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.ranking .ranking-podium--tertiary .ranking-podium__copy {
  top: calc(14px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium__copy strong {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium__copy span,
.screen.ranking .ranking-podium__copy em {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: 0 !important;
}

.screen.ranking .ranking-podium__copy span b,
.screen.ranking .ranking-podium__copy em b {
  color: #0068b7 !important;
  font-weight: 500 !important;
}

.screen.ranking .ranking-podium__medal {
  position: absolute !important;
  display: block !important;
  margin: 0 !important;
  z-index: 3 !important;
}

.screen.ranking .ranking-podium--primary .ranking-podium__medal {
  top: calc(91px * var(--figma-stage-scale)) !important;
  left: calc(33px * var(--figma-stage-scale)) !important;
  width: calc(43px * var(--figma-stage-scale)) !important;
  height: calc(61px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--secondary .ranking-podium__medal {
  top: calc(90px * var(--figma-stage-scale)) !important;
  left: calc(32px * var(--figma-stage-scale)) !important;
  width: calc(44px * var(--figma-stage-scale)) !important;
  height: calc(62px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--tertiary .ranking-podium__medal {
  top: calc(99px * var(--figma-stage-scale)) !important;
  left: calc(33px * var(--figma-stage-scale)) !important;
  width: calc(43px * var(--figma-stage-scale)) !important;
  height: calc(61px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking__sheet {
  position: absolute !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: 0 !important;
  height: calc(360px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: calc(29px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) calc(30px * var(--figma-stage-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  background: #fff !important;
  border-radius: calc(32px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) 0 0 !important;
  box-sizing: border-box !important;
  z-index: 2 !important;
}

.screen.ranking .ranking-row {
  display: grid !important;
  grid-template-columns: calc(20px * var(--figma-stage-scale)) calc(30px * var(--figma-stage-scale)) minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  min-height: calc(21px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.ranking .ranking-row + .ranking-row {
  margin-top: 0 !important;
}

.screen.ranking .ranking-row__rank,
.screen.ranking .ranking-row__name,
.screen.ranking .ranking-row__points {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-row__rank {
  width: calc(20px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.ranking .ranking-row__team {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-row__team img {
  display: block !important;
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-row__name {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.screen.ranking .ranking-row__points {
  text-align: right !important;
}

.screen.ranking .ranking-row__points strong {
  color: #0068b7 !important;
  font-weight: 500 !important;
}

.screen.ranking .ranking__pager {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(30px * var(--figma-stage-scale)) !important;
  width: calc(68px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  display: block !important;
  z-index: 2 !important;
  filter: none !important;
}

.screen.predict-screen.predict-screen--blocked {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.screen.predict-screen.predict-screen--blocked::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: calc(92px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  z-index: 6 !important;
  pointer-events: none !important;
}

.screen.predict-screen.predict-screen--blocked .topbar {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

.screen.predict-screen.predict-screen--blocked .screen__body {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.screen.predict-screen.predict-screen--blocked .predict--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.screen.predict-screen.predict-screen--blocked .hero-copy {
  position: absolute !important;
  top: calc(136px * var(--figma-stage-scale)) !important;
  left: calc(54px * var(--figma-stage-scale)) !important;
  width: calc(266px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.predict-screen.predict-screen--blocked .page-title {
  width: calc(108px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.predict-screen.predict-screen--blocked .predict-copy {
  width: calc(266px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.predict-screen.predict-screen--blocked .predict-meta {
  position: absolute !important;
  top: calc(236px * var(--figma-stage-scale)) !important;
  left: calc(15px * var(--figma-stage-scale)) !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
}

.screen.predict-screen.predict-screen--blocked .predict-meta__note {
  width: calc(116px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen.predict-screen--blocked .predict-board {
  position: absolute !important;
  top: calc(268px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(532px * var(--figma-stage-scale)) !important;
  max-height: calc(532px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 0 !important;
  background: #333 !important;
  overflow: hidden !important;
}

.screen.predict-screen.predict-screen--blocked .predict-list {
  height: 100% !important;
  max-height: calc(532px * var(--figma-stage-scale)) !important;
  padding: 0 0 calc(148px * var(--figma-stage-scale)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}

.screen.predict-screen.predict-screen--blocked .predict-list::-webkit-scrollbar {
  display: none !important;
}

.screen.predict-screen.predict-screen--blocked .predict-card {
  padding: calc(16px * var(--figma-stage-scale)) 0 0 !important;
}

.screen.predict-screen.predict-screen--blocked .predict-card__head,
.screen.predict-screen.predict-screen--blocked .predict-row,
.screen.predict-screen.predict-screen--blocked .predict-locked-card,
.screen.predict-screen.predict-screen--blocked .predict-history-row {
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.screen.predict-screen.predict-screen--blocked .predict-history-row {
  min-height: calc(53px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
}

.screen.predict-screen.predict-screen--blocked .predict-card__badge,
.screen.predict-screen.predict-screen--blocked .predict-history-row__badge {
  min-width: calc(82px * var(--figma-stage-scale)) !important;
  height: calc(29px * var(--figma-stage-scale)) !important;
  padding: 0 calc(10px * var(--figma-stage-scale)) !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen.predict-screen--blocked .screen__footer {
  position: absolute !important;
  top: auto !important;
  left: var(--figma-cta-side-gap) !important;
  right: auto !important;
  bottom: calc(104px * var(--figma-stage-scale)) !important;
  width: var(--figma-cta-width) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  background: none !important;
  overflow: visible !important;
  z-index: 7 !important;
}

.screen.predict-screen.predict-screen--blocked .screen__footer::before {
  content: "" !important;
  position: absolute !important;
  top: calc(-56px * var(--figma-stage-scale)) !important;
  left: calc(-29px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(184px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 24%, rgba(255, 255, 255, 0.68) 58%, #fff 82%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.predict-screen.predict-screen--blocked .screen__footer .cta {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--figma-cta-width) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  z-index: 1 !important;
}

.screen.predict-screen.predict-screen--blocked .predict-footer-note {
  position: absolute !important;
  top: calc(58px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(159px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  text-align: center !important;
  z-index: 7 !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

/* predict blocked final anchor refresh */
.screen.predict-screen.predict-screen--blocked .hero-copy {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.screen.predict-screen.predict-screen--blocked .screen__footer {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

.screen.lineup-screen {
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

.screen.lineup-screen .topbar,
.screen.lineup-screen .topbar.is-light {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 6 !important;
}

.screen.lineup-screen .screen__body {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.lineup-screen .lineup--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.lineup-screen .page-title {
  position: absolute !important;
  top: calc(118px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: auto !important;
  min-width: calc(180px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
}

.screen.lineup-screen .lineup-copy {
  position: absolute !important;
  top: calc(154px * var(--figma-stage-scale)) !important;
  left: calc(27px * var(--figma-stage-scale)) !important;
  width: calc(321px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  z-index: 3 !important;
}

.screen.lineup-screen .lineup-field {
  position: absolute !important;
  top: calc(230px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.screen.lineup-screen .lineup-field__image {
  position: absolute !important;
  top: calc(28px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  display: block !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(306px * var(--figma-stage-scale)) !important;
  object-fit: fill !important;
  z-index: 0 !important;
}

.screen.lineup-screen .lineup-slot {
  position: absolute !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: calc(54px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  padding-top: calc(18px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  background:
    url("../mcp/exact/lineup/lineup-slot-shadow.svg?v=20260415-1") center / calc(54px * var(--figma-stage-scale)) calc(86px * var(--figma-stage-scale)) no-repeat,
    url("../mcp/exact/lineup/lineup-slot-inner.svg?v=20260415-1") center / calc(48.7054px * var(--figma-stage-scale)) calc(78.7658px * var(--figma-stage-scale)) no-repeat,
    url("../mcp/exact/lineup/lineup-slot-shell.svg?v=20260415-1") center / calc(54px * var(--figma-stage-scale)) calc(86px * var(--figma-stage-scale)) no-repeat !important;
  box-shadow: none !important;
  z-index: 2 !important;
}

.screen.lineup-screen .lineup-slot span {
  position: relative !important;
  display: block !important;
  transform: none !important;
  opacity: 1 !important;
  color: #0068b7 !important;
  -webkit-text-fill-color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  z-index: 1 !important;
}

.screen.lineup-screen .lineup-slot--cf { top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; }
.screen.lineup-screen .lineup-slot--lf { top: calc(47px * var(--figma-stage-scale)) !important; left: calc(20px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--rf { top: calc(47px * var(--figma-stage-scale)) !important; right: calc(18px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--ss { top: calc(82px * var(--figma-stage-scale)) !important; left: calc(83px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--2b { top: calc(82px * var(--figma-stage-scale)) !important; right: calc(82px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--p { top: calc(146px * var(--figma-stage-scale)) !important; left: 50% !important; transform: translateX(-50%) !important; }
.screen.lineup-screen .lineup-slot--3b { top: calc(170px * var(--figma-stage-scale)) !important; left: calc(44px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--1b { top: calc(170px * var(--figma-stage-scale)) !important; right: calc(45px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--dh { top: calc(257px * var(--figma-stage-scale)) !important; left: calc(27px * var(--figma-stage-scale)) !important; }
.screen.lineup-screen .lineup-slot--c { top: calc(257px * var(--figma-stage-scale)) !important; left: 50% !important; transform: translateX(-50%) !important; }

.screen.lineup-screen .lineup-slot.is-assigned,
.screen.lineup-screen .lineup-slot.is-current {
  padding-top: 0 !important;
  background: none !important;
}

.screen.lineup-screen .lineup-slot__card-image {
  display: block !important;
  width: calc(54px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  border-radius: calc(4px * var(--figma-stage-scale)) !important;
  object-fit: cover !important;
}

.screen.lineup-screen .lineup-badge {
  position: absolute !important;
  top: auto !important;
  right: 0 !important;
  bottom: calc(9px * var(--figma-stage-scale)) !important;
  left: auto !important;
  width: calc(60px * var(--figma-stage-scale)) !important;
  height: calc(60px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  display: block !important;
  z-index: 3 !important;
}

.screen.lineup-screen .lineup-badge__logo {
  display: block !important;
  width: calc(60px * var(--figma-stage-scale)) !important;
  height: calc(60px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.lineup-screen .lineup-card-strip {
  position: absolute !important;
  top: calc(630px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  display: flex !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  z-index: 2 !important;
}

.screen.lineup-screen .lineup-card-strip::-webkit-scrollbar {
  display: none !important;
}

.screen.lineup-screen .lineup-card-option {
  flex: 0 0 calc(54px * var(--figma-stage-scale)) !important;
  width: calc(54px * var(--figma-stage-scale)) !important;
  min-width: calc(54px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  opacity: 1 !important;
}

.screen.lineup-screen .lineup-card-option img {
  display: block !important;
  width: calc(54px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  border-radius: calc(4px * var(--figma-stage-scale)) !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

.screen.lineup-screen .screen__footer--lineup {
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: var(--figma-stage-width) !important;
  height: calc(82px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4 !important;
}

.screen.lineup-screen .screen__footer--lineup .cta {
  width: var(--figma-stage-width) !important;
  height: calc(82px * var(--figma-stage-scale)) !important;
  min-height: calc(82px * var(--figma-stage-scale)) !important;
  border-radius: 0 !important;
}

.screen.lineup-screen--success .modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: 299px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 20 !important;
}

.screen.lineup-screen .modal-card--lineup,
.screen.lineup-screen .modal-card--lineup-success {
  width: 285px !important;
  max-width: 285px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__body,
.screen.lineup-screen .modal-card--lineup-success .modal-card__body--lineup-success {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  padding: 36px 24px 20px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 1 !important;
}

.screen.lineup-screen .modal-card--lineup-success::before,
.screen.lineup-screen .modal-card--lineup-success::after,
.screen.lineup-screen .modal-card--lineup-success .modal-card__body--lineup-success::before,
.screen.lineup-screen .modal-card--lineup-success .modal-card__body--lineup-success::after {
  content: none !important;
  display: none !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__success-copy,
.screen.lineup-screen .modal-card--lineup-success .modal-card__success-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__title,
.screen.lineup-screen .modal-card--lineup-success .modal-card__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
  text-align: center !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__caption--danger {
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
  text-align: center !important;
}

.screen.lineup-screen .modal-card--lineup-success .modal-card__eyebrow {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
  text-align: center !important;
}

.screen.lineup-screen .modal-card--lineup-success .modal-card__caption--neutral {
  margin: 0 !important;
  color: #8c8c8c !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
  text-align: center !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 calc(24px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: calc(16px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
}

.screen.lineup-screen .modal-card--lineup-success .modal-card__footer--single {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  background: #0068b7 !important;
  background-color: #0068b7 !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__button,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single--primary {
  height: 52px !important;
  min-height: 52px !important;
  border: 0 !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  font-size: 16px !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual .modal-card__button {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual .modal-card__button:not(.is-primary) {
  background: #f3f4f6 !important;
  color: #2a2a2b !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual .modal-card__button.is-primary {
  background: #0068b7 !important;
  color: #ffffff !important;
}


/* 선발 포지션 — final geometry refresh */
.screen.lineup-screen .topbar,
.screen.lineup-screen .topbar.is-light {
  top: calc(var(--safe-top) + (34px * var(--figma-stage-scale))) !important;
}

.screen.lineup-screen .lineup-slot span {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
}

.screen.lineup-screen--success .modal-backdrop {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: calc(299px * var(--figma-stage-scale)) !important;
  animation: none !important;
  opacity: 1 !important;
}

.screen.lineup-screen .modal-card--lineup,
.screen.lineup-screen .modal-card--lineup-success {
  width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  animation: none !important;
  transform: none !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__body,
.screen.lineup-screen .modal-card--lineup-success .modal-card__body--lineup-success {
  gap: calc(20px * var(--figma-stage-scale)) !important;
  padding: calc(36px * var(--figma-stage-scale)) calc(24px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__success-copy,
.screen.lineup-screen .modal-card--lineup-success .modal-card__success-copy {
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__title,
.screen.lineup-screen .modal-card--lineup-success .modal-card__title {
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__caption--danger,
.screen.lineup-screen .modal-card--lineup-success .modal-card__eyebrow,
.screen.lineup-screen .modal-card--lineup-success .modal-card__caption--neutral {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__footer--dual,
.screen.lineup-screen .modal-card--lineup-success .modal-card__footer--single {
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__button,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single--primary {
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

/* 경험 공유 목록 — body anchoring fix */
.community-screen--feed .community-screen__body {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 375px !important;
  min-height: 812px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.community-me .screen__footer {
  position: absolute !important;
  left: 45px !important;
  right: auto !important;
  bottom: 42px !important;
  width: 285px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 2 !important;
}

.community-me .screen__footer .cta {
  width: 285px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
}

.community-me__notice {
  position: static !important;
  width: 231px !important;
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 16px !important;
  letter-spacing: -0.24px !important;
  text-align: center !important;
}

/* Status-bar restore pass — final topbar/predict baseline */
.predict-screen .topbar,
.predict-screen .topbar.is-dark,
.screen.ranking .topbar,
.screen.ranking .topbar.is-dark,
.screen.lineup-screen .topbar,
.screen.lineup-screen .topbar.is-light {
  top: calc(var(--safe-top) + 34px) !important;
}

.play-screen-direct .topbar {
  top: calc(var(--safe-top) + (70px * var(--figma-stage-scale))) !important;
}

.predict-screen.predict-screen--main .hero-copy,
.predict-screen.predict-screen--picked .hero-copy {
  top: calc(138px * var(--figma-stage-scale)) !important;
}

.predict-screen.predict-screen--main .predict-meta,
.predict-screen.predict-screen--picked .predict-meta {
  top: calc(238px * var(--figma-stage-scale)) !important;
}

.predict-screen.predict-screen--main .predict-board,
.predict-screen.predict-screen--picked .predict-board {
  top: calc(266px * var(--figma-stage-scale)) !important;
}

.predict-screen.predict-screen--main .screen__footer::before,
.predict-screen.predict-screen--picked .screen__footer::before {
  top: calc(-42px * var(--figma-stage-scale)) !important;
  height: calc(170px * var(--figma-stage-scale)) !important;
}

/* Predict board refresh from Figma 248:23288 / 461:30211 */
.predict-screen .predict-meta {
  justify-content: flex-start !important;
}

.predict-screen .predict-meta__note {
  width: auto !important;
}

.predict-board.predict-board--latest {
  border: 1px solid #8c8c8c !important;
  border-radius: 8px !important;
  background: #333333 !important;
  overflow: hidden !important;
}

.predict-board.predict-board--latest .predict-board__scroll {
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}

.predict-board.predict-board--latest .predict-board__scroll::-webkit-scrollbar {
  display: none !important;
}

.predict-board.predict-board--latest .predict-board__filter {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 12px 29px 0 !important;
  background: #333333 !important;
}

.predict-filter {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.predict-filter__label {
  color: #b7b7b7 !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 16px !important;
  letter-spacing: -0.24px !important;
}

.predict-filter__checkbox {
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  border: 1.5px solid #b7b7b7 !important;
  border-radius: 2px !important;
  background: transparent !important;
  position: relative !important;
  cursor: pointer !important;
}

.predict-filter__checkbox:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 45% !important;
  width: 5px !important;
  height: 9px !important;
  border-right: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.predict-filter__checkbox:checked {
  background: #00b4ed !important;
  border-color: #00b4ed !important;
}

.predict-board.predict-board--latest .predict-board__list {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding-bottom: 160px !important;
  background: #333333 !important;
}

.predict-section {
  background: #333333 !important;
  border-bottom: 1px solid #8c8c8c !important;
  padding: 16px 0 !important;
}

.predict-section__head {
  width: 285px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  cursor: pointer !important;
}

.predict-section__date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  line-height: 20px !important;
  letter-spacing: -0.56px !important;
}

.predict-section__today {
  color: #00b4ed !important;
  font-weight: 500 !important;
}

.predict-section__status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.predict-section__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 82px !important;
  height: 29px !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
  box-sizing: border-box !important;
}

.predict-section__badge--success {
  background: #336cff !important;
}

.predict-section__badge--failure {
  background: #ff4343 !important;
}

.predict-section__badge--complete {
  background: #00b4ed !important;
}

.predict-section__badge--available {
  background: #8c8c8c !important;
}

.predict-section__chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}

.predict-section__chevron img {
  width: 7.5333px !important;
  height: 13.3667px !important;
  display: block !important;
  transform: rotate(90deg) !important;
  transform-origin: center center !important;
  transition: transform 180ms ease !important;
}

.predict-section__chevron.is-open img {
  transform: rotate(-90deg) !important;
}

.predict-section__rows {
  width: 285px !important;
  margin: 12px auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.predict-matchup {
  width: 285px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.predict-matchup__side {
  min-height: 48px !important;
  padding: 4px 16px !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #2a2a2b !important;
  cursor: pointer !important;
}

.predict-matchup__side--left {
  border-right: 1px solid #8c8c8c !important;
}

.predict-matchup__side[disabled] {
  cursor: default !important;
  opacity: 1 !important;
}

.predict-matchup__side.is-selected {
  background: #00b4ed !important;
}

.predict-matchup__side.is-selected .predict-matchup__label {
  color: #ffffff !important;
}

.predict-matchup__content {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.predict-matchup__content--left {
  justify-content: flex-start !important;
}

.predict-matchup__content--right {
  justify-content: flex-end !important;
}

.predict-matchup__logo {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  flex: 0 0 40px !important;
}

.predict-matchup__label {
  min-width: 36px !important;
  color: #2a2a2b !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 21px !important;
  letter-spacing: -0.32px !important;
  white-space: nowrap !important;
}

/* Predict / lineup rebuild from Figma 243:8740 / 248:27967 / 260:47621 */
.screen.predict-screen.predict-screen--main .screen__body,
.screen.predict-screen.predict-screen--picked .screen__body,
.screen.predict-screen.predict-screen--main .predict--figma,
.screen.predict-screen.predict-screen--picked .predict--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.screen.predict-screen .game-hero,
.screen.lineup-screen .game-hero {
  position: absolute !important;
  top: calc(148px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  z-index: 6 !important;
}

.screen.predict-screen .game-hero__copy,
.screen.lineup-screen .game-hero__copy {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  min-width: 0 !important;
  max-width: calc(196px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .game-hero__title,
.screen.lineup-screen .game-hero__title {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.screen.predict-screen .game-hero__note,
.screen.lineup-screen .game-hero__note {
  margin: 0 !important;
  color: #b7b7b7 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.predict-screen .game-hero__description,
.screen.lineup-screen .game-hero__description {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.predict-screen .game-hero__shortcut,
.screen.lineup-screen .game-hero__shortcut {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: calc(146px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #0068b7 !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.predict-screen.predict-screen--main .predict-board.predict-board--latest,
.screen.predict-screen.predict-screen--picked .predict-board.predict-board--latest,
.screen.predict-screen.predict-screen--blocked .predict-board.predict-board--latest {
  position: absolute !important;
  top: calc(266px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(546px * var(--figma-stage-scale)) !important;
  max-height: calc(546px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border: 1px solid #8c8c8c !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #333333 !important;
  overflow: hidden !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__filter {
  padding: calc(12px * var(--figma-stage-scale)) calc(29px * var(--figma-stage-scale)) 0 !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__list {
  min-height: 100% !important;
  padding-bottom: calc(160px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-filter {
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-filter__label {
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-filter__checkbox {
  width: calc(18px * var(--figma-stage-scale)) !important;
  height: calc(18px * var(--figma-stage-scale)) !important;
  border-width: calc(1.5px * var(--figma-stage-scale)) !important;
  border-radius: calc(2px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-filter__checkbox:checked::after {
  width: calc(5px * var(--figma-stage-scale)) !important;
  height: calc(9px * var(--figma-stage-scale)) !important;
  border-right-width: calc(2px * var(--figma-stage-scale)) !important;
  border-bottom-width: calc(2px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section {
  padding: calc(16px * var(--figma-stage-scale)) 0 !important;
}

.screen.predict-screen .predict-section__head,
.screen.predict-screen .predict-section__rows {
  width: calc(285px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__rows {
  margin-top: calc(12px * var(--figma-stage-scale)) !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__date {
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__badge {
  min-width: calc(82px * var(--figma-stage-scale)) !important;
  height: calc(29px * var(--figma-stage-scale)) !important;
  padding: 0 calc(10px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__chevron {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(24px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__chevron img {
  width: calc(7.5333px * var(--figma-stage-scale)) !important;
  height: calc(13.3667px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup {
  width: calc(285px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__side {
  min-height: calc(48px * var(--figma-stage-scale)) !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__content {
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__logo {
  width: calc(40px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(40px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-matchup__label {
  min-width: calc(36px * var(--figma-stage-scale)) !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-action {
  position: absolute !important;
  top: calc(670px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(82px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 8 !important;
}

.screen.predict-screen .predict-action::before {
  content: "" !important;
  position: absolute !important;
  top: calc(-67px * var(--figma-stage-scale)) !important;
  left: calc(-29px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(209px * var(--figma-stage-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 22%, rgba(255, 255, 255, 0.78) 58%, #ffffff 84%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.predict-screen .predict-action .cta {
  position: relative !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  z-index: 1 !important;
}

.screen.predict-screen .predict-action .predict-footer-note {
  position: absolute !important;
  top: calc(64px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(159px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  color: #ff0000 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  z-index: 1 !important;
}

.screen.lineup-screen .lineup-field {
  top: calc(257px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(343px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-field__image {
  top: calc(31px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-badge {
  top: calc(263px * var(--figma-stage-scale)) !important;
  right: 0 !important;
  bottom: auto !important;
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-badge__logo {
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-card-strip {
  top: calc(616px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(86px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
}

.screen.lineup-screen .lineup-action {
  position: absolute !important;
  top: calc(730px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: var(--figma-stage-width) !important;
  height: calc(82px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4 !important;
}

.screen.lineup-screen .lineup-action .cta {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
  border-radius: 0 !important;
}

/* EOF exact lock: collection / predict / lineup / community-me */
.screen.collection-screen {
  --collection-scale: var(--figma-stage-scale);
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background: #0068b7 !important;
}

.screen.predict-screen,
.screen.lineup-screen {
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
}

.screen.collection-screen .collection-screen__pattern {
  inset: 0 !important;
  background-size: calc(40px * var(--collection-scale)) calc(32px * var(--collection-scale)) !important;
  opacity: 0.2 !important;
}

.screen.collection-screen .collection-screen__team-badge {
  position: absolute !important;
  top: calc(var(--safe-top) + (128px * var(--collection-scale))) !important;
  left: 50% !important;
  width: calc(68px * var(--collection-scale)) !important;
  height: calc(29px * var(--collection-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border-radius: calc(8px * var(--collection-scale)) !important;
  z-index: 5 !important;
}

.screen.collection-screen .collection-screen__summary-card {
  position: absolute !important;
  top: calc(var(--safe-top) + (143px * var(--collection-scale))) !important;
  left: calc(16px * var(--collection-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(343px * var(--collection-scale)) !important;
  min-height: calc(143px * var(--collection-scale)) !important;
  margin: 0 !important;
  padding: calc(37px * var(--collection-scale)) calc(29px * var(--collection-scale)) calc(29px * var(--collection-scale)) !important;
  border-radius: calc(8px * var(--collection-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  z-index: 4 !important;
}

.screen.collection-screen .collection-screen__title {
  width: 100% !important;
  margin: 0 !important;
  color: #0068b7 !important;
  font-size: calc(24px * var(--collection-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--collection-scale)) !important;
  letter-spacing: calc(-0.96px * var(--collection-scale)) !important;
  text-align: center !important;
}

.screen.collection-screen .collection-screen__summary-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--collection-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--collection-scale)) !important;
  letter-spacing: calc(-0.32px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-screen__summary-head strong {
  font-weight: 700 !important;
}

.screen.collection-screen .collection-screen__logo-rail {
  position: absolute !important;
  top: calc(var(--safe-top) + (317px * var(--collection-scale))) !important;
  left: calc(16px * var(--collection-scale)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(343px * var(--collection-scale)) !important;
  z-index: 4 !important;
}

.screen.collection-screen .collection-screen__logo-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(57px * var(--collection-scale)) !important;
  height: calc(48px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-screen__logo-mark img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.screen.collection-screen .collection-panel {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: calc(405px * var(--collection-scale)) !important;
  margin: 0 !important;
  transform: translateY(var(--collection-sheet-drag, 0px)) !important;
  transition: height 220ms ease, transform 180ms ease !important;
  z-index: 5 !important;
}

.screen.collection-screen .collection-panel.is-expanded {
  height: calc(699px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-panel.is-dragging {
  transition: none !important;
}

.screen.collection-screen .collection-panel__tabs {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: calc(343px * var(--collection-scale)) !important;
  height: calc(45px * var(--collection-scale)) !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
  z-index: 2 !important;
}

.screen.collection-screen .collection-panel__tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(4px * var(--collection-scale)) !important;
  width: calc(68px * var(--collection-scale)) !important;
  height: calc(45px * var(--collection-scale)) !important;
  margin: 0 !important;
  padding: calc(4px * var(--collection-scale)) 0 !important;
  border-radius: calc(8px * var(--collection-scale)) calc(8px * var(--collection-scale)) 0 0 !important;
  background: #e8e8e8 !important;
  box-shadow: none !important;
  flex: 0 0 auto !important;
}

.screen.collection-screen .collection-panel__tab.is-active {
  background: #ffffff !important;
}

.screen.collection-screen .collection-panel__tab img {
  width: calc(20px * var(--collection-scale)) !important;
  height: calc(20px * var(--collection-scale)) !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.screen.collection-screen .collection-panel__tab-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.screen.collection-screen .collection-panel__tab-copy strong,
.screen.collection-screen .collection-panel__tab-copy em {
  font-style: normal !important;
  white-space: nowrap !important;
}

.screen.collection-screen .collection-panel__tab-copy strong {
  color: #111111 !important;
  font-size: calc(16px * var(--collection-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(18px * var(--collection-scale)) !important;
  letter-spacing: calc(-0.32px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-panel__tab-copy em {
  color: #0068b7 !important;
  font-size: calc(12px * var(--collection-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--collection-scale)) !important;
  letter-spacing: calc(-0.24px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-panel__body {
  position: relative !important;
  width: 100% !important;
  height: calc(360px * var(--collection-scale)) !important;
  margin: 0 !important;
  padding: calc(20px * var(--collection-scale)) calc(15px * var(--collection-scale)) calc(43px * var(--collection-scale)) !important;
  border-radius: calc(16px * var(--collection-scale)) calc(16px * var(--collection-scale)) 0 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  transition: height 220ms ease !important;
}

.screen.collection-screen .collection-panel.is-expanded .collection-panel__body {
  height: calc(654px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-panel__handle {
  position: relative !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(20px * var(--collection-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  touch-action: none !important;
  cursor: ns-resize !important;
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
}

.screen.collection-screen .collection-panel__handle::before {
  content: '' !important;
  display: block !important;
  width: calc(40px * var(--collection-scale)) !important;
  height: calc(4px * var(--collection-scale)) !important;
  border-radius: calc(999px * var(--collection-scale)) !important;
  background: #b7b7b7 !important;
}

.screen.collection-screen .collection-panel__viewport {
  width: calc(344px * var(--collection-scale)) !important;
  height: calc(274px * var(--collection-scale)) !important;
  margin: calc(19px * var(--collection-scale)) auto 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.screen.collection-screen .collection-panel.is-expanded .collection-panel__viewport {
  height: calc(568px * var(--collection-scale)) !important;
}

.screen.collection-screen .collection-panel__viewport::-webkit-scrollbar {
  display: none !important;
}

.screen.collection-screen .collection-panel__grid {
  display: grid !important;
  grid-template-columns: repeat(4, calc(80px * var(--collection-scale))) !important;
  column-gap: calc(8px * var(--collection-scale)) !important;
  row-gap: calc(20px * var(--collection-scale)) !important;
  justify-content: center !important;
  width: calc(344px * var(--collection-scale)) !important;
  margin: 0 !important;
}

.screen.collection-screen .collection-panel__card {
  position: relative !important;
  width: calc(80px * var(--collection-scale)) !important;
  height: calc(127px * var(--collection-scale)) !important;
  justify-self: center !important;
}

.screen.collection-screen .collection-card__frame {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: calc(1.5px * var(--collection-scale)) solid #0068b7 !important;
  border-radius: calc(8px * var(--collection-scale)) !important;
  background: #ffffff !important;
}

.screen.collection-screen .collection-card__photo-wrap {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
}

.screen.collection-screen .collection-card__photo-wrap::after {
  content: '' !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: calc(44px * var(--collection-scale)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 104, 183, 0.08) 100%) !important;
  pointer-events: none !important;
}

.screen.collection-screen .collection-card__photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: scale(1.01) !important;
}

.screen.collection-screen .collection-card__badges {
  position: absolute !important;
  left: calc(4px * var(--collection-scale)) !important;
  right: calc(4px * var(--collection-scale)) !important;
  bottom: calc(28px * var(--collection-scale)) !important;
  display: flex !important;
  gap: calc(2px * var(--collection-scale)) !important;
  z-index: 2 !important;
}

.screen.collection-screen .collection-card__badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(10px * var(--collection-scale)) !important;
  padding: calc(2px * var(--collection-scale)) calc(4px * var(--collection-scale)) !important;
  border-radius: calc(8px * var(--collection-scale)) !important;
  background: #00b4ed !important;
  color: #ffffff !important;
  font-size: calc(6px * var(--collection-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(6px * var(--collection-scale)) !important;
  letter-spacing: calc(-0.12px * var(--collection-scale)) !important;
  white-space: nowrap !important;
}

.screen.collection-screen .collection-card__namebar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(24px * var(--collection-scale)) !important;
  background: #ffffff !important;
  border-radius: 0 0 calc(8px * var(--collection-scale)) calc(8px * var(--collection-scale)) !important;
  z-index: 2 !important;
}

.screen.collection-screen .collection-card__name {
  color: #0068b7 !important;
  font-size: calc(12px * var(--collection-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--collection-scale)) !important;
  text-align: center !important;
}

/* Drawer final pass: left menu / right mypage */
.app-drawer__panel--menu,
.app-drawer__panel--mypage {
  background: #ffffff !important;
  grid-template-rows: auto 1fr auto !important;
}

.app-drawer__panel--menu .drawer-hero,
.app-drawer__panel--mypage .drawer-hero {
  width: calc(343px * var(--figma-stage-scale)) !important;
  padding: calc(var(--safe-top) + 100px) 0 0 !important;
}

.app-drawer__panel--menu .app-drawer__body,
.app-drawer__panel--mypage .app-drawer__body {
  width: calc(343px * var(--figma-stage-scale)) !important;
  padding: calc(41px * var(--figma-stage-scale)) 0 calc(24px * var(--figma-stage-scale)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.app-drawer__panel--menu .app-drawer__body::-webkit-scrollbar,
.app-drawer__panel--mypage .app-drawer__body::-webkit-scrollbar {
  display: none !important;
}

.app-drawer__panel--menu .app-drawer__footer {
  padding: 0 0 calc(38px * var(--figma-stage-scale)) !important;
}

.app-drawer__panel--mypage .app-drawer__footer--logout {
  padding: 0 0 calc(90px * var(--figma-stage-scale)) !important;
}

.drawer-profile--logged-out {
  display: block !important;
}

.drawer-login-prompt {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.drawer-login-prompt strong,
.drawer-login-prompt h1 {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  letter-spacing: -0.96px !important;
}

.drawer-login-prompt__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
}

.drawer-login-prompt__icon .topbar__icon {
  width: 28px !important;
  height: 28px !important;
}

.drawer-menu {
  display: grid !important;
  width: 100% !important;
  gap: 0 !important;
}

.drawer-menu .menu-disclosure {
  border-bottom: 1px solid #2a2a2b !important;
}

.drawer-menu .menu-disclosure--link {
  border-bottom: 1px solid #2a2a2b !important;
}

.drawer-menu .menu-disclosure:last-child,
.drawer-menu .menu-disclosure--link:last-child {
  border-bottom: 1px solid #2a2a2b !important;
}

.drawer-menu .menu-row {
  min-height: calc(55px * var(--figma-stage-scale)) !important;
  padding: calc(15px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.drawer-menu .menu-row strong {
  color: #2a2a2b !important;
  font-size: calc(18px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(24px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.36px * var(--figma-stage-scale)) !important;
}

.drawer-menu .menu-row.is-active {
  background: rgba(0, 104, 183, 0.12) !important;
}

.drawer-menu .menu-row__chevron {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.drawer-menu .menu-disclosure__panel {
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
}

.drawer-menu .menu-disclosure.is-open .menu-disclosure__panel {
  padding: calc(14px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 !important;
}

.drawer-menu .menu-submenu__link {
  width: auto !important;
  min-height: calc(28px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  color: #8c8c8c !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(22px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.drawer-menu .menu-submenu__link span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: calc(28px * var(--figma-stage-scale)) !important;
  padding: 0 0 calc(5px * var(--figma-stage-scale)) !important;
  border-bottom: calc(0.7px * var(--figma-stage-scale)) solid #8c8c8c !important;
}

.drawer-menu > .menu-disclosure:last-child > .menu-row,
.drawer-menu > .menu-disclosure--link:last-child > .menu-row {
  border-bottom: 0 !important;
}

.drawer-menu > .menu-disclosure:last-child.is-open .menu-submenu__link:last-child span {
  border-bottom: 0 !important;
}

.menu-row--drawer-link {
  justify-content: flex-start !important;
  align-items: center !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
}

.menu-row--drawer-link strong {
  color: #2a2a2b !important;
}

.menu-row--drawer-link.is-active {
  background: rgba(0, 104, 183, 0.12) !important;
}

.app-drawer__footer--logout {
  padding: 0 0 90px !important;
  display: flex !important;
  justify-content: center !important;
}

.drawer-logout {
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f0f0f0 !important;
  color: #8c8c8c !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.app-drawer__panel--menu .app-drawer__footer .cta {
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
}

@media (min-width: 1280px) {
  .mockup-shell {
    grid-template-columns: 320px var(--device-width) var(--device-width) !important;
    gap: 16px !important;
  }

  .desktop-sitemap {
    width: 320px !important;
    max-height: calc(100vh - 64px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    scrollbar-width: none !important;
  }

  .desktop-sitemap::-webkit-scrollbar {
    display: none !important;
  }

  .desktop-sitemap__header {
    margin-bottom: 18px !important;
  }

  .desktop-sitemap__layout {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: start !important;
  }

  .desktop-sitemap__rail-label {
    margin: 0 0 10px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
  }

  .desktop-sitemap__popup-group + .desktop-sitemap__popup-group {
    margin-top: 12px !important;
  }

  .desktop-sitemap__popup-group h3 {
    margin: 0 0 6px !important;
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .desktop-sitemap__popup-links {
    display: grid !important;
    gap: 6px !important;
  }

  .desktop-sitemap__popup-link {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  .desktop-sitemap__main {
    min-width: 0 !important;
  }

  .desktop-sitemap__group + .desktop-sitemap__group {
    margin-top: 16px !important;
  }

  .desktop-sitemap__group h3 {
    margin: 0 0 8px !important;
  }

  .desktop-sitemap__subgroup + .desktop-sitemap__subgroup {
    margin-top: 12px !important;
  }

  .desktop-sitemap__subgroup-title {
    margin: 0 0 6px !important;
    color: rgba(255, 255, 255, 0.56) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
  }

  .desktop-sitemap__links {
    display: grid !important;
    gap: 6px !important;
  }

  .desktop-sitemap__link {
    display: block !important;
    padding: 10px 11px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .desktop-sitemap__link.is-active,
  .desktop-sitemap__popup-link.is-active {
    background: rgba(0, 104, 183, 0.45) !important;
  }
}

.screen.predict-screen .screen__body,
.screen.predict-screen .predict--figma,
.screen.lineup-screen .screen__body,
.screen.lineup-screen .lineup--figma {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
}

.screen.predict-screen .predict-board.predict-board--latest {
  top: calc(266px * var(--figma-stage-scale)) !important;
  height: calc(546px * var(--figma-stage-scale)) !important;
  max-height: calc(546px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__scroll {
  position: absolute !important;
  inset: calc(47px * var(--figma-stage-scale)) 0 0 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__scroll::-webkit-scrollbar {
  display: none !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__filter {
  position: absolute !important;
  top: calc(12px * var(--figma-stage-scale)) !important;
  right: calc(23px * var(--figma-stage-scale)) !important;
  left: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  width: calc(170px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2 !important;
}

.screen.predict-screen .predict-board.predict-board--latest .predict-board__list {
  min-height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: calc(180px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.screen.predict-screen .predict-section__status {
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__date {
  display: inline-flex !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
}

.screen.predict-screen .predict-section__today {
  color: #00b4ed !important;
}

.screen.predict-screen .predict-section__badge--available {
  background: #cfcfcf !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-section__badge--complete {
  background: #1ac5ff !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-section__badge--success {
  background: #2f70ff !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-section__badge--failure {
  background: #ff5b63 !important;
  color: #ffffff !important;
}

.screen.predict-screen .predict-action {
  top: auto !important;
  bottom: calc(60px * var(--figma-stage-scale)) !important;
}

.screen.lineup-screen .lineup-card-strip {
  top: auto !important;
  bottom: calc(110px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.screen.lineup-screen .lineup-card-strip::-webkit-scrollbar {
  display: none !important;
}

.screen.lineup-screen .lineup-action {
  top: auto !important;
  bottom: 0 !important;
}

.screen.lineup-screen .modal-card__title,
.screen.lineup-screen .modal-card__caption,
.screen.community-me .community-confirm-modal__title,
.screen.community-me .community-confirm-modal__caption {
  text-align: center !important;
}

.screen.lineup-screen--success .modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.screen.lineup-screen--confirm .modal-card--lineup,
.screen.lineup-screen--success .modal-card--lineup-success {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
}

.screen.lineup-screen .modal-card--lineup .modal-card__button,
.screen.lineup-screen .modal-card--lineup-success .modal-card__single,
.screen.community-me .community-confirm-modal__button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.screen.community-me {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

.screen.community-me .community-me__back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: calc(var(--safe-top) + (36px * var(--figma-stage-scale))) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

.screen.community-me .community-me__back img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.screen.community-me .community-me__body {
  position: relative !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  min-height: var(--mockup-stage-height) !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.screen.community-me .page-title {
  position: absolute !important;
  top: calc(148px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(311px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  color: #0068b7 !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
}

.screen.community-me .community-me__field--title {
  position: absolute !important;
  top: calc(203px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.screen.community-me .community-me__field strong {
  padding: 0 calc(4px * var(--figma-stage-scale)) !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__title-input {
  height: calc(37px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) !important;
  border-bottom: 1px solid #8c8c8c !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__editor {
  position: absolute !important;
  top: calc(286px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: 100% !important;
  margin-top: 0 !important;
}

.screen.community-me .community-me__editor-box {
  position: relative !important;
  width: 100% !important;
  min-height: calc(260px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #f0f0f0 !important;
  overflow: hidden !important;
}

.screen.community-me .community-me__editor-guidelines {
  position: absolute !important;
  inset: calc(8px * var(--figma-stage-scale)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  pointer-events: none !important;
}

.screen.community-me .community-me__editor-guidelines p {
  margin: 0 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.community-me .community-me__textarea {
  position: relative !important;
  min-height: calc(244px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: left !important;
  resize: none !important;
  z-index: 1 !important;
}

.screen.community-me .community-me__editor > p {
  margin: calc(4px * var(--figma-stage-scale)) calc(4px * var(--figma-stage-scale)) 0 0 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: right !important;
}

.screen.community-me .community-me__upload {
  position: absolute !important;
  top: calc(566px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: calc(80px * var(--figma-stage-scale)) !important;
  height: calc(80px * var(--figma-stage-scale)) !important;
  margin-top: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__upload-preview,
.screen.community-me .community-me__upload-preview--sample {
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__upload-icon img {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__upload-action {
  top: calc(-6px * var(--figma-stage-scale)) !important;
  right: calc(-6px * var(--figma-stage-scale)) !important;
  bottom: auto !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__upload-action img {
  width: 100% !important;
  height: 100% !important;
}

.screen.community-me .screen__footer {
  position: absolute !important;
  top: auto !important;
  left: 50% !important;
  bottom: calc(90px * var(--figma-stage-scale)) !important;
  display: block !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  background: none !important;
  z-index: 3 !important;
}

.screen.community-me .screen__footer .cta {
  display: flex !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 calc(16px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-me__notice {
  width: 100% !important;
  margin: calc(12px * var(--figma-stage-scale)) 0 0 !important;
  color: #ff0000 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.community-me .modal-backdrop--community {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
}

.screen.community-me .community-sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 28 !important;
}

.screen.community-me .community-action-sheet {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(31px * var(--figma-stage-scale)) !important;
  width: calc(359px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  z-index: 30 !important;
}

.screen.community-me .community-confirm-modal {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  padding-top: calc(36px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  z-index: 7 !important;
}

.screen.community-me .community-confirm-modal__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
}

.screen.community-me .community-confirm-modal__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-confirm-modal__caption {
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-confirm-modal__actions {
  display: flex !important;
  width: 100% !important;
}

.screen.community-me .community-confirm-modal__button {
  flex: 1 1 50% !important;
  width: 50% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f0f0f0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.community-me .community-confirm-modal__button.is-primary {
  background: #0068b7 !important;
  color: #ffffff !important;
}

.screen.community-me .community-success-toast {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(160px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #f7f7f7 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(2px) !important;
  z-index: 8 !important;
}

/* Predict / lineup hero text exact lock from Figma MCP 381:29083 / 387:29871 / 260:48980 */
.screen.predict-screen .game-hero,
.screen.lineup-screen .game-hero {
  position: absolute !important;
  top: calc(148px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(94px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  z-index: 6 !important;
}

.screen.predict-screen .game-hero__copy,
.screen.lineup-screen .game-hero__copy {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  width: calc(226px * var(--figma-stage-scale)) !important;
  min-width: 0 !important;
  max-width: none !important;
}

.screen.predict-screen .game-hero__title,
.screen.lineup-screen .game-hero__title,
.screen.predict-screen .game-hero__note,
.screen.lineup-screen .game-hero__note {
  width: 100% !important;
}

.screen.predict-screen .game-hero__description,
.screen.lineup-screen .game-hero__description {
  width: calc(300px * var(--figma-stage-scale)) !important;
  max-width: none !important;
  min-width: 0 !important;
}

.screen.lineup-screen .game-hero__description {
  white-space: nowrap !important;
}

.screen.predict-screen .game-hero__shortcut,
.screen.lineup-screen .game-hero__shortcut {
  position: absolute !important;
  top: 0 !important;
  left: calc(204px * var(--figma-stage-scale)) !important;
  min-width: 0 !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  transform: none !important;
}

.screen.lineup-screen--success .modal-card--lineup-success .modal-card__success-copy,
.screen.lineup-screen--confirm .modal-card--lineup .modal-card__success-copy {
  width: 100% !important;
}

.screen.lineup-screen--success .modal-card--lineup-success .modal-card__eyebrow,
.screen.lineup-screen--success .modal-card--lineup-success .modal-card__title,
.screen.lineup-screen--success .modal-card--lineup-success .modal-card__caption--neutral,
.screen.lineup-screen--success .modal-card--lineup-success .modal-card__single {
  width: 100% !important;
  margin: 0 !important;
  text-align: center !important;
}

/* Community upload feedback + ranking cleanup */
.screen.community-me .community-action-sheet {
  align-items: center !important;
}

.screen.community-me .community-action-sheet__group,
.screen.community-me .community-action-sheet__cancel {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
}

.screen.community-me .community-action-sheet__group {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
  background: rgba(42, 42, 43, 0.4) !important;
}

.screen.community-me .community-action-sheet__option,
.screen.community-me .community-action-sheet__cancel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0 !important;
  text-align: center !important;
}

.screen.community-me .community-action-sheet__option {
  background: transparent !important;
  background-image: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.screen.community-me .community-action-sheet__group > .community-action-sheet__option:first-child {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.screen.community-me .community-action-sheet__group > .community-action-sheet__option:last-child {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.screen.community-me .community-action-sheet__option:hover,
.screen.community-me .community-action-sheet__option:active,
.screen.community-me .community-action-sheet__option:focus-visible {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.screen.community-me .community-action-sheet__separator {
  display: block !important;
  width: 100% !important;
  height: 0.5px !important;
  min-height: 0.5px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(42, 42, 43, 0.4) !important;
  border: 0 !important;
  flex: 0 0 auto !important;
}

.screen.community-me .community-feedback-dialog {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(20px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  padding-top: calc(36px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  z-index: 7 !important;
}

.screen.community-me .community-feedback-dialog__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
}

.screen.community-me .community-feedback-dialog__title {
  width: 100% !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.community-me .community-feedback-dialog__caption {
  width: 100% !important;
  margin: 0 !important;
  color: #ff0000 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.community-me .community-feedback-dialog__actions {
  display: flex !important;
  width: 100% !important;
}

.screen.community-me .community-feedback-dialog__button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 50% !important;
  width: 50% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f0f0f0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.community-me .community-feedback-dialog__button--primary {
  background: #0068b7 !important;
  color: #ffffff !important;
}

.screen.community-me .community-feedback-toast {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(160px * var(--figma-stage-scale)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(37px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #f7f7f7 !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
  backdrop-filter: blur(2px) !important;
  z-index: 8 !important;
}

.screen.ranking .ranking__hero-image {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.screen.ranking .ranking-row__team {
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-row__team img {
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

/* Shared dialog overlay ordering */
.screen .modal-backdrop.modal-backdrop--dialog {
  z-index: 70 !important;
}

/* Shared dual-action modal module from Figma popup_1 (103:1789) */
.screen .modal-card.modal-card--dual-action {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  max-width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
  transform: translate(-50%, -50%) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  z-index: 71 !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__body--dual-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: calc(36px * var(--figma-stage-scale)) calc(24px * var(--figma-stage-scale)) calc(20px * var(--figma-stage-scale)) !important;
  background: #ffffff !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__copy--dual-action {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: 100% !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__title {
  width: 100% !important;
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__caption {
  width: 100% !important;
  margin: 0 !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__caption--alert,
.screen .modal-card.modal-card--dual-action .modal-card__caption--danger {
  color: #ff0000 !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__footer--dual-action {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: linear-gradient(90deg, #f0f0f0 0 50%, #0068b7 50% 100%) !important;
  box-sizing: border-box !important;
  border-radius: 0 0 calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  overflow: hidden !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action:not(.is-primary) {
  background: transparent !important;
  color: #2a2a2b !important;
}

.screen .modal-card.modal-card--dual-action .modal-card__button--dual-action.is-primary {
  background: transparent !important;
  color: #ffffff !important;
}

/* Predict viewport width fix: keep the screen body on full stage width */
.screen.predict-screen .screen__body,
.screen.predict-screen .predict--figma {
  display: block !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  flex: none !important;
}

/* Ranking exact rebuild — Figma 198:4260 */
.screen.ranking {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  height: var(--mockup-stage-height) !important;
  margin: 0 !important;
  background: #0068b7 !important;
  overflow: hidden !important;
}

.screen.ranking .topbar,
.screen.ranking .topbar.is-dark {
  top: calc(var(--safe-top) + 34px) !important;
  z-index: 8 !important;
}

.screen.ranking .ranking-screen__pattern {
  position: absolute !important;
  inset: 0 !important;
  background-color: #0068b7 !important;
  background-image: url("../mcp/exact/ranking/ranking-pattern-exact.png?v=20260415-1") !important;
  background-repeat: repeat !important;
  background-position: left top !important;
  background-size: calc(36px * var(--figma-stage-scale)) calc(36px * var(--figma-stage-scale)) !important;
  opacity: 0.2 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.screen.ranking .ranking-screen__hero {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

.screen.ranking .ranking-podium {
  position: absolute !important;
  width: calc(109px * var(--figma-stage-scale)) !important;
  height: calc(153px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.ranking .ranking-podium--primary {
  top: calc(135px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.screen.ranking .ranking-podium--secondary {
  top: calc(191px * var(--figma-stage-scale)) !important;
  left: calc(16px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium--tertiary {
  top: calc(225px * var(--figma-stage-scale)) !important;
  right: calc(16px * var(--figma-stage-scale)) !important;
  left: auto !important;
}

.screen.ranking .ranking-podium__banner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  object-fit: fill !important;
  user-select: none !important;
  pointer-events: none !important;
}

.screen.ranking .ranking-podium__content {
  position: absolute !important;
  top: calc(20px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: calc(4px * var(--figma-stage-scale)) !important;
  width: auto !important;
  min-width: max-content !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  text-shadow: 0 calc(2px * var(--figma-stage-scale)) calc(2px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.ranking .ranking-podium__points {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: 0 !important;
}

.screen.ranking .ranking-podium__name {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-podium__logo {
  width: calc(43px * var(--figma-stage-scale)) !important;
  height: calc(40px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
  margin-top: 0 !important;
}

.screen.ranking .ranking-screen__cta {
  position: absolute !important;
  top: calc(387px * var(--figma-stage-scale)) !important;
  left: 0 !important;
  width: var(--figma-stage-width) !important;
  height: calc(38px * var(--figma-stage-scale)) !important;
  z-index: 3 !important;
  filter: drop-shadow(0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25)) !important;
}

.screen.ranking .ranking-screen__cta-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 4 !important;
}

.screen.ranking .ranking-screen__cta-back img {
  width: calc(7.333px * var(--figma-stage-scale)) !important;
  height: calc(13.333px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-screen__sheet {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  width: var(--figma-stage-width) !important;
  height: calc(282px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: calc(32px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) 0 0 !important;
  box-sizing: border-box !important;
  transform: translateY(var(--ranking-sheet-drag, 0px)) !important;
  transition: height 220ms ease, transform 180ms ease !important;
  z-index: 4 !important;
}

.screen.ranking .ranking-screen__sheet.is-expanded {
  height: calc(430px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__sheet.is-dragging {
  transition: none !important;
}

.screen.ranking .ranking-screen__sheet-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  padding: calc(16px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) calc(30px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.ranking .ranking-screen__handle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(12px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  flex: 0 0 auto !important;
}

.screen.ranking .ranking-screen__handle::before {
  content: "" !important;
  width: calc(40px * var(--figma-stage-scale)) !important;
  height: calc(4px * var(--figma-stage-scale)) !important;
  border-radius: 999px !important;
  background: #b8b8b8 !important;
}

.screen.ranking .ranking-screen__viewport {
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(176px * var(--figma-stage-scale)) !important;
  margin: calc(14px * var(--figma-stage-scale)) auto 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-width: none !important;
}

.screen.ranking .ranking-screen__viewport::-webkit-scrollbar {
  display: none !important;
}

.screen.ranking .ranking-screen__sheet.is-expanded .ranking-screen__viewport {
  height: calc(324px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__list {
  display: flex !important;
  flex-direction: column !important;
  gap: calc(12px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  padding: 0 0 calc(12px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
}

.screen.ranking .ranking-screen__row {
  display: grid !important;
  grid-template-columns: calc(20px * var(--figma-stage-scale)) calc(30px * var(--figma-stage-scale)) minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: calc(8px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  min-height: calc(21px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.ranking .ranking-screen__rank,
.screen.ranking .ranking-screen__name,
.screen.ranking .ranking-screen__points {
  color: #2a2a2b !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__rank {
  width: calc(20px * var(--figma-stage-scale)) !important;
  text-align: left !important;
}

.screen.ranking .ranking-screen__team {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
}

.screen.ranking .ranking-screen__team img {
  width: calc(30px * var(--figma-stage-scale)) !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.ranking .ranking-screen__name {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.screen.ranking .ranking-screen__points {
  text-align: right !important;
  white-space: nowrap !important;
}

.screen.ranking .ranking-screen__points strong {
  color: #0068b7 !important;
  font-weight: 500 !important;
}

.screen.ranking .ranking-screen__pager {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(30px * var(--figma-stage-scale)) !important;
  width: calc(68px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5)) !important;
}

/* 홈 드림팀 / 나눔팀 — Figma 7S1J share node 151:12338 기반 */
.screen.home-screen {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  min-height: var(--device-height) !important;
  height: var(--device-height) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.screen.home-screen.home-screen--dream {
  background-color: #e30413 !important;
  background-image:
    radial-gradient(circle at 50% 19%, rgba(255, 255, 255, 0.2) 0 calc(4px * var(--figma-stage-scale)), transparent calc(4.1px * var(--figma-stage-scale))),
    radial-gradient(circle at 19% 50%, rgba(255, 255, 255, 0.2) 0 calc(4px * var(--figma-stage-scale)), transparent calc(4.1px * var(--figma-stage-scale))),
    radial-gradient(circle at 81% 50%, rgba(255, 255, 255, 0.2) 0 calc(4px * var(--figma-stage-scale)), transparent calc(4.1px * var(--figma-stage-scale))),
    radial-gradient(circle at 50% 81%, rgba(255, 255, 255, 0.2) 0 calc(4px * var(--figma-stage-scale)), transparent calc(4.1px * var(--figma-stage-scale))) !important;
  background-size: calc(32px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) !important;
}

.screen.home-screen.home-screen--share {
  background-color: #80ba27 !important;
  background-image:
    radial-gradient(circle at 50% 19%, rgba(255, 255, 255, 0.2) 0 calc(4px * var(--figma-stage-scale)), transparent calc(4.1px * var(--figma-stage-scale))),
    radial-gradient(circle at 19% 50%, rgba(255, 255, 255, 0.2) 0 calc(4px * var(--figma-stage-scale)), transparent calc(4.1px * var(--figma-stage-scale))),
    radial-gradient(circle at 81% 50%, rgba(255, 255, 255, 0.2) 0 calc(4px * var(--figma-stage-scale)), transparent calc(4.1px * var(--figma-stage-scale))),
    radial-gradient(circle at 50% 81%, rgba(255, 255, 255, 0.2) 0 calc(4px * var(--figma-stage-scale)), transparent calc(4.1px * var(--figma-stage-scale))) !important;
  background-size: calc(32px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .home-screen__pattern {
  display: none !important;
}

.screen.home-screen .topbar,
.screen.home-screen .topbar.is-dark {
  position: absolute !important;
  top: calc(var(--safe-top) + (22px * var(--figma-stage-scale))) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

.screen.home-screen .topbar__button,
.screen.home-screen .topbar__slot {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .topbar__brand,
.screen.home-screen .topbar__brand-lockup,
.screen.home-screen .topbar__brand-image {
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .home-screen__hero {
  position: relative !important;
  width: 100% !important;
  height: calc(452px * var(--figma-stage-scale)) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.screen.home-screen .home-screen__product {
  position: absolute !important;
  top: calc(94px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(205px * var(--figma-stage-scale)) !important;
  height: calc(166px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__logos {
  position: absolute !important;
  top: calc(279px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(60px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__logo {
  display: block !important;
  width: calc(60px * var(--figma-stage-scale)) !important;
  height: calc(60px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(60px * var(--figma-stage-scale)) !important;
  object-fit: contain !important;
}

.screen.home-screen .home-screen__promo {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
}

.screen.home-screen .home-screen__promo-rail {
  position: absolute !important;
  top: auto !important;
  bottom: calc(1px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: calc(28px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  transform: translateX(-50%) !important;
  filter: none !important;
}

.screen.home-screen .home-screen__promo-icon {
  display: none !important;
}

.screen.home-screen .home-screen__promo-icon .topbar__icon {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .home-screen__promo-bubble {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  box-shadow: 0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
  transform: rotate(180deg) !important;
}

.screen.home-screen .home-screen__promo-bubble-tail {
  position: absolute !important;
  top: calc(-3px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  width: calc(8px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  background: #2a2a2b !important;
  transform: translateX(-50%) rotate(45deg) !important;
  border-radius: calc(1px * var(--figma-stage-scale)) !important;
}

.screen.home-screen .home-screen__promo-bubble-copy {
  position: relative !important;
  z-index: 1 !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  white-space: nowrap !important;
  transform: rotate(180deg) !important;
}

.screen.home-screen .home-screen__sheet {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--figma-stage-width) !important;
  height: calc(360px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: calc(32px * var(--figma-stage-scale)) calc(32px * var(--figma-stage-scale)) 0 0 !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}

.screen.home-screen .home-screen__metrics {
  position: absolute !important;
  top: calc(68px * var(--figma-stage-scale)) !important;
  left: 50% !important;
  display: grid !important;
  gap: calc(14px * var(--figma-stage-scale)) !important;
  width: calc(328px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__metric {
  margin: 0 !important;
  width: 100% !important;
  color: #2a2a2b !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.screen.home-screen .home-screen__metric-label,
.screen.home-screen .home-screen__metric-trailing,
.screen.home-screen .home-screen__metric-primary {
  font: inherit !important;
}

.screen.home-screen .home-screen__metric-primary {
  color: #0068b7 !important;
}

.screen.home-screen .home-screen__sheet .cta {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(90px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  height: calc(52px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
}

.screen.home-screen .home-screen__sheet .pager {
  position: absolute !important;
  left: 50% !important;
  bottom: calc(30px * var(--figma-stage-scale)) !important;
  width: calc(68px * var(--figma-stage-scale)) !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5)) !important;
}

.mockup-shell.is-route-transition.is-route-transition--forward .screen {
  animation: home-flow-enter-forward 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.mockup-shell.is-route-transition.is-route-transition--backward .screen {
  animation: home-flow-enter-backward 220ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes home-flow-enter-forward {
  from {
    opacity: 0.01;
    transform: translate3d(calc(20px * var(--figma-stage-scale)), 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes home-flow-enter-backward {
  from {
    opacity: 0.01;
    transform: translate3d(calc(-20px * var(--figma-stage-scale)), 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.screen .home-flow-nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 9 !important;
  width: 100% !important;
  height: 0 !important;
  pointer-events: none !important;
  transform: translateY(calc((var(--mockup-stage-height) - calc(24px * var(--figma-stage-scale))) / 2)) !important;
}

.screen .home-flow-nav__button {
  position: absolute !important;
  top: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  opacity: 0.9 !important;
  pointer-events: auto !important;
  filter: drop-shadow(0 0 calc(4px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25)) !important;
}

.screen .home-flow-nav__button--left {
  left: calc(8px * var(--figma-stage-scale)) !important;
  justify-content: flex-start !important;
}

.screen .home-flow-nav__button--right {
  right: calc(8px * var(--figma-stage-scale)) !important;
  justify-content: flex-end !important;
}

.screen .home-flow-nav__button img {
  width: calc(12px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(12px * var(--figma-stage-scale)) !important;
}

.phone-stage .home-flow-pager {
  position: sticky !important;
  left: 50% !important;
  top: 0 !important;
  z-index: 9 !important;
  width: calc(68px * var(--figma-stage-scale)) !important;
  height: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, calc(var(--mockup-stage-height) - calc(38px * var(--figma-stage-scale)))) !important;
}

.phone-stage .home-flow-pager .pager {
  width: 100% !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5)) !important;
}

.screen.intro-screen {
  position: relative !important;
  width: var(--figma-stage-width) !important;
  min-width: var(--figma-stage-width) !important;
  max-width: var(--figma-stage-width) !important;
  color: #ffffff !important;
  background: #081734 !important;
  overflow: visible !important;
}

.screen.intro-screen .intro-screen__background {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

.screen.intro-screen .intro-screen__background img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

.screen.intro-screen .topbar,
.screen.intro-screen .topbar.is-dark {
  z-index: 8 !important;
}

.screen.intro-screen .intro-screen__hero {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: center !important;
  padding-top: calc(137px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__hero img {
  display: block !important;
  width: calc(334.194px * var(--figma-stage-scale)) !important;
  height: auto !important;
}

.screen.intro-screen.intro-screen--promo {
  background: #f0f0f0 !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__promo-upper {
  position: relative !important;
  background: #081734 !important;
  overflow: hidden !important;
}

.screen.intro-screen .intro-screen__content {
  position: relative !important;
  z-index: 2 !important;
  padding-top: calc(40px * var(--figma-stage-scale)) !important;
  padding-bottom: calc(72px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__content--promo-top {
  padding-bottom: calc(40px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__promo-stack {
  display: grid !important;
  gap: calc(28px * var(--figma-stage-scale)) !important;
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.intro-screen .intro-screen__card {
  display: grid !important;
  gap: calc(16px * var(--figma-stage-scale)) !important;
  width: 100% !important;
  padding: calc(32px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.92) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.2) !important;
  box-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(calc(4px * var(--figma-stage-scale))) !important;
}

.screen.intro-screen .intro-screen__section-heading {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.intro-screen .intro-screen__section-heading h2 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(24px * var(--figma-stage-scale)) !important;
  font-weight: 700 !important;
  line-height: calc(30px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.96px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.intro-screen .intro-screen__section-heading-arrow {
  width: calc(18px * var(--figma-stage-scale)) !important;
  height: calc(18px * var(--figma-stage-scale)) !important;
  flex: 0 0 calc(18px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__card-copy,
.screen.intro-screen .intro-screen__card-list {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.intro-screen .intro-screen__card-copy {
  text-align: center !important;
}

.screen.intro-screen .intro-screen__card-copy p {
  margin: 0 !important;
}

.screen.intro-screen .intro-screen__card-list {
  padding-left: calc(18px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__card-list li {
  margin: 0 0 calc(4px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__card-note {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  text-shadow: 0 0 calc(10px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.45) !important;
}

.screen.intro-screen .intro-screen__promo-stack .cta {
  width: calc(285px * var(--figma-stage-scale)) !important;
  min-height: calc(52px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__notices {
  margin-top: calc(40px * var(--figma-stage-scale)) !important;
  padding: calc(40px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) calc(78px * var(--figma-stage-scale)) !important;
  background: #f0f0f0 !important;
  color: #8c8c8c !important;
}

.screen.intro-screen.intro-screen--promo .intro-screen__notices {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
}

.screen.intro-screen .intro-screen__notice-section {
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.intro-screen .intro-screen__notice-section + .intro-screen__notice-section {
  margin-top: calc(32px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__notice-section h3 {
  margin: 0 0 calc(8px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: 0 !important;
}

.screen.intro-screen .intro-screen__notice-section ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.screen.intro-screen .intro-screen__notice-section li {
  position: relative !important;
  margin: 0 0 calc(4px * var(--figma-stage-scale)) !important;
  padding-left: calc(10px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-screen__notice-section li::before {
  content: "·" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

.screen.intro-screen .intro-screen__pager {
  width: calc(68px * var(--figma-stage-scale)) !important;
  margin: calc(30px * var(--figma-stage-scale)) auto 0 !important;
}

.screen.intro-screen .intro-screen__pager .pager {
  width: 100% !important;
  margin: 0 !important;
  filter: drop-shadow(0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5)) !important;
}

.screen.intro-screen .intro-howto {
  width: calc(285px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.screen.intro-screen .intro-howto__tabs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

.screen.intro-screen .intro-howto__tab {
  min-height: calc(37px * var(--figma-stage-scale)) !important;
  padding: calc(8px * var(--figma-stage-scale)) calc(6px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.92) !important;
  border-bottom: 0 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) 0 0 !important;
  background: rgba(0, 104, 183, 0.2) !important;
  color: #ffffff !important;
  font-size: calc(16px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(21px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.32px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  opacity: 0.6 !important;
}

.screen.intro-screen .intro-howto__tab.is-active {
  opacity: 1 !important;
}

.screen.intro-screen .intro-howto__panel {
  display: grid !important;
  gap: calc(28px * var(--figma-stage-scale)) !important;
  padding: calc(32px * var(--figma-stage-scale)) calc(14px * var(--figma-stage-scale)) calc(28px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid rgba(255, 255, 255, 0.92) !important;
  border-top: 0 !important;
  border-radius: 0 0 calc(8px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  background: rgba(0, 104, 183, 0.2) !important;
  box-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(calc(4px * var(--figma-stage-scale))) !important;
}

.screen.intro-screen .intro-howto__steps {
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: decimal !important;
  list-style-position: inside !important;
}

.screen.intro-screen .intro-howto__step {
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.intro-screen .intro-howto__step p {
  margin: 0 !important;
}

.screen.intro-screen .intro-howto__placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: calc(92px * var(--figma-stage-scale)) !important;
  margin-top: calc(8px * var(--figma-stage-scale)) !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  background: #99c3e2 !important;
}

.screen.intro-screen .intro-howto__placeholder img {
  width: calc(32px * var(--figma-stage-scale)) !important;
  height: calc(32px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__points {
  display: grid !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__points-caption,
.screen.intro-screen .intro-howto__points-note,
.screen.intro-screen .intro-howto__table-footer {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
  text-shadow: 0 0 calc(8px * var(--figma-stage-scale)) rgba(0, 0, 0, 0.25) !important;
}

.screen.intro-screen .intro-howto__table {
  width: calc(256px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__table-head,
.screen.intro-screen .intro-howto__table-row {
  display: grid !important;
  grid-template-columns: calc(180px * var(--figma-stage-scale)) calc(76px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__table-head {
  background: #0068b7 !important;
}

.screen.intro-screen .intro-howto__table-head span {
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  color: #ffffff !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.intro-screen .intro-howto__table-head span + span {
  border-left: calc(0.5px * var(--figma-stage-scale)) solid #ffffff !important;
}

.screen.intro-screen .intro-howto__table-row {
  background: #ffffff !important;
  border-bottom: calc(0.5px * var(--figma-stage-scale)) solid #8c8c8c !important;
}

.screen.intro-screen .intro-howto__table-row:last-child {
  border-bottom: 0 !important;
}

.screen.intro-screen .intro-howto__table-row span,
.screen.intro-screen .intro-howto__table-row strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: calc(4px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  color: #333333 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.screen.intro-screen .intro-howto__table-row strong {
  flex-direction: column !important;
  gap: 0 !important;
  border-left: calc(0.5px * var(--figma-stage-scale)) solid #8c8c8c !important;
  font-weight: 500 !important;
}

.screen.intro-screen .intro-howto__table-row strong em,
.screen.intro-screen .intro-howto__table-row strong small {
  font-style: normal !important;
  font-weight: inherit !important;
}

.screen.intro-screen .intro-howto__table-row strong em {
  color: #0068b7 !important;
}

.screen.intro-screen .intro-howto__cautions {
  width: calc(256px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
  color: #f0f0f0 !important;
}

.screen.intro-screen .intro-howto__cautions h3 {
  margin: 0 0 calc(8px * var(--figma-stage-scale)) !important;
  color: #f0f0f0 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__cautions ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.screen.intro-screen .intro-howto__cautions li {
  position: relative !important;
  margin: 0 0 calc(4px * var(--figma-stage-scale)) !important;
  padding-left: calc(10px * var(--figma-stage-scale)) !important;
  color: #f0f0f0 !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.screen.intro-screen .intro-howto__cautions li::before {
  content: "·" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
}

.screen.faq-screen {
  width: var(--figma-stage-width) !important;
  min-height: var(--mockup-stage-height) !important;
  background: #ffffff !important;
}

.screen.faq-screen .topbar,
.screen.faq-screen .topbar.is-dark {
  position: absolute !important;
  top: calc(var(--safe-top) + 18px) !important;
  left: 50% !important;
  width: calc(344px * var(--figma-stage-scale)) !important;
  height: calc(30px * var(--figma-stage-scale)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
}

.screen.faq-screen .topbar__button,
.screen.faq-screen .topbar__slot {
  width: calc(24px * var(--figma-stage-scale)) !important;
  height: calc(24px * var(--figma-stage-scale)) !important;
  min-width: calc(24px * var(--figma-stage-scale)) !important;
  min-height: calc(24px * var(--figma-stage-scale)) !important;
}

.screen.faq-screen .topbar__brand,
.screen.faq-screen .topbar__brand-lockup,
.screen.faq-screen .topbar__brand-image {
  width: calc(128px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.faq-screen__body {
  padding-top: calc(var(--safe-top) + 135px) !important;
  padding-right: var(--figma-page-margin) !important;
  padding-bottom: 0 !important;
  padding-left: var(--figma-page-margin) !important;
}

.faq-screen__title {
  margin: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(20px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(26px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.4px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.faq-screen__search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  height: calc(44px * var(--figma-stage-scale)) !important;
  margin: calc(20px * var(--figma-stage-scale)) auto 0 !important;
  padding: 0 calc(8px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid #b7b7b7 !important;
  border-radius: calc(8px * var(--figma-stage-scale)) !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

.faq-screen__search-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.faq-screen__search-input::placeholder {
  color: #b7b7b7 !important;
  opacity: 1 !important;
}

.faq-screen__search-input:focus {
  outline: none !important;
}

.faq-screen__search-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(20px * var(--figma-stage-scale)) !important;
  width: calc(20px * var(--figma-stage-scale)) !important;
  height: calc(20px * var(--figma-stage-scale)) !important;
}

.faq-screen__search-icon img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.faq-screen__category-grid {
  display: grid !important;
  grid-template-columns: calc(114px * var(--figma-stage-scale)) calc(115px * var(--figma-stage-scale)) calc(114px * var(--figma-stage-scale)) !important;
  width: calc(343px * var(--figma-stage-scale)) !important;
  margin: calc(20px * var(--figma-stage-scale)) auto 0 !important;
}

.faq-screen__category {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(40px * var(--figma-stage-scale)) !important;
  padding: calc(11px * var(--figma-stage-scale)) calc(8px * var(--figma-stage-scale)) !important;
  border: calc(1px * var(--figma-stage-scale)) solid #e3e3e3 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #8c8c8c !important;
  text-align: center !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

.faq-screen__category span {
  display: block !important;
  color: inherit !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
  text-align: center !important;
}

.faq-screen__category.is-active {
  border-color: #0068b7 !important;
  background: #0068b7 !important;
  color: #ffffff !important;
}

.faq-screen__list-wrap {
  margin-top: calc(12px * var(--figma-stage-scale)) !important;
  margin-right: 0 !important;
  margin-bottom: calc(32px * var(--figma-stage-scale)) !important;
  margin-left: 0 !important;
}

.faq-screen__list-top {
  width: 100% !important;
  height: calc(8px * var(--figma-stage-scale)) !important;
  background: #f0f0f0 !important;
}

.faq-screen__list {
  width: 100% !important;
}

.faq-item {
  width: 100% !important;
  background: #ffffff !important;
}

.faq-item__question {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: calc(44px * var(--figma-stage-scale)) !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  border: 0 !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #f0f0f0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  text-align: left !important;
}

.faq-item__question-copy,
.faq-item__answer-copy {
  display: flex !important;
  align-items: flex-start !important;
  gap: calc(8px * var(--figma-stage-scale)) !important;
  min-width: 0 !important;
}

.faq-item__question-copy {
  flex: 1 1 auto !important;
  padding-right: calc(8px * var(--figma-stage-scale)) !important;
}

.faq-item__prefix {
  flex: 0 0 auto !important;
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.faq-item__question-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #2a2a2b !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.faq-item__chevron {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 calc(18px * var(--figma-stage-scale)) !important;
  width: calc(18px * var(--figma-stage-scale)) !important;
  height: calc(18px * var(--figma-stage-scale)) !important;
}

.faq-item__chevron img {
  width: calc(6.75px * var(--figma-stage-scale)) !important;
  height: calc(12px * var(--figma-stage-scale)) !important;
  transform: rotate(90deg) !important;
  transition: transform 160ms ease !important;
}

.faq-item.is-open .faq-item__chevron img {
  transform: rotate(-90deg) !important;
}

.faq-item__answer {
  width: 100% !important;
  padding: calc(12px * var(--figma-stage-scale)) calc(26.5px * var(--figma-stage-scale)) !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #f0f0f0 !important;
  background: #f0f0f0 !important;
  box-sizing: border-box !important;
}

.faq-item__answer-copy {
  width: calc(322px * var(--figma-stage-scale)) !important;
  margin: 0 auto !important;
}

.faq-item__answer-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}

.faq-item__answer-text p {
  margin: 0 !important;
}

.faq-item__answer-text p + p {
  margin-top: calc(4px * var(--figma-stage-scale)) !important;
}

.faq-empty {
  padding: calc(20px * var(--figma-stage-scale)) calc(16px * var(--figma-stage-scale)) !important;
  border-bottom: calc(1px * var(--figma-stage-scale)) solid #f0f0f0 !important;
  background: #f0f0f0 !important;
  text-align: center !important;
}

.faq-empty__title,
.faq-empty__description {
  margin: 0 !important;
}

.faq-empty__title {
  color: #2a2a2b !important;
  font-size: calc(14px * var(--figma-stage-scale)) !important;
  font-weight: 500 !important;
  line-height: calc(20px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.56px * var(--figma-stage-scale)) !important;
}

.faq-empty__description {
  margin-top: calc(4px * var(--figma-stage-scale)) !important;
  color: #8c8c8c !important;
  font-size: calc(12px * var(--figma-stage-scale)) !important;
  font-weight: 300 !important;
  line-height: calc(16px * var(--figma-stage-scale)) !important;
  letter-spacing: calc(-0.24px * var(--figma-stage-scale)) !important;
}