.forex-page-header { position: absolute; inset: 0 0 auto; height: calc(44 * var(--u) + var(--safe-top)); z-index: 20; background: #fff; }
.forex-page-header h1 { position: absolute; top: var(--safe-top); left: 0; width: 100%; height: calc(44 * var(--u)); display: grid; place-items: center; margin: 0; font-size: calc(18 * var(--u)); line-height: calc(27 * var(--u)); font-weight: 600; pointer-events: none; outline: none; }
.forex-back { position: absolute; left: 0; top: var(--safe-top); width: calc(44 * var(--u)); height: calc(44 * var(--u)); z-index: 1; display: grid; place-items: center; }
.forex-back svg { width: calc(12 * var(--u)); height: calc(20 * var(--u)); stroke-width: 2; }
#forex-view { height: 100%; min-height: 0; display: flex; flex-direction: column; background: #f4f4f4; }
.on-forex-exchange .page-scroll { overflow: hidden; }
.forex-intro, .forex-notice, .forex-updated { flex-shrink: 0; }
.on-forex .bottom-nav { display: none; }
.on-forex .page-scroll { padding-bottom: var(--safe-bottom); background: #fff; }
.on-forex .toast { bottom: calc(40 * var(--u) + var(--safe-bottom)); }
.forex-intro { position: relative; height: calc(210 * var(--u) + var(--safe-top)); background: #fff; border-radius: 0 0 calc(8 * var(--u)) calc(8 * var(--u)); }
.forex-action-card { position: absolute; left: calc(16 * var(--u)); top: calc(54 * var(--u) + var(--safe-top)); width: calc(343 * var(--u)); height: calc(140 * var(--u)); border-radius: calc(8 * var(--u)); overflow: hidden; background: #fff; box-shadow: 0 calc(3 * var(--u)) calc(12 * var(--u)) #0000000b; }
.forex-primary-actions { display: grid; grid-template-columns: repeat(3, 1fr); height: calc(104 * var(--u)); background: #62769f url('./assets/forex-service-background.png') center / 100% 100% no-repeat; }
.forex-primary-actions button { position: relative; color: #fff; }
.forex-primary-actions img { position: absolute; left: calc(42.667 * var(--u)); top: calc(27.667 * var(--u)); width: calc(29 * var(--u)); height: calc(29 * var(--u)); object-fit: contain; }
.forex-primary-actions button:nth-child(2) img { left: calc(43 * var(--u)); width: calc(28.667 * var(--u)); }
.forex-primary-actions button:nth-child(3) img { left: calc(44.667 * var(--u)); width: calc(26 * var(--u)); height: calc(29.333 * var(--u)); }
.forex-primary-actions span { position: absolute; left: 0; top: calc(69 * var(--u)); width: 100%; text-align: center; font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); white-space: nowrap; }
.forex-secondary-actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: calc(36 * var(--u)); }
.forex-secondary-actions::after { content: ''; position: absolute; left: 50%; top: calc(12 * var(--u)); width: calc(.8 * var(--u)); height: calc(14 * var(--u)); background: #e7e7e7; }
.forex-secondary-actions button { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); white-space: nowrap; }
.forex-secondary-actions img { width: calc(15.667 * var(--u)); height: calc(16 * var(--u)); object-fit: contain; }
.forex-secondary-actions button:nth-child(2) img { width: calc(16 * var(--u)); }
.forex-secondary-actions span { transform: translate(calc(-1.667 * var(--u)), calc(1 * var(--u))); }
.forex-notice { height: calc(62 * var(--u)); margin: 0; padding: calc(17 * var(--u)) calc(16 * var(--u)) 0; color: #666; font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); white-space: nowrap; }
.forex-rates { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 0 0; }
.forex-rate-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.forex-rate-scroll::-webkit-scrollbar { display: none; }
.forex-rate-scroll:focus-visible { outline: 2px solid var(--focus-red); outline-offset: -2px; }
.forex-list-end { height: calc(20.667 * var(--u)); }
.forex-updated { height: calc(43 * var(--u)); padding-right: calc(16 * var(--u)); display: flex; align-items: center; justify-content: flex-end; gap: calc(4 * var(--u)); color: #666; }
.forex-updated time { font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); white-space: nowrap; font-family: Arial, sans-serif; }
.forex-updated button { width: calc(16 * var(--u)); height: calc(22 * var(--u)); display: grid; place-items: center; color: #999; }
.forex-updated svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.6; }
.forex-table { width: 100%; border-spacing: 0; table-layout: fixed; text-align: left; }
.forex-currency-column { width: calc(149 * var(--u)); }
.forex-trend-column { width: calc(58 * var(--u)); }
.forex-sell-column { width: calc(79 * var(--u)); }
.forex-buy-column { width: calc(89 * var(--u)); }
.forex-table thead tr { height: calc(32 * var(--u)); }
.forex-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; padding: 0 0 calc(4 * var(--u)); border-bottom: calc(.333 * var(--u)) solid #eeeeee; font-size: calc(14 * var(--u)); line-height: calc(22 * var(--u)); font-weight: 400; white-space: nowrap; }
.forex-table thead th:first-child { padding-left: calc(16 * var(--u)); }
.forex-table thead th:nth-child(2), .forex-table thead th:nth-child(4) { padding-left: calc(1.667 * var(--u)); }
.forex-table tbody tr { height: calc(58 * var(--u)); }
.forex-table tbody th { position: relative; padding: 0; font-weight: 600; }
.forex-flag { position: absolute; left: calc(15.667 * var(--u)); top: calc(13.333 * var(--u)); width: calc(37 * var(--u)); height: calc(26.333 * var(--u)); object-fit: contain; }
.forex-currency-name, .forex-currency-code { position: absolute; left: calc(60 * var(--u)); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); white-space: nowrap; }
.forex-currency-name { top: calc(7 * var(--u)); }
.forex-currency-code { top: calc(25.667 * var(--u)); color: #999; font-family: Arial, sans-serif; font-weight: 400; }
.forex-table tbody td { position: relative; padding: 0; text-align: right; font: 700 calc(16 * var(--u))/calc(24 * var(--u)) Arial, sans-serif; font-variant-numeric: tabular-nums; }
.forex-table tbody td:nth-child(3), .forex-table tbody td:nth-child(4) { padding-bottom: calc(2.667 * var(--u)); }
.forex-table tbody td:nth-child(3) { padding-right: calc(7.67 * var(--u)); }
.forex-table tbody td:last-child { padding-right: calc(16 * var(--u)); }
.forex-trend { position: absolute; left: 0; top: calc(13.333 * var(--u)); width: calc(48 * var(--u)); height: calc(28 * var(--u)); object-fit: contain; }