/* Assets page (assets-pro.js) — scoped to .as-* */
.as-hero .pro-hero-big { margin-bottom: 14px; }
.as-bar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--pb-card2); gap: 2px; margin-bottom: 14px; }
.as-bar i { display: block; height: 100%; transition: width .5s; }
.as-bar .w, .as-legend .w { background: #3b82f6; }
.as-bar .a, .as-legend .a { background: #f0b90b; }
.as-bar .m, .as-legend .m { background: var(--pb-acc); }
.as-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.as-legend > div { background: var(--pb-card2); border-radius: 12px; padding: 9px 10px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 6px; align-items: center; min-width: 0; }
.as-legend i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.as-legend span { color: var(--pb-t2); font-size: .7rem; }
.as-legend b { grid-column: 1 / -1; color: var(--pb-t1); font-size: .88rem; font-weight: 600; direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .as-legend b#assetBalanceDisplay2 { color: var(--pb-t1) !important; }
.as-legend em { grid-column: 1 / -1; font-style: normal; color: var(--pb-t3); font-size: .68rem; }

.as-flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 16px; padding: 14px 12px; }
.as-node { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; color: var(--pb-t2); font-size: .74rem; }
.as-node i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--pb-card2); color: var(--pb-t1); font-size: 1rem; }
.as-node.hot i { background: var(--pb-acc); color: var(--pb-on-acc); }
.as-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px dashed var(--pb-line2); background: transparent; color: var(--pb-t3); cursor: pointer; flex-shrink: 0; }
[dir="ltr"] .as-arrow i { transform: scaleX(-1); }
.as-flow-note { color: var(--pb-t2); font-size: .74rem; line-height: 1.8; margin: 10px 2px; }
.as-transfer-btn { width: 100%; height: 46px; border-radius: 14px; border: 1px solid rgba(14,203,129,.35); background: var(--pb-acc-soft); color: var(--pb-acc); font-weight: 700; cursor: pointer; }

.as-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.as-stat { background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 14px; padding: 12px; }
.as-stat span { display: block; color: var(--pb-t2); font-size: .72rem; margin-bottom: 4px; }
.as-stat b { color: var(--pb-t1); font-size: 1.05rem; font-weight: 700; direction: ltr; display: block; text-align: start; }
.as-stat b.up { color: var(--pb-up); }
.as-chart-card { margin-top: 8px; padding: 12px !important; }
.as-chart-head { color: var(--pb-t2); font-size: .74rem; margin-bottom: 8px; }
.as-chart { display: flex; align-items: flex-end; gap: 4px; height: 110px; direction: ltr; }
.as-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.as-col i { width: 100%; max-width: 18px; border-radius: 4px 4px 2px 2px; background: var(--pb-acc); display: block; }
.as-col i.neg { background: var(--pb-dn); }
.as-col i.zero { background: var(--pb-card2); }
.as-col span { color: var(--pb-t3); font-size: .58rem; font-family: var(--pb-num); }

.as-plan { padding: 14px !important; }
.as-plan-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.as-plan-row b { color: var(--pb-t1); font-size: .92rem; }
.as-plan-row span { color: var(--pb-t2); font-size: .76rem; direction: ltr; }
.as-plan-bar { height: 8px; border-radius: 6px; background: var(--pb-card2); overflow: hidden; }
.as-plan-bar i { display: block; height: 100%; background: var(--pb-acc); border-radius: 6px; transition: width .5s; }
.as-plan-note { color: var(--pb-t2); font-size: .74rem; margin-top: 8px; }