...

2) Top wins (center top) container:

...

If your HTML currently uses .notifs for toasts вЂ” rename it to .toasts (1 СЃС‚СЂРѕРєР°). ====================================================================== */ /* ---- Toasts (right) ---- */ .toasts{ position: fixed; top: 90px; right: 20px; display:flex; flex-direction:column; gap: 12px; z-index: 120000; pointer-events:none; } .toast{ min-width: 260px; max-width: 420px; padding: 14px 20px; border-radius: 18px; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: linear-gradient( 135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02) ); border: 1px solid rgba(255,255,255,0.08); font-weight: 600; font-size: 14px; letter-spacing: .3px; box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); animation: toastIn .25s ease; pointer-events: auto; cursor: pointer; } .toast.success{ color: rgba(120,255,190,.95); border-color: rgba(120,255,190,.25); box-shadow: 0 10px 50px rgba(120,255,190,.15), 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); } .toast.error{ color: rgba(255,120,150,.95); border-color: rgba(255,95,125,.25); box-shadow: 0 10px 50px rgba(255,95,125,.15), 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); } .toast.info{ color: rgba(210,170,255,.95); border-color: rgba(200,140,255,.25); box-shadow: 0 10px 50px rgba(200,140,255,.15), 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); } @keyframes toastIn{ from{ opacity:0; transform: translateY(-8px) scale(.96); } to { opacity:1; transform: translateY(0px) scale(1); } } @keyframes toastOut{ from{ opacity:1; transform: translateY(0px) scale(1); } to { opacity:0; transform: translateY(-8px) scale(.96); } } /* ---- Top wins (center) ---- */ .topNotifs{ position: fixed; top: 24px; left: 50%; transform: translateX(-50%); display:flex; flex-direction:column; align-items:center; gap: 12px; z-index: 60000; pointer-events:none; } .notif{ pointer-events:none; position: relative; display:inline-flex; align-items:center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: radial-gradient(120% 140% at 18% 22%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.07) 42%, rgba(255,255,255,0.03) 100%), linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 18px 48px rgba(0,0,0,0.42), 0 2px 0 rgba(255,255,255,0.08) inset, 0 -12px 26px rgba(0,0,0,0.22) inset, 0 0 26px rgba(255,125,187,0.10); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); color: rgba(255,255,255,0.92); font-family: var(--font); font-weight: 900; font-size: 14px; letter-spacing: 0.25px; opacity: 0; transform: translateY(-12px) scale(0.965); will-change: transform, opacity, filter; animation: notifIn 420ms cubic-bezier(.2,.9,.2,1) forwards; } .notif::before{ content:""; position:absolute; inset: 1px; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 18%, rgba(255,255,255,0.00) 58%); opacity: 0.95; pointer-events:none; mix-blend-mode: screen; } .notif::after{ content:""; position:absolute; inset:-30% -20%; border-radius: inherit; background: linear-gradient(110deg, rgba(255,255,255,0.00) 36%, rgba(255,255,255,0.22) 46%, rgba(255,255,255,0.00) 56%); transform: translateX(-40%) rotate(6deg); opacity: 0; pointer-events:none; animation: notifSheen 1.15s cubic-bezier(.2,.8,.2,1) 140ms forwards; } .notif .orb{ width: 10px; height: 10px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.0) 55%), radial-gradient(circle at 60% 70%, rgba(120,255,190,0.95), rgba(120,255,190,0.0) 68%); box-shadow: 0 0 0 1px rgba(255,255,255,0.22), 0 10px 22px rgba(0,0,0,0.30); flex: 0 0 auto; } .notif .amt{ color: rgba(120,255,190,0.96); text-shadow: 0 10px 28px rgba(120,255,190,0.18); } .notif.out{ animation: notifOut 260ms cubic-bezier(.2,.8,.2,1) forwards; } @keyframes notifIn{ 0% { opacity: 0; transform: translateY(-12px) scale(0.965); filter: blur(2px); } 60% { opacity: 1; transform: translateY(0px) scale(1.02); filter: blur(0px); } 100% { opacity: 1; transform: translateY(0px) scale(1.00); } } @keyframes notifOut{ to { opacity: 0; transform: translateY(-8px) scale(0.985); filter: blur(1.5px); } } @keyframes notifSheen{ 0% { opacity: 0; transform: translateX(-42%) rotate(6deg); } 25% { opacity: 0.55; } 100% { opacity: 0; transform: translateX(48%) rotate(6deg); } } /* ====================================================================== BRAND (bottom-left) + signature (bottom-right) ====================================================================== */ .brandPill{ position: fixed; left: 18px; bottom: 18px; z-index: 3500; display:flex; align-items:center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.10); user-select:none; margin:0; } .brandLogo{ width: 34px; height: 34px; border-radius: 12px; position: relative; overflow: hidden; display:grid; place-items:center; background: radial-gradient(circle at 35% 30%, rgba(255,125,187,0.95), rgba(200,120,255,0.70) 55%, rgba(120,60,255,0.85) 100%); box-shadow: 0 12px 24px rgba(120,60,255,0.22), inset 0 1px 0 rgba(255,255,255,0.25); } .brandLogo::after{ content:""; position:absolute; inset:-40%; background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.22), rgba(255,255,255,0)); transform: translateX(-30%) rotate(10deg); animation: brandShine 3.8s ease-in-out infinite; opacity: 0.9; } @keyframes brandShine{ 0% { transform: translateX(-60%) rotate(10deg); } 55% { transform: translateX(80%) rotate(10deg); } 100% { transform: translateX(80%) rotate(10deg); } } .brandMark{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .brandMarkLine{ fill:none; stroke: rgba(255,255,255,0.92); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; filter: drop-shadow(0 0 10px rgba(255,125,187,0.35)); animation: brandLineDraw 3.8s ease-in-out infinite; } .brandMarkDot{ fill: rgba(255,255,255,0.95); filter: drop-shadow(0 0 10px rgba(255,125,187,0.45)) drop-shadow(0 0 18px rgba(120,60,255,0.25)); transform-origin: 48px 18px; animation: brandDotPulse 3.8s ease-in-out infinite; } @keyframes brandLineDraw{ 0% { stroke-dashoffset: 140; opacity: 0; } 10% { opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -140; opacity: 0; } } @keyframes brandDotPulse{ 0% { transform: scale(0.85); opacity: 0; } 18% { opacity: 1; } 55% { transform: scale(1.12); opacity: 1; } 62% { transform: scale(0.98); } 78% { transform: scale(1.06); } 100% { transform: scale(0.85); opacity: 0; } } .brandText{ display:flex; flex-direction:column; line-height:1.05; } .brandName{ font-weight: 900; font-size: 14px; letter-spacing: 0.2px; color: rgba(255,255,255,0.92); } .brandTag{ margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.55); } .cornerSignature{ position: fixed; right: 18px; bottom: 18px; z-index: 10; padding: 8px 14px; border-radius: 16px; font-size: 12px; letter-spacing: 0.3px; font-weight: 500; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); pointer-events:none; user-select:none; } /* ====================================================================== PANEL PAGES (sidebar layout) Apply: ... ====================================================================== */ body.panelPage{ margin:0; font-family: var(--font); letter-spacing: 0.4px; color: var(--text); background: radial-gradient(1200px 700px at 15% 10%, rgba(181,107,255,.18), transparent 55%), radial-gradient(1000px 650px at 75% 15%, rgba(142,92,255,.12), transparent 55%), linear-gradient(180deg, var(--bg1), var(--bg0)); } /* hide graph brand on panel pages */ .panelPage .brandPill{ display:none !important; } .panelLayout{ min-height:100vh; padding: 18px; } /* Sidebar fixed */ .sidebar{ position: fixed; top: 18px; left: 18px; bottom: 18px; width: var(--sidebarW); padding: 14px; border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border: 1px solid var(--strokeA); box-shadow: var(--shadow); backdrop-filter: blur(10px); display:flex; flex-direction:column; gap: 12px; } .brand{ display:flex; align-items:center; gap: 12px; padding: 12px; border-radius: 18px; text-decoration:none; color: var(--text); border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); } .brand__icon{ width: 44px; height: 44px; border-radius: 14px; display:grid; place-items:center; position: relative; overflow: hidden; background: radial-gradient(16px 16px at 30% 30%, rgba(255,255,255,.38), transparent 55%), linear-gradient(135deg, rgba(181,107,255,.95), rgba(142,92,255,.85)); box-shadow: 0 10px 30px rgba(142,92,255,.18), inset 0 1px 0 rgba(255,255,255,.12); } /* Р±Р»РёРє РєР°Рє РЅР° вЂњСЂРµС„вЂќ */ .brand__icon::after{ content:""; position:absolute; inset:-60%; background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.20), rgba(255,255,255,0)); transform: translateX(-55%) rotate(10deg); opacity: 0.85; animation: brandIconSheen 3.6s ease-in-out infinite; } @keyframes brandIconSheen{ 0% { transform: translateX(-70%) rotate(10deg); } 55% { transform: translateX(90%) rotate(10deg); } 100% { transform: translateX(90%) rotate(10deg); } } .brand__meta{ display:flex; flex-direction:column; line-height:1.1; } .brand__name{ font-weight:700; letter-spacing:.2px; } .brand__sub{ font-size:12px; color: var(--mutedB); margin-top: 4px; } .sidebar__sectionTitle{ font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--mutedB); padding: 0 10px; margin-top: 2px; } .sidebar__nav{ display:flex; flex-direction:column; gap: 8px; } .navItem{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; text-decoration:none; color: var(--mutedA); border: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.12); transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; } .navItem__left{ display:flex; align-items:center; gap: 10px; min-width:0; } .navDot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); flex: 0 0 auto; } .navLabel{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight: 600; font-size: 14px; } .navItem:hover{ transform: translateX(2px); color: var(--text); border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); box-shadow: 0 10px 30px rgba(0,0,0,.25); } .navItem.is-active{ color: var(--text); border-color: rgba(181,107,255,.32); background: rgba(181,107,255,.10); } .navItem.is-active .navDot{ background: linear-gradient(135deg, var(--pink2), var(--pink)); box-shadow: 0 0 0 4px rgba(181,107,255,.10); } .sidebar__divider{ height: 1px; background: rgba(255,255,255,.10); margin: 6px 8px; } .sidebar__footer{ margin-top:auto; display:flex; flex-direction:column; gap: 8px; } /* top right user pill (panel pages) */ .panelPage .topRight{ top: 18px; right: 18px; z-index: 20; } .panelPage .userPill{ display:flex; align-items:center; gap: 12px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(181,107,255,0.30); background: rgba(15, 5, 12, 0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.30); backdrop-filter: blur(10px); position: relative; overflow: hidden; } .panelPage .userPill::before{ content:""; position:absolute; inset:-2px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(181,107,255,0.35), transparent 60%), radial-gradient(circle at 70% 70%, rgba(255,232,120,0.12), transparent 65%); opacity: 0.75; pointer-events:none; filter: blur(10px); } /* вЂњС‚РѕС‡РєР°вЂќ РєР°Рє РЅР° РіСЂР°С„РёРєРµ */ .userPill__avatar{ width: 10px; height: 10px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 14px rgba(181,107,255,0.55); } .userPill__name{ font-weight:700; color: rgba(244,238,244,.92); } .userPill__muted{ color: rgba(244,238,244,.70); font-weight:600; } .userPill__chev{ opacity:.7; margin-left:4px; } /* main content area */ .panelPage .main{ margin-left: calc(var(--sidebarW) + 18px + 18px); padding: 78px 18px 18px; min-height: 100vh; height: auto; } .container{ max-width: 980px; margin: 0 auto; display:flex; flex-direction:column; gap: 16px; } .card{ border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid var(--strokeA); box-shadow: var(--shadow); backdrop-filter: blur(10px); padding: 22px; } .card--tight{ padding: 18px; border-radius: var(--radius2); } .h1{ font-size: 22px; margin: 0 0 10px; } .h2{ font-size: 16px; margin: 0 0 6px; color: rgba(244,238,244,.92); } .p{ margin: 0; color: var(--mutedB); font-size: 13px; line-height: 1.4; } .row{ display:flex; gap: 12px; flex-wrap:wrap; align-items:center; } /* buttons for panel pages */ .panelPage .btn{ border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: var(--text); padding: 10px 14px; border-radius: 14px; font-weight: 700; cursor:pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; box-shadow:none; } .panelPage .btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); box-shadow: 0 10px 26px rgba(0,0,0,.25); } .panelPage .btn--primary{ border-color: rgba(181,107,255,.35); background: linear-gradient(135deg, rgba(181,107,255,.88), rgba(142,92,255,.78)); color: #160410; } .panelPage .btn--primary:hover{ filter: brightness(1.04); } .panelPage .input, .panelPage .select{ height: 40px; padding: 0 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: var(--text); outline:none; width: auto; } .panelPage .input:focus, .panelPage .select:focus{ border-color: rgba(181,107,255,.38); box-shadow: 0 0 0 4px rgba(181,107,255,.12); } .formGrid{ display:grid; grid-template-columns: 1fr 260px; gap: 14px 16px; align-items:center; } .formGrid label{ color: var(--mutedB); font-size:12px; } .formGrid .full{ grid-column: 1 / -1; } @media (max-width: 920px){ :root{ --sidebarW: 240px; } .formGrid{ grid-template-columns: 1fr; } .panelPage .main{ margin-left: calc(var(--sidebarW) + 18px + 18px); } } @media (max-width: 760px){ .sidebar{ position: static; width: auto; height:auto; } .panelPage .main{ margin-left: 0; padding-top: 84px; } .panelLayout{ padding: 14px; } } .doc{ border-radius: var(--radius); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.10); padding: 18px; } /* ========================================================= LEGACY COMPAT (С‡С‚РѕР±С‹ СЃС‚Р°СЂС‹Р№ HTML 100% РїРѕРїР°РґР°Р» РєР°Рє РЅР° СЂРµС„Рµ) Р”РѕР±Р°РІРёС‚СЊ Р’ РљРћРќР•Р¦ С„Р°Р№Р»Р° ========================================================= */ /* РІСЃС‘, С‡С‚Рѕ РїРѕРІРµСЂС… РіСЂР°С„РёРєР° вЂ” РІСЃРµРіРґР° РІС‹С€Рµ fx-СЃР»РѕС‘РІ */ header, .topRight, .bottomRight, .pill-priceTop, .pill-price, .pill-account, .pill-stakeBottom, .userMenu, .stakeMenu{ z-index: 8000 !important; } /* РµСЃР»Рё РїРёР»СЋР»Рё Р»РµР¶Р°С‚ Р’РќРЈРўР Р .chartWrap вЂ” РіР°СЂР°РЅС‚РёСЂСѓРµРј РІРёРґРёРјРѕСЃС‚СЊ */ .chartWrap .pill, .chartWrap .userMenu, .chartWrap .stakeMenu{ position: relative; z-index: 8000; } /* СЃС‚Р°СЂС‹Рµ РєР»Р°СЃСЃС‹ РїРѕР·РёС†РёРѕРЅРёСЂРѕРІР°РЅРёСЏ (РёР· С‚РІРѕРµРіРѕ СЃС‚Р°СЂРѕРіРѕ css) */ /* Р¦РµРЅР° вЂ” СЃРїСЂР°РІР° СЃРЅРёР·Сѓ (СЃС‚Р°СЂС‹Р№ РІР°СЂРёР°РЅС‚) */ .pill-price{ position: fixed; right: 16px; bottom: 16px; transform: scale(1.18); transform-origin: right bottom; pointer-events: auto; } .pill-price #price{ font-size: 18px; font-weight: 900; } /* Р¦РµРЅР° вЂ” СЃР»РµРІР° СЃРІРµСЂС…Сѓ (СЃС‚Р°СЂС‹Р№ РІР°СЂРёР°РЅС‚) */ .pill-priceTop{ position: fixed; left: 14px; top: 14px; pointer-events: auto; } /* РђРєРєР°СѓРЅС‚ вЂ” СЃРїСЂР°РІР° СЃРІРµСЂС…Сѓ */ .pill-account{ position: fixed; right: 14px; top: 14px; pointer-events: auto; } /* РЎС‚Р°РІРєР°/РёСЃС‚РѕСЂРёСЏ вЂ” СЃРїСЂР°РІР° СЃРЅРёР·Сѓ */ .pill-stakeBottom{ position: fixed; right: 14px; bottom: 14px; transform: scale(1.18); transform-origin: right bottom; pointer-events: auto; } .pill-stakeBottom .stakeMenuDrop{ top: auto !important; bottom: calc(100% + 10px) !important; /* РѕС‚РєСЂС‹РІР°РµРј РІРІРµСЂС… */ } /* РµСЃР»Рё Сѓ С‚РµР±СЏ Р±С‹Р» РєРѕРЅС‚РµР№РЅРµСЂ СЃРїСЂР°РІР° .topbar-right вЂ” РЅРµ Р»РѕРјР°РµРј СЂР°Р·РјРµС‚РєСѓ */ .topbar-right{ display: contents; } /* РІР°Р¶РЅРѕРµ: С‡С‚РѕР±С‹ РјРѕР¶РЅРѕ Р±С‹Р»Рѕ РєР»РёРєР°С‚СЊ РїРѕ С„РёРєСЃ-РїРёР»СЋР»СЏРј */ header{ pointer-events:none; } header .pill, header .userMenu, header .stakeMenu, header button, header a{ pointer-events:auto; } /* ========================================================= GRAPH FINAL: purple theme + ref layout + correct fonts ========================================================= */ /* 1) РїСЂР°РІРёР»СЊРЅС‹Р№ С€СЂРёС„С‚ РЅР° РіСЂР°С„РёРєРµ */ body.graphPage{ font-family: var(--font); letter-spacing: 0.4px; } /* 2) РїСѓСЂРїСѓСЂРЅР°СЏ С‚РµРјР°: Р·Р°РјРµРЅСЏРµРј вЂњСЂРѕР·РѕРІС‹Р№вЂќ РЅР° вЂњРїСѓСЂРїСѓСЂвЂќ */ :root{ --pink:#8e5cff; /* РѕСЃРЅРѕРІРЅРѕР№ РїСѓСЂРїСѓСЂ */ --pink2:#b56bff; /* СЃРІРµС‚Р»С‹Р№ РїСѓСЂРїСѓСЂ */ } /* С‚РѕС‡РєРё/СЃРІРµС‡РµРЅРёСЏ */ .dot{ background: var(--pink2); box-shadow: 0 0 14px var(--pink2); } /* РїРёР»СЋР»Рё: Р±РѕСЂРґРµСЂ/СЃРІРµС‡РµРЅРёРµ РІ РїСѓСЂРїСѓСЂРµ */ .pill{ border: 1px solid rgba(181, 107, 255, 0.26); } .pill::before, .userMenuBtn::before, .stakeMenuBtn::before{ background: radial-gradient(circle at 30% 30%, rgba(181,107,255,0.35), transparent 60%), radial-gradient(circle at 70% 70%, rgba(255,232,120,0.14), transparent 65%); } /* РєРЅРѕРїРєРё: РїСѓСЂРїСѓСЂРЅС‹Р№ РіСЂР°РґРёРµРЅС‚ */ .btn{ background: linear-gradient(135deg, rgba(181,107,255,0.95), rgba(142,92,255,0.90)); box-shadow: 0 16px 30px rgba(181,107,255,0.18); } /* С„РѕРєСѓСЃ РёРЅРїСѓС‚РѕРІ */ .input:focus{ border-color: var(--pink2); box-shadow: 0 0 0 3px rgba(181,107,255,0.16); } /* 3) С„РѕРЅ РіСЂР°С„РёРєР° (РїСѓСЂРїСѓСЂ, Р±РµР· вЂњСЂРѕР·РѕРІРѕРіРѕ РїРµСЂРµРєРѕСЃР°вЂќ) */ .chartWrap{ background: radial-gradient(900px 520px at 12% 12%, rgba(142,92,255,0.22) 0%, transparent 65%), linear-gradient(180deg, #1b071a, #0b0710); } /* 4) РњРђРЎРЁРўРђР‘ вЂ” РєР°Рє РЅР° СЂРµС„РµСЂРµРЅСЃРµ (СѓР±РёСЂР°РµРј 1.18) */ .pill-stakeBottom{ transform: none; } .pill-price{ transform: none; } /* 5) РџРѕР·РёС†РёРё РєР°Рє РЅР° 2-Рј СЃРєСЂРёРЅРµ */ .pill-priceTop{ left:14px; top:14px; } .pill-account { right:14px; top:14px; } .pill-stakeBottom{ right:14px; bottom:14px; } /* Р»РѕРіРѕ СЃРЅРёР·Сѓ СЃР»РµРІР° */ .pill-logoBottom{ position: fixed; left: 14px; bottom: 14px; z-index: 8000; pointer-events: auto; } /* РјРµРЅСЋ СЃС‚Р°РІРѕРє РѕС‚РєСЂС‹РІР°РµРј РІРІРµСЂС… */ .pill-stakeBottom .stakeMenuDrop{ top: auto !important; bottom: calc(100% + 10px) !important; } /* 6) С‡С‚РѕР±С‹ UI РІСЃРµРіРґР° Р±С‹Р» РЅР°Рґ РєР°РЅРІР°СЃРѕРј */ .pill-priceTop, .pill-account, .pill-stakeBottom, .pill-logoBottom, .userMenuDrop, .stakeMenuDrop{ z-index: 8000; } /* ================================ FIX: #notifs overlay (top-center) max 2 items, does NOT move layout ================================ */ .notifs{ position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 120000; display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none; /* РєР»РёРєРё РїСЂРѕС…РѕРґСЏС‚ Рє РіСЂР°С„РёРєСѓ */ width: min(560px, calc(100vw - 24px)); } /* РµСЃР»Рё app.js РґРѕР±Р°РІР»СЏРµС‚ РѕР±С‹С‡РЅС‹Рµ div РІ notifs вЂ” СЃРґРµР»Р°РµРј РёС… РєР°Рє "notif" */ .notifs > *{ pointer-events: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; border-radius: 999px; background: radial-gradient(120% 140% at 18% 22%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.03) 100%), linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(181,107,255,0.22); box-shadow: 0 18px 48px rgba(0,0,0,0.42), 0 0 26px rgba(181,107,255,0.10); color: rgba(255,255,255,0.92); font-family: var(--font); font-weight: 900; font-size: 14px; letter-spacing: 0.25px; opacity: 0; transform: translateY(-12px) scale(0.965); will-change: transform, opacity, filter; animation: notifIn 420ms cubic-bezier(.2,.9,.2,1) forwards; } .notifs > *.out{ animation: notifOut 260ms cubic-bezier(.2,.8,.2,1) forwards; } /* ===== Brand pill: bigger + purple ===== */ .brandPill{ transform: scale(1.12); transform-origin: left bottom; border-radius: 20px; border: 1px solid rgba(181,107,255,0.22); background: rgba(255,255,255,0.06); } .brandLogo{ width: 40px; height: 40px; border-radius: 14px; background: radial-gradient(circle at 35% 30%, rgba(181,107,255,0.95), rgba(142,92,255,0.75) 55%, rgba(110,60,255,0.90) 100%); box-shadow: 0 14px 26px rgba(142,92,255,0.20), inset 0 1px 0 rgba(255,255,255,0.25); } .brandMarkLine{ filter: drop-shadow(0 0 12px rgba(181,107,255,0.35)); } .brandMarkDot{ filter: drop-shadow(0 0 12px rgba(181,107,255,0.45)) drop-shadow(0 0 18px rgba(142,92,255,0.25)); } .brandTag{ color: rgba(255,255,255,0.60); } /* ========================================== BRAND PILL (bottom-left) вЂ” compact like ref ========================================== */ .brandPill--compact{ gap: 12px; padding: 12px 16px; border-radius: 18px; transform: none; /* Р±РµР· РјР°СЃС€С‚Р°Р±РёСЂРѕРІР°РЅРёСЏ */ } /* РѕРґРЅР° СЃС‚СЂРѕРєР° (СѓР±РёСЂР°РµРј РєРѕР»РѕРЅРєСѓ) */ .brandName--oneLine{ font-weight: 900; font-size: 15px; letter-spacing: 0.2px; line-height: 1; margin: 0; padding: 0; } /* РєРІР°РґСЂР°С‚РЅР°СЏ РёРєРѕРЅРєР° РєР°Рє РЅР° СЂРµС„Рµ */ .brandIcon{ width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden; background: radial-gradient(circle at 35% 30%, rgba(181,107,255,0.95), rgba(142,92,255,0.72) 55%, rgba(110,60,255,0.90) 100%); box-shadow: 0 14px 26px rgba(142,92,255,0.20), inset 0 1px 0 rgba(255,255,255,0.25); } /* Р±Р»РёРє (Р°РЅРёРјР°С†РёСЏ) */ .brandIcon::after{ content:""; position:absolute; inset:-50%; background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.22), rgba(255,255,255,0)); transform: translateX(-55%) rotate(10deg); opacity: 0.85; animation: brandShineCompact 3.6s ease-in-out infinite; } @keyframes brandShineCompact{ 0% { transform: translateX(-65%) rotate(10deg); } 55% { transform: translateX(85%) rotate(10deg); } 100% { transform: translateX(85%) rotate(10deg); } } /* Р·РЅР°С‡РѕРє РІРЅСѓС‚СЂРё */ .brandIconSvg{ width: 22px; height: 22px; filter: drop-shadow(0 0 10px rgba(181,107,255,0.25)); opacity: 0.95; } /* ========================================== Brand arrow animation (like ref) ========================================== */ .brandIconSvg{ width: 22px; height: 22px; overflow: visible; } /* Р РёСЃСѓРµРј Р»РёРЅРёСЋ: dashoffset -> 0 */ .brandArrowLine{ stroke-dasharray: 140; stroke-dashoffset: 140; filter: drop-shadow(0 0 10px rgba(181,107,255,0.28)); animation: brandArrowDraw 3.6s ease-in-out infinite; } /* РўРѕС‡РєР°: Р»С‘РіРєРёР№ РїСѓР»СЊСЃ СЃРёРЅС…СЂРѕРЅРЅРѕ */ .brandArrowDot{ transform-origin: 50px 30px; filter: drop-shadow(0 0 10px rgba(181,107,255,0.35)) drop-shadow(0 0 18px rgba(142,92,255,0.22)); animation: brandDotPulseSmall 3.6s ease-in-out infinite; } /* РўР°Р№РјРёРЅРі РєР°Рє РІ СЂРµС„Рµ: РЅР°СЂРёСЃРѕРІР°Р»Рё -> РїРѕРґРµСЂР¶Р°Р»Рё -> вЂњРїРµСЂРµР·Р°РїСѓСЃРєвЂќ */ @keyframes brandArrowDraw{ 0% { stroke-dashoffset: 140; opacity: 0; } 10% { opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -140; opacity: 0; } } @keyframes brandDotPulseSmall{ 0% { transform: scale(0.85); opacity: 0; } 18% { opacity: 1; } 55% { transform: scale(1.10); opacity: 1; } 62% { transform: scale(0.98); } 78% { transform: scale(1.06); } 100% { transform: scale(0.85); opacity: 0; } } /* ========================================================= PANEL PAGES вЂ” unify with GRAPH (purple + typography + pill) ========================================================= */ /* Make panel pages use same brand tokens as graph */ body.panelPage{ min-height:100vh; min-height:100dvh; font-family: var(--font); letter-spacing: 0.4px; /* closer to graph background */ background: radial-gradient(1200px 800px at 20% 10%, rgba(181,107,255,.16), transparent 60%), radial-gradient(900px 600px at 80% 60%, rgba(142,92,255,.14), transparent 55%), linear-gradient(180deg, #12060f, #0b0710); } /* Use purple accents everywhere on panel pages */ body.panelPage{ --accent: var(--pink2); --accent2: var(--pink); } /* Typography consistency */ body.panelPage button, body.panelPage input, body.panelPage select, body.panelPage textarea{ font-family: var(--font); letter-spacing: 0.4px; } /* Sidebar logo icon: allow animated arrow svg (same as graph) */ body.panelPage .brand__icon{ position: relative; overflow: hidden; background: radial-gradient(circle at 35% 30%, rgba(181,107,255,0.95), rgba(142,92,255,0.72) 55%, rgba(110,60,255,0.90) 100%); box-shadow: 0 12px 28px rgba(142,92,255,0.18); } body.panelPage .brand__icon .brandMark{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } body.panelPage .brand__icon .brandMarkLine{ stroke-width: 5; filter: drop-shadow(0 0 10px rgba(181,107,255,0.32)); } body.panelPage .brand__icon .brandMarkDot{ filter: drop-shadow(0 0 10px rgba(181,107,255,0.40)) drop-shadow(0 0 18px rgba(142,92,255,0.22)); } /* Primary buttons on panel pages вЂ” same purple as graph */ body.panelPage .btn--primary{ border-color: rgba(181,107,255,0.35); background: linear-gradient(135deg, rgba(181,107,255,0.95), rgba(142,92,255,0.90)); color: #12060f; } /* Inputs focus вЂ” purple */ body.panelPage .input:focus, body.panelPage .select:focus{ border-color: rgba(181,107,255,0.42); box-shadow: 0 0 0 4px rgba(181,107,255,0.14); } /* Top-right account pill вЂ” match graph userMenuBtn */ body.panelPage .userPill{ display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(181,107,255,0.30); background: rgba(15, 5, 12, 0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.30); backdrop-filter: blur(10px); color: rgba(255,255,255,0.92); font-weight: 800; font-size: 15px; position: relative; overflow: hidden; } /* Panel brand (sidebar) вЂ” same look as graph logo pill */ body.panelPage .panelBrand{ display:flex; align-items:center; gap: 12px; padding: 12px 14px; border-radius: 18px; text-decoration:none; color: rgba(255,255,255,0.92); border: 1px solid rgba(181,107,255,0.22); background: rgba(15, 5, 12, 0.40); box-shadow: 0 16px 50px rgba(0,0,0,.45); backdrop-filter: blur(12px); } body.panelPage .panelBrand:hover{ border-color: rgba(181,107,255,0.34); background: rgba(181,107,255,0.08); } body.panelPage .panelBrandIcon{ width: 44px; height: 44px; border-radius: 16px; display:grid; place-items:center; position: relative; overflow:hidden; background: radial-gradient(circle at 35% 30%, rgba(181,107,255,0.95), rgba(142,92,255,0.72) 55%, rgba(110,60,255,0.90) 100%); box-shadow: 0 14px 26px rgba(142,92,255,0.20), inset 0 1px 0 rgba(255,255,255,0.25); } body.panelPage .panelBrandIcon::after{ content:""; position:absolute; inset:-50%; background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.22), rgba(255,255,255,0)); transform: translateX(-55%) rotate(10deg); opacity: 0.85; animation: brandShineCompact 3.6s ease-in-out infinite; } body.panelPage .panelBrandIconSvg{ width: 24px; height: 24px; filter: drop-shadow(0 0 10px rgba(181,107,255,0.25)); opacity: 0.95; } body.panelPage .panelBrandMeta{ display:flex; flex-direction:column; line-height:1.05; } body.panelPage .panelBrandName{ font-weight: 900; letter-spacing:.2px; font-size: 15px; } body.panelPage .panelBrandSub{ font-size:12px; color: rgba(255,255,255,0.55); margin-top: 4px; } body.panelPage .panelLayout, body.panelPage .main, body.panelPage .container, body.panelPage .card{ background-color: transparent; } @supports (padding: max(0px)){ body.panelPage .panelLayout{ padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); } } /* Use the graph account pill on panel pages */ body.panelPage .pill-account{ top: 18px; right: 18px; } body.panelPage #accountBalance{ opacity: .85; font-weight: 900; } /* Ensure all accent borders are purple (including stake dropdown) */ .userMenuBtn, .stakeMenuBtn, .stakeMenuDrop, .userMenuDrop, .stakeChip, .miniBtn, .stakeMaxBtn{ border-color: rgba(181,107,255,0.22) !important; } .userMenuBtn:hover, .stakeMenuBtn:hover, .stakeChip:hover, .miniBtn:hover{ border-color: rgba(181,107,255,0.38) !important; } .stakeMenuDrop{ background: linear-gradient(180deg, rgba(24,7,14,0.96), rgba(10,3,7,0.96)) !important; box-shadow: 0 28px 90px rgba(0,0,0,0.70), 0 0 30px rgba(181,107,255,0.10), inset 0 1px 0 rgba(255,255,255,0.06) !important; } body.panelPage .userPill::before{ content:""; position:absolute; inset:-2px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(181,107,255,0.35), transparent 60%), radial-gradient(circle at 70% 70%, rgba(255,232,120,0.14), transparent 65%); opacity: 0.75; pointer-events:none; filter: blur(10px); } body.panelPage .userPill:hover{ border-color: rgba(181,107,255,0.42); background: rgba(181,107,255,0.10); } body.panelPage .userPill:active{ transform: scale(0.99); } body.panelPage .userPill__avatar{ width: 10px; height: 10px; border-radius: 999px; background: var(--pink2); box-shadow: 0 0 14px rgba(181,107,255,0.55); } body.panelPage .userPill__name{ font-weight: 800; color: rgba(255,255,255,0.92); } body.panelPage .userPill__muted{ color: rgba(255,255,255,0.82); font-weight: 800; } body.panelPage .userPill__chev{ opacity: 0.85; transform: translateY(-1px); } /* ================================ PANEL LOGO ANIMATION (like graph) ================================ */ /* РћР±С‘СЂС‚РєР° РёРєРѕРЅРєРё (РµСЃР»Рё Сѓ С‚РµР±СЏ СѓР¶Рµ РµСЃС‚СЊ .brand__icon вЂ” РЅРµ СЃС‚СЂР°С€РЅРѕ, СЌС‚Рѕ СѓСЃРёР»РµРЅРёРµ) */ .panelPage .brand__icon{ position: relative; overflow: hidden; } /* Р‘Р»РёРє РєР°Рє РЅР° РіСЂР°С„РёРєРµ */ .panelPage .brand__icon::after{ content:""; position:absolute; inset:-60%; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.18) 46%, rgba(255,255,255,0) 58%); transform: translateX(-70%) rotate(10deg); opacity: .9; animation: panelBrandShine 3.6s ease-in-out infinite; pointer-events:none; } @keyframes panelBrandShine{ 0% { transform: translateX(-80%) rotate(10deg); } 55% { transform: translateX(90%) rotate(10deg); } 100% { transform: translateX(90%) rotate(10deg); } } /* SVG РІ РёРєРѕРЅРєРµ */ .panelBrandSvg{ width: 26px; height: 26px; display:block; filter: drop-shadow(0 0 10px rgba(181,107,255,0.25)); } /* Р›РёРЅРёСЏ-СЃС‚СЂРµР»РєР°: СЂРёСЃСѓРµС‚СЃСЏ */ .panelBrandLine{ fill: none; stroke: rgba(255,255,255,0.92); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: panelBrandLineDraw 3.6s ease-in-out infinite; } @keyframes panelBrandLineDraw{ 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } /* РўРѕС‡РєР° РЅР° РєРѕРЅС†Рµ: РїСѓР»СЊСЃРёСЂСѓРµС‚ */ .panelBrandDot{ fill: rgba(255,255,255,0.95); transform-origin: 58px 26px; filter: drop-shadow(0 0 12px rgba(181,107,255,0.45)) drop-shadow(0 0 18px rgba(142,92,255,0.25)); animation: panelBrandDotPulse 3.6s ease-in-out infinite; } @keyframes panelBrandDotPulse{ 0% { transform: scale(0.85); opacity: 0; } 18% { opacity: 1; } 55% { transform: scale(1.12); opacity: 1; } 62% { transform: scale(0.98); } 78% { transform: scale(1.06); } 100% { transform: scale(0.85); opacity: 0; } } /* ========================================== GRAPH BRAND ICON: same animated arrow ========================================== */ .brandIcon{ position: relative; overflow: hidden; } .brandIcon::after{ content:""; position:absolute; inset:-60%; background: linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.18) 46%, rgba(255,255,255,0) 58%); transform: translateX(-70%) rotate(10deg); opacity: .9; animation: panelBrandShine 3.6s ease-in-out infinite; pointer-events:none; } .brandIconSvg.panelBrandSvg{ width: 22px; height: 22px; display:block; filter: drop-shadow(0 0 10px rgba(181,107,255,0.25)); } .brandIconSvg .panelBrandLine{ fill: none; stroke: rgba(255,255,255,0.92); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: panelBrandLineDraw 3.6s ease-in-out infinite; } .brandIconSvg .panelBrandDot{ fill: rgba(255,255,255,0.95); transform-origin: 58px 26px; filter: drop-shadow(0 0 12px rgba(181,107,255,0.45)) drop-shadow(0 0 18px rgba(142,92,255,0.25)); animation: panelBrandDotPulse 3.6s ease-in-out infinite; } /* ========================================== PANEL: user dropdown = like graph (fix 2 columns / underline / ugly layout) ========================================== */ /* СЃР°Рј РґСЂРѕРї */ .panelPage .userMenuDrop{ position: absolute; top: calc(100% + 10px); right: 0; width: 260px; padding: 10px; border-radius: 16px; display: none; /* РїРѕРєР°Р·С‹РІР°РµРј С‡РµСЂРµР· .show */ flex-direction: column; gap: 8px; border: 1px solid rgba(181,107,255,0.22); background: linear-gradient(180deg, rgba(27,7,16,0.94), rgba(12,3,7,0.94)); box-shadow: 0 24px 80px rgba(0,0,0,0.60); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 12000; /* РІР°Р¶РЅРѕРµ: СѓР±РёРІР°РµРј Р»СЋР±С‹Рµ вЂњРєРѕР»РѕРЅРєРё/С‚Р°Р±Р»РёС†С‹/РіСЂРёРґС‹вЂќ РёР· СЃС‚Р°СЂС‹С… СЃС‚РёР»РµР№ */ grid-template-columns: none !important; } .panelPage .userMenuDrop.show{ display: flex; animation: userMenuIn 140ms ease-out; } /* СЌР»РµРјРµРЅС‚С‹ РјРµРЅСЋ: Рё РєРЅРѕРїРєРё, Рё СЃСЃС‹Р»РєРё */ .panelPage .userMenuDrop > a, .panelPage .userMenuDrop > button{ display: flex !important; width: 100% !important; text-align: left; padding: 12px 12px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.88); font-weight: 800; font-size: 14px; letter-spacing: 0.25px; cursor: pointer; /* СѓР±РёСЂР°РµРј вЂњСЃСЃС‹Р»РѕС‡РЅС‹Р№вЂќ РІРёРґ */ text-decoration: none !important; outline: none; } /* hover / active */ .panelPage .userMenuDrop > a:hover, .panelPage .userMenuDrop > button:hover{ border-color: rgba(181,107,255,0.28); background: rgba(181,107,255,0.10); } .panelPage .userMenuDrop > a:active, .panelPage .userMenuDrop > button:active{ transform: translateY(1px); } /* СЂР°Р·РґРµР»РёС‚РµР»СЊ */ .panelPage .userMenuSep{ height: 1px; margin: 4px 6px; background: rgba(181,107,255,0.14); } /* "Р’С‹Р№С‚Рё" вЂ” РєСЂР°СЃРЅС‹Рј, РєР°Рє РЅР° РіСЂР°С„РёРєРµ */ .panelPage .userMenuDrop .danger, .panelPage .userMenuDrop > .danger{ color: rgba(255,95,125,0.95) !important; } .panelPage .userMenuDrop .danger:hover, .panelPage .userMenuDrop > .danger:hover{ border-color: rgba(255,95,125,0.35) !important; background: rgba(255,95,125,0.10) !important; } /* ========================================== PANEL: dropdown colors like graph ========================================== */ .panelPage .userMenuDrop{ border: 1px solid rgba(181,107,255,0.22) !important; background: radial-gradient(120% 140% at 18% 22%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0.02) 100%), linear-gradient(180deg, rgba(24,7,14,0.92), rgba(10,3,7,0.94)) !important; box-shadow: 0 28px 90px rgba(0,0,0,0.70), 0 0 30px rgba(181,107,255,0.10), inset 0 1px 0 rgba(255,255,255,0.06) !important; } /* РїСѓРЅРєС‚С‹ РјРµРЅСЋ вЂ” РєР°Рє РЅР° РіСЂР°С„РёРєРµ */ .panelPage .userMenuDrop > a, .panelPage .userMenuDrop > button{ color: rgba(255,255,255,0.90) !important; border: 1px solid transparent !important; } .panelPage .userMenuDrop > a:hover, .panelPage .userMenuDrop > button:hover{ border-color: rgba(181,107,255,0.28) !important; background: rgba(181,107,255,0.12) !important; } .panelPage .userMenuSep{ background: rgba(181,107,255,0.14) !important; } .panelPage .userMenuBtn .sep{ opacity: .75; transform: translateY(-.5px); } /* ========================================= AUTH (Stake-like) вЂ” purple LiquiTrade РІСЃС‚Р°РІСЊ Р’ РљРћРќР•Р¦ styles.css ========================================= */ :root{ --auth-bg: rgba(10, 4, 10, 0.72); --auth-card: rgba(20, 6, 18, 0.82); --auth-card2: rgba(12, 3, 10, 0.88); --auth-stroke: rgba(181, 107, 255, 0.22); --auth-stroke2: rgba(255, 255, 255, 0.10); --auth-text: rgba(255,255,255,0.92); --auth-muted: rgba(255,255,255,0.60); --auth-shadow: 0 28px 90px rgba(0,0,0,0.70); } /* overlay */ .authOverlay{ background: radial-gradient(900px 520px at 20% 20%, rgba(181,107,255,0.16), transparent 60%), radial-gradient(900px 520px at 80% 80%, rgba(142,92,255,0.14), transparent 60%), rgba(0,0,0,0.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* card */ .authCard{ width: 520px; max-width: min(560px, calc(100vw - 24px)); border-radius: 22px; padding: 18px; border: 1px solid var(--auth-stroke); background: radial-gradient(120% 140% at 18% 22%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0.02) 100%), linear-gradient(180deg, var(--auth-card), var(--auth-card2)); box-shadow: var(--auth-shadow), 0 0 40px rgba(181,107,255,0.10), inset 0 1px 0 rgba(255,255,255,0.08); position: relative; overflow: hidden; } .authCard::before{ content:""; position:absolute; inset:-40%; background: radial-gradient(circle at 30% 30%, rgba(181,107,255,0.18), transparent 55%); filter: blur(10px); opacity: 0.65; pointer-events:none; } /* header */ .authHeader{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 14px; } .authTitle{ font-weight: 900; font-size: 18px; letter-spacing: 0.2px; color: var(--auth-text); } /* close btn like stake */ .authClose{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.82); cursor:pointer; box-shadow: 0 12px 30px rgba(0,0,0,0.35); } .authClose:hover{ border-color: rgba(181,107,255,0.28); background: rgba(181,107,255,0.08); } /* tabs (segmented) */ .authTabs{ display:flex; gap: 10px; margin-bottom: 14px; } .authTab{ flex:1; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.72); font-weight: 900; cursor:pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .authTab:hover{ border-color: rgba(181,107,255,0.24); background: rgba(181,107,255,0.07); } .authTab.active{ color: rgba(255,255,255,0.94); border-color: rgba(181,107,255,0.38); background: radial-gradient(circle at 25% 25%, rgba(181,107,255,0.22), transparent 55%), rgba(255,255,255,0.05); } /* form */ .authBody{ padding-top: 2px; } .authRow{ margin: 12px 0; } .authLabel{ font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: none; color: var(--auth-muted); margin-bottom: 8px; } /* inputs bigger, stake-like */ .authBody .input{ width: 100%; height: 46px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(0,0,0,0.20); color: rgba(255,255,255,0.92); padding: 0 14px; font-weight: 800; } .authBody .input:focus{ border-color: rgba(181,107,255,0.55); box-shadow: 0 0 0 4px rgba(181,107,255,0.14); outline: none; } /* primary submit (wide) */ #authSubmitBtn.btn.primary, .authBody .btn.primary{ width: 100%; height: 48px; border-radius: 16px; font-weight: 900; letter-spacing: 0.2px; background: linear-gradient(135deg, rgba(181,107,255,0.95), rgba(142,92,255,0.90)); color: rgba(10,3,10,0.95); box-shadow: 0 18px 40px rgba(181,107,255,0.18), 0 18px 40px rgba(0,0,0,0.40); } #authSubmitBtn.btn.primary:hover{ filter: brightness(1.04); transform: translateY(-1px); } #authSubmitBtn.btn.primary:active{ transform: translateY(0px); } /* error */ .authError{ border-radius: 16px; border: 1px solid rgba(255,95,125,0.35); background: rgba(255,95,125,0.10); } /* optional: OR divider + alt buttons */ .authDivider{ display:flex; align-items:center; gap: 12px; margin: 14px 0; color: rgba(255,255,255,0.55); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; } .authDivider::before, .authDivider::after{ content:""; flex:1; height: 1px; background: rgba(255,255,255,0.10); } .authAlt{ display:flex; flex-direction:column; gap: 10px; margin-top: 10px; } .authAltBtn{ width:100%; height: 46px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.88); font-weight: 900; cursor:pointer; display:flex; align-items:center; justify-content:center; gap: 10px; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .authAltBtn:hover{ border-color: rgba(181,107,255,0.24); background: rgba(181,107,255,0.07); transform: translateY(-1px); } .authAltBtn:active{ transform: translateY(0px); } .authAltBtn .miniIcon{ width: 18px; height: 18px; display:inline-block; opacity: .95; } /* ==== v2 panel fixes ==== */ html, body{ min-height: 100%; overflow-x: hidden; } body.panelPage{ position: relative; background: #07040a !important; } body.panelPage::before{ content:""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 820px at 20% 8%, rgba(181,107,255,.16), transparent 55%), radial-gradient(1000px 720px at 80% 18%, rgba(255,80,140,.08), transparent 58%), radial-gradient(900px 760px at 75% 72%, rgba(142,92,255,.10), transparent 52%), linear-gradient(180deg, #12060f 0%, #0a050b 55%, #060309 100%); pointer-events:none; } .panelLayout, .panelPage .main, .container{ position: relative; z-index: 1; } .doc{ margin-bottom: 24px; } #depositOut:empty, #wdList:empty, #wdOut:empty, #historyOut:empty{ display:none; } /* history look */ .historyList{ display:flex; flex-direction:column; gap:14px; } .historyItem{ padding:18px 18px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.09); background: radial-gradient(100% 140% at 80% 50%, rgba(181,107,255,.08), transparent 55%), rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); } .historyItemTop{ display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:10px; } .historyAsset{ font-size: 24px; line-height: 1; font-weight: 700; } .historyAmount{ font-size: 42px; line-height: 1; margin-top: 8px; font-weight: 700; } .historyMeta{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; } .historyStatus{ display:inline-flex; align-items:center; justify-content:center; min-width: 96px; padding:8px 14px; border-radius: 999px; font-weight:700; font-size: 15px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); } .historyStatus.is-success{ color:#8effb8; border-color: rgba(92,255,164,.24); background: rgba(30,120,78,.22); } .historyStatus.is-expired{ color:#ffcf70; border-color: rgba(255,210,92,.24); background: rgba(136,102,22,.22); } .historyStatus.is-pending{ color:#d6b8ff; border-color: rgba(181,107,255,.24); background: rgba(86,41,132,.22); } .historyDate{ font-size: 14px; color: rgba(255,255,255,.52); } .historyLine{ font-size:14px; color: rgba(255,255,255,.70); margin-top:8px; word-break: break-word; } .historyLine span{ color: rgba(255,255,255,.52); } .historyLine code{ font-family: inherit; background: rgba(255,255,255,.05); border-radius: 8px; padding: 2px 6px; } .historyEmpty{ padding: 20px; border-radius: 18px; border: 1px dashed rgba(255,255,255,.12); color: rgba(255,255,255,.55); background: rgba(255,255,255,.03); } /* language popup */ .langOverlay{ position: fixed; inset: 0; background: rgba(5,2,7,.58); backdrop-filter: blur(8px); display:none; align-items:center; justify-content:center; z-index: 16000; padding: 20px; } .langOverlay.show{ display:flex; } .langCard{ width: min(420px, 100%); border-radius: 24px; border: 1px solid rgba(181,107,255,.26); background: radial-gradient(130% 150% at 22% 12%, rgba(181,107,255,.14), transparent 52%), linear-gradient(180deg, rgba(24,7,18,.96), rgba(10,3,8,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.65); overflow: hidden; } .langCardHeader{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding: 18px 18px 10px; } .langCardTitle{ font-size: 24px; font-weight:700; } .langCardText{ margin-top:6px; font-size:14px; color: rgba(255,255,255,.55); } .langClose{ width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(181,107,255,.2); background: rgba(255,255,255,.04); color: rgba(255,255,255,.78); cursor:pointer; } .langScroll{ max-height: 360px; overflow:auto; padding: 10px 12px 14px; } .langOption{ width: 100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 14px 14px; border-radius: 16px; border: 1px solid transparent; background: rgba(255,255,255,.02); color: rgba(255,255,255,.88); cursor:pointer; font: inherit; text-align:left; margin-bottom: 8px; transition: .16s ease; } .langOption:hover{ background: rgba(181,107,255,.10); border-color: rgba(181,107,255,.20); } .langOption.active{ background: rgba(181,107,255,.14); border-color: rgba(181,107,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .langOptionCheck{ opacity: 0; color: #dcb2ff; } .langOption.active .langOptionCheck{ opacity: 1; } /* custom scrollbar */ .langScroll::-webkit-scrollbar{ width: 10px; } .langScroll::-webkit-scrollbar-track{ background: rgba(255,255,255,.04); border-radius: 999px; } .langScroll::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(195,118,255,.88), rgba(123,74,255,.88)); border-radius: 999px; border: 2px solid rgba(12,3,8,.88); } .langScroll{ scrollbar-width: thin; scrollbar-color: rgba(181,107,255,.9) rgba(255,255,255,.05); } /* settings dropdown */ .settingsRow{ position: relative; } .langSelectWrap{ width: min(320px, 100%); position: relative; } .langSelectBtn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(181,107,255,.28); background: linear-gradient(180deg, rgba(181,107,255,.16), rgba(255,255,255,.03)); color: rgba(255,255,255,.92); font: inherit; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); } .langSelectDrop{ position:absolute; top: calc(100% + 10px); left:0; right:0; display:none; border-radius: 20px; border: 1px solid rgba(181,107,255,.28); background: radial-gradient(120% 140% at 18% 12%, rgba(181,107,255,.14), transparent 52%), linear-gradient(180deg, rgba(24,7,18,.97), rgba(10,3,8,.98)); box-shadow: 0 30px 90px rgba(0,0,0,.65); z-index: 50; } .langSelectDrop.show{ display:block; } .langSelectChevron{ opacity: .76; } @media (max-width: 780px){ .historyItemTop{ flex-direction:column; } .historyMeta{ align-items:flex-start; } .langSelectWrap{ width:100%; } } /* ===== Final UI polish ===== */ .chartLoader{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; background: radial-gradient(circle at 50% 35%, rgba(161,102,255,.16), transparent 34%), linear-gradient(180deg, rgba(16,6,28,.78), rgba(8,4,16,.86)); backdrop-filter: blur(10px); transition: opacity .38s ease, visibility .38s ease; } .chartLoader.is-hidden{ opacity:0; visibility:hidden; } .chartLoaderGlow{ width:min(360px, 42vw); height:14px; border-radius:999px; background: linear-gradient(90deg, rgba(110,54,180,.18), rgba(201,141,255,.85), rgba(110,54,180,.18)); background-size:200% 100%; box-shadow: 0 0 35px rgba(170,90,255,.25); animation: chartLoaderMove 1.4s linear infinite; } .chartLoaderText{ font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,236,255,.86); } @keyframes chartLoaderMove{ 0%{ background-position:200% 0; transform:scaleX(.92); } 50%{ transform:scaleX(1); } 100%{ background-position:-200% 0; transform:scaleX(.92); } } .toast{ display:flex; align-items:flex-start; gap:12px; overflow:hidden; } .toastBody{ flex:1; min-width:0; } .toastText{ line-height:1.35; } .toastIcon{ width:28px; height:28px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.14); } .toastProgress{ margin-top:10px; height:3px; border-radius:999px; background:linear-gradient(90deg, rgba(210,160,255,.92), rgba(133,255,211,.82)); transform-origin:left center; animation: toastProgress var(--toast-duration, 3000ms) linear forwards; } .toast.success .toastIcon{ background:rgba(58,195,124,.18); } .toast.error .toastIcon{ background:rgba(255,95,122,.18); } .toast.info .toastIcon{ background:rgba(165,110,255,.18); } @keyframes toastProgress{ from{ transform:scaleX(1);} to{ transform:scaleX(0);} } .historyReveal{ opacity:0; transform:translateY(12px) scale(.985); animation: historyReveal .45s ease forwards; } @keyframes historyReveal{ to{ opacity:1; transform:translateY(0) scale(1); } } .cameraUi{ position:absolute; right:18px; top:76px; z-index:9; display:flex; flex-direction:column; gap:10px; pointer-events:none; } .cameraGlassBtn{ pointer-events:auto; width:52px; height:52px; border:none; border-radius:999px; color:rgba(255,255,255,.92); font-size:22px; cursor:pointer; background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 36px rgba(18,7,23,.28); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(255,255,255,.18); transition:transform .2s ease, background .25s ease, opacity .25s ease; } .cameraGlassBtn:hover{ transform:translateY(-1px) scale(1.02); } .cameraGlassBtn.is-active{ background:linear-gradient(180deg, rgba(255,140,210,.35), rgba(125,80,255,.16)); } .cameraGlassBtn--reset{ font-size:24px; } /* Mobile top logo for panel pages */ .panelTopBrand{ position: fixed; top: 18px; left: 14px; z-index: 32; display: none; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px; text-decoration: none; color: rgba(255,255,255,0.95); border: 1px solid rgba(181,107,255,0.24); background: rgba(15, 5, 12, 0.52); box-shadow: 0 12px 34px rgba(0,0,0,0.34); backdrop-filter: blur(12px); } .panelTopBrandText{ font-weight:900; font-size:14px; letter-spacing:.03em; } @media (max-width: 760px){ .panelTopBrand{ display:inline-flex; } .panelPage .sidebar .panelBrand{ display:none; } .panelPage .pill-account{ top:18px; right:14px; } .panelPage .main{ padding-top:92px; } } .legalSection + .legalSection{ margin-top:18px; } .legalList{ margin:10px 0 0; padding-left:18px; color: var(--mutedB); } .legalList li + li{ margin-top:8px; } .legalMeta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; } .legalChip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background: rgba(181,107,255,.08); border:1px solid rgba(181,107,255,.18); color: rgba(255,255,255,.86); font-size:12px; } /* geo access block */ body.geoBlockedMode{ overflow: hidden !important; } .geoBlockedOverlay{ position: fixed; inset: 0; z-index: 25000; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(900px 500px at 20% 10%, rgba(181,107,255,.16), transparent 60%), rgba(4, 1, 7, .82); backdrop-filter: blur(14px); } .geoBlockedCard{ position: relative; width: min(920px, 100%); max-height: min(86vh, 920px); overflow: auto; padding: 28px; border-radius: 30px; border: 1px solid rgba(255,255,255,.1); background: radial-gradient(140% 120% at 10% 0%, rgba(181,107,255,.18), transparent 48%), linear-gradient(180deg, rgba(28,9,20,.96), rgba(10,3,8,.98)); box-shadow: 0 40px 120px rgba(0,0,0,.72); } .geoBlockedGlow{ position: absolute; inset: -80px auto auto -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,125,187,.28) 0%, transparent 68%); filter: blur(18px); pointer-events: none; } .geoBlockedBadge{ display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: rgba(255,255,255,.84); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } .geoBlockedTitle{ margin: 0; font-size: clamp(30px, 4vw, 46px); line-height: 1; } .geoBlockedSubtitle{ margin-top: 12px; font-size: clamp(18px, 2.1vw, 24px); color: #ffd4e8; } .geoBlockedDescription{ margin: 18px 0 0; max-width: 760px; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.74); } .geoBlockedNote{ margin-top: 18px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,125,187,.16); background: rgba(255,125,187,.08); color: #ffe9f3; font-size: 15px; } .geoBlockedListTitle{ margin-top: 24px; margin-bottom: 14px; font-size: 15px; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .12em; } .geoBlockedChips{ display: flex; flex-wrap: wrap; gap: 10px; } .geoBlockedChip{ display: inline-flex; align-items: center; min-height: 40px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.045); color: rgba(255,255,255,.92); font-size: 14px; } .geoBlockedActions{ margin-top: 24px; display: flex; justify-content: flex-end; } .geoBlockedReloadBtn{ min-width: 180px; padding: 14px 18px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 700; color: #180610; background: linear-gradient(180deg, #ff9bcd, #d96cab); box-shadow: 0 16px 38px rgba(255,125,187,.22); } @media (max-width: 640px){ .geoBlockedCard{ padding: 22px 18px; border-radius: 24px; } .geoBlockedActions{ justify-content: stretch; } .geoBlockedReloadBtn{ width: 100%; } } /* ===== v7 panel shell / auth-style redesign ===== */ :root{ --auth-bg:#06101b; --auth-bg2:#150c26; --auth-bg3:#081225; --auth-card:rgba(8,15,29,.78); --auth-card-strong:rgba(6,12,25,.92); --auth-line:rgba(255,255,255,.09); --auth-line-strong:rgba(98,255,184,.24); --auth-text:#f5f9ff; --auth-muted:#92a2bf; --auth-green:#38f291; --auth-pink:#ff4fd8; --auth-cyan:#66dfff; --auth-shadow:0 24px 80px rgba(0,0,0,.48); } body.panelPage{ font-family: Manrope, system-ui, sans-serif !important; color: var(--auth-text) !important; background: radial-gradient(circle at 14% 18%, rgba(102,223,255,.15), transparent 24%), radial-gradient(circle at 84% 12%, rgba(255,79,216,.15), transparent 24%), radial-gradient(circle at 58% 84%, rgba(56,242,145,.08), transparent 24%), linear-gradient(135deg, var(--auth-bg), var(--auth-bg2)) !important; } body.panelPage::before{ background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px) !important; background-size:40px 40px !important; mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.4)); opacity:.8; } body.panelPage .panelLayout{ min-height:100vh; display:grid; grid-template-columns:minmax(290px, 330px) minmax(0, 1fr); gap:24px; padding:24px; } body.panelPage .sidebar, body.panelPage .card, body.panelPage .doc{ position:relative; border:1px solid var(--auth-line); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); backdrop-filter:blur(22px); box-shadow:var(--auth-shadow); border-radius:32px; overflow:hidden; } body.panelPage .sidebar{ position:sticky; top:24px; height:calc(100vh - 48px); display:flex; flex-direction:column; padding:24px 20px 20px; background: radial-gradient(circle at 18% 12%, rgba(102,223,255,.10), transparent 26%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); } body.panelPage .main{ margin-left:0 !important; padding:0 !important; min-width:0; } body.panelPage .container{ width:100%; max-width:none; display:grid; gap:20px; } body.panelPage .card, body.panelPage .doc{ padding:28px 30px; background: radial-gradient(circle at 76% 14%, rgba(255,79,216,.09), transparent 24%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); } body.panelPage .card::after, body.panelPage .doc::after, body.panelPage .sidebar::after{ content:""; position:absolute; inset:auto -18% -34% auto; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(255,79,216,.10), transparent 65%); filter:blur(18px); pointer-events:none; } body.panelPage .h1, body.panelPage h1{ margin:0; font-family:Sora, Manrope, sans-serif; font-weight:700; font-size:clamp(34px, 4vw, 52px); line-height:1.04; letter-spacing:-.05em; color:var(--auth-text); } body.panelPage .h2, body.panelPage h2{ margin:0; font-family:Sora, Manrope, sans-serif; font-weight:700; font-size:18px; letter-spacing:-.03em; color:var(--auth-text); } body.panelPage .p, body.panelPage p{ color:var(--auth-muted); font-size:15px; line-height:1.72; } body.panelPage .sidebar__sectionTitle{ margin:22px 8px 10px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(146,162,191,.84); } body.panelPage .sidebar__nav, body.panelPage .sidebar__footer{ display:grid; gap:10px; } body.panelPage .sidebar__divider{ height:1px; margin:18px 6px; background:linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); } body.panelPage .panelBrand{ display:flex; align-items:center; gap:16px; padding:4px 6px 18px; border:none; background:none; box-shadow:none; text-decoration:none; } body.panelPage .panelBrandMeta{display:flex; flex-direction:column; gap:4px;} body.panelPage .panelBrandName{ font-family:Sora, Manrope, sans-serif; font-weight:700; font-size:32px; line-height:1; letter-spacing:-.05em; color:var(--auth-text); } body.panelPage .panelBrandSub{ color:var(--auth-muted); font-size:14px; } body.panelPage .panelBrandIcon{ position:relative; overflow:hidden; width:58px; height:54px; border-radius:18px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(102,223,255,.18), rgba(255,79,216,.18)); border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 32px rgba(0,0,0,.28); } body.panelPage .panelBrandIcon::after, body.panelPage .brandIcon::after{ animation:panelBrandShineOnce 3.8s cubic-bezier(.22,.61,.36,1) 1 forwards !important; } body.panelPage .panelBrandLine, body.panelPage .brandIconSvg .panelBrandLine{ stroke:rgba(255,255,255,.92); animation:panelBrandLineSettle 3.8s cubic-bezier(.22,.61,.36,1) 1 forwards !important; } body.panelPage .panelBrandDot, body.panelPage .brandIconSvg .panelBrandDot{ fill:rgba(255,255,255,.95); animation:panelBrandDotSettle 3.8s cubic-bezier(.22,.61,.36,1) 1 forwards !important; } body.panelPage .navItem{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 16px; border-radius:18px; border:1px solid var(--auth-line); color:rgba(245,249,255,.88); background:rgba(255,255,255,.03); text-decoration:none; transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } body.panelPage .navItem:hover{ transform:translateY(-1px); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.05); } body.panelPage .navItem.is-active{ background:linear-gradient(135deg, rgba(255,79,216,.16), rgba(56,242,145,.14)); border-color:rgba(98,255,184,.24); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.18); } body.panelPage .navItem__left{ gap:12px; } body.panelPage .navDot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); box-shadow:none; } body.panelPage .navItem.is-active .navDot{ background:var(--auth-green); box-shadow:0 0 16px rgba(56,242,145,.55); } body.panelPage .navLabel{font-weight:700;} body.panelPage .badge, body.panelPage .legalChip{ display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--auth-line); background:rgba(255,255,255,.03); color:var(--auth-muted); font-size:12px; font-weight:700; } body.panelPage .pill-account{ top:24px !important; right:24px !important; z-index:35; } body.panelPage .userMenuBtn, body.panelPage .panelTopBrand, body.panelPage .btn, body.panelPage .langSelectBtn{ border:1px solid var(--auth-line); background:rgba(255,255,255,.03); color:var(--auth-text); box-shadow:none; } body.panelPage .userMenuBtn{ min-height:46px; padding:0 16px; border-radius:999px; font-weight:800; } body.panelPage .userMenuBtn:hover, body.panelPage .panelTopBrand:hover, body.panelPage .btn:hover, body.panelPage .langSelectBtn:hover{ border-color:rgba(255,255,255,.18); transform:translateY(-1px); } body.panelPage .userMenuDrop{ min-width:220px; border-radius:22px; border:1px solid var(--auth-line); background:linear-gradient(180deg, rgba(8,15,29,.98), rgba(8,14,27,.94)); box-shadow:0 22px 50px rgba(0,0,0,.38); } body.panelPage .userMenuDrop > a, body.panelPage .userMenuDrop > button{ min-height:46px; border-radius:14px; font-family:Manrope,system-ui,sans-serif; font-size:13px; font-weight:700; } body.panelPage .btn, body.panelPage .btn--primary{ min-height:46px; padding:0 18px; border-radius:16px; font-family:Manrope,system-ui,sans-serif; font-weight:800; color:var(--auth-text); background:linear-gradient(135deg, rgba(255,79,216,.18), rgba(56,242,145,.18)); border-color:rgba(255,255,255,.18); } body.panelPage .btn.small{min-height:40px; padding:0 14px; border-radius:14px;} body.panelPage .btn:not(.small):hover{box-shadow:0 16px 38px rgba(0,0,0,.18);} body.panelPage .input, body.panelPage .select, body.panelPage code{ font-family:Manrope, system-ui, sans-serif; } body.panelPage .input, body.panelPage .select{ min-height:56px; border-radius:18px; border:1px solid var(--auth-line); background:rgba(14,22,40,.62); color:var(--auth-text); } body.panelPage .input:focus, body.panelPage .select:focus{ border-color:var(--auth-line-strong); box-shadow:0 0 0 4px rgba(98,255,184,.10); } body.panelPage .card--tight{ border:1px solid var(--auth-line); background:rgba(255,255,255,.03); border-radius:24px; padding:22px; box-shadow:none; } body.panelPage .historyItem{ border-radius:24px; border:1px solid var(--auth-line); background:rgba(255,255,255,.03); } body.panelPage .historyAsset{font-family:Sora,Manrope,sans-serif; font-size:22px;} body.panelPage .historyAmount{font-family:Sora,Manrope,sans-serif; font-size:34px;} body.panelPage .historyStatus{ border:1px solid var(--auth-line); background:rgba(255,255,255,.03); font-size:13px; min-width:116px; } body.panelPage .historyStatus.is-success{background:rgba(56,242,145,.12); color:#a4ffd1; border-color:rgba(56,242,145,.24);} body.panelPage .historyStatus.is-pending{background:rgba(255,79,216,.10); color:#ffd0f7; border-color:rgba(255,79,216,.20);} body.panelPage .historyStatus.is-expired{background:rgba(255,203,97,.10); color:#ffe2a4; border-color:rgba(255,203,97,.22);} body.panelPage .langCard, body.panelPage .langSelectDrop{ border:1px solid var(--auth-line); background:linear-gradient(180deg, rgba(8,15,29,.98), rgba(8,14,27,.94)); } body.panelPage .langOption, body.panelPage .langSelectBtn{ border-color:var(--auth-line); background:rgba(255,255,255,.03); } body.panelPage .langOption.active{ background:linear-gradient(135deg, rgba(255,79,216,.16), rgba(56,242,145,.14)); border-color:rgba(255,255,255,.18); } body.panelPage .docLinks .btn{ min-height:42px; padding:0 16px; } body.panelPage .row{ gap:14px; flex-wrap:wrap; } body.panelPage .panelTopBrand{ border:1px solid var(--auth-line); background:rgba(8,15,29,.82); } body.panelPage .panelTopBrandText{ font-family:Sora,Manrope,sans-serif; font-weight:700; } @keyframes panelBrandLineSettle{ 0% { stroke-dashoffset: 100; opacity: 0; } 14% { opacity: 1; } 72% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes panelBrandDotSettle{ 0% { transform: scale(0.7); opacity: 0; } 24% { opacity: 1; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes panelBrandShineOnce{ 0% { transform: translateX(-85%) rotate(10deg); opacity: 0; } 18% { opacity: .92; } 62% { transform: translateX(92%) rotate(10deg); opacity: .72; } 100% { transform: translateX(92%) rotate(10deg); opacity: 0; } } body.panelPage .settingsCard{ overflow: visible !important; position: relative; z-index: 28; } body.panelPage .settingsStack, body.panelPage .settingLine, body.panelPage .settingLine__controls, body.panelPage .container{ overflow: visible; } body.panelPage .langSelectWrap{ width: min(300px, 100%); } body.panelPage .langSelectBtn{ min-height: 48px; padding: 0 16px; } body.panelPage .langSelectDrop{ top: calc(100% + 8px); max-height: min(340px, 52vh); overflow: hidden; z-index: 2600; } body.panelPage .langScroll{ max-height: min(340px, 52vh); } body.panelPage .panelLayout{ grid-template-columns: minmax(246px, 286px) minmax(0, 1fr); gap: 18px; padding: 18px; } body.panelPage .sidebar{ top: 18px; height: calc(100vh - 36px); padding: 18px 16px 16px; border-radius: 28px; } body.panelPage .card, body.panelPage .doc{ padding: 24px 24px; border-radius: 28px; } body.panelPage .container{ gap: 16px; max-width: 1080px; } body.panelPage .h1, body.panelPage h1{ font-size: clamp(30px, 3.2vw, 44px); } body.panelPage .h2, body.panelPage h2{ font-size: 17px; } body.panelPage .p, body.panelPage p{ font-size: 14px; line-height: 1.62; } body.panelPage .sidebar__sectionTitle{ margin: 18px 6px 8px; font-size: 11px; } body.panelPage .navItem{ min-height: 48px; padding: 0 14px; border-radius: 16px; } body.panelPage .navLabel{ font-size: 13px; } body.panelPage .badge, body.panelPage .legalChip{ min-height: 28px; min-width: 52px; padding: 0 10px; font-size: 11px; } body.panelPage .panelBrand{ min-height: 64px; padding: 10px 12px; gap: 12px; } body.panelPage .panelBrandMeta{ gap: 3px; } body.panelPage .panelBrandName{ font-size: 26px; } body.panelPage .panelBrandSub{ font-size: 13px; } body.panelPage .panelBrandIcon{ width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; } body.panelPage .panelBrandSvg, body.panelPage .brandIconSvg.panelBrandSvg{ width: 22px; height: 22px; display: block; overflow: visible; } body.panelPage .pill-account{ top: 18px !important; right: 18px !important; } body.panelPage .userMenuBtn{ min-height: 42px; padding: 0 12px; gap: 8px; border-radius: 999px; font-size: 13px; } body.panelPage .userMenuBtn > span:nth-child(2){ max-width: none; } body.panelPage .userMenuBalance{ font-weight: 800; color: rgba(255,255,255,.92); letter-spacing: 0; } body.panelPage .userMenuNameText{ max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: rgba(255,255,255,.7); } body.panelPage .userMenuSepMini{ width: 1px; height: 14px; background: rgba(255,255,255,.12); } body.panelPage .userMenuCaret{ font-size: 11px; color: rgba(255,255,255,.68); } body.panelPage .dot{ width: 9px; height: 9px; } body.panelPage .docFooter{ margin-top: 36px; padding: 24px 26px; } body.panelPage .docFooter__title{ font-size: 21px; } body.panelPage .docFooter__links{ gap: 14px; } body.panelPage .settingLine{ grid-template-columns: minmax(0, 1fr) minmax(260px, 332px); gap: 16px; padding: 15px 16px; border-radius: 18px; } body.panelPage .switch{ width: 52px; height: 30px; } body.panelPage .switch::after{ width: 22px; height: 22px; } body.panelPage .switch.is-on::after{ transform: translateX(22px); } body.panelPage .supportActions{ display: flex; flex-wrap: wrap; gap: 10px; } body.panelPage .supportActions .btn{ min-height: 42px; min-width: 160px; padding: 0 18px; } body.panelPage .supportActions a.btn{ text-decoration: none; } @media (max-width: 1180px){ body.panelPage .panelLayout{ grid-template-columns: 1fr; } body.panelPage .sidebar{ position:relative; top:0; height:auto; } body.panelPage .pill-account{ top:18px !important; right:18px !important; } } @media (max-width: 760px){ body.panelPage .panelLayout{ padding:14px; gap:16px; } body.panelPage .sidebar, body.panelPage .card, body.panelPage .doc{ border-radius:24px; } body.panelPage .sidebar{ padding:84px 14px 16px; } body.panelPage .panelBrandName{font-size:26px;} body.panelPage .h1, body.panelPage h1{font-size:34px;} body.panelPage .card, body.panelPage .doc{padding:22px 18px;} body.panelPage .historyItemTop{gap:12px;} body.panelPage .pill-account{top:14px !important; right:14px !important;} } /* ===== v8 panel refinements ===== */ :root{ --sidebarW: 294px; } body.panelPage .main{ padding-top: 96px; } body.panelPage .container{ max-width: 1120px; } body.panelPage .pill-account{ top: 18px; right: 18px; } body.panelPage .userMenuBtn{ min-height: 42px; padding: 0 12px; max-width: min(280px, calc(100vw - 24px)); } body.panelPage .userMenuBtn > span:nth-child(2){ max-width: none; } body.panelPage .panelBrand{ align-items: center; min-height: 64px; padding: 10px 12px; gap: 12px; } body.panelPage .panelBrandMeta{ min-width: 0; display: grid; gap: 5px; align-content: center; } body.panelPage .panelBrandName{ font-size: 24px; line-height: 1; } body.panelPage .panelBrandSub{ font-size: 12px; line-height: 1.2; margin-top: 0; color: rgba(255,255,255,0.62); } body.panelPage .panelBrandIcon{ width: 46px; height: 46px; flex: 0 0 46px; } body.panelPage .panelBrandIcon::after{ animation: panelBrandShineOnce 3.2s ease-out 1 forwards; } body.panelPage .sidebar__nav, body.panelPage .sidebar__footer{ gap: 10px; } body.panelPage .navItem{ width: 100%; min-height: 48px; justify-content: space-between; } body.panelPage .navItem__left{ min-width: 0; flex: 1 1 auto; } body.panelPage .navLabel{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } body.panelPage .badge{ min-width: 52px; justify-content: center; flex: 0 0 52px; font-size: 11px; } body.panelPage .btn, body.panelPage .btn--primary, body.panelPage .btn.primary{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: var(--text); box-shadow: none; } body.panelPage .btn:hover, body.panelPage .btn--primary:hover, body.panelPage .btn.primary:hover{ background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); box-shadow: 0 10px 26px rgba(0,0,0,.2); } .docFooter{ margin-top: 48px; padding: 28px 30px; background: radial-gradient(120% 140% at 84% 18%, rgba(181,107,255,.10), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.09); } .docFooter__head{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: start; } .docFooter__copy{ max-width: 540px; } .docFooter__eyebrow{ text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: rgba(255,255,255,.52); margin-bottom: 10px; } .docFooter__title{ font-family: "Sora", system-ui, sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 10px; } .docFooter__links{ display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; align-items: center; } .docTextLink{ color: rgba(255,255,255,.9); text-decoration: none; font-weight: 700; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.18); } .docTextLink:hover{ color: #fff; border-bottom-color: rgba(255,255,255,.42); } .docFooter__note{ margin-top: 18px; color: var(--mutedB); font-size: 13px; } .settingsCard{ padding: 22px; } .settingsStack{ display: grid; gap: 18px; } .settingLine{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 18px; align-items: center; padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); } .settingLine__head{ min-width: 0; } .settingLine__eyebrow{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.46); margin-bottom: 8px; } .settingLine__controls{ display: grid; gap: 12px; justify-self: end; width: 100%; } .settingTopRow{ display: flex; justify-content: space-between; align-items: center; gap: 12px; } .switch{ width: 58px; height: 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.26); position: relative; cursor: pointer; transition: background .18s ease, border-color .18s ease; } .switch::after{ content: ""; position: absolute; width: 24px; height: 24px; top: 4px; left: 4px; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,232,244,.76)); box-shadow: 0 8px 18px rgba(0,0,0,.28); transition: transform .18s ease; } .switch.is-on{ background: linear-gradient(135deg, rgba(181,107,255,.22), rgba(77,255,178,.16)); border-color: rgba(181,107,255,.3); } .switch.is-on::after{ transform: translateX(24px); } .rangeControl{ display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .rangeControl input[type="range"]{ width: 100%; accent-color: #b56bff; } .rangeControl .rangeValue{ min-width: 44px; text-align: right; color: rgba(255,255,255,.7); font-weight: 700; } .settingsRow{ position: relative; z-index: 15; overflow: visible; } .langSelectWrap{ width: min(340px, 100%); position: relative; } .langSelectWrap.is-open{ z-index: 120; } .langSelectDrop{ z-index: 1500; } .depositHero{ display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .9fr); gap: 18px; } .depositHero__meta, .depositSidebar__stats, .depositQuickAmounts{ display: flex; flex-wrap: wrap; gap: 10px; } .depositMetaCard, .depositQuickAmount{ border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.035); } .depositMetaCard{ padding: 10px 14px; min-width: 112px; } .depositMetaLabel{ display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.48); margin-bottom: 6px; } .depositMetaValue{ font-weight: 800; color: rgba(255,255,255,.92); } .depositSidebarCard{ padding: 22px; } .depositSidebar__stats .depositMetaCard{ flex: 1 1 120px; } .depositGrid{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr); gap: 18px; } .depositComposer, .depositInfoCard{ padding: 24px; } .depositQuickAmounts{ margin: 18px 0 8px; } .depositQuickAmount{ padding: 11px 14px; color: rgba(255,255,255,.88); font: inherit; font-weight: 700; cursor: pointer; } .depositQuickAmount.is-active, .depositQuickAmount:hover{ border-color: rgba(181,107,255,.28); background: rgba(255,255,255,.06); } .depositFormGrid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 18px; } .depositFormGrid .field, .depositSummary, .depositComposerActions, .depositStatusRail, .depositOut{ grid-column: 1 / -1; } .depositFormGrid label{ display: block; margin-bottom: 8px; font-size: 12px; color: rgba(255,255,255,.72); font-weight: 700; } .depositComposerActions{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; } .depositComposerActions .btn{ min-width: 180px; } .depositStatusRail{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 10px; } .depositStatusStep{ padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); } .depositStatusStep strong{ display: block; margin-bottom: 6px; font-size: 13px; } .depositSummaryCard, .depositAddressCard{ border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); padding: 18px; } .depositSummaryCard{ margin-top: 6px; } .depositSummaryCard > .h2, .depositSummaryCard > .p, .depositSummaryPromoLine{ text-align: center; } .depositSummaryValues{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-top: 12px; } .depositSummaryValue{ border-radius: 16px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.08); padding: 12px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; } .depositSummaryValue span{ display: block; font-size: 11px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; } .depositSummaryValue strong{ font-size: 16px; } .depositAddressCode{ display: block; padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); margin: 14px 0 12px; user-select: all; word-break: break-all; color: rgba(255,255,255,.94); } .depositInfoList{ display: grid; gap: 12px; } .depositInfoItem{ padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); } .depositInfoItem span{ display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.48); margin-bottom: 6px; } .depositInfoItem strong{ display:block; } .depositMutedNote{ margin-top: 16px; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); } .informationGrid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; } .infoLinkGrid{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; } .infoDocCard{ padding: 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); text-decoration: none; color: rgba(255,255,255,.9); } .infoDocCard span{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color: rgba(255,255,255,.46); margin-bottom: 10px; } .infoDocCard strong{ display:block; font-size:15px; margin-bottom: 8px; } .infoDocCard p{ margin:0; color: var(--mutedB); font-size:13px; line-height:1.45; } @media (max-width: 1120px){ .depositHero, .depositGrid, .settingLine, .informationGrid, .infoLinkGrid, .docFooter__head{ grid-template-columns: 1fr; } .settingLine__controls{ justify-self: stretch; } .docFooter__links{ justify-content: flex-start; } } @media (max-width: 760px){ body.panelPage .main{ padding-top: 88px; } body.panelPage .pill-account{ top: 16px; right: 12px; } .depositFormGrid, .depositStatusRail, .depositSummaryValues, .infoLinkGrid, .informationGrid{ grid-template-columns: 1fr; } .depositComposerActions .btn{ width: 100%; } .docFooter{ padding: 22px; } } /* ===== v10 hotfix overrides ===== */ [hidden]{ display:none !important; } /* Graph account pill: compact, balanced, with balance chip */ body.graphPage .pill-account{ top: 12px; right: 12px; } body.graphPage .userMenuBtn{ min-height: 42px; padding: 0 12px; gap: 8px; border-radius: 18px; background: linear-gradient(180deg, rgba(28,10,20,.78), rgba(16,6,14,.72)); border: 1px solid rgba(181,107,255,.24); box-shadow: 0 12px 26px rgba(0,0,0,.32); } body.graphPage .userMenuBtn::before{ opacity: .45; filter: blur(8px); } body.graphPage .graphUserBalanceWrap, body.panelPage .graphUserBalanceWrap{ display:inline-flex; align-items:center; gap:6px; min-width: fit-content; white-space:nowrap; } body.graphPage .graphUserBalanceIcon, body.panelPage .graphUserBalanceIcon{ width: 16px; height: 16px; border-radius: 999px; display:inline-flex; align-items:center; justify-content:center; font-size: 10px; font-weight: 900; color: #d8ffe9; background: linear-gradient(180deg, rgba(36,106,68,.95), rgba(20,69,45,.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(73,194,123,.18); } body.graphPage .graphUserBalance, body.panelPage .graphUserBalance{ font-weight: 800; font-size: 13px; color: rgba(255,255,255,.92); line-height: 1; } body.graphPage .graphUserDivider, body.panelPage .graphUserDivider{ width: 1px; height: 14px; background: rgba(255,255,255,.12); } body.graphPage .graphUserName, body.panelPage .graphUserName{ max-width: 72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight: 700; font-size: 13px; color: rgba(255,255,255,.72); line-height: 1; } body.graphPage .graphUserCaret, body.panelPage .graphUserCaret{ font-size: 11px; color: rgba(255,255,255,.68); line-height: 1; } body.graphPage #loginBtn[hidden], body.panelPage #loginBtn[hidden]{ display:none !important; } body.graphPage #authUi[hidden], body.panelPage #authUi[hidden]{ display:none !important; } body.graphPage .btn.small{ min-height: 38px; padding: 0 14px; border-radius: 16px; } /* Graph top-right login button when logged out */ body.graphPage .pill-account .btn.small{ background: linear-gradient(180deg, rgba(177,107,255,.84), rgba(120,76,222,.82)); color: #fff; box-shadow: 0 12px 26px rgba(125,81,230,.18); } /* Brand icon: keep line visible after one-time animation and fix proportions */ body.panelPage .panelBrandIcon, body.graphPage .brandIcon{ aspect-ratio: 1 / 1; } body.panelPage .panelBrandSvg, body.graphPage .brandIconSvg.panelBrandSvg{ width: 28px !important; height: 28px !important; display: block; overflow: visible; } body.panelPage .panelBrandLine, body.panelPage .brandIconSvg .panelBrandLine, body.graphPage .brandIconSvg .panelBrandLine{ stroke-width: 4.5 !important; stroke-dasharray: 100 !important; stroke-dashoffset: 0 !important; opacity: 1 !important; } body.panelPage .panelBrandDot, body.panelPage .brandIconSvg .panelBrandDot, body.graphPage .brandIconSvg .panelBrandDot{ opacity: 1 !important; transform: scale(1) !important; } body.graphPage .brandIcon::after, body.panelPage .panelBrandIcon::after, body.panelPage .brandIcon::after{ animation: panelBrandShineOnce 3.2s ease-out 1 forwards !important; } body.graphPage .brandIconSvg .panelBrandLine, body.panelPage .panelBrandLine, body.panelPage .brandIconSvg .panelBrandLine{ animation: panelBrandLineSettle 3.2s ease-out 1 forwards !important; } body.graphPage .brandIconSvg .panelBrandDot, body.panelPage .panelBrandDot, body.panelPage .brandIconSvg .panelBrandDot{ animation: panelBrandDotSettle 3.2s ease-out 1 forwards !important; } /* Panel brand alignment */ body.panelPage .panelBrand{ align-items: center; } body.panelPage .panelBrandMeta{ justify-content:center; } body.panelPage .panelBrandSub{ line-height: 1.15; } /* Panel overall scale: slightly denser at 100% */ body.panelPage .panelLayout{ grid-template-columns: minmax(228px, 266px) minmax(0, 1fr) !important; gap: 16px !important; padding: 16px !important; } body.panelPage .sidebar{ padding: 16px 14px 14px !important; } body.panelPage .container{ max-width: 1020px !important; gap: 14px !important; } body.panelPage .card, body.panelPage .doc{ padding: 22px !important; } body.panelPage .navItem{ min-height: 46px !important; } body.panelPage .h1, body.panelPage h1{ font-size: clamp(28px, 2.8vw, 40px) !important; } body.panelPage .p, body.panelPage p{ font-size: 13px !important; } /* Settings language switch: use modal instead of inline dropdown */ body.panelPage .langSelectDrop{ display: none !important; } body.panelPage .settingsCard, body.panelPage .settingLine, body.panelPage .settingLine__controls, body.panelPage .container, body.panelPage .main{ overflow: visible !important; } body.panelPage .langOverlay{ z-index: 15000 !important; } body.panelPage .langCard{ width: min(420px, calc(100vw - 28px)); } /* Support buttons */ body.panelPage .supportActions{ align-items: stretch; } body.panelPage .supportActions .btn, body.panelPage .supportActions a.btn{ display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height: 1; min-width: 190px; border-radius: 16px; } /* Deposit pills/cards: reduce roundness and align text */ body.panelPage .depositMetaCard, body.panelPage .depositQuickAmount, body.panelPage .depositStatusStep, body.panelPage .depositInfoItem, body.panelPage .depositSummaryValue, body.panelPage .depositAddressCode{ border-radius: 16px !important; } body.panelPage .depositMetaCard{ min-width: 126px; padding: 12px 16px !important; } body.panelPage .depositMetaLabel, body.panelPage .depositInfoItem span, body.panelPage .depositSummaryValue span{ line-height: 1.1; } body.panelPage .depositMetaValue, body.panelPage .depositQuickAmount, body.panelPage .depositInfoItem strong, body.panelPage .depositStatusStep strong{ display:block; line-height:1.15; } body.panelPage .depositQuickAmounts{ gap: 8px !important; } body.panelPage .depositQuickAmount{ min-height: 44px; padding: 0 16px !important; border-radius: 18px !important; font-size: 13px; font-weight: 800; } body.panelPage .depositQuickAmount.is-active{ border-color: rgba(255,255,255,.54) !important; background: rgba(255,255,255,.04) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); } body.panelPage .depositStatusRail{ gap: 10px !important; } body.panelPage .depositStatusStep{ padding: 14px 14px 12px !important; } body.panelPage .depositInfoItem{ padding: 14px 16px !important; } body.panelPage .depositComposerActions .btn, body.panelPage .depositComposerActions .btn--primary{ min-height: 44px; border-radius: 16px; background: rgba(255,255,255,.03) !important; } /* Panel account pill: thinner and balance-led */ body.panelPage .pill-account{ top: 14px !important; right: 14px !important; } body.panelPage .userMenuBtn{ min-height: 40px !important; padding: 0 12px !important; border-radius: 16px !important; } body.panelPage .graphUserName{ max-width: 64px; } /* Graph page pill thickness */ body.graphPage .stakeMenuBtn, body.graphPage .pill, body.graphPage .btn.small{ border-radius: 16px; } body.graphPage .stakeMenuBtn{ min-height: 40px; padding: 0 12px; gap: 8px; } body.graphPage .pill-priceTop{ border-radius: 16px; min-height: 40px; padding: 0 12px; } body.graphPage .pill-priceTop #price{ font-size: 15px; font-weight: 800; line-height: 1; } /* ========================================================= GRAPH REFRESH вЂ” auth palette + refined USDT icon ========================================================= */ body.graphPage{ background: radial-gradient(1200px 800px at 16% 12%, rgba(102,223,255,.18), transparent 60%), radial-gradient(900px 620px at 82% 18%, rgba(255,79,216,.16), transparent 56%), radial-gradient(860px 620px at 58% 84%, rgba(56,242,145,.08), transparent 26%), #08111f; color:#f5f9ff; } body.graphPage .chartWrap{ background: radial-gradient(900px 520px at 14% 14%, rgba(102,223,255,.12) 0%, transparent 66%), radial-gradient(740px 460px at 82% 18%, rgba(255,79,216,.10) 0%, transparent 62%), linear-gradient(180deg, rgba(21,12,38,.98), rgba(6,16,27,.99)); backdrop-filter: blur(12px); } body.graphPage .chartWrap::before{ background: radial-gradient(860px 520px at 18% 28%, rgba(102,223,255,0.12) 0%, transparent 62%), radial-gradient(700px 420px at 28% 42%, rgba(255,255,255,0.05) 0%, transparent 60%), radial-gradient(900px 620px at 78% 20%, rgba(255,79,216,0.10) 0%, transparent 60%); } body.graphPage .chartWrap::after{ background: radial-gradient(1200px 800px at 40% 40%, transparent 55%, rgba(0,0,0,0.50) 100%), linear-gradient(180deg, rgba(4,10,18,0.02) 0%, rgba(4,10,18,0.20) 100%); } body.graphPage .pill, body.graphPage .userMenuBtn, body.graphPage .stakeMenuBtn, body.graphPage .cameraGlassBtn{ border:1px solid rgba(102,223,255,.16); background:linear-gradient(180deg, rgba(8,15,29,.74), rgba(6,12,25,.78)); color:#f5f9ff; box-shadow:0 18px 42px rgba(0,0,0,.34); } body.graphPage .pill::before, body.graphPage .userMenuBtn::before, body.graphPage .stakeMenuBtn::before, body.graphPage .cameraGlassBtn::before{ background: radial-gradient(circle at 24% 28%, rgba(102,223,255,.24), transparent 58%), radial-gradient(circle at 76% 72%, rgba(255,79,216,.16), transparent 62%); opacity:.9; } body.graphPage .dot, body.graphPage .stakeDot{ background: radial-gradient(circle at 34% 34%, rgba(255,255,255,.98), rgba(218,238,255,.94) 58%, rgba(148,214,255,.92) 100%); box-shadow:0 0 14px rgba(148,214,255,.52); } body.graphPage .pill.up #price{ color: var(--graph-green); } body.graphPage .pill.down #price{ color:#ff6ca9; } body.graphPage .input, body.graphPage .stakeInput, body.graphPage .stakeMenuDrop, body.graphPage .userMenuDrop{ border-color:rgba(102,223,255,.14); background:linear-gradient(180deg, rgba(8,15,29,.92), rgba(6,12,25,.94)); color:#f5f9ff; } body.graphPage .input:focus, body.graphPage .stakeInput:focus{ border-color:rgba(102,223,255,.36); box-shadow:0 0 0 3px rgba(102,223,255,.14); } body.graphPage .btn.primary, body.graphPage .btn{ color:#06101b; background:linear-gradient(180deg, rgba(102,223,255,.96), rgba(56,242,145,.92)); box-shadow:0 16px 34px rgba(56,242,145,.18); } body.graphPage .miniBtn, body.graphPage .stakeChip{ border-color:rgba(102,223,255,.14); background:rgba(255,255,255,.04); color:rgba(245,249,255,.88); } body.graphPage .stakeChip.is-active, body.graphPage .miniBtn:hover{ border-color:rgba(102,223,255,.28); background:rgba(102,223,255,.10); } body.graphPage .graphUserBalanceIcon, body.panelPage .graphUserBalanceIcon{ width: 22px; height: 22px; padding: 0; background: transparent; box-shadow: none; } body.graphPage .usdtIconSvg, body.panelPage .usdtIconSvg{ width: 100%; height: 100%; display:block; } body.graphPage .usdtIconCoin, body.panelPage .usdtIconCoin{ fill:#2ea87f; stroke:rgba(255,255,255,.18); stroke-width:2; } body.graphPage .usdtIconMark, body.panelPage .usdtIconMark, body.graphPage .usdtIconRing, body.panelPage .usdtIconRing{ fill:none; stroke:#f8fffb; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; } body.graphPage .usdtIconMark, body.panelPage .usdtIconMark{ fill:#f8fffb; stroke:none; } body.graphPage .usdtIconRing, body.panelPage .usdtIconRing{ fill:none; stroke:#f8fffb; } /* ========================================================= GRAPH UI POLISH V4 вЂ” tether icon, point, menus and stake card ========================================================= */ body.graphPage .usdtIconTop, body.panelPage .usdtIconTop{ fill:#f8fffb; } body.graphPage .usdtIconRing, body.panelPage .usdtIconRing{ fill:none; stroke:#f8fffb; stroke-width:3.4; } body.graphPage .graphUserBalanceIcon, body.panelPage .graphUserBalanceIcon, body.graphPage .stakeBalanceIcon{ width:22px; height:22px; padding:0; background:transparent; box-shadow:none; } body.graphPage .stakeBalanceIcon, body.panelPage .stakeBalanceIcon{ display:inline-flex; align-items:center; justify-content:center; } body.graphPage .stakeBalanceIcon::before, body.panelPage .stakeBalanceIcon::before{ content:""; width:100%; height:100%; display:block; background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%232ea87f' stroke='rgba(255,255,255,0.18)' stroke-width='2'/%3E%3Cpath d='M17 19h30v8.5H36.5V49h-9V27.5H17z' fill='%23f8fffb'/%3E%3Cellipse cx='32' cy='34' rx='16.5' ry='5.2' fill='none' stroke='%23f8fffb' stroke-width='3.4'/%3E%3C/svg%3E"); } body.panelPage .pill-account{ right: calc(env(safe-area-inset-right) + 24px) !important; } body.graphPage .userMenuBtn, body.panelPage .userMenuBtn{ min-height:44px !important; border-radius:18px !important; background:linear-gradient(180deg, rgba(26, 12, 37, .82), rgba(8, 15, 31, .84)) !important; border:1px solid rgba(109, 214, 255, .18) !important; box-shadow:0 18px 40px rgba(0,0,0,.34) !important; } body.graphPage .userMenuDrop, body.panelPage .userMenuDrop{ width: 228px; padding: 12px; border-radius: 24px; border: 1px solid rgba(109, 214, 255, .18); background: linear-gradient(180deg, rgba(11, 18, 37, .92), rgba(5, 11, 24, .96)); backdrop-filter: blur(22px); box-shadow: 0 24px 48px rgba(0,0,0,.36); } body.graphPage .userMenuDrop > a, body.graphPage .userMenuDrop > button, body.panelPage .userMenuDrop > a, body.panelPage .userMenuDrop > button{ min-height: 46px; border-radius: 16px; padding: 0 14px; display:flex; align-items:center; color: rgba(245,249,255,.88); background: transparent; } body.graphPage .userMenuDrop > a:hover, body.graphPage .userMenuDrop > button:hover, body.panelPage .userMenuDrop > a:hover, body.panelPage .userMenuDrop > button:hover{ background: rgba(102, 223, 255, .06); } body.graphPage .userMenuDrop .userMenuSep, body.panelPage .userMenuDrop .userMenuSep{ margin: 8px 4px; } body.graphPage .stakeMenuDrop{ width: min(360px, calc(100vw - 28px)); padding: 16px; border-radius: 26px; border: 1px solid rgba(109, 214, 255, .18); background: linear-gradient(180deg, rgba(22, 9, 31, .78), rgba(7, 16, 30, .88)); backdrop-filter: blur(24px); box-shadow: 0 28px 56px rgba(0,0,0,.36); } body.graphPage .stakeDropHeader{ align-items:center; padding: 2px 2px 14px; } body.graphPage .stakeDropBalance{ display:flex; align-items:center; gap:10px; font-size:14px; color: rgba(245,249,255,.78); } body.graphPage .stakeDropBalanceLabel{ color: rgba(245,249,255,.82); } body.graphPage .stakeDropBalanceValue{ display:inline-flex; align-items:center; gap:8px; font-weight:800; color:#f5f9ff; } body.graphPage .stakeAmountCard{ border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(54, 7, 35, .22), rgba(9, 18, 34, .16)); } body.graphPage .stakeMenuDrop .userMenuSep, body.graphPage .stakeListHeader, body.graphPage .betsListDrop{ display:none !important; } /* ========================================================= GRAPH UI CLEANUP V5 вЂ” flat background, gray grid, glass stake card ========================================================= */ body.graphPage{ background:#0c0f14; } body.graphPage .chartWrap{ background:#0c0f14; backdrop-filter:none; } body.graphPage .chartWrap::before, body.graphPage .chartWrap::after{ content:none; } body.graphPage .labelsY{ background:transparent; } body.graphPage .graphUserBalanceIcon, body.panelPage .graphUserBalanceIcon, body.graphPage .stakeBalanceIcon, body.panelPage .stakeBalanceIcon{ width:20px; height:20px; } body.graphPage .usdtIconCoin, body.panelPage .usdtIconCoin{ fill:#35b996; stroke:rgba(255,255,255,.24); stroke-width:2.2; } body.graphPage .usdtIconTop, body.panelPage .usdtIconTop{ fill:#f7fbff; } body.graphPage .usdtIconRing, body.panelPage .usdtIconRing{ fill:none; stroke:#f7fbff; stroke-width:3.2; } body.graphPage .stakeBalanceIcon::before, body.panelPage .stakeBalanceIcon::before{ background:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%2335b996' stroke='rgba(255,255,255,0.24)' stroke-width='2.2'/%3E%3Cpath d='M18 18.5h28v8H35.5V49.5h-7V26.5H18z' fill='%23f7fbff'/%3E%3Cellipse cx='32' cy='32.25' rx='16.75' ry='5.6' fill='none' stroke='%23f7fbff' stroke-width='3.2'/%3E%3C/svg%3E"); } body.graphPage .stakeMenuDrop{ width:min(360px, calc(100vw - 28px)); padding:16px; border-radius:26px; border:1px solid rgba(191, 201, 216, .10); background:rgba(12, 15, 20, .36); backdrop-filter:blur(30px) saturate(112%); -webkit-backdrop-filter:blur(30px) saturate(112%); box-shadow:0 24px 54px rgba(0,0,0,.22); } body.graphPage .stakeDropTitle, body.graphPage .stakeDropBalance, body.graphPage .stakeDropBalanceLabel, body.graphPage .stakeDropBalanceValue{ color:rgba(246,249,255,.88); } body.graphPage .stakeAmountCard{ border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.025); } body.graphPage .stakeInput{ background:rgba(9, 12, 17, .34); border-color:rgba(169, 182, 201, .16); } body.graphPage .stakeInput:focus{ border-color:rgba(189, 200, 216, .24); box-shadow:0 0 0 3px rgba(255,255,255,.04); } body.graphPage .stakeChip{ border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03); } body.graphPage .stakeChip:hover, body.graphPage .stakeChip.is-active{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.06); } body.graphPage .stakeMaxBtn{ border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.055); color:rgba(255,255,255,.92); } /* ========================================================= GRAPH GRID FINAL V7 вЂ” bigger intersections, darker stake glass, fixed account name ========================================================= */ body.graphPage{ background:#0d1014; } body.graphPage .chartWrap{ background:#0d1014; backdrop-filter:none; } body.graphPage .userMenuBtn, body.panelPage .userMenuBtn{ display:inline-flex; align-items:center; } body.graphPage .graphUserName, body.panelPage .graphUserName{ display:inline-block; min-width:48px; max-width:88px; flex:0 1 auto; } body.graphPage .stakeMenuDrop{ border-radius:18px; border:1px solid rgba(168, 176, 188, .11); background:rgba(13, 16, 20, .58); backdrop-filter:blur(26px) saturate(108%); -webkit-backdrop-filter:blur(26px) saturate(108%); box-shadow:0 20px 44px rgba(0,0,0,.26); } body.graphPage .stakeAmountCard{ border-radius:14px; background:rgba(255,255,255,.018); border:1px solid rgba(255,255,255,.06); } body.graphPage .stakeInput{ border-radius:12px; background:rgba(10, 13, 18, .42); } body.graphPage .stakeChip{ border-radius:999px; } /* ========================================================= GRAPH GRID V8 вЂ” deeper fade outside bet zone, larger intersections, flatter stake glass ========================================================= */ body.graphPage .stakeMenuDrop{ border-radius:14px; border:1px solid rgba(168, 176, 188, .10); background:rgba(13, 16, 20, .74); backdrop-filter:blur(28px) saturate(102%); -webkit-backdrop-filter:blur(28px) saturate(102%); box-shadow:0 18px 36px rgba(0,0,0,.22); } body.graphPage .stakeAmountCard{ border-radius:11px; background:rgba(255,255,255,.014); border:1px solid rgba(255,255,255,.05); } body.graphPage .stakeInput{ border-radius:10px; background:rgba(10, 13, 18, .54); } /* ========================================================= GRAPH GRID V9 вЂ” darker stake glass, flatter chips, chart-toned panel ========================================================= */ body.graphPage .stakeMenuDrop{ border-radius:12px; border:1px solid rgba(168, 176, 188, .09); background:rgba(10, 13, 18, .82); backdrop-filter:blur(28px) saturate(98%); -webkit-backdrop-filter:blur(28px) saturate(98%); box-shadow:0 18px 36px rgba(0,0,0,.20); } body.graphPage .stakeAmountCard{ border-radius:10px; background:rgba(8, 11, 15, .56); border:1px solid rgba(255,255,255,.045); } body.graphPage .stakeInput{ border-radius:9px; background:rgba(9, 12, 17, .66); } body.graphPage .stakeChip{ border-radius:14px; background:rgba(10, 13, 18, .58); border-color:rgba(255,255,255,.075); } /* ========================================================= GRAPH GRID V10 вЂ” smoother transition, neutral stake panel, tighter chips ========================================================= */ body.graphPage .stakeMenuDrop{ border-radius:10px; border:1px solid rgba(176, 184, 196, .08); background:linear-gradient(180deg, rgba(9, 12, 16, .84), rgba(6, 9, 13, .88)); backdrop-filter:blur(30px) saturate(96%); -webkit-backdrop-filter:blur(30px) saturate(96%); box-shadow:0 18px 34px rgba(0,0,0,.18); } body.graphPage .stakeAmountCard{ border-radius:9px; background:rgba(8, 11, 15, .42); border:1px solid rgba(255,255,255,.038); } body.graphPage .stakeInput{ border-radius:8px; background:rgba(6, 9, 13, .78); border-color:rgba(154, 166, 184, .13); } body.graphPage .stakeChip{ border-radius:11px; background:rgba(7, 10, 15, .62); border-color:rgba(164, 174, 190, .11); } body.graphPage .stakeChip:hover, body.graphPage .stakeChip.is-active{ background:rgba(15, 19, 26, .76); border-color:rgba(214, 222, 236, .20); } /* regression marker: body.graphPage .stakeMenuDrop{ background:rgba(12, 15, 20, .36); backdrop-filter:blur(30px) saturate(112%); } */ /* ========================================================= GRAPH LEGACY RESTORE вЂ” original graph visuals with auth palette ========================================================= */ body.graphPage{ background: radial-gradient(1200px 800px at 16% 12%, rgba(102,223,255,.18), transparent 60%), radial-gradient(900px 620px at 82% 18%, rgba(255,79,216,.16), transparent 56%), radial-gradient(860px 620px at 58% 84%, rgba(56,242,145,.08), transparent 26%), linear-gradient(135deg, var(--graph-bg), var(--graph-bg2)); } body.graphPage .chartWrap{ background: radial-gradient(900px 520px at 14% 14%, rgba(102,223,255,.14) 0%, transparent 66%), radial-gradient(740px 460px at 82% 18%, rgba(255,79,216,.12) 0%, transparent 62%), linear-gradient(180deg, rgba(21,12,38,.94), rgba(6,16,27,.98)); backdrop-filter: blur(12px); } body.graphPage .chartWrap::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(860px 520px at 18% 28%, rgba(102,223,255,0.10) 0%, transparent 62%), radial-gradient(900px 620px at 78% 20%, rgba(255,79,216,0.08) 0%, transparent 60%); } body.graphPage .chartWrap::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(4,10,18,0.02) 0%, rgba(4,10,18,0.18) 100%); } body.graphPage .stakeMenuDrop{ border-radius:14px; border:1px solid rgba(102,223,255,.14); background:linear-gradient(180deg, rgba(20, 10, 34, .78), rgba(7, 14, 24, .86)); backdrop-filter:blur(24px) saturate(110%); -webkit-backdrop-filter:blur(24px) saturate(110%); box-shadow:0 22px 42px rgba(0,0,0,.28); } body.graphPage .stakeAmountCard{ border-radius:12px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); } body.graphPage .stakeInput{ border-radius:10px; background:rgba(7, 10, 18, .72); border-color:rgba(102,223,255,.14); } body.graphPage .stakeChip{ border-radius:12px; background:rgba(14, 10, 28, .58); border-color:rgba(102,223,255,.16); } body.graphPage .stakeChip:hover, body.graphPage .stakeChip.is-active{ background:rgba(28, 17, 46, .80); border-color:rgba(255,255,255,.22); } /* ========================================================= GRAPH AUTH POLISH V12 вЂ” site-colored stake panel, refined toggles, titles ========================================================= */ body.graphPage .stakeMenuDrop{ border-radius:12px; border:1px solid rgba(155,121,255,.15); background:linear-gradient(180deg, rgba(20, 14, 34, .90), rgba(11, 10, 24, .94)); backdrop-filter:blur(24px) saturate(108%); -webkit-backdrop-filter:blur(24px) saturate(108%); box-shadow:0 20px 42px rgba(0,0,0,.24); } body.graphPage .stakeAmountCard{ border-radius:11px; background:rgba(15, 11, 28, .54); border:1px solid rgba(255,255,255,.055); } body.graphPage .stakeInput{ border-radius:10px; background:rgba(7, 10, 19, .82); border-color:rgba(138, 164, 208, .12); } body.graphPage .stakeChip{ border-radius:10px; background:rgba(16, 12, 31, .58); border-color:rgba(155,121,255,.18); } body.graphPage .stakeChip:hover, body.graphPage .stakeChip.is-active{ background:rgba(27, 18, 46, .84); border-color:rgba(231, 238, 255, .24); } body.graphPage .stakeMaxBtn{ border-color:rgba(155,121,255,.18); background:rgba(42, 29, 62, .62); } /* ========================================================= GRAPH AUTH POLISH V13 вЂ” fixed right scale, site-colored stake panel, unified multiplier font ========================================================= */ body.graphPage .stakeMenuDrop{ border-radius:12px; border:1px solid rgba(135, 157, 192, .12); background:linear-gradient(180deg, rgba(10, 13, 21, .94), rgba(7, 10, 17, .96)); backdrop-filter:blur(22px) saturate(105%); -webkit-backdrop-filter:blur(22px) saturate(105%); box-shadow:0 22px 44px rgba(0,0,0,.30); } body.graphPage .stakeAmountCard{ border-radius:11px; background:rgba(11, 13, 22, .66); border:1px solid rgba(255,255,255,.05); } body.graphPage .stakeInput{ background:rgba(5, 8, 14, .82); border-color:rgba(130, 150, 184, .14); } body.graphPage .stakeMaxBtn{ border-color:rgba(135,157,192,.16); background:rgba(31, 37, 56, .56); color:rgba(242,246,255,.92); } body.graphPage .stakeChip{ background:rgba(12, 15, 24, .74); border-color:rgba(132, 149, 184, .18); } body.graphPage .stakeChip:hover, body.graphPage .stakeChip.is-active{ background:rgba(24, 29, 42, .90); border-color:rgba(235, 242, 255, .22); } /* ========================================================= GRAPH AUTH POLISH V14 вЂ” stake panel matches main-site shell ========================================================= */ body.graphPage .stakeMenuDrop{ border-radius:12px !important; border:1px solid rgba(255,255,255,.09) !important; background:linear-gradient(180deg, rgba(8, 15, 29, .96), rgba(6, 12, 25, .94)) !important; backdrop-filter:blur(22px) saturate(108%) !important; -webkit-backdrop-filter:blur(22px) saturate(108%) !important; box-shadow:0 22px 52px rgba(0,0,0,.34) !important; } body.graphPage .stakeAmountCard{ border-radius:11px !important; background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important; border:1px solid rgba(255,255,255,.08) !important; } body.graphPage .stakeInput{ background:rgba(6, 12, 25, .92) !important; border-color:rgba(255,255,255,.09) !important; } body.graphPage .stakeMaxBtn{ border-color:rgba(255,255,255,.12) !important; background:rgba(255,255,255,.045) !important; color:rgba(245,249,255,.94) !important; } body.graphPage .stakeChip{ background:rgba(255,255,255,.03) !important; border-color:rgba(255,255,255,.10) !important; } body.graphPage .stakeChip:hover, body.graphPage .stakeChip.is-active{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.18) !important; } /* ========================================================= GRAPH MOBILE V15 вЂ” phone layout + safe areas + panel tuning ========================================================= */ @media (max-width: 760px){ body.graphPage{ overflow:hidden; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } body.graphPage .chartWrap{ background:linear-gradient(180deg, rgba(8, 15, 29, .98), rgba(6, 12, 25, .98)); } body.graphPage .chartWrap::before{ inset:0; background:radial-gradient(120% 85% at 18% 12%, rgba(255,255,255,.05), transparent 60%); filter:blur(12px); opacity:.55; } body.graphPage .chartWrap::after{ opacity:.38; } body.graphPage .pill-priceTop{ top:calc(env(safe-area-inset-top) + 10px); left:12px; transform:scale(.94); transform-origin:left top; } body.graphPage .pill-account{ top:calc(env(safe-area-inset-top) + 10px); right:12px; max-width:calc(100vw - 110px); } body.graphPage .userMenuBtn{ min-height:42px; padding:0 10px; gap:8px; max-width:100%; } body.graphPage #accountPill{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.graphPage .cameraUi{ top:calc(env(safe-area-inset-top) + 64px); right:12px; gap:10px; } body.graphPage .cameraGlassBtn{ width:42px; height:42px; border-radius:14px; } body.graphPage .pill-logoBottom{ left:12px; bottom:calc(env(safe-area-inset-bottom) + 12px); transform:scale(.88); transform-origin:left bottom; } body.graphPage .pill-stakeBottom{ left:12px; right:12px; bottom:calc(env(safe-area-inset-bottom) + 12px); } body.graphPage .pill-stakeBottom .stakeMenu{ width:100%; display:flex; justify-content:flex-end; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ min-height:44px; padding-inline:14px; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ position:fixed !important; left:12px !important; right:12px !important; width:auto !important; min-width:0 !important; bottom:calc(env(safe-area-inset-bottom) + 64px) !important; top:auto !important; max-height:min(48dvh, 420px); overflow:auto; border-radius:18px !important; } body.graphPage .stakeDropHeader{ gap:10px; } body.graphPage .stakeAmountCard{ padding:14px !important; border-radius:15px !important; } body.graphPage .stakePresets{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; } body.graphPage .stakeChip{ min-width:0; padding:11px 0; text-align:center; } body.panelPage{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } body.panelPage .pill-account{ top:calc(env(safe-area-inset-top) + 10px); right:12px; } body.panelPage .panelLayout{ padding:12px 12px calc(env(safe-area-inset-bottom) + 24px); gap:12px; } body.panelPage .sidebar{ position:static; width:auto; height:auto; padding:12px; border-radius:20px; background:linear-gradient(180deg, rgba(8, 15, 29, .88), rgba(6, 12, 25, .84)); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } body.panelPage .sidebar__nav, body.panelPage .sidebar__footer{ display:flex; gap:10px; overflow:auto; padding-bottom:2px; scrollbar-width:none; } body.panelPage .sidebar__nav::-webkit-scrollbar, body.panelPage .sidebar__footer::-webkit-scrollbar{ display:none; } body.panelPage .navItem{ min-width:max-content; padding-inline:14px; } body.panelPage .main{ margin-left:0; padding-top:76px; } body.panelPage .container{ gap:12px; } body.panelPage .card, body.panelPage .doc, body.panelPage .settingsCard{ border-radius:18px; padding:16px; } body.panelPage .row{ flex-direction:column; align-items:stretch !important; gap:12px; } } @media (max-width: 420px){ body.graphPage .pill-priceTop, body.graphPage .pill-logoBottom{ transform:scale(.88); } body.graphPage .pill-stakeBottom .stakeMenuDrop{ left:10px !important; right:10px !important; bottom:calc(env(safe-area-inset-bottom) + 58px) !important; } body.graphPage .stakePresets{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } /* ========================================================= MOBILE RESCUE V16 вЂ” real phone layout fixes ========================================================= */ @media (max-width: 760px){ body.graphPage .pill-priceTop{ top:calc(env(safe-area-inset-top) + 8px) !important; left:10px !important; transform:scale(.82) !important; } body.graphPage .pill-account{ top:calc(env(safe-area-inset-top) + 8px) !important; right:10px !important; max-width:calc(100vw - 112px) !important; } body.graphPage .userMenuBtn{ min-height:40px !important; padding:0 10px !important; gap:6px !important; border-radius:14px !important; } body.graphPage .graphUserDivider, body.graphPage .graphUserName, body.graphPage .graphUserCaret{ display:none !important; } body.graphPage .graphUserBalanceWrap{ gap:6px !important; } body.graphPage .graphUserBalance{ font-size:15px !important; } body.graphPage .cameraUi{ top:calc(env(safe-area-inset-top) + 56px) !important; right:10px !important; } body.graphPage .cameraGlassBtn{ width:40px !important; height:40px !important; border-radius:14px !important; } body.graphPage .pill-logoBottom{ left:10px !important; bottom:calc(env(safe-area-inset-bottom) + 10px) !important; transform:none !important; } body.graphPage .pill-logoBottom .brandPill{ min-width:auto !important; padding:0 12px !important; border-radius:18px !important; } body.graphPage .pill-logoBottom .brandName{ display:none !important; } body.graphPage .pill-stakeBottom{ left:auto !important; right:10px !important; bottom:calc(env(safe-area-inset-bottom) + 10px) !important; } body.graphPage .pill-stakeBottom .stakeMenu{ width:auto !important; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ min-height:42px !important; padding:0 14px !important; border-radius:16px !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ left:10px !important; right:10px !important; bottom:calc(env(safe-area-inset-bottom) + 62px) !important; max-height:min(56dvh, 430px) !important; border-radius:20px !important; } body.panelPage{ overflow-x:hidden; } body.panelPage .pill-account{ position:static !important; top:auto !important; right:auto !important; left:auto !important; display:flex !important; justify-content:flex-end !important; margin:12px 12px 0 !important; padding:0 !important; } body.panelPage .userMenuBtn{ min-height:42px !important; padding:0 12px !important; gap:8px !important; max-width:100% !important; } body.panelPage .graphUserName{ max-width:84px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } body.panelPage .panelLayout{ display:block !important; min-height:auto !important; padding:12px 12px calc(env(safe-area-inset-bottom) + 18px) !important; } body.panelPage .sidebar{ position:static !important; width:100% !important; height:auto !important; padding:14px !important; border-radius:22px !important; display:block !important; margin:0 !important; background:linear-gradient(180deg, rgba(7, 15, 29, .94), rgba(6, 12, 25, .90)) !important; } body.panelPage .sidebar::after, body.panelPage .sidebar__sectionTitle, body.panelPage .sidebar__divider, body.panelPage .sidebar__footer{ display:none !important; } body.panelPage .panelBrand{ display:flex !important; align-items:center !important; gap:12px !important; width:100% !important; min-width:0 !important; margin:0 0 12px !important; padding:12px 14px !important; border-radius:18px !important; } body.panelPage .panelBrandMeta{ min-width:0 !important; } body.panelPage .panelBrandName{ font-size:24px !important; line-height:1 !important; } body.panelPage .panelBrandSub{ display:block !important; margin-top: 3px !important; font-size: 10px !important; line-height: 1.1 !important; color: rgba(184, 202, 228, .72) !important; white-space: nowrap !important; } body.panelPage .sidebar__nav{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; overflow:visible !important; padding-bottom:0 !important; } body.panelPage .navItem{ width:100% !important; min-width:0 !important; padding:14px 14px !important; border-radius:18px !important; } body.panelPage .navItem__left{ width:100% !important; min-width:0 !important; } body.panelPage .navLabel{ white-space:normal !important; } body.panelPage .main{ margin-left:0 !important; padding-top:12px !important; } body.panelPage .container{ gap:12px !important; } body.panelPage .card, body.panelPage .doc, body.panelPage .settingsCard{ padding:16px !important; border-radius:20px !important; } body.panelPage .row{ flex-direction:column !important; align-items:stretch !important; gap:12px !important; } body.panelPage .docLinks{ display:grid !important; grid-template-columns:1fr !important; } body.panelPage .settingLine__controls, body.panelPage .settingLine__head, body.panelPage .langSelectWrap, body.panelPage .langSelectBtn{ width:100% !important; } body.panelPage .switch{ margin:0 !important; align-self:center !important; } } @media (max-width: 420px){ body.graphPage .pill-priceTop{ transform:scale(.76) !important; } body.graphPage .graphUserBalance{ font-size:14px !important; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ padding:0 12px !important; } body.panelPage .pill-account{ margin:10px 10px 0 !important; } body.panelPage .panelLayout{ padding:10px 10px calc(env(safe-area-inset-bottom) + 16px) !important; } body.panelPage .panelBrandName{ font-size:21px !important; } } /* ========================================================= MOBILE PASS V17 вЂ” phone-ready panel + compact chart frame ========================================================= */ @media (max-width: 760px){ body.panelPage .panelTopBrand{ display:none !important; } body.panelPage .sidebar{ display:grid !important; grid-template-columns:1fr !important; align-content:start !important; gap:12px !important; } body.panelPage .sidebar > *{ margin:0 !important; } body.panelPage .sidebar .panelBrand{ display:flex !important; margin:0 !important; padding:12px 14px !important; border-radius:18px !important; background:linear-gradient(180deg, rgba(8, 15, 29, .92), rgba(6, 12, 25, .88)) !important; border:1px solid rgba(255,255,255,.09) !important; box-shadow:0 18px 42px rgba(0,0,0,.26) !important; } body.panelPage .sidebar .panelBrandIcon{ width:48px !important; height:48px !important; flex:0 0 48px !important; border-radius:16px !important; } body.panelPage .sidebar .panelBrandName{ font-size:22px !important; } body.panelPage .sidebar__nav{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; overflow:visible !important; } body.panelPage .sidebar__nav + .sidebar__nav{ margin-top:0 !important; } body.panelPage .navItem{ width:100% !important; min-height:54px !important; padding:0 16px !important; border-radius:18px !important; margin:0 !important; } body.panelPage .userMenuDrop{ background:linear-gradient(180deg, rgba(8, 15, 29, .98), rgba(6, 12, 25, .96)) !important; border-color:rgba(132, 149, 184, .16) !important; box-shadow:0 22px 56px rgba(0,0,0,.38) !important; } body.panelPage .settingsCard > .h2{ margin-top:6px !important; font-size:19px !important; line-height:1.12 !important; } body.panelPage .settingsStack{ gap:14px !important; } body.panelPage .settingLine{ grid-template-columns:1fr !important; gap:14px !important; align-items:start !important; padding:16px !important; border-radius:20px !important; } body.panelPage .settingLine__head{ display:grid !important; gap:6px !important; } body.panelPage .settingLine__head .h2{ font-size:18px !important; line-height:1.14 !important; } body.panelPage .settingLine__head .p{ margin:0 !important; font-size:14px !important; line-height:1.52 !important; } body.panelPage .settingLine__controls{ justify-self:stretch !important; gap:10px !important; } body.panelPage .settingTopRow{ align-items:center !important; gap:10px !important; } body.panelPage .rangeControl{ grid-template-columns:minmax(0, 1fr) auto !important; gap:10px !important; } body.graphPage{ background:linear-gradient(180deg, #07111f, #050b16) !important; } body.graphPage .chartWrap{ position:fixed !important; inset:calc(env(safe-area-inset-top) + 68px) 12px calc(env(safe-area-inset-bottom) + 96px) 12px !important; border-radius:26px !important; overflow:hidden !important; border:1px solid rgba(132,149,184,.12) !important; box-shadow:0 26px 60px rgba(0,0,0,.34) !important; background:linear-gradient(180deg, rgba(8, 15, 29, .98), rgba(6, 12, 25, .98)) !important; } body.graphPage .chartWrap::before{ inset:0 !important; opacity:.42 !important; background:radial-gradient(120% 90% at 18% 16%, rgba(255,255,255,.04), transparent 58%) !important; filter:blur(10px) !important; } body.graphPage .chartWrap::after{ opacity:.18 !important; } body.graphPage .pill-priceTop{ top:calc(env(safe-area-inset-top) + 12px) !important; left:12px !important; transform:scale(.82) !important; } body.graphPage .pill-account{ top:calc(env(safe-area-inset-top) + 12px) !important; right:12px !important; max-width:calc(100vw - 148px) !important; } body.graphPage .cameraUi{ top:calc(env(safe-area-inset-top) + 84px) !important; right:18px !important; } body.graphPage .cameraGlassBtn{ width:38px !important; height:38px !important; border-radius:14px !important; } body.graphPage .pill-logoBottom{ left:12px !important; bottom:calc(env(safe-area-inset-bottom) + 12px) !important; } body.graphPage .pill-logoBottom .brandPill{ border:none !important; background:rgba(8, 15, 29, .82) !important; box-shadow:0 16px 34px rgba(0,0,0,.26) !important; } body.graphPage .pill-logoBottom .brandIcon{ background:linear-gradient(135deg, rgba(120, 84, 255, .86), rgba(181, 107, 255, .92)) !important; box-shadow:none !important; } body.graphPage .pill-stakeBottom{ right:12px !important; bottom:calc(env(safe-area-inset-bottom) + 12px) !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ bottom:calc(env(safe-area-inset-bottom) + 70px) !important; max-height:min(42dvh, 360px) !important; } } @media (max-width: 420px){ body.panelPage .sidebar .panelBrandName{ font-size:20px !important; } body.panelPage .navItem{ min-height:52px !important; } body.graphPage .chartWrap{ inset:calc(env(safe-area-inset-top) + 64px) 10px calc(env(safe-area-inset-bottom) + 90px) 10px !important; border-radius:24px !important; } } /* ========================================================= MOBILE PASS V18 вЂ” phone trade frame + compact stake inputs ========================================================= */ @media (max-width: 760px){ body.panelPage .sidebar__nav{ gap:12px !important; } body.panelPage .navItem{ display:flex !important; align-items:center !important; justify-content:flex-start !important; } body.panelPage .settingLine__head .h2{ font-size:16px !important; line-height:1.16 !important; } body.panelPage .settingTopRow .p{ font-size:13px !important; line-height:1.15 !important; } body.panelPage .rangeControl{ align-items:center !important; } body.graphPage .chartWrap{ inset:calc(env(safe-area-inset-top) + 74px) 12px calc(env(safe-area-inset-bottom) + 124px) 12px !important; border-radius:24px !important; } body.graphPage .cameraUi{ display:none !important; } body.graphPage .pill-logoBottom{ top:calc(env(safe-area-inset-top) + 12px) !important; bottom:auto !important; left:50% !important; transform:translateX(-50%) scale(.82) !important; transform-origin:center top !important; z-index:20 !important; } body.graphPage .pill-logoBottom .brandPill{ border:none !important; background:rgba(8, 15, 29, .82) !important; box-shadow:0 14px 28px rgba(0,0,0,.24) !important; } body.graphPage .pill-logoBottom .brandName{ display:none !important; } body.graphPage .pill-logoBottom .brandIcon{ box-shadow:none !important; } body.graphPage .pill-account{ max-width:calc(100vw - 148px) !important; } body.graphPage .userMenuBtn{ min-height:40px !important; padding:0 10px !important; } body.graphPage .pill-stakeBottom{ left:12px !important; right:12px !important; bottom:calc(env(safe-area-inset-bottom) + 12px) !important; } body.graphPage .pill-stakeBottom .stakeMenu{ width:100% !important; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ display:none !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ display:block !important; position:fixed !important; left:12px !important; right:12px !important; bottom:calc(env(safe-area-inset-bottom) + 12px) !important; top:auto !important; width:auto !important; min-width:0 !important; max-height:none !important; overflow:visible !important; padding:10px 12px !important; border-radius:18px !important; background:linear-gradient(180deg, rgba(8, 15, 29, .95), rgba(6, 12, 25, .93)) !important; border:1px solid rgba(255,255,255,.08) !important; box-shadow:0 18px 34px rgba(0,0,0,.32) !important; backdrop-filter:blur(20px) !important; -webkit-backdrop-filter:blur(20px) !important; } body.graphPage .stakeDropHeader, body.graphPage .stakePresets{ display:none !important; } body.graphPage .stakeAmountCard{ padding:0 !important; border:none !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; } body.graphPage .stakeAmountTop{ display:flex !important; justify-content:flex-end !important; margin:0 0 8px !important; } body.graphPage .stakeAmountTop .label{ display:none !important; } body.graphPage .stakeAmountRow{ display:block !important; } body.graphPage .stakeInput{ min-height:48px !important; padding:0 16px !important; border-radius:14px !important; font-size:20px !important; background:rgba(5, 10, 20, .88) !important; } body.graphPage .stakeMaxBtn{ min-width:68px !important; min-height:40px !important; border-radius:14px !important; } } @media (max-width: 420px){ body.graphPage .chartWrap{ inset:calc(env(safe-area-inset-top) + 70px) 10px calc(env(safe-area-inset-bottom) + 118px) 10px !important; border-radius:22px !important; } body.graphPage .pill-logoBottom{ transform:translateX(-50%) scale(.76) !important; } body.graphPage .stakeInput{ font-size:18px !important; } } /* ========================================================= MOBILE PASS V19 вЂ” reference-driven phone layout ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-chart-top: calc(env(safe-area-inset-top) + 78px); --mobile-chart-height: min(50dvh, 420px); } body.graphPage .pill-priceTop{ top: calc(env(safe-area-inset-top) + 14px) !important; left: 12px !important; transform: none !important; min-width: 116px !important; min-height: 42px !important; padding: 0 16px !important; gap: 10px !important; border-radius: 18px !important; justify-content: flex-start !important; background: linear-gradient(180deg, rgba(26, 38, 70, .86), rgba(31, 15, 40, .82)) !important; border: 1px solid rgba(133, 180, 226, .18) !important; box-shadow: 0 16px 34px rgba(0,0,0,.28) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } body.graphPage .pill-priceTop::before{ background: radial-gradient(circle at 18% 28%, rgba(119, 214, 255, .18), transparent 40%), radial-gradient(circle at 88% 72%, rgba(181, 107, 255, .16), transparent 46%) !important; opacity: 1 !important; filter: blur(10px) !important; } body.graphPage .pill-priceTop #price{ font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .02em !important; color: rgba(255,255,255,.92) !important; } body.graphPage .pill-account{ top: calc(env(safe-area-inset-top) + 14px) !important; right: 12px !important; max-width: 128px !important; } body.graphPage .pill-logoBottom{ top: calc(env(safe-area-inset-top) + 14px) !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; transform-origin: center top !important; z-index: 22 !important; display: block !important; } body.graphPage .pill-logoBottom .brandPill{ display: inline-flex !important; align-items: center !important; gap: 10px !important; min-height: 42px !important; padding: 0 14px !important; border-radius: 18px !important; border: 1px solid rgba(133, 180, 226, .14) !important; background: linear-gradient(180deg, rgba(12, 22, 40, .90), rgba(10, 16, 28, .86)) !important; box-shadow: 0 16px 34px rgba(0,0,0,.24) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } body.graphPage .pill-logoBottom .brandName{ display: block !important; font-size: 14px !important; font-weight: 800 !important; color: rgba(255,255,255,.94) !important; line-height: 1 !important; white-space: nowrap !important; } body.graphPage .pill-logoBottom .brandIcon{ width: 30px !important; height: 30px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(120, 84, 255, .94), rgba(181, 107, 255, .94)) !important; box-shadow: none !important; } body.graphPage .pill-logoBottom .brandIcon::after{ opacity: .55 !important; } body.graphPage .chartWrap{ inset: auto 12px auto 12px !important; top: var(--mobile-chart-top) !important; height: var(--mobile-chart-height) !important; bottom: auto !important; border-radius: 24px !important; box-shadow: 0 24px 56px rgba(0,0,0,.32) !important; } body.graphPage .pill-stakeBottom{ left: 12px !important; right: 12px !important; top: calc(var(--mobile-chart-top) + var(--mobile-chart-height) + 14px) !important; bottom: auto !important; z-index: 21 !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: flex !important; width: 100% !important; min-width: 0 !important; padding: 12px !important; border-radius: 20px !important; background: linear-gradient(180deg, rgba(8, 18, 33, .96), rgba(6, 13, 26, .94)) !important; border: 1px solid rgba(132, 149, 184, .10) !important; box-shadow: 0 18px 38px rgba(0,0,0,.28) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } body.graphPage .stakeAmountCard{ display: grid !important; gap: 10px !important; } body.graphPage .stakeAmountTop{ display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 !important; } body.graphPage .stakeAmountTop .label{ display: block !important; font-size: 12px !important; font-weight: 700 !important; color: rgba(210,223,244,.72) !important; } body.graphPage .stakeInput{ min-height: 50px !important; border-radius: 15px !important; font-size: 20px !important; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ display: none !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-chart-top: calc(env(safe-area-inset-top) + 72px); --mobile-chart-height: min(48dvh, 400px); } body.graphPage .pill-priceTop{ min-width: 108px !important; padding: 0 14px !important; } body.graphPage .pill-account{ max-width: 118px !important; } body.graphPage .pill-logoBottom .brandPill{ padding: 0 12px !important; } body.graphPage .pill-logoBottom .brandName{ font-size: 13px !important; } } /* ========================================================= MOBILE REFERENCE V20 вЂ” centered top bar, 2/3 chart frame, square bet cells and balanced phone spacing ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-chart-top: calc(env(safe-area-inset-top) + 76px); --mobile-chart-height: min(63dvh, 560px); } body.graphPage .pill-priceTop, body.graphPage .pill-account .userMenuBtn{ min-height: 42px !important; border-radius: 18px !important; border: 1px solid rgba(133, 180, 226, .16) !important; background: linear-gradient(180deg, rgba(15, 27, 47, .90), rgba(24, 15, 40, .84)) !important; box-shadow: 0 16px 34px rgba(0,0,0,.28) !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; } body.graphPage .pill-priceTop{ top: calc(env(safe-area-inset-top) + 14px) !important; left: 12px !important; min-width: 132px !important; padding: 0 16px !important; justify-content: flex-start !important; } body.graphPage .pill-priceTop #price{ font-size: 13px !important; font-weight: 800 !important; color: rgba(245,249,255,.96) !important; } body.graphPage .pill-account{ top: calc(env(safe-area-inset-top) + 14px) !important; right: 12px !important; max-width: 132px !important; } body.graphPage .userMenuBtn{ min-height: 42px !important; padding: 0 14px !important; } body.graphPage .pill-logoBottom{ top: calc(env(safe-area-inset-top) + 14px) !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 24 !important; } body.graphPage .pill-logoBottom .brandPill{ min-height: 42px !important; padding: 0 14px !important; border-radius: 18px !important; border: 1px solid rgba(133, 180, 226, .14) !important; background: linear-gradient(180deg, rgba(12, 22, 40, .90), rgba(10, 16, 28, .86)) !important; } body.graphPage .pill-logoBottom .brandName{ display: block !important; font-size: 13px !important; font-weight: 800 !important; white-space: nowrap !important; } body.graphPage .chartWrap{ left: 12px !important; right: 12px !important; width: auto !important; top: var(--mobile-chart-top) !important; bottom: auto !important; height: var(--mobile-chart-height) !important; border-radius: 24px !important; overflow: hidden !important; background: radial-gradient(980px 560px at 14% 14%, rgba(102,223,255,.17) 0%, transparent 66%), radial-gradient(760px 500px at 82% 18%, rgba(255,79,216,.14) 0%, transparent 62%), linear-gradient(180deg, rgba(20, 14, 42, .97), rgba(8, 18, 32, .98)) !important; box-shadow: 0 22px 46px rgba(0,0,0,.28) !important; } body.graphPage .pill-stakeBottom{ left: 12px !important; right: 12px !important; top: calc(var(--mobile-chart-top) + var(--mobile-chart-height) + 12px) !important; bottom: auto !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ border-radius: 20px !important; background: linear-gradient(180deg, rgba(7, 16, 31, .97), rgba(6, 13, 26, .95)) !important; } body.graphPage .stakeAmountCard{ gap: 12px !important; } body.graphPage .stakeAmountTop .label{ display: block !important; font-size: 13px !important; font-weight: 700 !important; color: rgba(210,223,244,.78) !important; } body.graphPage .stakeInput{ min-height: 48px !important; border-radius: 16px !important; font-size: 18px !important; } body.graphPage .pill-logoBottom, body.graphPage .pill-priceTop, body.graphPage .pill-account, body.graphPage .pill-stakeBottom{ pointer-events: auto !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-chart-top: calc(env(safe-area-inset-top) + 72px); --mobile-chart-height: min(64dvh, 540px); } body.graphPage .pill-priceTop, body.graphPage .pill-account{ max-width: 124px !important; min-width: 124px !important; } body.graphPage .pill-logoBottom .brandPill{ padding: 0 12px !important; } body.graphPage .pill-logoBottom .brandName{ font-size: 12px !important; } } /* regression marker: body.graphPage .stakeMenuDrop{ background:linear-gradient(180deg, rgba(20, 14, 34, .90), rgba(11, 10, 24, .94)); backdrop-filter:blur(24px) saturate(108%); } */ /* ========================================================= MOBILE REFERENCE V21 вЂ” centered logo, compact amount card, bottom account menu and stronger purple/cyan phone palette ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-top-gap: calc(env(safe-area-inset-top) + 14px); --mobile-pill-h: 42px; --mobile-side-pill-w: 118px; --mobile-logo-gap: 8px; --mobile-amount-w: min(208px, calc(100vw - 24px)); } body.graphPage .chartWrap{ background: radial-gradient(circle at 18% 24%, rgba(80, 180, 255, .08), transparent 28%), radial-gradient(circle at 84% 12%, rgba(190, 96, 255, .09), transparent 34%), linear-gradient(180deg, rgba(5, 15, 31, .98), rgba(4, 11, 22, .98)) !important; border: 1px solid rgba(96, 170, 246, .12) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 20px 42px rgba(0,0,0,.34) !important; } body.graphPage .pill-priceTop, body.graphPage .pill-account .userMenuBtn{ top: var(--mobile-top-gap) !important; min-height: var(--mobile-pill-h) !important; height: var(--mobile-pill-h) !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(18, 33, 58, .92), rgba(28, 18, 47, .88)) !important; border: 1px solid rgba(103, 165, 234, .16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(0,0,0,.24) !important; backdrop-filter: blur(18px) saturate(122%) !important; -webkit-backdrop-filter: blur(18px) saturate(122%) !important; } body.graphPage .pill-priceTop{ left: 12px !important; min-width: var(--mobile-side-pill-w) !important; width: var(--mobile-side-pill-w) !important; padding: 0 14px !important; justify-content: flex-start !important; gap: 10px !important; } body.graphPage .pill-priceTop .dot{ width: 11px !important; height: 11px !important; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.94), rgba(178, 237, 255, .95) 54%, rgba(97, 211, 255, .72) 100%) !important; box-shadow: 0 0 12px rgba(114, 220, 255, .26) !important; } body.graphPage .pill-priceTop #price{ font-size: 12.5px !important; font-weight: 800 !important; letter-spacing: .01em !important; } body.graphPage .pill-account{ top: var(--mobile-top-gap) !important; right: 12px !important; max-width: var(--mobile-side-pill-w) !important; width: var(--mobile-side-pill-w) !important; } body.graphPage .pill-account .userMenuBtn{ width: 100% !important; padding: 0 12px !important; gap: 8px !important; } body.graphPage .pill-account .graphUserBalanceIcon{ width: 18px !important; height: 18px !important; } body.graphPage .pill-account .graphUserBalance{ font-size: 13px !important; font-weight: 800 !important; } body.graphPage .pill-account .graphUserName, body.graphPage .pill-account .graphUserDivider{ display: none !important; } body.graphPage .pill-logoBottom{ display: block !important; top: var(--mobile-top-gap) !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 25 !important; pointer-events: none !important; } body.graphPage .pill-logoBottom .brandPill{ min-height: var(--mobile-pill-h) !important; height: var(--mobile-pill-h) !important; padding: 0 12px !important; gap: var(--mobile-logo-gap) !important; border-radius: 16px !important; border: 1px solid rgba(104, 165, 235, .12) !important; background: linear-gradient(180deg, rgba(14, 25, 45, .84), rgba(12, 17, 31, .74)) !important; box-shadow: 0 12px 24px rgba(0,0,0,.18) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } body.graphPage .pill-logoBottom .brandIcon{ width: 24px !important; height: 24px !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(125, 83, 255, .96), rgba(184, 98, 255, .96)) !important; } body.graphPage .pill-logoBottom .brandName{ display: block !important; font-size: 12px !important; font-weight: 800 !important; color: rgba(244,247,255,.92) !important; white-space: nowrap !important; } body.graphPage .pill-stakeBottom{ left: auto !important; right: 12px !important; width: var(--mobile-amount-w) !important; top: auto !important; bottom: 132px !important; z-index: 24 !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ display: flex !important; width: 100% !important; min-width: 0 !important; padding: 10px 12px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(14, 28, 50, .86), rgba(8, 17, 33, .88)) !important; border: 1px solid rgba(97, 166, 240, .14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 36px rgba(0,0,0,.26) !important; backdrop-filter: blur(18px) saturate(108%) !important; -webkit-backdrop-filter: blur(18px) saturate(108%) !important; } body.graphPage .stakeDropHeader, body.graphPage .stakePresets{ display: none !important; } body.graphPage .stakeAmountCard{ width: 100% !important; display: grid !important; gap: 8px !important; } body.graphPage .stakeAmountTop{ margin: 0 !important; gap: 10px !important; } body.graphPage .stakeAmountTop .label{ font-size: 11px !important; letter-spacing: .02em !important; color: rgba(213, 224, 243, .68) !important; } body.graphPage .stakeMaxBtn{ min-height: 34px !important; padding: 0 14px !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(35, 48, 73, .84), rgba(24, 35, 57, .82)) !important; border-color: rgba(119, 157, 206, .22) !important; color: rgba(245,248,255,.92) !important; } body.graphPage .stakeInput{ min-height: 46px !important; border-radius: 16px !important; padding: 0 16px !important; font-size: 17px !important; background: rgba(3, 9, 21, .86) !important; border: 1px solid rgba(86, 152, 224, .14) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important; } body.graphPage .userMenuDrop{ position: fixed !important; left: auto !important; right: 12px !important; top: auto !important; bottom: 14px !important; width: var(--mobile-amount-w) !important; min-width: 0 !important; padding: 10px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(15, 28, 50, .90), rgba(8, 16, 31, .94)) !important; border: 1px solid rgba(97, 166, 240, .14) !important; box-shadow: 0 18px 34px rgba(0,0,0,.26) !important; backdrop-filter: blur(20px) saturate(110%) !important; -webkit-backdrop-filter: blur(20px) saturate(110%) !important; } body.graphPage .userMenuItem{ min-height: 42px !important; border-radius: 14px !important; color: rgba(241,246,255,.9) !important; } body.graphPage .userMenuItem:hover, body.graphPage .userMenuItem:focus-visible{ background: linear-gradient(90deg, rgba(163, 101, 255, .18), rgba(76, 212, 255, .14)) !important; } body.graphPage .cameraUi{ display: none !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-side-pill-w: 106px; --mobile-logo-gap: 6px; --mobile-amount-w: min(194px, calc(100vw - 24px)); } body.graphPage .pill-logoBottom .brandPill{ padding: 0 10px !important; } body.graphPage .pill-logoBottom .brandName{ font-size: 11px !important; } body.graphPage .stakeInput{ font-size: 16px !important; } } /* ========================================================= MOBILE REFERENCE V22 вЂ” aligned top bar, centered brand, compact bottom amount control, fixed bottom tabs ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-top-gap-v22: calc(env(safe-area-inset-top) + 10px); --mobile-pill-h-v22: 40px; --mobile-side-pill-w-v22: 110px; --mobile-brand-w-v22: 116px; --mobile-tabs-h-v22: calc(74px + env(safe-area-inset-bottom)); --mobile-chart-top-v22: calc(var(--mobile-top-gap-v22) + var(--mobile-pill-h-v22) + 16px); --mobile-chart-height-v22: min(56dvh, 500px); --mobile-amount-h-v22: 88px; --mobile-page-side-v22: 14px; } body.graphPage .pill-logoBottom{ display: none !important; } body.graphPage .mobileTopBrand{ position: fixed !important; top: var(--mobile-top-gap-v22) !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 34 !important; display: block !important; pointer-events: none !important; } body.graphPage .mobileTopBrand .brandPill{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 124px !important; min-height: var(--mobile-pill-h-v22) !important; height: var(--mobile-pill-h-v22) !important; padding: 0 12px !important; gap: 8px !important; border-radius: 16px !important; border: 1px solid rgba(112, 188, 255, .18) !important; background: linear-gradient(180deg, rgba(11, 24, 45, .84), rgba(15, 20, 36, .82)) !important; box-shadow: 0 16px 34px rgba(0,0,0,.24) !important; backdrop-filter: blur(18px) saturate(112%) !important; -webkit-backdrop-filter: blur(18px) saturate(112%) !important; } body.graphPage .mobileTopBrand .brandIcon{ width: 22px !important; height: 22px !important; border-radius: 8px !important; background: linear-gradient(135deg, rgba(104, 223, 255, .22), rgba(181, 107, 255, .88)) !important; box-shadow: none !important; } body.graphPage .mobileTopBrand .brandName{ display: block !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; color: rgba(244,247,255,.96) !important; white-space: nowrap !important; } body.graphPage .pill-priceTop, body.graphPage .pill-account{ top: var(--mobile-top-gap-v22) !important; min-height: var(--mobile-pill-h-v22) !important; height: var(--mobile-pill-h-v22) !important; } body.graphPage .pill-priceTop{ left: var(--mobile-page-side-v22) !important; width: var(--mobile-side-pill-w-v22) !important; min-width: var(--mobile-side-pill-w-v22) !important; padding: 0 14px !important; border-radius: 16px !important; justify-content: flex-start !important; } body.graphPage .pill-account{ right: var(--mobile-page-side-v22) !important; width: var(--mobile-side-pill-w-v22) !important; max-width: var(--mobile-side-pill-w-v22) !important; } body.graphPage .pill-account .userMenuBtn{ min-height: var(--mobile-pill-h-v22) !important; height: var(--mobile-pill-h-v22) !important; border-radius: 16px !important; padding: 0 12px !important; } body.graphPage .chartWrap{ left: var(--mobile-page-side-v22) !important; right: var(--mobile-page-side-v22) !important; width: auto !important; top: var(--mobile-chart-top-v22) !important; height: var(--mobile-chart-height-v22) !important; bottom: auto !important; border-radius: 24px !important; overflow: hidden !important; background: radial-gradient(980px 560px at 14% 14%, rgba(102,223,255,.16) 0%, transparent 66%), radial-gradient(760px 500px at 82% 18%, rgba(255,79,216,.14) 0%, transparent 62%), linear-gradient(180deg, rgba(20, 14, 42, .97), rgba(8, 18, 32, .98)) !important; box-shadow: 0 22px 46px rgba(0,0,0,.28) !important; } body.graphPage .labelsY{ right: 8px !important; } body.graphPage .pill-stakeBottom{ left: var(--mobile-page-side-v22) !important; right: var(--mobile-page-side-v22) !important; width: auto !important; top: calc(var(--mobile-chart-top-v22) + var(--mobile-chart-height-v22) + 16px) !important; bottom: auto !important; z-index: 30 !important; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ display: none !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ position: relative !important; inset: auto !important; display: flex !important; width: 100% !important; min-width: 0 !important; padding: 12px 12px 14px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(11, 26, 46, .92), rgba(10, 18, 36, .94)) !important; border: 1px solid rgba(109, 176, 248, .14) !important; box-shadow: 0 18px 38px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.04) !important; backdrop-filter: blur(16px) saturate(118%) !important; -webkit-backdrop-filter: blur(16px) saturate(118%) !important; } body.graphPage .stakeDropHeader, body.graphPage .stakePresets, body.graphPage .stakeDropBalance, body.graphPage .stakeDropBalanceLabel, body.graphPage .stakeDropBalanceValue, body.graphPage .stakeDropTitle{ display: none !important; } body.graphPage .stakeAmountCard{ width: 100% !important; display: grid !important; gap: 10px !important; } body.graphPage .stakeAmountTop{ margin: 0 !important; align-items: center !important; justify-content: space-between !important; } body.graphPage .stakeAmountTop .label{ font-size: 12px !important; font-weight: 700 !important; color: rgba(206,220,240,.72) !important; } body.graphPage .stakeMaxBtn{ min-height: 38px !important; padding: 0 18px !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(34, 47, 74, .88), rgba(20, 32, 52, .86)) !important; border: 1px solid rgba(118, 157, 208, .18) !important; } body.graphPage .stakeAmountRow{ display: grid !important; grid-template-columns: 54px 1fr 54px !important; gap: 10px !important; align-items: center !important; } body.graphPage .stakeStepBtn{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; height: 44px !important; border-radius: 12px !important; border: 1px solid rgba(92, 148, 216, .14) !important; background: linear-gradient(180deg, rgba(25, 36, 58, .88), rgba(17, 25, 40, .90)) !important; color: rgba(245,248,255,.92) !important; font: 800 24px/1 Rajdhani, ui-sans-serif, system-ui !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .stakeInput{ min-height: 44px !important; height: 44px !important; border-radius: 14px !important; text-align: center !important; padding: 0 10px !important; font-size: 18px !important; font-weight: 800 !important; background: rgba(4, 10, 21, .88) !important; border: 1px solid rgba(80, 146, 220, .14) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.015) !important; } body.graphPage .userMenuDrop, body.graphPage .userMenuBtn .graphUserCaret{ display: none !important; } body.graphPage .mobileTradeTabs{ position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 35 !important; display: grid !important; grid-template-columns: repeat(5, 1fr) !important; align-items: start !important; gap: 2px !important; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)) !important; background: linear-gradient(180deg, rgba(10,18,31,.72), rgba(8,14,24,.92)) !important; border-top: 1px solid rgba(106, 171, 240, .11) !important; backdrop-filter: blur(20px) saturate(118%) !important; -webkit-backdrop-filter: blur(20px) saturate(118%) !important; } body.graphPage .mobileTradeTab{ display: grid !important; justify-items: center !important; gap: 4px !important; padding: 4px 2px 0 !important; text-decoration: none !important; color: rgba(188, 198, 214, .72) !important; font: 600 10px/1.15 Rajdhani, ui-sans-serif, system-ui !important; } body.graphPage .mobileTradeTabIcon{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; height: 24px !important; border-radius: 8px !important; background: rgba(255,255,255,.04) !important; color: rgba(199, 211, 231, .74) !important; font-size: 14px !important; line-height: 1 !important; } body.graphPage .mobileTradeTab--active{ color: rgba(83, 232, 173, .94) !important; } body.graphPage .mobileTradeTab--active .mobileTradeTabIcon{ background: rgba(37, 219, 138, .12) !important; color: rgba(83, 232, 173, .96) !important; box-shadow: inset 0 0 0 1px rgba(83, 232, 173, .14) !important; } body.graphPage .cameraUi, body.graphPage #logoBottom{ display: none !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-side-pill-w-v22: 100px; --mobile-brand-w-v22: 104px; --mobile-chart-height-v22: min(52dvh, 430px); } body.graphPage .mobileTopBrand .brandName{ font-size: 11px !important; } body.graphPage .pill-priceTop #price, body.graphPage .pill-account .graphUserBalance{ font-size: 12px !important; } body.graphPage .stakeAmountRow{ grid-template-columns: 48px 1fr 48px !important; } body.graphPage .mobileTradeTab{ font-size: 9px !important; } } .mobileTopBrand, .mobileTradeTabs, .stakeStepBtn{ display: none; } /* ========================================================= MOBILE REFERENCE V23 вЂ” balanced top bar, visible center brand, decimal stake controls and taller icon tabs ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-top-gap-v23: calc(env(safe-area-inset-top) + 10px); --mobile-pill-h-v23: 40px; --mobile-side-pill-w-v23: 104px; --mobile-brand-w-v23: 118px; --mobile-tabs-h-v23: calc(86px + env(safe-area-inset-bottom)); } body.graphPage .pill-priceTop, body.graphPage .pill-account{ top: var(--mobile-top-gap-v23) !important; width: var(--mobile-side-pill-w-v23) !important; min-width: var(--mobile-side-pill-w-v23) !important; height: var(--mobile-pill-h-v23) !important; min-height: var(--mobile-pill-h-v23) !important; margin: 0 !important; } body.graphPage .pill-priceTop{ left: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; padding: 0 14px !important; } body.graphPage .pill-account{ right: 12px !important; display: block !important; } body.graphPage .pill-account .userMenuBtn{ width: 100% !important; height: var(--mobile-pill-h-v23) !important; min-height: var(--mobile-pill-h-v23) !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; padding: 0 12px !important; } body.graphPage .mobileTopBrand{ display: flex !important; align-items: center !important; justify-content: center !important; top: var(--mobile-top-gap-v23) !important; left: 50% !important; transform: translateX(-50%) !important; width: var(--mobile-brand-w-v23) !important; min-width: var(--mobile-brand-w-v23) !important; z-index: 40 !important; opacity: 1 !important; visibility: visible !important; } body.graphPage .mobileTopBrand .brandPill{ width: 100% !important; min-width: 0 !important; justify-content: center !important; padding: 0 10px !important; gap: 8px !important; } body.graphPage .mobileTopBrand .brandName{ display: block !important; font-size: 11px !important; font-weight: 800 !important; color: rgba(244,247,255,.94) !important; } body.graphPage .stakeAmountTop .label{ font-size: 0 !important; } body.graphPage .stakeAmountTop .label::after{ content: 'Amount'; font-size: 12px; font-weight: 700; color: rgba(206,220,240,.72); } body.graphPage .stakeInput{ font-variant-numeric: tabular-nums !important; } body.graphPage .mobileTradeTabs{ min-height: var(--mobile-tabs-h-v23) !important; padding: 10px 10px calc(14px + env(safe-area-inset-bottom)) !important; gap: 4px !important; } body.graphPage .mobileTradeTab{ gap: 6px !important; padding-top: 2px !important; font-size: 11px !important; color: rgba(197, 208, 224, .8) !important; } body.graphPage .mobileTradeTabIcon{ width: 28px !important; height: 28px !important; border-radius: 10px !important; } body.graphPage .mobileTradeTabIcon svg{ width: 15px; height: 15px; display: block; } body.graphPage .mobileTradeTabLabel{ font-size: 11px !important; line-height: 1.1 !important; font-weight: 700 !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-side-pill-w-v23: 96px; --mobile-brand-w-v23: 104px; } body.graphPage .mobileTopBrand .brandName{ font-size: 10px !important; } } /* ========================================================= MOBILE REFERENCE V24 вЂ” logo on top bar, price pill inside chart, lighter cell text, and cleaner mobile alignment ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-top-gap-v24: calc(env(safe-area-inset-top) + 10px); --mobile-side-pill-w-v24: 104px; --mobile-brand-w-v24: 128px; --mobile-graph-price-offset-v24: 10px; } body.graphPage .mobileTopBrand{ display: flex !important; position: fixed !important; top: var(--mobile-top-gap-v24) !important; left: 12px !important; transform: none !important; width: auto !important; min-width: var(--mobile-brand-w-v24) !important; z-index: 42 !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } body.graphPage .mobileTopBrand .brandPill{ width: auto !important; min-width: var(--mobile-brand-w-v24) !important; height: 40px !important; min-height: 40px !important; justify-content: flex-start !important; padding: 0 14px !important; gap: 8px !important; border-radius: 16px !important; border: 1px solid rgba(105, 168, 236, .16) !important; background: linear-gradient(180deg, rgba(12, 24, 43, .94), rgba(12, 17, 31, .90)) !important; box-shadow: 0 14px 28px rgba(0,0,0,.22) !important; backdrop-filter: blur(18px) saturate(112%) !important; -webkit-backdrop-filter: blur(18px) saturate(112%) !important; } body.graphPage .mobileTopBrand .brandName{ display: block !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .01em !important; color: rgba(244,247,255,.94) !important; } body.graphPage .pill-account{ top: var(--mobile-top-gap-v24) !important; right: 12px !important; width: var(--mobile-side-pill-w-v24) !important; min-width: var(--mobile-side-pill-w-v24) !important; max-width: var(--mobile-side-pill-w-v24) !important; z-index: 42 !important; } body.graphPage .pill-account .userMenuBtn{ height: 40px !important; min-height: 40px !important; border-radius: 16px !important; } body.graphPage .pill-priceTop{ top: calc(var(--mobile-chart-top-v22) + var(--mobile-graph-price-offset-v24)) !important; left: calc(var(--mobile-page-side-v22) + 10px) !important; width: var(--mobile-side-pill-w-v24) !important; min-width: var(--mobile-side-pill-w-v24) !important; height: 40px !important; min-height: 40px !important; z-index: 31 !important; padding: 0 14px !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(16, 28, 50, .92), rgba(21, 20, 46, .88)) !important; border: 1px solid rgba(115, 175, 238, .16) !important; box-shadow: 0 16px 34px rgba(0,0,0,.22) !important; backdrop-filter: blur(18px) saturate(112%) !important; -webkit-backdrop-filter: blur(18px) saturate(112%) !important; } body.graphPage .pill-priceTop .dot{ width: 11px !important; height: 11px !important; } body.graphPage .pill-priceTop #price{ font-size: 12.5px !important; font-weight: 800 !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-brand-w-v24: 116px; --mobile-side-pill-w-v24: 100px; } body.graphPage .mobileTopBrand .brandName{ font-size: 11px !important; } } /* ========================================================= MOBILE REFERENCE V25 вЂ” top-left auth-like brand + richer accents ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-top-gap-v25: calc(env(safe-area-inset-top) + 10px); --mobile-header-h-v25: 48px; --mobile-brand-w-v25: 186px; --mobile-account-w-v25: 116px; background: radial-gradient(120% 120% at 16% 6%, rgba(89, 214, 255, .12), transparent 42%), radial-gradient(110% 90% at 86% 2%, rgba(190, 92, 255, .12), transparent 40%), linear-gradient(180deg, #08111f 0%, #060d19 100%) !important; } body.graphPage .mobileTopBrand{ top: var(--mobile-top-gap-v25) !important; left: 12px !important; min-width: 0 !important; z-index: 44 !important; pointer-events: none !important; } body.graphPage .mobileTopBrand .brandPill{ width: var(--mobile-brand-w-v25) !important; min-width: var(--mobile-brand-w-v25) !important; height: var(--mobile-header-h-v25) !important; min-height: var(--mobile-header-h-v25) !important; justify-content: flex-start !important; padding: 0 14px !important; gap: 10px !important; border-radius: 18px !important; border: 1px solid rgba(112, 181, 244, .16) !important; background: radial-gradient(130% 140% at 14% 24%, rgba(92, 217, 255, .18), transparent 40%), radial-gradient(120% 130% at 92% 24%, rgba(181, 98, 255, .18), transparent 42%), linear-gradient(180deg, rgba(17, 31, 54, .94), rgba(19, 17, 36, .92)) !important; box-shadow: 0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05), 0 0 30px rgba(88, 213, 255, .06), 0 0 38px rgba(181, 98, 255, .07) !important; backdrop-filter: blur(20px) saturate(112%) !important; -webkit-backdrop-filter: blur(20px) saturate(112%) !important; } body.graphPage .mobileTopBrand .brandIcon{ width: 34px !important; height: 34px !important; border-radius: 12px !important; background: radial-gradient(circle at 32% 28%, rgba(183, 121, 255, .98), rgba(127, 83, 255, .82) 58%, rgba(86, 58, 229, .88) 100%) !important; box-shadow: 0 10px 24px rgba(108, 86, 255, .22), 0 0 18px rgba(171, 101, 255, .12), inset 0 1px 0 rgba(255,255,255,.22) !important; } body.graphPage .mobileTopBrandMeta{ display: flex !important; min-width: 0 !important; flex-direction: column !important; justify-content: center !important; gap: 2px !important; } body.graphPage .mobileTopBrand .brandName{ display: block !important; font-size: 13px !important; line-height: 1.02 !important; font-weight: 900 !important; letter-spacing: .01em !important; color: rgba(245, 248, 255, .96) !important; } body.graphPage .mobileTopBrandSub{ display: block !important; font-size: 10px !important; line-height: 1.08 !important; font-weight: 600 !important; letter-spacing: .01em !important; color: rgba(199, 213, 233, .66) !important; white-space: nowrap !important; } body.graphPage .pill-account{ top: var(--mobile-top-gap-v25) !important; right: 12px !important; width: var(--mobile-account-w-v25) !important; min-width: var(--mobile-account-w-v25) !important; max-width: var(--mobile-account-w-v25) !important; z-index: 44 !important; } body.graphPage .pill-account .userMenuBtn{ min-height: var(--mobile-header-h-v25) !important; height: var(--mobile-header-h-v25) !important; border-radius: 18px !important; padding: 0 12px !important; background: radial-gradient(120% 120% at 14% 30%, rgba(100, 214, 255, .16), transparent 40%), radial-gradient(120% 120% at 88% 30%, rgba(188, 97, 255, .16), transparent 44%), linear-gradient(180deg, rgba(18, 31, 52, .95), rgba(27, 19, 44, .93)) !important; border: 1px solid rgba(116, 177, 241, .18) !important; box-shadow: 0 14px 30px rgba(0,0,0,.22), 0 0 28px rgba(86, 212, 255, .06), 0 0 36px rgba(176, 97, 255, .07) !important; } body.graphPage .chartWrap{ background: radial-gradient(90% 120% at 12% 24%, rgba(83, 211, 255, .12), transparent 36%), radial-gradient(84% 82% at 88% 14%, rgba(181, 92, 255, .12), transparent 32%), linear-gradient(180deg, rgba(7, 18, 34, .98), rgba(4, 10, 21, .99)) !important; box-shadow: 0 18px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.02), 0 0 42px rgba(88, 213, 255, .05), 0 0 56px rgba(181, 98, 255, .05) !important; } body.graphPage .chartWrap::before{ opacity: .82 !important; background: radial-gradient(88% 76% at 18% 18%, rgba(88, 213, 255, .12), transparent 46%), radial-gradient(78% 72% at 82% 12%, rgba(181, 98, 255, .10), transparent 44%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) !important; filter: blur(10px) !important; } body.graphPage .chartWrap::after{ opacity: .28 !important; background: linear-gradient(180deg, rgba(4,10,18,0.00) 0%, rgba(4,10,18,0.24) 100%) !important; } body.graphPage .mobileTradeTabs{ background: radial-gradient(130% 180% at 18% 0%, rgba(84, 213, 255, .12), transparent 34%), radial-gradient(130% 180% at 82% 0%, rgba(184, 97, 255, .12), transparent 34%), linear-gradient(180deg, rgba(10,18,31,.84), rgba(8,14,24,.98)) !important; border-top: 1px solid rgba(112, 176, 240, .14) !important; box-shadow: 0 -10px 34px rgba(0,0,0,.28) !important; } body.graphPage .mobileTradeTab--active .mobileTradeTabIcon{ box-shadow: 0 0 18px rgba(88, 213, 255, .16), 0 0 24px rgba(181, 98, 255, .14) !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-brand-w-v25: 170px; --mobile-account-w-v25: 108px; } body.graphPage .mobileTopBrand .brandPill{ padding: 0 12px !important; gap: 8px !important; } body.graphPage .mobileTopBrand .brandName{ font-size: 12px !important; } body.graphPage .mobileTopBrandSub{ font-size: 9px !important; } } /* ========================================================= MOBILE REFERENCE V26 вЂ” left logo header, right balance pill, chart below header and 3-tab mobile navigation ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-page-side-v26: 16px; --mobile-top-gap-v26: calc(env(safe-area-inset-top) + 12px); --mobile-header-h-v26: 52px; --mobile-brand-w-v26: 144px; --mobile-account-w-v26: 122px; --mobile-chart-top-v26: calc(var(--mobile-top-gap-v26) + var(--mobile-header-h-v26) + 16px); --mobile-chart-height-v26: min(52dvh, 460px); --mobile-tabs-h-v26: calc(84px + env(safe-area-inset-bottom)); } body.graphPage .mobileTopBrand{ display: flex !important; position: fixed !important; top: var(--mobile-top-gap-v26) !important; left: var(--mobile-page-side-v26) !important; transform: none !important; width: var(--mobile-brand-w-v26) !important; min-width: var(--mobile-brand-w-v26) !important; z-index: 46 !important; opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } body.graphPage .mobileTopBrand .brandPill{ width: var(--mobile-brand-w-v26) !important; min-width: var(--mobile-brand-w-v26) !important; min-height: var(--mobile-header-h-v26) !important; height: var(--mobile-header-h-v26) !important; padding: 0 14px !important; gap: 10px !important; justify-content: flex-start !important; border-radius: 18px !important; border: 1px solid rgba(104, 171, 236, .16) !important; background: radial-gradient(140% 140% at 14% 22%, rgba(86, 214, 255, .17), transparent 38%), radial-gradient(120% 120% at 90% 22%, rgba(180, 95, 255, .14), transparent 42%), linear-gradient(180deg, rgba(11, 24, 43, .95), rgba(10, 16, 29, .94)) !important; box-shadow: 0 16px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05), 0 0 24px rgba(86, 214, 255, .06), 0 0 28px rgba(180, 95, 255, .06) !important; backdrop-filter: blur(20px) saturate(112%) !important; -webkit-backdrop-filter: blur(20px) saturate(112%) !important; } body.graphPage .mobileTopBrand .brandIcon{ width: 30px !important; height: 30px !important; border-radius: 11px !important; background: radial-gradient(circle at 32% 28%, rgba(183, 121, 255, .98), rgba(127, 83, 255, .84) 58%, rgba(86, 58, 229, .88) 100%) !important; box-shadow: 0 10px 22px rgba(108, 86, 255, .18), inset 0 1px 0 rgba(255,255,255,.18) !important; } body.graphPage .mobileTopBrandMeta{ display: flex !important; min-width: 0 !important; align-items: center !important; } body.graphPage .mobileTopBrand .brandName{ display: block !important; font-size: 13px !important; line-height: 1 !important; font-weight: 800 !important; letter-spacing: .01em !important; color: rgba(245, 248, 255, .96) !important; } body.graphPage .mobileTopBrandSub{ display: none !important; } body.graphPage .pill-account{ top: var(--mobile-top-gap-v26) !important; right: var(--mobile-page-side-v26) !important; width: var(--mobile-account-w-v26) !important; min-width: var(--mobile-account-w-v26) !important; max-width: var(--mobile-account-w-v26) !important; z-index: 46 !important; } body.graphPage .pill-account .userMenuBtn{ width: 100% !important; min-height: var(--mobile-header-h-v26) !important; height: var(--mobile-header-h-v26) !important; padding: 0 14px !important; gap: 8px !important; align-items: center !important; justify-content: flex-start !important; border-radius: 18px !important; background: radial-gradient(120% 120% at 14% 30%, rgba(100, 214, 255, .14), transparent 40%), radial-gradient(120% 120% at 88% 30%, rgba(188, 97, 255, .14), transparent 44%), linear-gradient(180deg, rgba(14, 27, 47, .95), rgba(18, 18, 34, .94)) !important; border: 1px solid rgba(116, 177, 241, .18) !important; box-shadow: 0 14px 30px rgba(0,0,0,.22), 0 0 24px rgba(86, 212, 255, .05), 0 0 32px rgba(176, 97, 255, .06) !important; } body.graphPage .pill-account .graphUserBalanceWrap{ min-width: 0 !important; } body.graphPage .pill-account .graphUserBalanceIcon{ width: 18px !important; height: 18px !important; } body.graphPage .pill-account .graphUserBalance{ font-size: 13px !important; font-weight: 800 !important; } body.graphPage .pill-account .graphUserName, body.graphPage .pill-account .graphUserDivider, body.graphPage .pill-account .graphUserCaret{ display: none !important; } body.graphPage .chartWrap{ left: var(--mobile-page-side-v26) !important; right: var(--mobile-page-side-v26) !important; width: auto !important; top: var(--mobile-chart-top-v26) !important; height: var(--mobile-chart-height-v26) !important; bottom: auto !important; border-radius: 24px !important; overflow: hidden !important; } body.graphPage .labelsY{ right: 8px !important; } body.graphPage .pill-priceTop{ top: calc(var(--mobile-chart-top-v26) + 12px) !important; left: calc(var(--mobile-page-side-v26) + 12px) !important; width: auto !important; min-width: 104px !important; max-width: 116px !important; height: 40px !important; min-height: 40px !important; padding: 0 14px !important; border-radius: 16px !important; z-index: 32 !important; } body.graphPage .pill-stakeBottom{ left: var(--mobile-page-side-v26) !important; right: var(--mobile-page-side-v26) !important; width: auto !important; top: calc(var(--mobile-chart-top-v26) + var(--mobile-chart-height-v26) + 16px) !important; bottom: auto !important; z-index: 30 !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ padding: 16px !important; border-radius: 22px !important; } body.graphPage .stakeAmountCard{ gap: 12px !important; } body.graphPage .stakeAmountTop .label::after{ content: 'Amount'; font-size: 12px; font-weight: 700; color: rgba(206,220,240,.76); } body.graphPage .stakeMaxBtn{ min-height: 36px !important; height: 36px !important; padding: 0 16px !important; border-radius: 14px !important; } body.graphPage .stakeAmountRow{ grid-template-columns: 48px 1fr 48px !important; gap: 10px !important; } body.graphPage .stakeStepBtn, body.graphPage .stakeInput{ min-height: 46px !important; height: 46px !important; border-radius: 14px !important; } body.graphPage .mobileTradeTabs{ position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 35 !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; align-items: start !important; gap: 6px !important; min-height: var(--mobile-tabs-h-v26) !important; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)) !important; background: radial-gradient(130% 180% at 18% 0%, rgba(84, 213, 255, .10), transparent 34%), radial-gradient(130% 180% at 82% 0%, rgba(184, 97, 255, .10), transparent 34%), linear-gradient(180deg, rgba(9, 16, 29, .86), rgba(8, 13, 24, .98)) !important; border-top: 1px solid rgba(112, 176, 240, .12) !important; box-shadow: 0 -12px 34px rgba(0,0,0,.28) !important; backdrop-filter: blur(20px) saturate(110%) !important; -webkit-backdrop-filter: blur(20px) saturate(110%) !important; } body.graphPage .mobileTradeTab{ display: grid !important; justify-items: center !important; gap: 6px !important; padding: 4px 0 2px !important; text-decoration: none !important; color: rgba(193, 204, 221, .78) !important; font: 700 11px/1.1 Rajdhani, ui-sans-serif, system-ui !important; } body.graphPage .mobileTradeTabIcon{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 10px !important; background: rgba(255,255,255,.04) !important; color: rgba(200, 211, 229, .76) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .mobileTradeTabIcon svg{ width: 16px !important; height: 16px !important; display: block !important; } body.graphPage .mobileTradeTabLabel{ font-size: 11px !important; line-height: 1.05 !important; font-weight: 700 !important; } body.graphPage .mobileTradeTab--active{ color: rgba(86, 232, 180, .96) !important; } body.graphPage .mobileTradeTab--active .mobileTradeTabIcon{ background: rgba(36, 219, 138, .12) !important; color: rgba(86, 232, 180, .98) !important; box-shadow: inset 0 0 0 1px rgba(86, 232, 180, .16), 0 0 18px rgba(88, 213, 255, .12), 0 0 24px rgba(181, 98, 255, .10) !important; } body.graphPage .cameraUi, body.graphPage #logoBottom{ display: none !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-page-side-v26: 12px; --mobile-brand-w-v26: 136px; --mobile-account-w-v26: 116px; --mobile-chart-height-v26: min(50dvh, 430px); } body.graphPage .mobileTopBrand .brandPill, body.graphPage .pill-account .userMenuBtn{ border-radius: 16px !important; } body.graphPage .mobileTopBrand .brandName{ font-size: 12px !important; } body.graphPage .pill-account .graphUserBalance, body.graphPage .pill-priceTop #price{ font-size: 12px !important; } } /* ========================================================= MOBILE REFERENCE V27 вЂ” panel logo header, compact amount rail with live totals and premium pending bet cards ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-brand-w-v27: 184px; --mobile-account-w-v27: 118px; --mobile-header-h-v27: 56px; --mobile-chart-top-v27: calc(var(--mobile-top-gap-v26) + var(--mobile-header-h-v27) + 18px); } body.graphPage .mobileTopBrand{ top: var(--mobile-top-gap-v26) !important; width: var(--mobile-brand-w-v27) !important; min-width: var(--mobile-brand-w-v27) !important; } body.graphPage .mobileTopBrand .brandPill{ width: var(--mobile-brand-w-v27) !important; min-width: var(--mobile-brand-w-v27) !important; min-height: var(--mobile-header-h-v27) !important; height: var(--mobile-header-h-v27) !important; padding: 6px 14px !important; gap: 12px !important; align-items: center !important; border-radius: 20px !important; border: 1px solid rgba(123, 159, 206, .16) !important; background: linear-gradient(90deg, rgba(18, 34, 54, .94), rgba(50, 36, 72, .92)) !important; box-shadow: 0 18px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06), 0 0 26px rgba(124, 102, 220, .10) !important; } body.graphPage .mobileTopBrand .brandIcon{ width: 40px !important; height: 40px !important; border-radius: 14px !important; background: linear-gradient(160deg, rgba(92, 106, 139, .96), rgba(73, 83, 113, .94) 48%, rgba(90, 58, 130, .92) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 10px 22px rgba(47, 34, 92, .22) !important; } body.graphPage .mobileTopBrandMeta{ flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 4px !important; } body.graphPage .mobileTopBrand .brandName{ font-size: 13px !important; line-height: 1 !important; letter-spacing: 0 !important; } body.graphPage .mobileTopBrandSub{ display: block !important; font-size: 10px !important; line-height: 1.1 !important; color: rgba(202, 214, 233, .76) !important; } body.graphPage .pill-account{ top: var(--mobile-top-gap-v26) !important; width: var(--mobile-account-w-v27) !important; min-width: var(--mobile-account-w-v27) !important; max-width: var(--mobile-account-w-v27) !important; } body.graphPage .pill-account .userMenuBtn{ min-height: var(--mobile-header-h-v27) !important; height: var(--mobile-header-h-v27) !important; border-radius: 20px !important; } body.graphPage .chartWrap{ top: var(--mobile-chart-top-v27) !important; } body.graphPage .pill-stakeBottom{ top: calc(var(--mobile-chart-top-v27) + var(--mobile-chart-height-v26) + 16px) !important; } body.graphPage .stakeAmountCard{ gap: 12px !important; } body.graphPage .stakeAmountLayout{ display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(148px, 46%) !important; gap: 12px !important; align-items: stretch !important; } body.graphPage .stakeAmountStats{ display: grid !important; grid-template-rows: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; min-width: 0 !important; } body.graphPage .stakeStatCard{ display: grid !important; align-content: center !important; gap: 4px !important; min-height: 52px !important; padding: 10px 12px !important; border-radius: 16px !important; background: linear-gradient(180deg, rgba(8, 15, 28, .86), rgba(5, 11, 22, .96)) !important; border: 1px solid rgba(90, 149, 221, .14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .stakeStatCard--accent{ background: linear-gradient(180deg, rgba(15, 24, 40, .90), rgba(10, 15, 29, .98)) !important; border-color: rgba(98, 198, 205, .16) !important; } body.graphPage .stakeStatLabel{ font-size: 10px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: rgba(180, 194, 215, .66) !important; } body.graphPage .stakeStatValue{ font: 700 15px/1 Rajdhani, ui-sans-serif, system-ui !important; color: rgba(244, 247, 255, .96) !important; } body.graphPage .stakeAmountControls{ display: grid !important; align-content: start !important; gap: 10px !important; min-width: 0 !important; } body.graphPage .stakeAmountControls .stakeAmountTop{ margin: 0 !important; } body.graphPage .stakeAmountControls .stakeAmountRow{ grid-template-columns: 42px minmax(0, 1fr) 42px !important; gap: 8px !important; } body.graphPage .stakeAmountControls .stakeStepBtn, body.graphPage .stakeAmountControls .stakeInput{ min-height: 44px !important; height: 44px !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-brand-w-v27: 170px; --mobile-account-w-v27: 112px; } body.graphPage .mobileTopBrand .brandIcon{ width: 38px !important; height: 38px !important; } body.graphPage .mobileTopBrand .brandName{ font-size: 12px !important; } body.graphPage .mobileTopBrandSub{ font-size: 9px !important; } body.graphPage .stakeAmountLayout{ grid-template-columns: minmax(0, 1fr) minmax(138px, 45%) !important; gap: 10px !important; } body.graphPage .stakeStatValue{ font-size: 14px !important; } } /* ========================================================= MOBILE REFERENCE V29 вЂ” remove legacy bottom logo, slim the balance pill, and reduce multiplier text inside mobile cells ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-brand-w-v29: 184px; --mobile-account-w-v29: 110px; --mobile-account-h-v29: 46px; } body.graphPage #logoBottom, body.graphPage .pill-logoBottom{ display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } body.graphPage .mobileTopBrand{ top: var(--mobile-top-gap-v26) !important; left: var(--mobile-page-side-v26) !important; width: var(--mobile-brand-w-v29) !important; min-width: var(--mobile-brand-w-v29) !important; z-index: 48 !important; } body.graphPage .pill-account{ top: calc(var(--mobile-top-gap-v26) + 5px) !important; right: var(--mobile-page-side-v26) !important; width: var(--mobile-account-w-v29) !important; min-width: var(--mobile-account-w-v29) !important; max-width: var(--mobile-account-w-v29) !important; } body.graphPage .pill-account .userMenuBtn{ min-height: var(--mobile-account-h-v29) !important; height: var(--mobile-account-h-v29) !important; padding: 0 11px !important; gap: 8px !important; border-radius: 17px !important; } body.graphPage .pill-account .graphUserBalanceIcon{ width: 16px !important; height: 16px !important; } body.graphPage .pill-account .graphUserBalance{ font-size: 12px !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-brand-w-v29: 170px; --mobile-account-w-v29: 104px; --mobile-account-h-v29: 44px; } } /* ========================================================= MOBILE RUNTIME SAFETY вЂ” keep header brand visible and the legacy bottom logo hidden when mobile chrome sync toggles ========================================================= */ @media (max-width: 760px){ body.graphPage #logoBottom[hidden], body.graphPage .pill-logoBottom[hidden]{ display: none !important; } body.graphPage .mobileTopBrand[hidden]{ display: none !important; } } /* ========================================================= MOBILE REFERENCE V31 вЂ” custom top-left brand block and richer cyan / purple stake rail for the mobile layout ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-brand-w-v31: 178px; --mobile-brand-h-v31: 56px; } body.graphPage .mobileTopBrand{ top: var(--mobile-top-gap-v26) !important; left: var(--mobile-page-side-v26) !important; width: var(--mobile-brand-w-v31) !important; min-width: var(--mobile-brand-w-v31) !important; transform: none !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; z-index: 50 !important; pointer-events: none !important; } body.graphPage .mobileCornerBrand{ position: relative !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) !important; align-items: center !important; gap: 11px !important; width: 100% !important; min-height: var(--mobile-brand-h-v31) !important; height: var(--mobile-brand-h-v31) !important; padding: 6px 14px 6px 10px !important; border-radius: 20px !important; border: 1px solid rgba(114, 154, 205, .18) !important; background: linear-gradient(135deg, rgba(10, 25, 43, .96), rgba(22, 24, 49, .94) 54%, rgba(61, 36, 90, .92) 100%) !important; box-shadow: 0 18px 36px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07), 0 0 22px rgba(82, 229, 224, .08), 0 0 30px rgba(176, 94, 255, .10) !important; overflow: hidden !important; } body.graphPage .mobileCornerBrand::before{ content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 140% at 0% 0%, rgba(82, 229, 224, .18), transparent 48%), radial-gradient(110% 140% at 100% 0%, rgba(176, 94, 255, .24), transparent 52%); pointer-events: none; } body.graphPage .mobileCornerBrandIcon{ position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 42px !important; height: 42px !important; border-radius: 14px !important; background: linear-gradient(160deg, rgba(91, 111, 141, .96), rgba(71, 82, 111, .94) 48%, rgba(95, 64, 140, .94) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 12px 22px rgba(41, 31, 80, .26) !important; } body.graphPage .mobileCornerBrandSvg{ width: 23px !important; height: 23px !important; display: block !important; } body.graphPage .mobileCornerBrandLine{ fill: none !important; stroke: rgba(247, 250, 255, .94) !important; stroke-width: 5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; } body.graphPage .mobileCornerBrandDot{ fill: rgba(247, 250, 255, .96) !important; } body.graphPage .mobileCornerBrandMeta{ position: relative !important; z-index: 1 !important; display: grid !important; align-content: center !important; gap: 3px !important; min-width: 0 !important; } body.graphPage .mobileCornerBrandTitle{ font: 800 13px/1 Rajdhani, ui-sans-serif, system-ui !important; color: rgba(245, 248, 255, .96) !important; letter-spacing: 0 !important; white-space: nowrap !important; } body.graphPage .mobileCornerBrandSub{ font: 700 10px/1.05 Rajdhani, ui-sans-serif, system-ui !important; color: rgba(189, 205, 228, .78) !important; letter-spacing: .01em !important; white-space: nowrap !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ background: radial-gradient(120% 160% at 0% 0%, rgba(82, 229, 224, .12), transparent 48%), radial-gradient(110% 150% at 100% 0%, rgba(176, 94, 255, .14), transparent 52%), linear-gradient(180deg, rgba(8, 22, 40, .96), rgba(6, 16, 31, .98)) !important; border: 1px solid rgba(87, 169, 217, .18) !important; box-shadow: 0 20px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05), 0 0 24px rgba(82, 229, 224, .06), 0 0 28px rgba(176, 94, 255, .08) !important; } body.graphPage .stakeAmountCard{ gap: 14px !important; } body.graphPage .stakeStatCard{ background: linear-gradient(180deg, rgba(5, 14, 28, .92), rgba(4, 10, 21, .98)) !important; border: 1px solid rgba(82, 229, 224, .16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 22px rgba(82, 229, 224, .05) !important; } body.graphPage .stakeStatCard--accent{ background: linear-gradient(180deg, rgba(18, 23, 42, .94), rgba(10, 13, 28, .99)) !important; border-color: rgba(176, 94, 255, .22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 24px rgba(176, 94, 255, .08) !important; } body.graphPage .stakeStatLabel{ color: rgba(171, 196, 224, .72) !important; } body.graphPage .stakeStatValue{ color: rgba(247, 249, 255, .97) !important; text-shadow: 0 0 18px rgba(82, 229, 224, .05) !important; } body.graphPage .stakeAmountControls{ padding: 8px 10px 10px !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(8, 17, 33, .56), rgba(8, 15, 29, .26)) !important; border: 1px solid rgba(102, 150, 222, .10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .stakeAmountTop .label{ color: rgba(193, 212, 236, .78) !important; } body.graphPage .stakeMaxBtn{ background: linear-gradient(180deg, rgba(39, 47, 83, .90), rgba(26, 31, 58, .96)) !important; border: 1px solid rgba(176, 94, 255, .24) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 20px rgba(176, 94, 255, .08) !important; } body.graphPage .stakeStepBtn{ background: linear-gradient(180deg, rgba(12, 31, 50, .94), rgba(10, 18, 35, .97)) !important; border: 1px solid rgba(82, 229, 224, .18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 18px rgba(82, 229, 224, .06) !important; } body.graphPage .stakeInput{ background: linear-gradient(180deg, rgba(4, 12, 24, .98), rgba(4, 9, 20, 1) 100%) !important; border: 1px solid rgba(176, 94, 255, .18) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 0 1px rgba(82, 229, 224, .08), 0 0 20px rgba(176, 94, 255, .07) !important; color: rgba(247, 249, 255, .98) !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-brand-w-v31: 168px; --mobile-brand-h-v31: 54px; } body.graphPage .mobileCornerBrand{ grid-template-columns: 40px minmax(0, 1fr) !important; gap: 10px !important; padding-right: 12px !important; } body.graphPage .mobileCornerBrandIcon{ width: 40px !important; height: 40px !important; } body.graphPage .mobileCornerBrandTitle{ font-size: 12px !important; } body.graphPage .mobileCornerBrandSub{ font-size: 9px !important; } } /* ========================================================= MOBILE REFERENCE V32 вЂ” restore desktop graph logo, align top pills, rebalance stake controls, add deposit tab ========================================================= */ @media (max-width: 760px){ body.graphPage .mobileTopBrand{ top: var(--mobile-top-gap-v26) !important; left: var(--mobile-page-side-v26) !important; width: 158px !important; min-width: 158px !important; z-index: 50 !important; pointer-events: auto !important; align-items: center !important; } body.graphPage .mobileCornerBrand{ display: flex !important; min-height: 52px !important; height: 52px !important; grid-template-columns: none !important; align-items: center !important; gap: 10px !important; padding: 6px 14px 6px 10px !important; border-radius: 18px !important; text-decoration: none !important; } body.graphPage .mobileCornerBrandIcon{ flex: 0 0 40px !important; width: 40px !important; height: 40px !important; border-radius: 13px !important; display: grid !important; place-items: center !important; } body.graphPage .mobileCornerBrandSvg{ width: 22px !important; height: 22px !important; transform: translateY(1px) !important; } body.graphPage .mobileCornerBrandMeta{ display: flex !important; align-items: center !important; gap: 0 !important; align-content: center !important; min-height: 100% !important; } body.graphPage .mobileCornerBrandTitle{ font-size: 14px !important; line-height: 1.02 !important; display: flex !important; align-items: center !important; min-height: 100% !important; padding-top: 1px !important; } body.graphPage .mobileCornerBrandSub{ display: none !important; } body.graphPage .stakeAmountLayout{ grid-template-columns: minmax(0, .94fr) minmax(190px, 1.06fr) !important; gap: 10px !important; } body.graphPage .stakeAmountStats{ gap: 8px !important; } body.graphPage .stakeAmountControls{ padding: 8px 8px 8px !important; gap: 8px !important; } body.graphPage .stakeAmountTop{ grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; } body.graphPage .stakeAmountTop .label{ font-size: 11px !important; } body.graphPage .stakeMaxBtn{ min-width: 68px !important; height: 38px !important; padding: 0 12px !important; border-radius: 13px !important; font-size: 11px !important; letter-spacing: .04em !important; } body.graphPage .stakeAmountControls .stakeAmountRow{ grid-template-columns: 34px minmax(72px, 1fr) 34px !important; gap: 6px !important; align-items: center !important; } body.graphPage .stakeAmountControls .stakeStepBtn{ width: 34px !important; min-width: 34px !important; min-height: 40px !important; height: 40px !important; padding: 0 !important; border-radius: 11px !important; font-size: 22px !important; line-height: 1 !important; } body.graphPage .stakeAmountControls .stakeInput{ min-width: 72px !important; min-height: 40px !important; height: 40px !important; padding: 0 10px !important; border-radius: 12px !important; font-size: 17px !important; text-align: center !important; } body.graphPage .mobileTradeTabs{ grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; padding-left: 10px !important; padding-right: 10px !important; } body.graphPage .mobileTradeTab{ gap: 5px !important; padding: 4px 0 2px !important; } body.graphPage .mobileTradeTabIcon{ width: 26px !important; height: 26px !important; border-radius: 9px !important; } body.graphPage .mobileTradeTabLabel{ font-size: 10px !important; } } @media (max-width: 420px){ body.graphPage .mobileTopBrand{ width: 150px !important; min-width: 150px !important; } body.graphPage .mobileCornerBrand{ min-height: 50px !important; height: 50px !important; } body.graphPage .mobileCornerBrandIcon{ flex-basis: 38px !important; width: 38px !important; height: 38px !important; } body.graphPage .mobileCornerBrandSvg{ width: 21px !important; height: 21px !important; } body.graphPage .stakeAmountLayout{ grid-template-columns: minmax(0, .9fr) minmax(164px, 1.1fr) !important; } body.graphPage .stakeAmountControls .stakeAmountRow{ grid-template-columns: 32px minmax(68px, 1fr) 32px !important; } body.graphPage .stakeAmountControls .stakeStepBtn{ width: 32px !important; min-width: 32px !important; height: 38px !important; min-height: 38px !important; font-size: 20px !important; } body.graphPage .stakeAmountControls .stakeInput{ min-width: 68px !important; height: 38px !important; min-height: 38px !important; font-size: 16px !important; } } body.graphPage .pill-logoBottom{ pointer-events: none !important; } body.graphPage .pill-logoBottom .brandPill--static{ pointer-events: none !important; cursor: default !important; text-decoration: none !important; } body.graphPage .pill-logoBottom .brandPill--static .brandName{ text-decoration: none !important; } /* ========================================================= MOBILE REFERENCE V35 вЂ” align header pills on one row, simplify the amount label, and polish mobile win readout ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-header-row-top-v35: var(--mobile-top-gap-v26); --mobile-brand-w-v35: 156px; } body.graphPage .mobileTopBrand{ top: var(--mobile-header-row-top-v35) !important; width: var(--mobile-brand-w-v35) !important; min-width: var(--mobile-brand-w-v35) !important; align-items: stretch !important; } body.graphPage .mobileCornerBrand{ min-height: 50px !important; height: 50px !important; padding: 5px 14px 5px 11px !important; align-items: center !important; } body.graphPage .mobileCornerBrandIcon{ flex: 0 0 38px !important; width: 38px !important; height: 38px !important; align-self: center !important; } body.graphPage .mobileCornerBrandSvg{ width: 20px !important; height: 20px !important; transform: translateY(0) !important; } body.graphPage .mobileCornerBrandMeta{ align-self: center !important; min-height: auto !important; } body.graphPage .mobileCornerBrandTitle{ line-height: 1 !important; padding-top: 0 !important; transform: translateY(-.5px) !important; } body.graphPage .pill-account{ top: var(--mobile-header-row-top-v35) !important; } body.graphPage .stakeAmountTop .label{ font-size: 12px !important; line-height: 1.05 !important; letter-spacing: 0 !important; text-transform: none !important; } body.graphPage .stakeAmountTop .label::after{ content: none !important; display: none !important; } body.graphPage .stakeStatValue{ font: 700 17px/1 Rajdhani, ui-sans-serif, system-ui !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-brand-w-v35: 148px; } body.graphPage .mobileCornerBrand{ min-height: 48px !important; height: 48px !important; } body.graphPage .mobileCornerBrandIcon{ flex-basis: 36px !important; width: 36px !important; height: 36px !important; } body.graphPage .mobileCornerBrandSvg{ width: 19px !important; height: 19px !important; } body.graphPage .stakeStatValue{ font-size: 16px !important; } } /* ========================================================= MOBILE REFERENCE V36 вЂ” final launch polish for the top row ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-header-pill-top-v36: calc(env(safe-area-inset-top) + 18px); --mobile-header-pill-h-v36: 52px; --mobile-brand-w-v36: 156px; --mobile-account-w-v36: 102px; } body.graphPage .mobileTopBrand{ top: var(--mobile-header-pill-top-v36) !important; left: var(--mobile-page-side-v26) !important; width: var(--mobile-brand-w-v36) !important; min-width: var(--mobile-brand-w-v36) !important; align-items: center !important; justify-content: flex-start !important; } body.graphPage .mobileCornerBrand{ box-sizing: border-box !important; display: flex !important; align-items: center !important; width: 100% !important; min-height: var(--mobile-live-pill-h, var(--mobile-header-pill-h-v36)) !important; height: var(--mobile-live-pill-h, var(--mobile-header-pill-h-v36)) !important; padding: 0 14px 0 11px !important; gap: 10px !important; border-radius: 18px !important; border: 1px solid rgba(113, 162, 216, .17) !important; background: radial-gradient(120% 130% at 4% 8%, rgba(88, 218, 255, .15), transparent 40%), radial-gradient(118% 140% at 100% 0%, rgba(182, 95, 255, .18), transparent 46%), linear-gradient(135deg, rgba(11, 25, 43, .96), rgba(16, 21, 39, .94) 56%, rgba(66, 37, 95, .92) 100%) !important; box-shadow: 0 16px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06), 0 0 20px rgba(86, 216, 255, .05), 0 0 24px rgba(182, 95, 255, .05) !important; } body.graphPage .mobileCornerBrandIcon{ flex: 0 0 38px !important; width: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 13px !important; background: linear-gradient(160deg, rgba(94, 112, 142, .98), rgba(74, 85, 115, .95) 48%, rgba(99, 65, 146, .94) 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 18px rgba(46, 34, 88, .22) !important; } body.graphPage .mobileCornerBrandSvg{ width: 20px !important; height: 20px !important; display: block !important; transform: none !important; } body.graphPage .mobileCornerBrandMeta{ display: flex !important; align-items: center !important; min-height: 100% !important; } body.graphPage .mobileCornerBrandTitle{ display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; font-size: 13.5px !important; font-weight: 800 !important; transform: translateY(-.5px) !important; } body.graphPage .pill-account{ top: var(--mobile-header-pill-top-v36) !important; right: var(--mobile-page-side-v26) !important; width: var(--mobile-account-w-v36) !important; min-width: var(--mobile-account-w-v36) !important; max-width: var(--mobile-account-w-v36) !important; } body.graphPage .pill-account .userMenuBtn, body.graphPage .pill-account .btn.small{ box-sizing: border-box !important; min-height: var(--mobile-header-pill-h-v36) !important; height: var(--mobile-header-pill-h-v36) !important; padding: 0 13px !important; border-radius: 18px !important; align-items: center !important; } body.graphPage .pill-account .graphUserBalance{ font-size: 14px !important; font-weight: 800 !important; letter-spacing: .01em !important; } body.graphPage .pill-account .graphUserBalanceIcon{ width: 18px !important; height: 18px !important; } body.graphPage .pill-priceTop{ min-width: 110px !important; max-width: 124px !important; height: 42px !important; min-height: 42px !important; padding: 0 15px !important; border-radius: 16px !important; } body.graphPage .pill-priceTop #price{ font-size: 15px !important; font-weight: 800 !important; letter-spacing: .01em !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-header-pill-top-v36: calc(env(safe-area-inset-top) + 14px); --mobile-header-pill-h-v36: 50px; --mobile-brand-w-v36: 150px; --mobile-account-w-v36: 98px; } body.graphPage .mobileCornerBrandIcon{ flex-basis: 36px !important; width: 36px !important; height: 36px !important; } body.graphPage .mobileCornerBrandSvg{ width: 19px !important; height: 19px !important; } body.graphPage .mobileCornerBrandTitle{ font-size: 13px !important; } body.graphPage .pill-account .graphUserBalance, body.graphPage .pill-priceTop #price{ font-size: 13px !important; } } /* ========================================================= MOBILE REFERENCE V37 вЂ” bottom-align the logo and balance pills, while making the balance pill slightly shorter ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-header-brand-h-v37: 52px; --mobile-header-account-h-v37: 42px; --mobile-account-w-v37: 100px; --mobile-header-account-icon-v38: 22px; } body.graphPage .mobileTopBrand{ top: var(--mobile-header-pill-top-v36) !important; } body.graphPage .mobileCornerBrand{ min-height: var(--mobile-header-brand-h-v37) !important; height: var(--mobile-header-brand-h-v37) !important; } body.graphPage .pill-account{ top: calc(var(--mobile-header-pill-top-v36) + (var(--mobile-header-brand-h-v37) - var(--mobile-header-account-h-v37))) !important; width: var(--mobile-account-w-v37) !important; min-width: var(--mobile-account-w-v37) !important; max-width: var(--mobile-account-w-v37) !important; } body.graphPage .pill-account .userMenuBtn, body.graphPage .pill-account .btn.small{ min-height: var(--mobile-header-account-h-v37) !important; height: var(--mobile-header-account-h-v37) !important; padding: 0 12px !important; border-radius: 17px !important; } body.graphPage .pill-account .graphUserBalanceIcon{ width: var(--mobile-header-account-icon-v38) !important; height: var(--mobile-header-account-icon-v38) !important; } body.graphPage .pill-account .graphUserBalance{ font-size: 14px !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-header-brand-h-v37: 50px; --mobile-header-account-h-v37: 40px; --mobile-account-w-v37: 96px; --mobile-header-account-icon-v38: 21px; } } /* ========================================================= MOBILE REFERENCE V40 вЂ” fix account pill offset, align the real visible pills, and use one larger USDT icon ========================================================= */ @media (max-width: 760px){ body.graphPage{ --mobile-header-account-h-v40: 42px; --mobile-header-account-icon-v40: 21px; } body.graphPage .pill-account .userMenuBtn, body.graphPage .pill-account .btn.small{ top: 0 !important; min-height: var(--mobile-header-account-h-v40) !important; height: var(--mobile-header-account-h-v40) !important; padding: 0 13px !important; gap: 7px !important; justify-content: flex-start !important; } body.graphPage .pill-account .graphUserDot{ display: none !important; } body.graphPage .pill-account .graphUserBalanceWrap{ display: contents !important; } body.graphPage .pill-account .graphUserBalanceIcon, body.panelPage .pill-account .graphUserBalanceIcon{ width: var(--mobile-header-account-icon-v40) !important; height: var(--mobile-header-account-icon-v40) !important; flex: 0 0 var(--mobile-header-account-icon-v40) !important; margin: 0 !important; } body.graphPage .pill-account .graphUserBalance{ line-height: 1 !important; } } @media (max-width: 420px){ body.graphPage{ --mobile-header-account-h-v40: 40px; --mobile-header-account-icon-v40: 20px; } } /* ========================================================= MOBILE UI V41 вЂ” stable USDT pill icon and auto-fit labels ========================================================= */ body.graphPage .stakeStatLabel, body.graphPage .stakeAmountTop .label, body.graphPage .mobileTradeTabLabel, body.panelPage .panelBrandSub, body.panelPage .graphUserName{ max-width: 100%; overflow-wrap: anywhere; } body.graphPage .pill-account .graphUserDot, body.panelPage .pill-account .graphUserDot{ display: none !important; } body.graphPage .pill-account .graphUserBalanceWrap, body.panelPage .pill-account .graphUserBalanceWrap{ display: inline-flex !important; align-items: center !important; gap: 7px !important; min-width: 0 !important; white-space: nowrap !important; } body.graphPage .pill-account .graphUserBalanceIcon, body.panelPage .pill-account .graphUserBalanceIcon{ width: 18px !important; height: 18px !important; flex: 0 0 18px !important; margin: 0 !important; } body.graphPage .pill-account .graphUserBalance, body.panelPage .pill-account .graphUserBalance, body.panelPage .pill-account .graphUserName{ line-height: 1 !important; } @media (max-width: 760px){ body.graphPage .pill-account .userMenuBtn{ gap: 0 !important; } body.graphPage .pill-account .graphUserBalanceWrap, body.panelPage .pill-account .graphUserBalanceWrap{ gap: 8px !important; } body.graphPage .pill-account .graphUserBalanceIcon{ width: 19px !important; height: 19px !important; flex-basis: 19px !important; } body.panelPage .pill-account .graphUserBalanceIcon{ width: 17px !important; height: 17px !important; flex-basis: 17px !important; } body.graphPage .stakeStatLabel{ display: block !important; font-size: 10px !important; line-height: 1.05 !important; letter-spacing: .02em !important; } body.graphPage .stakeAmountTop .label{ font-size: 12px !important; line-height: 1.05 !important; } body.graphPage .mobileTradeTabLabel{ line-height: 1.05 !important; } } @media (max-width: 760px){ body.graphPage{ background: radial-gradient(1200px 820px at 16% 12%, rgba(102,223,255,.22), transparent 60%), radial-gradient(940px 680px at 84% 18%, rgba(255,79,216,.18), transparent 56%), radial-gradient(860px 620px at 58% 84%, rgba(56,242,145,.10), transparent 26%), #08111f !important; } body.graphPage .pill-priceTop, body.graphPage .pill-account .userMenuBtn, body.graphPage .mobileTopBrand .brandPill{ background: radial-gradient(circle at 22% 28%, rgba(102,223,255,.18), transparent 58%), radial-gradient(circle at 78% 74%, rgba(255,79,216,.14), transparent 62%), linear-gradient(180deg, rgba(11, 24, 45, .82), rgba(13, 17, 33, .82)) !important; border: 1px solid rgba(112, 188, 255, .18) !important; } body.graphPage .notifs{ top: calc(var(--mobile-chart-top-v22) + 10px) !important; width: min(260px, calc(100vw - 122px)) !important; z-index: 33 !important; } body.graphPage .notifs > *{ padding: 9px 14px !important; border-radius: 22px !important; font-size: 12px !important; gap: 8px !important; box-shadow: 0 14px 34px rgba(0,0,0,.30), 0 0 20px rgba(181,107,255,.08) !important; } body.graphPage .notifs .amt{ font-size: 11px !important; } } @media (max-width: 420px){ body.graphPage .notifs{ width: min(240px, calc(100vw - 118px)) !important; } body.graphPage .notifs > *{ padding: 8px 12px !important; font-size: 11px !important; } } @media (max-width: 420px){ body.graphPage .pill-account .graphUserBalanceIcon{ width: 18px !important; height: 18px !important; flex-basis: 18px !important; } } /* ===== FINAL iPhone / safe-area polish ===== */ html, body, body.graphPage, body.panelPage{ background-color:#0b0710 !important; } body.panelPage, body.graphPage{ -webkit-text-size-adjust:100%; } body.panelPage .panelLayout, body.panelPage .main, body.panelPage .container{ background:transparent !important; } @supports (padding: max(0px)){ body.panelPage{ padding-top:max(0px, env(safe-area-inset-top)); padding-bottom:max(0px, env(safe-area-inset-bottom)); } } /* ========================================================= MOBILE V44 вЂ” iPhone-safe dark pages + brighter mobile skin ========================================================= */ @media (max-width: 760px){ html, body, body.graphPage, body.panelPage{ background:#07101d !important; } body.graphPage::before, body.panelPage::after{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; } body.graphPage::before{ background: radial-gradient(120% 84% at 16% 18%, rgba(88, 198, 255, .14), transparent 38%), radial-gradient(95% 74% at 86% 14%, rgba(196, 102, 255, .16), transparent 40%), linear-gradient(180deg, #07111f 0%, #07101c 46%, #050b15 100%); } body.panelPage::after{ background: radial-gradient(120% 84% at 16% 16%, rgba(88, 198, 255, .10), transparent 36%), radial-gradient(100% 78% at 86% 12%, rgba(196, 102, 255, .12), transparent 42%), linear-gradient(180deg, #08111d 0%, #060d18 52%, #040914 100%); } body.panelPage .card, body.panelPage .doc, body.panelPage .settingsCard, body.panelPage .settingLine, body.panelPage .settingLine__controls, body.panelPage .docFooter{ background: linear-gradient(180deg, rgba(11, 20, 35, .96), rgba(8, 16, 29, .94)) !important; border-color: rgba(126, 149, 190, .14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 42px rgba(0,0,0,.28) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.panelPage .p, body.panelPage p, body.panelPage .h1, body.panelPage .h2, body.panelPage .rangeValue, body.panelPage .settingLine__eyebrow, body.panelPage .navLabel, body.panelPage .panelBrandName, body.panelPage .panelBrandSub{ color: rgba(238, 245, 255, .92) !important; } body.panelPage .panelBrandSub, body.panelPage .settingLine__eyebrow, body.panelPage .p, body.panelPage p{ color: rgba(192, 208, 231, .76) !important; } body.panelPage .navItem, body.panelPage .sidebar .panelBrand{ background: linear-gradient(180deg, rgba(19, 31, 51, .82), rgba(14, 20, 36, .78)) !important; border-color: rgba(126, 149, 190, .16) !important; } body.panelPage .navItem.is-active{ background: linear-gradient(135deg, rgba(128, 84, 255, .20), rgba(56, 242, 145, .16)) !important; border-color: rgba(82, 220, 192, .28) !important; } body.graphPage .chartWrap{ background: radial-gradient(110% 90% at 14% 18%, rgba(92, 204, 255, .14), transparent 36%), radial-gradient(92% 68% at 84% 14%, rgba(196, 104, 255, .14), transparent 40%), linear-gradient(180deg, rgba(8, 18, 33, .99), rgba(7, 14, 27, .98)) !important; border-color: rgba(104, 165, 235, .14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 26px 56px rgba(0,0,0,.36) !important; } body.graphPage .chartWrap::before{ opacity:.58 !important; filter:blur(8px) !important; } body.graphPage .pill-priceTop, body.graphPage .pill-account .userMenuBtn, body.graphPage .pill-logoBottom .brandPill, body.graphPage .pill-stakeBottom .stakeMenuDrop{ background: linear-gradient(180deg, rgba(19, 32, 54, .92), rgba(27, 18, 48, .86)) !important; border-color: rgba(113, 173, 239, .18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px rgba(0,0,0,.26) !important; } body.graphPage .pill-stakeBottom .stakeMenuDrop{ background: radial-gradient(120% 110% at 14% 10%, rgba(86, 198, 255, .11), transparent 44%), radial-gradient(110% 90% at 88% 8%, rgba(188, 102, 255, .10), transparent 44%), linear-gradient(180deg, rgba(12, 24, 42, .96), rgba(8, 17, 31, .93)) !important; } } /* ===== FINAL mobile trade visual pass v48 ===== */ @media (max-width: 760px){ body.graphPage{ background: radial-gradient(1200px 860px at 14% 14%, rgba(102,223,255,.28), transparent 58%), radial-gradient(980px 720px at 86% 16%, rgba(255,79,216,.22), transparent 54%), radial-gradient(820px 620px at 50% 84%, rgba(82,255,190,.12), transparent 30%), #091425 !important; } body.graphPage .chartWrap{ background: radial-gradient(115% 92% at 14% 18%, rgba(102,223,255,.20), transparent 38%), radial-gradient(96% 72% at 84% 14%, rgba(210,110,255,.18), transparent 42%), linear-gradient(180deg, rgba(10, 22, 40, .985), rgba(8, 18, 33, .975)) !important; border-color: rgba(124, 188, 255, .18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 52px rgba(0,0,0,.34), 0 0 34px rgba(102,223,255,.06) !important; } body.graphPage .chartWrap::before{ opacity: .72 !important; filter: blur(7px) saturate(112%) !important; } body.graphPage .pill-priceTop, body.graphPage .pill-account .userMenuBtn, body.graphPage .mobileCornerBrand{ background: radial-gradient(circle at 22% 28%, rgba(102,223,255,.24), transparent 58%), radial-gradient(circle at 78% 74%, rgba(255,79,216,.18), transparent 62%), linear-gradient(180deg, rgba(16, 30, 53, .90), rgba(28, 18, 49, .84)) !important; border: 1px solid rgba(126, 196, 255, .22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 34px rgba(0,0,0,.26), 0 0 22px rgba(182, 102, 255, .08) !important; } body.graphPage .notifs{ top: calc(var(--mobile-chart-top-v22) + 42px) !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; max-width: calc(100vw - 164px) !important; z-index: 34 !important; align-items: center !important; } body.graphPage .notifs > *{ align-self: center !important; padding: 7px 12px !important; min-height: 34px !important; border-radius: 18px !important; font-size: 11px !important; line-height: 1 !important; gap: 7px !important; } body.graphPage .notifs .amt{ font-size: 11px !important; } } @media (max-width: 420px){ body.graphPage .notifs{ top: calc(var(--mobile-chart-top-v22) + 40px) !important; max-width: calc(100vw - 150px) !important; } body.graphPage .notifs > *{ padding: 7px 11px !important; font-size: 10px !important; } } /* ========================================================= MOBILE TRADE VISUAL FIX V49 вЂ” tighter cells, cleaner iPhone chrome, brighter lower chart base and smaller mobile price pill ========================================================= */ @media (max-width: 760px){ html, body, body.graphPage{ background: #111b32 !important; background-color: #111b32 !important; } body.graphPage{ --mobile-safari-chrome:#111b32; background: radial-gradient(1200px 860px at 14% 14%, rgba(102,223,255,.26), transparent 58%), radial-gradient(980px 720px at 86% 16%, rgba(255,79,216,.20), transparent 54%), radial-gradient(820px 620px at 50% 84%, rgba(82,255,190,.11), transparent 30%), var(--mobile-safari-chrome) !important; } body.graphPage .chartWrap{ background: radial-gradient(115% 92% at 14% 18%, rgba(102,223,255,.20), transparent 38%), radial-gradient(96% 72% at 84% 14%, rgba(210,110,255,.17), transparent 42%), linear-gradient(180deg, rgba(16, 31, 54, .985), rgba(14, 27, 47, .978)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 52px rgba(0,0,0,.30), 0 0 34px rgba(102,223,255,.05) !important; } body.graphPage .chartWrap::after{ background: radial-gradient(1200px 800px at 42% 40%, transparent 58%, rgba(0,0,0,.26) 100%), linear-gradient(180deg, rgba(7, 15, 27, 0.01) 0%, rgba(9, 18, 32, 0.11) 100%) !important; opacity: .26 !important; } body.graphPage .pill-priceTop{ min-width: 92px !important; max-width: 104px !important; height: 36px !important; min-height: 36px !important; padding: 0 12px !important; gap: 8px !important; border-radius: 14px !important; } body.graphPage .pill-priceTop .dot{ width: 8px !important; height: 8px !important; } body.graphPage .pill-priceTop #price{ font-size: 13px !important; font-weight: 800 !important; letter-spacing: .005em !important; } } /* ========================================================= MOBILE TRADE POLISH V50 вЂ” seamless header/chart blend and lighter mobile top edge without changing the overall skin ========================================================= */ @media (max-width: 760px){ body.graphPage .chartWrap{ border-top-color: transparent !important; box-shadow: 0 24px 52px rgba(0,0,0,.30), 0 0 34px rgba(102,223,255,.05) !important; } body.graphPage .chartWrap::before{ top: -18px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; opacity: .78 !important; } } /* ========================================================= MOBILE FINAL POLISH V51 вЂ” top-edge blend for iPhone Safari ========================================================= */ @media (max-width: 760px){ html, body, body.graphPage{ background:#111b32 !important; background-color:#111b32 !important; } body.graphPage{ background: linear-gradient(180deg, #111b32 0px, #111b32 76px, rgba(58, 70, 112, .82) 132px, #111b32 220px), radial-gradient(1200px 860px at 14% 14%, rgba(102,223,255,.24), transparent 58%), radial-gradient(980px 720px at 86% 16%, rgba(255,79,216,.18), transparent 54%), radial-gradient(820px 620px at 50% 84%, rgba(82,255,190,.10), transparent 30%), #111b32 !important; } body.graphPage::after{ content:""; position:fixed; inset:0 0 auto 0; height:140px; pointer-events:none; z-index:-1; background:linear-gradient(180deg, rgba(17, 28, 50, .98) 0%, rgba(17, 28, 50, .94) 54px, rgba(17, 28, 50, 0) 140px) !important; } body.graphPage .chartWrap{ background: linear-gradient(180deg, rgba(17, 28, 50, .985) 0%, rgba(16, 31, 54, .982) 22%, rgba(14, 27, 47, .976) 100%), radial-gradient(115% 92% at 14% 18%, rgba(102,223,255,.17), transparent 38%), radial-gradient(96% 72% at 84% 14%, rgba(210,110,255,.15), transparent 42%) !important; } } /* ========================================================= DESIGN REVISION V1 вЂ” reference-style overlay layout ========================================================= */ :root{ --trade-bg-top:#07111d; --trade-bg-bottom:#050913; --trade-cyan:#7ce8ff; --trade-cyan-strong:#a9f2ff; --trade-violet:#ae7cff; --trade-pink:#ff5fe0; --trade-green:#52f5be; --trade-amber:#ffd76a; --trade-danger:#ff6f86; --trade-glass:rgba(7, 16, 29, 0.56); --trade-glass-strong:rgba(9, 19, 35, 0.82); --trade-stroke:rgba(167, 220, 255, 0.14); --trade-stroke-strong:rgba(173, 194, 255, 0.22); --trade-shadow:0 18px 48px rgba(0,0,0,.34); } body.graphPage{ font-family: var(--font); background: radial-gradient(1200px 760px at 12% 10%, rgba(124,232,255,.18), transparent 55%), radial-gradient(1000px 720px at 88% 16%, rgba(255,95,224,.14), transparent 48%), radial-gradient(880px 560px at 50% 84%, rgba(82,245,190,.08), transparent 34%), linear-gradient(180deg, var(--trade-bg-top) 0%, #091120 28%, var(--trade-bg-bottom) 100%) !important; color:#f4fbff; } body.graphPage::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-2; background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 18%), radial-gradient(1000px 500px at 50% 0%, rgba(89,156,255,.06), transparent 62%); } .tradeViewport{ position:relative; width:100%; min-height:100vh; min-height:100dvh; isolation:isolate; } .chartWrap{ position:fixed; inset:0; width:100%; height:100vh; height:100dvh; background: radial-gradient(120% 100% at 18% 20%, rgba(124,232,255,.12), transparent 38%), radial-gradient(90% 82% at 82% 14%, rgba(194,120,255,.13), transparent 40%), linear-gradient(180deg, rgba(11,23,39,.98) 0%, rgba(8,17,29,.985) 30%, rgba(5,9,19,.98) 100%) !important; backdrop-filter:none; } .chartWrap::before{ inset:0; z-index:2; background: radial-gradient(760px 360px at 20% 22%, rgba(124,232,255,.12) 0%, transparent 65%), radial-gradient(920px 520px at 84% 16%, rgba(255,95,224,.10) 0%, transparent 60%), linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 24%, rgba(0,0,0,0) 70%, rgba(0,0,0,.18) 100%); filter:none; opacity:.95; } .chartWrap::after{ z-index:3; background: radial-gradient(1400px 900px at 50% 46%, transparent 52%, rgba(0,0,0,.36) 100%), linear-gradient(180deg, rgba(3,8,14,.05) 0%, rgba(3,8,14,.20) 100%); opacity:.8; } .tradeHud{ position:fixed; inset:0; z-index:14; pointer-events:none; } .tradeHudTop, .tradeHudBottom{ position:absolute; left:24px; right:24px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .tradeHudTop{ top:max(18px, env(safe-area-inset-top)); } .tradeHudBottom{ bottom:max(20px, env(safe-area-inset-bottom)); align-items:flex-end; } .tradeHudCluster{ display:flex; align-items:center; gap:14px; min-width:0; pointer-events:none; } .tradeHudCluster > *{ pointer-events:auto; } .tradeHudCluster--right{ justify-content:flex-end; } .pill, .userMenuBtn, .stakeMenuBtn, .mobileCornerBrand, .brandPill{ position:relative; overflow:hidden; border:1px solid var(--trade-stroke) !important; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)), var(--trade-glass) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(255,255,255,.04), var(--trade-shadow); backdrop-filter: blur(18px) saturate(135%); -webkit-backdrop-filter: blur(18px) saturate(135%); } .pill::before, .userMenuBtn::before, .stakeMenuBtn::before, .mobileCornerBrand::before, .brandPill::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 46%), radial-gradient(80% 80% at 18% 18%, rgba(124,232,255,.12), transparent 60%); opacity:.95; } .pill-priceTop, .pill-account, .pill-stakeBottom, .pill-logoBottom{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; z-index:auto !important; } .pill-priceTop{ min-width:150px; min-height:58px; padding:0 18px; border-radius:22px !important; gap:12px; } .pill-priceTop .dot{ width:9px; height:9px; background:var(--trade-green); box-shadow:0 0 18px rgba(82,245,190,.75); } .pill-priceTop #price{ font:800 28px/1.02 "Rajdhani", ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.02em; color:#effbff; text-shadow:0 0 28px rgba(124,232,255,.12); } .pill.up #price{ color:var(--trade-green); } .pill.down #price{ color:var(--trade-danger); } .pill-account, .pill-stakeBottom{ display:flex; align-items:center; padding:0; background:none !important; border:none !important; box-shadow:none !important; } .btn.small, .userMenuBtn, .stakeMenuBtn{ min-height:58px; border-radius:22px !important; padding:0 18px !important; font:700 15px/1 var(--font); letter-spacing:.04em; color:#f1f8ff !important; } .btn.small{ border:1px solid var(--trade-stroke) !important; background: linear-gradient(180deg, rgba(187,142,255,.24), rgba(101,82,255,.18)), var(--trade-glass) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 38px rgba(19,24,58,.36); } .btn.small:hover, .userMenuBtn:hover, .stakeMenuBtn:hover{ transform:translateY(-1px); border-color:var(--trade-stroke-strong) !important; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(11, 22, 39, .78) !important; } .userMenuBtn, .stakeMenuBtn{ min-width:210px; justify-content:space-between; gap:12px; } .userMenuBtn #accountPill, .stakeMenuText, #stakePillValue{ font:800 17px/1 "Rajdhani", ui-monospace, monospace; letter-spacing:.03em; } .pill-logoBottom{ display:block; } .brandPill{ padding:14px 18px !important; border-radius:20px !important; gap:12px; } .brandName{ font:800 15px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; color:rgba(238,248,255,.92); } .mobileTopBrand{ display:none; position:relative; top:auto; left:auto; right:auto; } .mobileCornerBrand{ display:flex; align-items:center; gap:10px; padding:0 16px; min-height:52px; border-radius:18px; color:#f2fbff; text-decoration:none; } .mobileCornerBrandTitle{ font:800 14px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; } .userMenuDrop, .stakeMenuDrop{ border-radius:28px !important; border:1px solid rgba(178,213,255,.14) !important; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), rgba(7, 16, 29, .92) !important; backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow:0 28px 80px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08); } .userMenuDrop{ top:calc(100% + 12px) !important; bottom:auto !important; min-width:240px; padding:10px; } .stakeMenuDrop{ width:min(420px, calc(100vw - 32px)) !important; bottom:calc(100% + 14px) !important; right:0 !important; padding:14px !important; } .userMenuItem, .stakeChip, .stakeStepBtn, .stakeMaxBtn, .authTab, .authClose{ transition:transform .18s ease, background .22s ease, border-color .22s ease, opacity .22s ease; } .userMenuItem{ border-radius:16px; color:#ebf7ff; } .userMenuItem:hover{ background:rgba(124,232,255,.08) !important; } .stakeDropHeader{ align-items:flex-start; padding:2px 4px 10px; } .stakeDropTitle{ font:800 18px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; color:#f4fbff; } .stakeDropBalanceLabel, .stakeStatLabel, .label{ color:rgba(205,223,241,.6) !important; letter-spacing:.08em; text-transform:uppercase; } .stakeDropBalanceValue, #balanceValue, .stakeStatValue{ font-family:"Rajdhani", ui-monospace, monospace; font-weight:800; } .stakeAmountCard{ margin:0 !important; padding:16px !important; border-radius:22px !important; border:1px solid rgba(178,213,255,.12) !important; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), rgba(6, 14, 26, .72) !important; } .stakeAmountLayout{ display:grid !important; gap:14px; } .stakeAmountStats{ display:grid !important; grid-template-columns:1fr 1fr; gap:10px; } .stakeStatCard{ padding:12px 14px; border-radius:18px; border:1px solid rgba(178,213,255,.10); background:rgba(255,255,255,.03); } .stakeStatCard--accent{ background:linear-gradient(180deg, rgba(82,245,190,.10), rgba(82,245,190,.03)); border-color:rgba(82,245,190,.16); } .stakeAmountTop{ align-items:center; } .stakeAmountRow{ display:grid; grid-template-columns:52px 1fr 52px; gap:10px; } .stakeInput, .input{ width:100%; min-height:52px; border-radius:18px !important; border:1px solid rgba(178,213,255,.12) !important; background:rgba(3, 9, 18, .72) !important; color:#f4fbff !important; font:800 22px/1 "Rajdhani", ui-monospace, monospace; text-align:center; } .stakeStepBtn, .stakeMaxBtn, .stakeChip{ border:1px solid rgba(178,213,255,.12) !important; background:rgba(255,255,255,.04) !important; color:#ecf8ff !important; } .stakeStepBtn{ border-radius:18px; min-height:52px; font-size:24px; } .stakeStepBtn:hover, .stakeChip:hover, .stakeMaxBtn:hover{ transform:translateY(-1px); border-color:rgba(124,232,255,.22) !important; background:rgba(124,232,255,.10) !important; } .stakePresets{ margin-top:14px !important; gap:10px !important; } .stakeChip{ padding:11px 14px !important; border-radius:999px !important; } .cameraUi{ right:24px; top:104px; gap:12px; z-index:15; } .cameraGlassBtn{ width:50px; height:50px; border-radius:18px; border:1px solid rgba(178,213,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(7, 16, 29, .62); box-shadow:0 16px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16); color:#eff8ff; } .cameraGlassBtn.is-active{ background: linear-gradient(180deg, rgba(174,124,255,.30), rgba(124,232,255,.10)), rgba(7, 16, 29, .76); } .authOverlay, .panelOverlay{ background:rgba(4, 8, 16, .62) !important; backdrop-filter:blur(16px) saturate(120%); } .authCard, .panelCard{ border-radius:30px !important; border:1px solid rgba(178,213,255,.12) !important; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), rgba(8, 17, 29, .92) !important; box-shadow:0 32px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08); } .mobileTradeTabs{ border-top:1px solid rgba(178,213,255,.10) !important; background: linear-gradient(180deg, rgba(9, 19, 35, .80), rgba(6, 14, 26, .94)) !important; backdrop-filter:blur(20px) saturate(135%); } .mobileTradeTab{ color:rgba(226,241,255,.72) !important; } .mobileTradeTab--active{ color:#f3fbff !important; } .notifs{ z-index:18; } @media (max-width: 900px){ .tradeHudTop, .tradeHudBottom{ left:16px; right:16px; } .userMenuBtn, .stakeMenuBtn{ min-width:186px; } .pill-priceTop{ min-width:132px; min-height:54px; } .pill-priceTop #price{ font-size:24px; } } @media (max-width: 760px){ .tradeHudTop{ top:max(12px, env(safe-area-inset-top)); align-items:center; gap:10px; } .tradeHudBottom{ left:12px; right:12px; bottom:calc(78px + max(8px, env(safe-area-inset-bottom))); align-items:flex-end; } .tradeHudCluster{ gap:10px; } .tradeHudCluster--left{ flex:1 1 auto; } .tradeHudCluster--right{ flex:0 0 auto; } .pill-priceTop{ min-width:112px !important; min-height:44px !important; padding:0 14px !important; border-radius:16px !important; gap:8px !important; } .pill-priceTop #price{ font-size:18px !important; letter-spacing:.01em; } .pill-priceTop .dot{ width:8px; height:8px; } .mobileTopBrand{ display:block; } .pill-logoBottom{ display:none !important; } .btn.small, .userMenuBtn, .stakeMenuBtn{ min-height:46px; border-radius:16px !important; padding:0 14px !important; } .userMenuBtn, .stakeMenuBtn{ min-width:auto; } .userMenuBtn #accountPill, .stakeMenuText, #stakePillValue{ font-size:15px; } .stakeMenuDrop{ width:min(390px, calc(100vw - 24px)) !important; border-radius:22px !important; } .stakeAmountCard{ padding:14px !important; } .stakeAmountStats{ grid-template-columns:1fr; } .cameraUi{ right:12px; top:68px; gap:10px; } .cameraGlassBtn{ width:42px; height:42px; border-radius:14px; font-size:18px; } } @media (max-width: 520px){ .tradeHudTop, .tradeHudBottom{ left:10px; right:10px; } .mobileCornerBrand{ min-height:44px; padding:0 12px; } .mobileCornerBrandTitle{ font-size:12px; } .tradeHudCluster--left{ gap:8px; } .userMenuBtn{ min-width:148px; } .stakeMenuBtn{ min-width:132px; } } /* ========================================================= DESIGN REVISION V1.1 вЂ” pill alignment + stake panel polish ========================================================= */ body.graphPage .tradeHudTop, body.graphPage .tradeHudBottom{ align-items:center; } body.graphPage .pill-priceTop{ min-width:132px; min-height:52px; padding:0 16px; border-radius:18px !important; } body.graphPage .pill-priceTop #price{ font-size:24px; } body.graphPage .pill-account .userMenuBtn, body.graphPage .pill-account .btn.small{ min-width:176px; min-height:52px; padding:0 16px !important; border-radius:18px !important; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ min-width:148px; min-height:52px; padding:0 16px !important; border-radius:18px !important; } body.graphPage .userMenuBtn #accountPill, body.graphPage .stakeMenuText, body.graphPage #stakePillValue{ font-size:16px; line-height:1; } body.graphPage .graphUserBalance{ font-size:15px !important; } body.graphPage .graphUserName{ max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.graphPage .stakeMenuBtn, body.graphPage .userMenuBtn{ box-sizing:border-box; } body.graphPage .stakeMenuBtn > :last-child, body.graphPage .userMenuBtn > :last-child{ opacity:.72; font-size:13px; } body.graphPage .stakeMenuDrop{ width:min(372px, calc(100vw - 28px)) !important; padding:16px !important; border-radius:24px !important; } body.graphPage .stakeDropHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 0 14px; } body.graphPage .stakeDropTitle{ font-size:15px; letter-spacing:.12em; } body.graphPage .stakeDropBalance{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(178,213,255,.12); background:rgba(255,255,255,.04); } body.graphPage .stakeDropBalanceLabel{ font-size:10px !important; } body.graphPage .stakeDropBalanceValue{ font-size:16px; line-height:1; } body.graphPage .stakeAmountCard{ padding:18px !important; border-radius:20px !important; } body.graphPage .stakeAmountLayout{ gap:16px; } body.graphPage .stakeAmountStats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } body.graphPage .stakeStatCard{ min-height:78px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:14px 16px; border-radius:18px; } body.graphPage .stakeStatLabel{ font-size:10px !important; letter-spacing:.12em !important; } body.graphPage .stakeStatValue{ font-size:26px; line-height:1; } body.graphPage .stakeAmountControls{ display:grid; gap:12px; } body.graphPage .stakeAmountTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; } body.graphPage .stakeAmountTop .label{ font-size:11px !important; } body.graphPage .stakeAmountRow{ grid-template-columns:44px minmax(0, 1fr) 44px; gap:12px; } body.graphPage .stakeInput{ min-height:58px; border-radius:16px !important; font-size:30px; } body.graphPage .stakeStepBtn{ min-height:58px; border-radius:16px; font-size:22px; } body.graphPage .stakeMaxBtn{ min-width:58px; min-height:36px; padding:0 14px !important; border-radius:999px !important; font-size:12px; letter-spacing:.08em; } body.graphPage .stakePresets{ margin-top:16px !important; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px !important; } body.graphPage .stakeChip{ min-width:0; min-height:42px; padding:0 10px !important; border-radius:999px !important; font:700 14px/1 var(--font); } body.panelPage > .pill-account{ position:fixed !important; top:18px !important; right:18px !important; left:auto !important; margin:0 !important; z-index:40 !important; } body.panelPage .pill-account .userMenuBtn, body.panelPage .pill-account .btn.small{ min-height:50px !important; min-width:172px !important; padding:0 16px !important; border-radius:18px !important; } body.panelPage .pill-account .graphUserName{ max-width:82px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; } @media (max-width: 760px){ body.panelPage > .pill-account{ position:static !important; top:auto !important; right:auto !important; margin:12px 12px 0 !important; } body.graphPage .pill-account .userMenuBtn, body.graphPage .pill-account .btn.small{ min-width:148px; min-height:46px; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ min-width:124px; min-height:46px; } body.graphPage .userMenuBtn #accountPill, body.graphPage .stakeMenuText, body.graphPage #stakePillValue{ font-size:14px; } body.graphPage .stakeMenuDrop{ width:min(360px, calc(100vw - 20px)) !important; padding:14px !important; } body.graphPage .stakeAmountStats{ grid-template-columns:1fr; } body.graphPage .stakeInput{ font-size:26px; } body.graphPage .stakePresets{ grid-template-columns:repeat(3, minmax(0, 1fr)); } } /* ========================================================= DESIGN REVISION V2 вЂ” unified pills + stake panel reference pass ========================================================= */ body.panelPage > .pill-account{ position:fixed !important; top:18px !important; right:18px !important; margin:0 !important; z-index:120 !important; } body.graphPage .pill-priceTop, body.graphPage .pill-account, body.graphPage .pill-stakeBottom .stakeMenuBtn, body.graphPage .pill-logoBottom .brandPill{ min-height:44px !important; border-radius:20px !important; border:1px solid rgba(145, 182, 219, .16) !important; background:linear-gradient(180deg, rgba(13, 22, 39, .92), rgba(8, 14, 28, .88)) !important; box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06) !important; backdrop-filter:blur(18px) saturate(118%) !important; -webkit-backdrop-filter:blur(18px) saturate(118%) !important; } body.graphPage .pill-priceTop{ min-width:auto !important; height:44px !important; padding:0 16px !important; gap:10px !important; } body.graphPage .pill-priceTop #price{ font-size:16px !important; font-weight:800 !important; letter-spacing:-.02em !important; } body.graphPage .pill-priceTop .dot{ width:10px !important; height:10px !important; flex:0 0 10px !important; } body.graphPage .pill-account{ top:18px !important; right:18px !important; } body.graphPage .pill-account .userMenuBtn{ min-width:168px !important; height:44px !important; padding:0 14px 0 12px !important; gap:10px !important; border-radius:20px !important; } body.graphPage .pill-account .graphUserBalance{ font-size:14px !important; font-weight:800 !important; } body.graphPage .pill-account .graphUserName{ font-size:12px !important; font-weight:700 !important; opacity:.88 !important; } body.graphPage .pill-logoBottom .brandPill{ min-width:144px !important; height:46px !important; padding:0 16px !important; gap:10px !important; border-radius:20px !important; } body.graphPage .pill-logoBottom .brandIcon{ width:34px !important; height:34px !important; border-radius:12px !important; } body.graphPage .pill-logoBottom .brandName{ font-size:12px !important; font-weight:800 !important; letter-spacing:.16em !important; } body.graphPage .pill-stakeBottom{ right:18px !important; bottom:18px !important; } body.graphPage .pill-stakeBottom .stakeMenuBtn{ min-width:132px !important; height:44px !important; padding:0 14px !important; gap:10px !important; justify-content:space-between !important; } body.graphPage .stakeMenuText, body.graphPage #stakePillValue{ font-size:15px !important; font-weight:800 !important; letter-spacing:-.02em !important; } body.graphPage .stakeDot{ width:10px !important; height:10px !important; flex:0 0 10px !important; } body.graphPage .stakeMenuDrop{ width:356px !important; padding:16px !important; border-radius:24px !important; border:1px solid rgba(136, 172, 210, .16) !important; background: radial-gradient(120% 140% at 100% 0%, rgba(174, 82, 255, .12), transparent 46%), radial-gradient(120% 140% at 0% 100%, rgba(64, 222, 255, .10), transparent 48%), linear-gradient(180deg, rgba(7, 13, 26, .98), rgba(4, 8, 18, .98)) !important; box-shadow:0 22px 64px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05) !important; } body.graphPage .stakeDropHeader{ align-items:flex-start !important; padding:0 0 12px !important; gap:12px !important; } body.graphPage .stakeDropTitle{ font-size:14px !important; font-weight:900 !important; letter-spacing:.16em !important; text-transform:uppercase !important; } body.graphPage .stakeDropBalance{ gap:8px !important; padding:8px 12px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.035) !important; } body.graphPage .stakeDropBalanceValue{ font-size:14px !important; font-weight:800 !important; } body.graphPage .stakeAmountCard{ padding:16px !important; border-radius:22px !important; background:linear-gradient(180deg, rgba(10, 18, 33, .90), rgba(7, 13, 25, .90)) !important; border:1px solid rgba(255,255,255,.08) !important; } body.graphPage .stakeAmountLayout{ display:grid !important; gap:14px !important; } body.graphPage .stakeAmountStats{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px !important; } body.graphPage .stakeStatCard{ min-height:88px !important; padding:14px 16px !important; border-radius:18px !important; background:rgba(255,255,255,.035) !important; border:1px solid rgba(255,255,255,.07) !important; } body.graphPage .stakeStatCard--accent{ background:linear-gradient(180deg, rgba(31, 88, 99, .34), rgba(10, 38, 52, .28)) !important; border-color:rgba(64, 222, 255, .18) !important; } body.graphPage .stakeStatLabel{ font-size:11px !important; font-weight:700 !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:rgba(197, 211, 232, .56) !important; } body.graphPage .stakeStatValue{ margin-top:8px !important; font-size:17px !important; font-weight:900 !important; letter-spacing:-.03em !important; } body.graphPage .stakeAmountControls{ gap:12px !important; } body.graphPage .stakeAmountTop{ align-items:center !important; margin:0 !important; } body.graphPage .stakeAmountTop .label{ font-size:11px !important; font-weight:700 !important; letter-spacing:.16em !important; text-transform:uppercase !important; color:rgba(197, 211, 232, .58) !important; } body.graphPage .stakeMaxBtn{ height:36px !important; padding:0 14px !important; border-radius:999px !important; font-size:13px !important; font-weight:800 !important; } body.graphPage .stakeAmountRow{ display:grid !important; grid-template-columns:44px minmax(0, 1fr) 44px !important; gap:10px !important; align-items:center !important; } body.graphPage .stakeStepBtn{ width:44px !important; height:44px !important; border-radius:14px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.04) !important; color:rgba(245, 249, 255, .94) !important; font-size:20px !important; font-weight:800 !important; line-height:1 !important; } body.graphPage .stakeInput{ width:100% !important; min-width:0 !important; height:56px !important; padding:0 16px !important; border-radius:16px !important; text-align:center !important; font-size:24px !important; font-weight:900 !important; letter-spacing:-.04em !important; color:#f4f8ff !important; } body.graphPage .stakeInput::-webkit-outer-spin-button, body.graphPage .stakeInput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } body.graphPage .stakeInput[type=number]{ -moz-appearance:textfield; appearance:textfield; } body.graphPage .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px !important; margin-top:12px !important; } body.graphPage .stakeChip--adaptive{ height:42px !important; border-radius:14px !important; font-size:15px !important; font-weight:800 !important; letter-spacing:.02em !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.09) !important; } body.graphPage .stakeChip--adaptive:hover, body.graphPage .stakeChip--adaptive.is-active{ background:rgba(255,255,255,.08) !important; border-color:rgba(255,255,255,.18) !important; } @media (max-width: 760px){ body.graphPage .pill-priceTop, body.graphPage .pill-account .userMenuBtn, body.graphPage .pill-logoBottom .brandPill, body.graphPage .pill-stakeBottom .stakeMenuBtn{ min-height:40px !important; height:40px !important; border-radius:18px !important; } body.graphPage .pill-priceTop #price, body.graphPage .stakeMenuText, body.graphPage #stakePillValue{ font-size:14px !important; } body.graphPage .pill-logoBottom .brandPill{ min-width:128px !important; } body.graphPage .stakeMenuDrop{ width:min(340px, calc(100vw - 24px)) !important; right:0 !important; bottom:calc(100% + 10px) !important; padding:14px !important; } body.graphPage .stakeAmountCard{ padding:14px !important; } body.graphPage .stakeStatCard{ min-height:78px !important; padding:12px 14px !important; } body.graphPage .stakeAmountRow{ grid-template-columns:42px minmax(0, 1fr) 42px !important; gap:8px !important; } body.graphPage .stakeInput{ height:52px !important; font-size:22px !important; } } /* ========================================================= DESIGN REVISION V3 вЂ” central framed trading viewport ========================================================= */ body.graphPage .tradeViewport{ position:relative; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:22px; } body.graphPage .tradeFrame{ position:relative; width:min(1680px, calc(100vw - 44px)); height:min(960px, calc(100dvh - 44px)); border-radius:34px; overflow:hidden; isolation:isolate; border:1px solid rgba(162, 204, 246, .16); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), rgba(4, 10, 20, .44); box-shadow: 0 32px 120px rgba(0,0,0,.44), 0 12px 38px rgba(5, 12, 24, .36), inset 0 1px 0 rgba(255,255,255,.08); } body.graphPage .tradeFrame::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; z-index:0; background: radial-gradient(90% 110% at 12% 18%, rgba(124,232,255,.12), transparent 36%), radial-gradient(96% 120% at 88% 12%, rgba(255,95,224,.11), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 22%); opacity:.9; } body.graphPage .tradeFrame::after{ content:""; position:absolute; inset:12px; border-radius:26px; pointer-events:none; z-index:1; border:1px solid rgba(174, 212, 248, .08); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } body.graphPage .chartWrap{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border-radius:inherit !important; } body.graphPage .tradeHud{ position:absolute !important; inset:0 !important; } body.graphPage .tradeHudTop, body.graphPage .tradeHudBottom{ left:24px !important; right:24px !important; } body.graphPage .tradeHudTop{ top:max(18px, env(safe-area-inset-top)) !important; } body.graphPage .tradeHudBottom{ bottom:max(18px, env(safe-area-inset-bottom)) !important; } body.graphPage .cameraUi{ right:18px !important; top:94px !important; } body.graphPage .labelsY{ right:14px; top:16px; bottom:16px; } @media (max-width: 1180px){ body.graphPage .tradeViewport{ padding:16px; } body.graphPage .tradeFrame{ width:min(100vw - 32px, 1600px); height:min(100dvh - 32px, 920px); border-radius:28px; } body.graphPage .tradeHudTop, body.graphPage .tradeHudBottom{ left:18px !important; right:18px !important; } } @media (max-width: 760px){ body.graphPage .tradeViewport{ display:block; padding:0; } body.graphPage .tradeFrame{ width:100%; height:100vh; height:100dvh; border-radius:0; border:none; background:none; box-shadow:none; } body.graphPage .tradeFrame::before, body.graphPage .tradeFrame::after{ display:none; } body.graphPage .tradeHudTop, body.graphPage .tradeHudBottom{ left:12px !important; right:12px !important; } body.graphPage .cameraUi{ right:12px !important; top:68px !important; } } /* ========================= DESIGN REVISION V4 central framed chart + external topbar/dock ========================= */ @media (min-width: 761px){ body.graphPage{ --trade-shell-width: min(1240px, calc(100vw - 180px)); --trade-shell-radius: 30px; } body.graphPage .tradeViewport{ min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 18px; padding: 24px 0 30px; background: radial-gradient(980px 720px at 16% 18%, rgba(76, 225, 255, 0.10), transparent 58%), radial-gradient(900px 640px at 84% 12%, rgba(171, 88, 255, 0.14), transparent 54%); } body.graphPage .tradeTopbar, body.graphPage .tradeControlsDock, body.graphPage .tradeFrame{ width: var(--trade-shell-width); max-width: var(--trade-shell-width); } body.graphPage .tradeTopbar{ display: flex; align-items: center; justify-content: space-between; gap: 18px; position: relative; z-index: 40; pointer-events: none; } body.graphPage .tradeTopbar > *{ pointer-events: auto; } body.graphPage .tradeTopbar .tradeHudCluster--left, body.graphPage .tradeTopbar .tradeHudCluster--right{ display: flex; align-items: center; min-width: 0; } body.graphPage .tradeTopbar .tradeHudCluster--right{ justify-content: flex-end; flex: 1 1 auto; } body.graphPage .tradeFrame{ position: relative !important; height: clamp(500px, 63vh, 700px) !important; margin: 0 auto !important; border-radius: var(--trade-shell-radius) !important; border: 1px solid rgba(132, 186, 255, 0.18) !important; background: linear-gradient(180deg, rgba(8, 18, 31, 0.92), rgba(3, 9, 18, 0.96)) !important; box-shadow: 0 36px 90px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 0 10px rgba(5, 12, 21, 0.26) inset; overflow: hidden; } body.graphPage .tradeFrame::before{ content: ""; position: absolute; inset: 12px; border-radius: calc(var(--trade-shell-radius) - 12px); border: 1px solid rgba(141, 210, 255, 0.10); pointer-events: none; z-index: 4; } body.graphPage .chartWrap{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; background: radial-gradient(860px 580px at 18% 18%, rgba(98, 215, 255, 0.16), transparent 58%), radial-gradient(720px 520px at 78% 16%, rgba(166, 90, 255, 0.16), transparent 52%), linear-gradient(180deg, rgba(7, 20, 34, 0.98), rgba(3, 11, 20, 1)) !important; } body.graphPage .tradeHud{ position: absolute; inset: 0; z-index: 12; pointer-events: none; } body.graphPage .tradeHudTop{ display: flex; align-items: flex-start; justify-content: space-between; padding: 18px; } body.graphPage .tradeHudBottom{ display: none !important; } body.graphPage .pill-priceTop{ position: relative !important; inset: auto !important; left: auto !important; top: auto !important; min-width: 118px; height: 42px !important; padding: 0 14px !important; border-radius: 18px !important; border: 1px solid rgba(106, 206, 255, 0.16) !important; background: linear-gradient(180deg, rgba(17, 39, 60, 0.84), rgba(14, 18, 36, 0.90)) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.02) inset !important; } body.graphPage .pill-priceTop .dot{ width: 9px; height: 9px; background: #d3f3ff; box-shadow: 0 0 16px rgba(181, 239, 255, 0.9); } body.graphPage .pill-priceTop #price{ font-size: 17px !important; font-weight: 800 !important; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } body.graphPage .cameraUi{ position: absolute; top: 18px; right: 18px; z-index: 13; display: flex; flex-direction: column; gap: 10px; } body.graphPage .cameraGlassBtn{ width: 44px !important; height: 44px !important; border-radius: 15px !important; border: 1px solid rgba(123, 200, 255, 0.18) !important; background: linear-gradient(180deg, rgba(10, 19, 32, 0.92), rgba(4, 10, 20, 0.96)) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34) !important; } body.graphPage .tradeTopbar .pill-logoBottom, body.graphPage .tradeTopbar .pill-account, body.graphPage .tradeControlsDock .pill-stakeBottom{ position: relative !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; } body.graphPage .tradeTopbar .pill-logoBottom{ display: flex; align-items: center; } body.graphPage .tradeTopbar .brandPill{ min-width: 188px; height: 60px !important; padding: 0 20px !important; border-radius: 20px !important; border: 1px solid rgba(117, 187, 255, 0.16) !important; background: linear-gradient(180deg, rgba(18, 32, 47, 0.84), rgba(8, 16, 30, 0.92)) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30) !important; } body.graphPage .tradeTopbar .brandIcon{ width: 34px !important; height: 34px !important; border-radius: 12px !important; } body.graphPage .tradeTopbar .brandName{ font-size: 23px !important; letter-spacing: 0.08em !important; } body.graphPage .mobileTopBrand{ display: none !important; } body.graphPage .tradeTopbar .pill-account{ display: flex; align-items: center; justify-content: flex-end; } body.graphPage .tradeTopbar .pill-account .btn.small, body.graphPage .tradeTopbar .pill-account .userMenuBtn{ height: 44px !important; min-width: 164px; padding: 0 16px !important; border-radius: 18px !important; border: 1px solid rgba(117, 187, 255, 0.15) !important; background: linear-gradient(180deg, rgba(18, 32, 47, 0.82), rgba(10, 16, 32, 0.92)) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.02em; color: rgba(238, 246, 255, 0.96) !important; } body.graphPage .tradeTopbar .pill-account .graphUserBalance{ font-size: 15px !important; font-weight: 800 !important; } body.graphPage .tradeTopbar .pill-account .graphUserName, body.graphPage .tradeTopbar .pill-account .graphUserDivider, body.graphPage .tradeTopbar .pill-account .graphUserCaret{ font-size: 14px !important; } body.graphPage .tradeTopbar .pill-account .graphUserBalanceWrap{ gap: 8px !important; } body.graphPage .tradeControlsDock{ position: relative; z-index: 30; } body.graphPage .tradeControlsDock .pill-stakeBottom{ width: 100% !important; } body.graphPage .tradeControlsDock .stakeMenu{ width: 100%; display: block; } body.graphPage .tradeControlsDock .stakeMenuBtn{ display: none !important; } body.graphPage .tradeControlsDock .stakeMenuDrop, body.graphPage .tradeControlsDock .stakeMenuDrop.show{ position: relative !important; inset: auto !important; right: auto !important; bottom: auto !important; top: auto !important; display: block !important; width: 100% !important; min-width: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; margin: 0 !important; padding: 18px 20px 20px !important; border-radius: 24px !important; border: 1px solid rgba(120, 192, 255, 0.14) !important; background: linear-gradient(180deg, rgba(10, 21, 35, 0.92), rgba(4, 11, 20, 0.96)) !important; box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.02) inset !important; backdrop-filter: blur(22px) saturate(112%) !important; } body.graphPage .tradeControlsDock .stakeDropHeader{ display: grid !important; grid-template-columns: auto auto; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px !important; } body.graphPage .tradeControlsDock .stakeDropTitle{ font-size: 24px !important; font-weight: 800 !important; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 248, 255, 0.96); } body.graphPage .tradeControlsDock .stakeDropBalance{ height: 42px; padding: 0 14px; border-radius: 16px; border: 1px solid rgba(120, 192, 255, 0.14); background: linear-gradient(180deg, rgba(17, 32, 46, 0.82), rgba(11, 18, 31, 0.90)); display: inline-flex; align-items: center; gap: 10px; } body.graphPage .tradeControlsDock .stakeDropBalanceLabel{ font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(170, 190, 215, 0.64); } body.graphPage .tradeControlsDock .stakeDropBalanceValue{ font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(242, 249, 255, 0.98); gap: 8px; } body.graphPage .tradeControlsDock .stakeAmountCard{ display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr) 168px; gap: 16px !important; align-items: stretch; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } body.graphPage .tradeControlsDock .stakeAmountLayout{ display: contents !important; } body.graphPage .tradeControlsDock .stakeAmountStats{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px !important; min-width: 0; } body.graphPage .tradeControlsDock .stakeStatCard{ min-height: 108px; padding: 18px 18px 16px !important; border-radius: 20px !important; border: 1px solid rgba(120, 192, 255, 0.12) !important; background: linear-gradient(180deg, rgba(12, 24, 41, 0.84), rgba(8, 16, 29, 0.94)) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22) !important; } body.graphPage .tradeControlsDock .stakeStatCard--accent{ background: linear-gradient(180deg, rgba(12, 56, 67, 0.84), rgba(8, 24, 40, 0.94)) !important; border-color: rgba(67, 216, 220, 0.22) !important; } body.graphPage .tradeControlsDock .stakeStatLabel{ font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(166, 186, 209, 0.70) !important; } body.graphPage .tradeControlsDock .stakeStatValue{ margin-top: 8px; font-size: 34px !important; font-weight: 800 !important; line-height: 1; font-variant-numeric: tabular-nums; color: rgba(244, 248, 255, 0.98) !important; } body.graphPage .tradeControlsDock .stakeAmountControls{ min-width: 0; padding: 18px 20px !important; border-radius: 22px !important; border: 1px solid rgba(120, 192, 255, 0.14) !important; background: linear-gradient(180deg, rgba(12, 24, 41, 0.84), rgba(8, 16, 29, 0.94)) !important; display: grid !important; grid-template-rows: auto auto; gap: 14px !important; } body.graphPage .tradeControlsDock .stakeAmountTop{ display: flex !important; align-items: center; justify-content: space-between; gap: 12px; } body.graphPage .tradeControlsDock .stakeAmountTop .label{ font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(166, 186, 209, 0.70) !important; } body.graphPage .tradeControlsDock .stakeAmountRow{ display: grid !important; grid-template-columns: 54px minmax(0, 1fr) 54px !important; align-items: center; gap: 12px !important; } body.graphPage .tradeControlsDock .stakeInput{ width: 100% !important; height: 70px !important; padding: 0 16px !important; border-radius: 20px !important; border: 1px solid rgba(120, 192, 255, 0.18) !important; background: linear-gradient(180deg, rgba(8, 16, 29, 0.98), rgba(5, 11, 20, 0.98)) !important; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24) inset !important; text-align: center; font-size: 34px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; color: rgba(247, 251, 255, 0.99) !important; } body.graphPage .tradeControlsDock .stakeStepBtn, body.graphPage .tradeControlsDock .stakeMaxBtn, body.graphPage .tradeControlsDock .stakeChip{ border-radius: 17px !important; border: 1px solid rgba(120, 192, 255, 0.16) !important; background: linear-gradient(180deg, rgba(17, 32, 46, 0.88), rgba(9, 15, 26, 0.96)) !important; color: rgba(238, 246, 255, 0.96) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24) !important; font-weight: 800 !important; } body.graphPage .tradeControlsDock .stakeStepBtn{ width: 54px !important; height: 54px !important; font-size: 28px !important; } body.graphPage .tradeControlsDock .stakeMaxBtn{ min-width: 86px; height: 40px !important; padding: 0 14px !important; font-size: 13px !important; letter-spacing: 0.08em; } body.graphPage .tradeControlsDock .stakePresets{ display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px !important; align-content: stretch; } body.graphPage .tradeControlsDock .stakeChip{ min-width: 0 !important; height: 52px !important; padding: 0 18px !important; font-size: 24px !important; } } @media (max-width: 760px){ body.graphPage .tradeTopbar, body.graphPage .tradeControlsDock{ width: 100%; } } @media (min-width: 761px) and (max-width: 1180px){ body.graphPage{ --trade-shell-width: min(1120px, calc(100vw - 80px)); } body.graphPage .tradeControlsDock .stakeAmountCard{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 140px; } body.graphPage .tradeControlsDock .stakeStatValue, body.graphPage .tradeControlsDock .stakeInput{ font-size: 30px !important; } } /* ========================= DESIGN REVISION V5 denser desktop shell + compact bottom trade dock ========================= */ html, body{ overflow-x:hidden; } body.graphPage{ overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-y:auto; } @media (min-width: 761px){ body.graphPage{ --trade-shell-width:min(1500px, calc(100vw - 56px)); --trade-shell-radius:26px; } body.graphPage .tradeViewport{ width:100%; min-height:100vh; padding:18px 28px 28px !important; gap:14px !important; } body.graphPage .tradeTopbar, body.graphPage .tradeControlsDock, body.graphPage .tradeFrame{ width:100% !important; max-width:var(--trade-shell-width) !important; } body.graphPage .tradeFrame{ height:clamp(420px, 54vh, 620px) !important; border:none !important; background:linear-gradient(180deg, rgba(8, 18, 31, 0.94), rgba(3, 9, 18, 0.98)) !important; box-shadow:0 28px 72px rgba(0,0,0,.42) !important; } body.graphPage .tradeFrame::before, body.graphPage .tradeFrame::after{ display:none !important; } body.graphPage .chartWrap{ border-radius:inherit !important; background: radial-gradient(920px 580px at 18% 18%, rgba(98, 215, 255, 0.14), transparent 58%), radial-gradient(760px 560px at 80% 16%, rgba(166, 90, 255, 0.13), transparent 52%), linear-gradient(180deg, rgba(7, 20, 34, 0.98), rgba(3, 11, 20, 1)) !important; } body.graphPage .chartWrap::before{ opacity:.74 !important; } body.graphPage .chartWrap::after{ opacity:.52 !important; } body.graphPage .tradeHudTop{ padding:16px !important; } body.graphPage .pill-priceTop{ min-width:112px; height:40px !important; padding:0 13px !important; border-radius:16px !important; } body.graphPage .pill-priceTop #price{ font-size:16px !important; } body.graphPage .cameraUi{ top:16px !important; right:16px !important; } body.graphPage .tradeTopbar .brandPill{ min-width:198px; height:54px !important; padding:0 18px !important; border-radius:18px !important; } body.graphPage .tradeTopbar .brandName{ font-size:20px !important; } body.graphPage .tradeTopbar .pill-account .btn.small, body.graphPage .tradeTopbar .pill-account .userMenuBtn{ min-width:156px; height:42px !important; border-radius:16px !important; } body.graphPage .tradeControlsDock{ position:relative; z-index:30; padding-bottom:10px; } body.graphPage .tradeControlsDock .stakeMenuDrop, body.graphPage .tradeControlsDock .stakeMenuDrop.show{ padding:14px 16px 16px !important; border-radius:20px !important; border:1px solid rgba(120, 192, 255, 0.10) !important; background:linear-gradient(180deg, rgba(8, 18, 31, 0.90), rgba(5, 11, 20, 0.96)) !important; box-shadow:0 18px 46px rgba(0,0,0,.24) !important; } body.graphPage .tradeControlsDock .stakeDropHeader{ margin-bottom:12px !important; } body.graphPage .tradeControlsDock .stakeDropTitle{ font-size:16px !important; letter-spacing:.14em; } body.graphPage .tradeControlsDock .stakeDropBalance{ height:38px; padding:0 12px; border-radius:14px; } body.graphPage .tradeControlsDock .stakeDropBalanceValue{ font-size:18px; } body.graphPage .tradeControlsDock .stakeAmountCard{ grid-template-columns:minmax(240px, .82fr) minmax(440px, 1.2fr) 132px !important; gap:12px !important; align-items:stretch; } body.graphPage .tradeControlsDock .stakeAmountStats{ gap:12px !important; } body.graphPage .tradeControlsDock .stakeStatCard{ min-height:88px; padding:14px 16px !important; border-radius:18px !important; } body.graphPage .tradeControlsDock .stakeStatLabel, body.graphPage .tradeControlsDock .stakeAmountTop .label{ font-size:11px !important; letter-spacing:.12em; } body.graphPage .tradeControlsDock .stakeStatValue{ margin-top:6px; font-size:28px !important; } body.graphPage .tradeControlsDock .stakeAmountControls{ padding:14px 16px !important; border-radius:18px !important; gap:12px !important; } body.graphPage .tradeControlsDock .stakeAmountTop{ align-items:center; } body.graphPage .tradeControlsDock .stakeAmountRow{ grid-template-columns:56px minmax(260px, 1fr) 56px !important; gap:10px !important; } body.graphPage .tradeControlsDock .stakeInput, body.graphPage .stakeAmountControls .stakeInput, body.graphPage .stakeInput{ width:100% !important; min-width:0 !important; height:64px !important; padding:0 18px !important; border-radius:18px !important; font-size:clamp(28px, 2.2vw, 36px) !important; letter-spacing:-.03em !important; line-height:1 !important; } body.graphPage .tradeControlsDock .stakeStepBtn{ width:56px !important; height:56px !important; border-radius:16px !important; font-size:28px !important; cursor:pointer; } body.graphPage .tradeControlsDock .stakeMaxBtn, body.graphPage .tradeControlsDock .stakeChip{ cursor:pointer; transition:transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; } body.graphPage .tradeControlsDock .stakeMaxBtn{ min-width:78px; height:36px !important; border-radius:14px !important; } body.graphPage .tradeControlsDock .stakePresets{ grid-template-columns:1fr !important; grid-auto-rows:repeat(2, 48px); align-content:start; gap:10px !important; } body.graphPage .tradeControlsDock .stakeChip{ height:48px !important; border-radius:16px !important; font-size:20px !important; } body.graphPage .tradeControlsDock .stakeStepBtn:hover, body.graphPage .tradeControlsDock .stakeMaxBtn:hover, body.graphPage .tradeControlsDock .stakeChip:hover{ transform:translateY(-1px); border-color:rgba(148, 212, 255, 0.28) !important; background:linear-gradient(180deg, rgba(25, 44, 66, 0.92), rgba(10, 18, 32, 0.98)) !important; box-shadow:0 14px 30px rgba(0,0,0,.28) !important; } body.graphPage .tradeControlsDock .stakeStepBtn:active, body.graphPage .tradeControlsDock .stakeMaxBtn:active, body.graphPage .tradeControlsDock .stakeChip:active{ transform:translateY(1px) scale(.99); } } @media (min-width: 761px) and (max-width: 1220px){ body.graphPage{ --trade-shell-width:min(1280px, calc(100vw - 36px)); } body.graphPage .tradeControlsDock .stakeAmountCard{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr) 120px !important; } body.graphPage .tradeControlsDock .stakeAmountRow{ grid-template-columns:52px minmax(180px, 1fr) 52px !important; } } @media (max-width: 760px){ body.graphPage{ overflow-y:auto !important; } } /* ========================= DESIGN REVISION V6 right-aligned topbar + larger amount controls + denser presets ========================= */ @media (min-width: 761px){ body.graphPage{ --trade-shell-width:min(1720px, calc(100vw - 24px)); } body.graphPage .tradeViewport{ padding:16px 12px 24px !important; gap:12px !important; } body.graphPage .tradeTopbar, body.graphPage .tradeControlsDock, body.graphPage .tradeFrame{ max-width:var(--trade-shell-width) !important; } body.graphPage .tradeTopbar{ display:flex !important; align-items:center; justify-content:flex-end !important; gap:12px; } body.graphPage .tradeTopbar .tradeHudCluster--left{ flex:0 0 auto; min-width:0; width:0; overflow:hidden; pointer-events:none; } body.graphPage .tradeTopbar .tradeHudCluster--right{ width:100%; justify-content:flex-end !important; gap:12px !important; } body.graphPage .tradeTopbar .pill-logoBottom{ margin-right:0 !important; } body.graphPage .tradeFrame{ height:clamp(460px, 60vh, 700px) !important; border-radius:24px !important; background:linear-gradient(180deg, rgba(8, 18, 31, 0.96), rgba(3, 9, 18, 0.985)) !important; box-shadow:0 22px 54px rgba(0,0,0,.38) !important; } body.graphPage .chartWrap, body.graphPage .chartWrap::before, body.graphPage .chartWrap::after{ border-radius:inherit !important; } body.graphPage .tradeHudTop{ left:10px !important; right:10px !important; top:10px !important; padding:0 !important; } body.graphPage .tradeHudTop .tradeHudCluster--left{ gap:0 !important; } body.graphPage .pill-priceTop{ min-width:106px !important; height:36px !important; padding:0 12px !important; border-radius:14px !important; } body.graphPage .pill-priceTop #price{ font-size:15px !important; } body.graphPage .cameraUi{ top:12px !important; right:12px !important; gap:10px !important; } body.graphPage .tradeControlsDock .stakeMenuDrop, body.graphPage .tradeControlsDock .stakeMenuDrop.show{ padding:12px 14px 14px !important; border-radius:18px !important; } body.graphPage .tradeControlsDock .stakeDropHeader{ margin-bottom:10px !important; } body.graphPage .tradeControlsDock .stakeAmountCard{ grid-template-columns:minmax(220px, .72fr) minmax(520px, 1.55fr) !important; gap:12px !important; align-items:stretch; } body.graphPage .tradeControlsDock .stakeAmountLayout{ display:grid !important; grid-template-columns:minmax(220px, .72fr) minmax(520px, 1.55fr) !important; gap:12px !important; align-items:stretch; } body.graphPage .tradeControlsDock .stakeAmountStats{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px !important; } body.graphPage .tradeControlsDock .stakeStatCard{ min-height:84px !important; padding:12px 14px !important; border-radius:16px !important; } body.graphPage .tradeControlsDock .stakeStatValue{ font-size:24px !important; } body.graphPage .tradeControlsDock .stakeAmountControls{ display:grid !important; grid-template-columns:1fr auto !important; grid-template-areas: "head head" "row max" "presets presets"; align-content:start; gap:12px !important; min-width:0; padding:14px 16px !important; border-radius:18px !important; } body.graphPage .tradeControlsDock .stakeAmountTop{ grid-area:head; margin:0 !important; } body.graphPage .tradeControlsDock .stakeAmountRow{ grid-area:row; grid-template-columns:60px minmax(320px, 1fr) 60px !important; gap:12px !important; align-items:center; } body.graphPage .tradeControlsDock .stakeInput{ height:68px !important; min-width:320px !important; padding:0 22px !important; border-radius:18px !important; font-size:clamp(30px, 2vw, 38px) !important; } body.graphPage .tradeControlsDock .stakeStepBtn{ width:60px !important; height:60px !important; border-radius:18px !important; font-size:30px !important; } body.graphPage .tradeControlsDock .stakeMaxBtn{ grid-area:max; align-self:center; min-width:86px !important; height:42px !important; margin-left:2px; } body.graphPage .tradeControlsDock .stakePresets, body.graphPage .tradeControlsDock .stakePresets--adaptive{ grid-area:presets; display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr)) !important; gap:10px !important; margin-top:0 !important; } body.graphPage .tradeControlsDock .stakeChip, body.graphPage .tradeControlsDock .stakeChip--adaptive{ height:44px !important; border-radius:14px !important; font-size:15px !important; font-weight:800 !important; letter-spacing:.01em !important; } } @media (min-width: 761px) and (max-width: 1280px){ body.graphPage{ --trade-shell-width:min(1500px, calc(100vw - 20px)); } body.graphPage .tradeControlsDock .stakeAmountLayout, body.graphPage .tradeControlsDock .stakeAmountCard{ grid-template-columns:minmax(200px, .7fr) minmax(420px, 1.3fr) !important; } body.graphPage .tradeControlsDock .stakeAmountControls{ grid-template-columns:1fr auto !important; } body.graphPage .tradeControlsDock .stakeAmountRow{ grid-template-columns:56px minmax(260px, 1fr) 56px !important; } body.graphPage .tradeControlsDock .stakeInput{ min-width:260px !important; } body.graphPage .tradeControlsDock .stakePresets, body.graphPage .tradeControlsDock .stakePresets--adaptive{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 760px){ body.graphPage .tradeTopbar .tradeHudCluster--left{ width:auto; overflow:visible; } body.graphPage .tradeTopbar .tradeHudCluster--right{ gap:8px !important; } body.graphPage .pill-priceTop{ left:8px !important; top:8px !important; min-width:98px !important; height:34px !important; padding:0 10px !important; } body.graphPage .pill-priceTop #price{ font-size:14px !important; } body.graphPage .tradeControlsDock .stakeAmountRow{ grid-template-columns:48px minmax(0, 1fr) 48px !important; } body.graphPage .tradeControlsDock .stakeInput{ height:60px !important; font-size:28px !important; } body.graphPage .tradeControlsDock .stakeStepBtn{ width:48px !important; height:48px !important; font-size:26px !important; } body.graphPage .tradeControlsDock .stakePresets, body.graphPage .tradeControlsDock .stakePresets--adaptive{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:8px !important; } } /* ========================= DESIGN REVISION V7 left brand + left trade rail + compact chart stage ========================= */ @media (min-width: 761px){ body.graphPage{ --trade-shell-width:min(1540px, calc(100vw - 40px)); overflow-y:auto !important; overflow-x:hidden !important; } body.graphPage .tradeViewport{ min-height:100vh; min-height:100dvh; display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start; gap:16px; padding:14px 20px 28px !important; } body.graphPage .tradeTopbar, body.graphPage .tradeFrame{ width:var(--trade-shell-width) !important; max-width:var(--trade-shell-width) !important; } body.graphPage .tradeTopbar{ display:flex !important; align-items:flex-start; justify-content:flex-start !important; gap:0; } body.graphPage .tradeTopbar .tradeHudCluster--left{ width:auto !important; min-width:0; flex:0 0 auto; overflow:visible !important; pointer-events:auto !important; } body.graphPage .tradeTopbar .tradeHudCluster--right{ display:none !important; } body.graphPage .tradeTopBrand{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; text-decoration:none; color:rgba(255,255,255,.92); border:1px solid rgba(181,107,255,.22); background:rgba(15, 5, 12, .40); box-shadow:0 16px 50px rgba(0,0,0,.45); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } body.graphPage .tradeTopBrand .panelBrandMeta{ display:flex; flex-direction:column; line-height:1.05; } body.graphPage .tradeTopBrand .panelBrandName{ font-weight:900; letter-spacing:.02em; font-size:15px; text-transform:none; color:rgba(245,249,255,.96); } body.graphPage .tradeTopBrand .panelBrandIcon{ width:44px; height:44px; border-radius:16px; display:grid; place-items:center; position:relative; overflow:hidden; background:radial-gradient(circle at 35% 30%, rgba(181,107,255,0.95), rgba(142,92,255,0.72) 55%, rgba(110,60,255,0.90) 100%); box-shadow:0 14px 26px rgba(142,92,255,0.20), inset 0 1px 0 rgba(255,255,255,0.25); } body.graphPage .tradeTopBrand .panelBrandIcon::after{ content:""; position:absolute; inset:-50%; background:linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.22), rgba(255,255,255,0)); transform:translateX(-55%) rotate(10deg); opacity:.85; animation:brandShineCompact 3.6s ease-in-out infinite; } body.graphPage .tradeTopBrand .panelBrandSvg{ width:24px; height:24px; filter:drop-shadow(0 0 10px rgba(181,107,255,0.25)); opacity:.95; } body.graphPage .tradeFrame{ min-height:640px; height:min(760px, calc(100vh - 120px)); display:grid !important; grid-template-columns:minmax(300px, 340px) minmax(0, 1fr); gap:18px; padding:0 !important; border:none !important; border-radius:0 !important; overflow:visible !important; background:transparent !important; box-shadow:none !important; } body.graphPage .tradeFrame::before, body.graphPage .tradeFrame::after{ display:none !important; } body.graphPage .tradeControlsDock--side{ position:relative; display:flex; flex-direction:column; gap:14px; min-width:0; min-height:0; padding:14px; border-radius:24px; border:1px solid rgba(123, 158, 198, .14); background:linear-gradient(180deg, rgba(6, 13, 24, .95), rgba(4, 9, 18, .98)); box-shadow:0 22px 44px rgba(0,0,0,.32); overflow:auto; scrollbar-width:thin; } body.graphPage .tradeControlsDock--side .tradeSideAccount{ display:flex; flex-direction:column; gap:10px; } body.graphPage .tradeControlsDock--side .btn.small, body.graphPage .tradeControlsDock--side .userMenuBtn{ width:100%; min-width:0 !important; min-height:48px !important; height:48px !important; padding:0 14px !important; border-radius:16px !important; justify-content:space-between; gap:10px; } body.graphPage .tradeControlsDock--side .userMenu{ width:100%; } body.graphPage .tradeControlsDock--side .userMenuDrop{ top:calc(100% + 10px) !important; left:0 !important; right:0 !important; bottom:auto !important; width:100% !important; min-width:0 !important; border-radius:18px !important; padding:8px !important; } body.graphPage .graphMenuIcon{ width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:rgba(255,255,255,.06); color:rgba(240,246,255,.96); font-size:13px; font-weight:900; line-height:1; } body.graphPage .graphMenuLabel{ flex:1 1 auto; min-width:0; font:800 13px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:rgba(240,246,255,.94); text-align:left; } body.graphPage .graphUserCaret{ opacity:.8; font-size:12px; } body.graphPage .tradeStakePanel, body.graphPage .tradeStakePanel .stakeMenu{ width:100%; } body.graphPage .tradeStakePanel .stakeMenuBtn{ display:none !important; } body.graphPage .tradeStakePanel .stakeMenuDrop, body.graphPage .tradeStakePanel .stakeMenuDrop.show{ position:relative !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100% !important; min-width:0 !important; display:block !important; padding:0 !important; border:none !important; background:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } body.graphPage .tradeStakePanel .stakeDropHeader{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px; margin-bottom:10px; padding:0 !important; } body.graphPage .tradeStakePanel .stakeDropTitle{ font-size:12px !important; letter-spacing:.18em !important; color:rgba(233,240,251,.92) !important; } body.graphPage .tradeStakePanel .stakeDropBalance{ padding:8px 10px !important; border-radius:999px !important; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.07) !important; } body.graphPage .tradeStakePanel .stakeAmountCard{ margin:0 !important; padding:14px !important; border-radius:20px !important; border:1px solid rgba(255,255,255,.08) !important; background:linear-gradient(180deg, rgba(12, 21, 37, .92), rgba(7, 13, 24, .96)) !important; display:grid !important; gap:12px !important; } body.graphPage .tradeStakePanel .stakeAmountLayout{ display:grid !important; grid-template-columns:1fr !important; gap:12px !important; } body.graphPage .tradeStakePanel .stakeAmountStats{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px !important; } body.graphPage .tradeStakePanel .stakeStatCard{ min-height:88px !important; padding:12px 12px 14px !important; border-radius:16px !important; background:rgba(255,255,255,.035) !important; border:1px solid rgba(255,255,255,.07) !important; } body.graphPage .tradeStakePanel .stakeStatCard--accent{ background:linear-gradient(180deg, rgba(25, 85, 97, .32), rgba(8, 35, 48, .28)) !important; border-color:rgba(64, 222, 255, .18) !important; } body.graphPage .tradeStakePanel .stakeStatLabel{ font-size:10px !important; letter-spacing:.14em !important; } body.graphPage .tradeStakePanel .stakeStatValue{ margin-top:10px !important; font-size:18px !important; line-height:1 !important; } body.graphPage .tradeStakePanel .stakeAmountControls{ display:grid !important; gap:10px !important; padding:12px !important; border-radius:16px !important; border:1px solid rgba(255,255,255,.06) !important; background:rgba(255,255,255,.018) !important; } body.graphPage .tradeStakePanel .stakeAmountTop{ display:flex !important; align-items:center; justify-content:space-between; margin:0 !important; } body.graphPage .tradeStakePanel .stakeAmountTop .label, body.graphPage .tradeStakePanel .stakeStatLabel{ color:rgba(195, 209, 230, .56) !important; } body.graphPage .tradeStakePanel .stakeAmountRow{ display:grid !important; grid-template-columns:50px minmax(0, 1fr) 50px !important; gap:10px !important; align-items:center !important; } body.graphPage .tradeStakePanel .stakeInput{ width:100% !important; min-width:0 !important; height:60px !important; padding:0 16px !important; border-radius:16px !important; font-size:34px !important; font-weight:900 !important; text-align:center !important; } body.graphPage .tradeStakePanel .stakeStepBtn{ width:50px !important; height:50px !important; min-height:50px !important; border-radius:14px !important; font-size:26px !important; font-weight:900 !important; } body.graphPage .tradeStakePanel .stakeMaxBtn{ height:36px !important; min-width:72px !important; padding:0 14px !important; border-radius:999px !important; font-size:12px !important; letter-spacing:.12em !important; } body.graphPage .tradeStakePanel .stakePresets, body.graphPage .tradeStakePanel .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:8px !important; margin-top:0 !important; } body.graphPage .tradeStakePanel .stakeChip, body.graphPage .tradeStakePanel .stakeChip--adaptive{ min-width:0 !important; height:42px !important; border-radius:12px !important; font-size:14px !important; font-weight:800 !important; letter-spacing:.02em !important; } body.graphPage .tradeChartStage{ position:relative; min-width:0; min-height:0; overflow:hidden; border-radius:24px; border:1px solid rgba(123, 158, 198, .12); background:linear-gradient(180deg, rgba(8, 18, 31, .96), rgba(3, 9, 18, .985)); box-shadow:0 22px 54px rgba(0,0,0,.38); } body.graphPage .tradeChartStage .chartWrap{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border-radius:inherit !important; } body.graphPage .tradeChartStage .tradeHud{ position:absolute !important; inset:0 !important; } body.graphPage .tradeChartStage .tradeHudTop{ top:8px !important; left:8px !important; right:8px !important; padding:0 !important; } body.graphPage .tradeChartStage .tradeHudBottom{ display:none !important; } body.graphPage .tradeChartStage .pill-priceTop{ min-width:0 !important; height:38px !important; padding:0 12px !important; border-radius:14px !important; gap:8px !important; } body.graphPage .tradeChartStage .pill-priceTop #price{ font-size:15px !important; line-height:1 !important; } body.graphPage .tradeChartStage .pill-priceTop .dot{ width:8px !important; height:8px !important; flex:0 0 8px !important; } body.graphPage .tradeChartStage .cameraUi{ top:12px !important; right:12px !important; gap:10px !important; } body.graphPage .tradeChartStage .labelsY{ right:10px !important; top:12px !important; bottom:12px !important; } body.graphPage .tradeChartStage .cameraGlassBtn{ width:48px !important; height:48px !important; border-radius:16px !important; } } @media (min-width: 761px) and (max-width: 1240px){ body.graphPage{ --trade-shell-width:min(1380px, calc(100vw - 28px)); } body.graphPage .tradeFrame{ grid-template-columns:minmax(280px, 320px) minmax(0, 1fr); gap:14px; height:min(720px, calc(100vh - 116px)); } body.graphPage .tradeStakePanel .stakePresets, body.graphPage .tradeStakePanel .stakePresets--adaptive{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } /* ========================= DESIGN REVISION V8 right trade rail + dedicated menu card + unified logo chrome ========================= */ @media (min-width: 761px){ body.graphPage .tradeTopbar{ justify-content:space-between !important; } body.graphPage .tradeTopBrand{ padding:12px 16px; border-radius:20px; } body.graphPage .tradeTopBrand .panelBrandMeta{ gap:4px; } body.graphPage .tradeTopBrand .panelBrandName{ font-size:15px; letter-spacing:.02em; } body.graphPage .tradeTopBrand .panelBrandSub{ display:block; font-size:12px; color:rgba(255,255,255,.56); } body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(320px, 368px); align-items:stretch; gap:20px; } body.graphPage .tradeChartStage{ order:1; min-width:0; } body.graphPage .tradeControlsDock--side{ order:2; padding:0; border:none; background:transparent; box-shadow:none; overflow:visible; display:grid; grid-template-rows:auto minmax(0, 1fr); align-content:start; gap:16px; } body.graphPage .tradeRailCard{ position:relative; min-width:0; padding:14px; border-radius:24px; border:1px solid rgba(123, 158, 198, .14); background:linear-gradient(180deg, rgba(6, 13, 24, .95), rgba(4, 9, 18, .98)); box-shadow:0 22px 44px rgba(0,0,0,.32); overflow:hidden; } body.graphPage .tradeRailCard::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, rgba(102,223,255,.04), rgba(181,107,255,.28), rgba(102,223,255,.04)); pointer-events:none; } body.graphPage .tradeRailCardHeader{ display:grid; gap:4px; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.06); } body.graphPage .tradeRailEyebrow{ font:800 11px/1 var(--font); letter-spacing:.18em; text-transform:uppercase; color:rgba(195, 209, 230, .52); } body.graphPage .tradeRailTitle{ font:900 24px/1 var(--font); letter-spacing:.01em; color:rgba(245,249,255,.96); } body.graphPage .tradeMenuPanel .tradeSideAccount{ display:grid; gap:12px; } body.graphPage .tradeMenuPanel .btn.small, body.graphPage .tradeMenuPanel .userMenuBtn{ width:100%; min-height:52px !important; height:52px !important; border-radius:16px !important; justify-content:space-between; } body.graphPage .tradeMenuPanel .userMenuBtn{ border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow:none; } body.graphPage .tradeMenuPanel .userMenuBtn::before{ opacity:.35; } body.graphPage .tradeMenuPanel .userMenuDrop, body.graphPage .tradeMenuPanel .userMenuDrop.show{ position:relative !important; inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; width:100% !important; min-width:0 !important; display:grid !important; gap:8px; margin-top:12px; padding:0 !important; border:none !important; background:none !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; z-index:2; } body.graphPage .tradeMenuPanel .userMenuItem{ width:100%; min-height:52px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); color:rgba(243,247,255,.92); font:800 14px/1 var(--font); letter-spacing:.02em; text-align:left; padding:0 16px; transition:transform .16s ease, border-color .16s ease, background .16s ease; } body.graphPage .tradeMenuPanel .userMenuItem:hover{ transform:translateY(-1px); border-color:rgba(102,223,255,.22); background:linear-gradient(180deg, rgba(35, 71, 89, .28), rgba(14, 26, 38, .42)); } body.graphPage .tradeMenuPanel .userMenuItem.danger:hover{ border-color:rgba(255,122,170,.24); background:linear-gradient(180deg, rgba(95, 28, 54, .24), rgba(33, 11, 21, .4)); } body.graphPage .tradeMenuPanel .userMenuSep{ margin:2px 0 4px; background:rgba(255,255,255,.06); } body.graphPage .tradeStakeShell{ display:flex; flex-direction:column; min-height:0; } body.graphPage .tradeStakeShell .tradeStakePanel, body.graphPage .tradeStakeShell .tradeStakePanel .stakeMenu{ width:100%; } body.graphPage .tradeStakeShell .stakeDropHeader{ margin-bottom:12px; } body.graphPage .tradeStakeShell .stakeAmountCard{ padding:16px !important; border-radius:22px !important; background:linear-gradient(180deg, rgba(11, 22, 37, .96), rgba(7, 13, 24, .98)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } body.graphPage .tradeStakeShell .stakeStatCard{ min-height:96px !important; border-radius:18px !important; } body.graphPage .tradeStakeShell .stakeStatValue{ font-size:20px !important; } body.graphPage .tradeStakeShell .stakeAmountControls{ padding:14px !important; border-radius:18px !important; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important; } body.graphPage .tradeStakeShell .stakeAmountRow{ grid-template-columns:52px minmax(0, 1fr) 52px !important; gap:12px !important; } body.graphPage .tradeStakeShell .stakeInput{ height:62px !important; border-radius:18px !important; background:rgba(5, 12, 21, .94) !important; border:1px solid rgba(102,223,255,.10) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03); } body.graphPage .tradeStakeShell .stakeStepBtn, body.graphPage .tradeStakeShell .stakeMaxBtn, body.graphPage .tradeStakeShell .stakeChip{ border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; } body.graphPage .tradeStakeShell .stakeStepBtn:hover, body.graphPage .tradeStakeShell .stakeMaxBtn:hover, body.graphPage .tradeStakeShell .stakeChip:hover{ border-color:rgba(102,223,255,.22) !important; background:linear-gradient(180deg, rgba(35, 71, 89, .28), rgba(14, 26, 38, .42)) !important; } } @media (min-width: 761px) and (max-width: 1240px){ body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(300px, 332px); gap:16px; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } /* ========================= DESIGN REVISION V9 desktop polish + aligned right rail + shared panel typography ========================= */ @media (min-width: 761px){ body.graphPage{ --trade-shell-width:min(1560px, calc(100vw - 56px)); } body.graphPage .tradeViewport{ gap:18px !important; padding:18px 28px 30px !important; } body.graphPage .tradeTopbar, body.graphPage .tradeFrame{ width:var(--trade-shell-width) !important; max-width:var(--trade-shell-width) !important; } body.graphPage .tradeTopbar{ align-items:center !important; } body.graphPage .tradeTopBrand{ min-height:72px; padding:14px 18px; border-radius:22px; border:1px solid rgba(255,255,255,.09); background: radial-gradient(circle at 20% 20%, rgba(102,223,255,.10), transparent 55%), linear-gradient(180deg, rgba(17, 31, 48, .88), rgba(7, 13, 24, .94)); box-shadow: 0 24px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } body.graphPage .tradeTopBrand .panelBrandMeta{ gap:4px; } body.graphPage .tradeTopBrand .panelBrandIcon{ width:56px; height:54px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(135deg, rgba(102,223,255,.18), rgba(255,79,216,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.28); } body.graphPage .tradeTopBrand .panelBrandSvg{ width:26px; height:26px; filter:none; } body.graphPage .tradeTopBrand .panelBrandName, body.graphPage .tradeRailTitle, body.graphPage .tradeStakeShell .stakeStatValue, body.graphPage .tradeStakeShell .stakeInput, body.graphPage .tradeChartStage .pill-priceTop #price{ font-family:var(--font-display); } body.graphPage .tradeTopBrand .panelBrandName{ font-size:28px; line-height:1; letter-spacing:-.05em; } body.graphPage .tradeTopBrand .panelBrandSub, body.graphPage .tradeRailEyebrow, body.graphPage .tradeMenuPanel .userMenuItem, body.graphPage .tradeStakeShell .stakeStatLabel, body.graphPage .tradeStakeShell .stakeAmountTop .label, body.graphPage .tradeStakeShell .stakeDropBalanceLabel, body.graphPage .tradeStakeShell .stakeDropBalanceValue{ font-family:var(--font-ui); } body.graphPage .tradeTopBrand .panelBrandSub{ font-size:13px; color:rgba(202, 214, 232, .68); } body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(336px, 380px); align-items:stretch; gap:22px; height:min(780px, calc(100vh - 132px)); } body.graphPage .tradeChartStage, body.graphPage .tradeRailCard{ border-radius:28px; } body.graphPage .tradeChartStage{ border:1px solid rgba(255,255,255,.08); box-shadow: 0 26px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04); background: radial-gradient(circle at 78% 8%, rgba(255,79,216,.10), transparent 22%), linear-gradient(180deg, rgba(8, 18, 31, .97), rgba(3, 9, 18, .99)); } body.graphPage .tradeControlsDock--side{ align-self:stretch; height:100%; gap:18px; grid-template-rows:auto minmax(0, 1fr); } body.graphPage .tradeRailCard{ padding:18px 18px 20px; border:1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 84% 10%, rgba(255,79,216,.10), transparent 28%), linear-gradient(180deg, rgba(16, 28, 44, .92), rgba(7, 13, 24, .98)); box-shadow: 0 24px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04); } body.graphPage .tradeRailCard::before{ background:linear-gradient(90deg, rgba(102,223,255,.02), rgba(181,107,255,.34), rgba(102,223,255,.02)); } body.graphPage .tradeRailCardHeader{ gap:6px; margin-bottom:14px; padding-bottom:14px; } body.graphPage .tradeRailEyebrow{ font-size:11px; color:rgba(177, 193, 217, .58); } body.graphPage .tradeRailTitle{ font-size:28px; line-height:1; letter-spacing:-.04em; } body.graphPage .tradeMenuPanel .tradeSideAccount{ gap:14px; } body.graphPage .tradeMenuPanel .btn.small, body.graphPage .tradeMenuPanel .userMenuBtn{ min-height:54px !important; height:54px !important; border-radius:18px !important; padding:0 18px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; box-shadow:none !important; } body.graphPage .tradeMenuPanel .userMenuBtn:hover, body.graphPage .tradeMenuPanel .btn.small:hover{ border-color:rgba(102,223,255,.18) !important; background:rgba(255,255,255,.045) !important; } body.graphPage .tradeMenuPanel .userMenuDrop, body.graphPage .tradeMenuPanel .userMenuDrop.show{ gap:10px; margin-top:14px; } body.graphPage .tradeMenuPanel .userMenuItem{ min-height:54px; padding:0 18px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); box-shadow:inset 0 1px 0 rgba(255,255,255,.03); font-size:14px; font-weight:800; letter-spacing:.01em; } body.graphPage .tradeStakeShell{ min-height:0; } body.graphPage .tradeRailCardHeader--stake{ margin-bottom:16px; } body.graphPage .tradeStakeShell .pill-stakeBottom{ display:flex; flex:1 1 auto; min-height:0; padding:0 !important; background:none !important; border:none !important; box-shadow:none !important; } body.graphPage .tradeStakeShell .tradeStakePanel, body.graphPage .tradeStakeShell .stakeMenu, body.graphPage .tradeStakeShell .stakeMenuDrop, body.graphPage .tradeStakeShell .stakeMenuDrop.show{ display:flex !important; flex-direction:column; flex:1 1 auto; min-height:0; } body.graphPage .tradeStakeShell .stakeDropHeader{ justify-content:flex-end !important; align-items:center !important; margin-bottom:14px; } body.graphPage .tradeStakeShell .stakeDropTitle{ display:none !important; } body.graphPage .tradeStakeShell .stakeDropBalance{ height:40px; padding:0 14px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; } body.graphPage .tradeStakeShell .stakeDropBalanceValue{ font-size:16px !important; font-weight:800 !important; } body.graphPage .tradeStakeShell .stakeAmountCard{ display:grid !important; align-content:start; gap:14px !important; padding:18px !important; border-radius:24px !important; } body.graphPage .tradeStakeShell .stakeAmountLayout{ gap:14px !important; } body.graphPage .tradeStakeShell .stakeAmountStats{ gap:12px !important; } body.graphPage .tradeStakeShell .stakeStatCard{ min-height:104px !important; padding:14px 14px 16px !important; border-radius:18px !important; } body.graphPage .tradeStakeShell .stakeStatLabel, body.graphPage .tradeStakeShell .stakeAmountTop .label{ font-size:11px !important; letter-spacing:.14em !important; } body.graphPage .tradeStakeShell .stakeStatValue{ margin-top:12px !important; font-size:22px !important; letter-spacing:-.04em; } body.graphPage .tradeStakeShell .stakeAmountControls{ gap:12px !important; padding:16px !important; border-radius:20px !important; } body.graphPage .tradeStakeShell .stakeAmountRow{ grid-template-columns:54px minmax(0, 1fr) 54px !important; gap:12px !important; } body.graphPage .tradeStakeShell .stakeInput{ height:68px !important; border-radius:20px !important; font-size:36px !important; letter-spacing:-.06em !important; } body.graphPage .tradeStakeShell .stakeStepBtn{ width:54px !important; height:54px !important; border-radius:16px !important; } body.graphPage .tradeStakeShell .stakeMaxBtn{ height:38px !important; border-radius:999px !important; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive{ grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important; } body.graphPage .tradeStakeShell .stakeChip, body.graphPage .tradeStakeShell .stakeChip--adaptive{ min-height:44px !important; height:44px !important; border-radius:14px !important; font-size:13px !important; letter-spacing:.08em !important; text-transform:uppercase; } body.graphPage .tradeChartStage .tradeHudTop{ top:10px !important; left:10px !important; right:10px !important; } body.graphPage .tradeChartStage .pill-priceTop{ height:40px !important; padding:0 14px !important; border-radius:15px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(10, 20, 34, .86) !important; } body.graphPage .tradeChartStage .pill-priceTop #price{ font-size:16px !important; letter-spacing:-.02em; } body.graphPage .tradeChartStage .cameraGlassBtn{ border:1px solid rgba(255,255,255,.08) !important; background:rgba(10, 20, 34, .88) !important; } } @media (min-width: 761px) and (max-width: 1240px){ body.graphPage{ --trade-shell-width:min(1380px, calc(100vw - 28px)); } body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(312px, 344px); gap:18px; height:min(740px, calc(100vh - 126px)); } body.graphPage .tradeTopBrand .panelBrandName{ font-size:24px; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } /* ========================= DESIGN REVISION V10 left stake rail + graph-only logo + focused stake controls ========================= */ @media (min-width: 761px){ body.graphPage{ --trade-shell-width:min(1560px, calc(100vw - 56px)); } body.graphPage .tradeViewport{ gap:18px !important; padding:18px 28px 30px !important; } body.graphPage .tradeTopbar, body.graphPage .tradeFrame{ width:var(--trade-shell-width) !important; max-width:var(--trade-shell-width) !important; } body.graphPage .tradeTopbar{ align-items:center !important; } body.graphPage .tradeTopBrand{ min-height:72px; padding:14px 18px; border-radius:22px; border:1px solid rgba(255,255,255,.09); background: radial-gradient(circle at 20% 20%, rgba(102,223,255,.10), transparent 55%), linear-gradient(180deg, rgba(17, 31, 48, .88), rgba(7, 13, 24, .94)); box-shadow: 0 24px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } body.graphPage .tradeTopBrand .panelBrandMeta--graph{ display:flex; flex-direction:column; justify-content:center; gap:0; } body.graphPage .tradeTopBrand .panelBrandIcon{ width:56px; height:54px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(135deg, rgba(102,223,255,.18), rgba(255,79,216,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.28); } body.graphPage .tradeTopBrand .panelBrandSvg{ width:26px; height:26px; filter:none; } body.graphPage .tradeTopBrand .panelBrandName, body.graphPage .tradeRailTitle, body.graphPage .tradeStakeShell .stakeInput, body.graphPage .tradeChartStage .pill-priceTop #price{ font-family:var(--font-display); } body.graphPage .tradeTopBrand .panelBrandName{ font-size:28px; line-height:1; letter-spacing:-.05em; } body.graphPage .tradeFrame{ grid-template-columns:minmax(312px, 360px) minmax(0, 1fr); align-items:stretch; gap:22px; height:min(780px, calc(100vh - 132px)); } body.graphPage .tradeControlsDock--stakeOnly{ justify-self:start; align-self:stretch; display:block; height:100%; } body.graphPage .tradeStakeShell--primary, body.graphPage .tradeChartStage{ border-radius:28px; } body.graphPage .tradeStakeShell--primary{ min-height:100%; padding:18px 18px 20px; border:1px solid rgba(255,255,255,.08); background: radial-gradient(circle at 84% 10%, rgba(255,79,216,.12), transparent 30%), radial-gradient(circle at 12% 14%, rgba(102,223,255,.10), transparent 32%), linear-gradient(180deg, rgba(16, 28, 44, .94), rgba(7, 13, 24, .99)); box-shadow: 0 24px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04); } body.graphPage .tradeStakeShell--primary::before{ background:linear-gradient(90deg, rgba(102,223,255,.02), rgba(181,107,255,.30), rgba(102,223,255,.02)); } body.graphPage .tradeRailCardHeader{ gap:6px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.07); } body.graphPage .tradeRailEyebrow, body.graphPage .tradeBalanceLabel, body.graphPage .tradeStakeShell .stakeAmountTop .label{ font-family:var(--font-ui); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(177, 193, 217, .58); } body.graphPage .tradeRailTitle{ font-size:30px; line-height:1; letter-spacing:-.05em; } body.graphPage .tradeStakeShell .pill-stakeBottom{ display:flex; flex:1 1 auto; min-height:0; padding:0 !important; background:none !important; border:none !important; box-shadow:none !important; } body.graphPage .tradeStakeShell .tradeStakePanel, body.graphPage .tradeStakeShell .stakeMenu, body.graphPage .tradeStakeShell .stakeMenuDrop, body.graphPage .tradeStakeShell .stakeMenuDrop.show{ display:flex !important; flex-direction:column; flex:1 1 auto; min-height:0; } body.graphPage .tradeStakeShell .stakeMenuBtn{ display:none !important; } body.graphPage .tradeStakeShell .stakeMenuDrop{ padding:18px !important; border-radius:26px !important; border:1px solid rgba(255,255,255,.07) !important; background: linear-gradient(180deg, rgba(7, 15, 28, .88), rgba(5, 10, 20, .94)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 16px 32px rgba(0,0,0,.24) !important; } body.graphPage .tradeStakeShell .stakeDropHeader{ margin-bottom:18px; } body.graphPage .tradeBalanceRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; } body.graphPage .tradeStakeBalancePill{ display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:0 16px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-.04em; color:rgba(247,249,255,.96); } body.graphPage .tradeStakeBalancePill #balanceValue{ line-height:1; } body.graphPage .tradeStakeShell .stakeAmountStats, body.graphPage .tradeStakeShell .stakeDropTitle, body.graphPage .tradeStakeShell .stakeDropBalance, body.graphPage .tradeMenuPanel{ display:none !important; } body.graphPage .tradeStakeShell .stakeAmountCard, body.graphPage .tradeStakeShell .stakeAmountCard--focused{ display:grid !important; align-content:start; gap:16px !important; padding:18px !important; border-radius:24px !important; border:1px solid rgba(255,255,255,.07) !important; background: radial-gradient(circle at 84% 14%, rgba(255,79,216,.09), transparent 28%), linear-gradient(180deg, rgba(9, 21, 38, .98), rgba(5, 11, 22, .98)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .tradeStakeShell .stakeAmountControls{ display:grid !important; gap:14px !important; padding:18px !important; border-radius:22px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .tradeStakeShell .stakeAmountTop{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin:0 !important; } body.graphPage .tradeStakeShell .stakeMaxBtn{ min-height:38px !important; height:38px !important; padding:0 18px !important; border-radius:999px !important; border:1px solid rgba(120, 157, 204, .18) !important; background:rgba(255,255,255,.045) !important; color:rgba(245,247,255,.92) !important; font:800 12px/1 var(--font-ui) !important; letter-spacing:.12em !important; text-transform:uppercase; } body.graphPage .tradeStakeShell .stakeAmountRow{ display:grid !important; grid-template-columns:56px minmax(0, 1fr) 56px !important; gap:12px !important; align-items:center !important; } body.graphPage .tradeStakeShell .stakeStepBtn{ width:56px !important; height:56px !important; min-height:56px !important; border-radius:18px !important; border:1px solid rgba(92, 148, 216, .16) !important; background:linear-gradient(180deg, rgba(25, 36, 58, .90), rgba(17, 25, 40, .92)) !important; color:rgba(245,248,255,.96) !important; font:800 26px/1 Rajdhani, ui-sans-serif, system-ui !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .tradeStakeShell .stakeInput{ height:72px !important; border-radius:22px !important; padding:0 16px !important; text-align:center !important; border:1px solid rgba(80, 146, 220, .16) !important; background:rgba(4, 10, 21, .90) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.015) !important; font-size:38px !important; font-weight:800 !important; letter-spacing:-.06em !important; color:rgba(250,251,255,.98) !important; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important; margin-top:0 !important; } body.graphPage .tradeStakeShell .stakeChip, body.graphPage .tradeStakeShell .stakeChip--adaptive{ min-height:46px !important; height:46px !important; border-radius:16px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.04) !important; color:rgba(245,248,255,.92) !important; font:800 14px/1 var(--font-ui) !important; letter-spacing:.04em !important; text-transform:none !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .tradeChartStage{ border:1px solid rgba(255,255,255,.08); box-shadow: 0 26px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04); background: radial-gradient(circle at 78% 8%, rgba(255,79,216,.10), transparent 22%), linear-gradient(180deg, rgba(8, 18, 31, .97), rgba(3, 9, 18, .99)); } body.graphPage .tradeChartStage .tradeHudTop{ top:10px !important; left:10px !important; right:10px !important; } body.graphPage .tradeChartStage .pill-priceTop{ height:40px !important; padding:0 14px !important; border-radius:15px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(10, 20, 34, .86) !important; } body.graphPage .tradeChartStage .pill-priceTop #price{ font-size:16px !important; letter-spacing:-.02em; } body.graphPage .tradeChartStage .cameraGlassBtn{ border:1px solid rgba(255,255,255,.08) !important; background:rgba(10, 20, 34, .88) !important; } } @media (min-width: 761px) and (max-width: 1240px){ body.graphPage .tradeFrame{ grid-template-columns:minmax(284px, 320px) minmax(0, 1fr); gap:18px; height:min(740px, calc(100vh - 126px)); } body.graphPage .tradeTopBrand .panelBrandName{ font-size:24px; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } /* ========================= DESIGN REVISION V11 chart-first shell + right stake rail + visible stake controls ========================= */ @media (min-width: 761px){ body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(312px, 360px); align-items:stretch; gap:22px; height:min(780px, calc(100vh - 132px)); } body.graphPage .tradeChartStage{ order:1; min-width:0; } body.graphPage .tradeControlsDock--stakeOnly{ order:2; justify-self:stretch; align-self:stretch; display:block; min-width:0; height:100%; } body.graphPage .tradeStakeShell--primary{ min-height:100%; display:flex; flex-direction:column; } body.graphPage .tradeStakeShell .pill-stakeBottom, body.graphPage .tradeStakeShell .tradeStakePanel, body.graphPage .tradeStakeShell .stakeMenu, body.graphPage .tradeStakeShell .stakeMenuDrop, body.graphPage .tradeStakeShell .stakeMenuDrop.show{ display:flex !important; flex-direction:column; flex:1 1 auto; min-height:0; width:100%; } body.graphPage .tradeStakeShell .stakeMenuDrop, body.graphPage .tradeStakeShell .stakeMenuDrop.show{ position:relative !important; inset:auto !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100% !important; max-height:none !important; padding:18px !important; } body.graphPage .tradeStakeShell .stakeDropHeader{ display:block !important; margin-bottom:18px !important; } body.graphPage .tradeStakeShell .tradeBalanceRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; } body.graphPage .tradeStakeShell .stakeAmountCard, body.graphPage .tradeStakeShell .stakeAmountCard--focused{ display:grid !important; align-content:start; gap:16px !important; } body.graphPage .tradeStakeShell .stakeAmountControls{ display:grid !important; gap:14px !important; } body.graphPage .tradeStakeShell .stakeAmountRow{ display:grid !important; grid-template-columns:56px minmax(0, 1fr) 56px !important; gap:12px !important; align-items:center !important; } body.graphPage .tradeStakeShell .stakeStepBtn{ display:inline-grid !important; place-items:center; width:56px !important; height:56px !important; min-height:56px !important; padding:0 !important; border-radius:18px !important; border:1px solid rgba(102,223,255,.14) !important; background:linear-gradient(180deg, rgba(21, 33, 54, .96), rgba(11, 20, 34, .98)) !important; color:rgba(245,248,255,.96) !important; font:800 28px/1 Rajdhani, ui-sans-serif, system-ui !important; box-shadow:0 10px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important; } body.graphPage .tradeStakeShell .stakeInput{ width:100% !important; min-width:0 !important; height:72px !important; padding:0 16px !important; text-align:center !important; font-size:38px !important; font-weight:800 !important; letter-spacing:-.06em !important; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important; margin-top:0 !important; } body.graphPage .tradeStakeShell .stakeChip, body.graphPage .tradeStakeShell .stakeChip--adaptive{ display:inline-grid !important; place-items:center; min-width:0 !important; min-height:46px !important; height:46px !important; } } @media (min-width: 761px) and (max-width: 1240px){ body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(284px, 320px); gap:18px; height:min(740px, calc(100vh - 126px)); } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } /* ========================= DESIGN REVISION V12 static right stake rail + visible amount field + persistent quick actions ========================= */ @media (min-width: 761px){ body.graphPage .tradeControlsDock--stakeOnly{ width:min(100%, 348px); } body.graphPage .tradeStakeShell--primary{ padding:20px 18px 20px; } body.graphPage .tradeStakeShell--primary .pill-stakeBottom, body.graphPage .tradeStakeShell--primary .tradeStakePanel, body.graphPage .tradeStakeShell--primary .tradeStakePanel--static, body.graphPage .tradeStakeShell--primary .stakeMenu, body.graphPage .tradeStakeShell--primary .stakeMenu--static, body.graphPage .tradeStakeShell--primary .stakeMenuDrop, body.graphPage .tradeStakeShell--primary .stakeMenuDrop--static, body.graphPage .tradeStakeShell--primary .stakeMenuDrop.show{ display:flex !important; flex-direction:column !important; width:100% !important; } body.graphPage .tradeStakeShell--primary .tradeStakePanel, body.graphPage .tradeStakeShell--primary .tradeStakePanel--static, body.graphPage .tradeStakeShell--primary .stakeMenu, body.graphPage .tradeStakeShell--primary .stakeMenu--static{ flex:1 1 auto !important; min-height:0 !important; } body.graphPage .tradeStakeShell--primary .stakeMenuDrop, body.graphPage .tradeStakeShell--primary .stakeMenuDrop--static, body.graphPage .tradeStakeShell--primary .stakeMenuDrop.show{ position:relative !important; inset:auto !important; margin:0 !important; padding:18px !important; min-height:0 !important; gap:16px !important; } body.graphPage .tradeStakeShell--primary .stakeDropHeader{ display:block !important; margin:0 !important; } body.graphPage .tradeStakeShell--primary .tradeBalanceRow{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } body.graphPage .tradeStakeShell--primary .stakeAmountCard, body.graphPage .tradeStakeShell--primary .stakeAmountCard--focused{ display:flex !important; flex-direction:column !important; gap:0 !important; padding:16px !important; } body.graphPage .tradeStakeShell--primary .stakeAmountControls{ display:flex !important; flex-direction:column !important; gap:14px !important; padding:16px !important; } body.graphPage .tradeStakeShell--primary .stakeAmountTop{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } body.graphPage .tradeStakeShell--primary .stakeAmountRow{ display:grid !important; grid-template-columns:56px minmax(132px, 1fr) 56px !important; gap:12px !important; align-items:center !important; } body.graphPage .tradeStakeShell--primary .stakeStepBtn{ display:inline-grid !important; place-items:center !important; width:56px !important; min-width:56px !important; height:56px !important; min-height:56px !important; padding:0 !important; line-height:1 !important; flex:none !important; } body.graphPage .tradeStakeShell--primary .stakeInput, body.graphPage .tradeStakeShell--primary .stakeAmountControls .stakeInput{ display:block !important; width:100% !important; min-width:132px !important; max-width:none !important; height:72px !important; min-height:72px !important; padding:0 18px !important; text-align:center !important; appearance:textfield !important; -moz-appearance:textfield !important; font-family:var(--font-display) !important; font-size:34px !important; font-weight:800 !important; line-height:72px !important; letter-spacing:-.05em !important; color:rgba(250,251,255,.98) !important; background:rgba(4, 10, 21, .94) !important; border:1px solid rgba(80, 146, 220, .18) !important; border-radius:22px !important; } body.graphPage .tradeStakeShell--primary .stakeInput::-webkit-outer-spin-button, body.graphPage .tradeStakeShell--primary .stakeInput::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } body.graphPage .tradeStakeShell--primary .stakePresets, body.graphPage .tradeStakeShell--primary .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:10px !important; margin:0 !important; } body.graphPage .tradeStakeShell--primary .stakeChip, body.graphPage .tradeStakeShell--primary .stakeChip--adaptive{ display:inline-grid !important; place-items:center !important; min-width:0 !important; width:100% !important; min-height:46px !important; height:46px !important; padding:0 10px !important; white-space:nowrap !important; } } @media (min-width: 761px) and (max-width: 1240px){ body.graphPage .tradeStakeShell--primary .stakeAmountRow{ grid-template-columns:52px minmax(120px, 1fr) 52px !important; } body.graphPage .tradeStakeShell--primary .stakeInput, body.graphPage .tradeStakeShell--primary .stakeAmountControls .stakeInput{ min-width:120px !important; font-size:30px !important; } body.graphPage .tradeStakeShell--primary .stakePresets, body.graphPage .tradeStakeShell--primary .stakePresets--adaptive{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } /* ========================= DESIGN REVISION V13 compact minimal right stake rail + single-row quick actions ========================= */ @media (min-width: 761px){ body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(268px, 300px); gap:18px; } body.graphPage .tradeControlsDock--stakeOnly{ width:min(100%, 300px); align-self:start; height:auto; } body.graphPage .tradeStakeShell--primary{ min-height:auto; padding:16px 14px 14px; border-radius:24px; background:linear-gradient(180deg, rgba(14, 24, 38, .94), rgba(8, 14, 24, .97)); box-shadow:0 18px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03); } body.graphPage .tradeStakeShell .tradeRailCardHeader, body.graphPage .tradeStakeShell .tradeRailCardHeader--stake{ gap:4px; margin-bottom:12px; padding-bottom:12px; } body.graphPage .tradeStakeShell .tradeRailTitle{ font-size:24px; letter-spacing:-.045em; } body.graphPage .tradeStakeShell .stakeMenuDrop, body.graphPage .tradeStakeShell .stakeMenuDrop.show, body.graphPage .tradeStakeShell--primary .stakeMenuDrop, body.graphPage .tradeStakeShell--primary .stakeMenuDrop--static, body.graphPage .tradeStakeShell--primary .stakeMenuDrop.show{ padding:12px !important; gap:12px !important; border-radius:20px !important; border:1px solid rgba(255,255,255,.06) !important; background:linear-gradient(180deg, rgba(9, 17, 28, .92), rgba(6, 12, 20, .96)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important; } body.graphPage .tradeStakeShell .stakeDropHeader, body.graphPage .tradeStakeShell--primary .stakeDropHeader{ margin-bottom:10px !important; } body.graphPage .tradeStakeShell .tradeBalanceRow, body.graphPage .tradeStakeShell--primary .tradeBalanceRow{ align-items:center !important; gap:10px !important; } body.graphPage .tradeStakeBalancePill, body.graphPage .tradeStakeShell .tradeStakeBalancePill{ min-height:38px; padding:0 12px; gap:8px; border-radius:999px; font-family:var(--font-ui) !important; font-size:16px; font-weight:600; letter-spacing:-.02em; } body.graphPage .tradeStakeShell .stakeAmountCard, body.graphPage .tradeStakeShell .stakeAmountCard--focused, body.graphPage .tradeStakeShell--primary .stakeAmountCard, body.graphPage .tradeStakeShell--primary .stakeAmountCard--focused{ padding:12px !important; border-radius:18px !important; border:1px solid rgba(255,255,255,.06) !important; background:rgba(255,255,255,.015) !important; gap:0 !important; } body.graphPage .tradeStakeShell .stakeAmountControls, body.graphPage .tradeStakeShell--primary .stakeAmountControls{ gap:10px !important; padding:12px !important; border-radius:16px !important; border:1px solid rgba(255,255,255,.06) !important; background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) !important; } body.graphPage .tradeStakeShell .stakeAmountTop, body.graphPage .tradeStakeShell--primary .stakeAmountTop{ gap:8px !important; } body.graphPage .tradeStakeShell .stakeAmountRow, body.graphPage .tradeStakeShell--primary .stakeAmountRow{ grid-template-columns:44px minmax(0, 1fr) 44px !important; gap:10px !important; align-items:center !important; } body.graphPage .tradeStakeShell .stakeStepBtn, body.graphPage .tradeStakeShell--primary .stakeStepBtn{ width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; border-radius:14px !important; font-family:var(--font-ui) !important; font-size:24px !important; font-weight:600 !important; line-height:1 !important; transform:none !important; } body.graphPage .tradeStakeShell .stakeStepBtn#stakeMinusBtn, body.graphPage .tradeStakeShell--primary .stakeStepBtn#stakeMinusBtn{ font-size:22px !important; letter-spacing:0 !important; padding-bottom:1px !important; } body.graphPage .tradeStakeShell .stakeInput, body.graphPage .tradeStakeShell .stakeAmountControls .stakeInput, body.graphPage .tradeStakeShell--primary .stakeInput, body.graphPage .tradeStakeShell--primary .stakeAmountControls .stakeInput{ min-width:0 !important; height:56px !important; min-height:56px !important; padding:0 12px !important; border-radius:16px !important; font-family:var(--font-ui) !important; font-size:24px !important; font-weight:600 !important; line-height:56px !important; letter-spacing:-.025em !important; } body.graphPage .tradeChartStage .pill-priceTop #price, body.graphPage .tradeStakeShell .stakeInput, body.graphPage .tradeStakeShell .tradeStakeBalancePill, body.graphPage .tradeStakeShell #balanceValue{ font-family:var(--font-ui) !important; font-weight:600 !important; } body.graphPage .tradeStakeShell .stakeMaxBtn, body.graphPage .tradeStakeShell--primary .stakeMaxBtn{ min-height:34px !important; height:34px !important; padding:0 14px !important; border-radius:999px !important; font:700 11px/1 var(--font-ui) !important; letter-spacing:.08em !important; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive, body.graphPage .tradeStakeShell--primary .stakePresets, body.graphPage .tradeStakeShell--primary .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr)) !important; gap:6px !important; margin:0 !important; } body.graphPage .tradeStakeShell .stakeChip, body.graphPage .tradeStakeShell .stakeChip--adaptive, body.graphPage .tradeStakeShell--primary .stakeChip, body.graphPage .tradeStakeShell--primary .stakeChip--adaptive{ min-height:36px !important; height:36px !important; padding:0 6px !important; border-radius:12px !important; font:700 11px/1 var(--font-ui) !important; letter-spacing:0 !important; text-transform:none !important; } } @media (min-width: 761px) and (max-width: 1240px){ body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(256px, 286px); gap:16px; } body.graphPage .tradeControlsDock--stakeOnly{ width:min(100%, 286px); } body.graphPage .tradeStakeShell .tradeRailTitle{ font-size:22px; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive, body.graphPage .tradeStakeShell--primary .stakePresets, body.graphPage .tradeStakeShell--primary .stakePresets--adaptive{ grid-template-columns:repeat(6, minmax(0, 1fr)) !important; gap:5px !important; } body.graphPage .tradeStakeShell .stakeChip, body.graphPage .tradeStakeShell .stakeChip--adaptive, body.graphPage .tradeStakeShell--primary .stakeChip, body.graphPage .tradeStakeShell--primary .stakeChip--adaptive{ font-size:10.5px !important; } } /* ========================= DESIGN REVISION V14 minimal compact stake rail + integrated amount strip + softer chart tiles ========================= */ @media (min-width: 761px){ body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(244px, 272px) !important; gap:14px !important; } body.graphPage .tradeControlsDock--stakeOnly{ width:min(100%, 272px) !important; align-self:start !important; } body.graphPage .tradeStakeShell, body.graphPage .tradeStakeShell--primary{ padding:14px 12px 12px !important; border-radius:22px !important; border:1px solid rgba(255,255,255,.06) !important; background:linear-gradient(180deg, rgba(9, 18, 31, .94), rgba(6, 13, 24, .97)) !important; box-shadow:0 16px 28px rgba(0,0,0,.22) !important; } body.graphPage .tradeStakeShell .tradeRailCardHeader, body.graphPage .tradeStakeShell .tradeRailCardHeader--stake{ margin-bottom:10px !important; padding-bottom:10px !important; } body.graphPage .tradeStakeShell .tradeRailTitle{ font-size:22px !important; letter-spacing:-.05em !important; } body.graphPage .tradeStakeShell .stakeMenuDrop, body.graphPage .tradeStakeShell .stakeMenuDrop.show, body.graphPage .tradeStakeShell--primary .stakeMenuDrop, body.graphPage .tradeStakeShell--primary .stakeMenuDrop--static, body.graphPage .tradeStakeShell--primary .stakeMenuDrop.show{ padding:10px !important; gap:10px !important; border-radius:18px !important; border:0 !important; background:rgba(5, 11, 20, .58) !important; box-shadow:none !important; } body.graphPage .tradeStakeShell .stakeDropHeader, body.graphPage .tradeStakeShell--primary .stakeDropHeader{ margin-bottom:8px !important; } body.graphPage .tradeStakeShell .tradeBalanceRow, body.graphPage .tradeStakeShell--primary .tradeBalanceRow{ gap:8px !important; } body.graphPage .tradeStakeShell .tradeBalanceLabel, body.graphPage .tradeStakeShell--primary .tradeBalanceLabel{ font-size:11px !important; letter-spacing:.14em !important; color:rgba(191, 203, 222, .68) !important; } body.graphPage .tradeStakeBalancePill, body.graphPage .tradeStakeShell .tradeStakeBalancePill, body.graphPage .tradeStakeShell #balanceValue{ min-height:36px !important; padding:0 12px !important; gap:7px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; font-family:var(--font-ui) !important; font-size:15px !important; font-weight:500 !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.03em !important; } body.graphPage .tradeStakeShell .stakeAmountCard, body.graphPage .tradeStakeShell .stakeAmountCard--focused, body.graphPage .tradeStakeShell--primary .stakeAmountCard, body.graphPage .tradeStakeShell--primary .stakeAmountCard--focused{ padding:8px !important; border-radius:16px !important; border:0 !important; background:rgba(255,255,255,.02) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05) !important; } body.graphPage .tradeStakeShell .stakeAmountControls, body.graphPage .tradeStakeShell--primary .stakeAmountControls{ gap:8px !important; padding:10px !important; border-radius:14px !important; border:0 !important; background:rgba(255,255,255,.018) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04) !important; } body.graphPage .tradeStakeShell .stakeAmountTop, body.graphPage .tradeStakeShell--primary .stakeAmountTop{ gap:8px !important; margin-bottom:0 !important; } body.graphPage .tradeStakeShell .label, body.graphPage .tradeStakeShell--primary .label{ font-size:11px !important; letter-spacing:.14em !important; color:rgba(191, 203, 222, .68) !important; } body.graphPage .tradeStakeShell .stakeMaxBtn, body.graphPage .tradeStakeShell--primary .stakeMaxBtn{ min-height:32px !important; height:32px !important; padding:0 14px !important; border-radius:999px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.03) !important; font:700 11px/1 var(--font-ui) !important; letter-spacing:.08em !important; } body.graphPage .tradeStakeShell .stakeAmountRow, body.graphPage .tradeStakeShell--primary .stakeAmountRow{ grid-template-columns:40px minmax(0, 1fr) 40px !important; gap:8px !important; align-items:center !important; padding:6px !important; border-radius:18px !important; background:rgba(4, 10, 18, .92) !important; box-shadow:inset 0 0 0 1px rgba(92, 133, 181, .10) !important; } body.graphPage .tradeStakeShell .stakeStepBtn, body.graphPage .tradeStakeShell--primary .stakeStepBtn{ width:40px !important; min-width:40px !important; height:40px !important; min-height:40px !important; border-radius:12px !important; border:1px solid rgba(88, 130, 176, .18) !important; background:linear-gradient(180deg, rgba(20, 34, 52, .88), rgba(12, 23, 38, .92)) !important; box-shadow:none !important; font-family:var(--font-ui) !important; font-size:24px !important; font-weight:500 !important; line-height:1 !important; color:rgba(244,248,255,.96) !important; transform:none !important; } body.graphPage .tradeStakeShell .stakeStepBtn#stakeMinusBtn, body.graphPage .tradeStakeShell--primary .stakeStepBtn#stakeMinusBtn{ padding-bottom:2px !important; } body.graphPage .tradeStakeShell .stakeInput, body.graphPage .tradeStakeShell .stakeAmountControls .stakeInput, body.graphPage .tradeStakeShell--primary .stakeInput, body.graphPage .tradeStakeShell--primary .stakeAmountControls .stakeInput{ min-width:0 !important; width:100% !important; height:40px !important; min-height:40px !important; padding:0 8px !important; border-radius:12px !important; border:0 !important; background:transparent !important; box-shadow:none !important; font-family:var(--font-ui) !important; font-size:18px !important; font-weight:500 !important; font-variant-numeric:tabular-nums !important; line-height:40px !important; letter-spacing:-.03em !important; text-align:center !important; color:rgba(248,251,255,.98) !important; } body.graphPage .tradeStakeShell .stakeInput:focus, body.graphPage .tradeStakeShell--primary .stakeInput:focus{ outline:none !important; background:rgba(255,255,255,.015) !important; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive, body.graphPage .tradeStakeShell--primary .stakePresets, body.graphPage .tradeStakeShell--primary .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr)) !important; gap:6px !important; margin:2px 0 0 !important; } body.graphPage .tradeStakeShell .stakeChip, body.graphPage .tradeStakeShell .stakeChip--adaptive, body.graphPage .tradeStakeShell--primary .stakeChip, body.graphPage .tradeStakeShell--primary .stakeChip--adaptive{ min-height:30px !important; height:30px !important; padding:0 8px !important; border-radius:10px !important; border:1px solid rgba(255,255,255,.08) !important; background:rgba(255,255,255,.028) !important; font:600 12px/1 var(--font-ui) !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.02em !important; text-transform:none !important; box-shadow:none !important; } body.graphPage .tradeStakeShell button[data-stake-action="double"], body.graphPage .tradeStakeShell button[data-stake-action="half"], body.graphPage .tradeStakeShell--primary button[data-stake-action="double"], body.graphPage .tradeStakeShell--primary button[data-stake-action="half"]{ font-size:0 !important; } body.graphPage .tradeStakeShell .stakeChipSymbol, body.graphPage .tradeStakeShell--primary .stakeChipSymbol{ font:600 12px/1 var(--font-ui) !important; } body.graphPage .tradeStakeShell .stakeChipFraction, body.graphPage .tradeStakeShell--primary .stakeChipFraction{ display:inline-grid !important; grid-template-rows:1fr 1fr !important; align-items:center !important; justify-items:center !important; line-height:.8 !important; font:700 10px/1 var(--font-ui) !important; position:relative !important; min-width:10px !important; } body.graphPage .tradeStakeShell .stakeChipFraction::after, body.graphPage .tradeStakeShell--primary .stakeChipFraction::after{ content:""; position:absolute; left:-1px; right:-1px; top:50%; height:1px; transform:translateY(-50%); background:rgba(243,247,255,.74); } body.graphPage .tradeStakeShell .stakeChipFraction > span, body.graphPage .tradeStakeShell--primary .stakeChipFraction > span{ display:block !important; padding:0 1px !important; } body.graphPage .tradeChartStage .pill-priceTop{ min-width:0 !important; height:36px !important; padding:0 13px !important; border-radius:14px !important; border:1px solid rgba(255,255,255,.07) !important; background:rgba(10, 18, 30, .88) !important; box-shadow:0 12px 24px rgba(0,0,0,.18) !important; } body.graphPage .tradeChartStage .pill-priceTop #price{ font-family:var(--font-ui) !important; font-size:15px !important; font-weight:500 !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.02em !important; } body.graphPage .cameraUi{ left:18px !important; right:auto !important; top:auto !important; bottom:18px !important; flex-direction:row !important; gap:8px !important; } body.graphPage .cameraGlassBtn{ width:46px !important; height:46px !important; border-radius:14px !important; } } /* ========================= DESIGN REVISION V15 desktop minimalism + softer stake controls + centered graph multipliers ========================= */ @media (min-width: 761px){ body.graphPage .tradeFrame{ grid-template-columns:minmax(0, 1fr) minmax(236px, 260px) !important; gap:14px !important; } body.graphPage .tradeControlsDock--stakeOnly{ width:min(100%, 260px) !important; align-self:start !important; } body.graphPage .tradeStakeShell, body.graphPage .tradeStakeShell--primary{ padding:14px 10px 10px !important; border-radius:22px !important; border:1px solid rgba(255,255,255,.05) !important; background:linear-gradient(180deg, rgba(7, 16, 29, .96), rgba(5, 11, 21, .98)) !important; box-shadow:0 18px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.03) !important; } body.graphPage .tradeStakeShell .tradeRailCardHeader, body.graphPage .tradeStakeShell .tradeRailCardHeader--stake, body.graphPage .tradeStakeShell--primary .tradeRailCardHeader, body.graphPage .tradeStakeShell--primary .tradeRailCardHeader--stake{ margin-bottom:8px !important; padding:0 2px 10px !important; border-bottom:1px solid rgba(255,255,255,.06) !important; } body.graphPage .tradeStakeShell .stakeMenuDrop, body.graphPage .tradeStakeShell .stakeMenuDrop.show, body.graphPage .tradeStakeShell--primary .stakeMenuDrop, body.graphPage .tradeStakeShell--primary .stakeMenuDrop--static, body.graphPage .tradeStakeShell--primary .stakeMenuDrop.show{ padding:8px !important; gap:10px !important; border:0 !important; border-radius:16px !important; background:transparent !important; box-shadow:none !important; } body.graphPage .tradeStakeShell .stakeDropHeader, body.graphPage .tradeStakeShell--primary .stakeDropHeader{ margin-bottom:6px !important; } body.graphPage .tradeStakeShell .tradeBalanceRow, body.graphPage .tradeStakeShell--primary .tradeBalanceRow{ display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; align-items:center !important; gap:10px !important; } body.graphPage .tradeStakeShell .tradeBalanceLabel, body.graphPage .tradeStakeShell--primary .tradeBalanceLabel{ display:inline-flex !important; align-items:center !important; min-height:32px !important; margin:0 !important; font-size:11px !important; font-weight:700 !important; letter-spacing:.14em !important; color:rgba(188, 202, 222, .66) !important; } body.graphPage .tradeStakeBalancePill, body.graphPage .tradeStakeShell .tradeStakeBalancePill, body.graphPage .tradeStakeShell--primary .tradeStakeBalancePill{ min-height:32px !important; height:32px !important; padding:0 10px !important; gap:8px !important; border:0 !important; border-radius:999px !important; background:rgba(255,255,255,.035) !important; box-shadow:0 10px 20px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.06) !important; font-family:var(--font) !important; font-size:13px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:-.01em !important; font-variant-numeric:tabular-nums !important; } body.graphPage .tradeStakeShell #balanceValue, body.graphPage .tradeStakeShell--primary #balanceValue{ display:inline-flex !important; align-items:center !important; min-height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; box-shadow:none !important; line-height:1 !important; font-family:var(--font) !important; font-size:13px !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important; } body.graphPage .tradeStakeShell .stakeAmountCard, body.graphPage .tradeStakeShell .stakeAmountCard--focused, body.graphPage .tradeStakeShell--primary .stakeAmountCard, body.graphPage .tradeStakeShell--primary .stakeAmountCard--focused{ padding:6px !important; border-radius:16px !important; border:0 !important; background:rgba(255,255,255,.015) !important; box-shadow:none !important; } body.graphPage .tradeStakeShell .stakeAmountControls, body.graphPage .tradeStakeShell--primary .stakeAmountControls{ gap:8px !important; padding:10px !important; border-radius:16px !important; border:0 !important; background:linear-gradient(180deg, rgba(13, 24, 40, .78), rgba(7, 14, 26, .88)) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.045) !important; } body.graphPage .tradeStakeShell .stakeAmountTop, body.graphPage .tradeStakeShell--primary .stakeAmountTop{ gap:8px !important; margin:0 !important; } body.graphPage .tradeStakeShell .label, body.graphPage .tradeStakeShell--primary .label{ font-size:11px !important; font-weight:700 !important; letter-spacing:.14em !important; color:rgba(188, 202, 222, .66) !important; } body.graphPage .tradeStakeShell .stakeMaxBtn, body.graphPage .tradeStakeShell--primary .stakeMaxBtn{ min-height:32px !important; height:32px !important; padding:0 14px !important; border:0 !important; border-radius:999px !important; background:rgba(255,255,255,.05) !important; box-shadow:0 10px 18px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.07) !important; color:rgba(242,246,255,.94) !important; font:700 11px/1 var(--font-ui) !important; letter-spacing:.08em !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } body.graphPage .tradeStakeShell .stakeAmountRow, body.graphPage .tradeStakeShell--primary .stakeAmountRow{ grid-template-columns:38px minmax(0, 1fr) 38px !important; gap:8px !important; align-items:center !important; padding:4px !important; border-radius:16px !important; border:0 !important; background:rgba(4, 10, 18, .86) !important; box-shadow:0 14px 24px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.05) !important; } body.graphPage .tradeStakeShell .stakeStepBtn, body.graphPage .tradeStakeShell--primary .stakeStepBtn{ width:38px !important; min-width:38px !important; height:38px !important; min-height:38px !important; padding:0 !important; border:0 !important; border-radius:12px !important; background:linear-gradient(180deg, rgba(27, 46, 70, .82), rgba(12, 24, 39, .92)) !important; box-shadow:0 10px 18px rgba(0,0,0,.22), inset 0 0 0 1px rgba(104, 155, 212, .16) !important; color:rgba(246,249,255,.96) !important; font-family:var(--font-ui) !important; font-size:24px !important; font-weight:500 !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; } body.graphPage .tradeStakeShell .stakeStepBtn#stakeMinusBtn, body.graphPage .tradeStakeShell--primary .stakeStepBtn#stakeMinusBtn{ padding-bottom:0 !important; } body.graphPage .tradeStakeShell .stakeInput, body.graphPage .tradeStakeShell .stakeAmountControls .stakeInput, body.graphPage .tradeStakeShell--primary .stakeInput, body.graphPage .tradeStakeShell--primary .stakeAmountControls .stakeInput{ min-width:0 !important; width:100% !important; height:38px !important; min-height:38px !important; padding:0 6px !important; border:0 !important; border-radius:10px !important; background:transparent !important; box-shadow:none !important; font-family:var(--font) !important; font-size:18px !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important; line-height:38px !important; letter-spacing:-.02em !important; text-align:center !important; color:rgba(248,251,255,.98) !important; } body.graphPage .tradeStakeShell .stakePresets, body.graphPage .tradeStakeShell .stakePresets--adaptive, body.graphPage .tradeStakeShell--primary .stakePresets, body.graphPage .tradeStakeShell--primary .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr)) !important; gap:6px !important; margin:2px 0 0 !important; } body.graphPage .tradeStakeShell .stakeChip, body.graphPage .tradeStakeShell .stakeChip--adaptive, body.graphPage .tradeStakeShell--primary .stakeChip, body.graphPage .tradeStakeShell--primary .stakeChip--adaptive{ min-width:0 !important; min-height:28px !important; height:28px !important; padding:0 10px !important; border:0 !important; border-radius:9px !important; background:rgba(255,255,255,.04) !important; box-shadow:0 8px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.06) !important; color:rgba(243,247,255,.88) !important; font:600 11px/1 var(--font-ui) !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.01em !important; text-transform:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; } body.graphPage .tradeStakeShell .stakeChipSymbol, body.graphPage .tradeStakeShell--primary .stakeChipSymbol{ font:700 11px/1 var(--font-ui) !important; } body.graphPage .tradeStakeShell .stakeChipFraction, body.graphPage .tradeStakeShell--primary .stakeChipFraction{ min-width:11px !important; font:700 9px/1 var(--font-ui) !important; } body.graphPage .tradeChartStage .pill-priceTop{ min-width:0 !important; height:36px !important; padding:0 14px !important; border-radius:14px !important; border:0 !important; background:rgba(10, 18, 30, .90) !important; box-shadow:0 14px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06) !important; } body.graphPage .tradeChartStage .pill-priceTop #price{ font-family:var(--font) !important; font-size:16px !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important; letter-spacing:-.01em !important; } body.graphPage .cameraUi{ left:18px !important; right:auto !important; top:auto !important; bottom:18px !important; flex-direction:row !important; gap:8px !important; } body.graphPage .cameraGlassBtn{ width:44px !important; height:44px !important; border:0 !important; border-radius:14px !important; background:rgba(10, 18, 30, .90) !important; box-shadow:0 16px 26px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.07) !important; } } /* DESIGN REVISION V16 */ body.graphPage .tradeNavDock{ display:none; } @media (min-width: 1100px){ body.graphPage .tradeViewport{ padding:28px 28px 30px !important; } body.graphPage .tradeTopbar{ margin:0 0 18px !important; min-height:0 !important; } body.graphPage .tradeTopBrand{ min-width:236px !important; padding:14px 18px !important; border-radius:22px !important; border:1px solid rgba(118, 156, 196, .14) !important; background:linear-gradient(180deg, rgba(7, 16, 29, .95), rgba(5, 10, 20, .98)) !important; box-shadow:0 18px 40px rgba(0,0,0,.28) !important; } body.graphPage .tradeFrame{ display:grid !important; grid-template-columns:188px minmax(0, 1fr) 308px !important; gap:20px !important; min-height:680px !important; height:min(760px, calc(100vh - 124px)) !important; padding:0 !important; border:none !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:visible !important; } body.graphPage .tradeFrame::before, body.graphPage .tradeFrame::after{ display:none !important; } body.graphPage .tradeNavDock{ display:block !important; min-width:0 !important; } body.graphPage .tradeNavShell{ position:relative !important; display:flex !important; flex-direction:column !important; gap:16px !important; height:100% !important; padding:18px !important; border-radius:28px !important; border:1px solid rgba(118, 156, 196, .12) !important; background:linear-gradient(180deg, rgba(6, 14, 26, .96), rgba(3, 10, 18, .985)) !important; box-shadow:0 24px 60px rgba(0,0,0,.34) !important; } body.graphPage .tradeNavShell::before, body.graphPage .tradeStakeShell::before{ display:none !important; } body.graphPage .tradeRailCardHeader--nav, body.graphPage .tradeRailCardHeader--stake{ padding:0 !important; margin:0 0 16px !important; border:none !important; } body.graphPage .tradeRailEyebrow{ margin:0 0 4px !important; font:700 11px/1 var(--font-ui) !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:rgba(178, 193, 211, .58) !important; } body.graphPage .tradeRailTitle{ font:800 22px/.96 var(--font-display) !important; letter-spacing:-.04em !important; color:rgba(247, 250, 255, .98) !important; } body.graphPage .tradeNavList{ display:grid !important; gap:10px !important; margin:2px 0 0 !important; } body.graphPage .tradeNavItem{ display:flex !important; align-items:center !important; justify-content:space-between !important; min-height:46px !important; padding:0 14px !important; border-radius:15px !important; text-decoration:none !important; font:700 13px/1 var(--font-ui) !important; color:rgba(232, 239, 248, .86) !important; background:rgba(255,255,255,.035) !important; box-shadow:0 12px 24px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.045) !important; transition:transform .18s ease, box-shadow .18s ease, background .18s ease !important; } body.graphPage .tradeNavItem:hover{ transform:translateY(-1px) !important; background:rgba(255,255,255,.055) !important; box-shadow:0 18px 28px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.055) !important; } body.graphPage .tradeNavItem--active{ color:#f6fbff !important; background:linear-gradient(180deg, rgba(29, 48, 73, .82), rgba(13, 23, 37, .96)) !important; box-shadow:0 18px 30px rgba(0,0,0,.24), inset 0 0 0 1px rgba(98, 157, 220, .14) !important; } body.graphPage .tradeNavItem--ghost{ margin-top:6px !important; } body.graphPage .tradeChartStage{ min-width:0 !important; min-height:0 !important; border-radius:28px !important; border:1px solid rgba(118, 156, 196, .11) !important; background:linear-gradient(180deg, rgba(7, 18, 31, .97), rgba(3, 9, 18, .99)) !important; box-shadow:0 24px 64px rgba(0,0,0,.38) !important; overflow:hidden !important; } body.graphPage .tradeChartStage .chartWrap{ border-radius:inherit !important; } body.graphPage .tradeChartStage .pill-priceTop{ min-width:0 !important; height:46px !important; padding:0 16px !important; border-radius:15px !important; border:none !important; background:rgba(10, 18, 30, .90) !important; box-shadow:0 16px 30px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.06) !important; } body.graphPage .tradeChartStage .pill-priceTop #price{ font-family:var(--font) !important; font-size:17px !important; font-weight:700 !important; line-height:1 !important; letter-spacing:-.015em !important; font-variant-numeric:tabular-nums !important; } body.graphPage .tradeChartStage .pill-priceTop .dot{ width:8px !important; height:8px !important; flex:0 0 8px !important; } body.graphPage .cameraUi{ left:18px !important; right:auto !important; top:auto !important; bottom:18px !important; flex-direction:row !important; gap:8px !important; } body.graphPage .cameraGlassBtn{ width:44px !important; height:44px !important; border:none !important; border-radius:14px !important; background:rgba(10, 18, 30, .88) !important; box-shadow:0 16px 26px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.06) !important; } body.graphPage .tradeControlsDock--right{ width:auto !important; min-width:0 !important; padding:0 !important; background:none !important; border:none !important; box-shadow:none !important; display:block !important; } body.graphPage .tradeStakeShell{ position:relative !important; padding:18px !important; border-radius:28px !important; border:1px solid rgba(118, 156, 196, .12) !important; background:linear-gradient(180deg, rgba(6, 14, 26, .96), rgba(3, 10, 18, .985)) !important; box-shadow:0 24px 60px rgba(0,0,0,.34) !important; overflow:hidden !important; } body.graphPage .tradeStakePanel, body.graphPage .stakeMenu, body.graphPage .stakeMenuDrop{ padding:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; } body.graphPage .stakeDropHeader{ padding:0 !important; margin:0 0 14px !important; border:none !important; } body.graphPage .tradeBalanceRow{ display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; align-items:center !important; gap:12px !important; } body.graphPage .tradeBalanceLabel{ margin:0 !important; font:700 11px/1 var(--font-ui) !important; letter-spacing:.18em !important; text-transform:uppercase !important; color:rgba(178, 193, 211, .58) !important; } body.graphPage .tradeStakeBalancePill{ display:inline-flex !important; align-items:center !important; gap:10px !important; min-height:44px !important; padding:0 16px 0 12px !important; border-radius:999px !important; border:none !important; background:rgba(255,255,255,.045) !important; box-shadow:0 14px 26px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.05) !important; } body.graphPage .stakeBalanceIcon{ margin:0 !important; flex:0 0 auto !important; } body.graphPage #balanceValue{ display:inline-flex !important; align-items:center !important; padding:0 !important; margin:0 !important; border:none !important; background:none !important; box-shadow:none !important; font-family:var(--font-ui) !important; font-size:15px !important; font-weight:600 !important; line-height:1 !important; color:rgba(244, 248, 255, .96) !important; font-variant-numeric:tabular-nums !important; } body.graphPage .stakeAmountCard, body.graphPage .stakeAmountCard--focused{ padding:0 !important; margin:0 !important; border:none !important; background:transparent !important; box-shadow:none !important; } body.graphPage .stakeAmountControls{ gap:14px !important; padding:16px !important; border-radius:22px !important; border:none !important; background:linear-gradient(180deg, rgba(10, 20, 35, .82), rgba(6, 13, 23, .9)) !important; box-shadow:0 18px 40px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.04) !important; } body.graphPage .stakeAmountTop{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; margin:0 !important; } body.graphPage .stakeAmountTop .label{ font:700 11px/1 var(--font-ui) !important; letter-spacing:.17em !important; text-transform:uppercase !important; color:rgba(178, 193, 211, .62) !important; } body.graphPage .stakeMaxBtn{ min-width:72px !important; height:36px !important; min-height:36px !important; padding:0 16px !important; border:none !important; border-radius:999px !important; background:rgba(255,255,255,.05) !important; box-shadow:0 10px 18px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.06) !important; font:700 12px/1 var(--font-ui) !important; letter-spacing:.08em !important; color:rgba(245, 249, 255, .92) !important; } body.graphPage .stakeAmountRow{ display:grid !important; grid-template-columns:44px minmax(0, 1fr) 44px !important; align-items:center !important; gap:10px !important; padding:8px !important; border:none !important; border-radius:18px !important; background:rgba(5, 12, 22, .9) !important; box-shadow:0 16px 28px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.04) !important; } body.graphPage .stakeStepBtn{ width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; padding:0 !important; border:none !important; border-radius:14px !important; background:linear-gradient(180deg, rgba(24, 44, 68, .84), rgba(10, 20, 34, .96)) !important; box-shadow:0 10px 20px rgba(0,0,0,.18), inset 0 0 0 1px rgba(105, 152, 210, .14) !important; font-family:var(--font-ui) !important; font-size:24px !important; font-weight:500 !important; line-height:1 !important; color:rgba(246, 249, 255, .96) !important; } body.graphPage .stakeInput{ width:100% !important; height:44px !important; min-height:44px !important; padding:0 8px !important; border:none !important; border-radius:12px !important; background:transparent !important; box-shadow:none !important; text-align:center !important; font-family:var(--font-ui) !important; font-size:16px !important; font-weight:600 !important; letter-spacing:-.02em !important; line-height:44px !important; color:rgba(245, 249, 255, .96) !important; font-variant-numeric:tabular-nums !important; } body.graphPage .stakePresets, body.graphPage .stakePresets--adaptive{ display:grid !important; grid-template-columns:repeat(6, minmax(0, 1fr)) !important; gap:8px !important; margin:0 !important; } body.graphPage .stakeChip, body.graphPage .stakeChip--adaptive{ min-width:0 !important; height:30px !important; min-height:30px !important; padding:0 8px !important; border:none !important; border-radius:11px !important; background:rgba(255,255,255,.05) !important; box-shadow:0 10px 18px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.05) !important; font:600 11px/1 var(--font-ui) !important; color:rgba(242, 246, 252, .86) !important; letter-spacing:-.01em !important; } body.graphPage .stakeChipSymbol{ font:700 11px/1 var(--font-ui) !important; } body.graphPage .stakeChipFraction{ min-width:11px !important; font:700 9px/1 var(--font-ui) !important; } } @media (max-width: 1099px){ body.graphPage .tradeNavDock{ display:none !important; } } /* ========================================================= PANEL INPUT TUNING (deposit / withdraw / history docs) ========================================================= */ body.panelPage .main .input, body.panelPage .main .select, body.panelPage .main textarea{ min-height: 42px !important; height: 42px !important; border-radius: 12px !important; padding: 0 12px !important; font: 600 14px/1.2 "Manrope", system-ui, sans-serif !important; letter-spacing: 0 !important; } body.panelPage .main .input::placeholder, body.panelPage .main textarea::placeholder{ font: 600 14px/1.2 "Manrope", system-ui, sans-serif !important; letter-spacing: 0 !important; } body.panelPage .main .field label{ font-size: 11px !important; } body.panelPage .main #depAmount, body.panelPage .main #wdAmount{ font: 700 16px/1 "Rajdhani", "Manrope", sans-serif !important; letter-spacing: 0.01em !important; } body.panelPage .main #wdAddress{ font: 600 14px/1.2 "Manrope", system-ui, sans-serif !important; } /* ========================================================= PANEL CHROME UNIFICATION — graph account block + icon nav ========================================================= */ body.panelPage > .pill-account{ position: fixed !important; top: 18px !important; right: 18px !important; left: auto !important; z-index: 180 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 !important; } body.panelPage .authUi.userMenu.panelAccountCluster{ position: relative; display: inline-flex !important; align-items: center !important; gap: 8px !important; } body.panelPage .panelBalanceLink, body.panelPage .panelBalanceChip, body.panelPage .pill-account .userMenuBtn, body.panelPage .pill-account .btn.small{ min-height: 42px !important; height: 42px !important; border-radius: 12px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(26, 47, 72, 0.82), rgba(9, 18, 34, 0.95)) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; color: rgba(240, 248, 255, 0.98) !important; backdrop-filter: blur(18px) saturate(118%) !important; -webkit-backdrop-filter: blur(18px) saturate(118%) !important; } body.panelPage .panelBalanceLink, body.panelPage .panelBalanceChip{ position: relative; overflow: hidden; } body.panelPage .panelBalanceLink{ display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 0 14px !important; text-decoration: none !important; } body.panelPage .panelBalanceLinkIcon{ width: 16px; height: 16px; display: inline-grid; place-items: center; color: rgba(214, 236, 255, 0.92); flex: 0 0 16px; } body.panelPage .panelBalanceLinkIcon svg{ width: 15px; height: 15px; } body.panelPage .panelBalanceLinkLabel{ display: inline-block; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 10px/1 "Manrope", system-ui, sans-serif; letter-spacing: 0.10em; text-transform: uppercase; } body.panelPage .panelBalanceChip{ min-width: 112px !important; padding: 0 14px !important; display: grid !important; grid-template-columns: 20px minmax(64px, 1fr) !important; align-items: center !important; justify-items: center !important; gap: 10px !important; } body.panelPage .panelBalanceChipIcon, body.panelPage .panelBalanceChip .stakeBalanceIcon{ width: 20px !important; height: 20px !important; flex: 0 0 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.panelPage .panelBalanceChipValue, body.panelPage #accountBalance{ display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; width: 100% !important; line-height: 1 !important; font: 800 13px/1 "Manrope", system-ui, sans-serif !important; color: rgba(245, 249, 255, 0.96) !important; } body.panelPage .pill-account .userMenuBtn{ min-width: 120px !important; padding: 0 12px !important; justify-content: flex-start !important; gap: 8px !important; outline: none !important; } body.panelPage .pill-account .userMenuBtn::before{ content: none !important; display: none !important; } body.panelPage .graphMenuIcon{ width: 17px; height: 17px; display: inline-grid; place-items: center; color: rgba(214, 236, 255, 0.92); flex: 0 0 17px; } body.panelPage .graphMenuIcon svg{ width: 16px; height: 16px; } body.panelPage .graphUserName{ display: inline-block; max-width: 82px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 700 13px/1 "Manrope", system-ui, sans-serif !important; color: rgba(240, 248, 255, 0.98) !important; } body.panelPage .graphUserCaret{ margin-left: auto; font-size: 12px; line-height: 1; opacity: 0.84; } body.panelPage .userMenuDrop{ position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; min-width: 224px !important; width: 224px !important; padding: 9px !important; border-radius: 16px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(9, 22, 39, 0.96), rgba(6, 14, 27, 0.98)) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.44) !important; transform-origin: top right; z-index: 220 !important; } body.panelPage .userMenuDrop > a, body.panelPage .userMenuDrop > button{ min-height: 44px !important; border-radius: 11px !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 0 11px !important; color: rgba(237, 247, 255, 0.92) !important; font: 600 12px/1 "Manrope", system-ui, sans-serif !important; text-decoration: none !important; } body.panelPage .userMenuItemIcon{ width: 17px; height: 17px; flex: 0 0 17px; display: inline-grid; place-items: center; color: rgba(214, 236, 255, 0.88); } body.panelPage .userMenuItemIcon svg{ width: 17px; height: 17px; } body.panelPage .userMenuItemLabel{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.panelPage .userMenuSep{ margin: 6px 2px !important; background: rgba(255, 255, 255, 0.09) !important; } body.panelPage .sidebar .navDot{ width: 18px !important; height: 18px !important; flex: 0 0 18px !important; display: inline-grid !important; place-items: center !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: rgba(174, 190, 209, 0.68) !important; } body.panelPage .sidebar .navDot svg{ width: 17px !important; height: 17px !important; } body.panelPage .sidebar .navItem.is-active .navDot{ color: rgba(56, 242, 145, 0.96) !important; filter: drop-shadow(0 0 10px rgba(56, 242, 145, 0.35)); } body.panelPage .sidebar .navItem:hover .navDot{ color: rgba(214, 236, 255, 0.88) !important; } @media (max-width: 760px){ body.panelPage > .pill-account{ position: fixed !important; top: 14px !important; right: 14px !important; left: auto !important; z-index: 220 !important; } body.panelPage .panelBalanceLink{ display: none !important; } body.panelPage .panelBalanceChip{ min-width: 104px !important; padding: 0 12px !important; } body.panelPage .pill-account .userMenuBtn{ min-width: 108px !important; } } /* ========================================================= PANEL CHROME FINAL PASS — match terminal header + menu ========================================================= */ body.panelPage > .pill-account{ position: fixed !important; top: 18px !important; right: 18px !important; left: auto !important; z-index: 260 !important; margin: 0 !important; } body.panelPage .authUi.userMenu.panelAccountCluster{ position: relative !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } body.panelPage .panelBalanceLink, body.panelPage .panelBalanceChip, body.panelPage .pill-account .userMenuBtn{ min-height: 42px !important; height: 42px !important; border-radius: 12px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(26, 47, 72, 0.82), rgba(9, 18, 34, 0.95)) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; color: rgba(240, 248, 255, 0.98) !important; backdrop-filter: blur(18px) saturate(118%) !important; -webkit-backdrop-filter: blur(18px) saturate(118%) !important; } body.panelPage .panelBalanceLink{ display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 0 14px !important; text-decoration: none !important; } body.panelPage .panelBalanceLinkIcon, body.panelPage .graphMenuIcon{ width: 16px !important; height: 16px !important; flex: 0 0 16px !important; display: inline-grid !important; place-items: center !important; color: rgba(214, 236, 255, 0.92) !important; } body.panelPage .panelBalanceLinkIcon svg, body.panelPage .graphMenuIcon svg{ width: 16px !important; height: 16px !important; display: block !important; } body.panelPage .panelBalanceLinkLabel{ display: inline-block !important; max-width: 78px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 700 10px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; } body.panelPage .panelBalanceChip{ min-width: 112px !important; padding: 0 14px !important; display: grid !important; grid-template-columns: 20px minmax(64px, 1fr) !important; align-items: center !important; justify-items: center !important; gap: 10px !important; } body.panelPage .panelBalanceChipIcon, body.panelPage .panelBalanceChip .stakeBalanceIcon{ width: 20px !important; height: 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 20px !important; } body.panelPage .panelBalanceChipValue, body.panelPage #accountBalance{ width: 100% !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font: 800 13px/1 "Manrope", system-ui, sans-serif !important; color: rgba(245, 249, 255, 0.96) !important; } body.panelPage .pill-account .userMenuBtn{ min-width: 120px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; justify-content: flex-start !important; outline: none !important; } body.panelPage .pill-account .userMenuBtn::before{ content: none !important; display: none !important; } body.panelPage .graphUserName{ display: inline-block !important; max-width: 82px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 700 13px/1 "Manrope", system-ui, sans-serif !important; color: rgba(240, 248, 255, 0.98) !important; } body.panelPage .graphUserCaret{ margin-left: auto !important; font-size: 12px !important; line-height: 1 !important; opacity: 0.84 !important; } body.panelPage .userMenuDrop{ position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; left: auto !important; min-width: 224px !important; width: 224px !important; padding: 9px !important; border-radius: 16px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(9, 22, 39, 0.96), rgba(6, 14, 27, 0.98)) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.44) !important; transform-origin: top right !important; z-index: 320 !important; display: none !important; } body.panelPage .userMenuDrop.show{ display: block !important; } body.panelPage .userMenuDrop > a, body.panelPage .userMenuDrop > button{ min-height: 44px !important; border-radius: 11px !important; display: flex !important; align-items: center !important; gap: 9px !important; padding: 0 11px !important; color: rgba(237, 247, 255, 0.92) !important; font: 600 12px/1 "Manrope", system-ui, sans-serif !important; text-decoration: none !important; } body.panelPage .userMenuItemIcon{ width: 17px !important; height: 17px !important; flex: 0 0 17px !important; display: inline-grid !important; place-items: center !important; color: rgba(214, 236, 255, 0.88) !important; } body.panelPage .userMenuItemIcon svg{ width: 17px !important; height: 17px !important; display: block !important; } body.panelPage .userMenuItemLabel{ min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.panelPage .userMenuSep{ margin: 6px 2px !important; background: rgba(255, 255, 255, 0.09) !important; } body.panelPage .sidebar .navItem__left{ gap: 12px !important; } body.panelPage .sidebar .navDot{ width: 18px !important; height: 18px !important; flex: 0 0 18px !important; display: inline-grid !important; place-items: center !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: rgba(174, 190, 209, 0.68) !important; } body.panelPage .sidebar .navDot svg{ width: 17px !important; height: 17px !important; display: block !important; } body.panelPage .sidebar .navItem.is-active .navDot{ color: rgba(56, 242, 145, 0.96) !important; filter: drop-shadow(0 0 10px rgba(56, 242, 145, 0.35)) !important; } body.panelPage .sidebar .navItem:hover .navDot{ color: rgba(214, 236, 255, 0.88) !important; } @media (min-width: 1100px){ body.panelPage .panelLayout{ padding: 18px !important; gap: 22px !important; align-items: start !important; } body.panelPage .sidebar{ top: 18px !important; height: calc(100vh - 36px) !important; } body.panelPage .main{ padding-top: 0 !important; } } @media (max-width: 760px){ body.panelPage .panelBalanceLink{ display: none !important; } body.panelPage .panelBalanceChip{ min-width: 104px !important; padding: 0 12px !important; } body.panelPage .pill-account .userMenuBtn{ min-width: 108px !important; } } /* ========================================================= PANEL PAGES FINAL HEADER ALIGNMENT — profile only ========================================================= */ body.panelPage .panelBalanceLink, body.panelPage .panelBalanceChip{ display: none !important; } body.panelPage .authUi.userMenu.panelAccountCluster{ gap: 0 !important; } body.panelPage .pill-account .userMenuBtn{ min-width: 118px !important; } @media (min-width: 1100px){ body.panelPage .main{ padding-top: 0 !important; } body.panelPage .container{ gap: 18px !important; } } /* ========================================================= PANEL PAGES DESKTOP RHYTHM — match profile position on graph ========================================================= */ @media (min-width: 1100px){ body.panelPage > .pill-account{ top: 48px !important; right: max(18px, calc((100vw - 1608px) / 2 - 20px)) !important; } body.panelPage .main{ padding-top: 32px !important; } body.panelPage .container{ padding-top: 0 !important; } } /* ========================================================= PANEL PROFILE BUTTON — match graph account button exactly ========================================================= */ body.panelPage .pill-account{ background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.panelPage .pill-account .userMenuBtn{ min-height: 42px !important; height: 42px !important; min-width: 118px !important; padding: 0 12px !important; gap: 8px !important; border-radius: 12px !important; border: 1px solid rgba(145, 188, 232, 0.10) !important; background: linear-gradient(180deg, rgba(14, 27, 44, 0.42), rgba(10, 19, 33, 0.54)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(16px) saturate(116%) !important; -webkit-backdrop-filter: blur(16px) saturate(116%) !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; color: rgba(245, 249, 255, 0.96) !important; } body.panelPage .pill-account .userMenuBtn::before{ content: none !important; display: none !important; } body.panelPage .pill-account .graphMenuIcon{ width: 17px !important; height: 17px !important; flex: 0 0 17px !important; display: inline-grid !important; place-items: center !important; color: rgba(214, 236, 255, 0.92) !important; } body.panelPage .pill-account .graphMenuIcon svg{ width: 16px !important; height: 16px !important; display: block !important; } body.panelPage .pill-account .graphMenuLabel, body.panelPage .pill-account .graphUserName{ min-width: 0 !important; max-width: 84px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 700 13px/1 "Manrope", system-ui, sans-serif !important; color: rgba(245, 249, 255, 0.96) !important; } body.panelPage .pill-account .graphUserCaret{ font-size: 12px !important; opacity: 0.84 !important; color: rgba(232, 241, 252, 0.84) !important; } body.panelPage .pill-account .userMenuBtn:hover{ border-color: rgba(145, 188, 232, 0.14) !important; filter: saturate(1.04) !important; } body.panelPage .pill-account .userMenuBtn:focus, body.panelPage .pill-account .userMenuBtn:focus-visible{ outline: none !important; border-color: rgba(145, 188, 232, 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; } /* ========================================================= PANEL PAGES FINAL PARITY — graph atmosphere + visible balance chip ========================================================= */ body.panelPage{ background: radial-gradient(1600px 900px at 14% 8%, rgba(102, 223, 255, 0.13), transparent 62%), radial-gradient(1400px 820px at 86% 16%, rgba(255, 79, 216, 0.08), transparent 63%), radial-gradient(1200px 900px at 72% 74%, rgba(160, 109, 255, 0.09), transparent 58%), linear-gradient(180deg, #07111d 0%, #091126 54%, #06101b 100%) !important; color: #eaf4ff !important; } body.panelPage::before{ content: "" !important; position: fixed !important; inset: 0 !important; pointer-events: none !important; z-index: -1 !important; background: radial-gradient(1320px 780px at 36% 56%, rgba(72, 195, 255, 0.075), transparent 68%), radial-gradient(1120px 700px at 82% 30%, rgba(139, 98, 255, 0.08), transparent 66%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) !important; } body.panelPage::after{ display: none !important; } body.panelPage .sidebar, body.panelPage .card, body.panelPage .doc, body.panelPage .settingsCard, body.panelPage .settingLine, body.panelPage .settingLine__controls, body.panelPage .docFooter{ border: 1px solid rgba(137, 187, 234, 0.14) !important; background: radial-gradient(120% 110% at 16% 18%, rgba(83, 188, 255, 0.06), transparent 54%), radial-gradient(95% 86% at 88% 12%, rgba(255, 141, 207, 0.07), transparent 52%), linear-gradient(180deg, rgba(9, 20, 35, 0.78), rgba(7, 14, 26, 0.88)) !important; box-shadow: 0 20px 44px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(18px) saturate(108%) !important; -webkit-backdrop-filter: blur(18px) saturate(108%) !important; } body.panelPage .panelLayout{ gap: 20px !important; } body.panelPage .main{ padding-top: 18px !important; } body.panelPage .container{ gap: 20px !important; } body.panelPage .panelBalanceLink{ display: none !important; } body.panelPage .panelBalanceChip{ display: inline-flex !important; min-width: 132px !important; height: 42px !important; padding: 0 14px !important; gap: 10px !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; border: 1px solid rgba(145, 188, 232, 0.10) !important; background: linear-gradient(180deg, rgba(14, 27, 44, 0.42), rgba(10, 19, 33, 0.54)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(16px) saturate(116%) !important; -webkit-backdrop-filter: blur(16px) saturate(116%) !important; } body.panelPage .authUi.userMenu.panelAccountCluster{ gap: 8px !important; } body.panelPage .pill-account{ background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.panelPage .pill-account .userMenuBtn{ min-width: 132px !important; height: 42px !important; padding: 0 14px !important; gap: 8px !important; border-radius: 12px !important; border: 1px solid rgba(145, 188, 232, 0.10) !important; background: linear-gradient(180deg, rgba(14, 27, 44, 0.42), rgba(10, 19, 33, 0.54)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; backdrop-filter: blur(16px) saturate(116%) !important; -webkit-backdrop-filter: blur(16px) saturate(116%) !important; } body.panelPage #accountBalance, body.panelPage .panelBalanceChipValue, body.panelPage .historyAmount, body.panelPage .withdrawAmount, body.panelPage .depositMetaValue, body.panelPage .depositSummaryValue strong, body.panelPage .rangeValue, body.panelPage #depAmount, body.panelPage #wdAmount{ font-family: "Figtree", "Manrope", system-ui, sans-serif !important; font-weight: 500 !important; letter-spacing: -0.04em !important; font-variant-numeric: tabular-nums lining-nums !important; } body.panelPage .historyAmount{ font-size: clamp(28px, 4vw, 34px) !important; line-height: 0.95 !important; } body.panelPage .depositMetaValue, body.panelPage .depositSummaryValue strong{ font-size: 20px !important; line-height: 1 !important; } body.panelPage #accountBalance, body.panelPage .panelBalanceChipValue{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; font-size: 14px !important; line-height: 1 !important; text-align: center !important; } @media (min-width: 1100px){ body.panelPage > .pill-account{ top: 48px !important; right: max(18px, calc((100vw - 1608px) / 2 - 20px)) !important; } body.panelPage .main{ padding-top: 84px !important; } } @media (max-width: 760px){ body.panelPage > .pill-account{ top: 14px !important; right: 14px !important; } body.panelPage .main{ padding-top: 72px !important; } body.panelPage .panelBalanceChip{ min-width: 120px !important; padding: 0 12px !important; } body.panelPage .pill-account .userMenuBtn{ min-width: 112px !important; padding: 0 12px !important; } } /* ========================================================= BALANCE CHIP PARITY — identical top chips + restored USDT icon ========================================================= */ body.graphPage .stakeBalanceIcon::before, body.panelPage .stakeBalanceIcon::before{ background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%2335b996' stroke='rgba(255,255,255,0.24)' stroke-width='2.2'/%3E%3Cpath d='M18 18.5h28v8H35.5V49.5h-7V26.5H18z' fill='%23f7fbff'/%3E%3Cellipse cx='32' cy='32.25' rx='16.75' ry='5.6' fill='none' stroke='%23f7fbff' stroke-width='3.2'/%3E%3C/svg%3E") !important; } body.graphPage.tradeUiV2 #tradeTerminal .tradeBalanceChip, body.panelPage .panelBalanceChip{ min-width: 132px !important; height: 42px !important; min-height: 42px !important; padding: 0 14px !important; gap: 10px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; border-radius: 12px !important; border: 1px solid rgba(145, 188, 232, 0.10) !important; background: linear-gradient(180deg, rgba(14, 27, 44, 0.42), rgba(10, 19, 33, 0.54)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.012), 0 0 0 1px rgba(145, 188, 232, 0.012) !important; backdrop-filter: blur(16px) saturate(116%) !important; -webkit-backdrop-filter: blur(16px) saturate(116%) !important; } body.graphPage.tradeUiV2 #tradeTerminal .tradeBalanceChipIcon, body.panelPage .panelBalanceChipIcon, body.panelPage .panelBalanceChip .stakeBalanceIcon, body.graphPage.tradeUiV2 #tradeTerminal .tradeBalanceChip .stakeBalanceIcon{ width: 20px !important; height: 20px !important; flex: 0 0 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } body.graphPage.tradeUiV2 #tradeTerminal #accountBalance, body.panelPage #accountBalance, body.panelPage .panelBalanceChipValue{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; margin: 0 !important; font-family: "Figtree", "Manrope", system-ui, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: -0.04em !important; text-align: center !important; font-variant-numeric: tabular-nums lining-nums !important; } body.graphPage.tradeUiV2 #tradeTerminal .pill-account, body.panelPage .panelAccountCluster{ display: inline-flex !important; align-items: center !important; gap: 8px !important; } body.graphPage.tradeUiV2 #tradeTerminal .pill-account .userMenuBtn, body.panelPage .pill-account .userMenuBtn{ min-width: 132px !important; height: 42px !important; min-height: 42px !important; padding: 0 14px !important; gap: 8px !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; align-self: center !important; border-radius: 12px !important; } @media (max-width: 760px){ body.graphPage.tradeUiV2 #tradeTerminal .tradeBalanceChip, body.panelPage .panelBalanceChip{ min-width: 120px !important; padding: 0 12px !important; } body.graphPage.tradeUiV2 #tradeTerminal .pill-account .userMenuBtn, body.panelPage .pill-account .userMenuBtn{ min-width: 112px !important; padding: 0 12px !important; } } /* ========================================================= PANEL TOP CHIP LOCK — same pill template as the graph ========================================================= */ body.panelPage .panelAccountCluster{ display: inline-flex !important; align-items: center !important; gap: 8px !important; } body.panelPage .panelBalanceChip, body.panelPage .pill-account.panelAccountCluster .userMenuBtn{ min-height: 42px !important; height: 42px !important; border-radius: 12px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(26, 47, 72, 0.82), rgba(9, 18, 34, 0.95)) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; color: rgba(240, 248, 255, 0.98) !important; backdrop-filter: blur(18px) saturate(118%) !important; -webkit-backdrop-filter: blur(18px) saturate(118%) !important; } body.panelPage .panelBalanceChip{ min-width: 112px !important; width: auto !important; padding: 0 14px !important; display: grid !important; grid-template-columns: 20px minmax(64px, 1fr) !important; align-items: center !important; justify-items: center !important; gap: 10px !important; } body.panelPage .panelBalanceChipValue, body.panelPage #accountBalance{ width: 100% !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font: 800 13px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: -0.02em !important; text-align: center !important; color: rgba(245, 249, 255, 0.96) !important; font-variant-numeric: tabular-nums lining-nums !important; } body.panelPage .pill-account.panelAccountCluster .userMenuBtn{ min-width: 120px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; justify-content: flex-start !important; } body.panelPage .pill-account.panelAccountCluster .graphUserName, body.panelPage .pill-account.panelAccountCluster .graphMenuLabel{ display: inline-block !important; min-width: 0 !important; max-width: 82px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 700 13px/1 "Manrope", system-ui, sans-serif !important; color: rgba(240, 248, 255, 0.98) !important; } body.panelPage .pill-account.panelAccountCluster .graphUserCaret{ font-size: 12px !important; opacity: 0.84 !important; color: rgba(232, 241, 252, 0.84) !important; } @media (max-width: 760px){ body.panelPage .panelBalanceChip{ min-width: 112px !important; padding: 0 12px !important; } body.panelPage .pill-account.panelAccountCluster .userMenuBtn{ min-width: 120px !important; padding: 0 12px !important; } } /* ========================================================= SETTINGS PAGE CLEANUP + TOPBAR LANGUAGE PICKER ========================================================= */ body.panelPage .settingsCard .settingLine__controls{ border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; padding: 0 !important; } body.panelPage .settingsCard .settingTopRow{ align-items: center !important; min-height: 30px !important; } body.panelPage .settingsCard .settingTopRow .p{ margin: 0 !important; line-height: 1 !important; } body.panelPage .settingsCard .switch{ width: 52px !important; height: 30px !important; min-height: 30px !important; border-radius: 999px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; vertical-align: middle !important; } body.panelPage .settingsCard .switch::after{ width: 22px !important; height: 22px !important; top: 3px !important; left: 3px !important; } body.panelPage .settingsCard .switch.is-on::after{ transform: translateX(22px) !important; } body.panelPage .panelLangPicker{ position: relative !important; display: inline-flex !important; align-items: center !important; align-self: center !important; z-index: 40 !important; } body.panelPage .pill-account, body.panelPage .authUi.userMenu.panelAccountCluster{ overflow: visible !important; } body.panelPage .panelLangBtn{ min-width: 96px !important; height: 42px !important; min-height: 42px !important; padding: 0 12px !important; border-radius: 12px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(26, 47, 72, 0.82), rgba(9, 18, 34, 0.95)) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; color: rgba(240, 248, 255, 0.98) !important; backdrop-filter: blur(18px) saturate(118%) !important; -webkit-backdrop-filter: blur(18px) saturate(118%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; } body.panelPage .panelLangFlag{ font-size: 15px !important; line-height: 1 !important; } body.panelPage .panelLangCode{ font: 800 13px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: 0.02em !important; color: rgba(245, 249, 255, 0.96) !important; } body.panelPage .panelLangCaret{ font-size: 11px !important; opacity: 0.78 !important; } body.panelPage .panelLangDrop{ position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; min-width: 228px !important; padding: 8px !important; border-radius: 14px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(18, 33, 55, 0.96), rgba(8, 17, 31, 0.98)) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; display: none !important; z-index: 3200 !important; } body.panelPage .panelLangPicker.is-open .panelLangDrop{ display: grid !important; gap: 6px !important; } body.panelPage .panelLangOption{ width: 100% !important; min-height: 36px !important; padding: 0 10px !important; border-radius: 10px !important; border: 1px solid transparent !important; background: rgba(255, 255, 255, 0.02) !important; color: rgba(238, 246, 255, 0.94) !important; display: grid !important; grid-template-columns: 18px 28px minmax(0, 1fr) !important; align-items: center !important; column-gap: 10px !important; text-align: left !important; cursor: pointer !important; } body.panelPage .panelLangOptionFlag{ font-size: 14px !important; line-height: 1 !important; } body.panelPage .panelLangOptionCode{ font: 700 12px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: 0.03em !important; color: rgba(223, 239, 255, 0.9) !important; } body.panelPage .panelLangOptionLabel{ font: 600 12px/1.2 "Manrope", system-ui, sans-serif !important; color: rgba(236, 246, 255, 0.88) !important; } body.panelPage .panelLangOption:hover{ background: rgba(109, 214, 255, 0.08) !important; border-color: rgba(109, 214, 255, 0.22) !important; } body.panelPage .panelLangOption.is-active{ background: linear-gradient(180deg, rgba(109, 214, 255, 0.14), rgba(109, 214, 255, 0.08)) !important; border-color: rgba(109, 214, 255, 0.30) !important; } @media (max-width: 760px){ body.panelPage .panelLangBtn{ min-width: 90px !important; padding: 0 10px !important; } body.panelPage .panelLangDrop{ min-width: 200px !important; } } /* ===== panel component architecture ===== */ .panelPageSection{ display: grid; gap: 10px; } .panelSectionIntro{ display: grid; gap: 6px; } .historySectionHead{ display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; } .historyContent, .panelInlineNotice, .withdrawListHost{ margin-top: 12px; } .noticeCard{ padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); } .noticeCard--error{ border-color: rgba(255,138,138,.26); background: rgba(255,138,138,.08); } .noticeCard--error .p{ color: #ffb2b2; } .noticeCard--success{ border-color: rgba(120,255,173,.22); background: rgba(120,255,173,.08); } .noticeCard--success .p{ color: #b7ffd2; } .depositHero__meta{ margin-top: 18px; } .depositSidebar__stats{ margin-top: 16px; } .depositMutedNote__title{ margin-bottom: 8px; } .depositInfoList{ margin-top: 16px; } .depositSummaryPromoLine, .depositAddressStatus{ margin-top: 12px; } .depositAddressManual{ margin-top: 12px; color: rgba(255,255,255,.68); } .depositAddressRow{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .settingsStack--page{ margin-top: 18px; } .withdrawForm{ display: grid; gap: 12px; margin-top: 14px; } .withdrawFieldGroup{ display: grid; grid-template-columns: minmax(160px, .8fr) 180px minmax(0, 1.4fr); gap: 12px; } .withdrawFieldGroup label{ display: block; margin-bottom: 8px; font-size: 12px; color: rgba(255,255,255,.72); font-weight: 700; } .withdrawFieldGroup .input, .withdrawFieldGroup .select{ width: 100%; } .withdrawMethodHint{ margin: 0; color: rgba(255,255,255,.72); } .withdrawListCard{ margin-top: 0; } .withdrawListItem{ padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); } .withdrawListItem:last-child{ border-bottom: 0; } .withdrawListHeadline{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .withdrawStatus{ color: rgba(255,255,255,.8); font-weight: 700; } .withdrawMetaLine{ margin-top: 6px; color: rgba(255,255,255,.72); font-size: 12px; } .withdrawMetaLine code{ user-select: all; } .withdrawMetaLine--error{ color: #ff9b9b; } .legalActions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .legalHint{ margin-top: 14px; } @media (max-width: 860px){ .historySectionHead{ flex-direction: column; } .withdrawFieldGroup{ grid-template-columns: 1fr; } } /* ========================================================= PANEL TOPBAR PARITY - graph language/account pills on pages ========================================================= */ body.panelPage > .pill-account, body.panelPage .panelTopPillBar{ display: inline-flex !important; align-items: center !important; gap: 8px !important; flex-wrap: nowrap !important; } body.panelPage .tradeLangPicker{ position: relative !important; display: inline-flex !important; align-items: center !important; align-self: center !important; z-index: 320 !important; } body.panelPage .tradeLangBtn{ min-width: 94px !important; height: 42px !important; min-height: 42px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 12px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(26, 47, 72, 0.82), rgba(9, 18, 34, 0.95)) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; color: rgba(240, 248, 255, 0.98) !important; backdrop-filter: blur(18px) saturate(118%) !important; -webkit-backdrop-filter: blur(18px) saturate(118%) !important; cursor: pointer !important; text-decoration: none !important; } body.panelPage .tradeLangFlag, body.panelPage .tradeLangOptionFlag{ width: 16px !important; height: 11px !important; border-radius: 2px !important; border: 1px solid rgba(190, 218, 246, 0.30) !important; box-shadow: inset 0 0 0 1px rgba(8, 20, 36, 0.18) !important; background: linear-gradient(180deg, #f8fbff 0%, #dee7f1 100%) !important; display: inline-block !important; flex: 0 0 16px !important; } body.panelPage .tradeLangFlag[data-flag-code="ru"], body.panelPage .tradeLangOptionFlag[data-flag-code="ru"]{ background: linear-gradient(180deg, #ffffff 0 33.34%, #1656c1 33.34% 66.67%, #d52b1e 66.67% 100%) !important; } body.panelPage .tradeLangFlag[data-flag-code="en"], body.panelPage .tradeLangOptionFlag[data-flag-code="en"]{ background: linear-gradient(#3c3b6e, #3c3b6e) 0 0 / 42% 54% no-repeat, repeating-linear-gradient(180deg, #b22234 0 7.69%, #ffffff 7.69% 15.38%) 0 0 / 100% 100% no-repeat !important; } body.panelPage .tradeLangFlag[data-flag-code="es"], body.panelPage .tradeLangOptionFlag[data-flag-code="es"]{ background: linear-gradient(180deg, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75% 100%) !important; } body.panelPage .tradeLangFlag[data-flag-code="de"], body.panelPage .tradeLangOptionFlag[data-flag-code="de"]{ background: linear-gradient(180deg, #1d1d1f 0 33.34%, #c62828 33.34% 66.67%, #ffce00 66.67% 100%) !important; } body.panelPage .tradeLangFlag[data-flag-code="it"], body.panelPage .tradeLangOptionFlag[data-flag-code="it"]{ background: linear-gradient(90deg, #009246 0 33.34%, #ffffff 33.34% 66.67%, #ce2b37 66.67% 100%) !important; } body.panelPage .tradeLangFlag[data-flag-code="fr"], body.panelPage .tradeLangOptionFlag[data-flag-code="fr"]{ background: linear-gradient(90deg, #0055a4 0 33.34%, #ffffff 33.34% 66.67%, #ef4135 66.67% 100%) !important; } body.panelPage .tradeLangFlag[data-flag-code="pt"], body.panelPage .tradeLangOptionFlag[data-flag-code="pt"]{ background: linear-gradient(90deg, #046a38 0 42%, #da291c 42% 100%) !important; } body.panelPage .tradeLangFlag[data-flag-code="ar"], body.panelPage .tradeLangOptionFlag[data-flag-code="ar"]{ background: linear-gradient(90deg, #ce1126 0 26%, transparent 26%), linear-gradient(180deg, #000000 0 33.34%, #ffffff 33.34% 66.67%, #007a3d 66.67% 100%) !important; } body.panelPage .tradeLangFlag[data-flag-code="sw"], body.panelPage .tradeLangOptionFlag[data-flag-code="sw"]{ background: linear-gradient(145deg, #1eb53a 0 38%, #fcd116 38% 43%, #1b1b1d 43% 57%, #fcd116 57% 62%, #00a3dd 62% 100%) !important; } body.panelPage .tradeLangCode{ font: 800 13px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: 0.02em !important; color: rgba(245, 249, 255, 0.96) !important; } body.panelPage .tradeLangCaret{ font-size: 11px !important; opacity: 0.78 !important; } body.panelPage .tradeLangDrop{ position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; min-width: 228px !important; padding: 8px !important; border-radius: 14px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(18, 33, 55, 0.96), rgba(8, 17, 31, 0.98)) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; display: none !important; z-index: 3200 !important; } body.panelPage .tradeLangPicker.is-open .tradeLangDrop{ display: grid !important; gap: 6px !important; } body.panelPage .tradeLangOption{ width: 100% !important; min-height: 36px !important; padding: 0 10px !important; border-radius: 10px !important; border: 1px solid transparent !important; background: rgba(255, 255, 255, 0.02) !important; color: rgba(238, 246, 255, 0.94) !important; display: grid !important; grid-template-columns: 18px 28px minmax(0, 1fr) !important; align-items: center !important; column-gap: 10px !important; text-align: left !important; cursor: pointer !important; } body.panelPage .tradeLangOptionCode{ font: 700 12px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: 0.03em !important; color: rgba(223, 239, 255, 0.9) !important; } body.panelPage .tradeLangOptionLabel{ font: 600 12px/1.2 "Manrope", system-ui, sans-serif !important; color: rgba(236, 246, 255, 0.88) !important; } body.panelPage .tradeLangOption:hover{ background: rgba(109, 214, 255, 0.08) !important; border-color: rgba(109, 214, 255, 0.22) !important; } body.panelPage .tradeLangOption.is-active{ background: linear-gradient(180deg, rgba(109, 214, 255, 0.14), rgba(109, 214, 255, 0.08)) !important; border-color: rgba(109, 214, 255, 0.30) !important; } body.panelPage .userMenuDrop{ position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; left: auto !important; bottom: auto !important; width: min(236px, calc(100vw - 28px)) !important; min-width: 0 !important; padding: 10px !important; border-radius: 18px !important; background: radial-gradient(circle at 16% 14%, rgba(83, 188, 255, 0.08), transparent 40%), radial-gradient(circle at 86% 10%, rgba(181, 107, 255, 0.10), transparent 42%), linear-gradient(180deg, rgba(10, 22, 39, 0.98), rgba(8, 15, 29, 0.985)) !important; border: 1px solid rgba(121, 170, 220, 0.14) !important; box-shadow: 0 24px 44px rgba(0, 0, 0, 0.34) !important; z-index: 135 !important; } body.panelPage .userMenuItem{ min-height: 44px !important; border-radius: 14px !important; } @media (max-width: 760px){ body.panelPage .tradeLangBtn{ min-width: 90px !important; padding: 0 10px !important; } body.panelPage .tradeLangDrop{ min-width: 200px !important; } } /* ========================================================= PANEL TOPBAR / POPUP UNIFICATION - final lock ========================================================= */ body.panelPage .tradeLangFlag, body.panelPage .tradeLangOptionFlag{ background-repeat: no-repeat !important; background-size: 100% 100% !important; } body.panelPage .panelBalanceChip{ min-width: 132px !important; height: 42px !important; min-height: 42px !important; padding: 0 14px !important; display: grid !important; grid-template-columns: 20px minmax(0, auto) !important; align-items: center !important; gap: 8px !important; border-radius: 12px !important; border: 1px solid rgba(118, 156, 196, 0.14) !important; background: linear-gradient(180deg, rgba(7, 16, 29, 0.95), rgba(5, 10, 20, 0.98)) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.panelPage .panelBalanceChip .panelBalanceChipIcon, body.panelPage .panelBalanceChip .stakeBalanceIcon{ width: 20px !important; height: 20px !important; flex: 0 0 20px !important; } body.panelPage .panelBalanceChip .panelBalanceChipValue, body.panelPage #accountBalance{ width: auto !important; min-width: 0 !important; margin: 0 !important; line-height: 1 !important; font-size: 15px !important; font-weight: 600 !important; color: rgba(242, 247, 255, 0.96) !important; } body.panelPage .tradeLangBtn{ border-radius: 14px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(14, 27, 44, 0.76), rgba(9, 18, 31, 0.88)) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(16px) saturate(116%) !important; -webkit-backdrop-filter: blur(16px) saturate(116%) !important; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important; } body.panelPage .tradeLangBtn:hover, body.panelPage .tradeLangBtn:focus-visible{ transform: translateY(-1px); border-color: rgba(145, 220, 255, 0.28) !important; box-shadow: 0 20px 42px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } body.panelPage .tradeLangPicker.is-open .tradeLangBtn{ border-color: rgba(242, 247, 255, 0.62) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 20px 42px rgba(0, 0, 0, 0.32) !important; } body.panelPage .tradeLangDrop, body.panelPage .userMenuDrop{ padding: 8px !important; border-radius: 22px !important; border: 1px solid rgba(112, 165, 216, 0.18) !important; background: radial-gradient(circle at 14% 12%, rgba(83, 188, 255, 0.10), transparent 42%), radial-gradient(circle at 84% 8%, rgba(181, 107, 255, 0.12), transparent 44%), linear-gradient(180deg, rgba(10, 22, 39, 0.88), rgba(7, 15, 28, 0.92)) !important; box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) saturate(116%) !important; -webkit-backdrop-filter: blur(20px) saturate(116%) !important; } body.panelPage .tradeLangDrop{ min-width: 236px !important; } body.panelPage .userMenuDrop{ width: min(244px, calc(100vw - 24px)) !important; } body.panelPage .tradeLangOption, body.panelPage .userMenuItem{ min-height: 48px !important; border-radius: 15px !important; border: 1px solid rgba(123, 149, 183, 0.10) !important; background: linear-gradient(180deg, rgba(20, 32, 51, 0.56), rgba(12, 22, 38, 0.52)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important; } body.panelPage .tradeLangOption{ padding: 0 12px !important; grid-template-columns: 18px 28px minmax(0, 1fr) !important; column-gap: 10px !important; } body.panelPage .userMenuItem{ padding: 0 14px !important; } body.panelPage .tradeLangOption:hover, body.panelPage .tradeLangOption:focus-visible, body.panelPage .userMenuItem:hover, body.panelPage .userMenuItem:focus-visible{ transform: translateY(-1px); border-color: rgba(82, 220, 192, 0.30) !important; background: linear-gradient(135deg, rgba(128, 84, 255, 0.18), rgba(56, 242, 145, 0.14)) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } body.panelPage .tradeLangOption.is-active{ border-color: rgba(82, 220, 192, 0.32) !important; background: linear-gradient(135deg, rgba(128, 84, 255, 0.22), rgba(56, 242, 145, 0.16)) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.panelPage .userMenuItem.danger:hover, body.panelPage .userMenuItem.danger:focus-visible{ border-color: rgba(255, 114, 146, 0.32) !important; background: linear-gradient(135deg, rgba(255, 94, 132, 0.20), rgba(255, 171, 196, 0.12)) !important; } body.panelPage .userMenuSep{ margin: 8px 6px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(134, 178, 224, 0.12), rgba(255, 255, 255, 0.02)) !important; } body.panelPage .depositHero + .depositGrid{ margin-top: 20px !important; } body.panelPage .depositSummaryPromoLine{ margin-top: 14px !important; } @media (max-width: 760px){ body.panelPage .panelBalanceChip{ min-width: 120px !important; padding: 0 12px !important; } body.panelPage .tradeLangDrop, body.panelPage .userMenuDrop{ width: min(244px, calc(100vw - 20px)) !important; } } /* ========================================================= UI PARITY LOCK - panel pages follow graph top pills exactly ========================================================= */ body.panelPage .tradeLangBtn, body.panelPage .panelBalanceChip, body.panelPage .pill-account.panelAccountCluster .userMenuBtn{ min-height: 42px !important; height: 42px !important; border-radius: 12px !important; border: 1px solid rgba(109, 214, 255, 0.18) !important; background: linear-gradient(180deg, rgba(26, 47, 72, 0.82), rgba(9, 18, 34, 0.95)) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; color: rgba(240, 248, 255, 0.98) !important; backdrop-filter: blur(18px) saturate(118%) !important; -webkit-backdrop-filter: blur(18px) saturate(118%) !important; } body.panelPage .tradeLangBtn{ min-width: 94px !important; padding: 0 12px !important; gap: 8px !important; } body.panelPage .panelBalanceChip{ min-width: 112px !important; width: auto !important; padding: 0 14px !important; display: grid !important; grid-template-columns: 20px minmax(64px, 1fr) !important; align-items: center !important; justify-items: center !important; gap: 10px !important; } body.panelPage .panelBalanceChipValue, body.panelPage #accountBalance{ font-family: "Figtree", "Manrope", system-ui, sans-serif !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: -0.04em !important; font-variant-numeric: tabular-nums lining-nums !important; } body.panelPage .pill-account.panelAccountCluster .userMenuBtn{ min-width: 120px !important; padding: 0 12px !important; gap: 8px !important; } body.panelPage .tradeLangDrop, body.panelPage .userMenuDrop{ padding: 8px !important; border-radius: 22px !important; border: 1px solid rgba(112, 165, 216, 0.18) !important; background: radial-gradient(circle at 14% 12%, rgba(83, 188, 255, 0.10), transparent 42%), radial-gradient(circle at 84% 8%, rgba(181, 107, 255, 0.12), transparent 44%), linear-gradient(180deg, rgba(10, 22, 39, 0.88), rgba(7, 15, 28, 0.92)) !important; box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) saturate(116%) !important; -webkit-backdrop-filter: blur(20px) saturate(116%) !important; } body.panelPage .tradeLangOption, body.panelPage .userMenuItem{ min-height: 48px !important; border-radius: 15px !important; border: 1px solid rgba(123, 149, 183, 0.10) !important; background: linear-gradient(180deg, rgba(20, 32, 51, 0.56), rgba(12, 22, 38, 0.52)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important; } body.panelPage .tradeLangOption:hover, body.panelPage .tradeLangOption:focus-visible, body.panelPage .userMenuItem:hover, body.panelPage .userMenuItem:focus-visible{ transform: translateY(-1px); border-color: rgba(82, 220, 192, 0.30) !important; background: linear-gradient(135deg, rgba(128, 84, 255, 0.18), rgba(56, 242, 145, 0.14)) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } body.panelPage .userMenuItem.danger:hover, body.panelPage .userMenuItem.danger:focus-visible{ border-color: rgba(255, 114, 146, 0.32) !important; background: linear-gradient(135deg, rgba(255, 94, 132, 0.20), rgba(255, 171, 196, 0.12)) !important; } @media (max-width: 760px){ body.panelPage > .pill-account{ display: none !important; } body.panelPage .panelTopBrand{ display: inline-flex !important; top: max(10px, env(safe-area-inset-top)) !important; left: 50% !important; transform: translateX(-50%) !important; min-height: 44px !important; padding: 0 14px !important; gap: 10px !important; align-items: center !important; border-radius: 16px !important; border: 1px solid rgba(118, 156, 196, 0.14) !important; background: linear-gradient(180deg, rgba(7, 16, 29, 0.95), rgba(5, 10, 20, 0.98)) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28) !important; } body.panelPage .panelTopBrand .panelBrandIcon{ width: 32px !important; height: 32px !important; border-radius: 12px !important; } body.panelPage .panelTopBrand .panelBrandSvg{ width: 16px !important; height: 16px !important; } body.panelPage .panelTopBrandText{ font: 700 18px/1 "Sora", "Manrope", system-ui, sans-serif !important; letter-spacing: -0.04em !important; } body.panelPage .main{ padding-top: 76px !important; } } /* ========================================================= FINAL PANEL TOPBAR PARITY LOCK Mirror graph top pills + graph dropdown surfaces on panel pages. ========================================================= */ body.panelPage > .pill-account.panelTopPillBar{ position: fixed !important; left: auto !important; right: 18px !important; top: max(30px, calc(env(safe-area-inset-top, 0px) + 30px)) !important; transform: none !important; margin: 0 !important; padding: 0 !important; width: auto !important; max-width: calc(100vw - 24px) !important; display: inline-flex !important; align-items: center !important; justify-content: flex-end !important; gap: 12px !important; z-index: 260 !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangPicker, body.panelPage .pill-account.panelTopPillBar .panelBalanceLink, body.panelPage .pill-account.panelTopPillBar .panelBalanceChip, body.panelPage .pill-account.panelTopPillBar .authUi.userMenu.panelAccountCluster{ flex: 0 0 auto !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangBtn, body.panelPage .pill-account.panelTopPillBar .panelBalanceLink, body.panelPage .pill-account.panelTopPillBar .panelBalanceChip, body.panelPage .pill-account.panelTopPillBar .authUi.userMenu.panelAccountCluster .userMenuBtn{ min-height: 42px !important; height: 42px !important; border-radius: 12px !important; border: 1px solid rgba(145, 188, 232, 0.10) !important; background: linear-gradient(180deg, rgba(14, 27, 44, 0.42), rgba(10, 19, 33, 0.54)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.012), 0 0 0 1px rgba(145, 188, 232, 0.012) !important; color: rgba(240, 248, 255, 0.98) !important; backdrop-filter: blur(16px) saturate(116%) !important; -webkit-backdrop-filter: blur(16px) saturate(116%) !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; line-height: 1 !important; text-decoration: none !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangBtn{ min-width: 94px !important; padding: 0 12px !important; justify-content: center !important; gap: 8px !important; } body.panelPage .pill-account.panelTopPillBar .panelBalanceLink{ min-width: 102px !important; padding: 0 14px !important; justify-content: center !important; gap: 8px !important; } body.panelPage .pill-account.panelTopPillBar .panelBalanceChip{ min-width: 112px !important; width: auto !important; padding: 0 14px !important; display: grid !important; grid-template-columns: 20px minmax(64px, 1fr) !important; align-items: center !important; justify-items: center !important; gap: 10px !important; } body.panelPage .pill-account.panelTopPillBar .authUi.userMenu.panelAccountCluster .userMenuBtn{ min-width: 120px !important; padding: 0 12px !important; justify-content: flex-start !important; gap: 8px !important; outline: none !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangCode{ font: 800 13px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: 0.02em !important; color: rgba(245, 249, 255, 0.96) !important; } body.panelPage .pill-account.panelTopPillBar .panelBalanceLinkLabel{ display: inline-block !important; max-width: 78px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 700 10px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; } body.panelPage .pill-account.panelTopPillBar .panelBalanceChip .panelBalanceChipIcon, body.panelPage .pill-account.panelTopPillBar .panelBalanceChip .stakeBalanceIcon{ width: 20px !important; height: 20px !important; flex: 0 0 20px !important; } body.panelPage .pill-account.panelTopPillBar .panelBalanceChip .panelBalanceChipValue, body.panelPage .pill-account.panelTopPillBar #accountBalance{ width: 100% !important; min-width: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font: 800 13px/1 "Manrope", system-ui, sans-serif !important; letter-spacing: -0.02em !important; text-align: center !important; color: rgba(245, 249, 255, 0.96) !important; font-variant-numeric: tabular-nums lining-nums !important; } body.panelPage .pill-account.panelTopPillBar .graphMenuIcon{ width: 17px !important; height: 17px !important; flex: 0 0 17px !important; display: inline-grid !important; place-items: center !important; color: rgba(214, 236, 255, 0.92) !important; } body.panelPage .pill-account.panelTopPillBar .graphMenuIcon svg{ width: 16px !important; height: 16px !important; } body.panelPage .pill-account.panelTopPillBar .graphUserName, body.panelPage .pill-account.panelTopPillBar .graphMenuLabel{ display: inline-block !important; min-width: 0 !important; max-width: 82px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font: 700 13px/1 "Manrope", system-ui, sans-serif !important; color: rgba(240, 248, 255, 0.98) !important; } body.panelPage .pill-account.panelTopPillBar .graphUserCaret{ font-size: 12px !important; opacity: 0.84 !important; color: rgba(232, 241, 252, 0.84) !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangDrop, body.panelPage .pill-account.panelTopPillBar .userMenuDrop{ padding: 8px !important; border-radius: 22px !important; border: 1px solid rgba(112, 165, 216, 0.18) !important; background: radial-gradient(circle at 14% 12%, rgba(83, 188, 255, 0.10), transparent 42%), radial-gradient(circle at 84% 8%, rgba(181, 107, 255, 0.12), transparent 44%), linear-gradient(180deg, rgba(10, 22, 39, 0.88), rgba(7, 15, 28, 0.92)) !important; box-shadow: 0 28px 56px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) saturate(116%) !important; -webkit-backdrop-filter: blur(20px) saturate(116%) !important; } @media (min-width: 1100px){ body.panelPage > .pill-account.panelTopPillBar{ right: max(18px, calc((100vw - 1608px) / 2 - 20px)) !important; } } body.panelPage .pill-account.panelTopPillBar .tradeLangDrop{ left: 0 !important; top: calc(100% + 10px) !important; min-width: 236px !important; } body.panelPage .pill-account.panelTopPillBar .userMenuDrop{ right: 0 !important; top: calc(100% + 10px) !important; width: min(244px, calc(100vw - 24px)) !important; padding: 10px !important; } body.panelPage .pill-account.panelTopPillBar .userMenuDrop.show{ display: grid !important; grid-auto-rows: min-content !important; row-gap: 8px !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangOption, body.panelPage .pill-account.panelTopPillBar .userMenuItem{ min-height: 48px !important; border-radius: 15px !important; border: 1px solid rgba(123, 149, 183, 0.10) !important; background: linear-gradient(180deg, rgba(20, 32, 51, 0.56), rgba(12, 22, 38, 0.52)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important; font: 600 12px/1 "Manrope", system-ui, sans-serif !important; color: rgba(237, 247, 255, 0.92) !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangOption{ padding: 0 12px !important; display: grid !important; grid-template-columns: 18px 28px minmax(0, 1fr) !important; column-gap: 10px !important; } body.panelPage .pill-account.panelTopPillBar .userMenuItem{ padding: 0 14px !important; margin: 0 !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangOption:hover, body.panelPage .pill-account.panelTopPillBar .tradeLangOption:focus-visible, body.panelPage .pill-account.panelTopPillBar .userMenuItem:hover, body.panelPage .pill-account.panelTopPillBar .userMenuItem:focus-visible{ transform: translateY(-1px); border-color: rgba(82, 220, 192, 0.30) !important; background: linear-gradient(135deg, rgba(128, 84, 255, 0.18), rgba(56, 242, 145, 0.14)) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; } body.panelPage .pill-account.panelTopPillBar .tradeLangOption.is-active{ border-color: rgba(82, 220, 192, 0.32) !important; background: linear-gradient(135deg, rgba(128, 84, 255, 0.22), rgba(56, 242, 145, 0.16)) !important; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; } body.panelPage .pill-account.panelTopPillBar .userMenuItem.danger:hover, body.panelPage .pill-account.panelTopPillBar .userMenuItem.danger:focus-visible{ border-color: rgba(255, 114, 146, 0.32) !important; background: linear-gradient(135deg, rgba(255, 94, 132, 0.20), rgba(255, 171, 196, 0.12)) !important; } body.panelPage .pill-account.panelTopPillBar .userMenuSep{ margin: 2px 6px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(134, 178, 224, 0.12), rgba(255, 255, 255, 0.02)) !important; } @media (max-width: 760px){ body.panelPage .panelTopBrand{ display: none !important; } body.panelPage > .pill-account.panelTopPillBar{ display: none !important; } }