#trade-demo{display:block;margin-top:25px;padding:0;border:1px solid #dce4f1;border-radius:17px;background:linear-gradient(120deg,#fff,#f4f7fd)!important;box-shadow:0 5px 22px -20px #304c7340;overflow:hidden}
#trade-demo[hidden]{display:none}
/* Only shown on the temporary scroll-preview link. */
#trade-demo .trade-preview-note{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:10px 28px;background:#edf3ff;color:#48628c;font-size:13px;line-height:1.6;border-top:1px solid #dce4f1}
#trade-demo .trade-preview-note a{color:#365ead;font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){#trade-demo .trade-preview-note{padding:10px 16px;font-size:12px}}
#trade-demo .trade-demo-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;padding:22px 28px;margin:0;border:0;--trade-lockup-rise:12px;--trade-lockup-inset:14px}
#trade-demo .trade-demo-heading::after,#trade-demo .trade-demo-window::before{content:none}
#trade-demo .trade-heading-copy{display:flex;align-items:center;gap:16px;min-width:0;max-width:100%;flex-wrap:nowrap}
#trade-demo h3{min-width:0;margin:0;font-size:max(22px,var(--trade-titleSize,22px));line-height:1.4;color:#304c73;font-weight:750;letter-spacing:-.03em}
#trade-demo .trade-demo-title-group{position:relative;display:block;padding:var(--trade-lockup-rise) 0 0 var(--trade-lockup-inset)}
#trade-demo .trade-demo-title-text{display:block;word-break:keep-all;overflow-wrap:anywhere}
#trade-demo .trade-heading-logo{position:absolute;top:0;left:0;display:block;width:34px;height:22px;object-fit:contain;transform:none}
#trade-demo .trade-live{display:inline-flex;flex:none;align-items:center;gap:8px;margin-top:var(--trade-lockup-rise);padding:7px 12px;border-radius:30px;background:#e7f6ef;color:#16815f;font-size:14px;font-weight:700;line-height:1.2;white-space:nowrap}
#trade-demo .trade-pulse{display:inline-block;width:7px;height:7px;flex:none}


#trade-demo .trade-demo-date{display:block;margin:var(--trade-lockup-rise) 0 0 auto;color:#526c8e;font-size:15px;font-weight:700;line-height:1.4;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
#trade-demo .trade-demo-date[hidden]{display:none}
#trade-demo .trade-table-scroll{overflow:clip}
#trade-demo .trade-table{min-width:680px}
#trade-demo .trade-table-header,#trade-demo .trade-table-row{display:grid;grid-template-columns:minmax(90px,.8fr) minmax(110px,1fr) minmax(150px,1.45fr) minmax(130px,1fr) minmax(108px,.8fr);align-items:center;column-gap:18px;padding:0 28px}
#trade-demo .trade-table-header{min-height:46px;background:#f5f7fb;border-top:1px solid #e1e7f0;border-bottom:1px solid #e1e7f0;color:#687d9a;font-size:12px;font-weight:600}
#trade-demo .trade-table-header [role=columnheader]:last-child{text-align:right}
#trade-demo .trade-table-header [role=columnheader]:nth-child(-n+2){color:#526985}
#trade-demo .trade-demo-window{display:block;min-height:0;max-height:380px;height:auto;overflow:clip;padding:0;border:0;scrollbar-width:none;overflow-anchor:none;--trade-tail-height:76px}
#trade-demo .trade-demo-window.has-layered-tail{mask-image:linear-gradient(to bottom,#0000 0,#000 18px,#000 calc(100% - var(--trade-tail-height)),#0009 calc(100% - var(--trade-tail-height)*.65),#0006 100%)}
#trade-demo .trade-table-row{min-width:0;min-height:76px;border-bottom:1px solid #e3e9f2;background:#fff;transition:background-color .35s}
#trade-demo .trade-table-row.is-current{background:#f3f7fe}
#trade-demo .trade-table-row [role=cell]{min-width:0;padding:16px 0;line-height:1.4}
#trade-demo .trade-time{font-size:var(--trade-textSize,16px);font-weight:550;color:#526985;font-variant-numeric:tabular-nums;white-space:nowrap}
#trade-demo .trade-demo-name{font-size:var(--trade-textSize,16px);font-weight:550;color:#526985;overflow-wrap:anywhere}
#trade-demo .trade-demo-product{display:flex;align-items:center;gap:9px;font-size:var(--trade-textSize,16px);font-weight:700;color:#304c73;overflow-wrap:anywhere}
#trade-demo .trade-demo-logo{display:block;flex:0 0 24px;width:24px;height:24px;padding:0;object-fit:contain;background:none;border:0;border-radius:0}
#trade-demo .trade-quantity{overflow-wrap:anywhere}
#trade-demo .trade-quantity b{color:#395887;font-size:calc(var(--trade-textSize,16px) + 5px);font-weight:800;font-variant-numeric:tabular-nums}
/* A quiet gold twinkle marks only quantities at or above the requested thresholds. */
#trade-demo .trade-quantity b.is-large-trade{position:relative;display:inline-block;text-shadow:0 0 7px #edbd7140}
#trade-demo .trade-amount-sparkles{position:absolute;inset:-.28em -.58em;pointer-events:none;color:#d6a12e}
#trade-demo .trade-amount-sparkles::before,#trade-demo .trade-amount-sparkles::after{content:"";position:absolute;display:block;width:.46em;height:.46em;right:0;top:0;background:currentColor;opacity:.65;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
#trade-demo .trade-amount-sparkles::after{width:.3em;height:.3em;right:.16em;top:auto;bottom:.12em;color:#9a90d8;opacity:.4}
#trade-demo .is-sparkling{animation:trade-amount-glow var(--trade-sparkle-duration,3.6s) ease-in-out infinite}
#trade-demo .is-sparkling .trade-amount-sparkles::before,#trade-demo .is-sparkling .trade-amount-sparkles::after{animation:trade-amount-twinkle var(--trade-sparkle-duration,3.6s) ease-in-out infinite}
#trade-demo .is-sparkling .trade-amount-sparkles::after{animation-delay:-1.2s}
@keyframes trade-amount-glow{0%,65%,100%{text-shadow:0 0 3px #edbd711a}30%{text-shadow:0 0 3px #efc47566,0 0 10px #e9ad5473}}
@keyframes trade-amount-twinkle{0%,65%,100%{opacity:.2}30%{opacity:1}}
#trade-demo .trade-status{display:flex;justify-content:flex-end;color:#7c8ba2;font-size:var(--trade-textSize,16px)}
#trade-demo .trade-status-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:30px;font-size:12px;font-weight:700;white-space:nowrap}
#trade-demo .trade-status-badge.is-complete{background:#e7f6ef;color:#17aa7f}
#trade-demo .trade-status-badge.is-pending{background:#eef2fb;color:#526c8e}
#trade-demo .trade-empty{margin:0;padding:26px 28px;color:#73829a;font-size:14px;line-height:1.6}
#trade-demo:focus-visible,#trade-demo .trade-table-scroll:focus-visible,#trade-demo .trade-demo-window:focus-visible{outline:2px solid #4967ad;outline-offset:-3px}
@media(max-width:760px){
 #trade-demo{border-radius:14px}
 #trade-demo .trade-demo-heading{gap:8px;padding:18px 20px}
 #trade-demo .trade-heading-copy{gap:12px}
 #trade-demo h3{font-size:max(20px,var(--trade-titleMobileSize,20px))}
 #trade-demo .trade-live{padding:6px 11px;font-size:13px}
 #trade-demo .trade-demo-date{flex-basis:100%;margin:0 0 0 var(--trade-lockup-inset);font-size:13px}
 #trade-demo .trade-time,#trade-demo .trade-demo-name,#trade-demo .trade-demo-product,#trade-demo .trade-status{font-size:var(--trade-textMobileSize,14px)}
 #trade-demo .trade-quantity b{font-size:calc(var(--trade-textMobileSize,14px) + 5px)}
 #trade-demo .trade-table-header,#trade-demo .trade-table-row{padding-right:20px;padding-left:20px;column-gap:14px}
 #trade-demo .trade-table{min-width:0;width:100%}
 #trade-demo .trade-table-scroll{overflow-x:clip}
 #trade-demo .trade-table-header,#trade-demo .trade-table-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);padding-right:12px;padding-left:12px;column-gap:10px}
 #trade-demo .trade-table-header>[role=columnheader]:first-child,#trade-demo .trade-table-header>[role=columnheader]:last-child,#trade-demo .trade-table-row .trade-time,#trade-demo .trade-table-row .trade-status{display:none}
 #trade-demo .trade-table-header>[role=columnheader]:nth-child(4),#trade-demo .trade-quantity{text-align:right}
 #trade-demo .trade-demo-product{gap:6px}
 #trade-demo .trade-demo-product>span{min-width:0}
 #trade-demo .trade-table-row{min-height:68px}
 #trade-demo .trade-demo-window{max-height:340px;--trade-tail-height:68px}
}
@media(max-width:360px){
 #trade-demo .trade-demo-heading{padding:17px 15px;gap:10px}
 #trade-demo .trade-quantity b{font-size:calc(var(--trade-textMobileSize,14px) + 3px)}
}
@media(prefers-reduced-motion:reduce){#trade-demo .trade-table-row{transition:none}}
html:not(.site-motion-enabled) #trade-demo .trade-table-row{transition:none}
@media(forced-colors:active){#trade-demo .trade-table-row.is-current{outline:2px solid Highlight;outline-offset:-2px}#trade-demo .trade-status-badge{border:1px solid CanvasText}}

@media(forced-colors:active){#trade-demo .trade-demo-window.has-layered-tail{mask-image:none}}
@media(forced-colors:active){#trade-demo .trade-quantity b.is-large-trade{animation:none;text-shadow:none}#trade-demo .trade-amount-sparkles{display:none}}


/* Meso >=10억 and cubes >=2,000 keep a quiet LED edge and colour wash, with no passing flash. */
#trade-demo .trade-table-row.is-rainbow-trade{position:relative;isolation:isolate;overflow:hidden}
#trade-demo .is-rainbow-trade [role=cell]{position:relative;z-index:1}
#trade-demo .is-rainbow-trade::before,#trade-demo .is-rainbow-trade::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,#ed6b80,#f2aa58,#e3d273,#52bba5,#5d9bdf,#9a77d2,#ed6b80,#f2aa58,#e3d273,#52bba5,#5d9bdf,#9a77d2,#ed6b80);background-size:200% 100%;background-position:0% 50%;animation:trade-row-led var(--trade-rainbow-duration,14s) ease-in-out infinite;animation-play-state:paused}
#trade-demo .is-rainbow-trade::before{z-index:0;opacity:.085}
#trade-demo .is-rainbow-trade::after{z-index:2;padding:1px;opacity:.55;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#trade-demo .is-rainbow-running::before,#trade-demo .is-rainbow-running::after{animation-play-state:running}
@keyframes trade-row-led{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(forced-colors:active){#trade-demo .is-rainbow-trade::before,#trade-demo .is-rainbow-trade::after{display:none;animation:none}}

/* The table never becomes a native scroll container, including while paused. */
#trade-demo .trade-demo-window::-webkit-scrollbar{display:none;width:0;height:0}
#trade-demo .trade-demo-track{width:100%}
#trade-demo.trade-running .trade-demo-track{will-change:transform}
#trade-demo.trade-static .trade-demo-window{max-height:none;mask-image:none}
#trade-demo .trade-heading-tools{display:flex;align-items:center;gap:14px;margin:var(--trade-lockup-rise) 0 0 auto;min-width:0}
#trade-demo .trade-heading-tools .trade-demo-date{margin:0;flex-basis:auto}
@media(max-width:760px){#trade-demo .trade-heading-tools{flex-basis:100%;margin:0 0 0 var(--trade-lockup-inset);justify-content:space-between;gap:8px}}

/* Times belong to this automatic display; saved transaction dates remain unchanged. */
#trade-demo .trade-feed-note{margin:0;padding:10px 28px;border-top:1px solid #e1e7f0;color:#687d9a;font-size:12px;line-height:1.6;background:#f8faff}
@media(max-width:760px){#trade-demo .trade-feed-note{padding:9px 16px;font-size:11px}}

/* Product branding stays readable alongside a compact member and amount. */
#trade-demo .trade-product-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
#trade-demo .trade-product-group{font-size:11px;font-weight:500;color:#71819b;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#trade-demo .trade-product-name{word-break:keep-all;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.35}
#trade-demo.trade-examples-mode .trade-demo-logo{width:28px;height:28px;flex-basis:28px;border-radius:6px}
#trade-demo.trade-examples-mode .trade-table-row{min-height:84px}
#trade-demo.trade-examples-mode .trade-demo-product{font-size:14px}
#trade-demo.trade-examples-mode .trade-table-row [role=cell]{padding-top:12px;padding-bottom:12px}
#trade-demo.trade-examples-mode:not(.trade-static) .trade-demo-window{max-height:420px;--trade-tail-height:84px}
#trade-demo.trade-examples-mode .trade-status-badge.is-pending{background:#fff4da;color:#92661d}
#trade-demo.trade-examples-mode .trade-live{background:#edf0ff;color:#5966ae}
@media(max-width:760px){
 #trade-demo.trade-examples-mode .trade-table-header,#trade-demo.trade-examples-mode .trade-table-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.55fr) minmax(0,1.1fr)}
 #trade-demo.trade-examples-mode .trade-demo-product{font-size:13px;gap:6px}
}

#trade-demo .trade-live[hidden]{display:none}
#trade-demo .trade-heading-copy{min-width:0;flex-wrap:wrap}
#trade-demo h3,#trade-demo .trade-live{overflow-wrap:anywhere}