/* ========================================================================== CXC Trade design system — dark-first, RTL-aware, responsive. Logical properties (inline-start/end) keep the layout correct in both directions; `dir` is set on by the i18n layer. ========================================================================== */ :root { --logo-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E%3Cdefs%3E%3ClinearGradient id='tile' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%234f8cff'/%3E%3Cstop offset='1' stop-color='%238b5cf6'/%3E%3C/linearGradient%3E%3ClinearGradient id='sheen' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0.2'/%3E%3Cstop offset='0.6' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='16' fill='url(%23tile)'/%3E%3Crect width='64' height='64' rx='16' fill='url(%23sheen)'/%3E%3Cpath d='M21 15 A20 20 0 0 0 21 49' fill='none' stroke='%2322d3ee' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M43 15 A20 20 0 0 1 43 49' fill='none' stroke='%2322d3ee' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M25 25 L39 39 M39 25 L25 39' fill='none' stroke='%23ffffff' stroke-width='8.5' stroke-linecap='round'/%3E%3C/svg%3E"); --font-ar: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; --font-en: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* palette */ --bg-0: #070a12; --bg-1: #0b0f1a; --bg-2: #101625; --bg-3: #161d2f; --bg-4: #1d2538; --line: rgba(148, 163, 184, 0.12); --line-strong: rgba(148, 163, 184, 0.24); --text: #e6ebf5; --text-2: #a6b0c3; --text-3: #8b97ad; --brand: #4f8cff; --brand-2: #22d3ee; --brand-3: #8b5cf6; --brand-glow: rgba(79, 140, 255, 0.35); --gold: #f5c451; --buy: #16c784; --buy-bg: rgba(22, 199, 132, 0.12); --sell: #ea3943; --sell-bg: rgba(234, 57, 67, 0.12); --warn: #f59e0b; --warn-bg: rgba(245, 158, 11, 0.12); --info-bg: rgba(79, 140, 255, 0.12); --danger: #ef4444; /* Text-only variants of the accent colours. The accents themselves are tuned for fills, borders and glows; used as small text they fall under the 4.5:1 WCAG AA threshold on some of our backgrounds. These are measured against every background the app actually paints (tests/e2e/contrast.mjs). */ --brand-text: #4f8cff; --up-text: #16c784; --down-text: #ff7079; --warn-text: #f5b342; --radius-s: 8px; --radius: 14px; --radius-l: 22px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.03) inset; --shadow-s: 0 4px 14px rgba(0, 0, 0, 0.25); --header-h: 64px; --container: 1280px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); } html[data-theme="light"] { --bg-0: #f3f5fa; --bg-1: #f7f9fd; --bg-2: #ffffff; --bg-3: #f0f3f9; --bg-4: #e6eaf3; --line: rgba(15, 23, 42, 0.08); --line-strong: rgba(15, 23, 42, 0.18); --text: #0f172a; --text-2: #475569; --text-3: #55606f; --brand-text: #1d4ed8; --up-text: #047857; --down-text: #b91c1c; --warn-text: #92610a; --brand-glow: rgba(79, 140, 255, 0.25); --shadow: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-s: 0 4px 14px rgba(15, 23, 42, 0.06); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg-1); color: var(--text); font-family: var(--font-ar); font-size: 15px; line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; } html[lang="en"] body { font-family: var(--font-en); } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 500px at 85% -10%, rgba(79, 140, 255, 0.16), transparent 60%), radial-gradient(700px 400px at 10% 110%, rgba(139, 92, 246, 0.14), transparent 60%), var(--bg-1); } a { color: var(--brand-text); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); } h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } h3 { font-size: 1.1rem; } p { margin: 0 0 0.8em; } small, .muted, .muted-2 { color: var(--text-2); } .muted-3 { color: var(--text-3); } /* Customer-typed text sits inline beside real emails in staff lists and in the adjustment picker. Isolating each run stops a bidi control in a display name from governing how the address next to it renders. */ .muted, .muted-2, .muted-3, .truncate { unicode-bidi: isolate; } .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .num { font-feature-settings: "tnum"; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: rgba(79, 140, 255, 0.35); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* ---------- boot splash ---------- */ .boot { min-height: 100vh; display: grid; place-items: center; } .boot-logo { width: 56px; height: 56px; border-radius: 14px; background: var(--logo-mark) center / contain no-repeat; box-shadow: 0 0 40px var(--brand-glow); animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(0.94); opacity: 0.8; } 50% { transform: scale(1.04); opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes flashUp { 0% { background: rgba(22,199,132,.35); } 100% { background: transparent; } } @keyframes flashDown { 0% { background: rgba(234,57,67,.35); } 100% { background: transparent; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(14px, 3vw, 28px); } .page { padding-block: 24px 96px; animation: fadeUp 0.35s var(--ease); } .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 22px; } .page-head p { margin: 0; color: var(--text-2); } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* Grid and flex children default to min-width:auto, which lets a wide table or a long unbreakable string push the whole page sideways. Never allow that. */ .grid > *, .stack > *, .row > *, .row-between > * { min-width: 0; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .spacer { flex: 1; } .hide-mobile { display: initial; } .show-mobile { display: none !important; } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } .hide-mobile { display: none !important; } .show-mobile { display: initial !important; } body { font-size: 14.5px; } } /* ---------- header / nav ---------- */ .header { position: sticky; top: 0; z-index: 50; height: var(--header-h); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); background: color-mix(in srgb, var(--bg-1) 78%, transparent); border-bottom: 1px solid var(--line); } .header-inner { height: 100%; display: flex; align-items: center; gap: 18px; min-width: 0; } /* `white-space: nowrap`, and the name may shrink but never wrap. A two-word platform name broke across two lines inside the 56px header bar on a phone, which pushed the mark out of alignment and read as a layout fault. The name is a single unit; if the bar is tight, the flex row below gives way first. */ .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--text); font-family: var(--font-en); white-space: nowrap; flex: 0 0 auto; } @media (max-width: 420px) { .logo { font-size: 1.02rem; gap: 8px; } .logo-mark { width: 26px; height: 26px; } } .logo:hover { text-decoration: none; } /* The mark: the initial drawn as a breakout — the right arm of the V climbs past the left and ends in an arrowhead. One SVG (also the favicon) so the tab, the header and the boot screen are the same object at every size. */ .logo-mark { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; background: var(--logo-mark) center / contain no-repeat; box-shadow: 0 0 18px var(--brand-glow); } .nav { display: flex; gap: 4px; } .nav a { padding: 8px 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; transition: 0.2s; } .nav a:hover { background: var(--bg-3); color: var(--text); text-decoration: none; } .nav a.active { background: var(--info-bg); color: var(--brand-text); } .header-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); display: inline-grid; place-items: center; cursor: pointer; color: var(--text-2); transition: 0.2s; } .icon-btn:hover { color: var(--text); border-color: var(--line-strong); } .avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #06101f; font-size: 0.9rem; } .bottom-nav { display: none; } @media (max-width: 860px) { .nav { display: none; } .bottom-nav { display: grid; grid-auto-flow: column; position: fixed; bottom: 0; inset-inline: 0; z-index: 60; background: color-mix(in srgb, var(--bg-1) 88%, transparent); backdrop-filter: blur(16px); border-top: 1px solid var(--line); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; color: var(--text-3); font-size: 0.7rem; font-weight: 600; } .bottom-nav a.active { color: var(--brand-text); } .bottom-nav svg { width: 22px; height: 22px; } } /* ---------- demo badge ---------- */ .demo-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--warn-bg); color: var(--warn-text); border: 1px solid rgba(245, 158, 11, 0.35); } .demo-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 10px var(--warn); } .demo-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-s); background: var(--warn-bg); border: 1px solid rgba(245,158,11,.3); color: var(--warn-text); font-weight: 600; font-size: 0.9rem; } /* ---------- cards ---------- */ .card { background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, white 2%), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-s); } .card-tight { padding: 12px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .card-head h3 { margin: 0; } .card-glow { position: relative; overflow: hidden; } .card-glow::before { content: ""; position: absolute; inset: -1px; background: linear-gradient(120deg, var(--brand), var(--brand-3), var(--brand-2)); opacity: 0.5; z-index: -1; filter: blur(18px); } .glass { background: color-mix(in srgb, var(--bg-2) 70%, transparent); backdrop-filter: blur(14px); } /* ---------- stats ---------- */ .stat { display: flex; flex-direction: column; gap: 4px; } .stat .label { color: var(--text-2); font-size: 0.82rem; } .stat .value { font-size: 1.45rem; font-weight: 700; font-family: var(--font-mono); direction: ltr; text-align: start; } .stat .sub { color: var(--text-3); font-size: 0.8rem; } .up { color: var(--up-text) !important; } .down { color: var(--down-text) !important; } .buy-text { color: var(--up-text); } .sell-text { color: var(--down-text); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 11px; border: 1px solid transparent; font-weight: 600; cursor: pointer; transition: transform 0.15s var(--ease), box-shadow 0.2s, background 0.2s, opacity 0.2s; white-space: nowrap; line-height: 1.2; user-select: none; background: var(--bg-3); color: var(--text); border-color: var(--line); } .btn:hover { border-color: var(--line-strong); background: var(--bg-4); text-decoration: none; } .btn:active { transform: translateY(1px) scale(0.99); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-3)); color: white; border-color: transparent; box-shadow: 0 8px 22px var(--brand-glow); } .btn-primary:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--brand), var(--brand-3)); } .btn-buy { background: var(--buy); color: #04140d; border-color: transparent; } .btn-buy:hover { background: #1ad38d; } .btn-sell { background: var(--sell); color: white; border-color: transparent; } .btn-sell:hover { background: #f04b55; } .btn-danger { background: var(--sell-bg); color: var(--down-text); border-color: rgba(234,57,67,.3); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); } .btn-ghost:hover { background: var(--bg-3); color: var(--text); } .btn-outline { background: transparent; border-color: var(--line-strong); } .btn-sm { padding: 6px 10px; font-size: 0.85rem; border-radius: 9px; } .btn-lg { padding: 14px 22px; font-size: 1.05rem; border-radius: 14px; } .btn-block { width: 100%; } .btn .spinner { width: 16px; height: 16px; } .spinning { animation: spin 0.8s linear infinite; } .pop { animation: popIn 0.35s var(--ease); color: var(--up-text); } @keyframes popIn { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } } .spinner { width: 22px; height: 22px; border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; } /* ---------- forms ---------- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label { font-size: 0.86rem; font-weight: 600; color: var(--text-2); } .field .hint { font-size: 0.78rem; color: var(--text-3); } .field .error { font-size: 0.8rem; color: var(--down-text); } .input, .select, .textarea { width: 100%; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--bg-1); color: var(--text); transition: 0.2s; min-height: 44px; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.2); } .input[aria-invalid="true"] { border-color: var(--sell); } .input.mono { font-family: var(--font-mono); } .textarea { min-height: 96px; resize: vertical; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a6b0c3' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-inline-start: 32px; } html[dir="ltr"] .select { background-position: right 12px center; padding-inline-start: 13px; padding-inline-end: 32px; } .input-group { display: flex; align-items: stretch; } .input-group .input { border-radius: 0; } .input-group > :first-child { border-start-start-radius: 11px; border-end-start-radius: 11px; } .input-group > :last-child { border-start-end-radius: 11px; border-end-end-radius: 11px; } .input-addon { display: flex; align-items: center; padding: 0 12px; background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--text-2); font-weight: 600; font-size: 0.85rem; white-space: nowrap; } .input-group .input + .input-addon { border-inline-start: 0; } .input-group .input-addon + .input { border-inline-start: 0; } .checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; } .checkbox input { width: 18px; height: 18px; accent-color: var(--brand); } .switch { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--bg-4); border: 1px solid var(--line-strong); cursor: pointer; transition: 0.2s; flex: none; } .switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: 0.2s var(--ease); } .switch[aria-checked="true"] { background: var(--brand); border-color: var(--brand); } .switch[aria-checked="true"]::after { inset-inline-start: 22px; background: white; } .segmented { display: inline-flex; background: var(--bg-1); border: 1px solid var(--line); border-radius: 11px; padding: 3px; gap: 2px; } .segmented button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; color: var(--text-2); cursor: pointer; font-weight: 600; font-size: 0.86rem; transition: 0.2s; } .segmented button.active { background: var(--bg-3); color: var(--text); box-shadow: var(--shadow-s); } .segmented.buy-sell button.active.buy { background: var(--buy); color: #04140d; } .segmented.buy-sell button.active.sell { background: var(--sell); color: white; } /* ---------- badges / alerts ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; } .badge-success { background: var(--buy-bg); color: var(--up-text); border-color: rgba(22,199,132,.3); } .badge-danger { background: var(--sell-bg); color: var(--down-text); border-color: rgba(234,57,67,.3); } .badge-warn { background: var(--warn-bg); color: var(--warn-text); border-color: rgba(245,158,11,.3); } .badge-info { background: var(--info-bg); color: var(--brand-text); border-color: rgba(79,140,255,.3); } .badge-purple { background: rgba(139,92,246,.14); color: #b794ff; border-color: rgba(139,92,246,.3); } .alert { padding: 12px 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--bg-3); display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; } .alert-info { background: var(--info-bg); border-color: rgba(79,140,255,.3); color: #cfe0ff; } .alert-warn { background: var(--warn-bg); border-color: rgba(245,158,11,.3); color: #ffe1a8; } .alert-danger { background: var(--sell-bg); border-color: rgba(234,57,67,.3); color: #ffc9cc; } .alert-success { background: var(--buy-bg); border-color: rgba(22,199,132,.3); color: #b9f5dc; } html[data-theme="light"] .alert-info { color: #1e3a8a; } html[data-theme="light"] .alert-warn { color: #92400e; } html[data-theme="light"] .alert-danger { color: #991b1b; } html[data-theme="light"] .alert-success { color: #065f46; } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); } table.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table th, .table td { padding: 11px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; } .table th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 600; background: var(--bg-2); position: sticky; top: 0; } .table tbody tr { transition: background 0.15s; } /* On a phone a staff table has more columns than the screen has room for. `width: 100%` made every column share the shortfall, so a ledger note came out ten characters wide over four lines. Sizing to content and letting `.table-wrap` scroll sideways keeps each column readable — the normal way to read a wide table on a small screen. Customer tables are narrow enough to fit and are left alone. */ /* This is not only a phone problem: the panel's own sidebar leaves the ledger about as much room on a laptop as a phone gives it, and the note column was ten characters wide there too. So the rule applies at every width — on a wide screen `min-width: 100%` means nothing changes, and where the columns genuinely need more room the wrapper scrolls instead of crushing them. `width: auto` would not do: a table still shrinks to the space available. */ .adm-page .table-wrap > table.table { width: max-content; min-width: 100%; } .adm-page .table-wrap > table.table th, .adm-page .table-wrap > table.table td { max-width: 30ch; } .table tbody tr:hover { background: var(--bg-3); } .table tbody tr:last-child td { border-bottom: 0; } .table td.num, .table th.num { text-align: end; } .table-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .table-toolbar .input, .table-toolbar .select { width: auto; min-width: 160px; min-height: 40px; padding-block: 8px; } .pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; color: var(--text-2); font-size: 0.86rem; flex-wrap: wrap; } .clickable { cursor: pointer; } @media (max-width: 640px) { .table th, .table td { padding: 9px 8px; font-size: 0.84rem; } } /* ---------- tabs ---------- */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; } .tabs button { border: 0; background: transparent; padding: 10px 14px; color: var(--text-2); font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: 0.2s; } .tabs button.active { color: var(--brand-text); border-bottom-color: var(--brand); } .tabs button:hover { color: var(--text); } /* ---------- modal ---------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(3, 6, 14, 0.7); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: fadeUp 0.2s; } /* The dialog is a column: a fixed header, a scrolling body, and actions that stay put. Scrolling the whole box instead put "save" below the fold on every screen size, inside a container that looks finished at its bottom edge. */ .modal { width: 100%; max-width: 520px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius-l); padding: 22px; box-shadow: var(--shadow); animation: fadeUp 0.25s var(--ease); } .modal-lg { max-width: 820px; } .modal h3 { margin-bottom: 6px; } .modal-title { flex: none; } .modal-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; margin-inline: -22px; padding-inline: 22px; } /* A hairline and a whisper of shadow so the pinned row reads as an edge the content passes under, not as the end of the dialog. */ .modal-actions { flex: none; display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; } /* The "why you cannot save yet" line: full width, so it wraps above the buttons instead of competing with them for the row. */ .guard-note { order: -1; flex: 1 0 100%; display: flex; gap: 8px; align-items: flex-start; font-size: 0.86rem; color: var(--warn-text); background: var(--warn-bg); border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 11px; padding: 9px 11px; } .guard-note svg { flex: none; margin-top: 2px; } /* Not disabled — pressing it is how you find out what is missing — but it should not look like the finished, ready-to-go action either. */ .btn-not-ready { opacity: 0.72; } /* A control that is read-only for this role must look it. */ .is-disabled { opacity: 0.55; } .is-disabled .switch { pointer-events: none; } @media (max-width: 640px) { .modal-backdrop { align-items: end; padding: 0; } .modal { border-radius: 22px 22px 0 0; max-height: 94vh; padding-bottom: max(22px, env(safe-area-inset-bottom)); } } /* ---------- toasts ---------- */ .toasts { position: fixed; z-index: 200; top: 76px; inset-inline-end: 16px; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); } .toast { padding: 12px 14px; border-radius: 12px; background: var(--bg-3); border: 1px solid var(--line-strong); box-shadow: var(--shadow); animation: fadeUp 0.25s var(--ease); display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; } .toast-success { border-color: rgba(22,199,132,.4); } .toast-error { border-color: rgba(234,57,67,.4); } .toast-warn { border-color: rgba(245,158,11,.4); } @media (max-width: 640px) { .toasts { top: auto; bottom: 84px; inset-inline: 12px; max-width: none; } } /* ---------- skeleton / empty ---------- */ .skeleton { background: linear-gradient(90deg, var(--bg-3) 25%, var(--bg-4) 37%, var(--bg-3) 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: 8px; min-height: 14px; } .empty { text-align: center; padding: 40px 16px; color: var(--text-2); } .empty .icon { font-size: 2rem; margin-bottom: 6px; opacity: 0.7; } /* ---------- stepper ---------- */ .stepper { display: flex; gap: 6px; margin-bottom: 20px; } .stepper .step { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--text-3); } .stepper .step .bar { height: 4px; border-radius: 4px; background: var(--bg-4); } .stepper .step.done .bar, .stepper .step.active .bar { background: linear-gradient(90deg, var(--brand), var(--brand-2)); } .stepper .step.active { color: var(--text); font-weight: 600; } /* ---------- misc ---------- */ .divider { height: 1px; background: var(--line); margin: 14px 0; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 0.9rem; } .kv dt { color: var(--text-3); } .kv dd { margin: 0; overflow-wrap: anywhere; } .copy-box { display: flex; align-items: center; gap: 8px; background: var(--bg-1); border: 1px dashed var(--line-strong); border-radius: 11px; padding: 10px 12px; } .copy-box code { flex: 1; font-family: var(--font-mono); font-size: 0.86rem; direction: ltr; text-align: left; overflow-wrap: anywhere; } .qr { background: white; padding: 12px; border-radius: 14px; display: inline-block; } .qr svg { display: block; width: 180px; height: 180px; } .pill-list { display: flex; flex-wrap: wrap; gap: 8px; } .pill { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-2); cursor: pointer; font-weight: 600; transition: 0.2s; } .pill:hover { border-color: var(--brand); } .pill.active { background: var(--info-bg); border-color: var(--brand); color: var(--brand-text); } .option-card { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px; cursor: pointer; transition: 0.2s; background: var(--bg-2); } .option-card:hover { border-color: var(--brand); transform: translateY(-1px); } .option-card.active { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79,140,255,.18); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-center { text-align: center; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .w-full { width: 100%; } .flash-up { animation: flashUp 0.7s; } .flash-down { animation: flashDown 0.7s; } .gradient-text { background: linear-gradient(90deg, var(--brand-2), var(--brand), var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .coin { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--font-en); color: #06101f; flex: none; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35); } .coin svg { display: block; } .coin-BTC { background: linear-gradient(135deg, #f7931a, #ffb35c); } .coin-ETH { background: linear-gradient(135deg, #8c8cff, #c7c7ff); } .coin-USDT { background: linear-gradient(135deg, #26a17b, #4ad0a6); } .coin-SOL { background: linear-gradient(135deg, #9945ff, #14f195); } .coin-BNB { background: linear-gradient(135deg, #f3ba2f, #ffd875); } .coin-XRP { background: linear-gradient(135deg, #6b7280, #cbd5e1); } .coin-USDC { background: linear-gradient(135deg, #2775ca, #6fa8f5); } .coin-TRX { background: linear-gradient(135deg, #ef0027, #ff6b6b); } /* ---------- auth layout ---------- */ .auth-wrap { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 24px 14px 60px; } .auth-card { width: 100%; max-width: 440px; } .menu-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; } .auth-perks { list-style: none; margin: 14px 0 16px; padding: 12px 14px; display: grid; gap: 9px; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); } .auth-perks li { display: flex; align-items: center; gap: 9px; font-size: 0.87rem; color: var(--text-2); } .auth-perks svg { color: var(--up-text); flex: none; } /* ---------- hero ---------- */ /* `padding-block`, not the `padding` shorthand. This section carries `.container` as well, and the shorthand reset its inline padding to 0 — so on the landing page, the first thing a visitor sees, the headline sat flush against the edge of the screen with no gutter at any width. `.hero`'s `overflow-x: clip` (added for the panel glow) hid the symptom from the overflow checks, and none of the probes measure gutters, so it survived every pass. Only the block axis belongs to .hero. */ .hero { padding-block: clamp(40px, 8vw, 96px) 40px; position: relative; } .hero h1 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.15; margin-bottom: 14px; } .hero p.lead { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--text-2); max-width: 620px; } .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; } .ticker-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; } .ticker-strip::-webkit-scrollbar { display: none; } .ticker-card { flex: none; min-width: 200px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); transition: 0.2s; } .ticker-card:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; } .feature { padding: 22px; border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--bg-2); height: 100%; } .feature .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand-text); margin-bottom: 12px; } .feature .icon svg { width: 22px; height: 22px; } /* ---------- trading screen ---------- */ .trade-layout { display: grid; grid-template-columns: 1fr 300px 320px; grid-template-areas: "chart book form" "orders orders form"; gap: 12px; align-items: start; } .trade-layout > * { min-width: 0; } /* 1fr tracks must not grow past the viewport because of wide intrinsic content (chart legend, order book rows) */ .trade-chart { grid-area: chart; } .trade-book { grid-area: book; } .trade-form { grid-area: form; position: sticky; top: calc(var(--header-h) + 12px); } .trade-orders { grid-area: orders; } @media (max-width: 1180px) { .trade-layout { grid-template-columns: 1fr 300px; grid-template-areas: "chart form" "book form" "orders orders"; } .trade-form { position: static; } } @media (max-width: 760px) { .trade-layout { grid-template-columns: 1fr; grid-template-areas: "chart" "form" "book" "orders"; } } .chart-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .chart-canvas { width: 100%; height: 420px; display: block; border-radius: 10px; touch-action: none; } @media (max-width: 640px) { .chart-canvas { height: 300px; } .book, .trades-feed { max-height: 360px; } } .book { font-family: var(--font-mono); font-size: 0.8rem; direction: ltr; max-height: 466px; overflow-y: auto; scrollbar-width: thin; } .book-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 2px 8px; position: relative; line-height: 1.6; } .book-row span { position: relative; z-index: 1; text-align: right; } .book-row .depth { position: absolute; top: 0; bottom: 0; right: 0; opacity: 0.16; z-index: 0; } .book-row.ask .depth { background: var(--sell); } .book-row.bid .depth { background: var(--buy); } .book-mid { text-align: center; padding: 8px; font-size: 1.05rem; font-weight: 700; border-block: 1px solid var(--line); margin: 4px 0; } .book-head { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 4px 8px; color: var(--text-3); font-size: 0.7rem; text-transform: uppercase; } .book-head span { text-align: right; } .trades-feed { font-family: var(--font-mono); font-size: 0.78rem; direction: ltr; max-height: 452px; overflow-y: auto; scrollbar-width: thin; } .trades-feed .book-row span:first-child { text-align: left; } .pct-row { display: flex; gap: 4px; } .pct-row button { flex: 1; padding: 5px 0; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-1); color: var(--text-2); font-size: 0.78rem; cursor: pointer; } .pct-row button:hover { border-color: var(--brand); color: var(--text); } .market-row { display: grid; grid-template-columns: 1.4fr 1fr 0.9fr 1.2fr 100px; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; transition: 0.2s; cursor: pointer; } .market-row:hover { background: var(--bg-3); } @media (max-width: 760px) { .market-row { grid-template-columns: 1.3fr 1fr 0.8fr; } .market-row .hide-sm { display: none; } } /* ---------- admin layout ---------- */ .admin-body { background: var(--bg-0); } .admin-layout { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; } .admin-sidebar { background: var(--bg-1); border-inline-end: 1px solid var(--line); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .admin-sidebar .logo { padding: 6px 8px 14px; } .admin-sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-weight: 500; font-size: 0.92rem; transition: 0.2s; } .admin-sidebar a:hover { background: var(--bg-3); color: var(--text); text-decoration: none; } .admin-sidebar a.active { background: var(--info-bg); color: var(--brand-text); } .admin-sidebar a svg { width: 18px; height: 18px; flex: none; } .admin-sidebar .section { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); padding: 12px 12px 4px; } .admin-main { min-width: 0; padding: 20px clamp(14px, 3vw, 32px) 80px; } .admin-topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .admin-menu-btn { display: none; } @media (max-width: 960px) { .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: 270px; z-index: 90; transform: translateX(var(--sb-hide, 100%)); transition: transform 0.25s var(--ease); box-shadow: var(--shadow); } html[dir="ltr"] .admin-sidebar { --sb-hide: -100%; } .admin-sidebar.open { transform: none; } .admin-menu-btn { display: inline-grid; } .sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 80; } } .kpi { padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; gap: 4px; } .kpi .label { color: var(--text-2); font-size: 0.8rem; } .kpi .value { font-size: 1.5rem; font-weight: 700; font-family: var(--font-mono); } .json { font-family: var(--font-mono); font-size: 0.76rem; white-space: pre-wrap; word-break: break-all; background: var(--bg-1); padding: 10px; border-radius: 8px; border: 1px solid var(--line); direction: ltr; text-align: left; max-height: 300px; overflow: auto; } .status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-inline-end: 6px; } .status-dot.enabled { background: var(--buy); box-shadow: 0 0 8px var(--buy); } .status-dot.tested { background: var(--brand); } .status-dot.configured { background: var(--warn); } .status-dot.not_configured { background: var(--text-3); } /* ---------- print ---------- */ @media print { .header, .bottom-nav, .admin-sidebar, .toasts { display: none !important; } } /* ---------- wallet pages (agent) ---------- */ .status-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); height: 100%; } .status-card .status-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--bg-3); color: var(--text-2); } .status-card.ok .status-icon { background: var(--buy-bg); color: var(--up-text); } .status-card.warn .status-icon { background: var(--warn-bg); color: var(--warn-text); } .status-card.info .status-icon { background: var(--info-bg); color: var(--brand-text); } .status-card .status-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; } .status-card .status-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; flex-wrap: wrap; } .status-card .status-text { color: var(--text-2); font-size: 0.86rem; line-height: 1.5; } .real-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: var(--buy-bg); color: var(--up-text); border: 1px solid rgba(22,199,132,.3); } .real-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--buy); } .balance-list { display: flex; flex-direction: column; } .balance-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); } .balance-item:last-child { border-bottom: 0; } .balance-item .bal-name { font-weight: 700; } .balance-item .bal-sub { color: var(--text-3); font-size: 0.78rem; } .balance-item .bal-amounts { text-align: end; display: flex; flex-direction: column; gap: 2px; } .balance-item .bal-main { font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; direction: ltr; } .balance-item .bal-minor { font-size: 0.76rem; color: var(--text-3); display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } .balance-item .bal-minor b { font-family: var(--font-mono); color: var(--text-2); font-weight: 600; direction: ltr; unicode-bidi: isolate; } .demo-card { border-color: rgba(245,158,11,.35); background: linear-gradient(180deg, rgba(245,158,11,.06), transparent 40%), var(--bg-2); } .quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .quick-action { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-weight: 600; transition: 0.2s; text-align: center; } .quick-action:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-1px); } .quick-action .qa-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand-text); } .quick-action.qa-warn .qa-icon { background: var(--warn-bg); color: var(--warn-text); } .quick-action.qa-buy .qa-icon { background: var(--buy-bg); color: var(--up-text); } .mini-list { display: flex; flex-direction: column; } .mini-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 0.88rem; cursor: pointer; border-radius: 8px; transition: background .15s; } .mini-row:hover { background: var(--bg-3); } .mini-row:last-child { border-bottom: 0; } .mini-row .mr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .mini-row .mr-sub { color: var(--text-3); font-size: 0.76rem; } .mini-row .mr-amt { font-family: var(--font-mono); font-weight: 600; direction: ltr; white-space: nowrap; } .amt-pos { color: var(--up-text); } .amt-neg { color: var(--down-text); } .posting-list { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 0.82rem; direction: ltr; text-align: left; } .timeline { display: flex; flex-direction: column; gap: 0; margin: 8px 0; } .timeline .tl-step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; position: relative; padding-bottom: 14px; } .timeline .tl-step::before { content: ""; position: absolute; inset-inline-start: 10px; top: 20px; bottom: 0; width: 2px; background: var(--line); } .timeline .tl-step:last-child::before { display: none; } .timeline .tl-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--bg-2); display: grid; place-items: center; font-size: 0.7rem; color: var(--text-3); } .timeline .tl-step.done .tl-dot { background: var(--buy); border-color: var(--up-text); color: #04140d; } .timeline .tl-step.active .tl-dot { border-color: var(--brand); color: var(--brand-text); box-shadow: 0 0 0 4px rgba(79,140,255,.18); } .timeline .tl-step.bad .tl-dot { background: var(--sell); border-color: var(--down-text); color: white; } .timeline .tl-label { font-weight: 600; font-size: 0.9rem; line-height: 22px; } .timeline .tl-sub { color: var(--text-3); font-size: 0.78rem; } .timeline .tl-step:not(.done):not(.active):not(.bad) .tl-label { color: var(--text-3); font-weight: 500; } .wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .option-card .oc-title { display: flex; align-items: center; gap: 10px; font-weight: 700; } .option-card .oc-sub { color: var(--text-3); font-size: 0.8rem; margin-top: 4px; } .option-card .oc-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 0.8rem; color: var(--text-2); flex-wrap: wrap; } .option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .currency-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-2); cursor: pointer; font-weight: 700; transition: 0.2s; } html[dir="rtl"] .currency-pill { padding: 10px 10px 10px 16px; } .currency-pill:hover { border-color: var(--brand); } .currency-pill.active { border-color: var(--brand); background: var(--info-bg); box-shadow: 0 0 0 3px rgba(79,140,255,.15); } .currency-pill .cp-name { font-size: 0.76rem; color: var(--text-3); font-weight: 500; } .deposit-address-panel { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; } @media (max-width: 640px) { .deposit-address-panel { grid-template-columns: 1fr; justify-items: center; } .deposit-address-panel > :last-child { width: 100%; } .quick-actions { grid-template-columns: repeat(3, 1fr); } .quick-action { padding: 12px 6px; font-size: 0.82rem; } } .proof-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--bg-1); } .proof-drop { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 11px; background: var(--bg-1); } .proof-drop input[type="file"] { display: none; } .proof-preview { max-width: 100%; max-height: 360px; border-radius: 12px; border: 1px solid var(--line); object-fit: contain; background: var(--bg-1); } .addr-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; } .addr-check.ok { color: var(--up-text); } .addr-check.bad { color: var(--down-text); } .addr-check.wait { color: var(--text-3); } .quote-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .quote-row { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; color: var(--text-2); } .quote-row b { font-family: var(--font-mono); color: var(--text); direction: ltr; unicode-bidi: isolate; } .quote-row.total { border-top: 1px solid var(--line); padding-top: 8px; font-size: 1rem; color: var(--text); } .quote-row.total b { font-size: 1.1rem; } .locked-state { text-align: center; padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .locked-state .lock-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--warn-bg); color: var(--warn-text); margin-bottom: 6px; } .locked-state p { max-width: 520px; color: var(--text-2); } .recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; font-family: var(--font-mono); direction: ltr; background: var(--bg-1); border: 1px dashed var(--line-strong); border-radius: 11px; padding: 12px; } .recovery-codes code { padding: 4px 8px; background: var(--bg-3); border-radius: 6px; font-size: 0.86rem; text-align: center; } .session-ua { max-width: min(340px, 60vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 0.82rem; direction: ltr; } .thread { display: flex; flex-direction: column; gap: 12px; } .msg { max-width: min(80%, 640px); padding: 10px 14px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92rem; } .msg-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; } .msg-wrap.staff { align-items: flex-start; } .msg-wrap .msg-meta { font-size: 0.72rem; color: var(--text-3); display: flex; gap: 8px; align-items: center; } .msg-wrap.staff .msg { background: var(--info-bg); border-color: rgba(79,140,255,.3); } .msg-wrap.mine .msg { border-start-end-radius: 4px; } .msg-wrap.staff .msg { border-start-start-radius: 4px; } .ticket-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); transition: .2s; } .ticket-row:hover { border-color: var(--brand); text-decoration: none; } .ticket-row .tr-main { flex: 1; min-width: 0; } .ticket-row .tr-sub { color: var(--text-3); font-size: 0.78rem; } .section-label { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); font-weight: 700; } .section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } .ref-hero { text-align: center; padding: 20px 10px; } .ref-hero .ref-ok { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 10px; background: var(--buy-bg); color: var(--up-text); } .ref-hero .ref-code { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 800; letter-spacing: 0.06em; direction: ltr; } .greeting { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } .greeting .avatar-lg { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #06101f; } .help-list { margin: 0; padding-inline-start: 18px; color: var(--text-2); font-size: 0.88rem; display: flex; flex-direction: column; gap: 4px; } .help-list li::marker { color: var(--brand-text); } .kv-wide { grid-template-columns: 1fr; gap: 2px 0; } .kv-wide dt { margin-top: 8px; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; } @media (min-width: 640px) { .kv-wide { grid-template-columns: max-content 1fr; gap: 8px 16px; } .kv-wide dt { margin-top: 0; text-transform: none; letter-spacing: 0; font-size: 0.9rem; } } .wallet-balances-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .wallet-balances-grid { grid-template-columns: 1fr; } } .deposit-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } @media (max-width: 960px) { .deposit-layout { grid-template-columns: 1fr; } } .withdraw-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } @media (max-width: 960px) { .withdraw-layout { grid-template-columns: 1fr; } } /* ---------- trading (agent) ---------- */ /* markets page */ .mk-search { display: flex; align-items: center; gap: 8px; min-width: min(100%, 320px); } .mk-search .input { min-height: 42px; } .mk-stats { margin-top: 4px; } .mk-stat { color: inherit; text-decoration: none !important; transition: 0.2s; } a.mk-stat:hover { border-color: var(--brand); transform: translateY(-1px); } .mk-stat .label { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .mk-sim { font-size: 0.64rem; padding: 1px 7px; } .mk-breadth { display: block; height: 6px; border-radius: 6px; background: var(--sell-bg); overflow: hidden; margin-top: 6px; position: relative; } .mk-breadth i { display: block; height: 100%; background: var(--buy); border-radius: 6px; transition: width 0.6s var(--ease); } .mk-table { padding: 6px; overflow: hidden; } .mk-row { display: grid; grid-template-columns: minmax(140px, 1.5fr) minmax(120px, 1fr) minmax(96px, 0.8fr) minmax(120px, 1fr) minmax(120px, 1fr) 120px; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; transition: background 0.15s; } .mk-row.clickable:hover, .mk-row.clickable:focus-visible { background: var(--bg-3); } .mk-row + .mk-row { border-top: 1px solid var(--line); border-radius: 0; } .mk-row.clickable:hover + .mk-row { border-top-color: transparent; } .mk-head { padding-block: 6px; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 2px; } .mk-sort { border: 0; background: transparent; color: var(--text-3); font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 0; text-align: start; } .mk-sort:hover, .mk-sort.active { color: var(--text); } .mk-sort-ind { font-size: 0.7em; opacity: 0.7; } .mk-sort.num-col { justify-content: flex-end; width: 100%; } .num-col { text-align: end; direction: ltr; } html[dir="rtl"] .num-col { text-align: left; } .mk-price { font-weight: 600; font-size: 0.98rem; padding: 2px 6px; border-radius: 6px; } .mk-chg { display: inline-block; padding: 3px 8px; border-radius: 7px; font-size: 0.88rem; } .mk-chg.up-bg { background: var(--buy-bg); } .mk-chg.down-bg { background: var(--sell-bg); } .mk-hl { display: flex; flex-direction: column; font-size: 0.82rem; line-height: 1.4; } .mk-sub { font-size: 0.72rem; } .mk-spark { display: flex; justify-content: center; } .live-price { display: inline-block; border-radius: 6px; } @media (max-width: 900px) { .mk-row { grid-template-columns: minmax(120px, 1.4fr) minmax(100px, 1fr) minmax(90px, 0.8fr) 110px; gap: 10px; } .mk-row > :nth-child(4), .mk-row > :nth-child(5) { display: none; } } @media (max-width: 640px) { .mk-row { grid-template-columns: 1.3fr 1fr 0.9fr; gap: 8px; padding: 10px 8px; } .mk-hide-sm { display: none !important; } .mk-search { width: 100%; } .mk-stats { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-stat .value { font-size: 1.1rem; } .mk-price { font-size: 0.9rem; padding-inline: 0; } .mk-chg { padding: 2px 6px; font-size: 0.8rem; } .mk-row .coin { width: 30px; height: 30px; } } /* trade header */ .trade-page .demo-banner { margin-bottom: 0; } .trade-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 14px; } .trade-stats { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; flex: 1; min-width: 0; } .trade-price { display: flex; flex-direction: column; line-height: 1.1; } .trade-price-main { font-size: 1.5rem; font-weight: 700; padding: 2px 6px; margin-inline-start: -6px; } .trade-stat { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; } .trade-stat .label { font-size: 0.72rem; color: var(--text-3); white-space: nowrap; } .pair-select { position: relative; } .pair-btn { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-1); cursor: pointer; transition: 0.2s; } .pair-btn:hover { border-color: var(--line-strong); background: var(--bg-3); } .pair-name { font-weight: 700; font-size: 1.05rem; } .pair-chevron { transform: rotate(90deg); transition: transform 0.2s; color: var(--text-3); } .pair-chevron.open { transform: rotate(-90deg); } .pair-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 320px; max-width: calc(100vw - 32px); z-index: 40; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px; animation: fadeUp 0.18s var(--ease); direction: ltr; } .pair-item { display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 0.9rem; color: var(--text); } .pair-item:hover { background: var(--bg-3); } .pair-item.active { background: var(--info-bg); } .pair-item-price { color: var(--text-2); } @media (max-width: 640px) { .trade-head { gap: 10px; padding: 10px; } .trade-stats { gap: 10px 16px; } .trade-price { flex-basis: 100%; } .trade-price-main { font-size: 1.6rem; } .trade-stat { font-size: 0.82rem; } .pair-menu { position: fixed; inset-inline: 12px; top: auto; min-width: 0; max-width: none; } } /* chart */ .chart-tf button { padding: 6px 10px; font-family: var(--font-mono); font-size: 0.8rem; } .chart-chip { border: 1px solid var(--line); background: var(--bg-1); color: var(--text-3); border-radius: 8px; padding: 5px 9px; font-size: 0.76rem; font-weight: 600; cursor: pointer; font-family: var(--font-mono); transition: 0.2s; display: inline-flex; align-items: center; gap: 6px; } .chart-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chip, var(--text-3)); opacity: 0.35; display: var(--chip-dot, none); } .chart-chip[aria-pressed]::before { display: inline-block; } .chart-chip.active { color: var(--text); border-color: var(--line-strong); } .chart-chip.active::before { opacity: 1; box-shadow: 0 0 6px var(--chip); } .chart-wrap { position: relative; width: 100%; height: 420px; direction: ltr; user-select: none; -webkit-user-select: none; } .chart-wrap .chart-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; } .chart-legend { position: absolute; top: 6px; left: 8px; right: 70px; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.72rem; color: var(--text-2); pointer-events: none; text-align: left; } .chart-legend b { font-weight: 500; } .chart-hint { font-size: 0.7rem; text-align: center; margin-top: 6px; } @media (max-width: 640px) { .chart-wrap { height: 320px; } .chart-legend { font-size: 0.66rem; gap: 2px 8px; } .chart-toolbar { justify-content: space-between; } .chart-tf button { padding: 6px 8px; font-size: 0.74rem; } } /* book / trades refinements */ .trade-book .tabs { margin-bottom: 8px; } .book-side { display: flex; flex-direction: column; } .book-row { cursor: pointer; border-radius: 4px; } .book-row:hover { background: var(--bg-3); } .book-row .depth { border-radius: 3px; transition: width 0.4s var(--ease); } .book-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; } .book-mid-price { font-size: 1.15rem; } .book-arrow { font-size: 0.9em; } .book-spread { font-size: 0.68rem; font-weight: 500; } .trades-feed .book-row { cursor: default; } .trades-feed .book-row.trade { animation: fadeUp 0.25s var(--ease); } /* order form */ .order-form .segmented.w-full { display: flex; width: 100%; } .order-form .segmented.w-full button { flex: 1; padding: 9px 12px; } .order-form .field { margin-bottom: 10px; } .order-form .input { min-height: 42px; padding-block: 9px; } .order-summary { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0 6px; font-size: 0.84rem; padding: 10px 12px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--line); } .order-summary dt { color: var(--text-3); } .order-summary dd { margin: 0; text-align: end; } .order-login { text-align: center; padding: 14px 6px; } .order-login-icon { width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 6px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand-text); } .demo-wallet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 380px) { .demo-wallet-grid { grid-template-columns: 1fr; } } .settings-layout { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .settings-layout { grid-template-columns: minmax(0, 1fr); } } .support-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .support-layout { grid-template-columns: 1fr; } .support-layout > :first-child { order: 2; } } /* ---------- admin (agent) ---------- */ .adm-page { animation: fadeUp 0.3s var(--ease); } .adm-sidebar-tag { font-size: 0.7rem; color: var(--text-3); padding: 0 12px 10px; margin-top: -8px; letter-spacing: 0.04em; } .adm-sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--line); margin-top: 8px; } .adm-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--warn-bg); border: 1px solid rgba(245,158,11,.4); color: #ffe1a8; margin-bottom: 18px; flex-wrap: wrap; } html[data-theme="light"] .adm-banner { color: #92400e; } .adm-banner svg { color: var(--warn-text); flex: none; } /* The text column must claim a readable width before the button gets any. With `flex: 1` alone its basis is 0, so on a phone it shrank to a sliver and the warning wrapped one word per line instead of pushing the button down. */ .adm-banner > div { flex: 1 1 15rem; min-width: min(15rem, 100%); } .adm-banner > .btn { flex: none; } @media (max-width: 560px) { .adm-banner > .btn { width: 100%; justify-content: center; } } .adm-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .adm-codes code { font-family: var(--font-mono); background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; direction: ltr; text-align: center; font-size: 0.9rem; letter-spacing: 0.05em; } .adm-kpi-icon { color: var(--text-3); display: inline-grid; place-items: center; } .adm-link-card { color: inherit; display: block; } .adm-link-card:hover { text-decoration: none; } .adm-link-card .kpi { transition: 0.2s; height: 100%; } .adm-link-card:hover .kpi { border-color: var(--brand); transform: translateY(-1px); } .adm-demo-card { border-color: rgba(245,158,11,.3); background: linear-gradient(180deg, rgba(245,158,11,.05), var(--bg-2)); } .adm-demo-section { padding: 16px; border-radius: var(--radius-l); border: 1px dashed rgba(245,158,11,.4); } .adm-section-title { margin: 6px 0 12px; font-size: 1rem; } .adm-bar-row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; align-items: center; gap: 10px; font-size: 0.84rem; } .adm-bar-label { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-bar-track { height: 8px; border-radius: 6px; background: var(--bg-4); overflow: hidden; } .adm-bar-fill { height: 100%; border-radius: 6px; transition: width 0.4s var(--ease); } .adm-err-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-1); border: 1px solid var(--line); } .adm-action-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .adm-action-row:last-child { border-bottom: 0; } .adm-hist { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-1); } .adm-proof { max-height: 320px; width: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-1); object-fit: contain; } .adm-checklist { padding: 12px; border-radius: 10px; border: 1px solid rgba(22,199,132,.35); background: var(--buy-bg); margin-bottom: 14px; } .adm-guide { margin: 0; padding-inline-start: 20px; font-size: 0.84rem; color: var(--text-2); display: flex; flex-direction: column; gap: 6px; } .adm-timeline { display: flex; flex-direction: column; gap: 14px; position: relative; padding-inline-start: 6px; } .adm-tl-step { display: flex; gap: 12px; align-items: flex-start; opacity: 0.55; } .adm-tl-step.done { opacity: 1; } .adm-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bg-4); border: 2px solid var(--line-strong); flex: none; margin-top: 4px; } .adm-dropdown { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; max-height: 260px; overflow-y: auto; } .adm-dropdown button { display: block; width: 100%; text-align: start; background: transparent; border: 0; padding: 10px 12px; cursor: pointer; font-size: 0.88rem; border-bottom: 1px solid var(--line); } .adm-dropdown button:hover { background: var(--bg-3); } .adm-dropdown button:last-child { border-bottom: 0; } .adm-blockers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; } .adm-blockers li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--sell-bg); border: 1px solid rgba(234,57,67,.3); } .adm-blockers li svg { color: var(--down-text); flex: none; } .adm-chart { width: 100%; } .adm-chart svg { display: block; overflow: visible; } .adm-chart rect { transition: opacity 0.15s; } .adm-chart rect:hover { opacity: 1; filter: brightness(1.2); } .adm-chart-axis { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-3); margin-top: 4px; font-family: var(--font-mono); direction: ltr; } .adm-thread-layout { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; } @media (max-width: 960px) { .adm-thread-layout { grid-template-columns: 1fr; } } .adm-thread { display: flex; flex-direction: column; gap: 12px; } .adm-msg { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-1); max-width: 92%; } .adm-msg.staff { align-self: flex-end; background: var(--info-bg); border-color: rgba(79,140,255,.3); } .adm-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.84rem; flex-wrap: wrap; } @media (max-width: 960px) { .admin-main { padding-top: 12px; } .adm-bar-row { grid-template-columns: minmax(90px, 120px) 1fr auto; } } @media (max-width: 640px) { .page-head .row { width: 100%; } .adm-codes { grid-template-columns: 1fr; } .table-toolbar .input, .table-toolbar .select { min-width: 0; flex: 1 1 140px; } } .adm-page .nowrap { white-space: nowrap; } .adm-page .grid > * { min-width: 0; } @media (max-width: 640px) { .adm-page .grid-2, .adm-page .grid-3, .adm-page .grid-4 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 900px) { .adm-page .grid-3, .adm-page .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ================================================================ v2: live tags, account switch */ .live-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--buy-bg); color: var(--up-text); border: 1px solid rgba(22,199,132,.3); letter-spacing: 0.02em; } .live-tag.off { background: var(--warn-bg); color: var(--warn-text); border-color: rgba(245,158,11,.3); } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; display: inline-block; animation: livepulse 1.6s ease-in-out infinite; } .live-dot.off { animation: none; opacity: 0.6; } @keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .acct-switch-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } .acct-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-strong); gap: 2px; } .acct-switch button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-2); font-weight: 700; font-size: 0.82rem; padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: 0.2s; white-space: nowrap; font-family: inherit; } .acct-switch button.active.real { background: linear-gradient(135deg, var(--brand), var(--brand-3)); color: #fff; box-shadow: 0 6px 16px var(--brand-glow); } .acct-switch button.active.demo { background: var(--warn); color: #1a1200; box-shadow: 0 6px 16px rgba(245,158,11,.35); } .acct-switch-wrap.sm .acct-switch button { padding: 6px 11px; font-size: 0.78rem; } .acct-hint { font-size: 0.78rem; color: var(--warn-text); background: var(--warn-bg); border: 1px solid rgba(245,158,11,.3); padding: 6px 10px; border-radius: 10px; } .trade-head { flex-direction: column; align-items: stretch; gap: 10px; } .trade-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .order-login.unlock { background: linear-gradient(180deg, rgba(245,196,81,.08), transparent); border-radius: 12px; } .order-login-icon.gold { background: rgba(245,196,81,.15); color: var(--gold); } /* ================================================================ v2: landing */ /* `overflow-x: clip`: the panel's glow (`.hero-panel::before`, inset -40px) used to extend past the viewport at desktop widths, leaving the document 39px wider than the screen — hidden by `body { overflow-x: hidden }` on desktop, but a phantom horizontal scroll on browsers that ignore it, and a shifted frame in every screenshot tool. `clip` cuts it off without creating a scroll container. */ .landing .hero { padding-block: clamp(28px, 6vw, 72px) 10px; overflow-x: clip; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 32px; align-items: center; } .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--brand-text); background: var(--info-bg); padding: 6px 12px; border-radius: 999px; margin-bottom: 14px; letter-spacing: 0.02em; } .hero-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .hero-badges span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-2); border: 1px solid var(--line); background: var(--bg-2); padding: 6px 10px; border-radius: 999px; font-family: var(--font-en); } .hero-panel { position: relative; padding: 16px; border-radius: var(--radius-l); border: 1px solid var(--line); background: linear-gradient(160deg, color-mix(in srgb, var(--bg-2) 92%, var(--brand)), var(--bg-2)); box-shadow: var(--shadow-l), 0 0 0 1px rgba(79,140,255,.05); } .hero-panel::before { content: ""; position: absolute; inset: -40px; background: radial-gradient(400px 220px at 70% 0%, var(--brand-glow), transparent 70%); z-index: -1; filter: blur(30px); opacity: 0.7; } .hero-tickers { display: flex; flex-direction: column; gap: 8px; } .hero-ticker { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-1); color: var(--text); transition: 0.2s; } .hero-ticker:hover { border-color: var(--brand); text-decoration: none; transform: translateX(-2px); } [dir="ltr"] .hero-ticker:hover { transform: translateX(2px); } .hero-ticker-price { font-weight: 700; font-size: 1rem; } .features .feature h3 { font-size: 1.02rem; margin: 0 0 6px; } .section-head { margin-bottom: 14px; } .section-head h2 { margin: 0 0 4px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); } .section-head p { margin: 0; } .steps .step { position: relative; overflow: hidden; } .step-n { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: linear-gradient(135deg, var(--brand), var(--brand-3)); color: #fff; flex: none; font-family: var(--font-en); } .steps .step .icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand-text); flex: none; } .faq { display: flex; flex-direction: column; gap: 8px; } .faq-item { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); overflow: hidden; } .faq-item.open { border-color: var(--line-strong); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: start; padding: 14px 16px; background: transparent; border: 0; color: var(--text); font-weight: 700; font-size: 0.98rem; cursor: pointer; font-family: inherit; } .faq-chev { transition: transform 0.2s; transform: rotate(90deg); flex: none; color: var(--text-3); } .faq-item.open .faq-chev { transform: rotate(-90deg); } .faq-a { padding: 0 16px 14px; color: var(--text-2); font-size: 0.92rem; line-height: 1.75; } .cta-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px; border-radius: var(--radius-l); border: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--bg-2) 85%, var(--brand)), color-mix(in srgb, var(--bg-2) 85%, var(--brand-3))); } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 22px; } .hero-panel::before { display: none; } } /* ================================================================ v2: first-deposit packages */ .offer-card-wrap { border-color: rgba(245,196,81,.35); background: linear-gradient(180deg, rgba(245,196,81,.06), var(--bg-2) 60%); } .offer-timer { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--bg-1); border: 1px solid var(--line); margin-bottom: 14px; color: var(--text-2); font-weight: 600; font-size: 0.9rem; } .offer-timer svg { color: var(--gold); } .offer-timer.ended { color: var(--text-3); } .countdown { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); } .countdown i { color: var(--text-3); font-style: normal; font-weight: 700; } .cd-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; padding: 4px 6px; border-radius: 8px; background: var(--bg-3); border: 1px solid var(--line-strong); line-height: 1.1; } .cd-cell b { font-size: 1.15rem; color: var(--text); } .cd-cell small { font-size: 0.6rem; color: var(--text-3); font-family: var(--font-ar); } .offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .offer-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px 16px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--bg-1); color: var(--text); text-align: center; font-family: inherit; cursor: default; transition: 0.2s; overflow: hidden; } .offer-card.clickable { cursor: pointer; } .offer-card.clickable:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-s); } .offer-card.hot { border-color: rgba(79,140,255,.6); background: linear-gradient(180deg, rgba(79,140,255,.1), var(--bg-1) 70%); } .offer-card.gold { border-color: rgba(245,196,81,.55); background: linear-gradient(180deg, rgba(245,196,81,.12), var(--bg-1) 70%); } .offer-card.selected { outline: 2px solid var(--brand); outline-offset: 1px; } .offer-card.disabled { opacity: 0.55; filter: grayscale(0.4); } .offer-ribbon { position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: 0.66rem; font-weight: 800; padding: 3px 14px; border-radius: 0 0 10px 10px; letter-spacing: 0.02em; white-space: nowrap; } [dir="rtl"] .offer-ribbon { transform: translateX(50%); } .offer-ribbon.gold { background: var(--gold); color: #1a1200; } .offer-amount { display: flex; flex-direction: column; align-items: center; gap: 2px; } .offer-amount small { color: var(--text-3); font-size: 0.75rem; } .offer-amount b { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; } .offer-plus { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 0.82rem; } .offer-plus svg { color: var(--gold); } .offer-bonus { font-size: 1.5rem; font-weight: 800; color: var(--up-text); } .offer-card.gold .offer-bonus { color: var(--gold); } .offer-bonus small { font-size: 0.72rem; color: var(--text-3); font-weight: 600; } .offer-terms { margin: 0; font-size: 0.74rem; color: var(--text-3); line-height: 1.5; } .offer.compact .offer-card { padding: 16px 12px 12px; } @media (max-width: 720px) { .offer-grid { grid-template-columns: 1fr; } .offer-card { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; text-align: start; padding: 24px 14px 12px; gap: 10px; } .offer-card .offer-amount { align-items: flex-start; } .offer-amount b { font-size: 1.4rem; } .offer-bonus { font-size: 1.3rem; } .offer-plus { display: none; } .offer-terms { flex-basis: 100%; } } /* ================================================================ v2: wallet summary */ .wallet-summary .stat.glow { border-color: rgba(79,140,255,.45); background: linear-gradient(180deg, rgba(79,140,255,.1), var(--bg-2) 70%); } @media (max-width: 640px) { .wallet-summary { grid-template-columns: 1fr 1fr; } .wallet-summary > :first-child { grid-column: 1 / -1; } } .adm-bonus { border: 1px solid rgba(245,196,81,.35); background: rgba(245,196,81,.06); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; } .adm-bonus b svg { vertical-align: -3px; color: var(--gold); margin-inline-end: 4px; } .adm-tier { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1); } .adm-tier .field { margin-bottom: 0; } @media (max-width: 720px) { .adm-tier { grid-template-columns: 1fr 1fr; } .adm-tier > :nth-child(3) { grid-column: 1 / -1; } } /* Horizontal-scroll affordance for tab strips and tables on narrow screens */ .tabs { scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { height: 3px; } .tabs::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; } @media (max-width: 640px) { .tabs button { padding: 9px 11px; font-size: 0.88rem; } .trade-page .card { padding: 12px; } }