:root {
  --ink: #17151d;
  --muted: #8c8994;
  --purple: #5c42d6;
  --purple-dark: #33208f;
  --yellow: #ffe300;
  --line: #eceaf0;
  --soft: #f7f6f9;
}

* { box-sizing: border-box; }

html { background: #eceaf3; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 15%, #c7bdff 0, transparent 34%),
    radial-gradient(circle at 85% 85%, #f6d4ff 0, transparent 32%),
    #eceaf3;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

button { font: inherit; color: inherit; }

.app-shell {
  min-height: 100svh;
  display: grid;
  place-content: center;
  padding: 24px 12px;
}

.phone-stage {
  position: relative;
  width: min(100vw, 430px);
  min-height: min(900px, calc(100svh - 48px));
  max-height: calc(100svh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 34px;
  box-shadow: 0 28px 80px rgb(54 42 95 / 20%);
  scrollbar-width: none;
}

.phone-stage::-webkit-scrollbar { display: none; }

.browser-bar {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 64px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  padding: 6px 14px;
  background: rgb(255 255 255 / 94%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.browser-bar button,
.browser-bar > span {
  border: 0;
  background: transparent;
  font-size: 26px;
  text-align: center;
  cursor: pointer;
}

.browser-bar div { text-align: center; line-height: 1.15; }
.browser-bar strong { display: block; font-size: 15px; }
.browser-bar small { color: #a5a2ab; font-size: 10px; }

.home-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 22px 20px;
}

.eyebrow { margin: 0 0 6px; color: var(--purple); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.home-head h1 { margin: 0; font-size: 29px; line-height: 1.25; letter-spacing: -.04em; }

.avatar {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #7862ed, #2d1d86);
  box-shadow: 0 8px 20px #5942cb44;
}

.search-box {
  width: calc(100% - 44px);
  height: 46px;
  margin: 0 22px 16px;
  padding: 0 16px;
  text-align: left;
  color: #9c99a3;
  border: 1px solid #efedf2;
  border-radius: 14px;
  background: #f8f7fa;
}

.search-box span { margin-right: 8px; color: #6e6979; font-size: 21px; }

.creator-entry {
  width: calc(100% - 44px);
  margin: 0 22px 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  border: 1px solid #e9e4ff;
  border-radius: 18px;
  background: linear-gradient(115deg, #f7f4ff, #fff);
  box-shadow: 0 9px 24px #5c42d615;
  cursor: pointer;
}

.creator-entry > div { display: flex; align-items: center; gap: 11px; }
.creator-entry i { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 12px; background: var(--purple); font-size: 23px; font-style: normal; }
.creator-entry strong, .creator-entry small { display: block; }
.creator-entry strong { font-size: 14px; }
.creator-entry small { margin-top: 4px; color: #9691a0; font-size: 10px; }
.creator-entry > b { color: var(--purple); font-size: 11px; }

.style-banner {
  width: calc(100% - 44px);
  margin: 0 22px 24px;
  padding: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
  color: #fff;
  border: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 80% 15%, #b893ff 0, transparent 28%),
    linear-gradient(120deg, #4029b8, #7956e5);
  box-shadow: 0 12px 26px #563bc533;
  cursor: pointer;
}

.style-banner span,
.style-banner strong { display: block; }
.style-banner span { margin-bottom: 5px; font-size: 12px; opacity: .82; }
.style-banner strong { font-size: 15px; }
.style-banner b { padding: 8px 10px; border-radius: 10px; background: #ffffff22; font-size: 12px; }

.market { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: start; }

.category-list {
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  padding: 4px 8px 100px;
  background: #faf9fb;
}

.category-list button {
  min-height: 60px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 0;
  border-radius: 13px;
  color: #827e89;
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.category-list button i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 8px;
  background: #b8b3c4;
  font-style: normal;
}

.category-list button.active { color: var(--purple); background: #fff; font-weight: 700; box-shadow: 0 6px 18px #33208f12; }
.category-list button.active i { background: var(--purple); }

.product-list { padding: 4px 14px 110px 12px; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 12px; }
.section-title strong { font-size: 16px; }
.section-title span { color: #a19da8; font-size: 11px; }

.product-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.product-art { position: relative; min-height: 106px; overflow: hidden; display: grid; place-items: center; border-radius: 14px; }
.product-art::before { content: ""; position: absolute; width: 78px; height: 78px; border-radius: 50%; background: #ffffff66; top: -25px; right: -20px; }
.product-art span { position: relative; z-index: 2; width: 45px; height: 64px; display: grid; place-items: center; color: #fff; border-radius: 9px 9px 16px 16px; background: #ffffff2e; border: 2px solid #ffffffaa; font-size: 19px; font-weight: 900; box-shadow: 0 9px 16px #0002; }
.product-art i { position: absolute; bottom: 10px; width: 52px; height: 8px; border-radius: 50%; background: #0002; filter: blur(3px); }
.product-art.mint { background: linear-gradient(145deg, #d9f3df, #58a974); }
.product-art.blue { background: linear-gradient(145deg, #ccecff, #458ac8); }
.product-art.orange, .product-art.gold { background: linear-gradient(145deg, #ffe3a8, #ec8c20); }
.product-art.red, .product-art.rose { background: linear-gradient(145deg, #ffc6c2, #db4038); }
.product-art.green { background: linear-gradient(145deg, #d6efca, #5d9d45); }
.product-art.purple, .product-art.dark { background: linear-gradient(145deg, #ddd4ff, #6248b7); }

.product-copy { min-width: 0; }
.product-copy > small { color: var(--purple); font-size: 10px; }
.product-copy h2 { margin: 4px 0; overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.product-copy p { margin: 0 0 9px; overflow: hidden; color: #9995a1; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.product-copy > div { display: flex; justify-content: space-between; align-items: center; }
.product-copy > div strong { color: #4e34c6; font-size: 16px; }
.product-copy button { padding: 7px 11px; color: #fff; border: 0; border-radius: 9px; background: var(--purple); font-size: 11px; font-weight: 700; cursor: pointer; }

.tabbar {
  position: sticky;
  z-index: 18;
  bottom: 0;
  height: 76px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(15px);
}

.tabbar button { display: grid; place-items: center; gap: 2px; color: #aaa6b0; border: 0; background: transparent; font-size: 10px; cursor: pointer; }
.tabbar button i { font-size: 20px; font-style: normal; line-height: 1; }
.tabbar button.active { color: var(--purple); font-weight: 700; }

.style-page { min-height: 840px; padding: 0 18px 34px; background: linear-gradient(155deg, #39229e 0, #8153db 42%, #c670dd 100%); }
.style-hero { padding: 34px 10px 24px; color: #fff; text-align: center; }
.style-hero .palette { width: 58px; height: 58px; display: grid; place-items: center; margin: auto; border-radius: 18px; background: #ffffff25; font-size: 34px; }
.style-hero p { margin: 14px 0 6px; color: #ffffffaa; font-size: 11px; letter-spacing: .16em; }
.style-hero h1 { margin: 0 0 4px; font-size: 28px; }
.style-hero > span:last-child { font-size: 12px; opacity: .75; }

.order-glance { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; background: #ffffffee; box-shadow: 0 14px 30px #24106b33; }
.order-glance .bag { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border-radius: 14px; background: var(--purple); font-size: 24px; }
.order-glance div:not(.bag) { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; }
.order-glance small { grid-column: 1 / -1; color: #8e899a; }
.order-glance strong { color: #4a30bf; font-size: 24px; }
.order-glance p { margin: 0; color: #a29eaa; font-size: 11px; }

.style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.style-tile { min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px; color: #fff; border: 2px solid #ffffff55; border-radius: 14px; box-shadow: inset 0 0 18px #fff2; cursor: pointer; }
.style-tile i { font-style: normal; font-size: 25px; }
.style-tile strong { font-size: 12px; }
.style-tile span { padding: 5px 10px; color: #4930b8; border-radius: 20px; background: #fff; font-size: 9px; font-weight: 800; }
.style-tile.blue { background: linear-gradient(145deg, #2475ef, #3345bb); }
.style-tile.orange { background: linear-gradient(145deg, #ffbe24, #ed721d); }
.style-tile.dark { background: linear-gradient(145deg, #596174, #212533); }
.style-tile.gold { background: linear-gradient(145deg, #f7c34a, #c78a17); }
.style-tile.rose { background: linear-gradient(145deg, #ff766e, #d33b4d); }
.style-tile.red { background: linear-gradient(145deg, #ed4457, #a91935); }
.style-tile.pink { background: linear-gradient(145deg, #ff91bf, #d8498b); }

.create-page { min-height: 820px; padding: 22px 20px 36px; background: linear-gradient(180deg, #f5f2ff 0, #fff 210px); }
.create-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 23px; }
.create-intro > i { width: 50px; height: 50px; display: grid; place-items: center; color: #fff; border-radius: 16px; background: linear-gradient(145deg, #8066ee, #4428bd); box-shadow: 0 10px 25px #5c42d633; font-size: 24px; font-style: normal; }
.create-intro h1 { margin: 0 0 5px; font-size: 21px; }
.create-intro p { margin: 0; color: #8f8a97; font-size: 11px; }
.create-form { padding: 20px; border: 1px solid #efedf4; border-radius: 20px; background: #fff; box-shadow: 0 12px 36px #4a367711; }
.create-form label { display: block; margin-bottom: 16px; }
.create-form label > span { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 800; }
.create-form input, .create-form textarea, .create-form select {
  width: 100%;
  border: 1px solid #e8e5ec;
  border-radius: 12px;
  outline: 0;
  background: #faf9fb;
  transition: border-color .2s, box-shadow .2s;
}
.create-form input, .create-form select { height: 45px; padding: 0 13px; }
.create-form textarea { min-height: 76px; padding: 12px 13px; resize: vertical; }
.create-form input:focus, .create-form textarea:focus, .create-form select:focus { border-color: #8067e8; box-shadow: 0 0 0 3px #7056dc16; }
.money-input { position: relative; }
.money-input b { position: absolute; z-index: 2; left: 14px; top: 50%; color: #4e34c6; transform: translateY(-50%); }
.money-input input { padding-left: 34px; color: #3e2ab1; font-size: 18px; font-weight: 800; }
.create-safety { margin: 3px 0 18px; padding: 13px; border-radius: 12px; background: #fff9dc; }
.create-safety b { color: #8a7100; font-size: 11px; }
.create-safety p { margin: 5px 0 0; color: #8f8870; font-size: 10px; line-height: 1.55; }
.create-submit { width: 100%; height: 48px; color: #fff; border: 0; border-radius: 24px; background: linear-gradient(100deg, #6f55dc, #4b2fc1); font-weight: 900; box-shadow: 0 10px 24px #5c42d62c; cursor: pointer; }
.create-submit:disabled { opacity: .65; cursor: wait; }

.mine-page { min-height: 820px; padding: 24px 20px 110px; background: linear-gradient(180deg, #f1edff 0, #f7f6fa 260px); }
.mine-profile { display: flex; align-items: center; gap: 14px; padding: 8px 5px 22px; }
.mine-avatar { width: 58px; height: 58px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(145deg, #8066ee, #4327bc); box-shadow: 0 10px 24px #5c42d637; font-size: 24px; font-weight: 900; }
.mine-profile h1 { margin: 0 0 5px; font-size: 20px; }
.mine-profile p { margin: 0; color: #87818f; font-size: 11px; }
.mine-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; padding: 18px 8px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px #38266a10; }
.mine-stats div { display: grid; gap: 5px; text-align: center; }
.mine-stats div + div { border-left: 1px solid #eeebf2; }
.mine-stats strong { color: #4e34c6; font-size: 22px; }
.mine-stats span { color: #9993a0; font-size: 10px; }
.mine-card { overflow: hidden; padding: 7px 16px 2px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px #38266a0c; }
.mine-card h2 { margin: 10px 0 5px; font-size: 14px; }
.mine-card button { width: 100%; height: 58px; display: flex; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid #f0edf3; background: transparent; cursor: pointer; }
.mine-card button span { display: flex; align-items: center; gap: 11px; }
.mine-card button i { width: 30px; height: 30px; display: grid; place-items: center; color: #fff; border-radius: 9px; background: #674bd5; font-style: normal; font-weight: 900; }
.mine-card button b { font-size: 12px; }
.mine-card button em { color: #b3aeba; font-size: 20px; font-style: normal; }
.mine-security { margin-top: 16px; padding: 15px; border-radius: 14px; background: #fff9dc; }
.mine-security b { color: #887000; font-size: 11px; }
.mine-security p { margin: 6px 0 0; color: #89816a; font-size: 10px; line-height: 1.6; }

.order-page {
  --platform: #5c42d6;
  --platform-soft: #f5f2ff;
  --platform-text: #fff;
  min-height: 780px;
  padding: 18px 22px 36px;
  background: linear-gradient(180deg, var(--platform-soft) 0, #fff 215px);
}
.platform-strip { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-bottom: 20px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 8px 25px #24203310; }
.platform-strip > span { width: 44px; height: 44px; display: grid; place-items: center; color: var(--platform-text); border-radius: 12px; background: var(--platform); font-size: 19px; font-weight: 900; }
.platform-strip strong, .platform-strip small { display: block; }
.platform-strip strong { color: var(--platform); font-size: 14px; }
.platform-strip small { margin-top: 3px; color: #a19ba7; font-size: 9px; }
.platform-strip > b { color: #aaa5b0; font-size: 8px; }
.theme-taobao { --platform: #ff5000; --platform-soft: #fff2ea; }
.theme-tmall { --platform: #ff0036; --platform-soft: #fff0f3; }
.theme-pinduoduo { --platform: #e02e24; --platform-soft: #fff0ef; }
.theme-jd { --platform: #e1251b; --platform-soft: #fff0ef; }
.theme-meituan { --platform: #ffd100; --platform-soft: #fff9dc; --platform-text: #2b2600; }
.theme-eleme { --platform: #2395ff; --platform-soft: #eef7ff; }
.theme-douyin { --platform: #17171c; --platform-soft: #f1fbfb; }
.theme-xiaohongshu { --platform: #ff2442; --platform-soft: #fff0f2; }
.theme-vip { --platform: #f10180; --platform-soft: #fff0f8; }
.theme-suning { --platform: #198bff; --platform-soft: #eef7ff; }
.theme-generic { --platform: #5c42d6; --platform-soft: #f5f2ff; }
.requester { display: flex; align-items: center; gap: 12px; padding: 5px 0 28px; }
.requester-avatar { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: var(--platform); }
.requester strong { font-size: 14px; }
.requester p { margin: 4px 0 0; color: #a19da7; font-size: 10px; }
.amount-block { text-align: center; }
.amount-block > p { margin: 0; font-size: 13px; font-weight: 700; }
.amount-block h1 { margin: 7px 0 5px; font-size: 40px; letter-spacing: -.04em; }
.amount-block h1 small { margin-right: 5px; font-size: 20px; }
.countdown { color: #96919c; font-size: 11px; }
.countdown b { display: inline-grid; min-width: 23px; height: 22px; place-items: center; margin: 0 3px; color: #fff; border-radius: 5px; background: #3c3841; font-size: 11px; }
.rules { margin: 32px 0 22px; padding: 15px; border-radius: 12px; background: #fffce9; }
.rules h3 { margin: 0 0 9px; color: var(--platform); font-size: 12px; }
.rules p { margin: 5px 0; color: #8b8675; font-size: 10px; line-height: 1.6; }
.primary-action, .wechat-pay { width: 100%; height: 48px; color: #272300; border: 0; border-radius: 24px; background: var(--yellow); font-weight: 900; cursor: pointer; box-shadow: 0 8px 20px #ffe30033; }
.wechat-pay { color: #fff; background: #07c160; box-shadow: 0 8px 20px #07c16022; }
.platform-pay { color: var(--platform-text); background: var(--platform); box-shadow: 0 8px 20px #00000018; }
.platform-theme .secondary-action { color: var(--platform); border-color: var(--platform); }
.secondary-action { width: 100%; height: 45px; margin-top: 12px; color: #c5a900; border: 1px solid #f0d900; border-radius: 23px; background: #fff; font-weight: 700; cursor: pointer; }
.order-product { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.order-product .product-art { min-height: 62px; border-radius: 10px; }
.order-product .product-art span { width: 30px; height: 42px; border-radius: 6px 6px 10px 10px; font-size: 13px; }
.order-product .product-art i { display: none; }
.order-product div:nth-child(2) { min-width: 0; }
.order-product small, .order-product strong, .order-product p { display: block; margin: 0 0 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.order-product small, .order-product p { color: #aaa5af; font-size: 9px; }
.order-product strong { font-size: 12px; }
.order-product > b { font-size: 13px; }
.source-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; color: inherit; border: 1px solid #e8e4f5; border-radius: 13px; background: #f9f7ff; text-decoration: none; }
.source-card div { min-width: 0; }
.source-card small, .source-card strong, .source-card p { display: block; }
.source-card small { color: #97919f; font-size: 9px; }
.source-card strong { margin: 3px 0; color: #4e34c6; font-size: 12px; }
.source-card p { margin: 0; overflow: hidden; color: #aaa5b0; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.source-card > b { flex: 0 0 auto; color: #5c42d6; font-size: 10px; }
.order-note { margin-top: 12px; padding: 13px; border-radius: 12px; background: #f8f7f9; }
.order-note small { color: #9994a0; font-size: 9px; }
.order-note p { margin: 5px 0 0; font-size: 11px; line-height: 1.55; }
.safe-tip { margin-top: 46px; color: #a7a2ac; text-align: center; font-size: 10px; }

.loading-page { min-height: 670px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.loading-page h2 { margin: 20px 0 7px; font-size: 19px; }
.loading-page p { margin: 0 0 24px; color: #9a95a1; font-size: 12px; }
.loading-page .primary-action { max-width: 250px; }
.loading-ring { width: 48px; height: 48px; border: 4px solid #e9e3ff; border-top-color: var(--purple); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-mark { width: 58px; height: 58px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #ef5668; font-size: 30px; font-weight: 900; }

.success-page { --platform: #5c42d6; --platform-soft: #f5f2ff; --platform-text: #fff; min-height: 760px; padding: 48px 24px 36px; text-align: center; background: linear-gradient(var(--platform-soft), #fff 44%); }
.success-platform { display: inline-flex; margin-bottom: 22px; padding: 7px 13px; color: var(--platform); border: 1px solid #dedbe5; border-radius: 20px; background: #fff; font-size: 11px; font-weight: 800; }
.success-mark { width: 72px; height: 72px; display: grid; place-items: center; margin: auto; color: var(--platform-text); border-radius: 50%; background: var(--platform); box-shadow: 0 12px 30px #2222; font-size: 38px; }
.success-page h1 { margin: 20px 0 5px; font-size: 25px; }
.success-page > p { margin: 0 0 16px; color: #9b97a1; }
.success-page > strong { display: block; font-size: 38px; }
.success-page article { display: grid; grid-template-columns: auto 1fr; gap: 14px; margin: 38px 0 26px; padding: 20px; text-align: left; border-radius: 16px; background: #f8f8fa; font-size: 12px; }
.success-page article span { color: #98949e; }
.success-page article b { text-align: right; }
.success-page article b.green { color: #07a950; }
.success-page .primary-action { color: var(--platform-text); background: var(--platform); }

.sheet-layer { position: fixed; z-index: 50; inset: 0; display: grid; place-items: end center; }
.sheet-mask { position: absolute; inset: 0; width: 100%; border: 0; background: #17111b99; }
.share-sheet { position: relative; z-index: 2; width: min(100%, 430px); padding: 10px 22px max(20px, env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0; background: #fff; animation: rise .24s ease-out; }
@keyframes rise { from { transform: translateY(100%); } }
.grabber { width: 40px; height: 4px; margin: 0 auto 18px; border-radius: 9px; background: #dedbe2; }
.share-sheet h2 { margin: 0; font-size: 20px; }
.share-sheet > p { margin: 5px 0 18px; color: #9995a0; font-size: 12px; }
.share-preview { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; padding: 13px; border-radius: 15px; background: #f7f6f9; }
.share-preview .product-art { min-height: 62px; }
.share-preview .product-art span { width: 28px; height: 40px; font-size: 12px; }
.share-preview .product-art i { display: none; }
.share-preview p { margin: 4px 0 0; color: #8e8996; font-size: 11px; }
.share-confirm, .share-cancel { width: 100%; height: 46px; margin-top: 14px; border: 0; border-radius: 23px; font-weight: 800; cursor: pointer; }
.share-confirm { color: #fff; background: #07c160; }
.share-cancel { margin-top: 8px; background: #f3f2f5; }

.toast { position: fixed; z-index: 60; inset: 50% auto auto 50%; min-width: 112px; padding: 18px 16px; display: grid; place-items: center; gap: 7px; color: #fff; border-radius: 13px; background: #242128dd; transform: translate(-50%, -50%); font-size: 26px; box-shadow: 0 12px 40px #0003; }
.toast span { font-size: 12px; }
.desktop-note { margin: 13px 0 0; color: #655e73; text-align: center; font-size: 12px; }

@media (max-width: 520px) {
  html, body, .app-shell { background: #fff; }
  .app-shell { display: block; min-height: 100svh; padding: 0; }
  .phone-stage { width: 100%; min-height: 100svh; max-height: none; border-radius: 0; box-shadow: none; }
  .desktop-note { display: none; }
}