:root { --term-bg: #0b0e11; --term-surface: #161a1e; --term-border: #2b3139; --term-text: #eaecef; --term-muted: #848e9c; --term-primary: #0062ff; --term-success: #26a69a; --term-danger: #ef5350; --header-height: 70px; --sidebar-width: 280px; --orderbook-width: 300px; } /* Global Terminal Layout */ .terminal-container { display: flex; flex-direction: column; min-height: calc(100vh - 70px); background: var(--term-bg); color: var(--term-text); } .terminal-main { display: flex; flex: 1; height: 1300px; /* Precise height for perfect alignment */ min-height: 1300px; } /* Sidebar & Coin List */ .terminal-sidebar { width: var(--sidebar-width); border-right: 1px solid var(--term-border); display: flex; flex-direction: column; background: var(--term-surface); height: 1300px; overflow: hidden; } .sidebar-tabs { flex: 0 0 55px; display: flex; padding: 6px; gap: 6px; border-bottom: 1px solid var(--term-border); background: #1e2329; } .sidebar-tabs .terminal-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 10px; color: var(--term-muted); text-decoration: none; font-weight: 600; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #0b0e11; border: 1px solid var(--term-border); gap: 2px; } .sidebar-tabs .terminal-tab i { font-size: 14px; } .sidebar-search { flex: 0 0 60px; padding: 10px 12px; border-bottom: 1px solid var(--term-border); display: flex; align-items: center; } .coin-list-container { flex: 1; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; } .coin-list { display: flex; flex-direction: column; } .coin-list-container::-webkit-scrollbar { display: none; } .coin-row { height: 60px; flex: 0 0 60px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.02); } .sidebar-tabs .terminal-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--term-muted); text-decoration: none; font-weight: 600; border-radius: 12px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); background: #0b0e11; border: 1px solid var(--term-border); gap: 4px; } .sidebar-tabs .terminal-tab i { font-size: 18px; } .sidebar-tabs .terminal-tab:hover { color: #fff; background: #2b3139; border-color: #474d57; } .sidebar-tabs .terminal-tab.active { background: linear-gradient(135deg, #0062ff, #00d2ff); color: #fff; box-shadow: 0 4px 15px rgba(0, 98, 255, 0.4); border-color: rgba(255,255,255,0.2); transform: scale(1.02); } .sidebar-tabs .terminal-tab i { font-size: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); } .sidebar-tabs .terminal-tab span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; } /* Custom Alert - Premium Style */ .custom-alert { position: fixed; top: 30px; right: 30px; left: auto; transform: translateX(400px); z-index: 10000; background: rgba(30, 35, 41, 0.95); backdrop-filter: blur(15px); border: 1px solid var(--term-border); padding: 20px 30px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; min-width: 320px; } .custom-alert.show { transform: translateX(0); opacity: 1; } .custom-alert.error { border-right: 5px solid var(--term-danger); background: linear-gradient(90deg, rgba(30,35,41,0.95) 0%, rgba(239,83,80,0.05) 100%); } .custom-alert.warning { border-right: 5px solid #f0b90b; background: linear-gradient(90deg, rgba(30,35,41,0.95) 0%, rgba(240,185,11,0.05) 100%); } .custom-alert.info { border-right: 5px solid var(--term-primary); background: linear-gradient(90deg, rgba(30,35,41,0.95) 0%, rgba(0,98,255,0.05) 100%); } .custom-alert i { font-size: 28px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); } .sidebar-search { padding: 10px 12px; border-bottom: 1px solid var(--term-border); height: 60px; display: flex; align-items: center; } .sidebar-search input { background: #0b0e11; border: 1px solid var(--term-border); color: #fff; width: 100%; height: 38px; padding: 0 12px; border-radius: 4px; font-size: 12px; outline: none; } .coin-list-container { flex: 1; overflow-y: auto; scrollbar-width: none; } .coin-list-container::-webkit-scrollbar { display: none; } .coin-row { height: 60px; /* Adjusted for better fit */ padding: 0 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.02); } /* Center Content */ .terminal-content { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--term-border); background: var(--term-bg); height: 1300px; } .terminal-header { height: 80px; border-bottom: 1px solid var(--term-border); display: flex; align-items: center; padding: 0 24px; gap: 40px; background: #161a1e; z-index: 10; } .header-stats { display: flex; gap: 30px; align-items: center; } .header-stat { display: flex; flex-direction: column; justify-content: center; } .header-stat label { font-size: 11px; color: var(--term-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.5px; } .header-stat span { font-size: 14px; font-weight: 700; } .trading-panels { height: 420px; padding: 15px 15px; background: #1e2329; border-bottom: 1px solid var(--term-border); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .cycle-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 10px; } .cycle-btn { background: #0b0e11; border: 1px solid var(--term-border); border-radius: 8px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.2s; height: 54px; } .cycle-btn .cycle-time { font-size: 13px; font-weight: 700; color: #fff; } .cycle-btn .cycle-profit { font-size: 11px; color: var(--term-success); } .cycle-btn.active { background: var(--term-primary); border-color: var(--term-primary); box-shadow: 0 4px 10px rgba(0, 98, 255, 0.3); } .cycle-btn.active .cycle-time, .cycle-btn.active .cycle-profit { color: #fff; } .amount-input-wrapper { position: relative; margin-bottom: 12px; } .amount-input-wrapper .form-control { background: #0b0e11 !important; border: 1px solid #2b3139 !important; color: #fff !important; height: 48px; font-size: 16px; padding-left: 15px; } .btn-buy-sell { height: 52px; border-radius: 10px; font-size: 15px; font-weight: 700; transition: all 0.2s; } .btn-buy-sell:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.4); } .order-form-container .btn { height: 48px; border-radius: 8px; } .input-wrapper { background: #0b0e11 !important; border: 1px solid #2b3139 !important; padding: 8px 12px; } .order-form-tabs .btn { height: 32px !important; font-size: 12px; border-radius: 6px !important; } .binary-order-panel, .order-form-container { width: 100%; max-width: none; margin: 0; } .section-title { font-weight: 700; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--term-muted); } .cycle-btn { background: #0b0e11; border: 1px solid var(--term-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .cycle-btn:hover { border-color: var(--term-primary); background: #1e2329; } .amount-input-wrapper .form-control { background: #0b0e11 !important; border: 1px solid var(--term-border) !important; color: #fff !important; height: 50px; font-size: 18px; font-weight: 700; border-radius: 10px; } .quick-amounts .btn { background: #1e2329; border: 1px solid var(--term-border); font-weight: 600; transition: all 0.2s; } .quick-amounts .btn:hover { background: var(--term-primary); border-color: var(--term-primary); } .btn-buy-sell { height: 60px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); } .btn-buy-sell.btn-success { background: linear-gradient(135deg, #0ecb81, #26a69a); border: none; } .btn-buy-sell.btn-danger { background: linear-gradient(135deg, #f6465d, #ef5350); border: none; } .input-wrapper { background: #0b0e11 !important; border: 1px solid var(--term-border) !important; transition: border-color 0.3s; } .input-wrapper:focus-within { border-color: var(--term-primary) !important; } .coin-list-container::-webkit-scrollbar { display: none; } .coin-row { height: 65.5px; /* Exactly 18 coins visible in 1180px */ padding: 0 15px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.02); } .coin-row:hover { background: rgba(255,255,255,0.05); } .coin-row .symbol { font-weight: 600; font-size: 13px; } .coin-row .price { font-size: 13px; font-weight: 500; } /* Center Content */ .terminal-content { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--term-border); background: var(--term-bg); height: 1300px; } .terminal-chart { height: 550px !important; background: #000; position: relative; border-bottom: 1px solid var(--term-border); } .kline-container { height: 600px; background: #000; position: relative; border-bottom: 1px solid var(--term-border); } .order-history { height: 320px; background: var(--term-surface); overflow-y: auto; } /* Order Book (Right Sidebar) */ .terminal-right-sidebar { width: var(--orderbook-width); background: var(--term-surface); height: 1300px; } .order-book { display: flex; flex-direction: column; height: 1300px; background: #0b0e11; } .ob-header { display: flex; justify-content: space-between; padding: 0 15px; height: 40px; align-items: center; font-size: 11px; color: var(--term-muted); border-bottom: 1px solid var(--term-border); } .ob-list { height: 600px; /* 20 rows * 30px */ display: flex; flex-direction: column; overflow: hidden; } .ob-row { display: flex; justify-content: space-between; padding: 0 15px; height: 30px; font-size: 12px; line-height: 30px; position: relative; cursor: pointer; } .ob-row:hover { background: rgba(255,255,255,0.05); } .ob-mid-price { padding: 0 15px; background: rgba(0,0,0,0.3); border-top: 1px solid var(--term-border); border-bottom: 1px solid var(--term-border); height: 60px; display: flex; flex-direction: column; justify-content: center; } .ob-mid-price .val { font-size: 18px; font-weight: 700; } .ob-row-bg { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.1; } .asks .price { color: var(--term-danger); } .bids .price { color: var(--term-success); } .asks .ob-row-bg { background: var(--term-danger); } .bids .ob-row-bg { background: var(--term-success); } .ob-row .price, .ob-row .amount { z-index: 2; } /* Binary Panel Grid */ .cycle-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 15px; } .cycle-btn { background: #1e2329; border: 1px solid var(--term-border); color: var(--term-muted); padding: 8px 2px; font-size: 11px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; cursor: pointer; } .cycle-btn.active { background: var(--term-primary); color: #fff; border-color: var(--term-primary); } .btn-buy-sell { height: 55px; font-weight: bold; font-size: 16px; border-radius: 8px; } /* Mobile Adjustments */ /* Error Modal Premium */ .error-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 11000; opacity: 0; transition: opacity 0.3s ease; } .error-modal-overlay.show { opacity: 1; } .error-modal { background: #1e2329; width: 380px; padding: 40px 30px; border-radius: 24px; text-align: center; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 30px 60px rgba(0,0,0,0.5); transform: translateY(20px); transition: transform 0.3s ease; } .error-modal-overlay.show .error-modal { transform: translateY(0); } .error-modal-icon { font-size: 60px; color: var(--term-danger); margin-bottom: 20px; filter: drop-shadow(0 0 15px rgba(239,83,80,0.3)); } .error-modal h4 { color: #fff; font-weight: 800; margin-bottom: 15px; letter-spacing: 1px; } .error-modal p { color: var(--term-muted); margin-bottom: 30px; font-size: 15px; line-height: 1.6; } @media (max-width: 768px) { .terminal-main { flex-direction: column; height: auto; min-height: auto; padding-bottom: 100px; } .terminal-sidebar { position: fixed; left: -100%; top: 0; width: 80%; height: 100%; z-index: 1050; transition: left 0.3s; } .terminal-sidebar.active { left: 0; } .terminal-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1040; display: none; } .terminal-sidebar-overlay.active { display: block; } .terminal-right-sidebar { display: none; } .kline-container { min-height: 400px; height: 400px; } .cycle-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } /* Mobile Switcher Module */ .mobile-type-switcher { padding: 8px 15px; background: #0b0e11; border-bottom: 1px solid var(--term-border); } .switcher-module { display: flex; background: #161a1e; padding: 3px; border-radius: 10px; gap: 3px; } .switcher-item { flex: 1; text-align: center; padding: 8px 5px; border-radius: 8px; text-decoration: none; color: var(--term-muted); font-size: 12px; font-weight: 700; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .switcher-item.active { background: linear-gradient(135deg, #0062ff, #00d2ff); color: #fff; box-shadow: 0 4px 10px rgba(0, 98, 255, 0.3); } /* Overall Mobile Tidiness */ .terminal-header { height: 60px; padding: 0 15px; gap: 15px; } .terminal-header .fs-4 { font-size: 14px !important; } .price-jump.fs-4 { font-size: 16px !important; } .terminal-chart { height: 350px !important; } .trading-panels { padding: 12px; background: #0b0e11; border-top: 1px solid var(--term-border); height: auto; min-height: auto; } .binary-order-panel .btn-buy-sell { height: 60px; font-size: 16px; border-radius: 15px; margin-top: 5px; } .cycle-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .cycle-btn { min-height: 50px; border-radius: 12px; } .cycle-btn .cycle-time { font-size: 14px; } .amount-input-wrapper .form-control { height: 50px; font-size: 20px; text-align: center; border-radius: 15px; } .quick-amounts .btn { height: 40px; font-size: 12px; border-radius: 10px; } .order-form-container .btn { height: 55px; border-radius: 15px; font-size: 16px; } .input-wrapper { border-radius: 12px !important; height: 50px !important; } /* Mobile Chart Toolbar */ .mobile-chart-toolbar { background: #161a1e; border-bottom: 1px solid var(--term-border); display: flex; flex-direction: column; } .toolbar-scroll { display: flex; overflow-x: auto; padding: 8px 10px; gap: 8px; scrollbar-width: none; } .toolbar-scroll::-webkit-scrollbar { display: none; } .toolbar-item { background: transparent; border: none; color: var(--term-muted); font-size: 12px; font-weight: 600; white-space: nowrap; padding: 4px 8px; border-radius: 4px; } .toolbar-item.active { color: #fff; background: rgba(255,255,255,0.1); } .toolbar-divider { width: 1px; height: 15px; background: var(--term-border); align-self: center; } .toolbar-tabs { display: flex; border-top: 1px solid var(--term-border); } .tab-item { flex: 1; background: transparent; border: none; color: var(--term-muted); font-size: 13px; font-weight: 700; padding: 10px; border-bottom: 2px solid transparent; } .tab-item.active { color: var(--term-primary); border-bottom-color: var(--term-primary); background: rgba(0, 98, 255, 0.05); } } /* Popup */ .order-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; align-items: center; justify-content: center; z-index: 9999; } .order-popup { background: rgba(30, 35, 41, 0.95); width: 420px; padding: 40px; border-radius: 36px; text-align: center; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 40px 100px rgba(0,0,0,0.9); position: relative; overflow: hidden; backdrop-filter: blur(25px); } .order-popup::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, #0062ff, #00d2ff, #0062ff); background-size: 200% 100%; animation: gradientMove 3s linear infinite; z-index: 10; } @keyframes gradientMove { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .order-popup h5 { color: #fff; font-weight: 800; margin-bottom: 35px; font-size: 22px; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.9; } .countdown-circle { position: relative; width: 200px; height: 200px; margin: 0 auto 35px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(0, 98, 255, 0.1) 0%, rgba(0,0,0,0) 70%); border-radius: 50%; z-index: 1; } .countdown-circle svg { position: absolute; top: 0; left: 0; width: 200px; height: 200px; transform: rotate(-90deg); } .countdown-circle circle { fill: none; stroke-width: 10; } .countdown-circle .bg { stroke: rgba(255,255,255,0.05); } .countdown-circle .progress { stroke: #0062ff; transition: stroke-dashoffset 1s linear; stroke-linecap: round; filter: drop-shadow(0 0 15px rgba(0, 98, 255, 0.8)); } .countdown-circle .time-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 72px; font-weight: 900; color: #fff; font-family: 'Inter', sans-serif; letter-spacing: -2px; z-index: 2; text-shadow: 0 0 30px rgba(0,0,0,0.8); line-height: 1; margin: 0; padding: 0; } .popup-details { background: rgba(0,0,0,0.2); border-radius: 16px; padding: 15px; margin-bottom: 20px; } .popup-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; } .popup-row:last-child { margin-bottom: 0; } .popup-row .label { color: #848e9c; } .popup-row .value { color: #fff; font-weight: 600; } .popup-footer { font-size: 12px; color: #848e9c; } /* Order Result Premium Styling */ .order-result-display { padding: 10px 0; } .result-icon-wrapper { position: relative; width: 140px; height: 140px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .result-circle { width: 100px; height: 100px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 50px; color: #fff; z-index: 2; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .result-circle.won { background: linear-gradient(135deg, #0ecb81, #26a69a); } .result-circle.lost { background: linear-gradient(135deg, #f6465d, #ef5350); } .result-glow { position: absolute; width: 140px; height: 140px; border-radius: 50%; z-index: 1; filter: blur(20px); opacity: 0.6; animation: resultGlowPulse 2s infinite alternate; } .result-glow.won { background: rgba(14, 203, 129, 0.8); } .result-glow.lost { background: rgba(246, 70, 93, 0.8); } @keyframes resultGlowPulse { from { transform: scale(0.9); opacity: 0.4; } to { transform: scale(1.1); opacity: 0.8; } } .result-title { font-size: 28px; font-weight: 900; text-shadow: 0 0 20px rgba(255,255,255,0.1); } .result-message { font-size: 18px; color: #fff; opacity: 0.9; font-weight: 500; } .result-card { background: rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.08); } .result-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; } .result-row.total { margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 18px; font-weight: 700; } .result-row .label { color: rgba(255,255,255,0.5); } .result-row .value { color: #fff; } .btn-result-confirm { height: 60px; border-radius: 30px; background: linear-gradient(90deg, #0062ff, #00d2ff); border: none; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: 2px; box-shadow: 0 10px 30px rgba(0, 98, 255, 0.4); transition: all 0.3s; } .btn-result-confirm:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0, 98, 255, 0.6); color: #fff; }