@font-face { font-family: "Glow Sans SC Extended"; src: url("./public/fonts/GlowSansSC-Extended-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Glow Sans SC Extended"; src: url("./public/fonts/GlowSansSC-Extended-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Glow Sans SC Extended"; src: url("./public/fonts/GlowSansSC-Extended-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Flynn Mono VF"; src: url("./public/fonts/Flynnmono-VF.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "PingFang Local"; src: url("./public/fonts/PingFang Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PingFang Local"; src: url("./public/fonts/PingFang Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PingFang Local"; src: url("./public/fonts/PingFang Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "PingFang Thin"; src: local("PingFang SC Thin"), url("./public/fonts/PingFang Light.ttf") format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Local"; src: url("./public/fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  font-family: "PingFang Local", "PingFang SC", sans-serif;
  color: #383838;
  background: #dedbd8;
  --ink: #383838;
  --paper: #f6efea;
  --white: #f8f8f8;
  --blue: #4dc5ff;
  --yellow: #ffde00;
  --red: #ff646b;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100dvh; display: grid; place-items: center; overflow: hidden; background: #dedbd8; }
button { font: inherit; color: inherit; }
h2, h3, p { margin: 0; }
.mono { font-family: "Flynn Mono VF", ui-monospace, monospace; font-weight: 400; }

.phone { --tab-header-bg: var(--white); --tab-header-line: var(--ink); position: relative; width: 402px; height: 874px; overflow: hidden; background: var(--paper); box-shadow: 0 24px 70px rgb(0 0 0 / 20%); transform: scale(var(--phone-scale, 1)); transform-origin: center center; }
.phone,
.phone * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.phone img { -webkit-user-drag: none; user-drag: none; }
.phone.finance-open.stock-mode,
.phone.my-open.stock-account-mode { --tab-header-bg: var(--ink); --tab-header-line: var(--white); }
.live-status-time {
  position: absolute;
  z-index: 300;
  left: 35.25px;
  top: 18px;
  width: 54px;
  height: 25px;
  display: grid;
  place-items: center;
  background: var(--white);
  color: #0a0a0a;
  font: 600 16px/21px "Inter Local", Inter, sans-serif;
  letter-spacing: -.32px;
  text-align: center;
  pointer-events: none;
}
.phone.finance-open.stock-mode .live-status-time,
.phone.my-open.stock-account-mode .live-status-time {
  background: var(--ink);
  color: var(--white);
}
.top-bars { position: absolute; z-index: 20; inset: 0 0 auto; width: 402px; height: 107px; background: var(--white); }
.tab-header-motion { display: none; position: absolute; z-index: 30; inset: 0; width: 402px; height: 107px; overflow: hidden; pointer-events: none; }
.tab-header-motion::before { content: ""; position: absolute; z-index: 0; left: 0; top: 61px; width: 402px; height: 46px; background: var(--tab-header-bg); }
.tab-header-motion-mask,
.tab-header-motion-line { position: absolute; display: block; }
.tab-header-motion-mask { z-index: 1; background: var(--tab-header-bg); }
.tab-header-motion-line { z-index: 2; background: var(--tab-header-line); }
.tab-header-motion-mask.is-horizontal,
.tab-header-motion-line.is-horizontal { left: 0; width: 402px; }
.tab-header-motion-line.is-horizontal { transform: scaleX(0); transform-origin: left center; }
.tab-header-motion-mask.is-horizontal.is-top,
.tab-header-motion-line.is-horizontal.is-top { top: 61.5px; height: 1px; }
.tab-header-motion-mask.is-horizontal.is-bottom,
.tab-header-motion-line.is-horizontal.is-bottom { top: 105px; height: 2px; }
.tab-header-motion-mask.is-vertical { top: 61.5px; width: 2px; height: 45.5px; }
.tab-header-motion-line.is-vertical { top: 62px; width: 1px; height: 44px; }
.tab-header-motion-line.is-vertical { transform: scaleY(0); transform-origin: center top; }
.is-tab-header-entering { background: var(--tab-header-bg) !important; }
.is-tab-header-entering .tab-header-motion { display: block; }
.is-tab-header-entering .tab-header-motion::before { animation: tab-header-nav-content-reveal 280ms ease-out 0ms both; }
.is-tab-header-entering .tab-header-motion-line.is-top { animation: tab-header-horizontal-enter 180ms cubic-bezier(.4,0,.2,1) 0ms both; }
.is-tab-header-entering .tab-header-motion-line.is-bottom { animation: tab-header-horizontal-enter 200ms cubic-bezier(.4,0,.2,1) 130ms both; }
.is-tab-header-entering .tab-header-motion-line.is-vertical { animation: tab-header-vertical-enter 160ms cubic-bezier(.4,0,.2,1) var(--line-delay) both; }
@keyframes tab-header-horizontal-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tab-header-vertical-enter { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes tab-header-nav-content-reveal { from { opacity: 1; } to { opacity: 0; } }
.header-art { display: block; width: 402px; height: 107px; }
.header-hit { position: absolute; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; }
.home-search-hit { left: 88px; top: 67px; width: 249px; height: 34px; }
.finance-search-hit { left: 104px; top: 67px; width: 233px; height: 34px; }
.stock-search-hit { position: absolute; z-index: 25; left: 104px; top: 67px; width: 233px; height: 34px; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.stock-search-hit:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.message-hit { left: 342px; top: 62px; width: 44px; height: 44px; }
.page-message-entry { position: absolute; z-index: 22; left: 342px; top: 62px; width: 44px; height: 44px; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.page-message-entry:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.stock-watchlist-entry { position: absolute; z-index: 22; left: 342px; top: 62px; width: 44px; height: 44px; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.stock-watchlist-entry:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.status-bar { position: relative; height: 62px; }
.status-bar > strong { position: absolute; left: 35.25px; top: 20.17px; width: 54px; height: 21px; text-align: center; font: 600 16px/21px "Inter Local", Inter, sans-serif; letter-spacing: -.32px; }
.island { position: absolute; left: 109px; top: 14px; width: 207px; height: 37px; border-radius: 24px; background: #000; color: var(--white); display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
.island img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); transform: scaleX(-1); }
.island span { font-size: 15px; line-height: 22px; margin-right: 0; font-weight: 500; }
.status-icons { position: absolute; left: 326px; top: 26px; width: 48px; height: 13px; display: flex; align-items: flex-start; gap: 4px; }
.status-icons img:first-child { width: 17px; height: 12px; }
.status-icons img:last-child { width: 27px; height: 13px; }
.global-system-status { position: absolute; z-index: 93; inset: 0 0 auto; width: 402px; height: 62px; background: var(--tab-header-bg); pointer-events: none; }
.global-system-status::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tab-header-line); }
.status-bar > strong,
.status-bar > .island,
.status-bar > .status-icons { visibility: hidden; }

.nav-row { position: relative; height: 44px; border-top: 1px solid var(--ink); border-bottom: 2px solid var(--ink); }
.nav-row > strong { position: absolute; left: 16px; top: -1px; width: 67px; height: 44px; display: grid; place-items: center; border-inline: 1px solid var(--ink); font-family: "Glow Sans SC Extended", sans-serif; font-weight: 500; font-size: 22px; line-height: 26px; }
.search { position: absolute; left: 89px; top: 4px; width: 247px; height: 34px; border: 1px solid var(--ink); background: #f6efea; display: flex; align-items: center; gap: 4px; padding: 0 7px; color: #999; font-size: 13px; font-weight: 500; cursor: pointer; }
.search-symbol { font: 26px/1 Arial, sans-serif; transform: rotate(-18deg); }
.messages { position: absolute; left: 342px; top: 0; width: 44px; height: 42px; border: 0; border-inline: 1px solid var(--ink); background: transparent; display: grid; place-items: center; cursor: pointer; }
.messages img { width: 24px; height: 24px; }

.scroller { position: absolute; inset: 106px 0 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--paper); }
.scroller::-webkit-scrollbar { display: none; }
.content-canvas { position: relative; width: 402px; height: 1104px; }
.content-canvas h2 { position: absolute; left: 28px; font-family: "Glow Sans SC Extended", sans-serif; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: 0; }

.daily h2 { top: 12px; }
.daily-card { position: absolute; left: 16px; top: 40px; width: 370px; height: 121px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.daily-card h3 { position: absolute; left: 11px; top: 11px; font-family: "Glow Sans SC Extended", sans-serif; font-weight: 700; font-size: 22px; line-height: 26px; }
.daily-card > p { position: absolute; left: 11px; top: 45px; color: #666; font-size: 13px; line-height: 18px; }
.lesson-progress { position: absolute; left: 11px; top: 71px; width: 230px; height: 18px; }
.lesson-progress-bar { position: absolute; left: 0; top: 3px; width: 194px; height: 12px; border: 1px solid var(--ink); background: var(--paper); }
.lesson-progress-bar::after { content: ""; position: absolute; left: -1px; top: -1px; width: var(--lesson-progress-width, 96px); height: 12px; background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 14px); transition: width 320ms cubic-bezier(.22,1,.36,1); }
.lesson-progress b { position: absolute; left: 198px; top: 0; font: 400 13px/18px "Flynn Mono VF", ui-monospace, monospace; letter-spacing: 0; }
.lesson-copy { position: absolute; left: 11px; top: 90px; color: #666; font-size: 13px; line-height: 18px; }
.lesson-copy em { color: var(--blue); font: normal 13px/18px "Flynn Mono VF", ui-monospace, monospace; }
.start { position: absolute; left: 255px; top: 74px; width: 102px; height: 30px; padding: 0 4px; border: 1px solid var(--ink); border-radius: 6px; background: var(--blue); color: var(--white); box-shadow: 1px 1px 0 var(--ink); display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 24px; cursor: pointer; }
.menu-indicator { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; font: 400 30px/24px "PingFang Local", sans-serif; transform: translateY(-1px); }

.portfolio h2 { top: 173px; }
.portfolio-card { position: absolute; left: 16px; top: 201px; width: 370px; height: 216px; overflow: hidden; border: 1px solid var(--white); border-radius: 8px; background: #383838; color: var(--white); box-shadow: 1px 1px 0 #383838; }
.grid-paper { position: absolute; inset: 0; background-image: linear-gradient(#ffffff20 1px, transparent 1px), linear-gradient(90deg, #ffffff20 1px, transparent 1px); background-size: 24px 24px; }
.portfolio-name { position: absolute; left: 15px; top: 11px; display: flex; gap: 6px; align-items: center; }
.portfolio-name img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.portfolio-name h3 { color: #ffde00; font-family: "PingFang Local", "PingFang SC", sans-serif; font-size: 17px; line-height: 24px; font-weight: 500; }
.portfolio-name p { color: var(--white); font-size: 13px; line-height: 18px; }
.portfolio-name p b { font: 400 13px/18px "Flynn Mono VF", ui-monospace, monospace; letter-spacing: 0; }
.stat-grid { position: absolute; left: 11px; top: 61px; width: 346px; height: 104px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); box-shadow: 1px 1px 0 var(--white); overflow: hidden; text-align: left; cursor: pointer; }
.stat-grid::before, .stat-grid::after { content: ""; position: absolute; z-index: 1; display: block; background: var(--ink); pointer-events: none; }
.stat-grid::before { left: 172px; top: 7px; bottom: 7px; width: 1px; }
.stat-grid::after { left: 19px; right: 19px; top: 51px; height: 1px; }
.stat-grid > span { position: relative; z-index: 2; padding: 7px 19px; display: flex; flex-direction: column; }
.stat-grid small { color: #666; font-size: 13px; line-height: 18px; }
.stat-grid b { padding-left: 1px; color: var(--ink); font: 700 13px/18px "Flynn Mono VF", ui-monospace, monospace; letter-spacing: 0; white-space: nowrap; display: flex; }
.stat-grid b i { flex: 0 0 12px; font: normal 700 13px/18px "PingFang Local", "PingFang SC", sans-serif; font-style: normal; }
.stat-grid .red { color: var(--red); }
.stat-grid .detail-chevron { position: absolute; z-index: 5; right: -1px; top: 39px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--white) url("./public/assets/purchase-menu-indicator.svg") center / 24px 24px no-repeat; color: var(--ink); font: 400 30px/24px "PingFang Local", sans-serif; letter-spacing: 0; }
.trade-actions { position: absolute; left: 20px; top: 173px; width: 328px; height: 30px; display: grid; grid-template-columns: repeat(4,76px); gap: 8px; }
.trade-actions button { height: 30px; padding: 0 8px; border: 1px solid; border-radius: 6px; background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 24px; cursor: pointer; transition: transform 80ms ease, box-shadow 80ms ease; }
.trade-actions button:active { transform: translate(1px,1px); box-shadow: none; }
.trade-actions img { width: 24px; height: 24px; }
.trade-actions .buy { border-color: #ff6661; box-shadow: 1px 1px 0 #ff6661; }
.trade-actions .sell { border-color: #00ae98; box-shadow: 1px 1px 0 #00ae98, 1px 1px 0 var(--white); }
.trade-actions .history { border-color: #4dc5ff; box-shadow: 1px 1px 0 #4dc5ff, 1px 1px 0 var(--white); }
.trade-actions .holdings { border-color: var(--ink); box-shadow: 1px 1px 0 var(--white); }

.risk h2, .goal h2 { top: 826px; }
.goal h2 { left: 221px; }
.risk article, .goal article { position: absolute; top: 854px; width: 177px; height: 122px; border: 1px solid var(--ink); border-radius: 8px; box-shadow: 1px 1px 0 var(--ink); }
.risk article { left: 16px; padding: 11px; background: var(--blue); color: var(--white); }
.goal article { left: 209px; padding: 11px; background: var(--yellow); }
.risk h3, .goal h3 { font-family: "Glow Sans SC Extended", sans-serif; font-weight: 700; font-size: 22px; line-height: 26px; }
.risk p, .goal p { margin-top: 8px; font-size: 13px; line-height: 18px; letter-spacing: 0; }
.risk p { margin-top: 12px; }
.risk button { position: absolute; left: 11px; top: 79px; width: 102px; height: 30px; padding: 0 4px; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); color: var(--ink); box-shadow: 1px 1px 0 var(--ink); display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 24px; cursor: pointer; }
.goal p { position: absolute; left: 11px; top: 49px; margin: 0; font: 400 13px/18px "PingFang Local", "PingFang SC", sans-serif; }
.goal p span, .goal small span { font: 400 13px/18px "Flynn Mono VF", ui-monospace, monospace; }
.goal-progress { position: absolute; left: 11px; top: 71px; display: block; width: 149px; height: 9px; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); }
.goal-progress::after { content: ""; position: absolute; left: -1px; top: -1px; width: 73.74px; height: 9px; background: repeating-linear-gradient(90deg, var(--ink) 0 9.216px, transparent 9.216px 10.754px); }
.goal small { position: absolute; left: 11px; top: 85px; display: block; margin: 0; font: 400 13px/18px "PingFang Local", "PingFang SC", sans-serif; }

.products h2 { top: 429px; }
.product-gesture-hints { position: absolute; z-index: 5; left: 0; top: 628px; width: 402px; height: 25px; pointer-events: none; color: var(--ink); font: 500 13px/18px "PingFang Local", "PingFang SC", sans-serif; }
.product-hint { position: absolute; top: 0; height: 25px; white-space: nowrap; transition: opacity 140ms ease; }
.product-hint-next { left: 28px; width: 39px; text-align: left; }
.product-hint-detail { right: 28px; width: 26px; text-align: right; }
.product-hint img { position: absolute; top: 15px; display: block; width: 58px; height: 7px; max-width: none; }
.product-hint-next img { left: -12px; transform: scaleX(-1); transform-origin: center; }
.product-hint-detail img { left: -20px; }
.products[data-drag-direction="left"] .product-hint-next,
.products[data-drag-direction="right"] .product-hint-detail { opacity: .42; }
.product { position: absolute; left: 86px; top: 477px; width: 230px; height: 320px; padding: 0; border: 1px solid var(--ink); border-radius: 12px; background: var(--white); text-align: center; overflow: hidden; box-shadow: 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); cursor: grab; outline: none; transform-origin: center center; transform-style: preserve-3d; perspective: 900px; touch-action: pan-y; user-select: none; transition: transform 560ms cubic-bezier(.22,1,.36,1), filter 360ms ease, box-shadow 360ms ease; will-change: transform; }
.product:active { cursor: grabbing; }
.product:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.product.back { z-index: 1; transform: rotate(-8deg); }
.product.middle { z-index: 2; transform: rotate(-4deg); }
.product.front { z-index: 3; transform: rotate(0deg); }

/* Home entrance: the recommendation stack briefly lifts as one object, while
   the two rear cards fan out from directly behind the front card. */
@keyframes product-stack-front-arrive {
  0%, 18% { transform: translate3d(0,0,0) scale(1); box-shadow: 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
  43% { transform: translate3d(0,-9px,26px) scale(1.012); box-shadow: 7px 11px 18px rgb(56 56 56 / 14%), 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
  70% { transform: translate3d(0,2px,3px) scale(.998); box-shadow: 2px 3px 5px rgb(56 56 56 / 7%), 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
  86% { transform: translate3d(0,-1px,1px) scale(1.001); }
  100% { transform: translate3d(0,0,0) scale(1); box-shadow: 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
}
@keyframes product-stack-middle-fan {
  0%, 20% { transform: translate3d(0,0,0) rotate(0deg) scale(.992); }
  48% { transform: translate3d(0,-8px,20px) rotate(-1.2deg) scale(1.005); }
  72% { transform: translate3d(0,1px,3px) rotate(-4.7deg) scale(.999); }
  87% { transform: translate3d(0,-.5px,1px) rotate(-3.7deg) scale(1); }
  100% { transform: translate3d(0,0,0) rotate(-4deg) scale(1); }
}
@keyframes product-stack-back-fan {
  0%, 27% { transform: translate3d(0,0,0) rotate(0deg) scale(.984); }
  54% { transform: translate3d(0,-7px,14px) rotate(-2.2deg) scale(1.002); }
  76% { transform: translate3d(0,1px,2px) rotate(-8.8deg) scale(.999); }
  89% { transform: translate3d(0,-.5px,1px) rotate(-7.6deg) scale(1); }
  100% { transform: translate3d(0,0,0) rotate(-8deg) scale(1); }
}
.products.is-home-stack-entering .product.front {
  animation: product-stack-front-arrive 560ms cubic-bezier(.2,.72,.22,1) 430ms both;
}
.products.is-home-stack-entering .product.middle {
  animation: product-stack-middle-fan 610ms cubic-bezier(.2,.72,.22,1) 455ms both;
}
.products.is-home-stack-entering .product.back {
  animation: product-stack-back-fan 650ms cubic-bezier(.2,.72,.22,1) 485ms both;
}
.product.back.is-back-entering { animation: product-back-enter 460ms cubic-bezier(.22,.72,.24,1) both; }
.products.is-regrouping .product { transform: translateY(-7px) rotate(-1deg) scale(.975); filter: saturate(.94); }
.product.is-dragging { z-index: 12; transition: none; transform: perspective(780px) translate3d(var(--product-drag-x, 0px), var(--product-drag-y, 0px), 28px) rotateZ(var(--product-drag-z, 0deg)) rotateY(var(--product-drag-yaw, 0deg)); box-shadow: 8px 12px 24px rgb(56 56 56 / 18%), 1.5px 1.5px 0 var(--ink); }
.products.is-revealing-next .product.middle { transition: none; transform: translate3d(0, var(--product-next-y, 0px), 18px) rotate(var(--product-next-rotate, -4deg)) scale(var(--product-next-scale, 1)); filter: saturate(var(--product-next-saturation, 1)); box-shadow: 6px 10px 18px rgb(56 56 56 / 14%), 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
.products.is-revealing-next .product.back { transition: none; transform: translate3d(0, var(--product-back-y, 0px), 0) rotate(var(--product-back-rotate, -8deg)) scale(var(--product-back-scale, 1)); }
.products.is-advancing .product.middle { animation: product-next-lift-land 420ms cubic-bezier(.2,.72,.22,1) both; }
.products.is-advancing .product.back { animation: product-back-fill-space 420ms cubic-bezier(.2,.72,.22,1) both; }
.product.is-flipping-left { z-index: 12; animation: product-flip-away-left 430ms cubic-bezier(.36,.02,.24,1) both; pointer-events: none; }
.product-detail-flip { position:absolute;inset:0;z-index:65;perspective:1100px;overflow:hidden;clip-path:inset(107px 0 0);pointer-events:auto; }
.product-detail-rotor { position:absolute;transform-style:preserve-3d; }
.product-detail-face { position:absolute;inset:0;border-radius:12px;background:var(--paper);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden; }
.product-detail-reverse { transform:rotateY(180deg);border-radius:0; }
@keyframes product-flip-away-left {
  0% { opacity: 1; transform: perspective(780px) translate3d(var(--product-drag-x, 0px), var(--product-drag-y, 0px), 28px) rotateZ(var(--product-drag-z, 0deg)) rotateY(var(--product-drag-yaw, 0deg)); }
  48% { opacity: 1; transform: perspective(780px) translate3d(-142px, 5px, 18px) rotateZ(-8deg) rotateY(-76deg); }
  100% { opacity: 0; transform: perspective(780px) translate3d(-390px, 24px, -30px) rotateZ(-16deg) rotateY(-128deg) scale(.94); }
}
@keyframes product-flip-open-right {
  0% { opacity: 1; transform: perspective(780px) translate3d(var(--product-drag-x, 0px), var(--product-drag-y, 0px), 28px) rotateZ(var(--product-drag-z, 0deg)) rotateY(var(--product-drag-yaw, 0deg)); }
  58% { opacity: 1; transform: perspective(780px) translate3d(72px, 0, 54px) rotateZ(2deg) rotateY(44deg) scale(1.015); }
  100% { opacity: .12; transform: perspective(780px) translate3d(174px, 0, 22px) rotateZ(4deg) rotateY(82deg) scale(1.025); }
}
@keyframes product-next-lift-land {
  0% { filter: saturate(var(--product-next-saturation, .88)); transform: translate3d(0, var(--product-next-y, 0px), 18px) rotate(var(--product-next-rotate, -4deg)) scale(var(--product-next-scale, .985)); box-shadow: 6px 10px 18px rgb(56 56 56 / 14%), 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
  42% { filter: saturate(1); transform: translate3d(0, -12px, 34px) rotate(-1deg) scale(1.018); box-shadow: 9px 15px 24px rgb(56 56 56 / 18%), 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
  76% { transform: translate3d(0, 2.5px, 4px) rotate(.7deg) scale(.998); box-shadow: 2px 3px 6px rgb(56 56 56 / 8%), 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
  100% { filter: none; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); box-shadow: 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
}
@keyframes product-back-fill-space {
  0% { transform: translate3d(0, var(--product-back-y, 0px), 0) rotate(var(--product-back-rotate, -8deg)) scale(var(--product-back-scale, 1)); }
  52% { transform: translate3d(0, -4px, 8px) rotate(-5deg) scale(1.004); }
  100% { transform: translate3d(0, 0, 0) rotate(-4deg) scale(1); }
}
@keyframes product-back-enter {
  0% { transform: rotate(-4deg); }
  68% { transform: rotate(-8.35deg); }
  100% { transform: rotate(-8deg); }
}
.product-art { position: absolute; display: block; object-fit: contain; pointer-events: none; transform-origin: center bottom; }
.product-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.product-art-layer { transform-box: fill-box; transform-origin: center; will-change: transform; transition: transform 280ms cubic-bezier(.34,1.42,.64,1); }
.product.is-dragging .product-art-layer { transition: none; }
.product[data-product-index="0"] .product-art { left: 15px; top: 31px; width: 199px; height: 135px; }
.product[data-product-index="1"] .product-art { left: 19px; top: 15px; width: 191px; height: 151px; }
.product[data-product-index="2"] .product-art { left: 18px; top: 9px; width: 193px; height: 164px; }
.products[data-drag-direction="left"] .product.is-dragging .product-art-layer { transform: translate(var(--art-left-x),var(--art-left-y)) rotate(var(--art-left-r)); }
.products[data-drag-direction="right"] .product.is-dragging .product-art-layer { transform: translate(var(--art-right-x),var(--art-right-y)) rotate(var(--art-right-r)); }
.product.is-flipping-left .product-art-layer { animation: product-art-swipe-away 430ms cubic-bezier(.36,.02,.24,1) both; }
.products.is-revealing-next .product.middle .product-art-layer { transform: translate(var(--art-lift-x),var(--art-lift-y)) rotate(var(--art-lift-r)); }
.products.is-advancing .product.middle .product-art-layer { animation: product-art-layer-land 390ms cubic-bezier(.2,.72,.22,1) var(--art-delay) both; }
@keyframes product-art-swipe-away {
  0% { transform: translate(var(--art-left-x),var(--art-left-y)) rotate(var(--art-left-r)); }
  100% { transform: translate(var(--art-away-x),var(--art-away-y)) rotate(var(--art-away-r)); }
}
@keyframes product-art-layer-land {
  0% { transform: translate(var(--art-lift-x),var(--art-lift-y)) rotate(var(--art-lift-r)); }
  48% { transform: translate(var(--art-peak-x),var(--art-peak-y)) rotate(var(--art-lift-r)); }
  74% { transform: translate(var(--art-bounce-x),var(--art-bounce-y)) rotate(var(--art-bounce-r)); }
  90% { transform: translate(var(--art-settle-x),var(--art-settle-y)) rotate(var(--art-settle-r)); }
  100% { transform: none; }
}
.product h3 { position: absolute; left: 0; right: 0; top: 189px; margin: 0; font-family: "Glow Sans SC Extended", sans-serif; font-weight: 700; white-space: nowrap; font-size: 22px; line-height: 26px; }
.product h3 .mono { font-weight: 700; }
.product p { position: absolute; left: 0; right: 0; top: 223px; margin: 0; color: #999; white-space: nowrap; font-family: "PingFang Thin", "PingFang SC", sans-serif; font-size: 13px; line-height: 18px; font-weight: 100; }
.product > b { position: absolute; left: 0; right: 0; top: 245px; display: block; font-family: "PingFang Local", sans-serif; font-size: 13px; line-height: 18px; font-weight: 400; white-space: nowrap; }
.product-buttons { position: absolute; inset: 0; pointer-events: none; }
.product-buttons button { margin: 0; opacity: 1; color: var(--ink); transition: transform 80ms ease, box-shadow 80ms ease; }
.product-buttons button:active { transform: translate(1px,1px); box-shadow: none; }
.product.front .product-buttons { pointer-events: none; }
.product.front .product-buttons button { pointer-events: auto; cursor: pointer; }
.product-buttons button:disabled { pointer-events: none; cursor: default; opacity: 1; }
.favorite { position: absolute; left: 54px; top: 269px; width: 40px; height: 43px; border: 0; background: transparent; padding: 0; }
.favorite img { position: absolute; left: 8px; top: 0; display: block; margin: 0; transition: filter 160ms ease, transform 160ms cubic-bezier(.22,1,.36,1); }
.favorite.is-favorite img { filter: brightness(0) invert(22%); transform: scale(.94); }
.favorite img { width: 24px; height: 24px; }
.favorite small { position: absolute; left: 0; top: 27px; display: block; width: 40px; margin: 0; font-size: 10px; line-height: 15px; font-weight: 400; text-align: center; white-space: nowrap; }
.product-buy { position: absolute; left: 100px; top: 274px; width: 76px; height: 30px; padding: 0 8px; border: 1px solid var(--ink); border-radius: 6px; background: var(--yellow); box-shadow: 1px 1px 0 var(--ink); display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; white-space: nowrap; font-size: 17px; line-height: 24px; }
.product-buy img { flex: 0 0 auto; width: 24px; height: 24px; }

.finance-view { display: none; }
.phone.finance-open .home-view { display: none; }
.phone.finance-open .finance-view { display: block; }
.phone.uno-open .home-view,
.phone.uno-open .finance-view { display: none; }
.phone.uno-open .uno-view { display: block; }
.finance-header { position: absolute; z-index: 60; isolation: isolate; inset: 0 0 auto; width: 402px; height: 107px; }
.finance-header img { display: block; width: 402px; height: 107px; }
.finance-scroller { position: absolute; inset: 106px 0 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: var(--paper); }
.finance-scroller::-webkit-scrollbar { display: none; }
.finance-canvas { position: relative; width: 402px; height: 887px; }
.finance-canvas > img { position: absolute; display: block; max-width: none; }
.finance-sectors-stage { position: absolute; left: 0; top: 12px; width: 402px; height: 286px; overflow: hidden; }
.finance-sectors-stage::before { content: ""; position: absolute; z-index: 4; left: 24px; top: 36px; width: 181px; height: 32px; background: #f8f8f8; }
.finance-sectors { position: absolute; left: 0; top: 0; width: 402px; height: 286px; display: block; max-width: none; transition: opacity 90ms linear 130ms; }
.sector-board-crop { position: absolute; inset: 0; height: 233px; overflow: hidden; opacity: 0; transition: opacity 90ms linear 130ms; }
.sector-board-crop img { position: absolute; left: 0; top: -118px; width: 402px; height: 874px; max-width: none; display: block; }
.finance-sectors-stage[data-sector="flow"] .sector-performance { opacity: 0; }
.finance-sectors-stage[data-sector="flow"] .sector-flow { opacity: 1; }
.sector-slider, .stock-sector-slider { position: absolute; z-index: 5; top: 40px; left: 28px; width: 65px; height: 24px; border-radius: 999px; background: #383838; pointer-events: none; transform: translateX(0); transition: transform 280ms cubic-bezier(.22,1,.36,1), width 280ms cubic-bezier(.22,1,.36,1); }
.finance-sectors-stage[data-sector="flow"] .sector-slider { transform: translateX(77px); width: 91px; }
.sector-hit, .stock-sector-hit { position: absolute; z-index: 6; top: 40px; height: 24px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 13px/18px "PingFang Local", sans-serif; white-space: nowrap; cursor: pointer; transition: color 150ms ease 80ms; }
.sector-hit-first { left: 28px; width: 65px; }
.sector-hit-second { left: 105px; width: 91px; }
.finance-sectors-stage[data-sector="performance"] .sector-hit-first,
.finance-sectors-stage[data-sector="flow"] .sector-hit-second { color: #f8f8f8; }

.fund-flow-chart { position: absolute; z-index: 3; left: 20px; top: 73px; width: 362px; height: 151px; padding: 0 9px; display: flex; align-items: stretch; gap: 10px; overflow: visible; background: #f8f8f8; opacity: 0; pointer-events: none; }
.finance-sectors-stage[data-sector="flow"] .fund-flow-chart { opacity: 1; }
.flow-column { position: relative; flex: 0 0 49px; width: 49px; height: 151px; color: var(--ink); text-align: center; }
.flow-column i { position: absolute; bottom: 29px; width: 32px; height: var(--bar-height); border: 1px solid var(--ink); background: currentColor; box-shadow: 1px 1px 0 var(--ink); transform-origin: 50% 100%; }
.flow-column:nth-child(1) i { left: 6px; }
.flow-column:nth-child(2) i { left: 7px; }
.flow-column:nth-child(3) i { left: 8px; }
.flow-column:nth-child(4) i { left: 9px; }
.flow-column:nth-child(5) i { left: 10px; }
.flow-column:nth-child(6) i { left: 11px; }
.flow-column b { position: absolute; left: 50%; bottom: calc(33px + var(--bar-height)); width: 58px; color: currentColor; transform: translateX(-50%); font: 700 9px/15px "Flynn Mono VF", monospace; letter-spacing: -.9px; white-space: nowrap; opacity: 1; }
.flow-column > span { position: absolute; bottom: 6px; color: var(--ink); font: 400 10px/15px "PingFang Local", sans-serif; white-space: nowrap; }
.flow-column:nth-child(1) > span { left: 2px; width: 40px; }
.flow-column:nth-child(2) > span { left: 3px; width: 40px; }
.flow-column:nth-child(3) > span { left: 4px; width: 40px; }
.flow-column:nth-child(4) > span { left: 15px; width: 20px; }
.flow-column:nth-child(5) > span { left: 11px; width: 30px; }
.flow-column:nth-child(6) > span { left: 7px; width: 40px; }
.flow-column.red { color: #ff646b; }
.flow-column.green { color: #00ae98; }
.flow-column.green b { font-size: 8.5px; letter-spacing: -1.1px; }
.flow-column.cross i { background-color: #f8f8f8; background-image: repeating-linear-gradient(45deg, transparent 0 3px, currentColor 3px 5px), repeating-linear-gradient(-45deg, transparent 0 3px, currentColor 3px 5px); }
.flow-column.stripe i { background-color: #f8f8f8; background-image: repeating-linear-gradient(60deg, transparent 0 5px, currentColor 5px 7px); }
.fund-flow-chart.is-animating .flow-column i { animation: flow-bar-rise 720ms cubic-bezier(.22,1,.36,1) var(--bar-delay) both; }
.fund-flow-chart.is-animating .flow-column b { animation: flow-number-rise 720ms cubic-bezier(.22,1,.36,1) var(--bar-delay) both; }
@keyframes flow-bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes flow-number-rise { from { transform: translate(-50%, var(--bar-height)); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.finance-funds { left: 15px; top: 253px; width: 372px; height: 313px; }
.finance-multiselect { position: absolute; left: 15px; top: 576px; width: 372px; height: 160px; transform: translate3d(0,0,0); transition: transform 560ms cubic-bezier(.22,1,.36,1), height 430ms cubic-bezier(.22,1,.36,1); }
.finance-multiselect > h2 { position: absolute; left: 13px; top: 0; z-index: 20; font-family: "Glow Sans SC Extended", sans-serif; font-size: 17px; font-weight: 500; line-height: 24px; }
.finance-multi-stage { position: absolute; left: 0; top: 28px; width: 372px; height: 132px; overflow: hidden; transition: height 430ms cubic-bezier(.22,1,.36,1); }
.finance-multi-card { position: absolute; left: var(--card-x); top: 0; z-index: var(--card-z); width: 118px; height: 130px; overflow: hidden; border: 1px solid var(--accent); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--accent); transition: left 430ms cubic-bezier(.22,1,.36,1), top 430ms cubic-bezier(.22,1,.36,1), width 430ms cubic-bezier(.22,1,.36,1), height 430ms cubic-bezier(.22,1,.36,1), border-color 180ms ease, box-shadow 180ms ease; }
.finance-multi-trigger { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.finance-multi-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; border-radius: 7px; }
.finance-multi-copy { position: absolute; inset: 0; display: block; opacity: 1; transform: translateY(0); transition: opacity 110ms cubic-bezier(.4,0,1,1), transform 110ms cubic-bezier(.4,0,1,1); }
.finance-multi-copy b { position: absolute; left: var(--copy-x); top: 80px; font-family: "Glow Sans SC Extended", sans-serif; font-size: 17px; font-weight: 500; line-height: 20px; white-space: nowrap; transition: left 360ms cubic-bezier(.22,1,.36,1), top 360ms cubic-bezier(.22,1,.36,1); }
.finance-multi-copy small { position: absolute; left: 50%; top: 103px; color: #666; font-size: 10px; font-weight: 400; line-height: 15px; white-space: nowrap; transform: translateX(-50%); transition: opacity 100ms ease; }
.finance-multi-art { position: absolute; left: var(--art-x); top: var(--art-y); z-index: 1; width: var(--art-w); height: var(--art-h); display: block; background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; transition: left 430ms cubic-bezier(.22,1,.36,1), top 430ms cubic-bezier(.22,1,.36,1), width 430ms cubic-bezier(.22,1,.36,1), height 430ms cubic-bezier(.22,1,.36,1), transform 430ms cubic-bezier(.22,1,.36,1); }
.multi-rise { --art-x: 12px; --art-y: 12px; --active-art-x: 251px; --active-art-y: 8px; --active-art-w: 95px; --active-art-h: 47px; --art-w: 94px; --art-h: 48px; }
.multi-hot { --art-x: 12px; --art-y: 13px; --active-art-x: 253px; --active-art-y: 8px; --active-art-w: 93px; --active-art-h: 48px; --art-w: 95px; --art-h: 47px; }
.multi-return { --art-x: 12px; --art-y: 13px; --active-art-x: 251px; --active-art-y: 8px; --active-art-w: 95px; --active-art-h: 47px; --art-w: 95px; --art-h: 47px; }
.multi-tech { --art-x: 0px; --art-y: 7px; --active-art-x: 253px; --active-art-y: 2px; --active-art-w: 118px; --active-art-h: 60px; --art-w: 119px; --art-h: 61px; }
.multi-follow { --art-x: 12px; --art-y: 8px; --active-art-x: 273.7px; --active-art-y: 9px; --active-art-w: 72.3px; --active-art-h: 50px; --art-w: 94px; --art-h: 68px; }
.multi-rise .finance-multi-art { background-image: url("./public/assets/finance-multi-rise.svg"); }
.multi-hot .finance-multi-art { background-image: url("./public/assets/finance-multi-hot.svg"); }
.multi-return .finance-multi-art { background-image: url("./public/assets/finance-multi-return.svg"); }
.multi-tech .finance-multi-art { background-image: url("./public/assets/finance-multi-tech.svg"); }
.multi-follow .finance-multi-art { background-image: url("./public/assets/finance-multi-follow.svg"); }
.finance-multiselect.is-copy-leaving .finance-multi-copy { opacity: 0; transform: translateY(-5px); }

.finance-multiselect[data-expanded="true"] { height: 506px; }
.finance-multiselect[data-expanded="true"] .finance-multi-stage { height: 478px; overflow: visible; }
.finance-multiselect[data-expanded="true"] .finance-multi-card { left: calc(var(--tab-index) * 58px); top: 0; z-index: 3; width: 62px; height: 59px; }
.finance-multiselect[data-expanded="true"] .finance-multi-card.is-active { left: 0; top: 32px; z-index: 10; width: 370px; height: 446px; }
.finance-multiselect[data-expanded="true"] .finance-multi-card:not(.is-active) .finance-multi-copy b { left: 12px; top: 7px; }
.finance-multiselect[data-expanded="true"] .finance-multi-card:not(.is-active) .finance-multi-copy small { opacity: 0; }
.finance-multiselect[data-expanded="true"] .finance-multi-card:not(.is-active) .finance-multi-art { top: 39px; }
.finance-multiselect[data-expanded="true"] .finance-multi-card.is-active .finance-multi-trigger { pointer-events: none; }
.finance-multiselect[data-expanded="true"] .finance-multi-card.is-active .finance-multi-copy { opacity: 0; transform: translateY(-5px); }
.finance-multiselect[data-expanded="true"] .finance-multi-card.is-active .finance-multi-art { left: var(--active-art-x); top: var(--active-art-y); width: var(--active-art-w); height: var(--active-art-h); }

.finance-multi-results { position: absolute; left: 0; top: 32px; z-index: 12; width: 370px; height: 446px; opacity: 0; transform: translateY(7px); pointer-events: none; transition: opacity 180ms cubic-bezier(0,0,.2,1), transform 230ms cubic-bezier(.22,1,.36,1); }
.finance-multiselect.is-content-visible .finance-multi-results { opacity: 1; transform: translateY(0); pointer-events: auto; }
.finance-multi-results-header { position: absolute; left: 12px; top: 0; width: 346px; height: 64px; border-bottom: 2px solid var(--ink); }
.finance-multi-results-header h3 { position: absolute; left: 0; top: 27px; font-family: "Glow Sans SC Extended", sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; white-space: nowrap; }
.finance-multi-results-header p { position: absolute; left: 101px; top: 37px; font-size: 13px; font-weight: 400; line-height: 18px; white-space: nowrap; }
.finance-multi-result-list { position: absolute; left: 12px; top: 64px; width: 346px; height: 375px; }
.finance-multi-result { position: relative; width: 346px; height: 75px; border-bottom: 1px solid var(--ink); opacity: 0; transform: translateY(6px); }
.finance-multiselect.is-content-visible .finance-multi-result { animation: finance-multi-row-in 260ms cubic-bezier(.22,1,.36,1) calc(var(--result-index, 0) * 32ms) both; }
.finance-multi-result:nth-child(1) { --result-index: 0; }
.finance-multi-result:nth-child(2) { --result-index: 1; }
.finance-multi-result:nth-child(3) { --result-index: 2; }
.finance-multi-result:nth-child(4) { --result-index: 3; }
.finance-multi-result:nth-child(5) { --result-index: 4; border-bottom: 0; }
@keyframes finance-multi-row-in { to { opacity: 1; transform: translateY(0); } }
.multi-result-name { position: absolute; left: 0; top: 7px; display: flex; align-items: flex-end; gap: 8px; white-space: nowrap; }
.multi-result-name b { font-family: "Glow Sans SC Extended", sans-serif; font-size: 17px; font-weight: 700; line-height: 24px; }
.multi-result-name > span { padding-bottom: 1px; font-size: 13px; font-weight: 400; line-height: 18px; }
.finance-multi-result > strong { position: absolute; top: 35px; color: #ff6661; font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.finance-multi-result > strong:nth-of-type(1) { left: 0; }
.finance-multi-result > strong:nth-of-type(2) { left: 106px; }
.finance-multi-result > small { position: absolute; top: 51px; font-size: 10px; font-weight: 400; line-height: 15px; white-space: nowrap; }
.finance-multi-result > small:nth-of-type(1) { left: 0; }
.finance-multi-result > small:nth-of-type(2) { left: 106px; }
.multi-result-favorite { position: absolute; left: 224px; top: 19px; width: 40px; height: 49px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.multi-result-favorite img { display: block; width: 20px; height: 20px; margin: 0 0 0 5px; }
.multi-result-favorite span { display: block; margin-top: 0; font-size: 10px; line-height: 15px; text-align: left; white-space: nowrap; }
.multi-result-buy { position: absolute; left: 270px; top: 27px; width: 68px; height: 30px; padding: 0 8px; border: 1px solid var(--ink); border-radius: 6px; background: var(--yellow); box-shadow: 1px 1px 0 var(--ink); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 400; line-height: 24px; white-space: nowrap; cursor: pointer; transition: transform 80ms ease, box-shadow 80ms ease; }
.multi-result-buy img { flex: 0 0 18px; width: 18px; height: 18px; margin: 0 3px 0 0; }
.multi-result-buy:active { background: #383838; color: #f8f8f8; transform: translate(1px,1px); box-shadow: none; }
.multi-result-buy:active img { filter: brightness(0) invert(1); }
.finance-multi-result { cursor: pointer; outline: 0; }
.finance-multi-result:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.multi-result-favorite:active { transform: translate(1px,1px); }
.multi-result-favorite.is-favorite img { filter: brightness(0); }
.multi-result-favorite.is-favorite span { color: #383838; font-weight: 500; }

/* Shared full-screen feature pages */
.feature-page { display: none; position: absolute; z-index: 78; inset: 0; width: 402px; height: 874px; overflow: hidden; background: var(--paper); }
.phone.search-open .search-page,
.phone.lesson-open .lesson-page,
.phone.assessment-open .assessment-page,
.phone.messages-open .messages-page,
.phone.watchlist-open .watchlist-page,
.phone.invest-open .fund-invest-page,
.phone.community-post-open .community-post-page,
.phone.uno-editorial-open .uno-editorial-page,
.phone.topic-library-open .topic-library-page,
.phone.topic-detail-open .topic-detail-page,
.phone.stock-detail-open .stock-quote-detail-page { display: block; }
.feature-header { position: absolute; z-index: 12; inset: 0 0 auto; width: 402px; height: 107px; background: var(--white); }
.feature-nav { position: absolute; left: 0; top: 62px; width: 402px; height: 45px; border-top: 1px solid var(--ink); border-bottom: 2px solid var(--ink); }
.feature-nav::after { content: ""; position: absolute; right: 15px; top: 0; height: 44px; border-left: 1px solid var(--ink); }
.feature-nav h1,
.feature-nav-title { position: absolute; left: 69px; top: 7px; margin: 0; padding: 0; border: 0; background: transparent; font: 500 22px/28px "Glow Sans SC Extended", sans-serif; cursor: pointer; }
.feature-back { position: absolute; left: 16px; top: 0; width: 44px; height: 44px; padding: 0; border: 0; border-inline: 1px solid var(--ink); background: transparent; display: grid; place-items: center; cursor: pointer; }
.feature-back img { width: 24px; height: 24px; transform: rotate(90deg); }
.feature-step { position: absolute; right: 28px; top: 12px; font-size: 13px; line-height: 18px; }
.feature-scroller { position: absolute; z-index: 1; inset: 107px 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.feature-scroller::-webkit-scrollbar { display: none; }
.feature-canvas { position: relative; width: 402px; }
.feature-footer { position: absolute; z-index: 15; left: 0; bottom: 0; width: 402px; height: 86px; padding: 12px 16px 26px; background: linear-gradient(180deg, rgb(246 239 234 / 20%), var(--paper) 25%); }
.feature-footer button { width: 370px; height: 48px; border: 1px solid var(--ink); border-radius: 8px; background: var(--yellow); box-shadow: 1px 1px 0 var(--ink); font: 500 17px/24px "Glow Sans SC Extended", sans-serif; cursor: pointer; }
.feature-footer button:disabled { background: #dedbd8; color: #888; box-shadow: none; cursor: default; }
.feature-home-indicator { position: absolute; z-index: 20; left: 134px; bottom: 8px; width: 134px; height: 5px; border-radius: 4px; background: var(--ink); }

/* Pages pushed from a dark stock header inherit the same header treatment. */
.phone.dark-child-theme .live-status-time { background: var(--ink); color: var(--white); }
.phone.dark-child-theme .feature-header,
.phone.dark-child-theme .purchase-header,
.phone.dark-child-theme .fund-detail-header { background: var(--ink); color: var(--white); }
.phone.dark-child-theme .feature-nav,
.phone.dark-child-theme .purchase-nav,
.phone.dark-child-theme .fund-detail-nav { border-color: var(--white); }
.phone.dark-child-theme .feature-nav::after,
.phone.dark-child-theme .purchase-nav::after { border-color: var(--white); }
.phone.dark-child-theme .feature-back,
.phone.dark-child-theme .purchase-back,
.phone.dark-child-theme .fund-detail-back,
.phone.dark-child-theme .purchase-nav-title,
.phone.dark-child-theme .fund-detail-nav-title { border-color: var(--white); color: var(--white); }
.phone.dark-child-theme .feature-back img,
.phone.dark-child-theme .purchase-back img,
.phone.dark-child-theme .fund-detail-back img,
.phone.dark-child-theme .status-icons img { filter: brightness(0) invert(1); }
.phone.dark-child-theme .island img { filter: brightness(0) invert(1); }
.phone.dark-child-theme .live-status-time { background: var(--tab-header-bg); color: #0a0a0a; }
.global-system-status .status-icons img { filter: none; }
.phone.finance-open.stock-mode .global-system-status .status-icons img,
.phone.my-open.stock-account-mode .global-system-status .status-icons img { filter: brightness(0) invert(1); }
.phone.uno-assistant-active .global-system-status .island { visibility: hidden; }

/* Real site search */
.search-scope-label { position: absolute; right: 28px; top: 12px; font-size: 13px; line-height: 18px; }
.search-canvas { min-height: 767px; padding: 16px 16px 44px; }
.site-search-form { position: relative; width: 370px; height: 46px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 #383838; }
.site-search-form:focus-within { box-shadow: 1px 1px 0 #383838, inset 0 0 0 1px var(--blue); }
.site-search-icon { position: absolute; left: 14px; top: 13px; width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; pointer-events: none; }
.site-search-icon::after { content: ""; position: absolute; left: 12px; top: 12px; width: 8px; border-top: 2px solid var(--ink); transform: rotate(45deg); transform-origin: left center; }
.site-search-input { position: absolute; left: 42px; top: 0; width: 282px; height: 44px; padding: 0 8px 0 0; border: 0; outline: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 400 15px/22px "PingFang Local", sans-serif; }
.site-search-input::placeholder { color: #888; }
.site-search-input::-webkit-search-cancel-button { display: none; }
.site-search-clear { position: absolute; right: 10px; top: 10px; width: 25px; height: 25px; padding: 0 0 2px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); display: grid; place-items: center; font: 400 18px/20px Arial, sans-serif; cursor: pointer; }
.site-search-clear[hidden] { display: none; }
.site-search-filters { width: 370px; margin-top: 12px; display: flex; gap: 7px; }
.site-search-filters button { width: 55px; min-width: 55px; height: 30px; padding: 0 6px; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); box-shadow: 1px 1px 0 #383838; font-size: 13px; line-height: 18px; cursor: pointer; }
.site-search-filters button.is-active { background: var(--ink); color: var(--white); }
.search-page[data-search-scope="fund"] .site-search-filters button:not([data-search-filter="fund"]) { display: none; }
.search-page[data-search-scope="stock"] .site-search-filters button:not([data-search-filter="stock"]) { display: none; }
.site-search-suggestions { margin-top: 25px; }
.site-search-suggestions[hidden],.site-search-result-head[hidden],.site-search-empty[hidden] { display: none; }
.site-search-section-title,.site-search-result-head { height: 26px; display: flex; align-items: baseline; justify-content: space-between; }
.site-search-section-title h2,.site-search-result-head h2 { font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.site-search-section-title span,.site-search-result-head span { color: #777; font-size: 10px; line-height: 15px; }
.site-search-suggestion-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 9px; }
.site-search-suggestion-list button { height: 34px; padding: 0 12px; border: 1px solid var(--ink); border-radius: 6px; background: var(--yellow); box-shadow: 1px 1px 0 #383838; font-size: 13px; line-height: 18px; cursor: pointer; }
.site-search-suggestion-list button:nth-child(2) { background: var(--white); }
.site-search-suggestion-list button:nth-child(3) { background: var(--blue); color: var(--white); }
.site-search-suggestion-list button:nth-child(4) { background: #ff6661; color: var(--white); }
.site-search-result-head { margin-top: 24px; }
.site-search-results { margin-top: 9px; display: grid; gap: 10px; }
.site-search-result { position: relative; width: 370px; min-height: 76px; padding: 11px 42px 11px 74px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 #383838; display: block; text-align: left; cursor: pointer; }
.site-search-result:active,.site-search-result.is-active { background: #fff9ce; }
.site-search-result:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.site-search-result-badge { position: absolute; left: 12px; top: 15px; width: 48px; height: 30px; border: 1px solid var(--ink); border-radius: 5px; background: var(--yellow); display: grid; place-items: center; font-size: 13px; line-height: 18px; }
.site-search-result.is-simulation .site-search-result-badge { background: var(--ink); color: var(--white); }
.site-search-result.is-stock .site-search-result-badge { background: var(--blue); color: var(--ink); }
.site-search-result.is-learning .site-search-result-badge { background: var(--blue); color: var(--white); }
.site-search-result.is-community .site-search-result-badge { background: #ff6661; color: var(--white); }
.site-search-result-copy { min-width: 0; display: block; }
.site-search-result-copy strong,.site-search-result-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search-result-copy strong { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.site-search-result-copy small { margin-top: 3px; color: #666; font-size: 13px; line-height: 18px; }
.site-search-result-arrow { position: absolute; right: 12px; top: 24px; font: 400 30px/24px "PingFang Local", sans-serif; }
.site-search-empty { position: relative; width: 370px; min-height: 128px; margin-top: 9px; padding: 18px 16px 16px 72px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 #383838; }
.site-search-empty > span { position: absolute; left: 16px; top: 18px; width: 40px; height: 40px; border: 1px solid var(--ink); background: var(--yellow); display: grid; place-items: center; font: 500 22px/28px "Flynn Mono VF", monospace; }
.site-search-empty h2 { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.site-search-empty p { width: 260px; margin-top: 7px; color: #666; font-size: 13px; line-height: 20px; }

/* Daily lesson */
.lesson-canvas { height: 800px; padding-bottom: 100px; }
.lesson-hero { position: absolute; left: 16px; top: 16px; width: 370px; height: 272px; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 #383838; }
.lesson-kicker { position: absolute; left: 12px; top: 15px; z-index: 2; height: 26px; padding: 0 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--blue); color: var(--white); box-shadow: 1px 1px 0 #383838; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 18px; }
.lesson-hero h2 { position: absolute; left: 12px; right: 12px; top: 58px; z-index: 2; margin: 0; font: 700 26px/34px "Glow Sans SC Extended", sans-serif; letter-spacing: -.6px; white-space: nowrap; }
.lesson-hero p { position: absolute; left: 12px; right: 12px; top: 101px; z-index: 2; width: auto; color: #666; font-size: 14px; line-height: 20px; }
.lesson-compare { position: absolute; left: 12px; right: 12px; top: 137px; width: auto; height: 116px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); box-shadow: 1px 1px 0 #383838; overflow: hidden; }
.lesson-compare > strong { height: 32px; padding: 6px 9px; background: var(--ink); color: var(--white); display: block; font-size: 13px; font-weight: 400; line-height: 18px; }
.lesson-compare > div { height: 41px; padding: 7px 9px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 24px 1fr 48px; align-items: center; column-gap: 8px; }
.lesson-compare > div b { width: 24px; height: 24px; border: 1px solid var(--ink); background: var(--blue); color: var(--white); display: grid; place-items: center; font: 500 13px/18px "Flynn Mono VF", monospace; }
.lesson-compare > div:nth-child(3) b { background: var(--yellow); color: var(--ink); }
.lesson-compare > div span { color: #666; font-size: 13px; line-height: 18px; white-space: nowrap; }
.lesson-compare > div em { color: #00ae98; font-size: 15px; font-style: normal; line-height: 20px; text-align: right; }
.lesson-compare > div:nth-child(3) em { color: #ff6661; }
.lesson-note { position: absolute; left: 16px; top: 304px; width: 370px; height: 152px; padding: 0; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.lesson-note h3,.lesson-check h3 { font: 700 22px/28px "Glow Sans SC Extended", sans-serif; }
.lesson-note > h3 { position: absolute; left: 12px; right: 12px; top: 14px; }
.lesson-note > p { position: absolute; left: 12px; right: 12px; top: 49px; width: auto; margin: 0; color: #666; font-size: 14px; line-height: 20px; }
.lesson-note > div { position: absolute; left: 12px; right: 12px; top: 108px; width: auto; display: grid; grid-template-columns: 66px 82px 24px 68px 102px; align-items: center; }
.lesson-note > div b { color: #ff6661; font-size: 17px; line-height: 24px; }.lesson-note > div b:nth-of-type(2) { color: #00ae98; }
.lesson-note > div span { color: #666; font-size: 13px; line-height: 18px; }.lesson-note > div em { width: 1px; height: 30px; background: var(--ink); }
.lesson-check { position: absolute; left: 16px; top: 472px; width: 370px; min-height: 276px; padding: 14px 15px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.lesson-check-label,.assessment-kicker { color: #666; font-size: 13px; line-height: 18px; }
.lesson-check h3 { margin-top: 3px; font-size: 17px; line-height: 24px; }
.lesson-check button { width: 338px; min-height: 52px; margin-top: 11px; padding: 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer; }
.lesson-check button b { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--white); font: 500 17px/24px "Flynn Mono VF", monospace; }
.lesson-check button span { font-size: 15px; line-height: 22px; }.lesson-check button.is-selected { background: var(--yellow); box-shadow: 1px 1px 0 var(--ink); }
.lesson-feedback { margin-top: 9px; color: #666; font-size: 13px; line-height: 18px; }

/* Risk assessment */
.assessment-progress { position: absolute; z-index: 3; left: 16px; top: 123px; width: 370px; display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; }
.assessment-progress i { height: 8px; border: 1px solid var(--ink); background: var(--white); }.assessment-progress i.is-done { background: var(--blue); }
.assessment-stage { position: absolute; left: 16px; top: 155px; width: 370px; }
.assessment-question { width: 346px; margin: 8px 0 20px; font: 700 27px/36px "Glow Sans SC Extended", sans-serif; }
.assessment-options { display: grid; gap: 12px; }
.assessment-options button { position: relative; min-height: 66px; padding: 11px 44px 11px 52px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); text-align: left; font-size: 15px; line-height: 22px; cursor: pointer; }
.assessment-options button::before { content: attr(data-letter); position: absolute; left: 12px; top: 15px; width: 30px; height: 30px; border: 1px solid var(--ink); display: grid; place-items: center; background: var(--paper); font: 500 15px/22px "Flynn Mono VF", monospace; }
.assessment-options button::after { content: ""; position: absolute; right: 14px; top: 24px; width: 12px; height: 12px; border: 1px solid var(--ink); border-radius: 50%; background: var(--white); }
.assessment-options button.is-selected { background: var(--yellow); }.assessment-options button.is-selected::after { box-shadow: inset 0 0 0 3px var(--white); background: var(--ink); }
.assessment-tip { margin-top: 16px; color: #666; font-size: 13px; line-height: 18px; }
.assessment-result { display: none; position: absolute; left: 16px; top: 139px; width: 370px; height: 430px; padding: 24px 20px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 #383838; }
.assessment-page.is-complete .assessment-stage,.assessment-page.is-complete .assessment-progress,.assessment-page.is-complete .assessment-next { display: none; }
.assessment-page.is-complete .assessment-step { display: none; }
.assessment-page.is-complete .assessment-result,.assessment-page.is-complete .assessment-finish { display: block; }
.assessment-result > span { display: inline-block; padding: 3px 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--blue); color: var(--white); box-shadow: 1px 1px 0 #383838; font-size: 13px; line-height: 18px; }
.assessment-result h2 { margin: 28px 0 12px; font: 700 30px/40px "Glow Sans SC Extended", sans-serif; }.assessment-result h2 b { color: var(--blue); font-size: 46px; line-height: 58px; }
.assessment-result > p { width: 280px; font-size: 15px; line-height: 22px; }
.assessment-allocation { position: absolute; left: 20px; bottom: 24px; display: grid; grid-template-columns: 198px 99px 33px; grid-template-rows: 64px 20px; gap: 0; }
.assessment-allocation i { border: 1px solid var(--ink); border-right: 0; background: var(--white); box-shadow: 1px 1px 0 #383838; }.assessment-allocation i:nth-child(2){background:var(--yellow)}.assessment-allocation i:nth-child(3){border-right:1px solid var(--ink);background:#ff6661}.assessment-allocation small{padding-top:5px;font-size:10px;line-height:15px;white-space:nowrap}.assessment-finish{display:none!important}.assessment-page.is-complete .assessment-finish{display:block!important}

/* Messages */
.messages-page .feature-nav-title { top: 0; height: 44px; display: flex; align-items: center; }
.messages-read-all { position: absolute; right: 28px; top: 0; height: 44px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; font-size: 13px; line-height: 18px; cursor: pointer; }
.message-tabs { --message-tab-shift: 0%; position: absolute; z-index: 2; left: 16px; top: 123px; width: 370px; height: 38px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); padding: 3px; display: grid; grid-template-columns: repeat(3,1fr); box-shadow: 1px 1px 0 var(--ink); overflow: hidden; }
.message-tab-slider { position: absolute; z-index: 0; left: 3px; top: 3px; width: calc((100% - 6px) / 3); height: 30px; border-radius: 5px; background: var(--ink); transform: translateX(var(--message-tab-shift)); transition: transform 260ms cubic-bezier(.22,1,.36,1); pointer-events: none; }
.message-tabs button { position: relative; z-index: 1; border: 0; border-radius: 5px; background: transparent; color: var(--ink); font-size: 15px; line-height: 22px; cursor: pointer; transition: color 150ms ease; }.message-tabs button.is-active { color: var(--white); }
.messages-list { position: absolute; left: 16px; top: 177px; width: 370px; display: grid; gap: 10px; }
.message-card { position: relative; min-height: 112px; padding: 13px 14px 12px 70px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); cursor: pointer; }.message-card[hidden]{display:none}.message-card > i { position: absolute; right: 11px; top: 11px; width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: #ff6661; }.message-card:not(.is-unread)>i{display:none}
.message-icon { position: absolute; left: 14px; top: 14px; width: 42px; height: 42px; border: 1px solid var(--ink); display: grid; place-items: center; box-shadow: 1px 1px 0 #383838; font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }.message-icon-yellow{background:var(--yellow)}.message-icon-blue{background:var(--blue);color:var(--white)}.message-icon-red{background:#ff6661;color:var(--white)}.message-icon-dark{background:var(--ink);color:var(--white)}
.message-card h2 { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }.message-card p { margin-top: 3px; width: 270px; color:#555;font-size:13px;line-height:18px}.message-card time{display:block;margin-top:6px;color:#888;font:400 10px/15px "Flynn Mono VF",monospace}

/* Add to watchlist */
.watchlist-body { position: absolute; inset: 107px 0 0; padding: 16px; overflow-y: auto; scrollbar-width: none; }
.watchlist-body::-webkit-scrollbar { display: none; }
.watchlist-search { position: relative; display: block; width: 370px; height: 44px; border: 1px solid var(--ink); background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.watchlist-search > span { position: absolute; left: 14px; top: 12px; width: 17px; height: 17px; border: 1.5px solid #888; border-radius: 50%; }
.watchlist-search > span::after { content: ""; position: absolute; right: -5px; bottom: -3px; width: 7px; border-top: 1.5px solid #888; transform: rotate(45deg); }
.watchlist-search input { width: 100%; height: 100%; padding: 0 14px 0 42px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 15px/22px "PingFang Local", sans-serif; }
.watchlist-search input::placeholder { color: #999; }
.watchlist-market-tabs { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); width: 370px; height: 38px; margin-top: 14px; padding: 3px; border: 1px solid var(--ink); border-radius: 20px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); overflow: hidden; }
.watchlist-market-tabs > span { position: absolute; z-index: 0; left: 3px; top: 3px; width: calc(50% - 3px); height: 30px; border-radius: 16px; background: var(--ink); transform: translateX(0); transition: transform 360ms cubic-bezier(.22,1,.36,1); }
.watchlist-market-tabs[data-watchlist-market="stock"] > span { transform: translateX(100%); }
.watchlist-market-tabs button { position: relative; z-index: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 14px/20px "PingFang Local", sans-serif; cursor: pointer; transition: color 160ms ease; }
.watchlist-market-tabs button.is-active { color: var(--white); }
.watchlist-tip { margin: 18px 0 8px 12px; color: #666; font-size: 13px; line-height: 18px; }
.watchlist-results { display: grid; gap: 10px; }
.watchlist-results article { position: relative; width: 370px; height: 104px; padding: 13px 12px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.watchlist-results h2 { margin: 0; font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.watchlist-results p { margin-top: 3px; color: #666; font-size: 13px; line-height: 18px; }
.watchlist-results > article > strong { position: absolute; left: 12px; bottom: 10px; color: var(--red); font-size: 15px; line-height: 22px; }
.watchlist-results article > button { position: absolute; right: 12px; top: 35px; width: 86px; height: 36px; border: 1px solid var(--ink); border-radius: 7px; background: var(--yellow); box-shadow: 1px 1px 0 var(--ink); display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--ink); font-size: 13px; cursor: pointer; }
.watchlist-results article > button b { font-size: 20px; line-height: 1; font-weight: 400; }
.watchlist-results article > button.is-added { background: var(--ink); color: var(--white); box-shadow: none; transform: translate(1px,1px); }
.watchlist-results article[hidden] { display: none; }
.watchlist-empty { width: 370px; min-height: 154px; padding: 42px 22px 28px; border: 1px dashed #999; border-radius: 8px; color: #777; text-align: center; }
.watchlist-empty[hidden] { display: none; }
.watchlist-empty b,.watchlist-empty span { display: block; }
.watchlist-empty b { color: var(--ink); font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.watchlist-empty span { margin-top: 8px; font-size: 12px; line-height: 18px; }

/* Recurring investment */
.fund-invest-body { position: absolute; inset: 107px 0 84px; overflow-y: auto; padding: 16px; scrollbar-width: none; }
.fund-invest-body::-webkit-scrollbar { display: none; }
.fund-invest-product-title { margin: 0 0 7px 12px; font: 700 22px/26px "Glow Sans SC Extended", sans-serif; }
.fund-invest-tags { display: flex; gap: 8px; margin: 0 0 16px 12px; }
.fund-invest-tags span { height: 26px; padding: 3px 5px; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); font-size: 13px; line-height: 18px; }
.fund-invest-card { position: relative; width: 370px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.fund-invest-card + .fund-invest-card { margin-top: 12px; }
.fund-invest-card h2 { margin: 0; font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.fund-invest-amount { height: 136px; padding: 13px 12px; }
.fund-invest-amount label { display: flex; align-items: baseline; margin-top: 14px; height: 48px; border-bottom: 1px solid var(--ink); }
.fund-invest-amount label > span { font: 500 27px/36px "Glow Sans SC Extended", sans-serif; }
.fund-invest-amount input { width: 290px; height: 44px; padding: 0 8px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 32px; line-height: 42px; }
.fund-invest-amount small { display: block; margin-top: 5px; color: #777; font-size: 10px; line-height: 15px; }
.fund-invest-plan { height: 226px; padding: 13px 12px; }
.fund-invest-cycle { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.fund-invest-cycle button { height: 34px; border: 1px solid var(--ink); border-radius: 17px; background: var(--white); color: var(--ink); font-size: 13px; cursor: pointer; }
.fund-invest-cycle button.is-active { background: var(--ink); color: var(--white); }
.fund-invest-day,.fund-invest-start { position: relative; width: 346px; height: 55px; padding: 0; border: 0; border-bottom: 1px solid #888; background: transparent; display: flex; align-items: center; cursor: pointer; }
.fund-invest-start { border-bottom: 0; }
.fund-invest-day span,.fund-invest-start span { width: 86px; color: #666; text-align: left; font-size: 13px; }
.fund-invest-day b,.fund-invest-start b { font: 500 15px/22px "PingFang Local", sans-serif; }
.fund-invest-day i,.fund-invest-start i { position: absolute; right: 3px; font: normal 28px/28px sans-serif; }
.fund-invest-payment { height: 96px; padding: 13px 12px; }
.fund-invest-payment > div { display: flex; align-items: center; margin-top: 9px; }
.fund-invest-bank-logo { width: 34px; height: 34px; border: 1px solid var(--ink); border-radius: 5px; background: var(--red); color: var(--white); display: grid; place-items: center; font-weight: 700; }
.fund-invest-payment p { margin-left: 9px; }
.fund-invest-payment p b,.fund-invest-payment p small { display: block; }
.fund-invest-payment p b { font-size: 13px; line-height: 18px; }.fund-invest-payment p small { color:#777;font-size:10px;line-height:15px; }
.fund-invest-payment i { margin-left: auto; font: normal 28px/28px sans-serif; }
.fund-invest-note { margin: 10px 12px 24px; color: #777; font-size: 10px; line-height: 15px; }
.fund-invest-footer { position: absolute; z-index: 15; left: 0; bottom: 0; width: 402px; height: 84px; padding: 8px 16px 26px; border-top: 1px solid var(--ink); background: var(--white); }
.fund-invest-confirm { width: 370px; height: 50px; border: 2px solid var(--ink); border-radius: 25px; background: var(--blue); color: var(--white); font: 500 22px/26px "PingFang Local", sans-serif; letter-spacing: 4px; cursor: pointer; }

/* Community post detail */
.post-scroller { bottom: 67px; }.post-canvas{position:relative;width:402px;min-height:1050px;padding:18px 16px 50px}
.post-author{position:relative;height:58px;display:flex;align-items:center}.post-avatar,.comment-avatar{flex:0 0 42px;width:42px;height:42px;border:1px solid var(--ink);border-radius:6px;background:var(--yellow);box-shadow:1px 1px 0 #383838;display:grid;place-items:center;overflow:hidden;font:500 17px/24px "Glow Sans SC Extended",sans-serif}.post-avatar img{display:block;width:100%;height:100%;object-fit:cover}.post-author>div{margin-left:11px}.post-author b,.post-author small{display:block}.post-author-name{font:700 15px/22px "Glow Sans SC Extended",sans-serif}.post-author small{color:#666;font-size:10px;line-height:15px}.post-author button{position:absolute;right:0;top:12px;width:72px;height:30px;border:1px solid var(--ink);border-radius:6px;background:var(--blue);color:var(--white);box-shadow:1px 1px 0 #383838;font-size:15px;cursor:pointer}
.post-title{margin:20px 0 7px;font:700 27px/36px "Glow Sans SC Extended",sans-serif}.post-lead,.post-body{font-size:15px;line-height:24px}.post-media{margin:18px 0;display:grid;gap:10px}.post-media[hidden]{display:none}.post-media img{display:block;width:370px;max-height:280px;border:1px solid var(--ink);border-radius:8px;background:var(--white);box-shadow:1px 1px 0 var(--ink);object-fit:cover}.post-media img[data-post-image="post-first-fund"]{height:auto;max-height:none;object-fit:contain}.post-media img[data-post-image="post-kimi"]{height:260px}.post-media img[data-post-image="post-save-10k"],.post-media img[data-post-image="post-budget"],.post-media img[data-post-image="post-notes"]{height:240px}
.post-tags{display:flex;gap:7px;margin-top:16px}.post-tags span{padding:3px 7px;border:1px solid var(--ink);border-radius:5px;background:var(--blue);color:var(--white);box-shadow:1px 1px 0 #383838;font-size:13px;line-height:18px}.post-time{display:block;margin-top:12px;color:#777;font:400 10px/15px "Flynn Mono VF",monospace}.post-comments{margin-top:20px;padding-top:14px;border-top:2px solid var(--ink)}.post-comments>h3{font:700 17px/24px "Glow Sans SC Extended",sans-serif}.post-comments article{display:flex;gap:11px;padding:14px 0;border-bottom:1px solid #aaa}.comment-avatar{flex-basis:34px;width:34px;height:34px;border-radius:4px;font-size:13px;line-height:18px}.comment-avatar.is-blue{background:var(--blue);color:var(--white)}.post-comments article div{flex:1}.post-comments b{font-size:13px;line-height:18px}.post-comments p{margin-top:3px;font-size:13px;line-height:20px}.post-comments small{color:#777;font-size:10px;line-height:15px}
.post-footer{position:absolute;z-index:15;left:0;bottom:0;width:402px;height:67px;padding:9px 16px 18px;border-top:1px solid var(--ink);background:var(--white);display:flex;gap:8px}.post-footer button{height:38px;border:1px solid var(--ink);border-radius:7px;background:var(--white);box-shadow:1px 1px 0 var(--ink);cursor:pointer}.post-comment-entry{width:204px;padding-left:12px;color:#777;text-align:left}.post-like{width:82px;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--ink)}.post-share{width:60px;background:var(--yellow)!important}.community-heart{width:18px;height:18px;display:block;color:var(--ink)}.community-heart path{fill:transparent;stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}.is-liked .community-heart path{fill:var(--red);stroke:var(--ink)}.post-like.is-liked span{color:var(--red)}

.phone.search-open .tabbar,.phone.search-open .bottom-fade,.phone.search-open>.home-indicator,
.phone.lesson-open .tabbar,.phone.lesson-open .bottom-fade,.phone.lesson-open>.home-indicator,
.phone.assessment-open .tabbar,.phone.assessment-open .bottom-fade,.phone.assessment-open>.home-indicator,
.phone.messages-open .tabbar,.phone.messages-open .bottom-fade,.phone.messages-open>.home-indicator,
.phone.watchlist-open .tabbar,.phone.watchlist-open .bottom-fade,.phone.watchlist-open>.home-indicator,
.phone.invest-open .tabbar,.phone.invest-open .bottom-fade,.phone.invest-open>.home-indicator,
.phone.community-post-open .tabbar,.phone.community-post-open .bottom-fade,.phone.community-post-open>.home-indicator,
.phone.uno-editorial-open .tabbar,.phone.uno-editorial-open .bottom-fade,.phone.uno-editorial-open>.home-indicator,
.phone.topic-library-open .tabbar,.phone.topic-library-open .bottom-fade,.phone.topic-library-open>.home-indicator,
.phone.topic-detail-open .tabbar,.phone.topic-detail-open .bottom-fade,.phone.topic-detail-open>.home-indicator,
.phone.stock-detail-open .tabbar,.phone.stock-detail-open .bottom-fade,.phone.stock-detail-open>.home-indicator { display:none; }

.finance-canvas { transition: none; }
.finance-canvas.fund-expanded { height: 1070px; }
.finance-canvas.multi-expanded { height: 1233px; }
.finance-canvas.fund-expanded.multi-expanded { height: 1443px; }
.finance-canvas.fund-expanded .finance-multiselect { top: 576px; transform: translate3d(0,210px,0); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.steady-funds { position: absolute; left: 15px; top: 254px; width: 372px; height: 495px; }
.steady-funds > h2 { position: absolute; left: 13px; top: 0; font-family: "Glow Sans SC Extended", sans-serif; font-size: 17px; font-weight: 500; line-height: 24px; }
.steady-panel { position: absolute; left: 1px; top: 28px; width: 370px; height: 283px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); overflow: hidden; contain: layout paint; transition: height 560ms cubic-bezier(.22,1,.36,1); }
.steady-funds[data-expanded="true"] .steady-panel { height: 492px; }
.steady-intro { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.steady-tab-slider { position: absolute; left: 11px; top: 11px; width: 78px; height: 24px; border: 1px solid var(--ink); border-radius: 100px; background: var(--ink); transform: translateX(0); transition: transform 280ms cubic-bezier(.22,1,.36,1); }
.steady-funds[data-steady-mode="growth"] .steady-tab-slider { transform: translateX(90px); }
.steady-intro > button { position: absolute; z-index: 1; top: 11px; width: 78px; height: 24px; padding: 2px 12px; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; line-height: 18px; white-space: nowrap; cursor: pointer; pointer-events: auto; transition: color 150ms ease 80ms; }
.steady-intro > button:first-of-type { left: 11px; }
.steady-intro > button:last-of-type { left: 101px; }
.steady-funds[data-steady-mode="history"] .steady-intro > button:first-of-type,
.steady-funds[data-steady-mode="growth"] .steady-intro > button:last-of-type { color: var(--white); }
.steady-intro > p { position: absolute; left: 11px; top: 39px; color: #666; font-size: 13px; line-height: 18px; }
.steady-panel-chevron { position: absolute; left: 333px; top: 11px; width: 24px; height: 24px; display: grid; place-items: center; color: var(--ink); font: 400 31px/24px "PingFang Local", sans-serif; }

.fund-folder-trigger { position: absolute; z-index: 20; left: 0; top: 58px; width: 370px; height: 224px; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.steady-funds[data-expanded="true"] .fund-folder-trigger { pointer-events: none; }
.fund-folder { position: absolute; inset: 0; pointer-events: none; }
.fund-folder > img { position: absolute; left: 3px; width: 362px; height: 61px; display: block; overflow: visible; filter: none; transform-origin: 50% 100%; will-change: transform, opacity; backface-visibility: hidden; transition: transform 210ms cubic-bezier(.22,1,.36,1), opacity 180ms linear; }
.folder-back { z-index: 1; top: 67px; }
.folder-front { z-index: 6; top: 209px; }
.fund-folder small { position: absolute; z-index: 7; left: 223px; top: 251px; color: var(--white); font-size: 10px; font-weight: 400; line-height: 15px; white-space: nowrap; transition: opacity 140ms linear; }
.steady-funds[data-steady-mode="growth"] .fund-folder small { color: var(--ink); }
.steady-funds[data-expanded="true"] .fund-folder > img { transform: translateY(10px) scaleX(.72) scaleY(.02); opacity: 0; }
.steady-funds[data-expanded="true"] .folder-front { z-index: 1; }
.steady-funds[data-expanded="true"] .fund-folder small { opacity: 0; transition-delay: 0ms; }

.steady-product-cards { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.steady-product { --fund-delay: calc(var(--fund-index) * 45ms); --fund-collapsed-y: 1px; position: absolute; z-index: calc(2 + var(--fund-index)); left: 14px; top: calc(61px + var(--fund-index) * 133px); width: 344px; height: 125px; color: var(--ink); pointer-events: none; transform: translate3d(-2px,var(--fund-collapsed-y),0); will-change: transform; backface-visibility: hidden; transition: transform 560ms cubic-bezier(.22,1,.36,1) var(--fund-delay); }
.steady-product:nth-child(2) { --fund-collapsed-y: -86px; }
.steady-product:nth-child(3) { --fund-collapsed-y: -173px; }
.steady-product::before, .steady-product::after { content: none; }
.fund-card-shapes { position: absolute; inset: 0; width: 344px; height: 127px; z-index: 0; max-width: none; overflow: visible; }
.fund-tab-shape, .fund-body-shape { stroke: var(--ink); stroke-width: 1px; transition: none; }
.fund-tab-shape { fill: var(--ink); transform: none; }
.fund-body-shape { fill: var(--paper); transform: none; }
.steady-product > * { position: absolute; z-index: 2; }
.steady-product > .fund-card-shapes { inset: 0; z-index: 0; }
.fund-risk { left: 12px; top: 4px; color: var(--white); font-size: 13px; font-weight: 700; line-height: 18px; transition: left 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), top 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), font-size 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), line-height 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay); }
.fund-return { left: 48px; top: 4px; color: var(--red); font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; transition: left 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), top 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), font-size 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay); }
.steady-product > h3 { left: 16px; top: 26px; font-family: "Glow Sans SC Extended", sans-serif; font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; transition: left 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), top 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), font-size 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), line-height 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay); }
.steady-product > h3 .mono { font-weight: 700; }
.fund-record { right: 16px; top: 27px; color: #666; font-size: 10px; line-height: 15px; white-space: nowrap; transition: right 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), top 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), font-size 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay), line-height 620ms cubic-bezier(.22,1,.36,1) var(--fund-delay); }
.fund-annual { left: 57px; top: 21px; color: var(--white); font-size: 10px; font-weight: 400; line-height: 15px; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity 210ms ease calc(280ms + var(--fund-delay)), transform 210ms cubic-bezier(.22,1,.36,1) calc(280ms + var(--fund-delay)); }
.fund-new-details { z-index: 3; inset: 0; opacity: 0; transform: translateY(7px); pointer-events: none; transition: opacity 220ms ease calc(300ms + var(--fund-delay)), transform 220ms cubic-bezier(.22,1,.36,1) calc(300ms + var(--fund-delay)); }
.fund-term { position: absolute; left: 16px; top: 78px; font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.fund-type { position: absolute; left: 16px; top: 98px; color: #666; font-size: 10px; font-weight: 400; line-height: 15px; white-space: nowrap; }
.fund-favorite { position: absolute; left: 197px; top: 77px; width: 40px; height: 45px; padding: 0; border: 0; background: transparent; font-size: 10px; line-height: 15px; cursor: pointer; transition: transform 80ms ease; }
.fund-favorite img { display: block; width: 17.2365px; height: 16.8788px; margin: 0 auto; transition: filter 160ms ease, transform 160ms cubic-bezier(.22,1,.36,1); }
.fund-favorite span { display: block; white-space: nowrap; }
.fund-favorite.is-favorite img { filter: brightness(0) invert(22%); transform: scale(.94); }
.fund-favorite:active { transform: translate(1px,1px); }
.fund-buy { position: absolute; left: 249px; top: 80px; width: 68px; height: 30px; padding: 0 7px; border: 1px solid var(--ink); border-radius: 6px; background: var(--yellow); box-shadow: 1px 1px 0 var(--ink); display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 24px; white-space: nowrap; cursor: pointer; transition: transform 80ms ease, box-shadow 80ms ease; }
.fund-buy img { flex: 0 0 19.5px; width: 19.5px; height: 19.5px; margin-inline: 2.25px; }
.fund-buy:active { transform: translate(1px,1px); box-shadow: none; }

.steady-funds[data-expanded="true"] .steady-product { transform: translate3d(0,0,0); pointer-events: auto; }
.steady-funds[data-expanded="true"] .fund-tab-shape { transform: none; d: path("M128.782 .5 H10.5 C6.08172 .5 2.5 4.08172 2.5 8.5 V45.5 C2.5 49.9183 6.08172 53.5 10.5 53.5 H176.952 C184.594 53.5 187.885 43.8105 181.825 39.1556 L133.655 2.15559 C132.258 1.082 130.545 .5 128.782 .5 Z"); }
.steady-funds[data-expanded="true"] .fund-body-shape { transform: none; d: path("M332.5 42.5 H8.5 C4.08172 42.5 .5 46.0817 .5 50.5 V117.5 C.5 121.918 4.08172 125.5 8.5 125.5 H332.5 C336.918 125.5 340.5 121.918 340.5 117.5 V50.5 C340.5 46.0817 336.918 42.5 332.5 42.5 Z"); }
.steady-funds[data-expanded="true"] .fund-risk { left: 18px; top: 8px; font-size: 17px; line-height: 24px; }
.steady-funds[data-expanded="true"] .fund-return { left: 57px; top: 5px; }
.steady-funds[data-expanded="true"] .steady-product > h3 { left: 16px; top: 50px; font-size: 17px; line-height: 24px; }
.steady-funds[data-expanded="true"] .fund-record { right: 16px; top: 53px; font-size: 13px; line-height: 18px; }
.steady-funds[data-expanded="true"] .fund-annual, .steady-funds[data-expanded="true"] .fund-new-details { opacity: 1; transform: translateY(0); }
.steady-funds[data-expanded="true"] .fund-new-details { pointer-events: auto; }
.fund-collapse-trigger { position: absolute; z-index: 12; left: 140px; bottom: 12px; width: 90px; height: 15px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 400 10px/15px "PingFang Local", sans-serif; white-space: nowrap; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0ms linear; }
.steady-funds[data-expanded="true"] .fund-collapse-trigger { opacity: 1; pointer-events: auto; transition: opacity 180ms ease 420ms; }
.finance-canvas.fund-resetting .steady-panel,
.finance-canvas.fund-resetting .finance-multiselect,
.finance-canvas.fund-resetting .finance-multi-stage,
.finance-canvas.fund-resetting .finance-multi-card,
.finance-canvas.fund-resetting .finance-multi-copy,
.finance-canvas.fund-resetting .finance-multi-copy b,
.finance-canvas.fund-resetting .finance-multi-copy small,
.finance-canvas.fund-resetting .finance-multi-art,
.finance-canvas.fund-resetting .finance-multi-results,
.finance-canvas.fund-resetting .fund-folder > img,
.finance-canvas.fund-resetting .fund-folder small,
.finance-canvas.fund-resetting .steady-product,
.finance-canvas.fund-resetting .fund-tab-shape,
.finance-canvas.fund-resetting .fund-body-shape,
.finance-canvas.fund-resetting .fund-tab-shape path,
.finance-canvas.fund-resetting .fund-body-shape path,
.finance-canvas.fund-resetting .fund-risk,
.finance-canvas.fund-resetting .fund-return,
.finance-canvas.fund-resetting .steady-product > h3,
.finance-canvas.fund-resetting .fund-record,
.finance-canvas.fund-resetting .fund-annual,
.finance-canvas.fund-resetting .fund-new-details { transition: none !important; }

.market-switch-hit { position: absolute; z-index: 24; left: 16px; top: 62px; width: 84px; height: 44px; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.market-menu { position: absolute; z-index: 40; left: 16px; top: 62px; width: 83px; height: 44px; border: 1px solid var(--ink); background: var(--white); box-shadow: 1px 1px 0 var(--ink); overflow: hidden; opacity: 0; transform-origin: 50% 0; pointer-events: none; transition: height 260ms cubic-bezier(.22,1,.36,1), opacity 90ms ease; }
.market-menu.is-open { height: 88px; opacity: 1; pointer-events: auto; }
.market-menu button { width: 100%; height: 44px; padding: 0 8px; border: 0; outline: 0; background: var(--white); color: var(--ink); text-align: left; font: 300 22px/26px "PingFang Local", sans-serif; cursor: pointer; white-space: nowrap; }
.market-menu button.is-current { font-family: "Glow Sans SC Extended", sans-serif; font-weight: 500; }
.market-menu button:last-child { border-bottom: 0; }
.phone.finance-open.stock-mode .stock-board .market-menu {
  border-color: var(--white);
  background: var(--ink);
  box-shadow: 1px 1px 0 var(--white);
}
.phone.finance-open.stock-mode .stock-board .market-menu button {
  background: var(--ink);
  color: var(--white);
}

.stock-board { position: absolute; z-index: 12; inset: 0; width: 402px; height: 874px; overflow: hidden; background: var(--paper); }
.stock-board-scroller { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.stock-board-scroller::-webkit-scrollbar { display: none; }
.stock-fixed-header { position: absolute; z-index: 20; left: 0; top: 0; width: 402px; height: 107px; overflow: hidden; background: var(--ink); pointer-events: none; }
.stock-fixed-header img { display: block; width: 402px; height: 874px; max-width: none; }
.stock-scroll-spacer { position: absolute; left: 0; top: 874px; width: 1px; height: 89px; }
.stock-board-scroller::before { content: ""; position: absolute; z-index: 4; left: 24px; top: 154px; width: 184px; height: 32px; background: #f8f8f8; }
.stock-board-scroller::after { content: ""; position: absolute; z-index: 7; left: 0; top: 609px; width: 402px; height: 630px; background: var(--paper); pointer-events: none; }
.phone.finance-open:not(.stock-mode) .stock-board { display: none; }
.phone.finance-open.stock-mode .finance-header,
.phone.finance-open.stock-mode .finance-scroller { display: none; }
.phone.finance-open.stock-mode .stock-board { display: block; }
.stock-board-image { position: absolute; inset: 0; width: 402px; height: 874px; display: block; max-width: none; clip-path: inset(108px 0 0); transition: none; }
.stock-board-b { opacity: 0; }
.stock-board[data-stock-sector="hot"] .stock-board-a { opacity: 0; }
.stock-board[data-stock-sector="hot"] .stock-board-b { opacity: 1; }
.stock-sector-slider { z-index: 5; top: 158px; left: 28px; width: 91px; }
.stock-board[data-stock-sector="hot"] .stock-sector-slider { transform: translateX(90px); width: 78px; }
.stock-sector-hit { z-index: 6; top: 158px; }
.stock-sector-first { left: 28px; width: 91px; }
.stock-sector-second { left: 118px; width: 78px; }
.stock-board[data-stock-sector="limit"] .stock-sector-first,
.stock-board[data-stock-sector="hot"] .stock-sector-second { color: #f8f8f8; }
.stock-headline-open { position: absolute; z-index: 12; left: 16px; top: 396px; width: 370px; height: 213px; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.stock-headline-expanded { position: absolute; z-index: 8; left: 16px; top: 396px; width: 370px; height: 213px; overflow: hidden; box-sizing: border-box; border: 1px solid var(--ink); border-radius: 8px; background: #f8f8f8; box-shadow: 1px 1px 0 var(--ink); pointer-events: none; transition: height 560ms cubic-bezier(.22,.72,.18,1); }
.stock-paper { --fold-x: 0px; --fold-y: 0px; --folded-left: 93px; --folded-width: 146px; position: absolute; left: 19px; width: 331px; height: 161px; overflow: visible; transform: translate3d(var(--fold-x),var(--fold-y),0); transition: transform 620ms cubic-bezier(.36,.08,.2,1); }
.stock-paper-1 { --fold-x: -88px; --fold-y: -7px; z-index: 3; top: 19px; }
.stock-paper-2 { --fold-x: 1px; --fold-y: -155px; --folded-left: 92px; --folded-width: 147px; z-index: 4; top: 177px; }
.stock-paper-3 { --fold-x: 92px; --fold-y: -303px; z-index: 5; top: 335px; }
.stock-paper-art { position: absolute; z-index: 1; left: var(--folded-left); top: 0; width: var(--folded-width); height: 161px; display: block; max-width: none; object-fit: fill; }
.stock-paper-art.is-expanded-art { left: 0; top: 0; width: 331px; height: 151px; }
.stock-book-motion { position: absolute; z-index: 3; left: 0; top: 0; width: 331px; height: 151px; overflow: visible; pointer-events: none; shape-rendering: geometricPrecision; }
.stock-book-motion .book-page-layer { filter: none; }
.stock-book-motion .book-page { fill: #f8f8f8; stroke: #383838; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stock-book-motion .book-spine { fill: none; stroke: #383838; stroke-width: 1; vector-effect: non-scaling-stroke; }
.stock-paper-turning-sheet { position: absolute; z-index: 5; top: 0; height: 150px; transform-style: preserve-3d; transform-origin: 0 50%; pointer-events: none; will-change: left, width, transform; }
.stock-paper-turning-face { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.stock-paper-turning-front img { position: absolute; inset: 0; width: 100%; height: auto; min-height: 150px; display: block; max-width: none; }
.stock-paper-turning-back { box-sizing: border-box; border: 1px solid var(--ink); background: #f8f8f8; transform: rotateY(180deg); box-shadow: none; }
.stock-paper-seam-mask { position: absolute; z-index: 6; left: 163px; top: 1px; width: 5px; height: 148px; display: block; background: #f8f8f8; opacity: 0; pointer-events: none; }
.stock-paper-content-slice { position: absolute; z-index: 7; left: 0; top: 0; width: 331px; height: 151px; display: block; max-width: none; object-fit: fill; opacity: 0; pointer-events: none; will-change: opacity, transform; }
.stock-paper.is-book-morphing .stock-paper-art { visibility: visible; opacity: 0; will-change: opacity, transform; }
.stock-paper-row { position: absolute; z-index: 8; left: 12px; top: 103px; width: 307px; height: 42px; background: #f8f8f8; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); opacity: 0; pointer-events: none; }
.stock-paper-row button { position: relative; min-width: 0; padding: 2px 4px 3px; border: 0; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stock-paper-row button + button::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; border-left: 1px solid #b8b8b8; }
.stock-paper-row b,.stock-paper-row span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-paper-row b { color: var(--ink); font: 500 12px/17px "Glow Sans SC Extended",sans-serif; }
.stock-paper-row span { color: var(--red); font: 500 13px/17px "Flynn Mono VF",monospace; }
.stock-paper-row button.is-negative span { color: #00ad99; }
.stock-paper-row button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.stock-paper.is-book-content-revealing .stock-paper-row,
.stock-board.is-headline-expanded:not(.is-headline-animating) .stock-paper-art.is-expanded-art + .stock-paper-row { opacity: 1; pointer-events: auto; }
.stock-headline-hint { position: absolute; z-index: 7; left: 22px; top: 184px; color: var(--ink); font: 400 10px/15px "PingFang Local", sans-serif; white-space: nowrap; opacity: 1; transition: opacity 90ms linear 300ms; }
.stock-headline-collapse { position: absolute; z-index: 2; left: 0; bottom: 6px; width: 100%; height: 22px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 400 10px/15px "PingFang Local", sans-serif; cursor: pointer; opacity: 0; transition: opacity 160ms ease; }
.stock-funds-expanded { position: absolute; z-index: 9; left: 15px; top: 620px; width: 372px; height: 208px; background: url("./public/assets/finance-stock-board-a.svg?v=5") -15px -620px / 402px 874px no-repeat; opacity: 1; pointer-events: none; transform: translateY(0); transition: transform 560ms cubic-bezier(.22,.72,.18,1); }
.stock-flow-stock-link { position: absolute; z-index: 2; height: 21px; padding: 0; border: 0; border-radius: 3px; outline: 0; background: transparent; cursor: pointer; pointer-events: auto; }
.stock-flow-stock-link.is-five-minute { left: 15px; width: 92px; }
.stock-flow-stock-link.is-main-flow { left: 202px; width: 90px; }
.stock-flow-stock-link.is-five-minute.is-row-1 { top: 79px; }
.stock-flow-stock-link.is-five-minute.is-row-2 { top: 118px; }
.stock-flow-stock-link.is-five-minute.is-row-3 { top: 157px; }
.stock-flow-stock-link.is-main-flow.is-row-1 { top: 127px; }
.stock-flow-stock-link.is-main-flow.is-row-2 { top: 153px; }
.stock-flow-stock-link.is-main-flow.is-row-3 { top: 179px; }
.stock-flow-stock-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.stock-board[data-stock-sector="hot"] .stock-funds-expanded { background-image: url("./public/assets/finance-stock-board-b.svg?v=5"); }
.stock-board.is-headline-expanded .stock-headline-open { pointer-events: none; }
.stock-board.is-headline-expanded .stock-headline-expanded { height: 525px; pointer-events: auto; }
.stock-board.is-headline-expanded .stock-paper { z-index: 5; transform: translate3d(0,0,0); }
.stock-board.is-headline-expanded .stock-headline-hint { opacity: 0; transition: none; }
.stock-board.is-headline-expanded:not(.is-headline-animating) .stock-headline-collapse { opacity: 1; }
.stock-board.is-headline-expanded .stock-funds-expanded { transform: translateY(312px); }
.stock-board.is-headline-expanded .stock-scroll-spacer { top: 1140px; height: 99px; }
.stock-board.is-headline-animating .stock-headline-expanded { z-index: 20; overflow: visible; clip-path: inset(-80px -16px -500px -16px); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .stock-headline-expanded, .stock-paper, .stock-headline-hint, .stock-headline-collapse, .stock-funds-expanded { transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .stock-paper-content-slice { filter: none !important; transform: none !important; }
}

.uno-view { display: none; position: absolute; z-index: 12; inset: 0; width: 402px; height: 874px; background: var(--paper); }
.uno-scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.uno-scroller::-webkit-scrollbar { display: none; }
.uno-canvas { --uno-after-market-shift: 0px; --uno-after-editorial-shift: 0px; position: relative; width: 402px; height: calc(1090px + var(--uno-after-editorial-shift)); background: var(--paper); transition: height 480ms cubic-bezier(.22,1,.36,1); }
.uno-canvas[data-inline-editorial="market"] { --uno-after-market-shift: var(--uno-inline-shift); --uno-after-editorial-shift: var(--uno-inline-shift); }
.uno-canvas[data-inline-editorial="learn"] { --uno-after-editorial-shift: var(--uno-inline-shift); }
.uno-canvas.is-inline-collapsing { --uno-after-market-shift: 0px; --uno-after-editorial-shift: 0px; }
.uno-board-image { position: absolute; inset: 0; width: 402px; height: 1089px; display: block; max-width: none; clip-path: inset(108px 0 0); }
.uno-inline-lower-cover, .uno-inline-lower-board { display: none; position: absolute; z-index: 1; left: 0; width: 402px; pointer-events: none; }
.uno-inline-lower-cover { bottom: 0; background: var(--paper); }
.uno-inline-lower-board { background: url("./public/assets/uno-board.svg?v=3") 0 0 / 402px 1089px no-repeat; animation: uno-inline-lower-enter 480ms cubic-bezier(.22,1,.36,1) both; transition: top 480ms cubic-bezier(.22,1,.36,1); }
.uno-canvas[data-inline-editorial] :is(.uno-inline-lower-cover,.uno-inline-lower-board) { display: block; }
.uno-canvas[data-inline-editorial="market"] .uno-inline-lower-cover { top: 414px; }
.uno-canvas[data-inline-editorial="market"] .uno-inline-lower-board { top: calc(414px + var(--uno-inline-shift)); height: 675px; background-position: 0 -414px; }
.uno-canvas[data-inline-editorial="learn"] .uno-inline-lower-cover { top: 577px; }
.uno-canvas[data-inline-editorial="learn"] .uno-inline-lower-board { top: calc(577px + var(--uno-inline-shift)); height: 512px; background-position: 0 -577px; }
.uno-canvas.is-inline-collapsing[data-inline-editorial="market"] .uno-inline-lower-board { top: 414px; animation: none; }
.uno-canvas.is-inline-collapsing[data-inline-editorial="learn"] .uno-inline-lower-board { top: 577px; animation: none; }
@keyframes uno-inline-lower-enter {
  from { transform: translateY(var(--uno-inline-shift-negative)); }
  to { transform: translateY(0); }
}
.uno-copy-cover, .uno-card-cover { position: absolute; z-index: 2; background: var(--paper); pointer-events: none; }
.uno-copy-cover-today-title { left: 12px; top: 116px; width: 378px; height: 44px; }
.uno-copy-cover-tracking-title { left: 14px; top: calc(577px + var(--uno-after-editorial-shift)); width: 374px; height: 21px; transition: top 480ms cubic-bezier(.22,1,.36,1); }
.uno-section-mark, .uno-section-copy { position: absolute; z-index: 3; overflow: hidden; background: url("./public/assets/uno-board.svg?v=3") no-repeat; background-size: 402px 1089px; pointer-events: none; }
.uno-section-mark { left: 14px; top: 118px; width: 32px; height: 40px; background-position: -14px -118px; }
.uno-section-copy-today-prep { left: 46px; top: 118px; width: 180px; height: 18px; background-position: -46px -118px; }
.uno-section-copy-today-main { left: 46px; top: 136px; width: 275px; height: 22px; background-position: -46px -136px; }
.uno-section-copy-tracking { left: 46px; top: calc(577px + var(--uno-after-editorial-shift)); width: 230px; height: 21px; background-position: -46px -577px; transition: top 480ms cubic-bezier(.22,1,.36,1); }
.uno-card-cover { border-radius: 11px; }
.uno-card-cover, .uno-card-shell, .uno-static-card-holding { transition: top 480ms cubic-bezier(.22,1,.36,1); }
.uno-card-cover-market { left: 13px; top: 159px; width: 376px; height: 116px; }
.uno-card-cover-today { left: 13px; top: 280px; width: 376px; height: 129px; }
.uno-card-cover-learn { left: 13px; top: calc(414px + var(--uno-after-market-shift)); width: 376px; height: 155px; }
.uno-card-cover-funds { left: 13px; top: calc(600px + var(--uno-after-editorial-shift)); width: 183px; height: 193px; }
.uno-card-cover-holding { left: 206px; top: calc(600px + var(--uno-after-editorial-shift)); width: 183px; height: 193px; }
.uno-card-cover-news { left: 13px; top: calc(798px + var(--uno-after-editorial-shift)); width: 376px; height: 129px; }
.uno-card-shell { display: none; position: absolute; z-index: 3; width: var(--shell-w); height: var(--shell-h); border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); pointer-events: none; }
.uno-card-shell-market { left: 16px; top: 162px; }
.uno-card-shell-today { left: 16px; top: 283px; }
.uno-card-shell-learn { left: 16px; top: calc(417px + var(--uno-after-market-shift)); }
.uno-card-shell-funds { left: 16px; top: calc(603px + var(--uno-after-editorial-shift)); }
.uno-card-shell-holding { left: 209px; top: calc(603px + var(--uno-after-editorial-shift)); background: var(--ink); }
.uno-card-shell-news { left: 16px; top: calc(801px + var(--uno-after-editorial-shift)); }
.uno-static-card { position: absolute; z-index: 3; overflow: hidden; background-image: url("./public/assets/uno-board.svg?v=3"); background-repeat: no-repeat; background-size: 402px 1089px; pointer-events: none; }
.uno-static-card-today, .uno-static-card-learn { border: 1px solid var(--ink); border-radius: 8px; background-color: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.uno-static-card-today { left: 16px; top: 283px; width: 370px; height: 122px; background-position: -16px -283px; }
.uno-static-card-learn { left: 16px; top: calc(417px + var(--uno-after-market-shift)); width: 370px; height: 148px; background-position: -16px -417px; }
.uno-static-card-holding { left: 207px; top: calc(601px + var(--uno-after-editorial-shift)); width: 181px; height: 190px; background-position: -207px -601px; }
.uno-editorial-card { padding: 11px 12px; background-image: none; color: var(--ink); pointer-events: auto; cursor: default; transition: top 480ms cubic-bezier(.22,1,.36,1), height 480ms cubic-bezier(.22,1,.36,1); }
.uno-editorial-card header { height: 25px; display: flex; align-items: flex-start; }
.uno-editorial-card header h2 { margin: 0; font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.uno-editorial-toggle { margin-left: auto; height: 24px; padding: 0; border: 0; outline: 0; background: transparent; display: flex; align-items: flex-start; color: #666; cursor: pointer; }
.uno-editorial-toggle span { display:block;flex:0 0 auto;margin:2px 0 0;padding:0;font:400 13px/18px "PingFang Local",sans-serif;white-space:nowrap; }
.uno-editorial-card { cursor:pointer; }
/* Measure from the outer edge, including fractional borders under zoom. */
.uno-editorial-card .uno-editorial-toggle { position:absolute;left:auto;right:calc(12px - var(--editorial-border-right, 1px));top:calc(12px - var(--editorial-border-top, 1px));width:auto;margin:0;gap:0; }
.uno-editorial-toggle img { display:block;flex:0 0 24px;width:24px;height:24px;margin:0;padding:0;transform:rotate(0deg);transition:transform 320ms cubic-bezier(.22,1,.36,1); }
.uno-editorial-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.uno-editorial-card.is-inline-expanded .uno-editorial-toggle img { transform: rotate(-90deg); }
.uno-editorial-card h3 { margin: 0; color: var(--ink); font: 700 22px/29px "Glow Sans SC Extended", sans-serif; letter-spacing: -.2px; }
.uno-editorial-card p { margin: 5px 0 0; color: #666; font: 300 13px/20px "PingFang Local", sans-serif; letter-spacing: .05px; }
.uno-static-card-today h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uno-static-card-today.is-inline-expanded h3 { overflow: visible; max-height: none; font-size: 20px; line-height: 26px; white-space: normal; text-overflow: clip; }
.uno-static-card-today p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.uno-static-card-learn { padding: 11px; }
.uno-static-card-learn .uno-editorial-toggle span { width:52px;text-align:right; }
.uno-static-card-learn h3 { position: absolute; left: 11px; top: 39px; width: 315px; max-height: 52px; margin: 0; overflow: hidden; font-size: 22px; line-height: 26px; letter-spacing: 0; white-space: normal; }
.uno-learn-summary { display: contents; }
.uno-learn-summary > span { display: none; }
.uno-static-card-learn::before { content: ""; position: absolute; left: 11px; top: 86px; width: 28px; height: 22px; background: url("./public/assets/uno-board.svg?v=3") -28px -504px / 402px 1089px no-repeat; pointer-events: none; }
.uno-static-card-learn .uno-learn-summary p { position: absolute; left: 11px; top: 99px; width: 346px; height: 36px; margin: 0; overflow: hidden; color: #666; font: 400 13px/18px "PingFang Local", sans-serif; letter-spacing: 0; text-align: justify; text-indent: 0; display: block; }
.uno-editorial-card.is-inline-expanded { z-index: 8; height: var(--uno-expanded-card-height); }
.uno-inline-editorial-detail { position: absolute; left: 12px; right: 12px; top: 116px; padding-top: 12px; border-top: 2px solid var(--ink); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 220ms ease 190ms, transform 360ms cubic-bezier(.22,1,.36,1) 150ms; }
.uno-static-card-today.is-inline-expanded .uno-inline-editorial-detail { top: 120px; }
.uno-static-card-learn .uno-inline-editorial-detail { top: 147px; }
.uno-editorial-card.is-inline-expanded .uno-inline-editorial-detail { opacity: 1; transform: translateY(0); pointer-events: auto; }
.uno-inline-editorial-sections { display: grid; gap: 0; }
.uno-inline-editorial-section { min-height: 68px; padding: 8px 0 9px; border-bottom: 1px solid #b8b8b8; }
.uno-inline-editorial-section:first-child { padding-top: 0; }
.uno-inline-editorial-section h4 { margin: 0 0 3px; color: var(--ink); font: 700 13px/18px "Glow Sans SC Extended", sans-serif; }
.uno-inline-editorial-section p { margin: 0; color: #555; font: 300 12px/18px "PingFang Local", sans-serif; letter-spacing: 0; text-indent: 0; display: block; overflow: visible; }
.uno-inline-editorial-note { position: relative; min-height: 48px; margin-top: 9px; padding: 9px 32px; border-radius: 6px; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; font: 300 11px/17px "PingFang Local", sans-serif; text-align: center; }
.uno-inline-editorial-note::before { content: "“"; position: absolute; left: 9px; top: 4px; color: var(--blue); font: 700 29px/30px "Glow Sans SC Extended", sans-serif; }
.uno-inline-editorial-note span { display: block; width: 100%; }

.uno-editorial-detail-canvas { min-height: 767px; padding: 20px 16px 54px; }
.uno-editorial-detail-kicker { display: inline-flex; height: 26px; padding: 2px 8px; align-items: center; border: 1px solid var(--ink); border-radius: 6px; background: var(--blue); color: var(--white); box-shadow: 1px 1px 0 var(--ink); font: 500 13px/20px "PingFang Local", sans-serif; }
.uno-editorial-detail-title { margin: 13px 0 8px; color: var(--ink); font: 700 30px/39px "Glow Sans SC Extended", sans-serif; letter-spacing: -.4px; }
.uno-editorial-detail-lead { color: #666; font: 300 15px/24px "PingFang Local", sans-serif; }
.uno-editorial-detail-meta { height: 38px; margin-top: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); display: flex; align-items: flex-start; justify-content: space-between; color: #777; font: 400 10px/15px "PingFang Local", sans-serif; }
.uno-editorial-detail-sections { display: grid; gap: 12px; margin-top: 16px; }
.uno-editorial-detail-section { padding: 14px 14px 15px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.uno-editorial-detail-section:nth-child(2) { background: var(--paper); }
.uno-editorial-detail-section h2 { margin: 0 0 7px; font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.uno-editorial-detail-section p { color: #555; font: 300 14px/23px "PingFang Local", sans-serif; }
.uno-editorial-detail-note { position: relative; min-height: 66px; margin-top: 14px; padding: 13px 14px 13px 50px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: var(--white); font: 300 13px/20px "PingFang Local", sans-serif; }
.uno-editorial-detail-note::before { content: "“"; position: absolute; left: 13px; top: 5px; color: var(--blue); font: 700 46px/54px "Glow Sans SC Extended", sans-serif; }
.uno-static-card::after { content: ""; position: absolute; z-index: 2; inset: 8px; border-radius: 4px; background: #f8f8f8; opacity: 0; pointer-events: none; }
.uno-static-card-holding::after { background: #383838; }
.uno-view.is-card-entering [data-uno-card]:not(.uno-market-viewport):not(.uno-news-viewport):not(.uno-followed-funds) { animation: uno-main-card-expand 640ms cubic-bezier(.22,1,.36,1) var(--card-delay) both; transform-origin: 0 0; }
.uno-view.is-card-entering .uno-market-viewport { --dynamic-card-w: 370px; --dynamic-card-h: 109px; animation: uno-dynamic-card-expand 640ms cubic-bezier(.22,1,.36,1) var(--card-delay) both; }
.uno-view.is-card-entering .uno-followed-funds { --dynamic-card-w: 177px; --dynamic-card-h: 186px; animation: uno-dynamic-card-expand 640ms cubic-bezier(.22,1,.36,1) var(--card-delay) both; }
.uno-view.is-card-entering .uno-news-viewport { --dynamic-card-w: 370px; --dynamic-card-h: 122px; animation: uno-dynamic-card-expand 640ms cubic-bezier(.22,1,.36,1) var(--card-delay) both; }
.uno-view.is-card-entering .uno-static-card { animation: uno-static-card-swap 1ms linear calc(var(--card-delay) + 640ms) both; }
.uno-view.is-card-entering .uno-card-shell { display: block; animation: uno-card-shell-expand 640ms cubic-bezier(.22,1,.36,1) var(--card-delay) both; }
.uno-view.is-card-entering .uno-card-shell-market,
.uno-view.is-card-entering .uno-card-shell-today,
.uno-view.is-card-entering .uno-card-shell-learn,
.uno-view.is-card-entering .uno-card-shell-funds,
.uno-view.is-card-entering .uno-card-shell-news { display: none; }
.uno-view.is-card-entering .uno-section-copy { animation: uno-section-copy-reveal 620ms cubic-bezier(.16,1,.3,1) var(--copy-stage-delay) both; will-change: opacity, transform; backface-visibility: hidden; }
.uno-view.is-card-entering .uno-static-card::after { animation: uno-static-copy-reveal 560ms cubic-bezier(.22,1,.36,1) calc(var(--card-delay) + 650ms) both; }
.uno-view.is-card-entering .uno-editorial-card { animation: uno-editorial-rise 320ms cubic-bezier(.4,0,.2,1) var(--card-delay) both; will-change: transform, opacity; }
.uno-view.is-card-entering .uno-editorial-card::after { animation: none; opacity: 0; }
@keyframes uno-editorial-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes uno-main-card-expand {
  0% { clip-path: inset(0 100% 100% 0 round 8px); opacity: 0; }
  35% { opacity: 1; }
  100% { clip-path: inset(0 0 0 0 round 8px); opacity: 1; }
}
@keyframes uno-dynamic-card-expand {
  0% { width: 0; height: 0; opacity: 0; }
  2% { opacity: 1; }
  100% { width: var(--dynamic-card-w); height: var(--dynamic-card-h); opacity: 1; }
}
@keyframes uno-card-shell-expand {
  0% { width: 0; height: 0; opacity: 0; }
  2% { opacity: 1; }
  99.8% { width: var(--shell-w); height: var(--shell-h); opacity: 1; }
  100% { width: var(--shell-w); height: var(--shell-h); opacity: 0; }
}
@keyframes uno-static-card-swap {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes uno-section-copy-reveal {
  0% { opacity: 0; transform: translate3d(0, 4px, 0); }
  38% { opacity: .42; }
  72% { opacity: .82; transform: translate3d(0, .5px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes uno-static-copy-reveal {
  0%, 18% { clip-path: inset(0 0 0 0 round 4px); opacity: 1; filter: blur(0); }
  100% { clip-path: inset(0 0 0 100% round 4px); opacity: 1; filter: blur(3px); }
}
.uno-view.is-card-entering .uno-market-viewport > h2,
.uno-view.is-card-entering .uno-followed-funds > h2,
.uno-view.is-card-entering .fund-card-chevron,
.uno-view.is-card-entering .uno-followed-fund h3,
.uno-view.is-card-entering .uno-followed-fund p,
.uno-view.is-card-entering .uno-followed-fund em,
.uno-view.is-card-entering .uno-news-viewport > h2,
.uno-view.is-card-entering .uno-news-chevron { animation: uno-main-card-copy 520ms linear calc(var(--card-delay) + 470ms + var(--copy-delay, 0ms)) both; }
.uno-market-item > strong, .uno-followed-fund h3, .uno-news-card p { --copy-delay:70ms; }
.uno-market-item > small, .uno-followed-fund p, .uno-news-card time { --copy-delay:140ms; }
.uno-followed-fund em { --copy-delay:210ms; }
@keyframes uno-main-card-copy {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; filter: blur(7px); transform: translateX(-4px); }
  45% { opacity: .55; filter: blur(3px); }
  100% { clip-path: inset(0 0 0 0); opacity: 1; filter: blur(0); transform: translateX(0); }
}
/* Moving copy is revealed only after its card has reached full size. Keeping
   the reveal on the whole track avoids child clip-paths masking moving text. */
.uno-view.is-card-entering .uno-market-track,
.uno-view.is-card-entering .uno-news-track { animation: uno-moving-copy-reveal 140ms ease-out calc(var(--card-delay) + 640ms) both; }
@keyframes uno-moving-copy-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.uno-fixed-header,
.community-fixed-header,
.my-fixed-header { position: absolute; z-index: 20; left: 0; top: 0; width: 402px; height: 107px; overflow: hidden; background: var(--paper); pointer-events: none; }
.uno-fixed-header img { display: block; width: 402px; height: 1089px; max-width: none; }
.uno-fixed-header::after { content: ""; position: absolute; z-index: 13; left: 342px; top: 62px; width: 1px; height: 44px; background: var(--ink); }
.uno-market-session { position: absolute; z-index: 12; left: 17px; top: 63px; width: 325px; height: 42px; background: #f8f8f8; color: #383838; }
.uno-market-session strong { position: absolute; left: 8px; top: 7px; margin: 0; font: 400 22px/26px "PingFang Local", sans-serif; white-space: nowrap; }
.uno-market-session > span { position: absolute; left: 93px; top: 15px; margin: 0; font: 300 13px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.uno-market-session[data-market-state="closed"] > span { display: none; }
.community-fixed-header img { display: block; width: 402px; height: 1843px; max-width: none; }
.my-fixed-header img { position: absolute; inset: 0; display: block; width: 402px; height: auto; max-width: none; }
.my-fixed-header .my-fixed-stock { display: none; }
.my-view[data-my-account="stock"] .my-fixed-fund { display: none; }
.my-view[data-my-account="stock"] .my-fixed-stock { display: block; }

.uno-market-viewport { position: absolute; z-index: 3; left: 16px; top: 162px; width: 370px; height: 109px; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.uno-market-viewport > h2 { position: absolute; z-index: 2; left: 11px; top: 11px; margin: 0; color: var(--ink); font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.uno-market-mask { position: absolute; inset: -1px; width: 370px; height: 109px; overflow: hidden; }
.uno-market-viewport { cursor: grab; touch-action: pan-y; }
.uno-market-viewport.is-dragging { cursor: grabbing; }
.uno-market-track { position: absolute; left: 36px; top: 40px; height: 57px; display: flex; align-items: start; gap: 20px; width: max-content; transform: translate3d(0, 0, 0); will-change: transform; }
.uno-market-item { flex: 0 0 109px; width: 109px; height: 57px; white-space: nowrap; }
.uno-market-item.wide { flex-basis: 123px; width: 123px; }
.uno-market-item > span { display: block; color: #383838; font: 400 13px/18px "PingFang Local", sans-serif; }
.uno-market-item strong { display: block; height: 24px; font: 700 17px/24px "Flynn Mono VF", monospace; letter-spacing: 1.1px; }
.uno-market-item small { display: flex; width: 109px; height: 15px; align-items: center; gap: 12px; color: inherit; font: 400 10px/15px "Flynn Mono VF", monospace; letter-spacing: -1.5px; }
.uno-market-item .market-percent { flex: 0 0 auto; white-space: nowrap; }
.uno-market-item .market-change { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 2px; white-space: nowrap; }
.uno-market-item .market-change img { display: block; flex: 0 0 8px; width: 8px; height: 10px; }
.uno-market-item.up .market-change img { transform: scaleY(-1); }
.uno-market-item.up strong, .uno-market-item.up small { color: #ff6762; }
.uno-market-item.down strong, .uno-market-item.down small { color: #00ae98; }

.uno-followed-funds { position: absolute; z-index: 4; left: 16px; top: calc(603px + var(--uno-after-editorial-shift)); width: 177px; height: 186px; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); transition: top 480ms cubic-bezier(.22,1,.36,1); }
.uno-followed-funds::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: 175px; height: 43px; background: var(--white); }
.uno-followed-funds > h2 { position: absolute; z-index: 3; left: 11px; top: 11px; margin: 0; font: 700 17px/24px "Glow Sans SC Extended", sans-serif; white-space: nowrap; }
.fund-card-chevron { position: absolute; z-index: 3; right: 10px; top: 7px; font: 400 29px/28px "PingFang Local", sans-serif; }
.uno-followed-funds-scroll { position: absolute; z-index: 1; left: 0; top: 43px; width: 177px; height: 143px; padding: 5px 12px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.uno-followed-funds-scroll::-webkit-scrollbar { display: none; }
.uno-followed-fund { width: 153px; min-height: 69px; padding: 0 0 7px; border-bottom: 1px solid var(--ink); }
.uno-followed-fund:last-child { border-bottom: 0; }
.uno-followed-fund h3 { height: 24px; color: var(--ink); font: 700 17px/24px "Glow Sans SC Extended", sans-serif; white-space: nowrap; }
.uno-followed-fund h3 b { font-family: "Flynn Mono VF", monospace; }
.uno-followed-fund > div { display: flex; gap: 12px; }
.uno-followed-fund p { flex: 0 0 55px; width: 55px; color: var(--ink); font: 500 13px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.uno-followed-fund em { display: block; color: #ff6661; font: normal 400 10px/15px "Flynn Mono VF", monospace; }

.uno-news-viewport { position: absolute; z-index: 3; left: 16px; top: calc(801px + var(--uno-after-editorial-shift)); width: 370px; height: 122px; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); cursor: grab; touch-action: pan-y; transition: top 480ms cubic-bezier(.22,1,.36,1); }
.uno-news-viewport.is-dragging { cursor: grabbing; }
.uno-news-viewport::before { content: ""; position: absolute; z-index: 0; inset: 0; background: var(--white); }
.uno-news-viewport::after { content: none; }
.uno-news-viewport > h2 { position: absolute; z-index: 4; left: 11px; top: 11px; margin: 0; color: var(--ink); font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.uno-news-chevron { position: absolute; z-index: 4; right: 10px; top: 7px; font: 400 29px/28px "PingFang Local", sans-serif; }
.uno-news-mask { position: absolute; z-index: 1; inset: 0; width: 370px; height: 122px; overflow: hidden; }
.uno-news-track { position: absolute; left: 12px; top: 40px; height: 70px; display: flex; gap: 12px; width: max-content; transform: translate3d(0, 0, 0); will-change: transform; }
.uno-news-card { flex: 0 0 310px; width: 310px; height: 70px; color: var(--ink); }
.uno-news-card-svg { display: block; width: 310px; height: 70px; overflow: visible; }
.uno-news-card-svg image { pointer-events: none; }
.uno-news-accent-fill { fill: var(--blue); }
.uno-news-accent-stroke { stroke: var(--blue); vector-effect: non-scaling-stroke; }
.uno-news-title { fill: #f8f8f8; font: 700 17px "Glow Sans SC Extended", sans-serif; dominant-baseline: central; white-space: nowrap; }
.uno-news-summary { fill: var(--ink); font: 500 13px "PingFang Local", sans-serif; dominant-baseline: central; white-space: nowrap; }
.uno-news-date { fill: #f8f8f8; font: 400 13px "PingFang Local", sans-serif; dominant-baseline: central; text-anchor: middle; white-space: nowrap; }
.uno-news-card:nth-child(even) .uno-news-accent-fill { fill: var(--yellow); }
.uno-news-card:nth-child(even) .uno-news-accent-stroke { stroke: var(--yellow); }
.uno-news-card:nth-child(even) .uno-news-title { fill: var(--ink); }

/* Community and account boards use the exact Figma exports as their visual base. */
.community-view,
.my-view { display: none; position: absolute; z-index: 12; inset: 0; width: 402px; height: 874px; overflow: hidden; background: var(--paper); }
.phone.community-open .home-view,
.phone.community-open .finance-view,
.phone.community-open .uno-view,
.phone.my-open .home-view,
.phone.my-open .finance-view,
.phone.my-open .uno-view { display: none; }
.phone.community-open .community-view,
.phone.my-open .my-view { display: block; }

.community-scroller,
.my-scroller { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; background: var(--paper); }
.community-scroller::-webkit-scrollbar,
.my-scroller::-webkit-scrollbar,
.holdings-scroll-window::-webkit-scrollbar { display: none; }
.community-canvas { position: relative; width: 402px; height: 1973px; background: var(--paper); }
.community-canvas > img:first-child { position: absolute; inset: 0; display: block; width: 402px; height: 1843px; max-width: none; clip-path: inset(108px 0 1494px); }
.community-topics-module { position: absolute; z-index: 4; left: 16px; top: 146px; width: 370px; height: 164px; }
.community-topics-scroll { position: absolute; z-index: 1; inset: 0; width: 370px; height: 164px; overflow: hidden; touch-action: pan-y; cursor: grab; border-radius: 8px; background: #f8f8f8; }
.community-topics-scroll:active { cursor: grabbing; }
.community-topics-track { position: relative; width: 541px; height: 164px; background: #f8f8f8; transform: translateX(var(--topic-offset, 0px)); will-change: transform; }
.community-topics-track.is-settling { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
.topic-note { position: absolute; width: 121px; height: 125px; color: #f8f8f8; pointer-events: none; }
.topic-note-shape { position: absolute; inset: 0; display: block; width: 121px; height: 125px; max-width: none; }
.topic-note strong { position: absolute; z-index: 2; left: 8px; width: 104px; color: inherit; font: 700 17px/22px "Glow Sans SC Extended", sans-serif; word-break: break-all; }
.topic-note small { position: absolute; z-index: 2; left: 8px; display: flex; gap: 18px; color: inherit; font: 400 10px/15px "PingFang Local", sans-serif; white-space: nowrap; }
.topic-note-first { left: 12px; top: 8px; color: var(--ink); }
.topic-note-first strong { top: 27px; }
.topic-note-first small { top: 93px; }
.topic-note-second { left: 144px; top: 28px; }
.topic-note-second strong { top: 35px; }
.topic-note-second small { top: 79px; }
.topic-note-third { left: 276px; top: 8px; }
.topic-note-third strong { top: 35px; }
.topic-note-third small { top: 79px; }
.topic-note-fourth { left: 408px; top: 28px; color: var(--ink); }
.topic-note-fourth strong { top: 27px; }
.topic-note-fourth small { top: 93px; }
.topic-note-dark-shell { position: absolute; left: 0; top: 4px; width: 120px; height: 120px; border: 1px solid #f8f8f8; background: var(--ink); box-shadow: 1px 1px 0 var(--ink); }
.topic-note-third-tape { position: absolute; z-index: 2; left: 53px; top: 0; display: block; width: 14px; height: 23px; }
.community-topics-frame { position: absolute; z-index: 2; inset: 0; width: 370px; height: 164px; border: 1px solid var(--ink); border-radius: 8px; box-shadow: 1px 1px 0 var(--ink); pointer-events: none; }
.community-feed{position:absolute;z-index:6;left:15px;top:349px;width:373px;display:flex;align-items:flex-start;gap:13px}.community-feed-column{width:180px;display:flex;flex-direction:column;gap:13px}.community-post-card{position:relative;width:180px;height:var(--card-height);border:1px solid var(--ink);border-radius:8px;background:var(--white);box-shadow:1px 1px 0 var(--ink);overflow:hidden;cursor:pointer;outline:0}.community-post-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.community-card-media{display:block;width:178px;height:var(--media-height);border-bottom:1px solid var(--ink);object-fit:cover}.community-card-copy{height:calc(100% - var(--media-height, 0px));padding:8px 11px 9px;display:flex;flex-direction:column}.community-post-card:not(.has-media) .community-card-copy{height:100%}.community-card-title{margin:0;color:var(--ink);font:500 17px/24px "PingFang Local","PingFang SC",sans-serif}.community-card-meta{margin-top:auto;height:22px;display:flex;align-items:center;color:#666;font:400 13px/18px "PingFang Local","PingFang SC",sans-serif}.community-card-avatar{width:20px;height:20px;margin-right:5px;border:1px solid #aaa;border-radius:3px;object-fit:cover}.community-card-like{margin-left:auto;padding:0;border:0;background:transparent;display:flex;align-items:center;gap:4px;color:#666;font:400 13px/18px "Flynn Mono VF",monospace;cursor:pointer}.community-card-like.is-liked span{color:var(--red)}.community-card-like:focus-visible{outline:1px solid var(--blue);outline-offset:2px}
.community-card-entrances { display: none; position: absolute; z-index: 3; inset: 0; width: 402px; height: 1843px; pointer-events: none; }
.community-card-entrances > span { position: absolute; left: var(--card-x); top: var(--card-y); width: var(--card-w); height: var(--card-h); overflow: hidden; background: var(--paper); }
.community-card-entrances > span::before { content: ""; position: absolute; inset: 0; display: block; width: var(--card-w); height: var(--card-h); background: url('./public/assets/community-board.svg?v=4') calc(0px - var(--card-x)) calc(0px - var(--card-y)) / 402px 1843px no-repeat; }

.my-scroller,
.my-canvas { background: var(--paper); }
.my-canvas { position: relative; width: 402px; height: 874px; overflow: hidden; }
.my-canvas[data-my-account="fund"] { height: 1414px; }
.my-board { position: absolute; inset: 0; display: block; width: 402px; max-width: none; }
.my-fund-board { height: 874px; clip-path: inset(108px 0 0); }
.my-stock-board { display: none; height: 969px; clip-path: inset(108px 0 823px); }
.my-stock-board-lower { display: none; inset: auto 0 auto 0; top: 206px; height: 969px; clip-path: inset(286px 0 0); }
.my-view[data-my-account="fund"] .my-scroller { overflow-y: auto; touch-action: pan-y; }
.my-view[data-my-account="fund"] .my-canvas { will-change: transform; }
.my-view[data-my-account="fund"] .my-canvas.is-fund-returning { transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.my-canvas[data-my-account="stock"] { height: 1160px; }
.my-canvas[data-my-account="stock"] .my-fund-board { display: none; }
.my-canvas[data-my-account="stock"] .my-stock-board { display: block; }
.my-canvas[data-my-account="stock"] .my-stock-board-lower { display: block; }

.fund-account-extension { position: absolute; z-index: 9; left: 0; top: 322px; width: 402px; height: 992px; background: var(--paper); }
.my-canvas[data-my-account="stock"] .fund-account-extension { display: none; }
.fund-contribution-heading { position: absolute; left: 28px; top: 0; margin: 0; color: var(--ink); font: 500 17px/24px "Glow Sans SC Extended", "PingFang Local", sans-serif; }
.fund-contribution-card { position: absolute; left: 16px; top: 32px; width: 370px; height: 370px; overflow: hidden; border: 1px solid var(--ink); border-radius: 12px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); color: var(--ink); }
.fund-contribution-chart { position: absolute; left: 16px; top: 15px; width: 338px; height: 338px; display: block; overflow: visible; color: var(--ink); }
.fund-contribution-front,
.fund-contribution-back,
.fund-contribution-solid-edges line,
.fund-contribution-connectors line { stroke: currentColor; stroke-width: var(--fund-stroke-width, 1px); stroke-linecap: square; stroke-linejoin: miter; stroke-opacity: 1; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.fund-contribution-front,
.fund-contribution-back,
.fund-contribution-faces polygon { fill: var(--fund-bar-color); fill-opacity: var(--fund-bar-fill-opacity, 1); }
.fund-contribution-faces polygon { stroke: none; }
.fund-contribution-connectors line,
.fund-contribution-solid-edges line { fill: none; }
.fund-contribution-bar { opacity: 1; }
.fund-contribution-bar[data-index="0"] { --fund-bar-color: var(--blue); }
.fund-contribution-bar[data-index="1"] { --fund-bar-color: var(--yellow); }
.fund-contribution-bar[data-index="2"] { --fund-bar-color: var(--red); }
.fund-contribution-bar[data-index="3"] { --fund-bar-color: var(--paper); }
.fund-contribution-bar[data-index="4"] { --fund-bar-color: var(--white); }
.fund-contribution-bar:is([data-index="0"], [data-index="1"]) .fund-contribution-faces polygon[data-face="right"],
.fund-contribution-bar:is([data-index="3"], [data-index="4"]) .fund-contribution-faces polygon[data-face="left"],
.fund-contribution-bar:is([data-index="0"], [data-index="1"], [data-index="3"], [data-index="4"]) .fund-contribution-faces polygon[data-face="bottom"] {
  fill: color-mix(in srgb, var(--fund-bar-color) 82%, var(--ink) 18%);
}
.fund-contribution-nodes rect { width: 3px; height: 3px; fill: currentColor; shape-rendering: crispEdges; }
.fund-contribution-value,
.fund-contribution-name { fill: currentColor; dominant-baseline: alphabetic; text-anchor: middle; pointer-events: none; }
.fund-contribution-value { fill: var(--red); }
.fund-contribution-value { font: 600 10px/15px "Flynn Mono VF", monospace; letter-spacing: .08em; }
.fund-contribution-name { font: 500 13px/18px "PingFang Local", "PingFang SC", sans-serif; }
.my-canvas.is-interface-entering .fund-contribution-heading { animation: fund-heading-in 360ms ease both; }
@keyframes fund-heading-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.fund-assets-expanded { position: absolute; left: 16px; top: 417px; width: 370px; background: var(--paper); color: var(--ink); }
.fund-assets-expanded h2 { height: 30px; margin: 0; padding-left: 12px; font: 500 17px/24px "Glow Sans SC Extended", "PingFang Local", sans-serif; }
.fund-assets-expanded > div { display: flex; gap: 12px; }
.fund-assets-expanded article { flex: 1 1 0; min-width: 0; height: 96px; padding: 12px; border-radius: 9px; background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; }
.fund-assets-expanded strong { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; white-space: nowrap; }
.fund-assets-expanded b { font: 600 13px/18px "Flynn Mono VF", monospace; white-space: nowrap; }
.fund-holdings-expanded { position: absolute; left: 16px; top: 558px; width: 370px; padding-bottom: 18px; background: var(--paper); color: var(--ink); }
.fund-holdings-expanded h2 { height: 30px; margin: 0 0 0 12px; border-bottom: 1px solid var(--ink); font: 500 17px/24px "Glow Sans SC Extended", "PingFang Local", sans-serif; }
.fund-holdings-expanded article { height: 73px; margin-left: 12px; border-bottom: 1px solid var(--ink); display: flex; align-items: center; justify-content: space-between; }
.fund-holdings-expanded article:last-child { border-bottom: 0; }
.fund-holdings-expanded article > div { min-width: 0; max-width: 235px; }
.fund-holdings-expanded strong,
.fund-holdings-expanded small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fund-holdings-expanded strong { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.fund-holdings-expanded small { margin-top: 2px; font: 400 10px/15px "PingFang Local", sans-serif; }
.fund-holdings-expanded p { flex: 0 0 112px; margin: 0; text-align: right; }
.fund-holdings-expanded p b,
.fund-holdings-expanded p em { display: block; white-space: nowrap; }
.fund-holdings-expanded p b { color: var(--red); font: 600 17px/24px "Flynn Mono VF", monospace; }
.fund-holdings-expanded p em { color: var(--red); font: normal 600 13px/18px "Flynn Mono VF", monospace; }

.stock-composition-card { display: none; position: absolute; z-index: 7; left: 16px; top: 146px; width: 370px; height: 330px; overflow: hidden; border: 1px solid var(--white); border-radius: 12px; background: var(--ink); color: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.my-canvas[data-my-account="stock"] .stock-composition-card { display: block; }
.stock-ring-stage { position: absolute; left: 75px; top: 120px; width: 220px; height: 142px; perspective: 420px; cursor: grab; touch-action: none; transform: translateY(0); transition: transform 900ms cubic-bezier(.22,1,.36,1); }
.stock-composition-card.is-perspective .stock-ring-stage { transform: translateY(72px); }
.stock-ring-stage:active { cursor: grabbing; }
.stock-ring-stage::after { content: ""; position: absolute; z-index: 0; left: 13px; top: 92px; width: 194px; height: 42px; border: 1px solid #777; border-radius: 50%; opacity: 0; transform: scale(.72); transition: opacity 180ms linear 280ms, transform 760ms cubic-bezier(.22,1,.36,1); }
.stock-composition-card.is-perspective .stock-ring-stage::after { opacity: 1; transform: scale(1); }
.stock-composition-ring { position: relative; z-index: 1; display: block; width: 220px; height: 142px; overflow: visible; transform: scale(1.85) rotateX(0deg) rotateZ(var(--ring-rotation, 0deg)); transform-origin: 50% 50%; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(.22,1,.36,1); will-change: transform; }
.stock-composition-card.is-perspective .stock-composition-ring { transform: scale(2.12) rotateX(58deg) rotateZ(var(--ring-rotation, 0deg)); }
.stock-ring-track, .stock-ring-outline, .stock-ring-face, .stock-ring-depth { fill: none; stroke-width: 12px; }
.stock-ring-track { stroke: #666; transition: opacity 320ms linear; }
.stock-ring-outline { stroke: var(--white); stroke-width: 15px; pointer-events: none; transition: opacity 300ms linear; }
.stock-ring-segment { --slice-color: var(--blue); --slice-depth: #267b9f; cursor: pointer; transform-box: view-box; transform-origin: 80px 55px; transition: transform 620ms cubic-bezier(.22,1,.36,1), filter 220ms linear, opacity 300ms linear; }
.stock-ring-segment[data-stock-slice="boe"] { --slice-color: #4dc5ff; --slice-depth: #267b9f; }
.stock-ring-segment[data-stock-slice="unicom"] { --slice-color: var(--yellow); --slice-depth: #a38e00; }
.stock-ring-segment[data-stock-slice="three-squirrels"] { --slice-color: var(--red); --slice-depth: #9d3f43; }
.stock-ring-segment[data-stock-slice="cash"] { --slice-color: var(--white); --slice-depth: #888; }
.stock-ring-face, .stock-ring-depth { stroke: var(--slice-color); pointer-events: stroke; transition: opacity 320ms linear; }
.stock-ring-face { filter: drop-shadow(0 0 0 var(--ink)); }
.stock-ring-cap { fill: none; stroke: var(--white); stroke-width: 1.5px; stroke-linecap: butt; pointer-events: none; transition: opacity 320ms linear; }
.stock-ring-depth { stroke: transparent; stroke-width: 28px; opacity: 0; transform: none; transition: opacity 180ms linear; pointer-events: stroke; }
.stock-composition-card.is-perspective .stock-ring-track { opacity: .2; }
.stock-composition-card.is-perspective .stock-ring-segment:not(.is-selected) .stock-ring-face { opacity: .28; }
.stock-composition-card.is-perspective .stock-ring-depth { opacity: 1; }
.stock-composition-card.is-perspective .stock-ring-segment.is-selected { transform: translateY(-15px); filter: drop-shadow(0 6px 0 #111); }
.stock-composition-card.is-inspecting .stock-ring-track { opacity: 0; }
.stock-composition-card.is-inspecting .stock-ring-segment:not(.is-selected) { opacity: 1; }
.stock-composition-card.is-inspecting .stock-ring-segment:not(.is-selected) .stock-ring-face { stroke: #555; opacity: 1; }
.stock-composition-card.is-inspecting .stock-ring-segment:not(.is-selected) .stock-ring-outline,
.stock-composition-card.is-inspecting .stock-ring-segment:not(.is-selected) .stock-ring-cap { opacity: 0; }
.stock-composition-card.is-inspecting .stock-ring-segment.is-selected,
.stock-composition-card.is-inspecting .stock-ring-outline.is-selected { opacity: 1; }
.stock-ring-percentages { position: absolute; z-index: 3; inset: 0; pointer-events: none; color: var(--white); font: 700 9px/13px "Flynn Mono VF", monospace; }
.stock-ring-percentages span { position: absolute; display: block; white-space: nowrap; transition: color 240ms linear, opacity 240ms linear, transform 240ms cubic-bezier(.22,1,.36,1); }
.stock-ring-percentages span[data-stock-percent="boe"] { right: -61px; top: 13px; }
.stock-ring-percentages span[data-stock-percent="unicom"] { right: -37px; bottom: -20px; }
.stock-ring-percentages span[data-stock-percent="three-squirrels"] { left: -64px; top: 94px; }
.stock-ring-percentages span[data-stock-percent="cash"] { left: -34px; top: -19px; }
.stock-composition-card.is-inspecting .stock-ring-percentages { opacity: 0; }
.stock-composition-card.is-ring-entering .stock-ring-track { animation: stock-ring-track-in 560ms cubic-bezier(.22,1,.36,1) both; }
.stock-composition-card.is-ring-entering .stock-ring-stage { animation: stock-ring-stage-in 1080ms cubic-bezier(.22,1,.36,1) both; }
.stock-composition-card.is-ring-entering .stock-ring-percentages { animation: stock-ring-copy-in 420ms ease 650ms both; }
.stock-composition-card.is-ring-entering .stock-ring-segment { animation: stock-ring-slice-in 620ms cubic-bezier(.22,1,.36,1) both; }
.stock-composition-card.is-ring-entering .stock-ring-segment:nth-of-type(1) { animation-delay: 40ms; }
.stock-composition-card.is-ring-entering .stock-ring-segment:nth-of-type(2) { animation-delay: 80ms; }
.stock-composition-card.is-ring-entering .stock-ring-segment:nth-of-type(3) { animation-delay: 120ms; }
.stock-composition-card.is-ring-entering .stock-ring-segment:nth-of-type(4) { animation-delay: 160ms; }
@keyframes stock-ring-track-in { from { opacity: 0; transform: scale(.7); transform-origin: 80px 55px; } to { opacity: 1; transform: scale(1); transform-origin: 80px 55px; } }
@keyframes stock-ring-slice-in { from { opacity: 0; transform: translateY(11px) scale(.74); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes stock-ring-stage-in { 0% { opacity: 0; transform: translateY(72px) rotate(-58deg) scale(.54); } 42% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } }
.stock-ring-segment:focus,
.stock-ring-segment:focus-visible { outline: none; }
.stock-composition-total { position: absolute; left: 20px; top: 17px; width: 330px; }
.stock-composition-total > span, .stock-composition-total > strong, .stock-composition-total > small { display: block; }
.stock-composition-total > span { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.stock-composition-total > strong { margin-top: 2px; color: var(--white); font: 700 22px/26px "Flynn Mono VF", monospace; letter-spacing: .6px; white-space: nowrap; }
.stock-composition-total > small { position: absolute; right: 0; top: 9px; width: max-content; padding: 3px 8px; border: 1px solid var(--white); border-radius: 6px; color: var(--white); font: 400 13px/18px "PingFang Local", sans-serif; }
.stock-composition-total > small b { font: 400 13px/18px "Flynn Mono VF", monospace; }
.stock-composition-selected { position: absolute; z-index: 3; left: 75px; top: 169px; width: 220px; height: 57px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; pointer-events: none; transition: opacity 240ms linear, top 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1); }
.stock-composition-card.is-inspecting .stock-composition-selected { opacity: 1; }
.stock-composition-card.is-ring-entering .stock-composition-selected { animation: stock-ring-copy-in 520ms cubic-bezier(.22,1,.36,1) 520ms both; }
.stock-composition-card.is-perspective .stock-composition-selected { top: 84px; transform: scale(1.08); }
.stock-composition-selected span, .stock-composition-selected strong, .stock-composition-selected small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-composition-selected > span { display: none; }
.stock-composition-selected strong { color: var(--white); font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.stock-composition-selected small { color: var(--white); font: 700 12px/18px "Flynn Mono VF", monospace; }
.stock-composition-selected small b { font: inherit; }
.stock-composition-selected small i,
.stock-composition-selected small b[data-stock-detail="ratio"] { display: none; }
.stock-composition-selected.is-updating strong { animation: stock-composition-copy 260ms cubic-bezier(.22,1,.36,1) both; }
@keyframes stock-composition-copy { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stock-ring-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.stock-ring-back { position: absolute; z-index: 4; left: 145px; top: 270px; width: 80px; height: 43px; padding: 0; border: 0; background: transparent; color: var(--white); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 220ms linear 430ms, transform 620ms cubic-bezier(.22,1,.36,1) 280ms; cursor: pointer; }
.stock-ring-back span, .stock-ring-back b { display: block; }
.stock-ring-back span { font: 400 12px/17px "PingFang Local", sans-serif; }
.stock-ring-back b { font: 400 18px/18px "PingFang Local", sans-serif; }
.stock-composition-card.is-perspective .stock-ring-back { opacity: 1; transform: translateY(0); pointer-events: auto; }
.stock-ring-back:focus,
.stock-ring-back:focus-visible { outline: none; }

.my-account-switch,
.my-bank-entry,
.bank-back { position: absolute; z-index: 8; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.my-account-switch,
.my-bank-entry { z-index: 22; }
.my-account-switch { left: 16px; top: 62px; width: 282px; height: 44px; }
.my-bank-entry { left: 298px; top: 62px; width: 44px; height: 44px; }
.my-account-switch:focus-visible,
.my-bank-entry:focus-visible,
.bank-back:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.my-account-menu { position: absolute; z-index: 24; left: 16px; top: 62px; width: 282px; height: 44px; overflow: hidden; border: 1px solid var(--ink); background: #f8f8f8; box-shadow: 1px 1px 0 var(--ink); opacity: 0; transform-origin: 50% 0; pointer-events: none; transition: height 270ms cubic-bezier(.22,1,.36,1), opacity 90ms ease; }
.my-account-menu.is-open { height: 88px; opacity: 1; pointer-events: auto; }
.my-account-menu.is-switching { opacity: 0; transition: none; pointer-events: none; }
.my-account-menu button { display: block; width: 100%; height: 44px; padding: 0 8px; border: 0; background: #f8f8f8; color: var(--ink); text-align: left; font: 300 22px/26px "PingFang Local", sans-serif; cursor: pointer; white-space: nowrap; }
.my-account-menu button.is-current { font-family: "Glow Sans SC Extended", sans-serif; font-weight: 500; }
.my-account-menu button:last-child { border-bottom: 0; }
.my-view[data-my-account="stock"] .my-account-menu {
  border-color: var(--white);
  background: var(--ink);
  box-shadow: 1px 1px 0 var(--white);
}
.my-view[data-my-account="stock"] .my-account-menu button {
  background: var(--ink);
  color: var(--white);
}

/* The stock/value column is a separate opaque layer. Only the right window scrolls. */
.my-holdings-table { display: none; position: absolute; z-index: 7; left: 28px; top: 819px; width: 374px; height: 190px; overflow: hidden; background: var(--paper); color: var(--ink); }
.my-canvas[data-my-account="stock"] .my-holdings-table { display: block; }
.my-holdings-table::after { content: ""; position: absolute; z-index: 8; right: 0; top: 0; width: 42px; height: 190px; background: linear-gradient(90deg, rgb(246 239 234 / 0%), var(--paper) 82%); pointer-events: none; }
.holdings-fixed-column { position: absolute; z-index: 5; left: 0; top: 0; width: 124px; height: 190px; overflow: hidden; background: var(--paper); }
.holdings-heading { height: 26px; padding-top: 0; font: 400 13px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.holding-fixed-row { position: relative; height: 60px; padding-top: 0; background: var(--paper); }
.holding-fixed-row:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: var(--ink); }
.holding-fixed-row b,
.holding-fixed-row span { display: block; white-space: nowrap; }
.holding-fixed-row b { font: 500 13px/18px "PingFang Local", sans-serif; }
.holding-fixed-row span { margin-top: 1px; font: 400 15px/22px "Flynn Mono VF", monospace; letter-spacing: 0; }
.holdings-scroll-window { position: absolute; z-index: 2; left: 124px; top: 0; width: 250px; height: 190px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; background: var(--paper); cursor: grab; }
.holdings-scroll-window:active { cursor: grabbing; }

/* Horizontal gestures are controls, not text/image selection surfaces. */
.uno-market-viewport,
.uno-news-viewport,
.community-topics-scroll,
.holdings-scroll-window {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.uno-market-viewport img,
.uno-news-viewport img,
.community-topics-scroll img,
.holdings-scroll-window img {
  -webkit-user-drag: none;
  user-drag: none;
}
.holdings-moving-table { width: 727px; min-width: 727px; height: 190px; padding-right: 40px; background: var(--paper); }
.moving-heading,
.moving-row { display: grid; grid-template-columns: 80px 114px 113px 90px 88px 102px 100px; }
.moving-heading { height: 26px; align-items: start; padding-top: 0; font: 400 13px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.moving-heading > span { padding-left: 4px; }
.moving-row { position: relative; height: 60px; align-items: start; padding-top: 0; }
.moving-row:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px; background: var(--ink); }
.moving-row > span,
.moving-row > strong { display: block; padding-left: 4px; font: 400 15px/22px "Flynn Mono VF", monospace; letter-spacing: 0; white-space: nowrap; }
.moving-row > strong { color: var(--red); font-weight: 400; }
.moving-row .single { padding-top: 0; }

.bank-page { display: none; position: absolute; z-index: 40; inset: 0; width: 402px; height: 874px; overflow: hidden; background: var(--paper); }
.phone.bank-open .bank-page { display: block; }
.bank-header-board { position: absolute; z-index: 1; inset: 0; display: block; width: 402px; height: 874px; max-width: none; clip-path: inset(0 0 768px 0); }
.bank-dark-header { display: none; position: absolute; z-index: 3; inset: 0 0 auto; width: 402px; height: 107px; background: var(--ink); color: var(--white); }
.phone.dark-child-theme.bank-open .bank-header-board { display: none; }
.phone.dark-child-theme.bank-open .bank-dark-header { display: block; }
.bank-dark-nav { position: absolute; left: 0; top: 62px; width: 402px; height: 45px; border-top: 1px solid var(--white); border-bottom: 2px solid var(--white); }
.bank-dark-nav::after { content: ""; position: absolute; right: 15px; top: 0; height: 44px; border-left: 1px solid var(--white); }
.phone.dark-child-theme.bank-open .bank-back { border-inline: 1px solid var(--white); }
.bank-dark-nav img { position: absolute; left: 26px; top: 10px; width: 24px; height: 24px; filter: brightness(0) invert(1); transform: rotate(90deg); }
.bank-dark-nav span { position: absolute; left: 69px; top: 7px; font: 500 22px/28px "Glow Sans SC Extended", sans-serif; }
.bank-back { left: 16px; top: 62px; width: 44px; height: 44px; }
.bank-content { position: absolute; z-index: 2; inset: 0; width: 402px; height: 874px; will-change: transform; }
.bank-content.is-elastic-returning { transition: transform 320ms cubic-bezier(.22,1,.36,1); }
.bank-card { position: absolute; left: 28px; width: 346px; height: 220px; overflow: hidden; border: 1px solid var(--ink); border-radius: 24px; box-shadow: 1.5px 1.5px 0 #383838, 1.5px 1.5px 0 #4ddaff; transition: top 600ms cubic-bezier(.22,1,.36,1); }
.bank-card-china { z-index: 2; top: 118px; border-color: #f8f8f8; background: #383838; }
.bank-card-cmb { z-index: 3; top: 162px; background: #ff6863; }
.bank-card-bocom { z-index: 4; top: 206px; background: #ffde00; }
.bank-logo { position: absolute; left: 24px; top: 30px; width: 40px; height: 40px; overflow: hidden; }
.bank-logo img { position: absolute; left: -52px; top: calc(0px - var(--logo-source-y)); display: block; width: 402px; height: 874px; max-width: none; }
.bank-card-text { position: absolute; left: 76px; top: 16px; width: 240px; }
.bank-card-text b,
.bank-card-text span { display: block; white-space: nowrap; }
.bank-card-text b { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.bank-card-text span { font: 400 15px/22px "PingFang Local", sans-serif; }
.bank-card-china .bank-card-text,
.bank-card-cmb .bank-card-text { color: #f8f8f8; }
.bank-card-bocom .bank-card-text { color: var(--ink); }
.bank-sleeve { position: absolute; left: 16px; top: 192px; width: 370px; height: 235px; transition: top 600ms cubic-bezier(.22,1,.36,1); }
.bank-sleeve-back { position: absolute; z-index: 1; inset: 0; width: 370px; height: 235px; border: 1px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 1.5px 1.5px 0 #383838, 1.5px 1.5px 0 #4ddaff; }
.bank-sleeve-front { position: absolute; z-index: 5; left: -.5px; top: 86.5px; display: block; width: 371px; height: 149px; max-width: none; pointer-events: none; }
.bank-page.is-expanded .bank-card-china { top: 118px; }
.bank-page.is-expanded .bank-card-cmb { top: 218px; }
.bank-page.is-expanded .bank-card-bocom { top: 318px; }
.bank-page.is-expanded .bank-sleeve { top: 331px; }
.bank-stack-trigger { position: absolute; z-index: 7; left: 28px; top: 118px; width: 358px; height: 448px; padding: 0; border: 0; outline: 0; background: transparent; cursor: pointer; }
.bank-page.is-expanded .bank-stack-trigger { pointer-events: none; }
.phone.bank-open .tabbar,
.phone.bank-open .bottom-fade,
.phone.bank-open .home-indicator { display: none; }

.fund-purchase-page { display: none; position: absolute; z-index: 70; inset: 0; width: 402px; height: 874px; overflow: hidden; background: var(--paper); }
.phone.purchase-open .fund-purchase-page { display: block; }
.purchase-header { position: absolute; z-index: 12; inset: 0 0 auto; width: 402px; height: 107px; background: var(--white); }
.purchase-header .status-bar { height: 62px; }
.purchase-nav { position: absolute; left: 0; top: 62px; width: 402px; height: 45px; border-top: 1px solid var(--ink); border-bottom: 2px solid var(--ink); }
.purchase-nav::after { content: ""; position: absolute; right: 15px; top: 0; width: 0; height: 44px; border-left: 1px solid var(--ink); }
.purchase-back { position: absolute; left: 16px; top: 0; width: 44px; height: 44px; padding: 0; border: 0; border-inline: 1px solid var(--ink); background: transparent; display: grid; place-items: center; cursor: pointer; }
.purchase-back img { width: 24px; height: 24px; transform: rotate(90deg); }
.purchase-nav-title { position: absolute; left: 69px; top: 7px; padding: 0; border: 0; background: transparent; color: var(--ink); font: 500 22px/26px "Glow Sans SC Extended", sans-serif; cursor: pointer; }
.purchase-scroller { position: absolute; z-index: 1; inset: 107px 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; background: var(--paper); }
.purchase-scroller::-webkit-scrollbar { display: none; }
.purchase-canvas { position: relative; width: 402px; height: 930px; transition: height 320ms cubic-bezier(.22,1,.36,1); }
.purchase-product-title { position: absolute; left: 28px; top: 11px; margin: 0; font: 700 22px/26px "Glow Sans SC Extended", sans-serif; white-space: nowrap; }
.purchase-tags { position: absolute; left: 28px; top: 48px; display: flex; gap: 5px; }
.purchase-tags span { height: 26px; padding: 3px 4px; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); font: 400 13px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.purchase-calculator { position: absolute; left: 16px; top: 86px; width: 370px; height: 298px; border: 1px solid var(--ink); border-radius: 8px; background: var(--blue); box-shadow: 1px 1px 0 var(--ink); }
.purchase-display { position: absolute; left: 16px; top: 16px; width: 338px; height: 42px; overflow: hidden; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); box-shadow: inset 2px 2px 0 var(--ink); white-space: nowrap; }
.purchase-display b { position: absolute; left: 6px; top: 6px; font: 700 22px/26px "Glow Sans SC Extended", sans-serif; }
.purchase-yen { position: absolute; left: 111px; top: 12px; width: 14px; height: 17px; }
.purchase-yen img { display: block; width: 14px; height: 17px; }
.purchase-amount-value { position: absolute; right: 7px; top: 6px; min-width: 0; font: 700 22px/26px "Flynn Mono VF", monospace; letter-spacing: 1px; text-align: right; }
.purchase-display small { position: absolute; right: 8px; top: 12px; color: #666; font: 400 13px/18px "PingFang Local", sans-serif; }
.purchase-display:has(.purchase-amount-value:not(:empty)) small { display: none; }
.purchase-display.is-empty-error { border-color: #ff6863; box-shadow: inset 2px 2px 0 #ff6863; animation: purchase-display-shake 180ms linear; }
.purchase-display.is-empty-error b { top: 8px; color: #ff6863; }
.purchase-display.is-empty-error .purchase-yen { left: 113px; top: 14px; }
.purchase-display.is-empty-error .purchase-yen img { filter: invert(48%) sepia(73%) saturate(1634%) hue-rotate(326deg) brightness(107%) contrast(102%); }
.purchase-display.is-empty-error small { display: block; left: 131px; right: auto; top: 15px; color: #ff6863; }
.purchase-keypad { position: absolute; left: 15px; top: 85px; width: 340px; height: 196px; display: grid; grid-template-columns: 74px 73px 73px 74px; grid-template-rows: repeat(4,40px); gap: 12px 14px; }
.purchase-keypad button { padding: 0; border: 1px solid var(--ink); border-radius: 6px; background: var(--yellow); box-shadow: 1px 1px 0 var(--ink); font: 700 22px/24px "Flynn Mono VF", monospace; cursor: pointer; }
.purchase-keypad button:active { transform: translate(1px,1px); box-shadow: none; }
.purchase-keypad .purchase-operator, .purchase-keypad .purchase-equals { background: var(--paper); }
.purchase-equals { grid-column: 4; grid-row: 3 / span 2; }
.purchase-details { position: absolute; left: 16px; top: 400px; width: 370px; height: 180px; padding: 0; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.purchase-details article { position: absolute; left: 0; width: 100%; height: 56px; }
.purchase-details article:nth-child(1) { top: 0; }
.purchase-details article:nth-child(2) { top: 56px; }
.purchase-details article:nth-child(3) { top: 112px; }
.purchase-detail-icon { position: absolute; left: 11px; top: 21px; width: 24px; height: 24px; }
.purchase-details article > div { position: absolute; inset: 0; }
.purchase-details b, .purchase-details span, .purchase-details small { display: block; }
.purchase-details b { position: absolute; left: 47px; top: 11px; font: 500 17px/24px "PingFang Local", sans-serif; }
.purchase-details span { position: absolute; left: 47px; top: 37px; color: var(--blue); font: 500 13px/18px "PingFang Local", sans-serif; }
.purchase-details em { font-style: normal; }
.purchase-details small { position: absolute; left: 90px; top: 40px; color: #666; font: 400 10px/15px "PingFang Local", sans-serif; white-space: nowrap; }
.purchase-payment { position: absolute; left: 16px; top: 596px; z-index: 2; width: 370px; height: 48px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); transition: height 420ms cubic-bezier(.22,1,.36,1); }
.purchase-payment-row { position: absolute; z-index: 12; left: 0; top: 0; width: 100%; height: 47px; padding: 0 12px; border: 0; background: transparent; display: flex; align-items: center; cursor: pointer; }
.purchase-payment-row b { font: 500 17px/24px "PingFang Local", sans-serif; }
.purchase-payment-row span { margin-left: auto; font: 400 17px/24px "PingFang Local", sans-serif; }
.purchase-menu-icon { flex: 0 0 24px; width: 24px; height: 24px; margin-left: 0; }
.menu-indicator,
.detail-chevron,
.steady-panel-chevron,
.fund-card-chevron,
.uno-news-chevron { color: transparent !important; font-size: 0 !important; background: url("./public/assets/purchase-menu-indicator.svg") center / 24px 24px no-repeat; transform: rotate(-90deg) !important; }
.start .menu-indicator { filter: brightness(0) invert(1); }
.purchase-wallet { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; pointer-events: none; opacity: 0; }
.purchase-payment[data-wallet-state="stacked"], .purchase-payment[data-wallet-state="expanded"] { height: 369px; }
.purchase-payment[data-wallet-state="expanded"] { height: 508px; }
.purchase-payment[data-wallet-state="stacked"] .purchase-wallet, .purchase-payment[data-wallet-state="expanded"] .purchase-wallet { pointer-events: auto; opacity: 1; }
.purchase-bank-card { position: absolute; left: 11px; width: 346px; height: 220px; padding: 0; overflow: hidden; border: 1px solid var(--ink); border-radius: 24px; box-shadow: 1.5px 1.5px 0 var(--ink); text-align: left; transition: top 520ms cubic-bezier(.22,1,.36,1), box-shadow 160ms ease; cursor: pointer; }
.purchase-bank-china { z-index: 2; top: 48px; border-color: var(--white); background: var(--ink); color: var(--white); }
.purchase-bank-cmb { z-index: 3; top: 92px; background: #ff6863; color: var(--white); }
.purchase-bank-bocom { z-index: 4; top: 136px; background: var(--yellow); color: var(--ink); }
.purchase-payment[data-wallet-state="expanded"] .purchase-bank-china { top: 48px; }
.purchase-payment[data-wallet-state="expanded"] .purchase-bank-cmb { top: 148px; }
.purchase-payment[data-wallet-state="expanded"] .purchase-bank-bocom { top: 248px; }
.purchase-bank-card.is-selected { box-shadow: 1.5px 1.5px 0 var(--ink); }
.purchase-bank-card.is-selected::after { content: ""; position: absolute; z-index: 10; inset: 0; border: 4px solid var(--blue); border-radius: 24px; pointer-events: none; }
.purchase-bank-logo { position: absolute; left: 24px; top: 30px; width: 40px; height: 40px; overflow: hidden; }
.purchase-bank-logo img { position: absolute; inset: 0; display: block; width: 40px; height: 40px; max-width: none; }
.purchase-bank-copy { position: absolute; left: 76px; top: 16px; }
.purchase-bank-copy b, .purchase-bank-copy small { display: block; white-space: nowrap; }
.purchase-bank-copy b { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.purchase-bank-copy small { font: 400 15px/22px "PingFang Local", sans-serif; }
.purchase-bank-sleeve { position: absolute; z-index: auto; left: 0; top: 122px; width: 370px; height: 235px; pointer-events: none; transition: top 520ms cubic-bezier(.22,1,.36,1); }
.purchase-payment[data-wallet-state="expanded"] .purchase-bank-sleeve { top: 261px; }
.purchase-bank-sleeve > span { position: absolute; z-index: 1; inset: 0; border: 1px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--blue); }
.purchase-bank-sleeve img { position: absolute; z-index: 6; left: -.5px; top: 86.5px; width: 371px; height: 149px; max-width: none; }
.purchase-wallet-expand { position: absolute; z-index: 8; left: 0; top: 48px; width: 100%; height: 320px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.purchase-payment[data-wallet-state="expanded"] .purchase-wallet-expand { display: none; }
.purchase-summary { position: absolute; left: 16px; top: 660px; width: 370px; height: 88px; padding: 11px; border: 1px solid var(--white); border-radius: 8px; background: var(--ink); color: var(--white); box-shadow: 1px 1px 0 var(--ink); transition: top 420ms cubic-bezier(.22,1,.36,1); }
.purchase-summary h2 { font: 500 17px/24px "PingFang Local", sans-serif; }
.purchase-summary p { margin-top: 4px; font: 300 13px/18px "PingFang Local", sans-serif; text-align: justify; }
.purchase-payment[data-wallet-state="stacked"] ~ .purchase-summary { top: 981px; }
.purchase-payment[data-wallet-state="expanded"] ~ .purchase-summary { top: 1120px; }
.purchase-canvas:has(.purchase-payment[data-wallet-state="stacked"]) { height: 1220px; }
.purchase-canvas:has(.purchase-payment[data-wallet-state="expanded"]) { height: 1359px; }
.purchase-footer { position: absolute; z-index: 8; left: 0; bottom: 0; width: 402px; height: 150px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 50%) 75%); }
.purchase-confirm { position: absolute; left: 16px; bottom: 34px; width: 370px; height: 50px; padding: 0; border: 2px solid var(--ink); border-radius: 53px; background: var(--blue); color: var(--white); font: 500 22px/26px "PingFang Local", sans-serif; letter-spacing: 4.4px; pointer-events: auto; cursor: pointer; }
.purchase-home-indicator { position: absolute; z-index: 15; left: 129px; bottom: 8px; width: 144px; height: 5px; border-radius: 100px; background: #000; }
.purchase-receipt-overlay { position: absolute; z-index: 10; inset: 107px 0 0; display: none; overflow: hidden; }
.purchase-receipt-overlay.is-visible { display: block; }
.purchase-receipt-dim { position: absolute; inset: 0; background: rgb(0 0 0 / 48%); opacity: 0; }
.purchase-receipt-overlay.is-visible .purchase-receipt-dim { animation: purchase-dim-in 220ms ease-out forwards; }
.ticket-machine { position: absolute; z-index: 4; left: 3px; top: 14px; width: 396px; height: 102px; transform: translateY(-130px); }
.ticket-machine img { display: block; width: 396px; height: 102px; }
.ticket-slot { position: absolute; z-index: 7; left: 16px; top: 73px; width: 370px; height: 10px; background: var(--ink); transform: translateY(-130px); }
.purchase-receipt-overlay.is-visible .ticket-machine { animation: ticket-machine-drop 360ms cubic-bezier(.22,1,.36,1) forwards; }
.purchase-receipt-overlay.is-visible .ticket-slot { animation: ticket-machine-drop 360ms cubic-bezier(.22,1,.36,1) forwards; }
.ticket-output { position: absolute; z-index: 6; left: 27px; top: 78px; width: 348px; height: 675px; overflow: hidden; pointer-events: none; }
.purchase-ticket { position: absolute; left: 0; top: 0; width: 348px; height: 675px; padding: 0; background: transparent; color: var(--ink); transform: translateY(-680px); }
.purchase-ticket::before { content: ""; position: absolute; z-index: 0; inset: 0; background: #f8f8f8; clip-path: polygon(0 0,100% 0,100% 99.63%,93.75% 96.67%,87.5% 99.63%,81.25% 96.67%,75% 99.63%,68.75% 96.67%,62.5% 99.63%,56.25% 96.67%,50% 99.63%,43.75% 96.67%,37.5% 99.63%,31.25% 96.67%,25% 99.63%,18.75% 96.67%,12.5% 99.63%,6.25% 96.67%,0 99.63%); }
.ticket-paper-art { position: absolute; z-index: 0; inset: 0; display: block; width: 348px; height: 675px; pointer-events: none; }
.purchase-receipt-overlay.is-printing .purchase-ticket { animation: ticket-print 1050ms cubic-bezier(.16,.78,.22,1) 280ms forwards; }
.purchase-ticket > header { position: absolute; left: 25px; top: 10px; width: 298px; display: flex; justify-content: space-between; color: #666; font: 400 13px/18px "PingFang Local", sans-serif; }
.purchase-ticket time { text-align: right; font-style: normal; }
.ticket-brand { position: absolute; left: 102px; top: 40px; width: 143px; height: 67px; }
.ticket-brand::after { content: ""; position: absolute; left: -77px; top: 87px; width: 298px; height: 1px; background: #777; }
.ticket-brand img { display: block; width: 143px; height: 67px; }
.purchase-ticket h2 { position: absolute; left: 25px; top: 135px; margin: 0; font: 700 22px/26px "Glow Sans SC Extended", sans-serif; }
.ticket-success, .ticket-line, .ticket-meta p { font: 400 17px/24px "PingFang Local", sans-serif; }
.ticket-success { position: absolute; left: 25px; top: 173px; margin: 0; display: flex; align-items: center; gap: 6px; }
.ticket-check { position: relative; display: block; width: 24px; height: 24px; }
.ticket-check img:first-child { position: absolute; left: 1px; top: 1px; width: 22px; height: 22px; }
.ticket-check img:last-child { position: absolute; left: 7px; top: 8px; width: 11px; height: 8px; }
.ticket-line { position: absolute; left: 25px; top: 213px; width: 298px; height: 37px; margin: 0; display: flex; justify-content: space-between; border-bottom: 1px solid #777; }
.ticket-line::after { content: ""; position: absolute; left: 76px; top: 12px; width: 153px; border-top: 2px dashed var(--ink); }
.ticket-line b { position: relative; z-index: 1; padding-left: 6px; background: var(--white); font-weight: 400; }
.ticket-timeline { position: absolute; left: 30px; top: 262px; width: 293px; height: 100px; border-bottom: 1px solid #777; }
.ticket-timeline > img { position: absolute; left: 0; top: 0; width: 22px; height: 69px; }
.ticket-timeline > .ticket-timeline-end { left: 3px; top: 68px; width: 14px; height: 14px; }
.ticket-timeline p { position: absolute; margin: 0; font: 400 17px/24px "PingFang Local", sans-serif; white-space: nowrap; }
.ticket-timeline p:nth-of-type(1) { left: 32px; top: -1px; }
.ticket-timeline p:nth-of-type(2) { left: 44px; top: 63px; }
.ticket-meta { position: absolute; left: 25px; top: 373px; width: 298px; height: 133px; padding: 0; border-bottom: 1px solid #777; }
.ticket-meta p { height: 32px; margin: 0; }
.ticket-barcode { position: absolute; left: 25px; top: 517px; width: 298px; height: 65px; background: repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 12px,var(--ink) 12px 15px,transparent 15px 20px,var(--ink) 20px 30px,transparent 30px 34px); }
.purchase-ticket > small { position: absolute; left: 25px; top: 594px; width: 298px; margin: 0; text-align: center; color: #666; font: 400 10px/15px "PingFang Local", sans-serif; }
@keyframes purchase-dim-in { to { opacity: 1; } }
@keyframes purchase-display-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
@keyframes ticket-machine-drop { 0% { transform: translateY(-130px); } 78% { transform: translateY(4px); } 100% { transform: translateY(0); } }
@keyframes ticket-print { 0% { transform: translateY(-680px); } 72% { transform: translateY(8px); } 100% { transform: translateY(0); } }

.fund-detail-page { display: none; position: absolute; z-index: 60; inset: 0; width: 402px; height: 874px; overflow: hidden; background: var(--paper); }
.phone.detail-open .fund-detail-page { display: block; }
.fund-detail-header { position: absolute; z-index: 12; inset: 0 0 auto; width: 402px; height: 107px; background: var(--white); }
.fund-detail-header .status-bar { height: 62px; }
.fund-detail-nav { position: absolute; left: 0; top: 62px; width: 402px; height: 45px; border-top: 1px solid var(--ink); border-bottom: 2px solid var(--ink); }
.fund-detail-back { position: absolute; left: 16px; top: 0; width: 44px; height: 44px; padding: 0; border: 0; border-inline: 1px solid var(--ink); background: transparent; display: grid; place-items: center; cursor: pointer; }
.fund-detail-back img { width: 24px; height: 24px; transform: rotate(90deg); }
.fund-detail-nav-title { position: absolute; left: 60px; top: 0; width: 326px; height: 44px; padding: 0 0 0 9px; border: 0; border-right: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 22px/26px "Glow Sans SC Extended", sans-serif; text-align: left; cursor: pointer; }
.fund-detail-scroller { position: absolute; z-index: 1; inset: 106px 0 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; background: var(--paper); }
.fund-detail-scroller::-webkit-scrollbar { display: none; }
.fund-detail-canvas { position: relative; width: 402px; height: 1372px; }
.fund-detail-title { position: absolute; left: 28px; top: 12px; height: 26px; margin: 0; font: 700 22px/26px "Glow Sans SC Extended", sans-serif; white-space: nowrap; }
.fund-detail-tags { position: absolute; left: 222px; top: 12px; display: flex; gap: 8px; }
.fund-detail-tags span { height: 26px; padding: 3px 4px; border: 1px solid var(--ink); border-radius: 6px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); font: 400 13px/18px "PingFang Local", sans-serif; text-align: center; white-space: nowrap; }
.fund-detail-tags span:nth-child(1) { width: 62px; }
.fund-detail-tags span:nth-child(2) { width: 27px; }
.fund-detail-tags span:nth-child(3) { width: 49px; }
.fund-detail-primary-stat { position: absolute; z-index: 2; left: 28px; top: 46px; display: flex; align-items: baseline; gap: 4px; text-align: left; white-space: nowrap; }
.fund-detail-primary-stat small, .fund-detail-primary-stat strong { display: block; }
.fund-detail-primary-stat small { order: 2; color: #666; font: 400 10px/15px "PingFang Local", sans-serif; }
.fund-detail-primary-stat strong { order: 1; color: var(--red); font-size: 22px; line-height: 26px; font-weight: 700; }
.fund-detail-stats { position: absolute; left: 16px; top: 76px; width: 370px; height: 57px; padding: 11px 11px 0; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: start; }
.fund-detail-stats > div { min-width: 0; padding: 0; white-space: nowrap; }
.fund-detail-stats > div:first-child { text-align: left; }
.fund-detail-stats > div:nth-child(2) { text-align: center; }
.fund-detail-stats > div:last-child { text-align: right; }
.fund-detail-stats strong, .fund-detail-stats small { display: block; }
.fund-detail-stats strong { color: #ff6863; font-size: 13px; line-height: 18px; font-weight: 700; }
.fund-detail-stats strong.is-down { color: #00ae98; }
.fund-detail-stats strong.is-neutral { color: var(--ink); }
.fund-detail-stats small { color: var(--ink); font: 400 10px/15px "PingFang Local", sans-serif; }
.fund-detail-section-title { position: absolute; left: 28px; margin: 0; font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.performance-title { top: 145px; }
.holdings-title { top: 505px; }
.rules-title { top: 822px; }
.chat-title { top: 1042px; }
.fund-performance-card { position: absolute; left: 16px; top: 173px; width: 370px; height: 320px; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.performance-legend { position: absolute; left: 23px; top: 11px; display: flex; align-items: center; gap: 20px; font: 500 13px/18px "PingFang Local", sans-serif; }
.performance-legend span { position: relative; padding-left: 16px; }
.performance-legend span::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; border-top: 1.5px solid #ff6863; }
.performance-legend .track-line::before { border-color: var(--blue); }
.performance-plot { position: absolute; inset: 0; }
.performance-plot > img { position: absolute; z-index: 2; left: 73px; top: 44px; width: 272.75px; height: 139.75px; max-width: none; }
.plot-y { position: absolute; left: 23px; width: 45px; color: var(--ink); font-size: 10px; line-height: 15px; letter-spacing: -2px; }
.plot-y.y-1 { top: 44px; }.plot-y.y-2 { top: 75px; }.plot-y.y-3 { top: 106px; }.plot-y.y-4 { top: 137px; }.plot-y.y-5 { top: 168px; }
.plot-grid { position: absolute; z-index: 1; left: 74px; width: 271px; border-top: 1px dashed rgb(77 197 255 / 72%); }
.plot-grid.grid-1 { top: 51px; }.plot-grid.grid-2 { top: 82px; }.plot-grid.grid-3 { top: 113px; }.plot-grid.grid-4 { top: 144px; }.plot-grid.grid-5 { top: 175px; }
.plot-date { position: absolute; top: 183px; color: var(--ink); font-size: 10px; line-height: 15px; letter-spacing: -2px; }
.plot-date.date-start { left: 73px; }.plot-date.date-end { left: 272px; }
.performance-table { position: absolute; left: 23px; top: 210px; width: 322px; padding-top: 11px; border-top: 1px solid var(--ink); }
.performance-table-head, .performance-table-row { display: grid; grid-template-columns: 57px 85px 85px 95px; align-items: center; }
.performance-table-head { height: 15px; color: var(--ink); font: 400 10px/15px "PingFang Local", sans-serif; }
.performance-table-head span:last-child { text-align: right; }
.performance-table-row { height: 26px; font-size: 13px; line-height: 18px; }
.performance-table-row > span { font-weight: 500; }
.performance-table-row strong { color: #ff6863; font-weight: 400; }
.performance-table-row b { color: var(--ink); font-weight: 400; text-align: right; }
.performance-table-row b em { color: #999; font-style: normal; }
.fund-holdings-card { position: absolute; left: 16px; top: 533px; width: 370px; height: 277px; overflow: hidden; border: 1px solid var(--white); border-radius: 8px; background: var(--ink); color: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.fund-holdings-tabs { --holdings-pill-x: 0px; --holdings-pill-width: 83px; position: absolute; z-index: 4; left: 11px; top: 11px; width: 273px; height: 24px; display: flex; align-items: center; gap: 12px; }
.fund-holdings-tabs button { position: relative; z-index: 2; flex: 0 0 83px; width: 83px; height: 24px; padding: 2px 12px; border: 1px solid transparent; border-radius: 100px; outline: 0; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; background: transparent; color: var(--white); font: 500 13px/18px "PingFang Local", sans-serif; white-space: nowrap; cursor: pointer; transition: border-color 120ms linear, color 120ms linear; }
.fund-holdings-tabs button[aria-selected="true"] { border-color: transparent; background: transparent; color: var(--ink); }
.holdings-tab-slider { display: block; position: absolute; z-index: 1; left: 0; top: 0; width: var(--holdings-pill-width); height: 24px; border: 1px solid transparent; border-radius: 100px; background: var(--white); transform: translateX(var(--holdings-pill-x)); transition: transform 280ms cubic-bezier(.22,1,.36,1), width 280ms cubic-bezier(.22,1,.36,1); }
.holdings-chart-stage { position: absolute; left: 11px; top: 55px; width: 346px; height: 59px; overflow: visible; }
.holdings-static-frame { position: absolute; z-index: 1; left: -.5px; top: -.5px; width: 347px; height: 59px; max-width: none; pointer-events: none; }
.holdings-foreground-frame-lines { position: absolute; z-index: 4; left: -.5px; top: -.5px; display: block; width: 347px; height: 59px; overflow: visible; pointer-events: none; }
.holdings-block-shadow { position: absolute; z-index: 2; top: 59px; height: 14px; background: #666; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 14px 100%); opacity: 1; pointer-events: none; transition: left 760ms cubic-bezier(.4,0,.2,1), width 760ms cubic-bezier(.4,0,.2,1), opacity 260ms linear; }
.holdings-sliding-blocks { position: absolute; z-index: 3; inset: 0; }
.holding-segment { position: absolute; z-index: 1; left: calc(14px + var(--segment-x)); top: 14px; width: var(--segment-width); height: 45px; opacity: 1; cursor: pointer; transition: left 760ms cubic-bezier(.4,0,.2,1), width 760ms cubic-bezier(.4,0,.2,1), opacity 260ms linear; will-change: left, width; }
.holding-segment[aria-pressed="true"] { z-index: 2; }
.holding-segment::after { content: ""; position: absolute; z-index: 3; inset: 0; box-sizing: border-box; border: 1px solid var(--ink); border-right: 0; border-left: 0; border-radius: 1px; background: var(--segment-color); pointer-events: none; }
.holding-segment b { position: absolute; z-index: 2; left: -14px; top: -14px; width: calc(100% + 14px); height: 15px; background: var(--segment-color); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 14px 100%); filter: drop-shadow(0 -1px 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)); pointer-events: none; }
.holding-segment i { position: absolute; z-index: 4; left: -14px; top: -14px; width: 15px; height: 59px; background: color-mix(in srgb, var(--segment-color) 72%, #000); clip-path: polygon(0 0, 100% 24%, 100% 100%, 0 75%); filter: drop-shadow(0 -1px 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(1px 0 0 var(--ink)); opacity: 0; pointer-events: none; transition: opacity 160ms linear; }
.holding-segment.is-left-exposed i { opacity: 1; }
.holding-segment.is-wireframe::after { border-color: var(--white); background: transparent; }
.holding-segment.is-wireframe b { background: var(--white); filter: none; }
.holding-segment.is-wireframe b::after { content: ""; position: absolute; inset: 1px; background: var(--ink); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 100%, 13px 100%); }
.holding-segment.is-wireframe i { background: var(--white); filter: none; }
.holding-segment.is-wireframe i::after { content: ""; position: absolute; inset: 1px; background: var(--ink); clip-path: polygon(0 0, 100% 24%, 100% 100%, 0 75%); }
.holding-segment:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.holdings-details { position: absolute; left: 25px; top: 141px; width: 320px; display: grid; grid-template-columns: 135px 135px; grid-auto-rows: 33px; column-gap: 24px; row-gap: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 140ms linear, transform 300ms cubic-bezier(.22,1,.36,1); }
.holdings-details[data-holding-panel="stock"], .holdings-details[data-holding-panel="bond"] { top: 141px; }
.holdings-details.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.holdings-details p { position: relative; height: 33px; padding-left: 24px; cursor: pointer; transition: opacity 180ms linear, transform 260ms cubic-bezier(.16,1,.3,1); }
.holdings-details.is-active p { animation: holdings-item-enter 380ms cubic-bezier(.16,1,.3,1) both; }
.holdings-details.is-active p:nth-child(2) { animation-delay: 35ms; }
.holdings-details.is-active p:nth-child(3) { animation-delay: 70ms; }
.holdings-details.is-active p:nth-child(4) { animation-delay: 105ms; }
.holdings-details.is-active p:nth-child(5) { animation-delay: 140ms; }
.holdings-details.has-focus p { opacity: 1; transform: none; }
.holdings-details.has-focus p:not(.is-focused)::before { box-sizing: border-box; border: 1px solid var(--holding-color); background: transparent; }
.holdings-details p.is-focused { opacity: 1; transform: none; }
.holdings-details p::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--holding-color); }
.holdings-details b, .holdings-details span { display: block; color: var(--white); white-space: nowrap; }
.holdings-details b { font: 500 13px/18px "PingFang Local", sans-serif; }
.holdings-details span { font-size: 10px; line-height: 15px; font-weight: 700; }
@keyframes holdings-item-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.fund-rules-card { position: absolute; left: 16px; top: 850px; width: 370px; height: 180px; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.rules-timeline { position: absolute; left: 23px; top: 23px; width: 322px; height: 25px; }
.rules-timeline::before { content: ""; position: absolute; left: 12px; top: 12px; width: 298px; border-top: 2px dashed var(--ink); }
.rules-timeline img { position: absolute; z-index: 2; top: 0; width: 24px; height: 24px; }
.rules-timeline img:nth-child(1) { left: 0; }.rules-timeline img:nth-child(2) { left: 149px; }.rules-timeline img:nth-child(3) { left: 298px; }
.rules-steps { position: absolute; left: 23px; top: 51px; width: 322px; display: grid; grid-template-columns: repeat(3, 1fr); }
.rules-steps div:nth-child(2) { text-align: center; }.rules-steps div:nth-child(3) { text-align: right; }
.rules-steps b, .rules-steps span { display: block; }
.rules-steps b { font: 500 17px/24px "PingFang Local", sans-serif; }
.rules-steps span { color: #666; font: 400 13px/18px "PingFang Local", sans-serif; }
.rules-notes { position: absolute; left: 23px; top: 109px; display: grid; grid-template-columns: 160px 160px; gap: 13px; }
.rules-notes article { width: 160px; height: 58px; padding: 7px; border-radius: 6px; background: var(--paper); }
.rules-notes b, .rules-notes span { display: block; }
.rules-notes b { overflow: hidden; font: 500 17px/24px "PingFang Local", sans-serif; white-space: nowrap; }
.rules-notes span { color: #666; font: 400 13px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.fund-chat-card { position: absolute; left: 16px; top: 1070px; width: 370px; height: 152px; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.fund-chat-viewport { position: absolute; left: 11px; top: 11px; width: 346px; height: 140px; overflow: hidden; }
.fund-chat-track { position: absolute; inset: 0 auto auto 0; width: 346px; animation: fund-chat-cycle 6s linear infinite; will-change: transform; }
.fund-chat-slide { position: relative; width: 346px; height: 140px; }
.fund-chat-card article { position: absolute; left: 0; width: 346px; height: 52px; }
.fund-chat-slide article:first-child { top: 0; }
.fund-chat-slide article:last-child { top: 76px; }
.fund-chat-slide article:first-child::after { content: ""; position: absolute; left: 5px; top: 64px; width: 341px; border-top: 1px solid #777; }
.fund-chat-card article > div { display: flex; align-items: center; gap: 4px; height: 20px; }
.fund-chat-card img { width: 20px; height: 20px; object-fit: cover; border: .5px solid var(--ink); border-radius: 2px; }
.fund-chat-card span { color: var(--ink); font: 400 13px/18px "PingFang Local", sans-serif; }
.fund-chat-card p { margin-top: 8px; font: 500 17px/24px "PingFang Local", sans-serif; }
@keyframes fund-chat-cycle {
  0%, 40% { transform: translateY(0); }
  50%, 90% { transform: translateY(-140px); }
  100% { transform: translateY(-280px); }
}
.fund-detail-footer { position: absolute; z-index: 8; left: 0; bottom: 0; width: 402px; height: 150px; pointer-events: none; background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 0%, rgb(0 0 0 / 50%) 75%); }
.fund-detail-footer button { position: absolute; bottom: 34px; width: 177px; height: 50px; padding: 0; border: 2px solid var(--ink); border-radius: 53px; font: 500 22px/26px "PingFang Local", sans-serif; letter-spacing: 4.4px; pointer-events: auto; cursor: pointer; transition: transform 80ms ease, box-shadow 80ms ease; }
.fund-detail-footer button:active { transform: translate(1px,1px); box-shadow: none; }
.fund-detail-invest { left: 16px; background: var(--white); color: var(--ink); }
.fund-detail-buy { left: 209px; background: var(--blue); color: var(--white); }
.fund-detail-home-indicator { position: absolute; z-index: 15; left: 129px; bottom: 8px; width: 144px; height: 5px; border-radius: 100px; background: #000; }
.uno-followed-fund[role="button"] { cursor: pointer; }
.uno-followed-fund[role="button"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

.uno-island-trigger { position: absolute; z-index: 95; left: 109px; top: 13.67px; width: 207px; height: 37px; padding: 0; border: 0; border-radius: 24px; background: transparent; cursor: pointer; touch-action: none; }
.phone.uno-assistant-active .uno-island-trigger { pointer-events: none; }
.phone.uno-assistant-active .live-status-time { z-index: 93; }
.uno-island-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.phone.uno-assistant-active .uno-island-trigger:focus-visible { outline-color: transparent; }
.uno-assistant-overlay { position: absolute; z-index: 94; inset: 0; width: 402px; height: 874px; visibility: visible; pointer-events: none; }
.uno-assistant-overlay[data-state="hidden"] { visibility: hidden; }
.uno-assistant-eraser { position: absolute; z-index: 0; left: 107px; top: 12px; width: 211px; height: 41px; border-radius: 26px; background: var(--tab-header-bg); opacity: 0; transition: opacity 100ms ease; }
.uno-assistant-overlay:not([data-state="hidden"]) .uno-assistant-eraser { opacity: 0; }
.uno-assistant-scan-glow { position: absolute; z-index: 0; left: 111px; top: 25px; width: 180px; height: 88px; border-radius: 50%; background: radial-gradient(circle at 31% 42%, rgb(96 70 255 / 43%), transparent 48%), radial-gradient(circle at 72% 43%, rgb(255 115 66 / 33%), transparent 52%); filter: blur(11px); opacity: 0; transform: scale(.76, .55); transform-origin: 50% 10%; pointer-events: none; }
.uno-assistant-overlay[data-state="hover"] .uno-assistant-scan-glow { animation: uno-scan-glow 3800ms cubic-bezier(.22,1,.36,1) both; }
.uno-assistant-shell { position: absolute; z-index: 1; left: 109px; top: 13.67px; width: 207px; height: 37px; overflow: hidden; border-radius: 24px; background: #000; color: #f8f8f8; pointer-events: auto; transform: translateZ(0); transition: left 560ms cubic-bezier(.22,1,.36,1), top 560ms cubic-bezier(.22,1,.36,1), width 560ms cubic-bezier(.22,1,.36,1), height 560ms cubic-bezier(.22,1,.36,1), border-radius 560ms cubic-bezier(.22,1,.36,1), box-shadow 420ms ease; }
.uno-assistant-overlay[data-state="hover"] .uno-assistant-shell { left: 131.5px; width: 139px; height: 77px; border-radius: 24px; box-shadow: 0 8px 22px rgb(83 69 255 / 22%); }
.uno-assistant-overlay[data-state="small"] .uno-assistant-shell { left: 15.5px; width: 371px; height: 300px; border-radius: 48px; box-shadow: none; }
.uno-assistant-overlay[data-state="long"] .uno-assistant-shell { left: 15.5px; width: 371px; height: 512px; border-radius: 48px; box-shadow: none; }
.uno-assistant-overlay.is-dragging .uno-assistant-shell { transition: none; }
.uno-assistant-collapsed { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; opacity: 0; transition: opacity 100ms ease; }
.uno-assistant-collapsed img { width: 20px; height: 20px; filter: brightness(0) invert(1); transform: scaleX(-1); }
.uno-assistant-collapsed span { margin-left: auto; font: 500 15px/22px "PingFang Local", sans-serif; }
.uno-assistant-overlay[data-state="collapsed"] .uno-assistant-collapsed { opacity: 1; }
.uno-assistant-hover { position: absolute; inset: 0; opacity: 0; transition: opacity 90ms linear; }
.uno-assistant-hover-label { position: absolute; left: 40px; top: 38px; color: #f8f8f8; font: 500 15px/22px "PingFang Local", sans-serif; white-space: nowrap; }
.uno-assistant-hover-scan { position: absolute; z-index: 2; left: 28px; top: 35px; width: 34px; height: 28px; border-radius: 50%; background: #000; filter: blur(7px); opacity: 0; pointer-events: none; }
.uno-assistant-eye-stage { position: absolute; left: 62px; top: 59px; width: 16px; height: 16px; }
.uno-assistant-eye-stage img { position: absolute; inset: 0; display: block; width: 16px; height: 16px; }
.uno-eye-left,
.uno-eye-right { opacity: 0; }
.uno-assistant-overlay[data-state="hover"] .uno-assistant-hover { opacity: 1; }
.uno-assistant-overlay[data-state="hover"] .uno-assistant-hover-label { animation: uno-observing-text 3800ms linear both; }
.uno-assistant-overlay[data-state="hover"] .uno-assistant-hover-scan { animation: uno-observing-scan 3800ms linear both; }
.uno-assistant-overlay[data-state="hover"] .uno-assistant-eye-stage { animation: uno-eye-travel 3200ms cubic-bezier(.45,0,.2,1) both; }
.uno-assistant-overlay[data-state="hover"] .uno-eye-center { animation: uno-eye-center-frame 3200ms linear both; }
.uno-assistant-overlay[data-state="hover"] .uno-eye-left { animation: uno-eye-left-frame 3200ms linear both; }
.uno-assistant-overlay[data-state="hover"] .uno-eye-right { animation: uno-eye-right-frame 3200ms linear both; }

@keyframes uno-scan-glow {
  0% { opacity: 0; transform: scale(.76, .55); }
  8% { opacity: .75; transform: scale(.92, .8); }
  20% { opacity: .92; transform: scale(1, 1); }
  72% { opacity: .76; transform: scale(1.04, .96); }
  92% { opacity: .62; transform: scale(.98, .9); }
  100% { opacity: 0; transform: scale(1.15, 1.08); }
}
@keyframes uno-eye-travel {
  0% { transform: translate(0, 10px); }
  10% { transform: translate(0, 0); }
  18%, 31% { transform: translate(-44px, 0); }
  42%, 57% { transform: translate(39px, 0); }
  68%, 100% { transform: translate(0, 0); }
}
@keyframes uno-eye-center-frame {
  0%, 12% { opacity: 1; }
  17%, 61% { opacity: 0; }
  68%, 100% { opacity: 1; }
}
@keyframes uno-eye-left-frame {
  0%, 12% { opacity: 0; }
  18%, 32% { opacity: 1; }
  38%, 100% { opacity: 0; }
}
@keyframes uno-eye-right-frame {
  0%, 34% { opacity: 0; }
  42%, 58% { opacity: 1; }
  65%, 100% { opacity: 0; }
}
@keyframes uno-observing-text {
  0%, 8% { opacity: 0; filter: blur(8px); transform: translateX(-5px); }
  14%, 25% { opacity: 1; filter: blur(0); transform: translateX(0); }
  29% { opacity: .58; filter: blur(2.5px); }
  33%, 47% { opacity: 1; filter: blur(0); }
  51% { opacity: .58; filter: blur(2.5px); }
  55%, 69% { opacity: 1; filter: blur(0); }
  73% { opacity: .58; filter: blur(2.5px); }
  77%, 92% { opacity: 1; filter: blur(0); transform: translateX(0); }
  100% { opacity: 0; filter: blur(8px); transform: translateX(5px); }
}
@keyframes uno-observing-scan {
  0%, 14% { opacity: 0; transform: translateX(0) scaleX(.72); }
  20% { opacity: .9; transform: translateX(28px) scaleX(1.15); }
  27% { opacity: 0; transform: translateX(74px) scaleX(.72); }
  36% { opacity: 0; transform: translateX(0) scaleX(.72); }
  42% { opacity: .9; transform: translateX(28px) scaleX(1.15); }
  49% { opacity: 0; transform: translateX(74px) scaleX(.72); }
  58% { opacity: 0; transform: translateX(0) scaleX(.72); }
  64% { opacity: .9; transform: translateX(28px) scaleX(1.15); }
  71% { opacity: 0; transform: translateX(74px) scaleX(.72); }
  100% { opacity: 0; transform: translateX(74px) scaleX(.72); }
}
.uno-assistant-main { position: absolute; inset: 0; opacity: 0; transform: translateY(-8px); transition: opacity 180ms ease, transform 360ms cubic-bezier(.22,1,.36,1); }
.uno-assistant-overlay[data-state="small"] .uno-assistant-main,
.uno-assistant-overlay[data-state="long"] .uno-assistant-main { opacity: 1; transform: translateY(0); transition-delay: 210ms; }
.uno-assistant-overlay.is-preparing-collapse .uno-assistant-main,
.uno-assistant-overlay.is-dismissing .uno-assistant-main { opacity: 0 !important; filter: blur(5px); transition: opacity 110ms linear, filter 120ms ease !important; transition-delay: 0ms !important; }
.uno-assistant-conversation { position: absolute; left: 20px; right: 14px; top: 41px; bottom: 72px; overflow-x: hidden; overflow-y: auto; padding: 0 10px 10px 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #f8f8f8 transparent; }
.uno-assistant-conversation::-webkit-scrollbar { width: 4px; }
.uno-assistant-conversation::-webkit-scrollbar-track { background: transparent; }
.uno-assistant-conversation::-webkit-scrollbar-thumb { border-radius: 4px; background: #f8f8f8; }
.uno-assistant-intro { display: flex; align-items: flex-start; min-height: 28px; gap: 8px; }
.uno-assistant-mark { position: relative; top: 6px; flex: 0 0 28px; display: block; width: 28px; height: 28px; transform: scaleX(-1); }
.uno-assistant-status { margin: 0; color: #f8f8f8; font: 300 13px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.uno-assistant-conversation-body { margin-left: 36px; }
.uno-assistant-conversation-body > h2 { margin: -10px 0 0; color: #f8f8f8; font: 500 15px/22px "PingFang Local", sans-serif; }
.uno-assistant-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 7px; }
.uno-assistant-suggestions button,
.uno-assistant-question { position: relative; box-sizing: border-box; width: max-content; max-width: 100%; height: 32px; padding: 4px; border: 0; border-radius: 0; background: transparent; color: #f8f8f8; box-shadow: none; font: 500 15px/22px "PingFang Local", sans-serif; white-space: nowrap; }
.uno-assistant-suggestions button { position: relative; width: max-content; overflow: visible; cursor: pointer; transform-origin: left center; }
.uno-assistant-bubble-svg { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.uno-assistant-bubble-shadow { fill: #f8f8f8; transform: translate(1px, 1px); }
.uno-assistant-bubble-face { fill: #383838; stroke: #383838; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.uno-assistant-suggestions button > span,
.uno-assistant-question > span,
.uno-assistant-message-text > span { position: relative; z-index: 1; }
.uno-assistant-suggestions button:nth-child(1) { --prompt-delay: 150ms; }
.uno-assistant-suggestions button:nth-child(2) { --prompt-delay: 310ms; }
.uno-assistant-suggestions button:nth-child(3) { --prompt-delay: 470ms; }
.uno-assistant-suggestions button span { display: block; }
.uno-assistant-suggestions button.is-generating { width: 148px; opacity: .62; cursor: wait; animation: uno-suggestion-loading 1.25s ease-in-out infinite !important; }
@keyframes uno-suggestion-loading { 0%, 100% { opacity: .38; } 50% { opacity: .76; } }
.uno-assistant-overlay[data-content="prompts"]:is([data-state="small"], [data-state="long"]) .uno-assistant-suggestions button { animation: uno-prompt-shell 560ms cubic-bezier(.22,1,.36,1) var(--prompt-delay) both; }
.uno-assistant-overlay[data-content="prompts"]:is([data-state="small"], [data-state="long"]) .uno-assistant-suggestions button span { animation: uno-prompt-text 720ms linear calc(var(--prompt-delay) + 150ms) both; }
.uno-assistant-history { display: flex; flex-direction: column; gap: 18px; margin-top: 40px; }
.uno-assistant-turn { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.uno-assistant-question { align-self: flex-end; margin: 0; animation: uno-question-reveal 520ms cubic-bezier(.22,1,.36,1) both; transform-origin: left center; }
.uno-assistant-answer { width: 259px; max-width: 259px; color: #f8f8f8; font: 500 15px/22px "PingFang Local", sans-serif; text-align: justify; }
.uno-assistant-answer p { margin: 0; }
.uno-assistant-answer-line { position: relative; display: block; width: max-content; max-width: 100%; overflow: hidden; white-space: nowrap; --reply-delay: 330ms; }
.uno-assistant-answer-line::after { content: ""; position: absolute; z-index: 2; inset: -4px auto -4px -18px; width: 34px; border-radius: 50%; background: #000; filter: blur(7px); opacity: 0; pointer-events: none; }
.uno-assistant-answer-line { animation: uno-reply-line 620ms linear var(--reply-delay) both; }
.uno-assistant-answer-line::after { animation: uno-reply-line-scan 620ms linear var(--reply-delay) both; }
.uno-assistant-thinking { display: inline-flex; align-items: baseline; color: #f8f8f8; }
.uno-assistant-thinking-letter { display: inline-block; transform-origin: 50% 100%; animation: uno-thinking-letter 1.55s ease-in-out infinite; animation-delay: calc(var(--thinking-index) * 55ms); }
.uno-assistant-thinking-dots { display: inline-flex; width: 14px; margin-left: 1px; }
.uno-assistant-thinking-dots i { display: inline-block; width: 4px; font-style: normal; opacity: .18; transform: translateY(1px); animation: uno-thinking-dot 1.2s ease-in-out infinite; animation-delay: calc(var(--dot-index) * 180ms); }
.uno-assistant-input-wrap input:disabled { opacity: .55; }
.uno-assistant-suggestions button:disabled { cursor: wait; }
@keyframes uno-thinking-letter {
  0%, 18%, 74%, 100% { opacity: .38; filter: blur(.45px); transform: translateY(0); }
  38%, 54% { opacity: 1; filter: blur(0); transform: translateY(-1px); }
}
@keyframes uno-thinking-dot {
  0%, 22%, 78%, 100% { opacity: .18; transform: translateY(1px); }
  42%, 58% { opacity: 1; transform: translateY(-2px); }
}
.uno-assistant-message { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.uno-assistant-message-media { width: 100%; display: flex; justify-content: flex-end; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.uno-assistant-message-media::-webkit-scrollbar { display: none; }
.uno-assistant-message-media button { flex: 0 0 120px; width: 120px; height: 120px; padding: 0; overflow: hidden; border: 0; background: #d9d9d9; cursor: zoom-in; animation: uno-message-image-in 300ms cubic-bezier(.22,1,.36,1) both; }
.uno-assistant-message-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uno-assistant-message-text { position: relative; max-width: 100%; min-height: 32px; margin: 0; padding: 4px; border: 0; border-radius: 0; background: transparent; color: #f8f8f8; box-shadow: none; font: 500 15px/22px "PingFang Local", sans-serif; text-align: right; animation: uno-question-reveal 420ms cubic-bezier(.22,1,.36,1) 120ms both; }
.uno-assistant-message-text[hidden] { display: none; }
@keyframes uno-message-image-in { from { opacity: 0; filter: blur(5px); transform: scale(.94); } to { opacity: 1; filter: blur(0); transform: scale(1); } }

@keyframes uno-prompt-shell {
  0% { clip-path: inset(0 100% 0 0 round 6px); transform: translateX(-5px); }
  99% { clip-path: inset(0 0 0 0 round 6px); transform: translateX(0); }
  100% { clip-path: none; transform: translateX(0); }
}
@keyframes uno-prompt-text {
  0% { opacity: 0; filter: blur(9px); transform: translateX(-9px); }
  42% { opacity: .35; filter: blur(6px); }
  74% { opacity: 1; filter: blur(1.5px); }
  100% { opacity: 1; filter: blur(0); transform: translateX(0); }
}
@keyframes uno-question-reveal {
  0% { clip-path: inset(0 100% 0 0 round 6px); opacity: 0; transform: translateX(-6px); }
  99% { clip-path: inset(0 0 0 0 round 6px); opacity: 1; transform: translateX(0); }
  100% { clip-path: none; opacity: 1; transform: translateX(0); }
}
@keyframes uno-reply-line {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; filter: blur(9px); }
  20% { opacity: .42; }
  62% { filter: blur(2px); }
  100% { clip-path: inset(0 0 0 0); opacity: 1; filter: blur(0); }
}
@keyframes uno-reply-line-scan {
  0%, 5% { opacity: 0; transform: translateX(0) scaleX(.7); }
  18% { opacity: .95; }
  82% { opacity: .78; }
  100% { opacity: 0; transform: translateX(290px) scaleX(1.25); }
}
.uno-assistant-toolbar { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.uno-assistant-wave { position: absolute; left: 20px; bottom: 30px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.uno-assistant-wave img { display: block; width: 24px; height: 24px; }
.uno-assistant-wave::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgb(248 248 248 / 55%); border-radius: 50%; opacity: 0; transform: scale(.7); pointer-events: none; }
.uno-assistant-wave.is-listening img { animation: uno-voice-wave 720ms ease-in-out infinite alternate; }
.uno-assistant-wave.is-listening::after { animation: uno-voice-ring 1.15s ease-out infinite; }
.uno-assistant-wave:disabled { opacity: .45; cursor: wait; }
@keyframes uno-voice-wave { from { opacity: .5; transform: scaleY(.72); } to { opacity: 1; transform: scaleY(1.14); } }
@keyframes uno-voice-ring { 0% { opacity: .7; transform: scale(.7); } 75%, 100% { opacity: 0; transform: scale(1.35); } }
.uno-assistant-input-wrap { position: absolute; left: 56px; bottom: 25px; width: 228px; height: 35px; display: flex; align-items: center; gap: 4px; padding: 6px 7px 5px; overflow: hidden; }
.uno-assistant-input-wrap,
.uno-assistant-wave,
.uno-assistant-scan,
.uno-assistant-add,
.uno-assistant-handle { pointer-events: auto; }
.uno-assistant-input-wrap > img { position: absolute; inset: 0; display: block; width: 228px; height: 35px; }
.uno-assistant-input-wrap input { position: relative; z-index: 1; flex: 1 1 36px; min-width: 36px; height: 22px; padding: 0; border: 0; outline: 0; background: transparent; color: #f8f8f8; caret-color: #f8f8f8; font: 400 15px/22px "PingFang Local", sans-serif; }
.uno-assistant-attachments { position: relative; z-index: 2; flex: 0 1 auto; max-width: 160px; display: none; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.uno-assistant-attachments.has-images { display: flex; }
.uno-assistant-attachments::-webkit-scrollbar { display: none; }
.uno-assistant-attachments button { flex: 0 0 20px; width: 20px; height: 20px; padding: 0; overflow: hidden; border: 0; border-radius: 2px; background: #d9d9d9; cursor: zoom-in; }
.uno-assistant-attachments img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uno-assistant-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.uno-assistant-scan,
.uno-assistant-add { position: absolute; bottom: 30px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.uno-assistant-scan { left: 295px; }
.uno-assistant-add { left: 327px; }
.uno-assistant-scan img { position: absolute; left: 2.25px; top: 2.25px; width: 19.5px; height: 19.5px; }
.uno-assistant-add img { display: block; width: 19.5px; height: 19.5px; margin: 2.25px; }
.uno-assistant-handle { position: absolute; left: 159.5px; bottom: 8px; width: 52px; height: 5px; padding: 0; border: 0; border-radius: 100px; background: #f8f8f8; cursor: ns-resize; touch-action: none; }
.uno-assistant-handle:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.uno-assistant-overlay.is-capture-minimizing .uno-assistant-shell { transition-duration: 180ms; }
.uno-capture-overlay { position: absolute; z-index: 100; inset: 0; display: none; overflow: hidden; background: rgb(0 0 0 / 15%); cursor: crosshair; touch-action: none; }
.uno-capture-overlay.is-active { display: block; }
.uno-capture-overlay > p { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); margin: 0; padding: 5px 10px; border-radius: 14px; background: rgb(0 0 0 / 72%); color: #fff; font: 400 12px/18px "PingFang Local", sans-serif; white-space: nowrap; pointer-events: none; }
.uno-capture-selection { position: absolute; display: none; border: 1px solid #f8f8f8; background: rgb(255 255 255 / 9%); box-shadow: 0 0 0 999px rgb(0 0 0 / 34%); pointer-events: none; }
.uno-capture-selection.is-selecting { display: block; }
.uno-image-viewer { position: absolute; z-index: 110; inset: 0; display: none; align-items: center; justify-content: center; background: #000; }
.uno-image-viewer.is-open { display: flex; }
.uno-image-viewer > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.uno-image-viewer > button { position: absolute; z-index: 2; right: 16px; top: 18px; width: 34px; height: 34px; padding: 0; border: 1px solid rgb(255 255 255 / 65%); border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; font: 300 25px/30px sans-serif; cursor: pointer; }
.bottom-fade { position: absolute; z-index: 25; inset: auto 0 0; height: 150px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 50%) 75%); }
.tabbar { position: absolute; z-index: 30; left: 16px; bottom: 34px; width: 370px; height: 50px; padding: 0; border: 2px solid var(--ink); border-radius: 53px; background: var(--white); overflow: hidden; }
.tab-selection { position: absolute; z-index: 3; left: 2px; top: 2px; width: var(--tab-pill-width, 80px); height: 42px; border-radius: 23px; background: var(--ink); color: var(--white); display: flex; align-items: center; justify-content: center; gap: 2px; transform: translateX(var(--tab-pill-x)); transition: transform 280ms cubic-bezier(.22,1,.36,1), width 280ms cubic-bezier(.22,1,.36,1); pointer-events: none; overflow: hidden; }
.tab-selection img { width: 30px; height: 30px; display: block; }
.tab-selection span { font-size: 10px; line-height: 14px; font-weight: 500; white-space: nowrap; }
.tab-default-icon { position: absolute; z-index: 1; top: 11px; width: 24px; height: 24px; display: block; transition: opacity 140ms ease, transform 220ms cubic-bezier(.22,1,.36,1); pointer-events: none; }
.tab-default-home { left: 34px; }.tab-default-finance { left: 98px; }.tab-default-community { left: 244px; }.tab-default-mine { left: 308px; }
.tab-ask-surface { position: absolute; z-index: 2; left: 154px; top: 2px; width: 58px; height: 42px; border-radius: 23px; background: transparent; display: grid; place-items: center; transition: opacity 140ms ease, transform 280ms cubic-bezier(.22,1,.36,1); pointer-events: none; }
.tab-ask-surface img { width: 42px; height: 42px; display: block; transition: filter 220ms ease; }
.tabbar[data-active-tab="home"] .tab-default-home,
.tabbar[data-active-tab="finance"] .tab-default-finance,
.tabbar[data-active-tab="community"] .tab-default-community,
.tabbar[data-active-tab="mine"] .tab-default-mine { opacity: 0; transform: scale(.8); }
.tabbar[data-active-tab="ask"] .tab-ask-surface { opacity: 0; transform: scale(.82); }
.tabbar[data-active-tab="ask"] .tab-selection img { width: 42px; height: 42px; opacity: 1; transform: scaleX(-1); }
.tab-hit { position: absolute; z-index: 4; top: 0; height: 46px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.tab-hit[data-tab="home"] { left: 0; width: 80px; }.tab-hit[data-tab="finance"] { left: 80px; width: 64px; }.tab-hit[data-tab="ask"] { left: 144px; width: 82px; }.tab-hit[data-tab="community"] { left: 226px; width: 64px; }.tab-hit[data-tab="mine"] { left: 290px; width: 76px; }
.tab-hit:focus-visible { outline: 2px solid var(--blue); outline-offset: -5px; border-radius: 24px; }
.home-indicator { position: absolute; z-index: 31; left: 129px; bottom: 8px; width: 144px; height: 5px; border-radius: 100px; background: #000; }
.toast { position: absolute; z-index: 50; left: 50%; bottom: 96px; transform: translate(-50%,10px); padding: 8px 14px; border-radius: 20px; background: rgb(0 0 0 / 82%); color: white; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; transition: .2s; }.toast.show { opacity: 1; transform: translate(-50%,0); }

/* Interface loading motion: shell first, then crisp masked panels and copy. */
@keyframes interface-header-load {
  0% { opacity: 0; transform: translateY(-7px); clip-path: inset(0 0 38% 0); }
  100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}
@keyframes interface-panel-load {
  0% { opacity: 0; transform: translateY(14px) scale(.985); clip-path: inset(0 0 24% 0 round 8px); }
  58% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0 0 0 0 round 8px); }
}
@keyframes interface-copy-load {
  0% { opacity: 0; transform: translateX(-9px); clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0); }
}
@keyframes interface-footer-load {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.content-canvas.is-interface-entering > section,
.finance-canvas.is-interface-entering > .finance-sectors-stage,
.finance-canvas.is-interface-entering > .steady-funds,
.finance-canvas.is-interface-entering > .finance-multiselect,
.stock-board.is-interface-entering .stock-board-scroller,
.community-canvas.is-interface-entering > img,
.community-canvas.is-interface-entering > .community-topics-module,
.my-canvas.is-interface-entering[data-my-account="fund"] > .my-fund-board,
.my-canvas.is-interface-entering[data-my-account="stock"] > .my-stock-board,
.my-canvas.is-interface-entering[data-my-account="stock"] > .my-holdings-table,
.bank-page.is-interface-entering .bank-content,
.lesson-page.is-interface-entering .lesson-hero,
.lesson-page.is-interface-entering .lesson-note,
.lesson-page.is-interface-entering .lesson-check,
.assessment-page.is-interface-entering .assessment-progress,
.assessment-page.is-interface-entering .assessment-stage,
.assessment-page.is-interface-entering .assessment-result,
.messages-page.is-interface-entering .message-tabs,
.messages-page.is-interface-entering .message-card,
.watchlist-page.is-interface-entering .watchlist-search,
.watchlist-page.is-interface-entering .watchlist-market-tabs,
.watchlist-page.is-interface-entering .watchlist-results article,
.fund-invest-page.is-interface-entering .fund-invest-card,
.community-post-page.is-interface-entering .post-author,
.community-post-page.is-interface-entering .post-title,
.community-post-page.is-interface-entering .post-lead,
.community-post-page.is-interface-entering .post-media,
.community-post-page.is-interface-entering .post-body,
.community-post-page.is-interface-entering .post-tags,
.community-post-page.is-interface-entering .post-time,
.community-post-page.is-interface-entering .post-comments,
.fund-detail-page.is-interface-entering .fund-detail-title,
.fund-detail-page.is-interface-entering .fund-detail-tags,
.fund-detail-page.is-interface-entering .fund-detail-primary-stat,
.fund-detail-page.is-interface-entering .fund-detail-stats,
.fund-detail-page.is-interface-entering .fund-detail-section-title,
.fund-detail-page.is-interface-entering .fund-performance-card,
.fund-detail-page.is-interface-entering .fund-holdings-card,
.fund-detail-page.is-interface-entering .fund-rules-card,
.fund-detail-page.is-interface-entering .fund-chat-card,
.fund-purchase-page.is-interface-entering .purchase-product-title,
.fund-purchase-page.is-interface-entering .purchase-tags,
.fund-purchase-page.is-interface-entering .purchase-calculator,
.fund-purchase-page.is-interface-entering .purchase-details,
.fund-purchase-page.is-interface-entering .purchase-payment,
.fund-purchase-page.is-interface-entering .purchase-summary {
  animation: interface-panel-load 520ms cubic-bezier(.22,1,.36,1) both;
  will-change: transform, opacity, clip-path;
}

.fund-detail-page.is-interface-entering .fund-detail-primary-stat { animation-delay: 70ms; }

.feature-page.is-interface-entering .feature-header,
.fund-detail-page.is-interface-entering .fund-detail-header,
.fund-purchase-page.is-interface-entering .purchase-header,
.bank-page.is-interface-entering .bank-header-board {
  animation: interface-header-load 360ms cubic-bezier(.22,1,.36,1) both;
  will-change: transform, opacity, clip-path;
}

.content-canvas.is-interface-entering > section:nth-child(1),
.finance-canvas.is-interface-entering > .finance-sectors-stage,
.community-canvas.is-interface-entering > img,
.my-canvas.is-interface-entering > .my-board,
.lesson-page.is-interface-entering .lesson-hero,
.assessment-page.is-interface-entering .assessment-progress,
.messages-page.is-interface-entering .message-tabs,
.community-post-page.is-interface-entering .post-author,
.fund-detail-page.is-interface-entering .fund-detail-title,
.fund-detail-page.is-interface-entering .fund-detail-tags,
.fund-purchase-page.is-interface-entering .purchase-product-title,
.fund-purchase-page.is-interface-entering .purchase-tags { animation-delay: 70ms; }

.content-canvas.is-interface-entering > section:nth-child(2),
.finance-canvas.is-interface-entering > .steady-funds,
.community-canvas.is-interface-entering > .community-topics-module,
.my-canvas.is-interface-entering > .my-holdings-table,
.lesson-page.is-interface-entering .lesson-note,
.assessment-page.is-interface-entering .assessment-stage,
.messages-page.is-interface-entering .message-card:nth-child(1),
.community-post-page.is-interface-entering .post-title,
.community-post-page.is-interface-entering .post-lead,
.fund-detail-page.is-interface-entering .fund-detail-stats,
.fund-purchase-page.is-interface-entering .purchase-calculator { animation-delay: 140ms; }

.content-canvas.is-interface-entering > section:nth-child(3),
.finance-canvas.is-interface-entering > .finance-multiselect,
.lesson-page.is-interface-entering .lesson-check,
.messages-page.is-interface-entering .message-card:nth-child(2),
.community-post-page.is-interface-entering .post-media,
.fund-detail-page.is-interface-entering .performance-title,
.fund-detail-page.is-interface-entering .fund-performance-card,
.fund-purchase-page.is-interface-entering .purchase-details { animation-delay: 210ms; }

.content-canvas.is-interface-entering > section:nth-child(4),
.messages-page.is-interface-entering .message-card:nth-child(3),
.community-post-page.is-interface-entering .post-body,
.community-post-page.is-interface-entering .post-tags,
.community-post-page.is-interface-entering .post-time,
.fund-detail-page.is-interface-entering .holdings-title,
.fund-detail-page.is-interface-entering .fund-holdings-card,
.fund-purchase-page.is-interface-entering .purchase-payment { animation-delay: 280ms; }

.content-canvas.is-interface-entering > section:nth-child(5),
.messages-page.is-interface-entering .message-card:nth-child(4),
.community-post-page.is-interface-entering .post-comments,
.fund-detail-page.is-interface-entering .rules-title,
.fund-detail-page.is-interface-entering .fund-rules-card,
.fund-purchase-page.is-interface-entering .purchase-summary { animation-delay: 350ms; }

.fund-detail-page.is-interface-entering .chat-title,
.fund-detail-page.is-interface-entering .fund-chat-card { animation-delay: 420ms; }

.stock-board.is-interface-entering .stock-board-scroller,
.bank-page.is-interface-entering .bank-content { animation-delay: 80ms; }

.community-post-page.is-interface-entering .post-title,
.community-post-page.is-interface-entering .post-lead,
.fund-detail-page.is-interface-entering .fund-detail-title,
.fund-detail-page.is-interface-entering .fund-detail-tags,
.fund-purchase-page.is-interface-entering .purchase-product-title,
.fund-purchase-page.is-interface-entering .purchase-tags {
  animation-name: interface-copy-load;
  animation-duration: 460ms;
}

.content-canvas.is-interface-entering .daily-card > h3,
.content-canvas.is-interface-entering .daily-card > p,
.content-canvas.is-interface-entering .lesson-progress,
.content-canvas.is-interface-entering .lesson-copy,
.content-canvas.is-interface-entering .daily-card > .start,
.content-canvas.is-interface-entering .portfolio-name,
.content-canvas.is-interface-entering .stat-grid,
.content-canvas.is-interface-entering .trade-actions,
.lesson-page.is-interface-entering .lesson-hero > .lesson-kicker,
.lesson-page.is-interface-entering .lesson-hero > h2,
.lesson-page.is-interface-entering .lesson-hero > p,
.lesson-page.is-interface-entering .lesson-compare,
.lesson-page.is-interface-entering .lesson-note > h3,
.lesson-page.is-interface-entering .lesson-note > p,
.lesson-page.is-interface-entering .lesson-note > div {
  animation: interface-copy-load 440ms cubic-bezier(.22,1,.36,1) both;
}
.content-canvas.is-interface-entering .daily-card > h3,
.content-canvas.is-interface-entering .portfolio-name,
.lesson-page.is-interface-entering .lesson-hero > .lesson-kicker { animation-delay: 220ms; }
.content-canvas.is-interface-entering .daily-card > p,
.content-canvas.is-interface-entering .stat-grid,
.lesson-page.is-interface-entering .lesson-hero > h2,
.lesson-page.is-interface-entering .lesson-note > h3 { animation-delay: 270ms; }
.content-canvas.is-interface-entering .lesson-progress,
.content-canvas.is-interface-entering .trade-actions,
.lesson-page.is-interface-entering .lesson-hero > p,
.lesson-page.is-interface-entering .lesson-note > p { animation-delay: 320ms; }
.content-canvas.is-interface-entering .lesson-copy,
.lesson-page.is-interface-entering .lesson-compare,
.lesson-page.is-interface-entering .lesson-note > div { animation-delay: 370ms; }
.content-canvas.is-interface-entering .daily-card > .start { animation-delay: 420ms; }

/* Home card copy should travel with its parent card. Keeping these no-op,
   delayed animations alive creates separate compositing layers and a visible
   one-frame snap when they are removed. */
.content-canvas.is-interface-entering .daily-card > h3,
.content-canvas.is-interface-entering .daily-card > p,
.content-canvas.is-interface-entering .lesson-progress,
.content-canvas.is-interface-entering .lesson-copy,
.content-canvas.is-interface-entering .daily-card > .start,
.content-canvas.is-interface-entering .portfolio-name,
.content-canvas.is-interface-entering .stat-grid,
.content-canvas.is-interface-entering .trade-actions {
  animation: none;
}

.feature-page.is-interface-entering .feature-footer,
.feature-page.is-interface-entering .post-footer,
.fund-detail-page.is-interface-entering .fund-detail-footer,
.fund-purchase-page.is-interface-entering .purchase-footer {
  animation: interface-footer-load 420ms cubic-bezier(.22,1,.36,1) 300ms both;
  will-change: transform, opacity;
}

/* Card loading follows the reference: staggered top-to-bottom starts with a short overlap. */
@keyframes interface-panel-load {
  0% { opacity: 0; transform: translateY(6px); clip-path: none; }
  100% { opacity: 1; transform: translateY(0); clip-path: none; }
}
@keyframes interface-card-rise {
  0% { opacity: 0; transform: translateY(8px); filter: blur(3px); }
  58% { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes home-products-fade {
  from { opacity: 0; transform: none; filter: none; }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes interface-header-load {
  0%, 100% { opacity: 1; transform: none; clip-path: none; }
}
@keyframes interface-copy-load {
  0%, 100% { opacity: 1; transform: none; clip-path: none; }
}
@keyframes interface-footer-load {
  0%, 100% { opacity: 1; transform: none; clip-path: none; }
}

.feature-page.is-interface-entering .feature-header,
.feature-page.is-interface-entering .feature-footer,
.feature-page.is-interface-entering .post-footer,
.fund-detail-page.is-interface-entering .fund-detail-header,
.fund-detail-page.is-interface-entering .fund-detail-footer,
.fund-purchase-page.is-interface-entering .purchase-header,
.fund-purchase-page.is-interface-entering .purchase-footer,
.bank-page.is-interface-entering .bank-header-board,
.content-canvas.is-interface-entering > section,
.finance-canvas.is-interface-entering > .steady-funds,
.finance-canvas.is-interface-entering > .finance-multiselect,
.bank-page.is-interface-entering .bank-content,
.community-post-page.is-interface-entering .post-author,
.community-post-page.is-interface-entering .post-title,
.community-post-page.is-interface-entering .post-lead,
.community-post-page.is-interface-entering .post-body,
.community-post-page.is-interface-entering .post-tags,
.community-post-page.is-interface-entering .post-time,
.fund-detail-page.is-interface-entering .fund-detail-title,
.fund-detail-page.is-interface-entering .fund-detail-tags,
.fund-detail-page.is-interface-entering .fund-detail-section-title,
.fund-purchase-page.is-interface-entering .purchase-product-title,
.fund-purchase-page.is-interface-entering .purchase-tags {
  animation: none;
}

.content-canvas.is-interface-entering .daily-card,
.content-canvas.is-interface-entering .portfolio-card,
.content-canvas.is-interface-entering .risk > article,
.content-canvas.is-interface-entering .goal > article,
.content-canvas.is-interface-entering > section.products,
.finance-canvas.is-interface-entering > .finance-sectors-stage,
.finance-canvas.is-interface-entering .steady-panel,
.finance-canvas.is-interface-entering .finance-multi-stage,
.stock-board.is-interface-entering .stock-board-scroller,
.community-canvas.is-interface-entering > img,
.community-canvas.is-interface-entering > .community-topics-module,
.my-canvas.is-interface-entering[data-my-account="fund"] > .my-fund-board,
.my-canvas.is-interface-entering[data-my-account="stock"] > .my-stock-board,
.my-canvas.is-interface-entering[data-my-account="stock"] > .my-holdings-table,
.bank-page.is-interface-entering .bank-card,
.bank-page.is-interface-entering .bank-sleeve,
.lesson-page.is-interface-entering .lesson-hero,
.lesson-page.is-interface-entering .lesson-note,
.lesson-page.is-interface-entering .lesson-check,
.assessment-page.is-interface-entering .assessment-progress,
.assessment-page.is-interface-entering .assessment-stage,
.assessment-page.is-interface-entering .assessment-result,
.messages-page.is-interface-entering .message-tabs,
.messages-page.is-interface-entering .message-card,
.watchlist-page.is-interface-entering .watchlist-search,
.watchlist-page.is-interface-entering .watchlist-market-tabs,
.watchlist-page.is-interface-entering .watchlist-results article,
.fund-invest-page.is-interface-entering .fund-invest-card,
.community-post-page.is-interface-entering .post-media,
.community-post-page.is-interface-entering .post-comments,
.fund-detail-page.is-interface-entering .fund-detail-stats,
.fund-detail-page.is-interface-entering .fund-performance-card,
.fund-detail-page.is-interface-entering .fund-holdings-card,
.fund-detail-page.is-interface-entering .fund-rules-card,
.fund-detail-page.is-interface-entering .fund-chat-card,
.fund-purchase-page.is-interface-entering .purchase-calculator,
.fund-purchase-page.is-interface-entering .purchase-details,
.fund-purchase-page.is-interface-entering .purchase-payment,
.fund-purchase-page.is-interface-entering .purchase-summary {
  animation-name: interface-card-rise;
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.4,0,.2,1);
  animation-fill-mode: both;
  will-change: transform, opacity, filter;
}

.content-canvas.is-interface-preparing .daily-card,
.content-canvas.is-interface-preparing .portfolio-card,
.content-canvas.is-interface-preparing .risk > article,
.content-canvas.is-interface-preparing .goal > article,
.content-canvas.is-interface-preparing > section.products {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(3px);
}

.content-canvas.is-interface-preparing > section.products {
  opacity: 0;
  transform: none;
  filter: none;
}

.content-canvas.is-interface-entering > section.products {
  animation-name: home-products-fade;
  animation-duration: 280ms;
  animation-timing-function: ease-out;
  transform: none;
  filter: none;
  will-change: opacity;
}

.content-canvas.is-interface-entering .daily-card,
.finance-canvas.is-interface-entering > .finance-sectors-stage,
.community-canvas.is-interface-entering > img,
.my-canvas.is-interface-entering > .my-board,
.bank-page.is-interface-entering .bank-card-china,
.lesson-page.is-interface-entering .lesson-hero,
.assessment-page.is-interface-entering .assessment-progress,
.messages-page.is-interface-entering .message-tabs,
.community-post-page.is-interface-entering .post-media,
.fund-detail-page.is-interface-entering .fund-detail-stats,
.fund-purchase-page.is-interface-entering .purchase-calculator { animation-delay: 0ms !important; }

.content-canvas.is-interface-entering .portfolio-card,
.finance-canvas.is-interface-entering .steady-panel,
.community-canvas.is-interface-entering > .community-topics-module,
.my-canvas.is-interface-entering > .my-holdings-table,
.bank-page.is-interface-entering .bank-card-cmb,
.lesson-page.is-interface-entering .lesson-note,
.assessment-page.is-interface-entering .assessment-stage,
.messages-page.is-interface-entering .message-card:nth-child(1),
.community-post-page.is-interface-entering .post-comments,
.fund-detail-page.is-interface-entering .fund-performance-card,
.fund-purchase-page.is-interface-entering .purchase-details { animation-delay: 90ms !important; }

.content-canvas.is-interface-entering .risk > article,
.finance-canvas.is-interface-entering .finance-multi-stage,
.bank-page.is-interface-entering .bank-card-bocom,
.lesson-page.is-interface-entering .lesson-check,
.messages-page.is-interface-entering .message-card:nth-child(2),
.fund-detail-page.is-interface-entering .fund-holdings-card,
.fund-purchase-page.is-interface-entering .purchase-payment { animation-delay: 180ms !important; }

.content-canvas.is-interface-entering .goal > article,
.bank-page.is-interface-entering .bank-sleeve,
.messages-page.is-interface-entering .message-card:nth-child(3),
.fund-detail-page.is-interface-entering .fund-rules-card,
.fund-purchase-page.is-interface-entering .purchase-summary { animation-delay: 270ms !important; }

.content-canvas.is-interface-entering .products,
.messages-page.is-interface-entering .message-card:nth-child(4),
.fund-detail-page.is-interface-entering .fund-chat-card { animation-delay: 360ms !important; }

/* The community board already contains the topic artwork beneath the interactive
   topic layer. Animating both layers creates a brief double image on tab entry. */
.community-canvas.is-interface-entering > img,
.community-canvas.is-interface-entering > .community-topics-module {
  animation: none !important;
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

@keyframes community-topic-rise {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.community-canvas.is-interface-entering .topic-note {
  animation: community-topic-rise 260ms cubic-bezier(.4,0,.2,1) both;
  will-change: transform, opacity;
}
.community-canvas.is-interface-entering .topic-note-first { animation-delay: 40ms; }
.community-canvas.is-interface-entering .topic-note-second { animation-delay: 110ms; }
.community-canvas.is-interface-entering .topic-note-third { animation-delay: 180ms; }
.community-canvas.is-interface-entering .topic-note-fourth { animation-delay: 250ms; }

/* Keep the blue folder fixed while its three files settle into place from
   bottom to top. The small overshoot gives the drop a restrained spring. */
@keyframes steady-file-drop-in {
  0% { opacity: 0; transform: translate3d(-2px,calc(var(--fund-collapsed-y) - 8px),0); }
  56% { opacity: 1; transform: translate3d(-2px,calc(var(--fund-collapsed-y) + 2px),0); }
  78% { transform: translate3d(-2px,calc(var(--fund-collapsed-y) - 1px),0); }
  100% { opacity: 1; transform: translate3d(-2px,var(--fund-collapsed-y),0); }
}

.finance-canvas.is-interface-entering .steady-funds[data-expanded="false"] .steady-product {
  animation: steady-file-drop-in 500ms cubic-bezier(.22,.82,.28,1) both;
  will-change: transform, opacity;
}
.finance-canvas.is-interface-entering .steady-funds[data-expanded="false"] .steady-product:nth-child(3) { animation-delay: 260ms; }
.finance-canvas.is-interface-entering .steady-funds[data-expanded="false"] .steady-product:nth-child(2) { animation-delay: 335ms; }
.finance-canvas.is-interface-entering .steady-funds[data-expanded="false"] .steady-product:nth-child(1) { animation-delay: 410ms; }

.steady-funds.is-file-entering[data-expanded="false"] .steady-product {
  animation: steady-file-drop-in 500ms cubic-bezier(.22,.82,.28,1) both;
  will-change: transform, opacity;
}
.steady-funds.is-file-entering[data-expanded="false"] .steady-product:nth-child(3) { animation-delay: 30ms; }
.steady-funds.is-file-entering[data-expanded="false"] .steady-product:nth-child(2) { animation-delay: 105ms; }
.steady-funds.is-file-entering[data-expanded="false"] .steady-product:nth-child(1) { animation-delay: 180ms; }

.community-canvas.is-interface-entering .community-post-card {
  animation: interface-card-rise 280ms cubic-bezier(.4,0,.2,1) both;
  will-change: transform, opacity, filter;
}
.community-canvas.is-interface-entering .community-feed-column:first-child .community-post-card:nth-child(1),
.community-canvas.is-interface-entering .community-feed-column:first-child .community-post-card:nth-child(4) { animation-delay: 0ms; }
.community-canvas.is-interface-entering .community-feed-column:last-child .community-post-card:nth-child(1),
.community-canvas.is-interface-entering .community-feed-column:last-child .community-post-card:nth-child(4) { animation-delay: 90ms; }
.community-canvas.is-interface-entering .community-feed-column:first-child .community-post-card:nth-child(2),
.community-canvas.is-interface-entering .community-feed-column:first-child .community-post-card:nth-child(5) { animation-delay: 180ms; }
.community-canvas.is-interface-entering .community-feed-column:last-child .community-post-card:nth-child(2),
.community-canvas.is-interface-entering .community-feed-column:last-child .community-post-card:nth-child(5) { animation-delay: 270ms; }
.community-canvas.is-interface-entering .community-feed-column:first-child .community-post-card:nth-child(3),
.community-canvas.is-interface-entering .community-feed-column:first-child .community-post-card:nth-child(6) { animation-delay: 360ms; }
.community-canvas.is-interface-entering .community-feed-column:last-child .community-post-card:nth-child(3),
.community-canvas.is-interface-entering .community-feed-column:last-child .community-post-card:nth-child(6) { animation-delay: 450ms; }

@media (max-width: 401px), (max-height: 873px) { .phone { box-shadow: none; transform-origin: top center; } }
@media (prefers-reduced-motion: reduce) {
  .toast, .product, .product h3, .product p, .product > b, .favorite, .favorite small, .product-buy, .tab-selection, .tab-default-icon, .tab-ask-surface, .tab-ask-surface img, .finance-canvas, .finance-multiselect, .finance-multi-stage, .finance-multi-card, .finance-multi-copy, .finance-multi-copy b, .finance-multi-copy small, .finance-multi-art, .finance-multi-results, .steady-panel, .fund-folder > img, .fund-folder small, .steady-product, .fund-tab-shape, .fund-body-shape, .fund-tab-shape path, .fund-body-shape path, .fund-risk, .fund-return, .steady-product > h3, .fund-record, .fund-annual, .fund-new-details, .sector-slider, .stock-sector-slider, .sector-hit, .stock-sector-hit, .market-menu, .my-account-menu, .bank-card, .bank-sleeve, .uno-assistant-shell, .uno-assistant-main, .uno-assistant-hover { transition: none; }
  .finance-multiselect.is-content-visible .finance-multi-result { animation: none !important; opacity: 1; transform: none; }
  .uno-assistant-scan-glow, .uno-assistant-hover-label, .uno-assistant-hover-scan, .uno-assistant-eye-stage, .uno-assistant-eye-stage img, .uno-assistant-suggestions button, .uno-assistant-suggestions button span, .uno-assistant-question, .uno-assistant-answer-line, .uno-assistant-answer-line::after, .uno-assistant-thinking-letter, .uno-assistant-thinking-dots i, .uno-assistant-wave img, .uno-assistant-wave::after, .uno-assistant-message-media button, .uno-assistant-message-text, .uno-view [data-uno-card], .uno-view .uno-static-card, .uno-view .uno-static-card::after, .uno-view .uno-section-copy, .uno-view .uno-card-shell, .uno-view.is-card-entering .uno-market-viewport > h2, .uno-view.is-card-entering .uno-market-item > span, .uno-view.is-card-entering .uno-market-item > strong, .uno-view.is-card-entering .uno-market-item > small, .uno-view.is-card-entering .uno-followed-funds > h2, .uno-view.is-card-entering .fund-card-chevron, .uno-view.is-card-entering .uno-followed-fund h3, .uno-view.is-card-entering .uno-followed-fund p, .uno-view.is-card-entering .uno-followed-fund em, .uno-view.is-card-entering .uno-news-viewport > h2, .uno-view.is-card-entering .uno-news-chevron, .uno-view.is-card-entering .uno-news-card h3, .uno-view.is-card-entering .uno-news-card p, .uno-view.is-card-entering .uno-news-card time { animation: none !important; }
  .purchase-canvas, .purchase-payment, .purchase-bank-card, .purchase-bank-sleeve, .purchase-summary { transition: none !important; }
  .purchase-receipt-dim, .ticket-machine, .ticket-slot, .purchase-ticket { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  .fund-holdings-tabs button, .holdings-tab-slider, .holding-segment, .holding-segment b, .holding-segment::after, .holdings-block-shadow, .holdings-details, .fund-detail-footer button { transition: none !important; animation: none !important; }
  .is-interface-entering, .is-interface-entering * { animation: none !important; }
  .steady-funds.is-file-entering .steady-product { animation: none !important; }
  .uno-canvas, .uno-editorial-card, .uno-copy-cover-tracking-title, .uno-section-copy-tracking, .uno-card-cover, .uno-card-shell, .uno-static-card-holding, .uno-followed-funds, .uno-news-viewport, .uno-inline-editorial-detail, .uno-editorial-toggle img { transition: none !important; }
}

/* Simulated portfolio: one self-contained trading surface. */
.phone.simulation-open .simulation-trade-page { display: block; }
.phone.simulation-open .tabbar,
.phone.simulation-open .bottom-fade,
.phone.simulation-open > .home-indicator { display: none; }

.simulation-trade-page {
  color: var(--ink);
  background: var(--paper);
  isolation: isolate;
}

.simulation-trade-page button,
.simulation-trade-page input { -webkit-tap-highlight-color: transparent; }

.simulation-design-tabs {
  position: absolute;
  z-index: 14;
  left: 16px;
  top: 106px;
  width: 370px;
  height: 45px;
  padding: 0;
  border: 0;
  background: var(--paper);
}
.simulation-design-tabs-art {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 370px;
  height: 45px;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.simulation-design-tabs-art text {
  fill: #666;
  font-family: "Glow Sans SC Extended", sans-serif;
  font-size: 22px;
  font-weight: 300;
  dominant-baseline: text-before-edge;
  white-space: nowrap;
}
.simulation-trade-page[data-simulation-mode="buy"] [data-simulation-tab-label="buy"],
.simulation-trade-page[data-simulation-mode="sell"] [data-simulation-tab-label="sell"],
.simulation-trade-page[data-simulation-mode="records"] [data-simulation-tab-label="records"],
.simulation-trade-page[data-simulation-mode="holdings"] [data-simulation-tab-label="holdings"] {
  fill: var(--ink);
  font-weight: 500;
}

.simulation-design-tab {
  position: absolute;
  z-index: 2;
  top: 0;
  width: 49px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.simulation-design-tab-buy { left: 0; }
.simulation-design-tab-sell { left: 107px; }
.simulation-design-tab-records { left: 214px; }
.simulation-design-tab-holdings { left: 321px; }
.simulation-design-tab:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: -2px;
}

.simulation-header .feature-nav {
  height: 44px;
  border: 0;
}
.simulation-header::after,
.simulation-header .feature-nav::before,
.simulation-header .feature-nav::after { display: none; }
.simulation-design-nav-art {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 402px;
  height: 44px;
  display: block;
  pointer-events: none;
}
.simulation-design-nav-art text {
  fill: var(--ink);
  font-family: "Glow Sans SC Extended", sans-serif;
  font-size: 22px;
  font-weight: 500;
  dominant-baseline: text-before-edge;
  white-space: nowrap;
}
.simulation-design-nav .simulation-back,
.simulation-design-nav .simulation-title-back {
  position: absolute;
  z-index: 2;
  top: 0;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.simulation-design-nav .simulation-back { left: 16px; width: 44px; }
.simulation-design-nav .simulation-title-back { left: 60px; width: 326px; }
.simulation-header .status-icons { left: 326px; top: 26px; width: 48.4012px; height: 13px; display: block; }
.simulation-header .status-icons img,
.simulation-header .status-icons img:first-child { width: 48.4012px; height: 13px; display: block; }

.simulation-scroller {
  position: absolute;
  z-index: 1;
  inset: 151px 0 0;
  width: 402px;
  padding: 12px 16px 42px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: var(--paper);
}

.simulation-scroller::-webkit-scrollbar { display: none; }
.simulation-canvas { min-height: 680px; padding-bottom: 1px; }

.simulation-order-panel,
.simulation-preview-card,
.simulation-records-panel,
.simulation-holdings-panel,
.simulation-empty {
  width: 370px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 1px 1px 0 var(--ink);
}

.simulation-order-panel,
.simulation-records-panel,
.simulation-holdings-panel { display: none; }
.simulation-panel.is-active { display: block; }
.simulation-trade-page[data-simulation-mode="buy"] .simulation-order-panel,
.simulation-trade-page[data-simulation-mode="sell"] .simulation-order-panel,
.simulation-trade-page[data-simulation-mode="records"] .simulation-records-panel,
.simulation-trade-page[data-simulation-mode="holdings"] .simulation-holdings-panel,
.simulation-trade-page[data-active-simulation-view="buy"] .simulation-order-panel,
.simulation-trade-page[data-active-simulation-view="sell"] .simulation-order-panel,
.simulation-trade-page[data-active-simulation-view="records"] .simulation-records-panel,
.simulation-trade-page[data-active-simulation-view="holdings"] .simulation-holdings-panel { display: block; }

.simulation-order-panel { padding: 14px; }
.simulation-security-picker { position: relative; z-index: 12; }
.simulation-security-picker > span,
.simulation-field-label {
  display: block;
  color: var(--ink);
  font: 500 15px/22px "PingFang Local", sans-serif;
}
.simulation-order-fields { margin-top: 13px; }
.simulation-field-label { margin: 10px 0 5px; }
.simulation-order-panel > h2,
.simulation-records-panel > h2,
.simulation-holdings-panel > h2,
.simulation-preview-card > h2 {
  margin: 0;
  color: var(--ink);
  font: 700 17px/24px "Glow Sans SC Extended", sans-serif;
}

.simulation-order-panel > p,
.simulation-preview-card > p,
.simulation-records-panel > p,
.simulation-holdings-panel > p {
  margin-top: 4px;
  color: var(--ink);
  font-size: 10px;
  line-height: 15px;
  opacity: .65;
}

.simulation-security-options {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.simulation-security-search { position: relative; width: 100%; height: 46px; border: 1px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 1px 1px 0 var(--ink); }
.simulation-security-search:focus-within { box-shadow: 1px 1px 0 var(--ink), inset 0 0 0 1px var(--blue); }
.simulation-security-search input { width: 100%; height: 44px; padding: 0 42px 0 12px; border: 0; outline: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 400 15px/22px "PingFang Local", sans-serif; }
.simulation-security-search input::placeholder { color: #999; }
.simulation-security-search input::-webkit-search-cancel-button { display: none; }
.simulation-security-search-icon { position: absolute; right: 14px; top: 13px; width: 15px; height: 15px; border: 2px solid var(--ink); border-radius: 50%; pointer-events: none; }
.simulation-security-search-icon::after { content: ""; position: absolute; left: 11px; top: 11px; width: 7px; border-top: 2px solid var(--ink); transform: rotate(45deg); transform-origin: left center; }
.simulation-security-results { display: none; position: absolute; z-index: 30; left: 0; top: 52px; width: 100%; overflow: hidden; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.simulation-security-results.is-open { display: block; }
.simulation-security-results button { width: 100%; height: 52px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--ink); background: var(--white); display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }
.simulation-security-results button:last-child { border-bottom: 0; }
.simulation-security-results button:hover,.simulation-security-results button.is-selected { background: var(--yellow); }
.simulation-trade-page[data-simulation-mode="sell"] .simulation-security-results button.is-selected { background: var(--blue); color: var(--white); }
.simulation-security-results button[hidden] { display: none; }
.simulation-security-results strong,.simulation-security-results small { display: block; }
.simulation-security-results strong { font-size: 13px; line-height: 18px; }
.simulation-security-results small { margin-top: 1px; font: 400 10px/15px "Flynn Mono VF", monospace; }
.simulation-security-results em { color: var(--red); font: 400 13px/18px "Flynn Mono VF", monospace; font-style: normal; }
.simulation-trade-page[data-simulation-mode="sell"] .simulation-security-results button.is-selected em { color: var(--white); }
.simulation-security-result-state { min-height: 52px; margin: 0; padding: 0 12px; display: flex; align-items: center; color: #777; font-size: 12px; line-height: 18px; }

.simulation-security-options [data-simulation-security] {
  min-width: 0;
  min-height: 58px;
  padding: 7px 6px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  text-align: left;
  cursor: pointer;
}

.simulation-security-options [data-simulation-symbol] {
  min-width: 0;
  min-height: 58px;
  padding: 7px 6px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  text-align: left;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}

.simulation-security-options [data-simulation-security] strong,
.simulation-security-options [data-simulation-security] small,
.simulation-security-options [data-simulation-symbol] strong,
.simulation-security-options [data-simulation-symbol] small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.simulation-security-options [data-simulation-security] strong { font-size: 13px; line-height: 18px; }
.simulation-security-options [data-simulation-security] small,
.simulation-security-options [data-simulation-symbol] small { margin-top: 3px; font: 400 10px/15px "Flynn Mono VF", monospace; }

.simulation-trade-page[data-simulation-mode="buy"] .simulation-security-options [data-simulation-security].is-active,
.simulation-trade-page[data-simulation-mode="buy"] .simulation-security-options [data-simulation-security][aria-pressed="true"],
.simulation-trade-page[data-simulation-mode="buy"] .simulation-security-options [data-simulation-symbol].is-selected,
.simulation-trade-page[data-active-simulation-view="buy"] .simulation-security-options [data-simulation-symbol].is-selected {
  background: var(--yellow);
  color: var(--ink);
}

.simulation-trade-page[data-simulation-mode="sell"] .simulation-security-options [data-simulation-security].is-active,
.simulation-trade-page[data-simulation-mode="sell"] .simulation-security-options [data-simulation-security][aria-pressed="true"],
.simulation-trade-page[data-simulation-mode="sell"] .simulation-security-options [data-simulation-symbol].is-selected,
.simulation-trade-page[data-active-simulation-view="sell"] .simulation-security-options [data-simulation-symbol].is-selected {
  background: var(--blue);
  color: var(--white);
}

.simulation-quote-strip {
  min-height: 60px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

.simulation-quote-strip > * { min-width: 0; text-align: center; }
.simulation-quote-strip > * + * { border-left: 1px solid var(--ink); }
.simulation-quote-strip small,
.simulation-quote-strip span,
.simulation-quote-strip strong { display: block; white-space: nowrap; }
.simulation-quote-strip small,
.simulation-quote-strip span { font-size: 10px; line-height: 15px; }
.simulation-quote-strip strong { margin-top: 2px; color: var(--red); font: 600 15px/20px "Flynn Mono VF", monospace; }

.simulation-price {
  min-height: 46px;
  margin-top: 12px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
}

.simulation-price > label,
.simulation-price > span { padding-left: 11px; font-size: 13px; line-height: 18px; }
.simulation-price input {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 600 17px/24px "Flynn Mono VF", monospace;
  text-align: right;
}
.simulation-price > small { padding-right: 11px; font-size: 10px; line-height: 15px; }

.simulation-available {
  min-height: 30px;
  padding: 7px 1px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-size: 10px;
  line-height: 15px;
}
.simulation-available strong { color: var(--red); font: 600 13px/18px "Flynn Mono VF", monospace; }

.simulation-quantity-control {
  height: 46px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  overflow: hidden;
}

.simulation-quantity-control button {
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--ink);
  font: 500 22px/26px "Flynn Mono VF", monospace;
  cursor: pointer;
}
.simulation-quantity-control button:first-child { border-right: 1px solid var(--ink); }
.simulation-quantity-control button:last-child { border-left: 1px solid var(--ink); }
.simulation-quantity-control input {
  min-width: 0;
  width: 100%;
  padding: 0 8px;
  border: 0;
  outline: 0;
  background: var(--white);
  color: var(--ink);
  font: 600 17px/24px "Flynn Mono VF", monospace;
  text-align: center;
}

.simulation-stepper {
  height: 46px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  overflow: hidden;
}
.simulation-stepper button {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--white);
  color: var(--ink);
  font-size: 0;
  cursor: pointer;
}
.simulation-stepper button::before,
.simulation-stepper button:last-child::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 3px;
  border-radius: 1px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}
.simulation-stepper button:last-child::after {
  width: 3px;
  height: 14px;
}
.simulation-stepper button:first-child { border-right: 1px solid var(--ink); }
.simulation-stepper button:last-child { border-left: 1px solid var(--ink); }
.simulation-stepper input {
  min-width: 0;
  width: 100%;
  padding: 0 8px;
  border: 0;
  outline: 0;
  background: var(--white);
  color: var(--ink);
  font: 600 17px/24px "Flynn Mono VF", monospace;
  text-align: center;
  appearance: textfield;
}
.simulation-stepper input::-webkit-inner-spin-button,
.simulation-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.simulation-order-hints,
.simulation-available-row {
  min-height: 32px;
  padding: 7px 1px 5px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 15px;
  line-height: 22px;
}
.simulation-order-hints b,
.simulation-available-row b { font: 600 15px/22px "Flynn Mono VF", monospace; }
.simulation-available-row b { font-size: 15px; line-height: 22px; }
.simulation-order-hints span:first-child b { color: var(--red); }
.simulation-order-hints span:last-child b { color: #00ae98; }

.simulation-ratios {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.simulation-quantity-shortcuts {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.simulation-ratios [data-simulation-ratio],
.simulation-record-filter [data-simulation-filter],
.simulation-quantity-shortcuts [data-simulation-ratio] {
  min-width: 0;
  height: 34px;
  padding: 0 5px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
}
.simulation-ratios [data-simulation-ratio].is-active,
.simulation-ratios [data-simulation-ratio][aria-pressed="true"],
.simulation-quantity-shortcuts [data-simulation-ratio].is-active,
.simulation-quantity-shortcuts [data-simulation-ratio][aria-pressed="true"] { background: var(--yellow); }

.simulation-order-summary {
  min-height: 64px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  font-size: 10px;
  line-height: 15px;
}
.simulation-order-summary > * { min-width: 0; display: flex; justify-content: space-between; gap: 6px; }
.simulation-order-summary strong { font: 600 13px/15px "Flynn Mono VF", monospace; white-space: nowrap; }

.simulation-order-total {
  min-height: 54px;
  margin-top: 12px;
  padding: 9px 10px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 15px;
  line-height: 22px;
}
.simulation-order-total strong { color: var(--red); font: 600 17px/24px "Flynn Mono VF", monospace; white-space: nowrap; }

.simulation-submit {
  width: 100%;
  height: 48px;
  margin-top: 12px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  font: 500 17px/24px "Glow Sans SC Extended", sans-serif;
  cursor: pointer;
}
.simulation-trade-page[data-simulation-mode="sell"] .simulation-submit { background: var(--blue); color: var(--white); }
.simulation-submit:disabled { background: var(--paper); color: var(--ink); box-shadow: none; opacity: .55; cursor: default; }

.simulation-preview-card { margin-top: 16px; padding: 13px 14px 6px; }
.simulation-holdings-preview {
  display: none;
  width: 370px;
  margin-top: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.simulation-trade-page[data-simulation-mode="buy"] .simulation-holdings-preview,
.simulation-trade-page[data-simulation-mode="sell"] .simulation-holdings-preview { display: block; }
.simulation-holdings-preview > header {
  min-height: 33px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--ink);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.simulation-holdings-preview > header h2 { margin: 0; font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.simulation-holdings-preview > header span { padding-top: 3px; font-size: 10px; line-height: 15px; opacity: .65; }
.simulation-holdings-preview-heading {
  min-height: 25px;
  margin-top: 10px;
  padding: 0 2px;
  border-top: 0;
  display: grid;
  grid-template-columns: 94px 66px 140px;
  gap: 6px;
  align-items: start;
  color: #666;
  font-size: 10px;
  line-height: 15px;
}
.simulation-holdings-preview-heading span:not(:first-child) { text-align: right; }
.simulation-preview-list,
.simulation-record-list,
.simulation-holdings-list,
.simulation-holdings-preview-list,
.simulation-records-list { margin: 8px 0 0; padding: 0; list-style: none; }

.simulation-preview-list > :is(article, li, div),
.simulation-record-list > :is(article, li, div),
.simulation-holdings-list > :is(article, li, div) {
  position: relative;
  min-height: 68px;
  padding: 10px 2px;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, .8fr));
  align-items: center;
  gap: 8px;
}
.simulation-holdings-preview-list > :is(article, li, div),
.simulation-records-list > :is(article, li, div) {
  position: relative;
  min-height: 62px;
  padding: 9px 2px;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .8fr));
  align-items: center;
  gap: 7px;
}
.simulation-holdings-preview-list > .simulation-holding-row {
  grid-template-columns: 94px 66px 140px;
  gap: 6px;
}
.simulation-holdings-preview-list > .simulation-holding-row > div:not(:first-child) strong,
.simulation-holdings-preview-list > .simulation-holding-row > div:not(:first-child) small,
.simulation-holdings-preview-list > .simulation-holding-row > div:not(:first-child) em {
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
}

.simulation-preview-list strong,
.simulation-record-list strong,
.simulation-holdings-list strong { display: block; font-size: 13px; line-height: 18px; }
.simulation-holdings-preview-list strong,
.simulation-records-list strong { display: block; font-size: 13px; line-height: 18px; }
.simulation-preview-list small,
.simulation-record-list small,
.simulation-holdings-list small { display: block; margin-top: 2px; font: 400 10px/15px "Flynn Mono VF", monospace; }
.simulation-holdings-preview-list small,
.simulation-records-list small { display: block; margin-top: 2px; font: 400 10px/15px "Flynn Mono VF", monospace; }
.simulation-preview-list em,
.simulation-record-list em,
.simulation-holdings-list em { color: var(--red); font: normal 600 13px/18px "Flynn Mono VF", monospace; text-align: right; }
.simulation-holdings-preview-list em,
.simulation-records-list em { color: var(--red); font: normal 600 13px/18px "Flynn Mono VF", monospace; text-align: right; }

.simulation-records-panel,
.simulation-holdings-panel { padding: 14px; }
.simulation-record-filter {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.simulation-record-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.simulation-record-filters [data-simulation-record-filter] {
  min-width: 0;
  height: 30px;
  padding: 0 2px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  font: 500 17px/24px "PingFang Local", "PingFang SC", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}
.simulation-record-filters [data-simulation-record-filter].is-active,
.simulation-record-filters [data-simulation-record-filter][aria-selected="true"] { background: var(--blue); color: var(--white); }
.simulation-record-filter [data-simulation-filter].is-active,
.simulation-record-filter [data-simulation-filter][aria-pressed="true"] { background: var(--blue); color: var(--white); }

.simulation-record-list > :is(article, li, div) { grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, .75fr) 48px; }
.simulation-records-list > :is(article, li, div) { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr) minmax(0, .8fr) minmax(0, 1fr); }
.simulation-trade-page .simulation-records-list > .simulation-record-row { color: var(--ink); }
.simulation-records-list > :is(article, li, div) > div:not(:first-child),
.simulation-holdings-list > :is(article, li, div) > div:not(:first-child),
.simulation-holdings-preview-list > :is(article, li, div) > div:not(:first-child) { text-align: right; }
.simulation-record-list [data-side="buy"] { color: var(--red); }
.simulation-record-list [data-side="sell"] { color: var(--blue); }
.simulation-record-list button {
  width: 46px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  font-size: 13px;
  cursor: pointer;
}
.simulation-records-list button {
  width: 42px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 1px 1px 0 var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.simulation-account-summary {
  min-height: 126px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.simulation-assets-summary {
  min-height: 196px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.simulation-assets-summary > div {
  min-width: 0;
  min-height: 58px;
  padding: 8px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 1px 1px 0 var(--ink);
}
.simulation-assets-summary > div:last-child { grid-column: 1 / -1; }
.simulation-assets-summary span,
.simulation-assets-summary strong { display: block; }
.simulation-assets-summary span { font-size: 13px; line-height: 18px; opacity: .75; }
.simulation-assets-summary strong { margin-top: 5px; overflow: hidden; font: 600 15px/22px "Flynn Mono VF", monospace; text-overflow: ellipsis; white-space: nowrap; }
.simulation-holdings-heading {
  min-height: 25px;
  margin-top: 10px;
  padding: 0 2px;
  border-top: 0;
  display: grid;
  grid-template-columns: 103px 56px 61px 100px;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  line-height: 15px;
}
.simulation-holdings-heading span:not(:first-child) { text-align: right; }
.simulation-holdings-table-title {
  min-height: 33px;
  margin: 16px 0 0;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--ink);
  font: 500 17px/24px "Glow Sans SC Extended", sans-serif;
}
.simulation-account-summary > * {
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
}
.simulation-account-summary small,
.simulation-account-summary strong { display: block; }
.simulation-account-summary small { font-size: 10px; line-height: 15px; opacity: .65; }
.simulation-account-summary strong { margin-top: 4px; font: 600 13px/18px "Flynn Mono VF", monospace; }
.simulation-account-summary .is-loss { color: #00ae98; }
.simulation-account-summary .is-gain { color: var(--red); }

.simulation-holdings-list > :is(article, li, div) { grid-template-columns: minmax(0, 1.15fr) repeat(3, minmax(0, .72fr)); }
.simulation-holdings-list .is-loss { color: #00ae98; }
.simulation-holdings-list .is-gain { color: var(--red); }
.simulation-trade-page .is-up { color: var(--red); }
.simulation-trade-page .is-down { color: #00ae98; }
.simulation-trade-page .is-flat { color: var(--ink); }
.simulation-trade-page .simulation-holding-row { color: var(--ink); }
.simulation-holdings-list > .simulation-holding-row {
  grid-template-columns: 103px 56px 61px 100px;
  gap: 4px;
}
.simulation-holdings-list,
.simulation-holdings-preview-list { margin-top: 8px; }
.simulation-holdings-list > .simulation-holding-row,
.simulation-holdings-preview-list > .simulation-holding-row {
  min-height: 56px;
  padding: 8px 2px;
  border-top: 1px solid var(--ink);
}
.simulation-holdings-list > .simulation-holding-row:first-child,
.simulation-holdings-preview-list > .simulation-holding-row:first-child { border-top: 0; }
.simulation-holdings-list > .simulation-holding-row strong,
.simulation-holdings-list > .simulation-holding-row small,
.simulation-holdings-list > .simulation-holding-row em,
.simulation-holdings-preview-list > .simulation-holding-row strong,
.simulation-holdings-preview-list > .simulation-holding-row small,
.simulation-holdings-preview-list > .simulation-holding-row em {
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}
.simulation-holdings-list > .simulation-holding-row > div:first-child strong,
.simulation-holdings-preview-list > .simulation-holding-row > div:first-child strong { font-family: "Glow Sans SC Extended", sans-serif; font-weight: 500; }
.simulation-holdings-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.simulation-holdings-list > .simulation-holding-row > div:not(:first-child) strong,
.simulation-holdings-list > .simulation-holding-row > div:not(:first-child) small,
.simulation-holdings-list > .simulation-holding-row > div:not(:first-child) em {
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
}
.simulation-trade-page .simulation-holding-row.is-up > div:last-child { color: var(--red); }
.simulation-trade-page .simulation-holding-row.is-down > div:last-child { color: #00ae98; }
.simulation-trade-page .simulation-holding-row.is-flat > div:last-child { color: var(--ink); }

/* “我的持仓”沿用原持仓板的完整四列排版，买入、卖出、持仓三处一致。 */
.simulation-holdings-preview > header,
.simulation-holdings-table-title {
  position: relative;
  width: 358px;
  min-height: 33px;
  margin-left: 12px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--ink);
  overflow: visible;
}
.simulation-holdings-preview > header {
  display: block;
}
.simulation-holdings-preview > header h2,
.simulation-holdings-table-title {
  color: var(--ink);
  font: 500 17px/24px "Glow Sans SC Extended", sans-serif;
  letter-spacing: 0;
}
.simulation-holdings-table-title { margin-top: 16px; margin-right: 0; margin-bottom: 0; }
.simulation-holdings-preview > header img,
.simulation-holdings-table-title img {
  position: absolute;
  z-index: 1;
  top: -14px;
  right: -2px;
  display: block;
  width: 50px;
  height: 50px;
  pointer-events: none;
}
.simulation-holdings-preview-heading,
.simulation-holdings-heading {
  width: 358px;
  min-height: 15px;
  margin: 10px 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: 119px 78px 108px 41px;
  gap: 4px;
  align-items: start;
  overflow: hidden;
  color: var(--ink);
  font: 400 10px/15px "PingFang Local", "PingFang SC", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
}
.simulation-holdings-preview-heading span:not(:first-child),
.simulation-holdings-heading span:not(:first-child) { text-align: left; }
.simulation-holdings-list,
.simulation-holdings-preview-list {
  width: 358px;
  margin: 8px 0 0 12px;
  overflow: hidden;
}
.simulation-holdings-list > .simulation-holding-row,
.simulation-holdings-preview-list > .simulation-holding-row {
  min-height: 0;
  padding: 0 0 8px;
  border-top: 0;
  display: grid;
  grid-template-columns: 119px 78px 108px 41px;
  gap: 4px;
  align-items: start;
}
.simulation-holdings-list > .simulation-holding-row + .simulation-holding-row,
.simulation-holdings-preview-list > .simulation-holding-row + .simulation-holding-row {
  padding-top: 10px;
  border-top: 1px solid var(--ink);
}
.simulation-holdings-list > .simulation-holding-row > div,
.simulation-holdings-preview-list > .simulation-holding-row > div {
  min-width: 0;
  overflow: hidden;
  text-align: left;
}
.simulation-holdings-list > .simulation-holding-row > div:not(:first-child),
.simulation-holdings-preview-list > .simulation-holding-row > div:not(:first-child) { text-align: left; }
.simulation-holdings-list > .simulation-holding-row strong,
.simulation-holdings-list > .simulation-holding-row small,
.simulation-holdings-list > .simulation-holding-row em,
.simulation-holdings-preview-list > .simulation-holding-row strong,
.simulation-holdings-preview-list > .simulation-holding-row small,
.simulation-holdings-preview-list > .simulation-holding-row em {
  display: block;
  margin: 0;
  overflow: visible;
  font: 600 13px/18px "Flynn Mono VF", monospace;
  letter-spacing: 0;
  text-align: left;
  text-overflow: clip;
  white-space: nowrap;
}
.simulation-holdings-list > .simulation-holding-row > div:first-child strong,
.simulation-holdings-preview-list > .simulation-holding-row > div:first-child strong {
  font: 400 13px/18px "PingFang Local", "PingFang SC", sans-serif;
}
.simulation-holdings-list > .simulation-holding-row .is-up,
.simulation-holdings-preview-list > .simulation-holding-row .is-up { color: var(--red); }
.simulation-holdings-list > .simulation-holding-row .is-down,
.simulation-holdings-preview-list > .simulation-holding-row .is-down { color: #00ae98; }
.simulation-holdings-list > .simulation-holding-row .is-flat,
.simulation-holdings-preview-list > .simulation-holding-row .is-flat { color: var(--ink); }

/* 模拟交易直接复用“我的股票账户”的标题切片、固定列与横向拖动表格。 */
.simulation-holdings-original-title {
  width: 374px;
  height: 53px;
  margin-left: 12px;
  background: url("./public/assets/my-stock-board.svg?v=4") -28px -560px / 402px 969px no-repeat;
}
.simulation-holdings-preview { margin-top: 4px; }
.simulation-holdings-panel > .simulation-holdings-original-title { margin-top: 0; }
.simulation-holdings-table-copy {
  position: relative;
  width: 374px;
  height: 190px;
  margin-left: 12px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
}
.simulation-holdings-table-copy::after {
  content: "";
  position: absolute;
  z-index: 8;
  right: 0;
  top: 0;
  width: 42px;
  height: 190px;
  background: linear-gradient(90deg, rgb(246 239 234 / 0%), var(--paper) 82%);
  pointer-events: none;
}
.simulation-holdings-table-copy .holdings-fixed-column,
.simulation-holdings-table-copy .holdings-scroll-window,
.simulation-holdings-table-copy .holdings-moving-table {
  height: 190px;
}
.simulation-holdings-table-copy .holding-fixed-row b {
  font: 500 13px/18px "PingFang Local", sans-serif;
}
.simulation-holdings-table-copy .holding-fixed-row span,
.simulation-holdings-table-copy .moving-row > span,
.simulation-holdings-table-copy .moving-row > strong {
  font: 400 15px/22px "Flynn Mono VF", monospace;
  letter-spacing: 0;
}
.simulation-holdings-table-copy .moving-row > strong.is-up { color: var(--red); }
.simulation-holdings-table-copy .moving-row > strong.is-down { color: #00ae98; }
.simulation-holdings-table-copy .moving-row > strong.is-flat { color: var(--ink); }
.simulation-holdings-empty-row {
  padding-top: 1px;
  color: #777;
  font: 400 13px/18px "PingFang Local", sans-serif;
}

/* 持仓表长数字适配：原“我的持仓”和模拟交易三处共用同一组尺寸。 */
.my-holdings-table,
.simulation-holdings-table-copy {
  --holdings-fixed-width: 150px;
  --holdings-column-gap: 24px;
}
.my-holdings-table::before,
.simulation-holdings-table-copy::before {
  content: "";
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  top: 79px;
  height: 61px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  pointer-events: none;
}
.my-holdings-table .holdings-fixed-column,
.simulation-holdings-table-copy .holdings-fixed-column {
  width: var(--holdings-fixed-width);
}
.my-holdings-table .holdings-scroll-window,
.simulation-holdings-table-copy .holdings-scroll-window {
  left: var(--holdings-fixed-width);
  width: calc(374px - var(--holdings-fixed-width));
}
.my-holdings-table .holdings-moving-table,
.simulation-holdings-table-copy .holdings-moving-table {
  width: max-content;
  min-width: max-content;
  padding-right: 40px;
  display: grid;
  grid-template-columns: repeat(7, max-content);
  grid-template-rows: 26px;
  grid-auto-rows: 60px;
  column-gap: var(--holdings-column-gap);
  align-content: start;
}
.my-holdings-table .moving-heading,
.my-holdings-table .moving-row,
.simulation-holdings-table-copy .moving-heading,
.simulation-holdings-table-copy .moving-row {
  width: auto;
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  column-gap: subgrid;
}
.my-holdings-table .moving-heading > span,
.my-holdings-table .moving-row > span,
.my-holdings-table .moving-row > strong,
.simulation-holdings-table-copy .moving-heading > span,
.simulation-holdings-table-copy .moving-row > span,
.simulation-holdings-table-copy .moving-row > strong {
  padding-left: 0;
}
.my-holdings-table .holding-fixed-row,
.simulation-holdings-table-copy .holding-fixed-row {
  padding-right: 12px;
}
.my-holdings-table .holding-fixed-row:not(:last-child)::after,
.my-holdings-table .moving-row:not(:last-child)::after,
.simulation-holdings-table-copy .holding-fixed-row:not(:last-child)::after,
.simulation-holdings-table-copy .moving-row:not(:last-child)::after {
  display: none;
}
.simulation-record-list .side-buy,
.simulation-records-list .side-buy { color: var(--red); }
.simulation-record-list .side-sell,
.simulation-records-list .side-sell { color: var(--blue); }

.simulation-records-panel { padding: 14px 14px 12px; }
.simulation-records-list { margin: 12px 0 0; }
.simulation-records-list > .simulation-record-row {
  min-height: 0;
  padding: 12px 0 14px;
  border-top: 1px solid var(--ink);
  display: block;
}
.simulation-record-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.simulation-record-identity { min-width: 0; text-align: left; }
.simulation-record-identity > span,
.simulation-record-status > span { display: block; margin-bottom: 5px; color: #666; font-size: 13px; line-height: 18px; font-weight: 400; }
.simulation-record-identity strong { font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.simulation-record-identity small { margin-top: 1px; color: var(--ink); font-size: 13px; line-height: 18px; }
.simulation-record-status { text-align: right; }
.simulation-record-status strong { font: 500 17px/24px "Glow Sans SC Extended", sans-serif; }
.simulation-record-status small { margin: 1px 0 0; color: var(--ink); font: 400 13px/18px "PingFang Local", sans-serif; }
.simulation-record-metrics {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 12px;
}
.simulation-record-metrics > span:not(:first-child) { text-align: left; }
.simulation-record-metrics > span:nth-child(even) { text-align: left; }
.simulation-record-metrics > span { min-width: 0; display: block; text-align: left !important; }
.simulation-record-metrics small { display: block; margin: 0 0 4px; color: #666; font: 400 13px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.simulation-record-metrics strong { display: block; min-width: 0; overflow: visible; color: var(--ink); font: 500 15px/22px "Flynn Mono VF", monospace; text-overflow: clip; white-space: nowrap; }


.simulation-empty {
  min-height: 152px;
  margin-top: 12px;
  padding: 28px 16px;
  display: grid;
  place-items: center;
  text-align: center;
}
.simulation-empty strong { font: 700 17px/24px "Glow Sans SC Extended", sans-serif; }
.simulation-empty p { margin-top: 5px; font-size: 13px; line-height: 18px; opacity: .65; }
.simulation-records-list > .simulation-empty,
.simulation-holdings-list > .simulation-empty,
.simulation-holdings-preview-list > .simulation-empty {
  width: 100%;
  min-height: 140px;
  margin-top: 0;
  padding: 24px 12px;
  border: 0;
  box-shadow: none;
}

.simulation-trade-page button:not(:disabled):active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

.simulation-order-panel,
.simulation-preview-card,
.simulation-records-panel,
.simulation-holdings-panel { animation: simulation-card-in 240ms cubic-bezier(.22,1,.36,1) both; }
.simulation-preview-card { animation-delay: 60ms; }

@keyframes simulation-card-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-grid .green { color: #00ae98; }

@media (prefers-reduced-motion: reduce) {
  .simulation-trade-page *,
  .simulation-trade-page *::before,
  .simulation-trade-page *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* Pages with a top-left back affordance use one consistent iOS-style push. */
.push-page {
  transform: translate3d(calc(100% + 1px), 0, 0);
  visibility: hidden;
  pointer-events: none;
  backface-visibility: hidden;
}

.push-page.is-page-mounted {
  display: block;
  visibility: visible;
  pointer-events: auto;
  transition: transform 400ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.push-page.is-page-visible {
  transform: translate3d(0, 0, 0);
}

.push-page.is-page-entering,
.push-page.is-page-exiting {
  transform: translate3d(calc(100% + 1px), 0, 0);
}

.push-page.is-page-returning {
  transform: translate3d(calc(-100% - 1px), 0, 0);
  transition-duration: 360ms;
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.push-page.is-page-exiting {
  transition-duration: 360ms;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* The route itself supplies the motion; content stays locked to the page. */
.simulation-trade-page.push-page .simulation-order-panel,
.simulation-trade-page.push-page .simulation-preview-card,
.simulation-trade-page.push-page .simulation-records-panel,
.simulation-trade-page.push-page .simulation-holdings-panel {
  animation: none;
}

.fund-detail-page.push-page .holdings-details.is-active p {
  opacity: 1;
  transform: none;
  animation: none;
}

.push-page.is-page-transitioning .fund-chat-track {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .push-page,
  .push-page.is-page-mounted,
  .push-page.is-page-exiting,
  .push-page.is-page-returning {
    transition: none !important;
    will-change: auto;
  }
}

/* Account switching: keep headings and the account board locked in place while
   the cards make the small, paced entrance used elsewhere in the interface. */
@keyframes account-card-enter {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.985);
    filter: blur(2px);
  }
  58% {
    opacity: 1;
    transform: translateY(-1px) scale(1.002);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.my-canvas.is-interface-entering > .my-board,
.my-canvas.is-interface-entering .fund-contribution-heading {
  animation: none !important;
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

.my-canvas.is-interface-entering[data-my-account="fund"] .fund-contribution-card,
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-assets-expanded article,
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-holdings-expanded article,
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-composition-card,
.my-canvas.is-interface-entering[data-my-account="stock"] .my-holdings-table {
  animation: account-card-enter 420ms cubic-bezier(.22,1,.36,1) both;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

.my-canvas.is-interface-entering[data-my-account="fund"] .fund-contribution-card,
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-composition-card {
  animation-delay: 30ms;
}

.my-canvas.is-interface-entering[data-my-account="fund"] .fund-assets-expanded article:nth-child(1) { animation-delay: 130ms; }
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-assets-expanded article:nth-child(2) { animation-delay: 185ms; }
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-assets-expanded article:nth-child(3) { animation-delay: 240ms; }
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-holdings-expanded article:nth-of-type(1) { animation-delay: 300ms; }
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-holdings-expanded article:nth-of-type(2) { animation-delay: 355ms; }
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-holdings-expanded article:nth-of-type(3) { animation-delay: 410ms; }
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-holdings-expanded article:nth-of-type(4) { animation-delay: 465ms; }
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-holdings-expanded article:nth-of-type(5) { animation-delay: 520ms; }
.my-canvas.is-interface-entering[data-my-account="stock"] .my-holdings-table { animation-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
  .my-canvas.is-interface-entering[data-my-account="fund"] .fund-contribution-card,
  .my-canvas.is-interface-entering[data-my-account="fund"] .fund-assets-expanded article,
  .my-canvas.is-interface-entering[data-my-account="fund"] .fund-holdings-expanded article,
  .my-canvas.is-interface-entering[data-my-account="stock"] .stock-composition-card,
  .my-canvas.is-interface-entering[data-my-account="stock"] .my-holdings-table {
    animation: none !important;
  }
}

/* Titles are anchors, not entrance elements. Keep every page/section heading
   still, including the headings that are baked into the large board artwork. */
.is-interface-entering :is(h1, h2),
.is-interface-entering :is(.post-title, .post-lead, .fund-detail-title, .fund-detail-section-title, .purchase-product-title) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  filter: none !important;
  will-change: auto !important;
}

.finance-canvas.is-interface-entering > .finance-sectors-stage,
.stock-board.is-interface-entering .stock-board-scroller {
  animation: none !important;
  opacity: 1;
  transform: none;
  clip-path: none;
  filter: none;
  will-change: auto;
}

/* Artwork-backed cards get a temporary cropped duplicate during entry. The
   stationary paper layer hides the copy baked into the board, so headings do
   not have to move with it. */
.baked-card-motion,
.community-topics-motion-cover,
.stock-holdings-motion-cover {
  display: none;
  position: absolute;
  overflow: hidden;
  background: var(--paper);
  pointer-events: none;
}

.baked-card-motion { z-index: 8; }
.baked-card-motion::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

.fund-total-card-motion { left: 16px; top: 146px; width: 370px; height: 160px; border-radius: 12px; }
.asset-history { position:absolute;left:206px;top:158px;width:174px;height:90px;z-index:9;background:#f8f8f8; }
.my-canvas:not([data-my-account="fund"]) .asset-history { display:none; }
.asset-history svg { display:block;width:168px;height:90px;touch-action:pan-y;cursor:crosshair;outline:none; }
.asset-history-value { position:absolute;top:1px;left:0;width:168px;font:10px/17px "PingFang Local",sans-serif;color:#383838;text-align:right;pointer-events:none;white-space:nowrap; }
.asset-history svg:focus-visible { outline:none; }
.fund-total-card-motion::before { background-image: url("./public/assets/my-fund-board.svg?v=4"); background-position: -16px -146px; background-size: 402px 874px; }

.stock-daily-card-motion { left: 13px; top: 489px; width: 378px; height: 152px; border-radius: 0; }
.stock-daily-card-motion::before { background-image: url("./public/assets/my-stock-board.svg?v=5"); background-position: -13px -283px; background-size: 402px 969px; }
.stock-stat-card-motion { top: 649px; width: 119px; height: 119px; border-radius: 0; }
.stock-stat-card-motion::before { background-image: url("./public/assets/my-stock-board.svg?v=5"); background-size: 402px 969px; }
.stock-stat-card-motion-a { left: 13px; }
.stock-stat-card-motion-a::before { background-position: -13px -443px; }
.stock-stat-card-motion-b { left: 142px; }
.stock-stat-card-motion-b::before { background-position: -142px -443px; }
.stock-stat-card-motion-c { left: 271px; }
.stock-stat-card-motion-c::before { background-position: -271px -443px; }

.my-canvas.is-interface-entering[data-my-account="fund"] .fund-total-card-motion,
.my-canvas.is-interface-entering[data-my-account="stock"] :is(.stock-daily-card-motion, .stock-stat-card-motion) {
  display: block;
}

.my-canvas.is-interface-entering[data-my-account="fund"] .fund-total-card-motion::before,
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-daily-card-motion::before,
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-stat-card-motion::before {
  animation: account-card-enter 420ms cubic-bezier(.22,1,.36,1) both;
}
.my-canvas.is-interface-entering[data-my-account="fund"] .fund-total-card-motion::before { animation-delay: 30ms; }
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-daily-card-motion::before { animation-delay: 120ms; }
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-stat-card-motion-a::before { animation-delay: 210ms; }
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-stat-card-motion-b::before { animation-delay: 265ms; }
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-stat-card-motion-c::before { animation-delay: 320ms; }

.stock-holdings-motion-cover { z-index: 6; left: 16px; top: 819px; width: 386px; height: 190px; background: var(--paper); }
.my-canvas.is-interface-entering[data-my-account="stock"] .stock-holdings-motion-cover { display: block; }

.community-topics-motion-cover { z-index: 3; left: 16px; top: 146px; width: 370px; height: 164px; border-radius: 8px; }
.community-canvas.is-interface-entering .community-topics-motion-cover { display: block; }
.community-canvas.is-interface-entering > .community-topics-module {
  animation: account-card-enter 420ms cubic-bezier(.22,1,.36,1) 40ms both !important;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
}

@media (prefers-reduced-motion: reduce) {
  .baked-card-motion,
  .community-topics-motion-cover,
  .stock-holdings-motion-cover { display: none !important; }
  .community-canvas.is-interface-entering > .community-topics-module { animation: none !important; }
}

/* Finance fund/stock pages: animate every card independently while the baked
   section headings remain on the stationary board layer. */
.finance-sector-card-cover,
.finance-sector-card-motion,
.finance-card-cover,
.finance-baked-card-motion {
  display: none;
  position: absolute;
  overflow: hidden;
  background: var(--paper);
  pointer-events: none;
}

.finance-sector-card-cover { left: 18px; top: 73px; width: 366px; height: 154px; overflow: visible; }
.finance-sector-card-motion { left: 16px; top: 76px; width: 370px; height: 154px; }
.finance-sector-card-cover { z-index: 30; background: var(--white); }
.finance-sector-card-cover::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 5px; background: var(--white); pointer-events: none; }
.finance-sector-card-motion { z-index: 31; background-color: transparent; }
.finance-sectors-stage[data-sector="flow"] .finance-sector-card-motion { background-image: url("./public/assets/finance-fund-board.svg?v=2"); background-position: -16px -194px; background-size: 402px 874px; }
.finance-canvas.is-interface-entering .finance-sector-card-cover,
.finance-canvas.is-interface-entering .finance-sector-card-motion,
.finance-sectors-stage.is-sector-replaying .finance-sector-card-cover,
.finance-sectors-stage.is-sector-replaying .finance-sector-card-motion,
.finance-sectors-stage.is-sector-complete .finance-sector-card-cover,
.finance-sectors-stage.is-sector-complete .finance-sector-card-motion { display: block; }
.finance-canvas.is-interface-entering .finance-sectors-stage[data-sector="flow"] .finance-sector-card-motion { animation: account-card-enter 420ms cubic-bezier(.22,1,.36,1) 30ms both; }

.sector-motion-block,
.sector-motion-label { position: absolute; display: block; background-image: url("./public/assets/finance-sectors.svg?v=20260901-3"); background-repeat: no-repeat; background-size: 402px 286px; }
.sector-motion-block { z-index: 1; opacity: 0; transform: scale(0); }
.sector-motion-label { z-index: 2; opacity: 0; transform: translateY(6px) scale(.92); box-shadow: 1px 1px 0 var(--ink); }
.finance-sectors-stage[data-sector="flow"] :is(.sector-motion-block,.sector-motion-label) { display: none; }
.finance-canvas.is-interface-entering .finance-sectors-stage[data-sector="performance"] .sector-motion-label,
.finance-sectors-stage.is-sector-replaying[data-sector="performance"] .sector-motion-label { animation: sector-label-enter 230ms cubic-bezier(.22,1,.36,1) var(--label-delay) both; }
.finance-canvas.is-interface-entering .finance-sectors-stage[data-sector="performance"] .sector-motion-block,
.finance-sectors-stage.is-sector-replaying[data-sector="performance"] .sector-motion-block { animation: sector-block-expand 380ms cubic-bezier(.16,1,.3,1) 650ms both; }
.finance-sectors-stage.is-sector-complete[data-sector="performance"] :is(.sector-motion-block,.sector-motion-label) {
  opacity: 1;
  transform: none;
  filter: none;
}

.sector-motion-oil { left: 12px; top: 0; width: 124px; height: 79px; background-position: -28px -76px; transform-origin: 0 0; }
.sector-motion-bank { left: 136px; top: 0; width: 91px; height: 79px; background-position: -152px -76px; transform-origin: 0 0; }
.sector-motion-energy { left: 227px; top: 0; width: 131px; height: 56px; background-position: -243px -76px; transform-origin: 0 0; }
.sector-motion-electronics { left: 227px; top: 56px; width: 63px; height: 86px; background-position: -243px -132px; transform-origin: 4px 0; }
.sector-motion-metal { left: 12px; top: 79px; width: 106px; height: 63px; background-position: -28px -155px; transform-origin: 0 100%; }
.sector-motion-optical { left: 118px; top: 79px; width: 109px; height: 63px; background-position: -134px -155px; transform-origin: 100% 100%; }
.sector-motion-component { left: 290px; top: 56px; width: 68px; height: 86px; background-position: -306px -132px; transform-origin: 100% 100%; }

/* The perimeter is still assembled by the colored blocks themselves. Add one
   inward pixel only on each block edge that faces outside, so the mosaic's
   outer silhouette is not visually lighter than its doubled internal seams. */
.sector-motion-oil { box-shadow: inset 1px 0 var(--ink), inset 0 1px var(--ink); }
.sector-motion-bank { box-shadow: inset 0 1px var(--ink); }
.sector-motion-energy { box-shadow: inset -1px 0 var(--ink), inset 0 1px var(--ink); }
.sector-motion-electronics { box-shadow: inset 0 -1px var(--ink); }
.sector-motion-metal { box-shadow: inset 1px 0 var(--ink), inset 0 -1px var(--ink); }
.sector-motion-optical { box-shadow: inset 0 -1px var(--ink); }
.sector-motion-component { box-shadow: inset -1px 0 var(--ink), inset 0 -1px var(--ink); }

.sector-label-oil { left: 12px; top: 0; width: 50px; height: 31px; background-position: -28px -76px; }
.sector-label-bank { left: 136px; top: 0; width: 50px; height: 31px; background-position: -152px -76px; }
.sector-label-energy { left: 227px; top: 0; width: 50px; height: 31px; background-position: -243px -76px; }
.sector-label-electronics { left: 231px; top: 56px; width: 59px; height: 31px; background-position: -247px -132px; }
.sector-label-metal { left: 12px; top: 111px; width: 50px; height: 31px; background-position: -28px -187px; }
.sector-label-optical { left: 168px; top: 111px; width: 59px; height: 31px; background-position: -184px -187px; }
.sector-label-component { left: 299px; top: 111px; width: 59px; height: 31px; background-position: -315px -187px; }

@keyframes sector-label-enter {
  0% { opacity: 0; transform: translateY(6px) scale(.92); filter: blur(1.5px); }
  70% { opacity: 1; transform: translateY(-1px) scale(1.015); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes sector-block-expand {
  0% { opacity: 0; transform: scale(0); }
  18% { opacity: 1; }
  78% { opacity: 1; transform: scale(1.018); }
  100% { opacity: 1; transform: scale(1); }
}

.stock-market-card-cover,
.stock-market-card-motion { left: 16px; top: 146px; width: 370px; height: 210px; border-radius: 8px; }
.stock-headline-card-cover { left: 14px; top: 394px; width: 375px; height: 218px; border-radius: 0; }
.stock-fund-card-cover,
.stock-fund-card-motion { top: 649px; width: 177px; height: 178px; border-radius: 8px; }
.stock-fund-card-cover-a,
.stock-fund-card-motion-a { left: 16px; }
.stock-fund-card-cover-b,
.stock-fund-card-motion-b { left: 209px; }
.finance-card-cover { z-index: 10; }
.stock-headline-card-cover { z-index: 7; }
.finance-baked-card-motion { z-index: 11; background-image: url("./public/assets/finance-stock-board-a.svg?v=9"); background-repeat: no-repeat; background-size: 402px 874px; }
.stock-market-card-motion { background: none; }
.stock-market-card-motion > img { position: absolute; left: -16px; top: -146px; width: 402px; height: 874px; max-width: none; display: block; }
.stock-fund-card-motion-a { background-position: -16px -649px; }
.stock-fund-card-motion-b { background-position: -209px -649px; }
.stock-board[data-stock-sector="hot"] .finance-baked-card-motion { background-image: url("./public/assets/finance-stock-board-b.svg?v=6"); }

.stock-board.is-interface-entering :is(.finance-card-cover, .finance-baked-card-motion) { display: block; }
.stock-board.is-interface-entering .stock-market-card-motion { animation: account-card-enter 420ms cubic-bezier(.22,1,.36,1) 30ms both; }
.stock-board.is-interface-entering .stock-headline-expanded { animation: account-card-enter 420ms cubic-bezier(.22,1,.36,1) 120ms both; transform-origin: 50% 50%; }
.stock-board.is-interface-entering .stock-fund-card-motion-a { animation: account-card-enter 420ms cubic-bezier(.22,1,.36,1) 210ms both; }
.stock-board.is-interface-entering .stock-fund-card-motion-b { animation: account-card-enter 420ms cubic-bezier(.22,1,.36,1) 280ms both; }

.stock-market-bars-motion {
  display: none;
  position: absolute;
  z-index: 12;
  inset: 0;
  width: 402px;
  height: 874px;
  overflow: visible;
  pointer-events: none;
}
.stock-board.is-interface-entering[data-stock-sector="limit"] .stock-market-bars-motion { display: block; }
.stock-market-static-bar-mask polygon { fill: #f8f8f8; stroke: #f8f8f8; stroke-width: 2px; }
.stock-market-rising-bar {
  transform-box: view-box;
  transform-origin: center 325px;
  animation: stock-market-bar-rise 430ms cubic-bezier(.18,.84,.28,1) both;
  will-change: transform, opacity;
}
.stock-market-rising-bar-left { animation-delay: 20ms; }
.stock-market-rising-bar-center { animation-delay: 48ms; }
.stock-market-rising-bar-right { animation-delay: 76ms; }
.stock-market-rising-bar .bar-top { fill: #ff8f8b; }
.stock-market-rising-bar .bar-dark { fill: #383838; }
.stock-market-rising-bar .bar-red { fill: #ff6661; }
.stock-market-rising-bar path { fill: none; stroke: #f8f8f8; stroke-width: 1px; stroke-linejoin: round; }
@keyframes stock-market-bar-rise {
  0% { opacity: .22; transform: scaleY(.025); }
  22% { opacity: 1; }
  68% { transform: scaleY(1.035); }
  100% { opacity: 1; transform: scaleY(1); }
}

.stock-market-label-mask,
.stock-market-label-motion {
  display: none;
  position: absolute;
  z-index: 13;
  width: 44px;
  height: 44px;
  pointer-events: none;
  clip-path: polygon(0 52%, 90% 0, 100% 6%, 100% 47%, 8% 100%, 0 94%);
}
.stock-market-label-left { left: 102px; top: 251px; }
.stock-market-label-center { left: 193px; top: 247px; }
.stock-market-label-right { left: 284px; top: 251px; }
.stock-market-stock-link { position:absolute;z-index:15;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer; }
.stock-market-stock-link:focus-visible { outline:2px solid var(--blue);outline-offset:2px;border-radius:4px; }
.stock-board:not([data-stock-sector="limit"]) .stock-market-stock-link { display:none; }
.stock-market-label-mask { background: #f8f8f8; }
.stock-market-label-motion {
  z-index: 14;
  background-image: url("./public/assets/finance-stock-board-a.svg?v=6");
  background-repeat: no-repeat;
  background-size: 402px 874px;
  animation: stock-market-label-follow 210ms cubic-bezier(.22,1,.36,1) both;
  will-change: transform, opacity;
}
.stock-market-label-motion.stock-market-label-left { background-position: -102px -251px; animation-delay: 220ms; }
.stock-market-label-motion.stock-market-label-center { background-position: -193px -247px; animation-delay: 248ms; }
.stock-market-label-motion.stock-market-label-right { background-position: -284px -251px; animation-delay: 276ms; }
.stock-board.is-interface-entering[data-stock-sector="limit"] :is(.stock-market-label-mask, .stock-market-label-motion) { display: block; }
@keyframes stock-market-label-follow {
  0% { opacity: 0; transform: translateY(9px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* The board SVG already owns the complete bar/label sequence. Keep the
   earlier experimental overlay layers inert so the sequence is drawn once. */
.stock-market-bars-motion,
.stock-market-label-mask,
.stock-market-label-motion { display: none !important; }
.stock-market-card-motion { background-image: none !important; }

@media (prefers-reduced-motion: reduce) {
  .finance-sector-card-cover,
  .finance-sector-card-motion,
  .finance-card-cover,
  .finance-baked-card-motion,
  .stock-market-bars-motion,
  .stock-market-label-mask,
  .stock-market-label-motion { display: none !important; }
  .stock-board.is-interface-entering .stock-headline-expanded { animation: none !important; }
}

/* Keep the old baked newspaper outline masked at rest and while expanding. */
.stock-board .stock-headline-card-cover { display:block !important; }

/* Topic library and topic detail */
.topic-library-canvas,
.topic-detail-canvas { --topic-accent: var(--blue); --topic-soft: #dff3fc; min-height: 767px; padding: 16px 16px 50px; }
.topic-library-tabs { width: 370px; min-height: 68px; padding: 5px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); box-shadow: 1px 1px 0 var(--ink); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; }
.topic-library-tabs button { min-width: 0; height: 56px; padding: 5px 3px; border: 0; border-radius: 6px; background: transparent; color: var(--white); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.topic-library-tabs button b { max-width: 100%; overflow: hidden; font: 500 13px/18px "Glow Sans SC Extended", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.topic-library-tabs button span { color: #c9c9c9; font-size: 10px; line-height: 15px; white-space: nowrap; }
.topic-library-tabs button.is-active { border: 1px solid var(--ink); background: var(--white); color: var(--ink); box-shadow: 1px 1px 0 #111; }
.topic-library-tabs button.is-active span { color: var(--topic-accent); font-weight: 500; }
.topic-library-summary,
.topic-detail-summary { margin-top: 12px; border: 1px solid var(--ink); border-radius: 9px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); overflow: hidden; }
.topic-summary-band { min-height: 62px; padding: 12px 13px 10px; border-bottom: 1px solid var(--ink); background: var(--topic-accent); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topic-summary-band small { display: block; margin-bottom: 1px; font-size: 10px; line-height: 15px; }
.topic-summary-band h1 { margin: 0; font: 700 23px/30px "Glow Sans SC Extended", sans-serif; }
.topic-summary-band > b { flex: 0 0 auto; margin-top: 13px; font: 500 22px/26px "Flynn Mono VF", monospace; white-space: nowrap; }
.topic-summary-copy { padding: 12px 13px 11px; color: #555; font: 300 13px/21px "PingFang Local", sans-serif; }
.topic-summary-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 12px 12px; border-top: 1px solid #aaa; }
.topic-summary-metrics div { min-width: 0; padding: 11px 4px 1px; text-align: center; }
.topic-summary-metrics div + div { border-left: 1px solid #ccc; }
.topic-summary-metrics b,
.topic-summary-metrics span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-summary-metrics b { font: 500 17px/22px "Flynn Mono VF", monospace; }
.topic-summary-metrics span { color: #777; font-size: 10px; line-height: 15px; }
.topic-library-section-head,
.topic-detail-section-head { margin-top: 19px; display: flex; align-items: center; justify-content: space-between; }
.topic-library-section-head h2,
.topic-detail-events > h2,
.topic-detail-section-head h2 { margin: 0; font: 700 21px/28px "Glow Sans SC Extended", sans-serif; }
.topic-sort { position: relative; width: 126px; height: 32px; padding: 3px; border: 1px solid var(--ink); border-radius: 18px; background: var(--white); display: grid; grid-template-columns: 1fr 1fr; }
.topic-sort button { border: 0; border-radius: 14px; background: transparent; color: #777; font-size: 13px; line-height: 24px; cursor: pointer; }
.topic-sort button.is-active { background: var(--ink); color: var(--white); }
.topic-library-list { display: grid; gap: 10px; margin-top: 10px; }
.topic-list-card { width: 370px; padding: 12px 13px 13px; border: 1px solid var(--ink); border-radius: 8px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); text-align: left; cursor: pointer; }
.topic-list-card:active { transform: translate(1px,1px); box-shadow: none; }
.topic-list-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topic-list-card-head > div { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.topic-list-card-head h3 { overflow: hidden; font: 700 17px/24px "Glow Sans SC Extended", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.topic-list-card-head b { flex: 0 0 auto; color: var(--red); font: 500 17px/22px "Flynn Mono VF", monospace; }
.topic-list-card.is-negative .topic-list-card-head b { color: #00ad99; }
.topic-list-limit { flex: 0 0 auto; min-width: 54px; height: 24px; padding: 2px 7px; border: 1px solid var(--ink); border-radius: 5px; background: var(--topic-soft); text-align: center; font: 500 11px/18px "PingFang Local", sans-serif; white-space: nowrap; }
.topic-list-leaders { min-width: 0; margin-top: 9px; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.topic-list-leaders > span { flex: 0 0 auto; padding: 2px 5px; border: 1px solid var(--ink); border-radius: 4px; background: var(--topic-accent); font-size: 10px; line-height: 15px; }
.topic-list-leaders b { min-width: 0; padding: 2px 6px; border-radius: 4px; background: var(--paper); font: 400 11px/17px "PingFang Local", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-list-card p { margin-top: 8px; color: #777; font: 300 11px/18px "PingFang Local", sans-serif; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.topic-library-note,
.topic-detail-note { margin: 18px 4px 0; color: #888; text-align: center; font-size: 10px; line-height: 16px; }

.topic-detail-summary { margin-top: 0; }
.topic-detail-summary .topic-summary-band { min-height: 72px; align-items: center; }
.topic-detail-summary .topic-summary-band > b { margin-top: 0; font-size: 24px; line-height: 30px; }
.topic-detail-summary .topic-summary-copy { padding-top: 14px; padding-bottom: 14px; font-size: 14px; line-height: 23px; }
.topic-detail-summary .topic-summary-metrics { margin-bottom: 14px; }
.topic-detail-events { margin-top: 21px; }
.topic-event-list { margin-top: 10px; padding: 5px 13px 5px 23px; border: 1px solid var(--ink); border-radius: 9px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.topic-event { position: relative; padding: 11px 4px 13px 16px; border-bottom: 1px solid #ccc; }
.topic-event:last-child { border-bottom: 0; }
.topic-event::before { content: ""; position: absolute; left: -11px; top: 17px; width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: var(--topic-accent); }
.topic-event:not(:last-child)::after { content: ""; position: absolute; left: -7px; top: 26px; bottom: -12px; border-left: 1px solid var(--ink); }
.topic-event time { display: block; color: #777; font-size: 10px; line-height: 15px; }
.topic-event p { margin-top: 3px; color: #555; font: 300 13px/21px "PingFang Local", sans-serif; }
.topic-detail-section-head span { color: #777; font-size: 10px; line-height: 15px; }
.topic-stock-list { margin-top: 10px; border: 1px solid var(--ink); border-radius: 9px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); overflow: hidden; }
.topic-stock-row { min-height: 62px; padding: 10px 12px; display: grid; grid-template-columns: minmax(0,1fr) 72px 64px; align-items: center; gap: 8px; border-bottom: 1px solid #ccc; }
.topic-stock-row:last-child { border-bottom: 0; }
.topic-stock-row h3 { overflow: hidden; font: 500 15px/22px "Glow Sans SC Extended", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.topic-stock-row small { display: block; color: #888; font-size: 10px; line-height: 15px; }
.topic-stock-row > span { height: 24px; padding: 2px 5px; border: 1px solid var(--ink); border-radius: 4px; background: var(--topic-soft); text-align: center; font-size: 10px; line-height: 18px; white-space: nowrap; }
.topic-stock-row > b { color: var(--red); text-align: right; font: 500 15px/20px "Flynn Mono VF", monospace; white-space: nowrap; }
.topic-stock-row.is-negative > b { color: #00ad99; }
.topic-library-page.is-interface-entering :is(.topic-library-tabs,.topic-library-summary,.topic-library-section-head,.topic-list-card),
.topic-detail-page.is-interface-entering :is(.topic-detail-summary,.topic-detail-events,.topic-detail-stocks) { animation: interface-panel-load 420ms cubic-bezier(.22,1,.36,1) both; }
.topic-library-page.is-interface-entering .topic-library-summary,
.topic-detail-page.is-interface-entering .topic-detail-events { animation-delay: 70ms; }
.topic-library-page.is-interface-entering .topic-library-section-head,
.topic-detail-page.is-interface-entering .topic-detail-stocks { animation-delay: 120ms; }
.topic-library-page.is-interface-entering .topic-list-card:nth-child(1) { animation-delay: 150ms; }
.topic-library-page.is-interface-entering .topic-list-card:nth-child(2) { animation-delay: 190ms; }
.topic-library-page.is-interface-entering .topic-list-card:nth-child(3) { animation-delay: 230ms; }
.topic-library-page.is-interface-entering .topic-list-card:nth-child(n+4) { animation-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  .topic-library-page.is-interface-entering :is(.topic-library-tabs,.topic-library-summary,.topic-library-section-head,.topic-list-card),
  .topic-detail-page.is-interface-entering :is(.topic-detail-summary,.topic-detail-events,.topic-detail-stocks) { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}

/* Stock quote detail opened from the expanded newspaper rows */
.stock-quote-canvas { min-height: 1120px; padding: 16px 16px 50px; }
.stock-quote-hero,
.stock-quote-chart-card,
.stock-quote-facts,
.stock-quote-topic,
.stock-quote-news { width: 370px; border: 1px solid var(--ink); border-radius: 9px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.stock-quote-hero { padding: 14px 13px 13px; }
.stock-quote-name { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stock-quote-name h1 { margin: 0; font: 700 24px/31px "Glow Sans SC Extended",sans-serif; }
.stock-quote-name span { display: block; margin-top: 1px; color: #777; font-size: 10px; line-height: 15px; }
.stock-quote-name em { flex: 0 0 auto; min-width: 62px; height: 25px; padding: 3px 7px; border: 1px solid var(--ink); border-radius: 5px; background: var(--yellow); box-shadow: 1px 1px 0 var(--ink); font: normal 11px/17px "PingFang Local",sans-serif; text-align: center; }
.stock-quote-price { margin-top: 11px; display: flex; align-items: baseline; gap: 10px; }
.stock-quote-price b { color: var(--red); font-size: 38px; line-height: 42px; letter-spacing: -1px; }
.stock-quote-price span { color: var(--red); font-size: 15px; line-height: 22px; }
.stock-quote-detail-page.is-negative .stock-quote-price b,
.stock-quote-detail-page.is-negative .stock-quote-price span { color: #00ad99; }
.stock-quote-session { margin-top: 2px; display: flex; align-items: center; gap: 7px; color: #777; font-size: 10px; line-height: 15px; }
.stock-quote-session span { padding: 1px 5px; border: 1px solid var(--ink); border-radius: 4px; background: var(--paper); color: var(--ink); }
.stock-quote-grid { margin-top: 13px; padding-top: 11px; border-top: 1px solid #aaa; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 10px; }
.stock-quote-grid div { min-width: 0; }
.stock-quote-grid b,.stock-quote-grid span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-quote-grid b { font: 500 13px/18px "Flynn Mono VF",monospace; }
.stock-quote-grid span { color: #777; font-size: 10px; line-height: 15px; }
.stock-quote-chart-card { margin-top: 12px; padding: 13px 13px 9px; }
.stock-quote-chart-head { display: flex; align-items: center; justify-content: space-between; }
.stock-quote-chart-head h2,.stock-quote-facts h2,.stock-quote-news h2 { margin: 0; font: 700 18px/24px "Glow Sans SC Extended",sans-serif; }
.stock-quote-chart-head > div { height: 27px; padding: 2px; border: 1px solid var(--ink); border-radius: 14px; background: var(--paper); display: flex; }
.stock-quote-chart-head button { width: 38px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: #777; font-size: 10px; line-height: 21px; cursor: pointer; }
.stock-quote-chart-head button.is-active { background: var(--ink); color: var(--white); }
.stock-quote-chart { display: block; width: 338px; height: 170px; margin-top: 8px; overflow: visible; }
.stock-quote-gridline { fill: none; stroke: #c9c9c9; stroke-width: .8; stroke-dasharray: 3 3; }
.stock-quote-area { fill: url(#stockQuoteArea); stroke: none; }
.stock-quote-line { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stock-quote-detail-page.is-negative .stock-quote-line { stroke: #00ad99; }
.stock-quote-detail-page.is-negative .stock-quote-area { fill: rgb(0 173 153 / 16%); }
.stock-quote-chart-times { display: flex; justify-content: space-between; color: #888; font: 400 9px/13px "Flynn Mono VF",monospace; }
.stock-quote-facts { margin-top: 12px; padding: 13px; }
.stock-quote-fact-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.stock-quote-fact-grid div { min-width: 0; min-height: 52px; padding: 8px 9px; border: 1px solid var(--ink); border-radius: 6px; background: var(--paper); }
.stock-quote-fact-grid span,.stock-quote-fact-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-quote-fact-grid span { color: #777; font-size: 10px; line-height: 15px; }
.stock-quote-fact-grid b { margin-top: 2px; font: 500 14px/19px "Flynn Mono VF",monospace; }
.stock-quote-topic { position: relative; margin-top: 12px; padding: 13px 14px 14px 54px; background: var(--ink); color: var(--white); }
.stock-quote-topic::before { content: "题"; position: absolute; left: 13px; top: 14px; width: 28px; height: 28px; border: 1px solid var(--white); border-radius: 5px; background: var(--blue); color: var(--ink); display: grid; place-items: center; font: 700 15px/22px "Glow Sans SC Extended",sans-serif; }
.stock-quote-topic > span { color: #bbb; font-size: 10px; line-height: 15px; }
.stock-quote-topic h2 { margin: 0; color: var(--yellow); font: 700 17px/24px "Glow Sans SC Extended",sans-serif; }
.stock-quote-topic p { margin-top: 4px; color: #ddd; font: 300 12px/19px "PingFang Local",sans-serif; }
.stock-quote-news { margin-top: 12px; padding: 13px; }
.stock-quote-news > div { display: flex; align-items: center; justify-content: space-between; }
.stock-quote-news > div span { color: #888; font-size: 10px; line-height: 15px; }
.stock-quote-news article { position: relative; margin-top: 10px; padding: 9px 9px 9px 52px; border-top: 1px solid #bbb; }
.stock-quote-news article time { position: absolute; left: 0; top: 10px; width: 43px; color: #777; font-size: 10px; line-height: 15px; }
.stock-quote-news article p { color: #555; font: 300 12px/19px "PingFang Local",sans-serif; }
.stock-quote-note { margin-top: 18px; color: #888; text-align: center; font-size: 10px; line-height: 16px; }
.stock-quote-detail-page.is-interface-entering :is(.stock-quote-hero,.stock-quote-chart-card,.stock-quote-facts,.stock-quote-topic,.stock-quote-news) { animation: interface-panel-load 430ms cubic-bezier(.22,1,.36,1) both; }
.stock-quote-detail-page.is-interface-entering .stock-quote-chart-card { animation-delay: 70ms; }
.stock-quote-detail-page.is-interface-entering .stock-quote-facts { animation-delay: 120ms; }
.stock-quote-detail-page.is-interface-entering .stock-quote-topic { animation-delay: 170ms; }
.stock-quote-detail-page.is-interface-entering .stock-quote-news { animation-delay: 220ms; }

@media (prefers-reduced-motion: reduce) {
  .stock-quote-detail-page.is-interface-entering :is(.stock-quote-hero,.stock-quote-chart-card,.stock-quote-facts,.stock-quote-topic,.stock-quote-news) { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}

/* Robinhood-inspired live stock detail: one continuous reading path */
.stock-quote-detail-page { --stock-up: #ff5f65; --stock-down: #00ad99; --stock-paper: #f7f0eb; }
.stock-quote-detail-page .feature-header { background: #fbfaf9; }
.stock-quote-scroller { bottom: 0; background: var(--stock-paper); }
.stock-quote-canvas { min-height: 1730px; padding: 18px 16px 92px; }
.stock-quote-market { width: 370px; padding: 16px 14px 13px; border: 1px solid var(--ink); border-radius: 10px; background: #fff; box-shadow: 1px 1px 0 var(--ink); overflow: hidden; }
.stock-quote-name { align-items: center; }
.stock-quote-name > div { min-width: 0; }
.stock-quote-name h1 { max-width: 238px; overflow: hidden; font-size: 26px; line-height: 34px; letter-spacing: -.5px; text-overflow: ellipsis; white-space: nowrap; }
.stock-quote-name span { margin-top: 2px; color: #767676; font-size: 10px; line-height: 15px; }
.stock-follow-button { flex: 0 0 44px; width: 44px; height: 44px; margin: 0 0 0 8px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; font: 400 11px/14px "PingFang Local",sans-serif; cursor: pointer; transition: transform 80ms ease; }
.stock-follow-button .stock-follow-icon { display: block; width: 24px; height: 24px; margin: 0; overflow: visible; fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; transition: stroke 140ms ease; }
.stock-follow-check { display: none; }
.stock-follow-button .stock-follow-label { display: block; margin: 0; color: var(--ink); font: 400 11px/14px "PingFang Local",sans-serif; white-space: nowrap; }
.stock-follow-button.is-following .stock-follow-icon { stroke: var(--ink); }
.stock-follow-button.is-following .stock-follow-plus { display: none; }
.stock-follow-button.is-following .stock-follow-check { display: block; }
.stock-quote-price { width: 100%; margin-top: 17px; display: block; }
.stock-quote-price b { display: block; max-width: 100%; overflow: hidden; color: var(--stock-up); font: 500 41px/47px "Flynn Mono VF",monospace; letter-spacing: -1.2px; text-overflow: ellipsis; white-space: nowrap; }
.stock-quote-price span { display: block; max-width: 100%; margin-top: 1px; padding: 0; overflow: hidden; color: var(--stock-up); font: 500 14px/21px "Flynn Mono VF",monospace; text-overflow: ellipsis; white-space: nowrap; }
.stock-quote-detail-page.is-negative .stock-quote-price b,
.stock-quote-detail-page.is-negative .stock-quote-price span { color: var(--stock-down); }
.stock-quote-session { margin-top: 3px; gap: 7px; }
.stock-live-badge { background: #eefbf8 !important; color: #057e70 !important; }
.stock-live-badge.is-delayed { background: #fff6d7 !important; color: #7d6310 !important; }
.stock-live-badge.is-error { background: #ffe7e8 !important; color: #b43b41 !important; }

.stock-chart-toolbar { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }
.stock-chart-periods { display: flex; align-items: center; gap: 5px; }
.stock-chart-periods button { min-width: 45px; height: 28px; padding: 0 8px; border: 0; border-radius: 15px; background: var(--paper); color: #727272; font: 500 11px/28px "PingFang Local",sans-serif; cursor: pointer; }
.stock-chart-periods button.is-active { background: var(--ink); color: #fff; }
.stock-chart-source { color: #8a8a8a; font-size: 9px; line-height: 14px; }
.stock-chart-readout { min-height: 64px; margin-top: 11px; padding: 6px 8px 7px 9px; border-left: 3px solid var(--blue); background: #f7f7f7; }
.stock-readout-head { display: flex; min-width: 0; align-items: center; gap: 6px; }
.stock-readout-head > b { overflow: hidden; color: #343434; font-size: 10px; line-height: 14px; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.stock-readout-change { flex: 0 0 auto; padding: 0 4px; border-radius: 4px; background: #e8e8e8; color: #555; font-size: 9px; font-style: normal; line-height: 14px; }
.stock-readout-change.is-up { background: #fff0ef; color: var(--coral); }
.stock-readout-change.is-down { background: #e7f7f4; color: var(--teal); }
.stock-readout-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) minmax(0,1.42fr); margin-top: 4px; }
.stock-readout-metrics > span { display: block; min-width: 0; padding: 0 5px; border-left: 1px solid #dfdfdf; }
.stock-readout-metrics > span:first-child { padding-left: 0; border-left: 0; }
.stock-readout-metrics > span:last-child { padding-right: 0; }
.stock-readout-metrics i,.stock-readout-metrics b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-readout-metrics i { color: #949494; font-size: 7px; font-style: normal; line-height: 9px; }
.stock-readout-metrics b { margin-top: 1px; color: #505050; font-size: 9px; line-height: 12px; }
.stock-readout-metrics > span:last-child b { font-size: 8px; }
.stock-chart-stage { position: relative; width: 338px; height: 218px; margin-top: 6px; touch-action: none; user-select: none; }
.stock-quote-chart { display: block; width: 338px; height: 218px; margin: 0; overflow: visible; }
.stock-chart-loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(255 255 255 / 84%); color: #777; font-size: 11px; }
.stock-chart-stage.is-ready .stock-chart-loading { display: none; }
.stock-chart-grid-line { stroke: #d7d7d7; stroke-width: .7; stroke-dasharray: 3 3; }
.stock-chart-axis-label { fill: #949494; font: 8px "Flynn Mono VF",monospace; }
.stock-chart-price-line { fill: none; stroke: var(--stock-up); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stock-quote-detail-page.is-negative .stock-chart-price-line { stroke: var(--stock-down); }
.stock-chart-price-area { fill: rgb(255 95 101 / 12%); }
.stock-quote-detail-page.is-negative .stock-chart-price-area { fill: rgb(0 173 153 / 12%); }
.stock-chart-average-line { fill: none; stroke: #f2b400; stroke-width: 1; stroke-linejoin: round; }
.stock-chart-up { fill: var(--stock-up); stroke: var(--stock-up); }
.stock-chart-down { fill: var(--stock-down); stroke: var(--stock-down); }
.stock-chart-crosshair { stroke: #383838; stroke-width: .75; stroke-dasharray: 2 2; pointer-events: none; }
.stock-chart-focus-dot { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; pointer-events: none; }
.stock-chart-hit { fill: transparent; cursor: crosshair; }
.stock-quote-grid { margin-top: 12px; padding-top: 11px; border-top: 1px solid #aaa; grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 0; }
.stock-quote-grid div { padding-right: 4px; }
.stock-quote-grid b { font-size: 12px; line-height: 17px; }
.stock-quote-grid span { font-size: 9px; line-height: 14px; }
.stock-stats-toggle { width: 100%; height: 29px; margin-top: 8px; border: 0; border-top: 1px solid #ddd; background: transparent; color: #737373; font-size: 10px; cursor: pointer; }
.stock-stats-toggle span { display: inline-block; margin-left: 3px; font-size: 13px; transition: transform 180ms ease; }
.stock-stats-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
.stock-quote-extra { padding-top: 9px; border-top: 1px solid #ddd; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.stock-quote-extra:not([hidden]) { display: grid; }
.stock-quote-extra div { min-width: 0; }
.stock-quote-extra span,.stock-quote-extra b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-quote-extra span { color: #777; font-size: 9px; line-height: 14px; }
.stock-quote-extra b { margin-top: 1px; font: 500 11px/16px "Flynn Mono VF",monospace; }

.stock-section { width: 370px; margin-top: 13px; padding: 14px 13px; border: 1px solid var(--ink); border-radius: 9px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.stock-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stock-section-title > div { min-width: 0; display: flex; align-items: center; gap: 7px; }
.stock-section-title > div > span { flex: 0 0 auto; width: 25px; height: 21px; border: 1px solid var(--ink); border-radius: 4px; background: var(--blue); text-align: center; font: 500 9px/19px "Flynn Mono VF",monospace; }
.stock-section-title h2 { overflow: hidden; font: 700 18px/24px "Glow Sans SC Extended",sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.stock-section-title em { flex: 0 0 auto; color: #858585; font: normal 9px/14px "PingFang Local",sans-serif; }

.stock-insight-card { background: var(--ink); color: #fff; }
.stock-insight-card .stock-section-title > div > span { border-color: #fff; color: var(--ink); }
.stock-insight-card .stock-section-title em { color: #aaa; }
.stock-insight-title { margin-top: 15px; color: var(--yellow); font: 700 22px/29px "Glow Sans SC Extended",sans-serif; }
.stock-insight-copy { margin-top: 5px; color: #d7d7d7; font: 300 12px/20px "PingFang Local",sans-serif; }
.stock-insight-copy,.stock-context-topic p,.stock-risk-list span,.stock-company-head p,.stock-flow-summary p { overflow-wrap: anywhere; word-break: break-word; }
.stock-insight-points { margin-top: 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.stock-insight-points div { min-width: 0; min-height: 47px; padding: 7px 6px; border: 1px solid #686868; border-radius: 5px; background: #454545; }
.stock-insight-points b,.stock-insight-points span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-insight-points b { color: var(--blue); font: 500 12px/17px "Flynn Mono VF",monospace; }
.stock-insight-points span { margin-top: 1px; color: #c7c7c7; font-size: 9px; line-height: 14px; }

.stock-flow-summary { margin-top: 15px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.stock-flow-summary span { display: block; color: #777; font-size: 10px; line-height: 15px; }
.stock-flow-summary b { display: block; margin-top: 2px; color: var(--stock-up); font-size: 23px; line-height: 29px; }
.stock-flow-summary b.is-out { color: var(--stock-down); }
.stock-flow-summary p { max-width: 134px; color: #666; text-align: right; font: 300 10px/16px "PingFang Local",sans-serif; }
.stock-flow-chart { display: block; width: 338px; height: 112px; margin-top: 8px; }
.stock-flow-axis { stroke: #bfbfbf; stroke-width: .8; }
.stock-flow-label { fill: #929292; font: 8px "Flynn Mono VF",monospace; }
.stock-flow-legend { display: flex; justify-content: center; gap: 18px; color: #777; font-size: 9px; line-height: 14px; }
.stock-flow-legend i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--stock-up); }
.stock-flow-legend span:last-child i { background: var(--stock-down); }

.stock-theme-tag { max-width: 100px; padding: 2px 6px; border: 1px solid var(--ink); border-radius: 4px; background: var(--yellow); color: var(--ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-context-topic { margin-top: 13px; padding: 11px 12px; border: 1px solid var(--ink); border-radius: 6px; background: var(--stock-paper); }
.stock-context-topic h3 { font: 700 17px/23px "Glow Sans SC Extended",sans-serif; }
.stock-context-topic p { margin-top: 4px; color: #666; font: 300 11px/18px "PingFang Local",sans-serif; }
.stock-risk-list { margin-top: 10px; }
.stock-risk-list p { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 8px; padding: 8px 1px; border-top: 1px solid #ccc; }
.stock-risk-list b { font-size: 11px; line-height: 18px; }
.stock-risk-list span { color: #6f6f6f; font: 300 10px/18px "PingFang Local",sans-serif; }

.stock-company-head { margin-top: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.stock-company-head h3 { font: 700 19px/25px "Glow Sans SC Extended",sans-serif; }
.stock-company-head span { display: block; margin-top: 2px; color: #777; font-size: 9px; line-height: 14px; }
.stock-company-head p { max-width: 142px; color: #676767; text-align: right; font: 300 10px/17px "PingFang Local",sans-serif; }
.stock-company-metrics { margin-top: 12px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.stock-company-metrics div { min-width: 0; min-height: 48px; padding: 7px 8px; border: 1px solid var(--ink); border-radius: 5px; background: var(--paper); }
.stock-company-metrics span,.stock-company-metrics b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stock-company-metrics span { color: #777; font-size: 9px; line-height: 14px; }
.stock-company-metrics b { margin-top: 2px; font: 500 13px/18px "Flynn Mono VF",monospace; }
.stock-quote-note { margin: 18px 4px 0; padding-bottom: 4px; }

.stock-detail-actions { position: absolute; z-index: 15; left: 0; bottom: 0; width: 402px; height: 150px; pointer-events: none; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 50%) 75%); }
.stock-detail-actions button { position: absolute; left: 16px; bottom: 34px; width: 370px; height: 50px; padding: 0; border: 2px solid var(--white); border-radius: 53px; background: var(--ink); color: var(--white); font: 500 22px/26px "PingFang Local",sans-serif; letter-spacing: 4.4px; cursor: pointer; pointer-events: auto; }
.stock-follow-button:active { transform: translateY(1px); }

:is(.holding-fixed-row,.holdings-details p,.topic-stock-row,.simulation-record-identity,.watchlist-results article,.stock-composition-selected,.simulation-security-results span)[data-stock-code] { cursor: pointer; }
:is(.holding-fixed-row,.holdings-details p,.topic-stock-row,.simulation-record-identity,.watchlist-results article,.stock-composition-selected)[data-stock-code]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Real stock order flow stays independent from the simulated portfolio. */
.phone.stock-order-open .stock-order-page { display: block; }
.phone.stock-order-open .tabbar,.phone.stock-order-open .bottom-fade,.phone.stock-order-open > .home-indicator { display: none; }
.stock-order-page { background: var(--paper); color: var(--ink); }
.stock-order-scroller { bottom: 0; background: var(--paper); }
.stock-order-canvas { min-height: 760px; padding: 18px 16px 120px; }
.stock-order-security { width: 370px; min-height: 90px; padding: 15px 16px; border: 1px solid var(--ink); border-radius: 10px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stock-order-security h1 { max-width: 190px; margin: 0; overflow: hidden; font: 700 23px/29px "Glow Sans SC Extended",sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.stock-order-security span { display: block; margin-top: 3px; color: #777; font-size: 11px; line-height: 15px; }
.stock-order-security > div:last-child { text-align: right; }
.stock-order-security > div:last-child b { display: block; color: #ff5f65; font: 500 25px/31px "Flynn Mono VF",monospace; }
.stock-order-security > div:last-child span { color: #ff5f65; font: 500 11px/15px "Flynn Mono VF",monospace; }
.stock-order-card { width: 370px; margin-top: 14px; padding: 16px; border: 1px solid var(--ink); border-radius: 10px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.stock-order-card > header { height: 30px; display: flex; align-items: flex-start; justify-content: space-between; }
.stock-order-card h2 { margin: 0; font: 700 20px/26px "Glow Sans SC Extended",sans-serif; }
.stock-order-card > header span { height: 24px; padding: 2px 8px; border: 1px solid var(--ink); border-radius: 12px; background: var(--yellow); font: 500 11px/18px "PingFang Local",sans-serif; }
.stock-order-field { margin-top: 14px; }
.stock-order-field label { display: block; margin-bottom: 7px; font: 500 14px/20px "PingFang Local",sans-serif; }
.stock-order-stepper { width: 100%; height: 46px; display: grid; grid-template-columns: 52px 1fr 52px; border: 1px solid var(--ink); border-radius: 8px; overflow: hidden; background: var(--paper); }
.stock-order-stepper button { padding: 0; border: 0; background: var(--white); color: var(--ink); font: 500 22px/44px "PingFang Local",sans-serif; cursor: pointer; }
.stock-order-stepper button:first-child { border-right: 1px solid var(--ink); }
.stock-order-stepper button:last-child { border-left: 1px solid var(--ink); }
.stock-order-stepper input { min-width: 0; padding: 0 8px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 20px/44px "Flynn Mono VF",monospace; text-align: center; }
.stock-order-limits { margin-top: 5px; display: flex; justify-content: space-between; color: #777; font: 400 10px/15px "PingFang Local",sans-serif; }
.stock-order-limits b { color: inherit; font-weight: 500; }
.stock-order-quantity-field { margin-top: 16px; }
.stock-order-shortcuts { margin-top: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.stock-order-shortcuts button { height: 31px; padding: 0; border: 1px solid var(--ink); border-radius: 16px; background: var(--paper); color: var(--ink); font: 400 11px/29px "PingFang Local",sans-serif; cursor: pointer; }
.stock-order-estimate { margin-top: 17px; padding-top: 14px; border-top: 1px solid #d5d5d5; display: flex; align-items: baseline; justify-content: space-between; }
.stock-order-estimate span { font: 400 13px/18px "PingFang Local",sans-serif; }
.stock-order-estimate strong { font: 500 22px/28px "Flynn Mono VF",monospace; }
.stock-order-account { width: 370px; margin-top: 14px; padding: 2px 15px; border: 1px solid var(--ink); border-radius: 10px; background: var(--white); box-shadow: 1px 1px 0 var(--ink); }
.stock-order-account > div { min-height: 46px; display: flex; align-items: center; justify-content: space-between; font: 400 13px/18px "PingFang Local",sans-serif; }
.stock-order-account > div + div { border-top: 1px solid #ddd; }
.stock-order-account b { font-weight: 500; }
.stock-order-note { width: 350px; margin: 12px auto 0; color: #666; font: 400 10px/16px "PingFang Local",sans-serif; text-align: justify; }
.stock-order-footer { position: absolute; z-index: 15; left: 0; bottom: 0; width: 402px; height: 120px; pointer-events: none; background: linear-gradient(to bottom,transparent,rgb(0 0 0 / 40%) 80%); }
.stock-order-submit { position: absolute; left: 16px; bottom: 34px; width: 370px; height: 50px; padding: 0; border: 2px solid var(--ink); border-radius: 53px; background: var(--blue); color: var(--white); font: 500 22px/26px "PingFang Local",sans-serif; letter-spacing: 4.4px; pointer-events: auto; cursor: pointer; }

.stock-quote-detail-page.is-interface-entering :is(.stock-quote-market,.stock-section) { animation: interface-panel-load 360ms cubic-bezier(.22,1,.36,1) both; }
.stock-quote-detail-page.is-interface-entering .stock-section:nth-of-type(2) { animation-delay: 45ms; }
.stock-quote-detail-page.is-interface-entering .stock-section:nth-of-type(3) { animation-delay: 80ms; }
.stock-quote-detail-page.is-interface-entering .stock-section:nth-of-type(4) { animation-delay: 115ms; }
.stock-quote-detail-page.is-interface-entering .stock-section:nth-of-type(5) { animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce) {
  .stock-quote-detail-page.is-interface-entering :is(.stock-quote-market,.stock-section) { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}