:root {
  --design-width: 750px;
  --design-height: 1624px;
  --font-brand: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-digital: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}

@font-face {
  font-family: "MeituanType";
  src: url("./assets/fonts/meituantype-Light.TTF") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MeituanType";
  src: url("./assets/fonts/meituantype-Regular.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MeituanType";
  src: url("./assets/fonts/meituantype-Bold.TTF") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MeituanType";
  src: url("./assets/fonts/meituantype-Bold.TTF") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MeituanType";
  src: url("./assets/fonts/meituantype-Bold.TTF") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MTNewDigitalDisplay";
  src: url("./assets/fonts/MTNewDigitalDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MTNewDigitalDisplay";
  src: url("./assets/fonts/MTNewDigitalDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MTNewDigitalDisplay";
  src: url("./assets/fonts/MTNewDigitalDisplay-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  min-width: var(--design-width);
  min-height: 100%;
  margin: 0;
  background: #111;
  font-family: var(--font-brand);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: var(--design-width);
  min-height: max(100vh, var(--design-height));
  overflow-y: auto;
  overflow-x: auto;
}

.demo-controls {
  position: fixed;
  right: calc(50% + 395px);
  left: auto;
  top: 84px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 184px;
}

.comparison-panel {
  position: absolute;
  top: 50%;
  left: calc(50% + 395px);
  z-index: 2;
  width: var(--design-width);
  height: 1333px;
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  transform: translateY(-50%);
}

.comparison-panel.is-hidden {
  display: none;
}

.comparison-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.version-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
}

.version-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 16px;
  background: #ececec;
  color: #3a3a3a;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.version-btn.is-active {
  background: #111;
  color: #fff;
}

.version-btn:active,
.demo-milk-tea:active {
  transform: translateY(1px);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

@media (min-height: 1624px) {
  body {
    align-items: center;
  }
}

button {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
}

.digital,
.price,
.amount {
  font-family: var(--font-digital);
}

.screen {
  --content-top: 620px;
  position: relative;
  width: var(--design-width);
  min-width: var(--design-width);
  max-width: var(--design-width);
  height: var(--design-height);
  min-height: var(--design-height);
  max-height: var(--design-height);
  flex: 0 0 var(--design-width);
  overflow: hidden;
  background: #000;
}

.design-layer {
  position: absolute;
  left: 0;
  top: 50%;
  width: 750px;
  height: auto;
  display: block;
  transform: translateY(-50%);
  user-select: none;
  pointer-events: none;
}

.header-logo-cover,
.header-subtitle-cover {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
  background: #fecb3e;
}

.header-logo-cover {
  top: 245px;
  right: 35px;
  width: 210px;
  height: 96px;
}

.header-subtitle-cover {
  top: 304px;
  left: 90px;
  width: 450px;
  height: 36px;
}

.hotspot {
  position: absolute;
  cursor: pointer;
  opacity: 0;
}

.hotspot:active {
  opacity: 0.08;
  background: #000;
}

.back-hotspot {
  left: 49px;
  top: 276px;
  width: 73px;
  height: 46px;
}

.dish-hotspot {
  left: 40px;
  width: 672px;
  height: 213px;
  border-radius: 18px;
}

.dish-1 {
  top: 620px;
}

.dish-2 {
  top: 849px;
}

.dish-3 {
  top: 1075px;
}

.quick {
  top: 1248px;
  width: 206px;
  height: 104px;
  border-radius: 20px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #000;
  text-align: center;
  background: transparent;
}

.quick {
  z-index: 7;
}

.quick-1 {
  left: 52px;
}

.quick-2 {
  left: 277px;
}

.quick-3 {
  left: 503px;
}

.screen.is-product-dial .quick {
  left: var(--dial-left);
  top: 1248px;
  width: var(--dial-width);
  height: 104px;
  border: 1px solid rgba(82, 64, 34, 0.06);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(88, 65, 24, 0.07);
}

.screen.is-product-dial .voice-dial-surface {
  top: 1236px;
  left: 40px;
  width: 670px;
  height: 236px;
  border-radius: 22px 22px 48px 48px;
  background: #fffaf2;
  opacity: 1;
}

.quick:active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.04);
}

.dial-num {
  position: absolute;
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
  left: 8px !important;
  z-index: 2;
  transform: none;
}

.dial-num,
.card-index-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(150, 102, 0, 0.14);
  border-radius: 11px;
  background: linear-gradient(145deg, #ffe56f 0%, #ffc928 100%);
  color: #111;
  font-family: var(--font-digital);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 3px 9px rgba(126, 85, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.dial-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px 10px 8px 44px;
  font-family: var(--font-brand);
  font-size: 44px;
  line-height: 48px;
  font-weight: 700;
  white-space: normal;
  word-break: break-all;
  text-align: center;
  letter-spacing: -0.5px;
}

.voice-hotspot {
  left: 60px;
  top: 1364px;
  z-index: 9;
  display: grid;
  place-items: center;
  width: 630px;
  height: 82px;
  border-radius: 44px;
  overflow: visible;
  opacity: 1;
  background: linear-gradient(180deg, #ffd351 0%, #ffc42f 100%);
  color: #111;
  box-shadow:
    0 3px 9px rgba(151, 104, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  touch-action: none;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.voice-hotspot.is-listening {
  opacity: 1;
  background: #2878f0;
  box-shadow: 0 14px 30px rgba(40, 120, 240, 0.28);
  transform: none;
}

.voice-hotspot.is-canceling {
  background: #ff4d4f;
  box-shadow: 0 14px 30px rgba(255, 77, 79, 0.26);
}

.voice-idle-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
}

.voice-mic-icon {
  width: 42px;
  height: 42px;
  fill: currentColor;
}

.voice-idle-label {
  font-size: 31px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
}

.voice-active-state {
  position: relative;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
}

.voice-hotspot.is-listening .voice-idle-state {
  display: none;
}

.voice-hotspot.is-listening .voice-active-state {
  display: flex;
}

.voice-hold-hint {
  position: static;
  width: 100%;
  color: rgba(255, 255, 255, 0.94);
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

.voice-cancel-hint {
  display: none;
}

.voice-hotspot.is-canceling .voice-send-hint {
  display: none;
}

.voice-hotspot.is-canceling .voice-cancel-hint {
  display: inline;
  color: #fff;
}

.voice-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
}

.voice-wave i {
  display: block;
  width: 7px;
  height: 10px;
  border-radius: 99px;
  background: #fff;
  animation: voice-wave 760ms ease-in-out infinite alternate;
}

.voice-wave i:nth-child(3n + 1) { animation-delay: -520ms; }
.voice-wave i:nth-child(3n + 2) { animation-delay: -280ms; }
.voice-wave i:nth-child(4n) { animation-delay: -90ms; }

@keyframes voice-wave {
  0% { height: 8px; opacity: 0.55; }
  45% { height: 18px; opacity: 0.9; }
  100% { height: 32px; opacity: 1; }
}

.call-end-button {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.screen::before,
.screen::after {
  content: "";
  position: absolute;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.screen::before {
  top: 245px;
  right: 35px;
  width: 210px;
  height: 132px;
  background: #fecb3e;
}

.screen::after {
  left: 40px;
  top: 1350px;
  z-index: 5;
  width: 670px;
  height: 121px;
  border-radius: 0 0 48px 48px;
  background: #fffaf2;
}

.call-end-button {
  top: 276px;
  right: 32px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 148px;
  height: 68px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff5b50 0%, #f54236 100%);
  color: #fff;
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  box-shadow:
    0 12px 28px rgba(214, 43, 32, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.call-end-icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
  flex: 0 0 auto;
}

.screen.is-voice-version .voice-hotspot {
  display: none;
}

.screen.is-voice-version::before,
.screen.is-voice-version::after,
.screen.is-voice-version .call-end-button {
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0);
}

.screen.is-voice-version::before,
.screen.is-voice-version::after {
  pointer-events: none;
}

.screen.is-call-ended .call-end-button {
  background: #8a8a8a;
  box-shadow: none;
}

.voice-dial-surface {
  position: absolute;
  left: 40px;
  top: 1350px;
  z-index: 6;
  width: 670px;
  height: 121px;
  border-radius: 0 0 48px 48px;
  background: #fffaf2;
  opacity: 1;
  pointer-events: none;
}

.screen.is-voice-version .voice-dial-surface {
  opacity: 1;
}

.screen.is-voice-version .dynamic-cards {
  height: max(320px, calc(1350px - var(--content-top)));
}

.screen.is-voice-version .quick {
  top: 1362px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(88, 65, 24, 0.08);
}

.content-mask {
  position: absolute;
  left: 22px;
  top: 340px;
  z-index: 3;
  width: 706px;
  height: 870px;
  background: #fff;
  pointer-events: none;
}

.chat-window {
  position: absolute;
  left: 40px;
  top: 340px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 670px;
  height: 160px;
  padding: 16px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 2px solid rgba(232, 199, 122, 0.58);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #fffaf0 100%);
  box-shadow: 0 5px 16px rgba(109, 76, 18, 0.08);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.chat-window::-webkit-scrollbar {
  display: none;
}

.assistant-stream,
.user-stream {
  position: relative;
  display: none;
  width: fit-content;
  max-width: 80%;
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 700;
  overflow: visible;
}

.assistant-message-row {
  display: none;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.assistant-message-row.is-visible {
  display: flex;
}

.assistant-stream {
  min-height: 0;
  max-width: 100%;
  max-height: none;
  padding: 10px 0;
  border-radius: 18px;
  background: transparent;
  color: #111;
  font-size: 38px;
  line-height: 44px;
}

.assistant-stream.is-visible,
.user-stream.is-visible {
  display: block;
}

.assistant-stream::before {
  display: none;
}

.user-stream {
  align-self: flex-end;
  min-width: 0;
  max-height: none;
  padding: 10px 18px;
  border-radius: 17px;
  background: linear-gradient(180deg, #ffecad 0%, #ffe18e 100%);
  color: #111;
  font-size: 38px;
  line-height: 44px;
}

.user-stream::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 20px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 15px solid #ffe49a;
}

.dynamic-cards {
  position: absolute;
  left: 40px;
  top: var(--content-top);
  display: none;
  grid-auto-rows: auto;
  align-content: start;
  gap: 14px;
  width: 672px;
  height: max(320px, calc(1260px - var(--content-top)));
  padding: 14px 12px 20px;
  background: #f5f5f7;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  z-index: 4;
}

.dynamic-cards::-webkit-scrollbar {
  display: none;
}

.dynamic-cards.is-visible {
  display: grid;
}

.dynamic-card {
  display: grid;
  grid-template-columns: 194px minmax(0, 1fr);
  gap: 16px;
  min-height: 290px;
  height: auto;
  padding: 12px 12px 26px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);
  overflow: hidden;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  font-synthesis: none;
}

.dynamic-thumb-wrap {
  position: relative;
  width: 194px;
  height: 194px;
}

.dynamic-thumb {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.card-index-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

.dynamic-info {
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  min-width: 0;
  min-height: max-content;
}

.dynamic-title {
  display: block;
  margin: 0;
  color: #202124;
  font-size: 44px;
  line-height: 50px;
  font-weight: 700;
  white-space: normal;
  word-break: break-all;
}

.dynamic-shop-name {
  display: inline;
  color: #843500;
  font-size: 44px;
  line-height: 50px;
  font-weight: 700;
}

.dynamic-divider {
  display: inline;
  margin: 0 6px;
  color: #b5b5b5;
  font-weight: 400;
  font-size: 36px;
  line-height: 44px;
}

.dynamic-product-name {
  display: inline;
  color: #202124;
  font-size: 44px;
  line-height: 50px;
  font-weight: 700;
}

.dynamic-meta {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  margin-top: 8px;
  color: #66696c;
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
  white-space: nowrap;
}

.dynamic-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.dynamic-meta-row--triple {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
}

.dynamic-meta-row--triple > span,
.dynamic-meta-row--triple > strong {
  min-width: 0;
}

.dynamic-meta-row--triple > :first-child {
  text-align: left;
}

.dynamic-meta-row--triple > :nth-child(2) {
  text-align: center;
}

.dynamic-meta-row--triple > :last-child {
  text-align: right;
}

.dynamic-meta-row > span,
.dynamic-meta-row > strong {
  min-width: 0;
}

.dynamic-meta-row > :last-child {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
}

.dynamic-meta strong {
  color: inherit;
  font-weight: 400;
}

.dynamic-meta strong.is-highlight {
  color: #ff2d19;
}

.dynamic-desc {
  flex: 0 0 auto;
  margin: 8px 0 0;
  color: #858687;
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dynamic-rank {
  margin: 4px 0 0;
  color: #ff5b13;
  font-size: 20px;
  line-height: 25px;
  white-space: nowrap;
}

.dynamic-promo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: #ff2d19;
  font-size: 18px;
  line-height: 22px;
  white-space: nowrap;
}

.dynamic-promo img {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  border-radius: 4px;
}

.brand-price-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 17px;
  flex: 0 0 20px;
  border-radius: 4px 5px 5px 4px;
  background: #ff2d19;
  transform: rotate(-7deg);
}

.brand-price-icon::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 4px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid #ff2d19;
}

.brand-price-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
}

.dynamic-promo b {
  font-weight: 600;
}

.dynamic-promo span {
  font-weight: 400;
}

.dynamic-card.is-milk-card .dynamic-meta {
  margin-top: 8px;
}

.dynamic-card.is-milk-card .dynamic-desc {
  margin-top: 8px;
}

.dynamic-card.is-milk-card .dynamic-rank,
.dynamic-card.is-milk-card .dynamic-promo {
  margin-top: 4px;
}

.dynamic-price-row {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  width: 100%;
  min-height: 0;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #ff2d19;
  white-space: nowrap;
}

.dynamic-currency,
.dynamic-price-major,
.dynamic-price-decimal {
  font-family: var(--font-digital);
  font-size: 38px;
  line-height: 44px;
  font-weight: 700;
}

.dynamic-currency {
  margin-right: 2px;
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
}

.dynamic-saved {
  margin-left: 10px;
  font-size: 32px;
  line-height: 38px;
  font-weight: 400;
}

.dynamic-currency,
.dynamic-saved {
  font-size: 32px !important;
  line-height: 38px !important;
}

.dynamic-price-major,
.dynamic-price-decimal {
  font-size: 44px !important;
  line-height: 50px !important;
  font-weight: 700;
}


.choice-stage,
.order-stage {
  position: absolute;
  left: 40px;
  top: var(--content-top);
  display: none;
  width: 672px;
  height: max(320px, calc(1260px - var(--content-top)));
  background: #fffaf1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  z-index: 5;
}

.choice-stage::-webkit-scrollbar,
.order-stage::-webkit-scrollbar {
  display: none;
}

.choice-stage.is-visible,
.order-stage.is-visible {
  display: block;
}

.selected-product-card {
  display: grid;
  grid-template-columns: 188px 1fr;
  gap: 20px;
  width: 672px;
  min-height: 154px;
  padding: 14px 18px 14px 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(88, 65, 24, 0.08);
  overflow: hidden;
}

.selected-product-card img {
  width: 188px;
  height: 126px;
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.selected-product-title {
  margin: 2px 0 0;
  color: #111;
  font-size: 25px;
  line-height: 1.18;
  font-weight: 700;
  white-space: nowrap;
}

.selected-product-title b {
  color: #a6421d;
}

.selected-product-desc {
  margin: 16px 0 0;
  color: #666;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.selected-product-price {
  margin: 22px 0 0;
  color: #ff3b20;
  font-family: var(--font-digital);
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
}

.selected-product-price small {
  color: #666;
  font-family: var(--font-brand);
  font-size: 18px;
}

.selected-choice-product {
  width: 672px;
  cursor: default;
}

.choice-drawer {
  margin-top: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(88, 65, 24, 0.08);
  overflow: hidden;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 24px;
  background: #fff;
}

.drawer-header > div {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.drawer-header h2 {
  margin: 0;
  color: #111;
  font-size: 25px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.drawer-step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #f3f3f3;
  color: #777;
  font-family: var(--font-digital);
  font-size: 21px;
  line-height: 1;
  font-weight: 700;
}

.drawer-status {
  max-width: 360px;
  margin: 0;
  color: #999;
  font-size: 18px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-status.is-confirmed {
  max-width: 420px;
  padding: 0;
  background: transparent;
  color: #514b45;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.15px;
}

.drawer-body {
  display: none;
  padding: 4px 24px 20px;
  border-top: 1px solid #f3f3f3;
}

.choice-drawer.is-expanded .drawer-body {
  display: block;
}

.choice-drawer.is-expanded .drawer-header {
  background: #fffdf8;
}

.choice-drawer.is-expanded .drawer-step {
  border: 1.5px solid #ff6a21;
  background: #fff;
  color: #ff5a1f;
}

.choice-drawer.is-expanded .drawer-status {
  color: #ff5a1f;
}

.choice-drawer .spec-title {
  margin-top: 18px;
}

.required-summary {
  margin: 22px -24px 0;
  padding: 14px 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #666;
  font-size: 18px;
  line-height: 1.35;
}

.spec-panel {
  margin-top: 14px;
  padding: 22px 24px 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(88, 65, 24, 0.08);
}

.spec-title {
  margin: 0;
  color: #111;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
}

.spec-group {
  margin-top: 24px;
}

.spec-label {
  margin: 0 0 14px;
  color: #111;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}

.spec-chip {
  min-height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  background: #f4f4f4;
  color: #222;
  font-size: 20px;
  line-height: 48px;
  font-weight: 500;
  white-space: nowrap;
}

.spec-chip.is-active {
  border: 1.5px solid #ff6a21;
  background: #fff;
  color: #ff5a1f;
  font-weight: 700;
  line-height: 45px;
}

.spec-chip em {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 90, 31, 0.35);
  color: #ff3b20;
  font-family: var(--font-digital);
  font-style: normal;
}

.spec-summary {
  margin: 22px -24px 0;
  padding: 14px 24px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: #666;
  font-size: 18px;
  line-height: 1.35;
}

.spec-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
}

.spec-total {
  color: #ff3b20;
  font-size: 20px;
  font-weight: 700;
}

.spec-total b {
  font-family: var(--font-digital);
  font-size: 38px;
}

.spec-hint {
  color: #666;
  font-size: 18px;
  font-weight: 700;
}

.screen.is-confirming .dynamic-cards,
.screen.is-confirming .dish-hotspot,
.screen.is-order .dynamic-cards,
.screen.is-order .dish-hotspot,
.screen.is-payment .dynamic-cards,
.screen.is-payment .dish-hotspot,
.screen.is-delivery .dynamic-cards,
.screen.is-delivery .dish-hotspot {
  display: none;
}

.screen.is-confirming::after,
.screen.is-order::after,
.screen.is-payment::after {
  content: "";
  position: absolute;
  left: 40px;
  top: 1254px;
  width: 670px;
  height: 110px;
  border-radius: 18px 18px 0 0;
  background: #fffaf1;
  z-index: 6;
  opacity: 1;
  pointer-events: none;
}

.screen.is-confirming .quick {
  top: 1248px;
  width: 276px;
  background: #fff;
  border: 1px solid rgba(82, 64, 34, 0.06);
  box-shadow: 0 4px 12px rgba(88, 65, 24, 0.07);
}

.screen.is-confirming .quick-1,
.screen.is-order .quick-1 {
  left: 76px;
}

.screen.is-confirming .quick-2,
.screen.is-order .quick-2 {
  left: 398px;
}

.screen.is-confirming .quick-3,
.screen.is-order .quick-3 {
  display: none;
}

.screen.is-order .quick {
  top: 1248px;
  width: 276px;
  background: #fff;
  border: 1px solid rgba(82, 64, 34, 0.06);
  box-shadow: 0 4px 12px rgba(88, 65, 24, 0.07);
}

.screen.is-payment .quick {
  top: 1248px;
  width: 276px;
  background: #fff;
  border: 1px solid rgba(82, 64, 34, 0.06);
  box-shadow: 0 4px 12px rgba(88, 65, 24, 0.07);
}

.screen.is-payment .quick-1 {
  left: 76px;
}

.screen.is-payment .quick-2 {
  left: 398px;
}

.screen.is-payment .quick-3,
.screen.is-delivery .quick {
  display: none;
}

.screen.is-payment .dial-name {
  font-size: 38px;
}

.screen.is-delivery .order-stage {
  left: 40px;
  top: var(--content-top);
  width: 672px;
  height: max(420px, calc(1355px - var(--content-top)));
  background: #f5f5f5;
  z-index: 5;
}

.order-card {
  width: 672px;
  padding: 28px 28px 26px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(88, 65, 24, 0.08);
}

.order-shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.order-shop {
  display: flex;
  align-items: center;
  min-width: 0;
  color: #111;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

.shop-logo {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 50%;
  background: #f7f7f7;
  color: #111;
  font-size: 20px;
}

.delivery-type {
  color: #666;
  font-size: 24px;
  font-weight: 700;
}

.order-item {
  display: grid;
  grid-template-columns: 148px 1fr 94px;
  gap: 18px;
  padding: 0 0 26px;
}

.order-item + .order-item {
  padding-top: 26px;
}

.order-item-main {
  min-width: 0;
}

.order-thumb {
  width: 148px;
  height: 132px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.order-item-title {
  margin: 0;
  color: #111;
  font-size: 26px;
  line-height: 1.18;
  font-weight: 700;
  white-space: nowrap;
}

.order-item-title .promo {
  color: #139532;
}

.order-quantity {
  margin: 17px 0 0;
  color: #888;
  font-size: 22px;
  line-height: 1;
}

.order-spec-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 17px;
  color: #888;
  font-size: 32px;
  line-height: 38px;
}

.order-spec-line span {
  flex: 1;
  min-width: 0;
}

.edit-btn {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  opacity: 1;
  cursor: pointer;
}

.edit-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 32px 32px no-repeat url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23888888' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 24.5 21.9 7.1c1.4-2.1 4.5-.2 3.1 2L13.6 26.6l-5.1 2.2 2-4.3Z'/%3E%3Cpath d='M7 31.5h22'/%3E%3C/g%3E%3C/svg%3E");
}

.order-price {
  color: #111;
  font-family: var(--font-digital);
  font-size: 31px;
  line-height: 1.1;
  font-weight: 700;
  text-align: right;
}

.order-separator {
  height: 1px;
  margin: 0 0 24px;
  background: #eee;
}

.order-info-row {
  display: grid;
  grid-template-columns: 112px 1fr 34px;
  gap: 16px;
  align-items: center;
  min-height: 68px;
  padding: 8px 0;
}

.order-info-label {
  color: #111;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
}

.order-info-value {
  color: #666;
  text-align: right;
  font-size: 23px;
  line-height: 1.28;
  font-weight: 500;
}

.order-total-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 96px 14px;
  gap: 2px;
  align-items: center;
  min-height: 74px;
  padding-top: 8px;
}

.order-total-meta {
  color: #888;
  text-align: right;
  font-size: 21px;
  line-height: 1.35;
}

.order-total-price {
  color: #111;
  font-family: var(--font-digital);
  font-size: 34px;
  font-weight: 700;
  text-align: right;
}

.order-total-chevron {
  color: #999;
  font-size: 32px;
  line-height: 1;
}

.pay-page {
  position: relative;
  min-height: 740px;
  padding: 30px 24px 116px;
  border-radius: 22px;
  background: #f7f7f7;
}

.pay-title {
  margin: 0 54px 34px;
  color: #111;
  text-align: center;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
}

.pay-section-label {
  margin: 0 0 14px 0;
  color: #666;
  font-size: 23px;
  line-height: 1;
  font-weight: 500;
}

.pay-section-label + .pay-card {
  margin-bottom: 28px;
}

.pay-card {
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}

.pay-fast {
  display: grid;
  grid-template-columns: 48px 1fr 42px;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-height: 92px;
  padding: 0 26px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.pay-person-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 92px;
  padding: 0 26px;
  text-align: left;
}

.pay-person-action {
  color: #aaa;
  font-size: 30px;
  line-height: 1;
  font-weight: 400;
}

.pay-share-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 6px;
  border: 2px solid #bbb;
  border-radius: 7px;
  font-size: 19px;
  line-height: 1;
}

.pay-option {
  display: grid;
  grid-template-columns: 48px 1fr 42px;
  gap: 16px;
  align-items: center;
  width: calc(100% - 52px);
  min-height: 86px;
  margin: 0 26px;
  border-bottom: 1px solid #eee;
  text-align: left;
  cursor: pointer;
}

.pay-option:last-child {
  border-bottom: 0;
}

.pay-bank-card .pay-option {
  grid-template-columns: minmax(0, 1fr) 42px;
}

.pay-name {
  color: #111;
  font-size: 25px;
  line-height: 1;
  font-weight: 500;
  white-space: nowrap;
}

.pay-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 7px;
  color: #111;
  font-size: 18px;
  font-weight: 700;
}

.pay-icon-fast {
  background: #ffdc1c;
  color: #fff;
  font-size: 24px;
}

.pay-icon-alipay {
  background: #4b91f1;
  color: #fff;
}

.pay-icon-wechat {
  position: relative;
  overflow: hidden;
  background: #18ce38;
}

.pay-icon-wechat i,
.pay-icon-wechat b {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fff;
}

.pay-icon-wechat i {
  left: 6px;
  top: 8px;
  width: 22px;
  height: 17px;
}

.pay-icon-wechat b {
  right: 4px;
  bottom: 5px;
  width: 18px;
  height: 14px;
  box-shadow: 0 0 0 2px #18ce38;
}

.pay-icon-apple {
  width: 44px;
  height: 24px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #111;
  color: #111;
  font-size: 13px;
}

.pay-icon-union {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(120deg, #e72d3b 0 33%, #1477c9 33% 67%, #19a775 67% 100%);
  color: #fff;
}

.pay-icon-union i {
  display: block;
  font-size: 8px;
  line-height: 34px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(-5deg);
}

.pay-check {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffdc1c;
  color: #111;
  font-size: 25px;
  font-weight: 700;
}

.pay-radio {
  width: 34px;
  height: 34px;
  border: 1.5px solid #ddd;
  border-radius: 50%;
}

.pay-method.is-active .pay-radio {
  display: grid;
  place-items: center;
  border: 0;
  background: #ffdc1c;
}

.pay-method.is-active .pay-radio::before {
  content: "✓";
  color: #111;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.pay-more {
  margin: 0 26px;
  padding: 18px 0 24px 64px;
  color: #999;
  font-size: 22px;
  line-height: 1;
}

.pay-total {
  margin-top: 12px;
  color: #666;
  text-align: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.pay-animation {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 640px;
  border-radius: 22px;
  background: #fff;
  color: #111;
}

.pay-loader {
  width: 84px;
  height: 84px;
  border: 8px solid #ffe46b;
  border-top-color: #111;
  border-radius: 50%;
  animation: pay-spin 0.9s linear infinite;
}

.pay-animation h2 {
  margin: 28px 0 0;
  font-size: 34px;
  line-height: 1;
}

.pay-animation p {
  margin: 16px 0 0;
  color: #777;
  font-size: 22px;
}

.pay-success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  gap: 30px;
  background: #fff;
  color: #111;
  text-align: center;
}

.pay-success-icon {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #ffd900;
  color: #111;
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
}

.pay-success-page h2 {
  margin: 0;
  font-size: 44px;
  line-height: 54px;
  font-weight: 700;
}

.pay-canceled-page {
  min-height: 640px;
  padding: 8px 0 120px;
  background: #fffaf1;
}

.pay-canceled-card {
  padding: 32px 30px 30px;
  border-radius: 30px;
  background: #f3f4f6;
  color: #111;
}

.pay-canceled-head {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #111;
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
}

.pay-canceled-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 4px solid #111;
  border-radius: 50%;
  font-family: Arial, sans-serif;
  font-size: 35px;
  line-height: 1;
  font-weight: 700;
}

.pay-canceled-line {
  height: 1px;
  margin: 34px 0 34px;
  background: #d9d9d9;
}

.pay-canceled-shop {
  margin: 0 0 30px;
  color: #555;
  font-size: 28px;
  line-height: 1;
  font-weight: 500;
}

.pay-canceled-item {
  display: grid;
  grid-template-columns: 132px 1fr 48px;
  gap: 22px;
  align-items: center;
  margin-top: 24px;
}

.pay-canceled-item img {
  width: 132px;
  height: 118px;
  border-radius: 14px;
  object-fit: cover;
  background: #fff;
}

.pay-canceled-item h3 {
  margin: 0;
  color: #111;
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-canceled-item p {
  margin: 18px 0 0;
  color: #888;
  font-size: 23px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pay-canceled-item strong {
  color: #111;
  text-align: right;
  font-size: 30px;
  line-height: 1;
}

.pay-canceled-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 34px;
  color: #111;
  font-weight: 700;
}

.pay-canceled-total span {
  font-size: 30px;
}

.pay-canceled-total strong {
  font-family: var(--font-digital);
  font-size: 44px;
}

@keyframes pay-spin {
  to {
    transform: rotate(360deg);
  }
}

.delivery-page {
  position: relative;
  width: 750px;
  min-height: 1624px;
  padding: 0 0 64px;
  background: #f5f5f5;
  color: #202124;
  font-family: var(--font-brand);
  overflow: hidden;
}

.delivery-phone-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  padding: 45px 78px 0 83px;
  color: #000;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  background: #fff;
}

.delivery-silent {
  margin-left: -272px;
  color: #000;
  font-size: 28px;
  transform: rotate(-18deg);
}

.delivery-system-icons {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 28px;
  letter-spacing: 1px;
}

.delivery-system-icons b {
  display: inline-grid;
  place-items: center;
  min-width: 51px;
  height: 29px;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 23px;
  line-height: 1;
}

.delivery-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 99px;
  padding: 0 39px;
  background: #fff;
}

.delivery-back {
  width: 46px;
  height: 60px;
  color: #111;
  font-family: Arial, sans-serif;
  font-size: 68px;
  line-height: 54px;
  font-weight: 300;
}

.delivery-actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

.delivery-reward {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff4b22;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.delivery-reward b {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd787 0 20%, #ff7932 56%, #ef2f22 100%);
  color: #fff;
  font-size: 25px;
  box-shadow: 0 2px 7px rgba(255, 83, 35, 0.35);
}

.delivery-share,
.delivery-refresh {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 46px;
}

.delivery-share::before {
  content: "↗";
  position: absolute;
  inset: 0;
  color: #111;
  font-size: 56px;
  line-height: 46px;
  transform: rotate(-30deg);
}

.delivery-refresh::before {
  content: "↻";
  position: absolute;
  inset: 0;
  color: #111;
  font-size: 52px;
  line-height: 43px;
}

.delivery-content {
  height: 1451px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: #f5f5f5;
}

.delivery-content::-webkit-scrollbar {
  display: none;
}

.delivery-hero {
  padding: 34px 38px 16px;
  background: #fff;
  border-radius: 0 0 24px 24px;
}

.delivery-hero h1 {
  margin: 0;
  color: #202124;
  font-size: 38px;
  line-height: 1;
  font-weight: 700;
}

.delivery-hero h1 span {
  font-family: var(--font-digital);
  font-size: 76px;
  letter-spacing: 0;
}

.delivery-hero h2 {
  margin: 34px 0 34px;
  color: #202124;
  font-size: 37px;
  line-height: 1;
  font-weight: 700;
}

.delivery-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  margin-bottom: 34px;
}

.delivery-progress::before,
.delivery-progress::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 50%;
  height: 24px;
  transform: translateY(-50%);
}

.delivery-progress::before {
  right: 25px;
  background: #eeeeee;
}

.delivery-progress::after {
  width: calc((100% - 50px) / 3);
  background: #ffd900;
}

.progress-node {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #ededed;
  color: #999;
  font-size: 25px;
  font-weight: 700;
}

.progress-node.is-done {
  background: #ffd900;
  color: #111;
}

.progress-line {
  display: none;
}

.progress-node::before,
.progress-node::after {
  content: "";
  position: absolute;
}

.progress-paid::before {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #111;
}

.progress-paid::after {
  content: "¥";
  color: #ffd900;
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.progress-shop::before {
  width: 25px;
  height: 18px;
  border-radius: 3px 3px 4px 4px;
  background: #111;
  top: 20px;
}

.progress-shop::after {
  width: 30px;
  height: 10px;
  left: 10px;
  top: 13px;
  border-radius: 7px 7px 3px 3px;
  background:
    radial-gradient(circle at 5px 8px, #111 0 4px, transparent 4px),
    radial-gradient(circle at 15px 8px, #111 0 4px, transparent 4px),
    radial-gradient(circle at 25px 8px, #111 0 4px, transparent 4px),
    linear-gradient(#111, #111);
}

.progress-rider::before {
  content: "♟";
  color: #aaa;
  font-size: 26px;
  line-height: 1;
}

.progress-done::before {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #aaa;
}

.progress-done::after {
  content: "✓";
  color: #eee;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

.delivery-map {
  position: relative;
  height: 453px;
  border-radius: 17px;
  overflow: hidden;
  background:
    linear-gradient(32deg, transparent 0 40%, rgba(180, 190, 205, 0.6) 41% 43%, transparent 44%),
    linear-gradient(119deg, transparent 0 37%, rgba(190, 198, 212, 0.7) 38% 41%, transparent 42%),
    linear-gradient(2deg, transparent 0 52%, rgba(207, 213, 224, 0.8) 53% 56%, transparent 57%),
    repeating-linear-gradient(90deg, transparent 0 82px, rgba(218, 218, 218, 0.8) 84px 87px, transparent 89px 158px),
    repeating-linear-gradient(0deg, transparent 0 88px, rgba(225, 225, 225, 0.8) 90px 94px, transparent 96px 176px),
    radial-gradient(circle at 12% 16%, #d7edbd 0 54px, transparent 56px),
    radial-gradient(circle at 87% 30%, #d7edbd 0 70px, transparent 72px),
    radial-gradient(circle at 35% 94%, #d7edbd 0 62px, transparent 64px),
    linear-gradient(90deg, #eef3ea 0%, #f7f7f2 52%, #eef4ec 100%);
}

.map-label {
  position: absolute;
  color: #8aa4c4;
  font-size: 27px;
  font-weight: 700;
  opacity: 0.85;
}

.map-label.park {
  left: 132px;
  top: 10px;
}

.map-label.road {
  right: 25px;
  top: 210px;
  transform: rotate(-55deg);
}

.map-label.river {
  right: 90px;
  bottom: 88px;
}

.map-badge {
  position: absolute;
  right: 14px;
  top: 16px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 120, 33, 0.55);
  border-radius: 8px;
  background: #fffdf6;
  color: #ff7b19;
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
}

.map-pin {
  position: absolute;
  left: 252px;
  top: 67px;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border: 7px solid #111;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.18);
}

.map-pin span {
  width: 45px;
  height: 45px;
  border-radius: 9px;
  background: linear-gradient(180deg, #62b3ff, #92c65f);
}

.map-note {
  position: absolute;
  left: 185px;
  top: 205px;
  width: 318px;
  padding: 26px 24px;
  border-radius: 16px;
  background: #fff;
  color: #202124;
  font-size: 28px;
  line-height: 1.38;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
}

.map-note::after {
  content: "";
  position: absolute;
  left: 158px;
  bottom: -17px;
  width: 28px;
  height: 28px;
  background: #fff;
  transform: rotate(45deg);
}

.map-store {
  position: absolute;
  left: 302px;
  bottom: 48px;
  width: 67px;
  height: 68px;
  border-radius: 20px 20px 8px 8px;
  background: linear-gradient(180deg, #ffb71b 0 52%, #ffd84c 52% 100%);
}

.map-store::before {
  content: "";
  position: absolute;
  left: 14px;
  top: -28px;
  width: 58px;
  height: 43px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 34%, #ffb8c2 0 18px, #ff86a3 19px 100%);
}

.map-safe {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 53px;
  display: flex;
  align-items: center;
  padding-left: 26px;
  border-radius: 29px;
  background: rgba(255, 255, 255, 0.93);
  color: #ff7617;
  font-size: 25px;
  font-weight: 700;
}

.map-safe b {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-right: 13px;
  border-radius: 9px;
  background: #ff9b24;
  color: #fff;
  font-size: 17px;
}

.delivery-ops {
  display: grid;
  grid-template-columns: 1fr 140px 140px 140px;
  gap: 17px;
  align-items: center;
  margin-top: 34px;
}

.delivery-ops button {
  height: 65px;
  border: 1px solid #e5e5e5;
  border-radius: 34px;
  background: #fff;
  color: #202124;
  font-size: 27px;
  line-height: 1;
  font-weight: 700;
}

.delivery-ops button:first-child {
  justify-self: start;
  width: auto;
  border: 0;
  color: #888;
  font-weight: 500;
}

.delivery-ops .is-primary {
  border-color: #ff7c1a;
  color: #ff7617;
}

.delivery-tip {
  height: 74px;
  margin: 30px -38px -16px;
  padding: 22px 38px;
  border-radius: 0 0 24px 24px;
  background: #f8f8f8;
  color: #9b9b9b;
  font-size: 25px;
}

.delivery-panel {
  margin-top: 18px;
  padding: 35px 38px 31px;
  border-radius: 20px;
  background: #fff;
}

.delivery-panel h3 {
  margin: 0 0 42px;
  color: #202124;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
}

.delivery-info-row {
  display: grid;
  grid-template-columns: 124px 1fr 86px;
  gap: 10px;
  align-items: start;
}

.delivery-info-row span {
  color: #666;
  font-size: 27px;
  line-height: 1.25;
}

.delivery-info-row p {
  margin: 0;
  color: #555;
  font-size: 28px;
  line-height: 1.42;
}

.delivery-info-row button {
  height: 43px;
  border: 1px solid #e5e5e5;
  border-radius: 24px;
  color: #777;
  font-size: 23px;
  background: #fff;
}

.delivery-more-line {
  margin-top: 36px;
  color: #9b9b9b;
  text-align: center;
  font-size: 25px;
}

.fee-panel h3 {
  margin-bottom: 30px;
}

.fee-shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  border-radius: 12px;
  background: #fafafa;
}

.fee-shop-row span {
  color: #666;
  font-size: 24px;
}

.fee-shop-row em {
  color: #ff7617;
  font-size: 22px;
  font-style: normal;
}

.fee-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
}

.fee-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fee-thumbs img {
  width: 73px;
  height: 73px;
  border-radius: 11px;
  object-fit: cover;
}

.fee-thumbs span {
  display: grid;
  place-items: center;
  width: 75px;
  height: 73px;
  border-radius: 13px;
  background: #f1f1f1;
  color: #999;
  font-size: 24px;
}

.fee-product-row p {
  margin: 0;
  color: #333;
  font-size: 27px;
  line-height: 1;
}

.fee-product-row b {
  font-family: var(--font-digital);
  font-size: 39px;
}

.delivery-home-indicator {
  position: absolute;
  left: 244px;
  bottom: 18px;
  width: 262px;
  height: 9px;
  border-radius: 8px;
  background: #000;
}

.screen.is-delivery .delivery-page {
  width: 672px;
  min-height: 1120px;
  padding: 0 0 18px;
  border-radius: 18px;
  background: #f5f5f5;
  overflow: visible;
}

.screen.is-delivery .delivery-phone-status,
.screen.is-delivery .delivery-topbar,
.screen.is-delivery .delivery-home-indicator {
  display: none;
}

.screen.is-delivery .delivery-content {
  height: auto;
  overflow: visible;
  background: #f5f5f5;
}

.screen.is-delivery .delivery-hero {
  padding: 28px 28px 14px;
  border-radius: 18px;
}

.screen.is-delivery .delivery-hero h1 {
  font-size: 33px;
}

.screen.is-delivery .delivery-hero h1 span {
  font-size: 66px;
}

.screen.is-delivery .delivery-hero h2 {
  margin: 29px 0 28px;
  font-size: 33px;
}

.screen.is-delivery .delivery-progress {
  display: flex;
  justify-content: space-between;
  height: 56px;
  margin-bottom: 28px;
}

.screen.is-delivery .progress-node {
  width: 48px;
  height: 48px;
}

.screen.is-delivery .progress-line {
  display: none;
}

.screen.is-delivery .delivery-map {
  height: 405px;
}

.screen.is-delivery .map-label {
  font-size: 24px;
}

.screen.is-delivery .map-label.park {
  left: 114px;
}

.screen.is-delivery .map-label.road {
  right: 19px;
  top: 188px;
}

.screen.is-delivery .map-label.river {
  right: 72px;
  bottom: 78px;
}

.screen.is-delivery .map-badge {
  font-size: 22px;
}

.screen.is-delivery .map-pin {
  left: 220px;
  top: 58px;
  width: 64px;
  height: 64px;
}

.screen.is-delivery .map-pin span {
  width: 40px;
  height: 40px;
}

.screen.is-delivery .map-note {
  left: 160px;
  top: 178px;
  width: 292px;
  padding: 22px 21px;
  font-size: 25px;
}

.screen.is-delivery .map-note::after {
  left: 143px;
}

.screen.is-delivery .map-store {
  left: 268px;
  bottom: 42px;
  width: 60px;
  height: 61px;
}

.screen.is-delivery .map-store::before {
  width: 52px;
  height: 39px;
}

.screen.is-delivery .map-safe {
  height: 49px;
  font-size: 22px;
}

.screen.is-delivery .delivery-ops {
  grid-template-columns: 1fr 124px 124px 124px;
  gap: 13px;
  margin-top: 28px;
}

.screen.is-delivery .delivery-ops button {
  height: 58px;
  font-size: 24px;
}

.screen.is-delivery .delivery-tip {
  height: 66px;
  margin: 26px -28px -14px;
  padding: 20px 28px;
  font-size: 22px;
}

.screen.is-delivery .delivery-panel {
  margin-top: 16px;
  padding: 31px 28px 28px;
}

.screen.is-delivery .delivery-panel h3 {
  margin-bottom: 34px;
  font-size: 31px;
}

.screen.is-delivery .delivery-info-row {
  grid-template-columns: 110px 1fr 78px;
}

.screen.is-delivery .delivery-info-row span {
  font-size: 24px;
}

.screen.is-delivery .delivery-info-row p {
  font-size: 25px;
}

.screen.is-delivery .delivery-more-line {
  font-size: 22px;
}

.screen.is-delivery .fee-shop-row span {
  font-size: 22px;
}

.screen.is-delivery .fee-shop-row em {
  font-size: 20px;
}

.modal-layer {
  --phone-screen-side: 22px;
  --phone-screen-top: 176px;
  --phone-screen-bottom: 176px;
  --phone-sheet-bottom: 176px;
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  clip-path: inset(
    var(--phone-screen-top)
    var(--phone-screen-side)
    var(--phone-screen-bottom)
    var(--phone-screen-side)
    round 58px
  );
  z-index: 30;
}

.modal-layer.is-visible {
  display: block;
}

.modal-backdrop {
  position: absolute;
  top: var(--phone-screen-top);
  right: var(--phone-screen-side);
  bottom: var(--phone-sheet-bottom);
  left: var(--phone-screen-side);
  border-radius: 58px;
  background: rgba(0, 0, 0, 0.2);
}

.modal-sheet {
  position: absolute;
  left: var(--phone-screen-side);
  right: var(--phone-screen-side);
  bottom: var(--phone-screen-bottom);
  display: flex;
  flex-direction: column;
  max-height: calc(100% - var(--phone-screen-top) - var(--phone-sheet-bottom) - 44px);
  padding: 34px 34px 38px;
  border-radius: 34px 34px 0 0;
  background: #fff;
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}

.modal-sheet::-webkit-scrollbar {
  display: none;
}

.modal-layer.is-spec-modal .modal-sheet {
  max-height: min(960px, calc(100% - var(--phone-screen-top) - var(--phone-sheet-bottom) - 44px));
}

.modal-layer.is-address-modal .modal-sheet,
.modal-layer.is-time-modal .modal-sheet {
  top: auto;
  bottom: var(--phone-sheet-bottom);
  border-radius: 34px 34px 0 0;
  padding-bottom: 38px;
}

.modal-layer.is-address-modal .modal-sheet {
  max-height: min(1040px, calc(100% - var(--phone-screen-top) - var(--phone-sheet-bottom) - 44px));
}

.modal-layer.is-time-modal .modal-sheet {
  max-height: min(820px, calc(100% - var(--phone-screen-top) - var(--phone-sheet-bottom) - 44px));
}

.modal-title {
  flex: 0 0 auto;
  margin: 0;
  color: #111;
  text-align: center;
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
}

.modal-close {
  position: absolute;
  right: 22px;
  top: 20px;
  z-index: 2;
  width: 40px;
  height: 40px;
  color: #999;
  opacity: 1;
}

.modal-close::before {
  content: "×";
  font-size: 42px;
  line-height: 36px;
}

.modal-layer .spec-panel {
  min-height: 0;
  margin-top: 24px;
  padding: 0 6px 10px 0;
  box-shadow: none;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.modal-layer .spec-panel::-webkit-scrollbar,
.address-list::-webkit-scrollbar,
.time-days::-webkit-scrollbar,
.time-slots::-webkit-scrollbar {
  display: none;
}

.modal-layer .spec-panel .spec-title {
  font-size: 26px;
  line-height: 1.25;
}

.modal-layer .spec-panel .spec-group {
  margin-top: 20px;
}

.modal-confirm {
  flex: 0 0 auto;
  width: 100%;
  height: 68px;
  margin-top: 18px;
  border-radius: 42px;
  background: linear-gradient(180deg, #ffe435 0%, #ffd215 100%);
  color: #111;
  font-size: 24px;
  font-weight: 700;
}

.address-list {
  min-height: 0;
  margin-top: 24px;
  padding-right: 5px;
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

.address-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  gap: 14px;
  align-items: center;
  min-height: 108px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.address-radio {
  width: 32px;
  height: 32px;
  border: 1.5px solid #ddd;
  border-radius: 50%;
}

.address-item.is-active .address-radio {
  display: grid;
  place-items: center;
  border: 0;
  background: #ffdf25;
}

.address-item.is-active .address-radio::before {
  content: "✓";
  color: #111;
  font-size: 26px;
  font-weight: 700;
}

.address-main {
  min-width: 0;
}

.address-title {
  margin: 0;
  color: #111;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.address-tag {
  display: inline-block;
  margin-right: 10px;
  padding: 5px 9px;
  border-radius: 7px;
  background: #fff7cf;
  color: #ff7b00;
  font-size: 21px;
}

.address-sub {
  margin: 10px 0 0;
  color: #999;
  font-size: 19px;
  line-height: 1.25;
}

.address-add {
  flex: 0 0 auto;
  width: 100%;
  height: 68px;
  margin-top: 18px;
  border-radius: 42px;
  background: linear-gradient(180deg, #ffe435 0%, #ffd215 100%);
  color: #111;
  font-size: 24px;
  font-weight: 700;
}

.time-modal-body {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  min-height: 0;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid #f0ede7;
  border-radius: 18px;
}

.time-days {
  background: #fafafa;
  overflow-y: auto;
  scrollbar-width: none;
}

.time-day {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  color: #666;
  text-align: left;
  font-size: 21px;
  font-weight: 700;
}

.time-day.is-active {
  color: #111;
  background: #fff;
}

.time-slots {
  background: #fff;
  overflow-y: auto;
  scrollbar-width: none;
}

.time-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 84px;
  height: auto;
  padding: 14px 12px 14px 20px;
  border-bottom: 1px solid #eee;
  color: #111;
  font-size: 20px;
  line-height: 1.35;
  text-align: left;
}

.time-slot.is-active {
  color: #ff7b00;
  font-weight: 700;
}

.time-check {
  color: #ff7b00;
  font-size: 30px;
}

.demo-milk-tea {
  position: static;
  width: 100%;
  padding: 10px 14px;
  border-radius: 18px;
  background: #111;
  color: #fff;
  font-family: var(--font-brand);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.font-probe {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.probe-brand-regular {
  font-family: var(--font-brand);
  font-size: 24px;
  font-weight: 400;
}

.probe-brand-bold {
  font-family: var(--font-brand);
  font-size: 32px;
  font-weight: 700;
}

.probe-digital-medium {
  font-family: var(--font-digital);
  font-size: 32px;
  font-weight: 500;
}

.probe-digital-bold {
  font-family: var(--font-digital);
  font-size: 48px;
  font-weight: 700;
}

/* Unified typography and scrolling for every interactive module. */
body,
button,
input,
textarea,
select,
.screen,
.screen * {
  font-family: var(--font-brand) !important;
}

.chat-window,
.dynamic-cards,
.choice-stage,
.order-stage,
.delivery-content,
.modal-layer .spec-panel,
.address-list,
.time-days,
.time-slots {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  pointer-events: auto;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.chat-window::-webkit-scrollbar,
.dynamic-cards::-webkit-scrollbar,
.choice-stage::-webkit-scrollbar,
.order-stage::-webkit-scrollbar,
.delivery-content::-webkit-scrollbar,
.modal-layer .spec-panel::-webkit-scrollbar,
.address-list::-webkit-scrollbar,
.time-days::-webkit-scrollbar,
.time-slots::-webkit-scrollbar {
  display: none;
}

.choice-stage,
.order-stage {
  padding-bottom: 120px;
}

.modal-layer .spec-panel,
.address-list,
.time-modal-body {
  flex: 1 1 auto;
  min-height: 0;
}

.time-days,
.time-slots {
  min-height: 0;
}

.drawer-header h2,
.spec-title,
.modal-title,
.pay-title,
.pay-animation h2,
.pay-canceled-head,
.order-shop,
.order-item-title,
.selected-product-title,
.delivery-panel h3 {
  font-size: 38px;
  line-height: 44px;
  font-weight: 700;
}

.drawer-header {
  min-height: 96px;
}

.spec-label,
.spec-chip,
.drawer-status,
.drawer-status.is-confirmed,
.spec-summary,
.required-summary,
.spec-hint,
.spec-total,
.order-info-label,
.order-info-value,
.order-total-meta,
.pay-section-label,
.pay-name,
.pay-more,
.pay-animation p,
.address-title,
.address-tag,
.address-sub,
.time-day,
.time-slot,
.modal-confirm,
.address-add {
  font-size: 32px;
  line-height: 38px;
}

.spec-chip,
.spec-chip.is-active {
  min-height: 58px;
  padding: 9px 18px;
  line-height: 38px;
}

.address-item {
  min-height: 128px;
}

.time-day,
.time-slot {
  min-height: 104px;
}

.pay-option,
.pay-fast {
  min-height: 100px;
}

.modal-confirm,
.address-add {
  height: 76px;
}

/* High-fidelity payment page. */
.pay-page {
  min-height: 100%;
  padding: 18px 24px 150px;
  border-radius: 0;
  background: #f5f5f5;
}

.pay-order-topbar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 78px;
  color: #111;
}

.pay-order-topbar h2 {
  margin: 0;
  text-align: center;
  font-size: 38px;
  line-height: 44px;
  font-weight: 500;
}

.pay-order-topbar > span {
  position: absolute;
  right: 0;
  text-align: right;
  font-size: 28px;
  line-height: 38px;
  font-weight: 400;
}

.pay-order-summary {
  padding: 20px 0 58px;
  text-align: center;
}

.pay-order-summary p {
  margin: 0 0 16px;
  color: #777;
  font-size: 28px;
  line-height: 38px;
}

.pay-order-summary strong {
  display: inline-flex;
  align-items: baseline;
  color: #050505;
  font-size: 68px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.5px;
}

.pay-order-summary strong small {
  margin-right: 8px;
  font-size: 42px;
  line-height: 1;
  font-weight: 700;
}

.pay-page .pay-section-label {
  margin: 0 0 14px;
  color: #777;
  font-size: 28px;
  line-height: 38px;
  font-weight: 400;
}

.pay-page .pay-card {
  margin-bottom: 30px;
  border: 1px solid rgba(0, 0, 0, 0.025);
  border-radius: 24px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}

.pay-meituan-brand {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 94px;
  padding: 0 28px;
  border-bottom: 1px solid #f0f0f0;
}

.pay-brand-image {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.pay-brand-apple {
  width: 46px;
  height: 34px;
}

.pay-bank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 42px;
  gap: 12px;
  align-items: center;
  width: calc(100% - 56px);
  min-height: 108px;
  margin: 0 28px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.pay-discount {
  color: #f04438;
  text-align: right;
  font-size: 28px;
  line-height: 38px;
  font-weight: 500;
  white-space: nowrap;
}

.pay-switch-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 0 78px;
  color: #aaa;
  text-align: left;
  font-size: 25px;
  line-height: 34px;
}

.pay-switch-card b {
  font-size: 40px;
  line-height: 1;
  font-weight: 300;
}

.pay-help-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 56px);
  min-height: 104px;
  margin: 0 28px;
  padding: 0 6px;
  border-top: 1px solid #f0f0f0;
  text-align: left;
}

.pay-help-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #b8b8b8;
  font-size: 28px;
  line-height: 38px;
  font-weight: 400;
}

.pay-help-share-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0;
  border: 0;
  border-radius: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pay-other-card .pay-option {
  grid-template-columns: 50px minmax(0, 1fr) 42px;
  gap: 18px;
  width: calc(100% - 56px);
  min-height: 104px;
  margin: 0 28px;
  padding: 0;
  border-bottom: 1px solid #f0f0f0;
}

.pay-other-card .pay-option:last-child {
  border-bottom: 0;
}

.pay-page .pay-name {
  color: #111;
  font-size: 32px;
  line-height: 40px;
  font-weight: 400;
}

.pay-name-with-union {
  display: flex;
  align-items: center;
  gap: 18px;
}

.pay-union-mini-image {
  display: block;
  width: 30px;
  height: 24px;
  object-fit: contain;
}

.pay-page .pay-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
}

.pay-page .pay-icon-apple {
  width: 44px;
  height: 27px;
  border: 1.5px solid #333;
  border-radius: 3px;
  font-size: 14px;
}

.pay-page .pay-icon-union {
  width: 42px;
  height: 38px;
}

.pay-page .pay-icon-alipay {
  background: #287df4;
  color: #fff;
  font-size: 28px;
  font-weight: 500;
}

.pay-page .pay-radio {
  width: 38px;
  height: 38px;
  border: 2px solid #d7d7d7;
  background: #fff;
}

.pay-page .pay-check {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffdb00;
  color: #111;
  font-size: 26px;
}

.pay-other-card .pay-check {
  opacity: 0;
}

.pay-other-card .pay-method.is-active > .pay-check {
  opacity: 1;
}

/* Voice-call layout override stays last so every order stage uses the lower dial. */
.screen.is-voice-version.is-product-dial .quick {
  top: 1248px;
}

.screen.is-voice-version.is-product-dial .voice-dial-surface {
  top: 1236px;
  left: 40px;
  width: 670px;
  height: 236px;
  border-radius: 22px 22px 48px 48px;
}

.screen.is-voice-version .quick {
  top: 1248px;
}

.screen.is-voice-version .voice-dial-surface {
  top: 1236px;
  left: 40px;
  width: 670px;
  height: 236px;
  border-radius: 22px 22px 48px 48px;
}

.screen.is-voice-version::after {
  top: 1236px;
  left: 40px;
  width: 670px;
  height: 236px;
  border-radius: 22px 22px 48px 48px;
}

.screen.is-voice-version .dynamic-cards {
  height: max(320px, calc(1236px - var(--content-top)));
}

/* Voice version: the call action occupies the bottom control slot below the dial. */
.screen.is-voice-version .call-end-button {
  top: 1364px;
  right: auto;
  left: 60px;
  width: 630px;
  height: 82px;
  gap: 16px;
  border: 2px solid rgba(190, 20, 24, 0.12);
  border-radius: 44px;
  background: linear-gradient(180deg, #ff575c 0%, #ef3238 100%);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 1px;
  box-shadow:
    0 4px 12px rgba(221, 35, 41, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.screen.is-voice-version .call-end-icon {
  width: 38px;
  height: 38px;
}

.screen.is-voice-version.is-call-ended .call-end-button {
  border-color: rgba(0, 0, 0, 0.04);
  background: #a8a8a8;
  box-shadow: none;
}