/* Trading page — every rule is scoped to #pageTrading so nothing else on the site is affected */ #pageTrading .tr-off { text-align: center; color: #8D98A8; padding: 40px 10px; font-size: .9rem; } #pageTrading .tr-off i { font-size: 2rem; color: #F5B82E; display: block; margin-bottom: 10px; } #pageTrading .tr-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } #pageTrading .tr-bal small, #pageTrading .tr-price small { display: block; color: #8D98A8; font-size: .68rem; } #pageTrading .tr-bal b { color: #F5B82E; font-size: 1.15rem; } #pageTrading .tr-price { text-align: left; direction: ltr; } #pageTrading .tr-price b { font-size: 1.2rem; font-family: 'Courier New', monospace; color: #e6ecf8; transition: color .15s; } #pageTrading .tr-price b.up { color: #16C784; } #pageTrading .tr-price b.down { color: #EA3943; } #pageTrading #trSt { font-size: .65rem; } #pageTrading .tr-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 6px; } #pageTrading .tr-cats button { flex: none; background: transparent; border: 1px solid #1C2430; color: #8D98A8; border-radius: 20px; padding: 4px 12px; font-size: .72rem; font-weight: 700; cursor: pointer; } #pageTrading .tr-cats button.on { border-color: #F5B82E; color: #F5B82E; background: rgba(251,191,36,.08); } #pageTrading .tr-assets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; } #pageTrading .tr-assets:has(> :nth-child(5)) { display: flex; overflow-x: auto; scrollbar-width: none; } #pageTrading .tr-assets:has(> :nth-child(5)) button { flex: 0 0 auto; min-width: 104px; padding: 6px 8px; } #pageTrading .tr-assets button { background: rgba(0,0,0,.35); border: 1px solid #1C2430; color: #FFFFFF; border-radius: 10px; padding: 6px 2px; cursor: pointer; line-height: 1.3; } #pageTrading .tr-assets button b { display: block; font-size: .78rem; } #pageTrading .tr-assets button span { display: block; font-size: .62rem; font-family: 'Courier New', monospace; color: #8D98A8; direction: ltr; } #pageTrading .tr-assets button span.up { color: #16C784; } #pageTrading .tr-assets button span.down { color: #EA3943; } #pageTrading .tr-assets button.on { border-color: #F5B82E; background: rgba(251,191,36,.1); } #pageTrading .tr-assets button i.cnt { font-style: normal; background: #F5B82E; color: #000; border-radius: 8px; padding: 0 5px; font-size: .6rem; margin-inline-start: 3px; } #pageTrading .tr-tools { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; font-size: .72rem; color: #8D98A8; gap: 6px; flex-wrap: wrap; } #pageTrading .tr-seg { display: inline-flex; border: 1px solid #1C2430; border-radius: 8px; overflow: hidden; } #pageTrading .tr-seg button { background: transparent; border: 0; color: #8D98A8; padding: 4px 9px; cursor: pointer; font-size: .72rem; } #pageTrading .tr-seg button.on { background: rgba(251,191,36,.18); color: #F5B82E; } #pageTrading #trChart { direction: ltr; height: 300px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.25); } #pageTrading .tr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; } #pageTrading .tr-chips button { flex: 1; min-width: 46px; background: rgba(0,0,0,.35); border: 1px solid #1C2430; color: #FFFFFF; padding: 8px 0; border-radius: 10px; cursor: pointer; font-size: .8rem; } #pageTrading .tr-chips button.on { border-color: #F5B82E; color: #F5B82E; background: rgba(251,191,36,.1); } #pageTrading .tr-amt { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } #pageTrading .tr-amt input { flex: 1; background: rgba(0,0,0,.35); border: 1px solid #1C2430; color: #fff; padding: 10px; border-radius: 10px; font-size: 1rem; text-align: center; } #pageTrading .tr-amt span { color: #8D98A8; font-size: .72rem; white-space: nowrap; } #pageTrading .tr-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #pageTrading .tr-dir button { border: 0; border-radius: 12px; padding: 14px 0; font-size: 1rem; font-weight: 800; color: #fff; cursor: pointer; } #pageTrading .tr-dir .up { background: linear-gradient(135deg, #16a34a, #16C784); box-shadow: 0 6px 18px rgba(34,197,94,.3); } #pageTrading .tr-dir .down { background: linear-gradient(135deg, #dc2626, #EA3943); box-shadow: 0 6px 18px rgba(239,68,68,.3); } #pageTrading .tr-dir button:disabled { opacity: .45; cursor: not-allowed; } #pageTrading .tr-list h4 { margin: 14px 0 6px; font-size: .8rem; color: #F5B82E; } #pageTrading .tr-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; background: rgba(0,0,0,.3); border: 1px solid #232c45; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; font-size: .72rem; color: #e6ecf8; } #pageTrading .tr-row .d.up, #pageTrading .tr-row .now.win, #pageTrading .tr-row .res.won { color: #16C784; } #pageTrading .tr-row .d.down, #pageTrading .tr-row .now.lose, #pageTrading .tr-row .res.lost { color: #EA3943; } #pageTrading .tr-row .res { font-weight: 800; } #pageTrading .tr-row .res.tie, #pageTrading .tr-row .res.void { color: #8D98A8; font-weight: 600; } #pageTrading .tr-muted { color: #6b7690; font-size: .72rem; text-align: center; padding: 8px; } #pageTrading .tr-risk { position: fixed; inset: 0; z-index: 9999; background: rgba(4,6,12,.86); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; } #pageTrading .tr-risk-box { max-width: 380px; width: 100%; background: #101526; border: 1px solid rgba(251,191,36,.45); border-radius: 18px; padding: 22px 18px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); } #pageTrading .tr-risk-ic { font-size: 2rem; color: #F5B82E; margin-bottom: 6px; } #pageTrading .tr-risk-box h3 { color: #F5B82E; font-size: 1rem; margin-bottom: 10px; } #pageTrading .tr-risk-box p { color: #c5d0e6; font-size: .8rem; line-height: 1.7; margin-bottom: 8px; } #pageTrading .tr-risk-box p.sub { color: #8D98A8; } #pageTrading .tr-risk-box input { width: 100%; background: rgba(0,0,0,.4); border: 1px solid #1C2430; color: #fff; padding: 11px; border-radius: 10px; text-align: center; font-size: 1rem; margin: 6px 0 12px; } #pageTrading .tr-risk-box input.ok { border-color: #16C784; } #pageTrading .tr-risk-box button { width: 100%; border: 0; border-radius: 12px; padding: 12px; font-weight: 800; font-size: .95rem; color: #070B12; background: linear-gradient(135deg, #F5B82E, #D99A1F); cursor: pointer; } #pageTrading .tr-risk-box button:disabled { opacity: .35; cursor: not-allowed; } /* Desktop (≥1100px): شارت عريض + لوحة أوامر ثابتة جنبه، وسجل الصفقات تحتهم بعرض كامل */ @media (min-width: 1100px) { #pageTrading .tr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; } #pageTrading .tr-list { grid-column: 1 / -1; } #pageTrading .tr-order-panel { position: sticky; top: 20px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(245, 184, 46, .14); border-radius: 18px; padding: 6px 16px 16px; } #pageTrading #trChart { height: 440px; } #pageTrading .tr-head { margin-bottom: 12px; } #pageTrading .tr-bal b { font-size: 1.4rem; } #pageTrading .tr-price b { font-size: 1.45rem; } #pageTrading .tr-assets { gap: 10px; margin-bottom: 12px; } #pageTrading .tr-assets button { padding: 10px 4px; } #pageTrading .tr-assets button b { font-size: .9rem; } #pageTrading .tr-assets button span { font-size: .72rem; } #pageTrading .tr-dir { grid-template-columns: 1fr; } #pageTrading .tr-dir button { padding: 16px 0; font-size: 1.05rem; } #pageTrading .tr-row { font-size: .8rem; padding: 10px 14px; } #pageTrading .tr-list h4 { font-size: .9rem; } } /* Top tabs (الرئيسية/التعدين/التداول/الأسست/القائمة): compact so all five fit on ONE line on narrow phones. مقصورة على الموبايل فقط (<1100px) — بالكمبيوتر صارت .nav-tabs سايدبار عمودي (تعريفها بـ style.css) وهاي القاعدة بأقصى specificity كانت عم تكسرها لو ضلت بدون media query */ @media (max-width: 1099.98px) { .nav-tabs { flex-wrap: nowrap; gap: 3px; } .nav-tabs .nav-tab { flex: 1 1 0; min-width: 0; justify-content: center; padding: 7px 3px; font-size: .62rem; gap: 3px; white-space: nowrap; } .nav-tabs .nav-tab i { font-size: .72rem; } .nav-tabs .nav-tab span { overflow: hidden; text-overflow: ellipsis; } } /* ====================================================================== Broker-style Up/Down screen (2026-10): full chart + side panel. Background picture: upload an image named trade-bg.jpg next to index.html (public_html/trade-bg.jpg). If the file is missing, the dark colour below is used and nothing breaks. ====================================================================== */ .nav-tab-hidden { display: none !important; } /* the trading page uses the whole content area: no greeting header / ads / announcement above it */ #mainDashboard.on-trading .dashboard-header, #mainDashboard.on-trading .spot-hero, #mainDashboard.on-trading .announcement-banner { display: none !important; } #pageTrading .tp-card { padding: 0; background: transparent; border: 0; box-shadow: none; } #pageTrading .tp { display: flex; flex-direction: column; gap: 10px; } #pageTrading .tp-stage { position: relative; border-radius: 16px; overflow: hidden; padding: 10px 10px 4px; background: linear-gradient(180deg, rgba(10, 14, 26, .55), rgba(10, 14, 26, .78)), url('trade-bg.jpg') center / cover no-repeat, #121829; border: 1px solid rgba(255, 255, 255, .06); } #pageTrading .tp-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #pageTrading .tp-asset { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .45); color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 7px 12px; font-weight: 800; font-size: .85rem; cursor: pointer; } #pageTrading .tp-asset i { color: #8D98A8; } #pageTrading .tp-price { text-align: start; } #pageTrading .tp-price b { font-size: 1.05rem; } #pageTrading .tp-wallet { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; } #pageTrading .tp-bal { text-align: end; line-height: 1.15; } #pageTrading .tp-bal small { display: block; color: #8D98A8; font-size: .62rem; } #pageTrading .tp-bal b { color: #fff; font-size: 1rem; } #pageTrading .tp-topup { border: 0; border-radius: 10px; padding: 9px 12px; font-weight: 800; font-size: .78rem; color: #fff; cursor: pointer; white-space: nowrap; background: linear-gradient(135deg, #16a34a, #16C784); box-shadow: 0 4px 14px rgba(22, 199, 132, .3); } #pageTrading .tp-picker { position: absolute; z-index: 30; top: 52px; inset-inline-start: 10px; width: min(360px, calc(100% - 20px)); background: #101526; border: 1px solid rgba(251, 191, 36, .35); border-radius: 14px; padding: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6); } #pageTrading .tp-picker[hidden] { display: none; } #pageTrading .tp-picker-h { color: #F5B82E; font-weight: 800; font-size: .8rem; margin-bottom: 8px; } #pageTrading .tp-picker .tr-assets { display: grid !important; grid-template-columns: repeat(2, 1fr); max-height: 50vh; overflow-y: auto; margin: 0; } #pageTrading .tp-picker .tr-assets button { min-width: 0 !important; } #pageTrading .tp-tools { margin: 8px 0 6px; } #pageTrading .tp-tools .tr-seg { background: rgba(0, 0, 0, .35); } #pageTrading .tp-stage #trChart { background: transparent; border-radius: 10px; height: calc(var(--real-vh, 100vh) - 420px); min-height: 240px; max-height: 520px; } #pageTrading .tp-side { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #101526; border: 1px solid rgba(255, 255, 255, .06); border-radius: 16px; padding: 10px; } #pageTrading .tp-field label { display: block; color: #8D98A8; font-size: .66rem; margin-bottom: 4px; } #pageTrading .tp-field label small { color: #5f6b85; } #pageTrading .tp-box { display: flex; align-items: center; background: rgba(0, 0, 0, .4); border: 1px solid #232c45; border-radius: 10px; overflow: hidden; } #pageTrading .tp-box button { border: 0; background: transparent; color: #c5d0e6; width: 34px; height: 40px; font-size: 1.1rem; cursor: pointer; flex: none; } #pageTrading .tp-box button:active { background: rgba(255, 255, 255, .06); } #pageTrading .tp-box b, #pageTrading .tp-box input { flex: 1; min-width: 0; text-align: center; color: #fff; font-weight: 800; font-size: .95rem; background: transparent; border: 0; outline: none; cursor: pointer; } #pageTrading .tp-box input { cursor: text; -moz-appearance: textfield; font-size: 16px; } /* 16px: iPhone does not zoom into the field */ #pageTrading .tp-box input::-webkit-outer-spin-button, #pageTrading .tp-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #pageTrading .tp-side #trDurs, #pageTrading .tp-side .tp-quick, #pageTrading .tp-pay, #pageTrading .tp-dir, #pageTrading .tp-trades-btn { grid-column: 1 / -1; } #pageTrading .tp-side #trDurs[hidden] { display: none; } #pageTrading .tp-side .tr-chips { margin: 0; } #pageTrading .tp-side .tr-chips button { padding: 6px 0; font-size: .72rem; } #pageTrading .tp-pay { display: flex; align-items: baseline; justify-content: center; gap: 8px; background: rgba(22, 199, 132, .08); border: 1px solid rgba(22, 199, 132, .25); border-radius: 10px; padding: 6px; } #pageTrading .tp-pay span { color: #8D98A8; font-size: .68rem; } #pageTrading .tp-pay b { color: #16C784; font-size: 1.05rem; } #pageTrading .tp-pay small { color: #16C784; font-size: .75rem; } #pageTrading .tp-dir button { padding: 13px 0; font-size: 1rem; } #pageTrading .tp-trades-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: #c5d0e6; border: 1px dashed #2a3650; border-radius: 10px; padding: 8px; font-size: .78rem; cursor: pointer; } #pageTrading .tp-trades-btn em { font-style: normal; background: #F5B82E; color: #000; border-radius: 9px; padding: 0 6px; font-size: .68rem; font-weight: 800; } #pageTrading .tp-trades-btn em:empty { display: none; } #pageTrading .tp-drawer, #pageTrading .tp-modal { position: fixed; inset: 0; z-index: 9000; background: rgba(4, 6, 12, .7); display: flex; align-items: flex-end; justify-content: center; } #pageTrading .tp-drawer[hidden], #pageTrading .tp-modal[hidden] { display: none; } #pageTrading .tp-drawer-box, #pageTrading .tp-modal-box { width: 100%; max-width: 520px; max-height: 80vh; overflow-y: auto; background: #101526; border: 1px solid #232c45; border-radius: 18px 18px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); } #pageTrading .tp-modal { align-items: center; padding: 16px; } #pageTrading .tp-modal-box { border-radius: 18px; max-width: 400px; } #pageTrading .tp-drawer-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } #pageTrading .tp-drawer-h b { color: #F5B82E; } #pageTrading .tp-drawer-h button { border: 0; background: rgba(255, 255, 255, .06); color: #c5d0e6; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; } #pageTrading .tp-modal-sub { color: #8D98A8; font-size: .78rem; margin-bottom: 10px; } #pageTrading .tp-modal-bals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; } #pageTrading .tp-modal-bals div { background: rgba(0, 0, 0, .35); border-radius: 10px; padding: 8px; } #pageTrading .tp-modal-bals small { display: block; color: #8D98A8; font-size: .66rem; } #pageTrading .tp-modal-bals b { color: #fff; } #pageTrading .tp-modal-box .tp-box input { padding: 10px; } #pageTrading .tp-unit { color: #8D98A8; font-size: .72rem; padding: 0 10px; } #pageTrading .tp-modal-msg { min-height: 18px; font-size: .75rem; margin: 6px 0; } #pageTrading .tp-modal-msg.err { color: #EA3943; } #pageTrading .tp-modal-go { width: 100%; border: 0; border-radius: 12px; padding: 12px; font-weight: 800; color: #fff; cursor: pointer; background: linear-gradient(135deg, #16a34a, #16C784); } #pageTrading .tp-modal-go:disabled { opacity: .5; } #pageTrading .tp-modal-link { width: 100%; margin-top: 8px; border: 0; background: transparent; color: #F5B82E; font-size: .78rem; cursor: pointer; padding: 6px; } /* desktop: big chart with a fixed panel beside it (like broker platforms) */ @media (min-width: 1100px) { #pageTrading .tp { flex-direction: row; align-items: stretch; } #pageTrading .tp-stage { flex: 1; min-width: 0; } #pageTrading .tp-stage #trChart { height: calc(100vh - 260px); max-height: none; } #pageTrading .tp-side { width: 240px; flex: none; grid-template-columns: 1fr; align-content: start; position: static; } #pageTrading .tp-dir { grid-template-columns: 1fr; } #pageTrading .tp-dir button { padding: 18px 0; font-size: 1.05rem; } } /* "More" page quick links */ .more-links .more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .more-links .more-grid button { display: flex; align-items: center; gap: 10px; background: rgba(0, 0, 0, .3); border: 1px solid #1C2430; color: #e6ecf8; border-radius: 12px; padding: 12px; font-size: .8rem; cursor: pointer; text-align: start; } .more-links .more-grid button i { color: #F5B82E; width: 18px; text-align: center; } .more-links .more-grid button.danger, .more-links .more-grid button.danger i { color: #EA3943; } @media (min-width: 768px) { .more-links .more-grid { grid-template-columns: repeat(3, 1fr); } } /* phone: keep Up/Down visible without scrolling — fewer tool buttons (pinch-zoom still works on the chart), tighter panel */ @media (max-width: 1099.98px) { #pageTrading .tp-tools #trCtype, #pageTrading .tp-tools .tr-seg:last-child { display: none; } #pageTrading .tp-tools { margin: 6px 0 4px; } #pageTrading .tp-side .tp-quick { display: none; } #pageTrading .tp-side { gap: 6px; padding: 8px; } #pageTrading .tp-box button { height: 36px; } #pageTrading .tp-pay { padding: 4px; } #pageTrading .tp-dir button { padding: 12px 0; } #pageTrading .tp-trades-btn { padding: 6px; } } /* iPhone fix: #mainDashboard scrolls vertically (overflow-y:auto), and the browser then also made it scroll sideways (overflow-x:auto). Safari let users drag the whole page left/right and parts of it were cut off. Sideways page scrolling is off; vertical scrolling is unchanged. (No touch-action here on purpose: the chart still gets its own pinch / sideways drag.) */ #mainDashboard { overflow-x: hidden; overscroll-behavior-x: none; } html, body { overflow-x: hidden; } .dashboard-content-col { min-width: 0; max-width: 100%; } /* brand wordmark (design 44): small BITCOIN on top, big "M FARM" below with a gold M — Oswald font. Used next to the logo in: the phone top bar, the computer sidebar, the login screen and the sign-up details screen. */ .bm-word { display: inline-flex !important; flex-direction: column; align-items: flex-end; direction: ltr; line-height: 1 !important; background: none !important; text-shadow: none !important; letter-spacing: 0 !important; white-space: nowrap; } .bm-word .bm-top { font: 600 9px/1 "Oswald", "Bebas Neue", sans-serif; letter-spacing: 4px; margin-right: -4px; margin-bottom: 2px; color: #8D98A8 !important; -webkit-text-fill-color: #8D98A8 !important; } .bm-word .bm-main { font: 700 20px/1 "Oswald", "Bebas Neue", sans-serif; letter-spacing: 2px; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .bm-word .bm-m { color: #F5B82E !important; -webkit-text-fill-color: #F5B82E !important; } .sidebar-brand-text .bm-word .bm-top { font-size: 10px; } .sidebar-brand-text .bm-word .bm-main { font-size: 24px; } .bfa-brand .bm-word .bm-main { font-size: 22px; } /* ---------- broker-style chart overlay (trading-po.js) ---------- */ #pageTrading .po-ov { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; direction: ltr; } #pageTrading .po-live { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; line-height: 1.15; will-change: transform; } #pageTrading .po-live b { font-size: 10px; font-weight: 700; color: #c9d3e6; } #pageTrading .po-live small { font-size: 10px; color: #8a96ad; font-variant-numeric: tabular-nums; } #pageTrading .po-exp { position: absolute; top: 0; bottom: 26px; left: 0; width: 0; border-left: 1px dashed rgba(220,228,245,.45); will-change: transform; } #pageTrading .po-exp i { position: absolute; top: 6px; left: -5px; color: #e9eef8; font-size: 11px; } #pageTrading .po-exp small, #pageTrading .po-exp b { position: absolute; left: 6px; white-space: nowrap; font-size: 9.5px; color: #a3aec4; } #pageTrading .po-exp small { top: 6px; } #pageTrading .po-exp b { top: 19px; font-weight: 500; color: #7d8aa6; font-variant-numeric: tabular-nums; } #pageTrading .po-exp.far { border-left-color: transparent; } #pageTrading .po-exp.far i { display: none; } /* open trade: dot at the exact entry point → line → countdown tag */ #pageTrading .po-trade { position: absolute; top: 0; left: 0; height: 0; will-change: transform; } #pageTrading .po-trade .dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; } #pageTrading .po-trade .seg { position: absolute; left: 0; top: -1px; height: 2px; } #pageTrading .po-trade .tag { position: absolute; left: 8px; top: -24px; white-space: nowrap; font-size: 10.5px; font-weight: 700; color: #fff; padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; } #pageTrading .po-trade.up .dot, #pageTrading .po-trade.up .seg, #pageTrading .po-trade.up .tag { background: #3db54a; } #pageTrading .po-trade.down .dot, #pageTrading .po-trade.down .seg, #pageTrading .po-trade.down .tag { background: #f2483c; } #pageTrading .po-trade .end { position: absolute; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; animation: poGlow 1.1s ease-in-out infinite; } #pageTrading .po-trade.up .end { box-shadow: 0 0 0 3px rgba(61,181,74,.55), 0 0 14px 4px rgba(61,181,74,.9); } #pageTrading .po-trade.down .end { box-shadow: 0 0 0 3px rgba(242,72,60,.55), 0 0 14px 4px rgba(242,72,60,.9); } @keyframes poGlow { 0%, 100% { transform: scale(.85); opacity: .85; } 50% { transform: scale(1.25); opacity: 1; } } /* ---------- Up / Down: big, clear buttons (2026-10) ---------- */ #pageTrading .tp-dir { gap: 10px; } #pageTrading .tp-dir button { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; padding: 16px 0; font-size: 1.15rem; font-weight: 900; letter-spacing: .3px; border-radius: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: transform .08s, filter .15s, box-shadow .15s; } #pageTrading .tp-dir button i { font-size: 1.25rem; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .22); } #pageTrading .tp-dir button small { font-size: .72rem; font-weight: 800; background: rgba(0, 0, 0, .22); border-radius: 8px; padding: 2px 6px; } #pageTrading .tp-dir button small:empty { display: none; } #pageTrading .tp-dir .up { background: linear-gradient(180deg, #22d68f, #0f9d58); border: 2px solid #4ef0a8; box-shadow: 0 6px 22px rgba(22, 199, 132, .45); } #pageTrading .tp-dir .down { background: linear-gradient(180deg, #ff5a5f, #c81e2b); border: 2px solid #ff8a8f; box-shadow: 0 6px 22px rgba(234, 57, 67, .45); } #pageTrading .tp-dir button:not(:disabled):hover { filter: brightness(1.08); } #pageTrading .tp-dir button:not(:disabled):active { transform: scale(.96); } #pageTrading .tp-dir button:disabled { opacity: .5; } @media (min-width: 1100px) { #pageTrading .tp-dir button { padding: 20px 0; font-size: 1.25rem; } } /* ---------- phone: chart + order panel on ONE screen ---------- The order panel sticks just above the bottom tab bar (--tr-nav-h is set by trading.js), so Up/Down are always reachable while the chart (with the entry point) stays visible above it — no scrolling down and back up. */ @media (max-width: 1099.98px) { #pageTrading .tp { gap: 6px; } #pageTrading .tp-stage { padding: 8px 8px 2px; } #pageTrading .tp-side { position: sticky; bottom: calc(var(--tr-nav-h, 64px) + 4px); z-index: 25; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px; background: rgba(16, 21, 38, .97); box-shadow: 0 -8px 24px rgba(0, 0, 0, .45); } #pageTrading .tp-field label { font-size: .62rem; margin-bottom: 2px; } #pageTrading .tp-box button { height: 34px; width: 32px; } #pageTrading .tp-pay { display: none; } /* the payout % is shown on the Up/Down buttons */ #pageTrading .tp-dir { gap: 8px; } #pageTrading .tp-dir button { padding: 13px 0; font-size: 1.1rem; } #pageTrading .tp-trades-btn { padding: 5px; font-size: .72rem; } } /* ---------- full-screen chart button + mode (phone + computer, 2026-10) ---------- */ #pageTrading .tp-tools { position: relative; } #pageTrading .tp-full-btn { margin-inline-start: auto; width: 34px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); color: #e6ecf8; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; cursor: pointer; font-size: .85rem; } #pageTrading .tp-full-btn:active { transform: scale(.94); } @media (max-width: 1099.98px) { /* the full-screen button is now the last item in the tools row, so hide the zoom group by position */ #pageTrading .tp-tools .tr-seg:nth-child(3) { display: none; } } #pageTrading .tp.tp-full { position: fixed; inset: 0; z-index: 9500; margin: 0; gap: 6px; background: #0b0f1a; padding: calc(6px + env(safe-area-inset-top)) calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)); display: flex; flex-direction: column; } #pageTrading .tp.tp-full .tp-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } #pageTrading .tp.tp-full .tp-stage #trChart { flex: 1 1 auto; height: auto !important; min-height: 0; max-height: none; } #pageTrading .tp.tp-full .tp-tools .tr-seg:nth-child(3) { display: inline-flex; } /* zoom buttons are useful on the big chart */ #pageTrading .tp.tp-full .tp-full-btn { background: rgba(245, 184, 46, .18); border-color: #F5B82E; color: #F5B82E; } #pageTrading .tp.tp-full .tp-side { position: static; flex: none; box-shadow: none; } /* the trades list / top-up window must open above the full-screen chart */ body.tr-full-on #pageTrading .tp-drawer, body.tr-full-on #pageTrading .tp-modal { z-index: 9600; } body.tr-full-on .nav-tabs { visibility: hidden; } @media (min-width: 1100px) { #pageTrading .tp.tp-full { flex-direction: row; padding: 12px; gap: 12px; } #pageTrading .tp.tp-full .tp-side { width: 260px; align-self: stretch; align-content: center; } } @media (max-width: 1099.98px) and (orientation: landscape) { /* phone turned sideways in full screen: chart on one side, buttons on the other */ #pageTrading .tp.tp-full { flex-direction: row; } #pageTrading .tp.tp-full .tp-side { width: 210px; grid-template-columns: 1fr; align-content: center; overflow-y: auto; } } /* ---------- smaller glowing dot at the end of an open trade ---------- */ #pageTrading .po-trade .end { top: -4px; width: 8px; height: 8px; margin-left: -4px; } #pageTrading .po-trade.up .end { box-shadow: 0 0 0 2px rgba(61,181,74,.5), 0 0 7px 2px rgba(61,181,74,.8); } #pageTrading .po-trade.down .end { box-shadow: 0 0 0 2px rgba(242,72,60,.5), 0 0 7px 2px rgba(242,72,60,.8); } #pageTrading .po-trade .dot { left: -4px; top: -4px; width: 8px; height: 8px; } @keyframes poGlow { 0%, 100% { transform: scale(.85); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }