:root {
  /* 来源：用户指定收益数字截图；仅供界面演示。统一金融红色，原图片颜色按来源保留。 */
  --accent-red: #d8233b;
  --focus-red: #b71f34;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: #222;
  background: #e9edf2;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; padding: 0; background: none; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--focus-red); outline-offset: 3px; }
button:active { opacity: .72; }
img { display: block; max-width: 100%; pointer-events: none; }
svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
::selection { background: #f9d5de; color: #6d0923; }
.phone-app {
  --u: calc(100cqw / 375);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  position: relative;
  isolation: isolate;
  width: 375px;
  max-width: 100vw;
  height: min(812px, 100dvh);
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
  box-shadow: 0 12px 48px #00000017;
}
.page-scroll { height: 100%; overflow: auto; overscroll-behavior-y: contain; scrollbar-width: none; padding-bottom: calc(54 * var(--u) + var(--safe-bottom)); outline: none; }
.page-scroll::-webkit-scrollbar { display: none; }
.hero {
  position: relative;
  height: calc((821 / 3 - 44) * var(--u) + var(--safe-top));
  background: #617fac url("./assets/top-background.png") left calc(var(--safe-top) - 44 * var(--u)) / 100% calc(529 / 3 * var(--u)) no-repeat;
}
.home-header { position: absolute; inset: 0 0 auto; height: calc(44 * var(--u) + var(--safe-top)); z-index: 20; pointer-events: none; }
.home-header button, .home-header input, .home-header form { pointer-events: auto; }
/* iOS paints an opaque system bar in standalone mode. Blend its solid tint
   into the reference artwork instead of leaving a sharp horizontal edge. */
:root.ios-standalone, .ios-standalone body {
  background: var(--system-bar-color, #5d73a0);
}
.ios-standalone .phone-app:not(.is-scrolled) .home-header {
  background: linear-gradient(to bottom,
    #5d73a0 0, #5d73a0 var(--safe-top),
    rgba(93, 115, 160, .55) calc(var(--safe-top) + 18 * var(--u)),
    transparent 100%);
}
.is-scrolled .home-header { background: #fff; }
.is-scrolled .toolbar { color: #222; }
.is-scrolled .search { background: #f4f4f4; color: #666; border-color: #f4f4f4; }
.is-scrolled .search input { color: #666; caret-color: #222; }
.is-scrolled .search input::placeholder { color: #666; }
.is-scrolled .search button::before { background: linear-gradient(transparent, #969696, transparent); }
.toolbar { position: absolute; inset: calc(1 * var(--u) + var(--safe-top)) 0 auto; height: calc(43 * var(--u)); color: #fff; }
.header-tool { position: absolute; width: calc(34 * var(--u)); height: calc(41 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.header-tool img { object-fit: contain; }
.header-tool span { position: absolute; top: calc(22.5 * var(--u)); white-space: nowrap; font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); }
.exit-tool { left: calc(5 * var(--u)); top: calc(3 * var(--u)); }
.exit-tool img { width: calc(67 / 3 * var(--u)); height: calc(67 / 3 * var(--u)); }
.version-tool { left: calc(248 * var(--u)); top: calc(3 * var(--u)); }
.version-tool img { width: calc(76 / 3 * var(--u)); height: calc(62 / 3 * var(--u)); }
.support-tool { left: calc(292.3 * var(--u)); top: calc(.7 * var(--u)); }
.support-tool img { width: calc(82 / 3 * var(--u)); height: calc(26 * var(--u)); }
.messages-tool { left: calc(337.5 * var(--u)); top: calc(.3 * var(--u)); }
.messages-tool img { width: calc(83 / 3 * var(--u)); height: calc(79 / 3 * var(--u)); }
.support-tool span, .messages-tool span { top: calc(24.8 * var(--u)); }
.search {
  position: absolute; left: calc(48 * var(--u)); top: calc(4 * var(--u));
  width: calc(191 * var(--u)); height: calc(33 * var(--u));
  display: flex; align-items: center; border: calc(1 * var(--u)) solid #d5e1efa6;
  border-radius: calc(21 * var(--u)); color: #fff;
}
.search-icon { flex: 0 0 auto; width: calc(16.5 * var(--u)); height: calc(16.5 * var(--u)); margin-left: calc(8.5 * var(--u)); stroke-width: 1.4; }
.search input { width: 100%; min-width: 0; height: 100%; border: 0; padding: 0 calc(6 * var(--u)); background: none; color: #fff; font-size: calc(14.2 * var(--u)); caret-color: #fff; outline-offset: -3px; }
.search input:focus, .search input:focus-visible { outline: none; }
.search input::placeholder { color: #fff; opacity: .95; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search button { position: relative; flex: 0 0 calc(45 * var(--u)); height: 100%; font-size: calc(14.2 * var(--u)); }
.search button::before { content: ""; position: absolute; left: 0; top: calc(8 * var(--u)); bottom: calc(8 * var(--u)); width: calc(1 * var(--u)); background: linear-gradient(transparent, #e7f3ff, transparent); }
.phone-app:not(.is-scrolled) .home-header .search {
  background: radial-gradient(ellipse at 13% -18%, #f0fffda8 0, #e3f9ff24 22%, transparent 45%), linear-gradient(165deg, #e8f7ff12, #a4bdd308 52%, #526c9805);
  border-color: #d8eefab8;
  box-shadow: inset 0 calc(.667 * var(--u)) calc(1.667 * var(--u)) #efffff63, inset 0 calc(-.667 * var(--u)) calc(.667 * var(--u)) #dcefff26;
  -webkit-backdrop-filter: blur(calc(4 * var(--u))) saturate(1.1);
  backdrop-filter: blur(calc(4 * var(--u))) saturate(1.1);
}
.quick-actions { position: absolute; top: calc(59 * var(--u) + var(--safe-top)); left: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.quick-actions button { display: flex; flex-direction: column; align-items: center; min-height: calc(55 * var(--u)); }
.quick-actions img { width: calc(34.5 * var(--u)); height: calc(34.7 * var(--u)); }
.quick-actions span { margin-top: calc(1.5 * var(--u)); line-height: calc(22 * var(--u)); font-size: calc(14 * var(--u)); white-space: nowrap; color: #15222b; }
.hero-campaign { position: absolute; left: 0; top: calc((529 / 3 - 44) * var(--u) + var(--safe-top)); width: 100%; }
.hero-campaign img { width: 100%; height: calc(292 / 3 * var(--u)); }
.services { height: calc(166 * var(--u)); display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: calc(80 * var(--u)) calc(86 * var(--u)); }
.services button { position: relative; }
.services img { position: absolute; left: 50%; transform: translateX(-50%); object-fit: contain; }
.services button:nth-child(1) img { top: calc(9.01 * var(--u)); width: calc(85 / 3 * var(--u)); height: calc(94 / 3 * var(--u)); }
.services button:nth-child(2) img { top: calc(8.68 * var(--u)); width: calc(94 / 3 * var(--u)); height: calc(32 * var(--u)); }
.services button:nth-child(3) img { top: calc(9.01 * var(--u)); width: calc(32 * var(--u)); height: calc(95 / 3 * var(--u)); }
.services button:nth-child(4) img { top: calc(9.01 * var(--u)); width: calc(33 * var(--u)); height: calc(95 / 3 * var(--u)); }
.services button:nth-child(5) img { top: calc(6.34 * var(--u)); width: calc(100 / 3 * var(--u)); height: calc(106 / 3 * var(--u)); }
.services button:nth-child(6) img { top: calc(9.68 * var(--u)); width: calc(103 / 3 * var(--u)); height: calc(89 / 3 * var(--u)); }
.services button:nth-child(7) img { top: calc(8.01 * var(--u)); width: calc(98 / 3 * var(--u)); height: calc(32 * var(--u)); }
.services button:nth-child(8) img { top: calc(8.01 * var(--u)); width: calc(95 / 3 * var(--u)); height: calc(95 / 3 * var(--u)); }
.services button:nth-child(9) img { top: calc(9.68 * var(--u)); width: calc(109 / 3 * var(--u)); height: calc(89 / 3 * var(--u)); }
.services button:nth-child(10) img { top: calc(10.34 * var(--u)); width: calc(88 / 3 * var(--u)); height: calc(28 * var(--u)); }
.services span { position: absolute; top: calc(44.6 * var(--u)); left: 0; width: 100%; text-align: center; font-size: calc(12 * var(--u)); line-height: calc(18.3 * var(--u)); white-space: nowrap; }
.news { position: relative; display: flex; width: calc(343 * var(--u)); height: calc(67.2 * var(--u)); margin: 0 calc(16 * var(--u)); text-align: left; background: linear-gradient(#f4f7fd, #fff 98%); border-radius: calc(6 * var(--u)); }
.news-brand { position: absolute; top: calc(13.5 * var(--u)); left: calc(13.7 * var(--u)); width: calc(37 * var(--u)); height: calc(35.67 * var(--u)); }
.news-copy { position: absolute; top: calc(12.1 * var(--u)); left: calc(74 * var(--u)); right: calc(25 * var(--u)); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: 0; }
.news-copy > span { display: block; white-space: nowrap; }
.news-chevron { position: absolute; top: calc(25 * var(--u)); right: calc(23 * var(--u)); width: calc(6 * var(--u)); height: calc(11 * var(--u)); color: var(--accent-red); stroke-width: 1.5; }
.travel-campaign { position: relative; display: block; width: calc(1034 / 3 * var(--u)); height: calc(287 / 3 * var(--u)); margin: calc(1.5 * var(--u)) 0 0 calc(16 * var(--u)); }
.home-banner-slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.home-banner-slide.is-current { opacity: 1; pointer-events: auto; z-index: 2; }
.home-banner-slide.is-previous { opacity: 1; z-index: 1; }
.home-banner-slide img { width: 100%; height: 100%; object-fit: contain; }
.home-banner-new img { position: absolute; left: calc(.833 * var(--u)); top: calc(3.833 * var(--u)); width: calc(343 * var(--u)); height: calc(88 * var(--u)); }
.wealth-section { margin: calc(10 * var(--u)) calc(16 * var(--u)) 0; }
.wealth-header { display: flex; align-items: center; justify-content: space-between; height: calc(27 * var(--u)); }
.wealth-header h1 { margin: 0; font-size: calc(18.1 * var(--u)); line-height: calc(27 * var(--u)); font-weight: 700; }
.wealth-header button { display: flex; align-items: center; color: #666; font-size: calc(13.5 * var(--u)); line-height: calc(22 * var(--u)); white-space: nowrap; }
.wealth-header svg { width: calc(7 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(2 * var(--u)); stroke-width: 1.7; }
.wealth-card { display: block; text-align: left; width: 100%; margin-top: calc(7 * var(--u)); padding: calc(8 * var(--u)); background: linear-gradient(115deg, #fff3ee, #fffaf7 58%, #fff); border-radius: calc(9 * var(--u)); }
.wealth-card-inner { display: grid; grid-template-columns: calc(118 * var(--u)) 1fr; column-gap: 0; row-gap: calc(2.3 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); background: #fff; }
.yield, .product-summary { display: flex; flex-direction: column; }
.yield strong { color: var(--accent-red); font-family: Arial, sans-serif; font-size: calc(23 * var(--u)); font-weight: 700; line-height: calc(29 * var(--u)); }
.yield > span { margin-top: calc(2 * var(--u)); color: #666; font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); }
.product-summary strong { margin-top: calc(1.3 * var(--u)); font-size: calc(16.3 * var(--u)); line-height: calc(25 * var(--u)); font-weight: 600; white-space: nowrap; }
.product-summary > span { margin-top: calc(2.5 * var(--u)); color: #666; font-size: calc(14.5 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap; }
.product-tag { display: inline-block; padding: 0 calc(3 * var(--u)); border: calc(1 * var(--u)) solid #777; border-radius: calc(1.3 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: calc(14.5 * var(--u)); }
.product-period { grid-column: 1 / -1; font-size: calc(12.2 * var(--u)); line-height: calc(20 * var(--u)); color: #666; white-space: nowrap; }
.product-period > span { margin-left: calc(.67 * var(--u)); letter-spacing: calc(.65 * var(--u)); }
.wealth-panel { margin-top: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); background: linear-gradient(to top, #fefaf7 0 calc(73 * var(--u)), transparent calc(73 * var(--u))), linear-gradient(115deg, #fff3ee, #fffaf7 58%, #fff9ef); border-radius: calc(9 * var(--u)); }
.wealth-panel .wealth-card { margin: 0; padding: 0; background: #fff; border-radius: 0; }
.wealth-panel .wealth-card-inner { padding-bottom: 0; }
.risk-notice { display: flex; align-items: center; gap: calc(6 * var(--u)); width: 100%; height: calc(25 * var(--u)); margin-top: calc(1.7 * var(--u)); padding: 0 calc(8 * var(--u)); background: #fffbef; color: #6a6559; font-size: calc(12.2 * var(--u)); line-height: calc(20 * var(--u)); text-align: left; }
.risk-notice span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.risk-notice span:last-child { flex-shrink: 0; }
.fund-card { display: block; width: 100%; margin-top: calc(9 * var(--u)); background: #fff; text-align: left; }
.fund-card-inner { display: grid; grid-template-columns: calc(118 * var(--u)) 1fr; height: calc(61 * var(--u)); padding: calc(6 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); }
.fund-card .yield > span { margin-top: 0; }
.fund-card .product-summary > span { font-size: calc(14 * var(--u)); }
.fund-card .product-tag { font-size: calc(12.5 * var(--u)); }
.market-row { display: grid; grid-template-columns: calc(118 * var(--u)) calc(118 * var(--u)) 1fr; height: calc(69 * var(--u)); padding: calc(12 * var(--u)) calc(8 * var(--u)) calc(9 * var(--u)); }
.market-row button { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.market-row strong { display: flex; align-items: center; gap: calc(2 * var(--u)); font: 700 calc(16.8 * var(--u))/calc(24 * var(--u)) Arial, sans-serif; white-space: nowrap; }
.market-row svg { width: calc(10 * var(--u)); height: calc(13 * var(--u)); stroke-width: 1.9; }
.market-row button > span { margin-top: 0; font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); white-space: nowrap; }
.market-down { color: #09845e; }
.market-up { color: var(--accent-red); }
.hot-section { margin: calc(17 * var(--u)) calc(16 * var(--u)) 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; height: calc(27 * var(--u)); }
.section-heading h2 { margin: 0; font-size: calc(18.1 * var(--u)); line-height: calc(27 * var(--u)); font-weight: 700; }
.section-heading > button { display: flex; align-items: center; padding-right: calc(2 * var(--u)); padding-top: calc(2 * var(--u)); color: #666; font-size: calc(13.5 * var(--u)); line-height: calc(22 * var(--u)); white-space: nowrap; }
.section-heading svg { width: calc(7 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(2 * var(--u)); stroke-width: 1.7; }
.activity-carousel { position: relative; width: 100%; height: calc(184 * var(--u)); margin-top: calc(10 * var(--u)); overflow: hidden; border-radius: calc(10 * var(--u)); background: #fff1df url("./assets/below-activity-background.png") center / 100% 100% no-repeat; }
.activity-counter { position: absolute; top: calc(9.5 * var(--u)); right: calc(8 * var(--u)); display: flex; align-items: baseline; color: #4b2a10; z-index: 3; pointer-events: none; }
.activity-counter strong { font: 700 calc(14.5 * var(--u))/calc(20 * var(--u)) Arial, sans-serif; }
.activity-counter > span { font: 400 calc(12 * var(--u))/calc(20 * var(--u)) Arial, sans-serif; }
.activity-card { position: absolute; left: 0; top: 0; width: calc(148 * var(--u)); height: calc(176.333 * var(--u)); text-align: center; transform-origin: 0 0; }
.activity-card[data-slot='0'] { transform: translate3d(calc(8 * var(--u)), calc(7.67 * var(--u)), 0) scale(1); z-index: 2; }
.activity-card[data-slot='1'] { transform: translate3d(calc(167.1417 * var(--u)), calc(36 * var(--u)), 0) scale(.6625); }
.activity-card[data-slot='2'] { transform: translate3d(calc(262.8084 * var(--u)), calc(36 * var(--u)), 0) scale(.6625); }
.activity-card[data-slot='3'] { transform: translate3d(calc(358.4751 * var(--u)), calc(36 * var(--u)), 0) scale(.6625); }
.activity-card > img { position: absolute; left: calc(22 / 3 * var(--u)); top: 0; width: calc(400 / 3 * var(--u)); height: calc(397 / 3 * var(--u)); object-fit: contain; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; }
.activity-main-caption { position: absolute; top: calc(397 / 3 * var(--u)); left: 0; display: flex; flex-direction: column; width: 100%; min-height: calc(44 * var(--u)); border: calc(.8 * var(--u)) solid #ebcdaa; border-bottom: 0; border-radius: calc(4 * var(--u)) calc(4 * var(--u)) 0 0; background: #ffecd9; padding: calc(3.5 * var(--u)) calc(7 * var(--u)); color: #482d0a; opacity: 0; }
.activity-card[data-slot='0'] .activity-main-caption { opacity: 1; }
.activity-main-caption strong { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 600; white-space: nowrap; }
.activity-main-caption > span { margin-top: calc(-.5 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-small-caption { position: absolute; left: calc(22 / 3 * var(--u)); top: calc(397 / 3 * var(--u)); display: block; width: calc(400 / 3 * var(--u)); height: calc(24 / .6625 * var(--u)); font-size: calc(12.5 / .6625 * var(--u)); line-height: calc(24 / .6625 * var(--u)); color: #fff; background: #ff9b32; border-radius: 0 0 calc(4 * var(--u)) calc(4 * var(--u)); overflow: hidden; white-space: nowrap; opacity: 1; }
.activity-card[data-slot='0'] .activity-small-caption { opacity: 0; }
.cross-section { margin: calc(15 * var(--u)) calc(16 * var(--u)) calc(15 * var(--u)); }
.cross-panel { display: flex; justify-content: space-between; gap: calc(8.33 * var(--u)); width: 100%; height: calc(145 * var(--u)); padding: calc(9 * var(--u)) calc(8 * var(--u)) calc(3.33 * var(--u)); margin-top: calc(10 * var(--u)); background: #f8f8f8; border-radius: calc(7 * var(--u)); }
.forex-services { flex: 0 0 calc(120 * var(--u)); display: grid; grid-template-rows: repeat(3, 1fr); background: #fff; }
.forex-services button { display: flex; align-items: center; gap: calc(12 * var(--u)); padding-left: calc(11.33 * var(--u)); text-align: left; }
.forex-services img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); object-fit: contain; }
.forex-services span { font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap; }
.forex-campaign { flex: 0 0 calc(593 / 3 * var(--u)); height: calc(398 / 3 * var(--u)); border-radius: calc(4 * var(--u)); overflow: hidden; }
.forex-campaign img { width: 100%; height: 100%; }
.floating-helper { position: absolute; top: calc((1483 / 3 - 44) * var(--u) + var(--safe-top)); right: 0; width: calc(28 * var(--u)); height: calc(194 / 3 * var(--u)); z-index: 18; }
.floating-helper img { width: 100%; height: 100%; }
.bottom-nav { position: absolute; left: 0; right: 0; bottom: 0; height: calc(50 * var(--u) + var(--safe-bottom)); background: #fff; display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: var(--safe-bottom); z-index: 10; }
.bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; color: #666; padding-top: calc(1 * var(--u)); }
.bottom-nav img { position: absolute; object-fit: contain; }
.bottom-nav button:nth-child(1) img { top: calc(.33 * var(--u)); width: calc(104 / 3 * var(--u)); height: calc(30 * var(--u)); }
.bottom-nav button:nth-child(2) img { top: calc(3 * var(--u)); width: calc(31 * var(--u)); height: calc(27 * var(--u)); }
.bottom-nav button:nth-child(3) img { top: calc(1 * var(--u)); width: calc(31 * var(--u)); height: calc(91 / 3 * var(--u)); }
.bottom-nav button:nth-child(4) img { top: calc(1.67 * var(--u)); width: calc(92 / 3 * var(--u)); height: calc(85 / 3 * var(--u)); }
.bottom-nav button:nth-child(5) img { top: calc(2.67 * var(--u)); width: calc(97 / 3 * var(--u)); height: calc(29 * var(--u)); }
.bottom-nav span { position: absolute; top: calc(31 * var(--u)); font-size: calc(12.3 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap; }
.bottom-nav .active { color: var(--accent-red); }
.bottom-nav button:first-child:not(.active) img { filter: grayscale(1); }
.bottom-nav button.active:not(:first-child) img { filter: brightness(.58) sepia(1) saturate(8) hue-rotate(314deg); }
.bottom-nav button:is([data-route="credit"], [data-route="life"], [data-route="mine"]) img { transform: scale(1); transition: transform 150ms cubic-bezier(.16, 1, .3, 1); }
.bottom-nav button.active:is([data-route="credit"], [data-route="life"], [data-route="mine"]) img { filter: none; transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) {
  .bottom-nav button:is([data-route="credit"], [data-route="life"], [data-route="mine"]) img { transition: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.secondary-view { min-height: 100%; font-size: calc(15 * var(--u)); background: #f7f8fa; }
.secondary-status { height: var(--safe-top); background: #fff; }
.secondary-header { display: flex; align-items: center; position: relative; height: calc(46 * var(--u)); background: #fff; justify-content: center; }
.secondary-header h1 { margin: 0; max-width: 80%; font-size: calc(17 * var(--u)); font-weight: 500; outline: 0; }
.back-button { position: absolute; left: calc(7 * var(--u)); width: calc(44 * var(--u)); height: 100%; display: grid; place-items: center; }
.back-button svg { width: calc(10 * var(--u)); height: calc(20 * var(--u)); stroke-width: 1.8; }
.secondary-content { padding: calc(24 * var(--u)) calc(20 * var(--u)); line-height: 1.65; }
.on-static-main .secondary-status { position: sticky; top: 0; z-index: 21; }
.on-static-main .secondary-header { position: sticky; top: var(--safe-top); z-index: 20; }
.on-static-main .secondary-content { padding: 0; line-height: 1.5; }
.empty-state { text-align: center; padding: calc(52 * var(--u)) 0; }
.empty-state img { width: calc(48 * var(--u)); height: calc(48 * var(--u)); object-fit: contain; margin: 0 auto calc(20 * var(--u)); }
.empty-state h2 { margin: 0 0 calc(8 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 500; }
.empty-state p { margin: 0; color: #73767b; font-size: calc(14 * var(--u)); }
.primary-button { margin-top: calc(28 * var(--u)); padding: calc(10 * var(--u)) calc(35 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--accent-red); color: #fff; font-size: calc(14 * var(--u)); }
.search-results { list-style: none; padding: 0; margin: calc(15 * var(--u)) 0; }
.search-results button { display: flex; align-items: center; width: 100%; padding: calc(15 * var(--u)) calc(12 * var(--u)); gap: calc(14 * var(--u)); margin-bottom: calc(1 * var(--u)); background: #fff; text-align: left; }
.search-results img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; }
.install-guide { padding-left: calc(22 * var(--u)); }
.install-guide li { margin: calc(9 * var(--u)) 0; }
.detail-image { margin-bottom: calc(22 * var(--u)); width: 100%; }
.detail-number { color: var(--accent-red); font-size: calc(32 * var(--u)); }
.toast { position: absolute; left: 50%; bottom: calc(110 * var(--u)); transform: translateX(-50%); max-width: 88%; background: #252b32ed; color: #fff; border-radius: calc(7 * var(--u)); font-size: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); z-index: 30; white-space: nowrap; }
@media (max-width: 599px) {
  :root { background: #fff; }
  .phone-app { width: 100vw; height: 100dvh; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: toast-in 180ms ease-out; }
  @keyframes toast-in { from { opacity: 0; } to { opacity: 1; } }
}