/* Trading platform — theme tokens ------------------------------------------------------------------ Dark is the base. Light applies when the OS asks for it OR the user flips the in-app switch (which stamps data-theme on ). */ :root { --bg: #0b0e11; --bg-elev: #12161c; --bg-card: #151a21; --border: #232a34; --border-strong: #2f3947; --text: #eaecef; --text-dim: #a7b1bd; --text-mute: #6b7683; --accent: #f0b90b; --accent-hi: #ffc933; --accent-ink: #1c1500; --up: #1fbf75; --down: #f6465d; --focus: rgba(240, 185, 11, 0.28); --void: #05070a; /* area behind the device frame */ --scrim: rgba(0, 0, 0, 0.55); --radius: 12px; --radius-sm: 9px; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color-scheme: dark; } :root[data-theme="light"], :root[data-theme="dark"] { /* explicit choice wins over the OS query below */ } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f4f5f7; --bg-elev: #ffffff; --bg-card: #ffffff; --border: #e6e8ec; --border-strong: #d3d7de; --text: #10131a; --text-dim: #5b6470; --text-mute: #949cab; --focus: rgba(240, 185, 11, 0.35); --up: #14a05a; --down: #e0454b; --void: #e8eaee; --scrim: rgba(15, 20, 30, 0.32); color-scheme: light; } } :root[data-theme="light"] { --bg: #f4f5f7; --bg-elev: #ffffff; --bg-card: #ffffff; --border: #e6e8ec; --border-strong: #d3d7de; --text: #10131a; --text-dim: #5b6470; --text-mute: #949cab; --focus: rgba(240, 185, 11, 0.35); --up: #14a05a; --down: #e0454b; --void: #e8eaee; --scrim: rgba(15, 20, 30, 0.32); color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } .auth-body { font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; } /* --- Shell / split layout ----------------------------------------- */ .auth-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; width: 100%; max-width: 100%; } .auth-shell > * { min-width: 0; } .auth-aside { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 56px; overflow: hidden; background: radial-gradient(900px 500px at 12% -10%, rgba(240, 185, 11, 0.16), transparent 60%), radial-gradient(700px 600px at 100% 110%, rgba(31, 191, 117, 0.10), transparent 55%), linear-gradient(160deg, #0e1319 0%, #0b0e11 60%); border-right: 1px solid var(--border); } .auth-aside::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 46px 46px; opacity: 0.18; mask-image: radial-gradient(700px 500px at 30% 30%, #000 20%, transparent 80%); pointer-events: none; } .auth-aside__inner { position: relative; z-index: 1; max-width: 440px; } .logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; } .logo__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--accent); background: rgba(240, 185, 11, 0.12); border: 1px solid rgba(240, 185, 11, 0.3); } .logo__name { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; } .logo__img { height: 40px; width: auto; display: block; } /* In the aside, the logo sits above the headline */ .auth-aside__inner > .logo { margin-bottom: 64px; } /* Mobile-only logo at the top of the card (hidden on desktop) */ .auth-card__logo { display: none; } .auth-aside__headline { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 16px; } .auth-aside__sub { color: var(--text-dim); font-size: 15px; } .ticker { list-style: none; margin-top: 40px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(18, 22, 28, 0.6); backdrop-filter: blur(4px); overflow: hidden; } .ticker li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 12px 16px; font-size: 13.5px; } .ticker li + li { border-top: 1px solid var(--border); } .ticker span { color: var(--text-mute); font-weight: 500; } .ticker b { font-weight: 600; font-variant-numeric: tabular-nums; } .ticker i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; } .ticker .up { color: var(--up); } .ticker .down { color: var(--down); } .auth-aside__foot { position: relative; z-index: 1; color: var(--text-mute); font-size: 12.5px; } /* --- Form panel -------------------------------------------------- */ .auth-main { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); } .auth-card { width: 100%; max-width: 400px; } .auth-card__head { margin-bottom: 26px; } .auth-card__head h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 7px; } .auth-card__head p { color: var(--text-dim); font-size: 14.5px; } .auth-card__alt { margin-top: 22px; text-align: center; color: var(--text-dim); font-size: 14px; } /* --- Form controls --------------------------------------------- */ .form { display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 13px; font-weight: 500; color: var(--text-dim); } .field__label-row { display: flex; align-items: baseline; justify-content: space-between; } .field__control { position: relative; display: flex; } .field input, .form input[type="email"], .form input[type="text"], .form input[type="password"] { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 14.5px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .field input::placeholder { color: var(--text-mute); } .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); } .field input:-webkit-autofill { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 40px var(--bg-elev) inset; } .field__control input { padding-right: 60px; } /* Split control: input + inline action button (verification code) */ .field__control--split { gap: 8px; } .field__control--split input { padding-right: 14px; } .btn-code { flex-shrink: 0; padding: 0 14px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s, opacity 0.15s; } .btn-code:hover:not(:disabled) { background: var(--accent-hi); } .btn-code:disabled { opacity: 0.55; cursor: not-allowed; } .field__hint { color: var(--text-mute); font-weight: 400; } .reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 9px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text-dim); background: transparent; border: 0; border-radius: 6px; cursor: pointer; } .reveal:hover { color: var(--text); background: var(--border); } .check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-dim); cursor: pointer; } .check input { margin-top: 1px; width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; } /* --- Buttons -------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s, transform 0.05s; } .btn--block { width: 100%; } .btn--primary { color: var(--accent-ink); background: var(--accent); margin-top: 4px; } .btn--primary:hover { background: var(--accent-hi); } .btn--primary:active { transform: translateY(1px); } .btn--ghost { color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border-strong); } .btn--ghost:hover { color: var(--text); border-color: var(--text-mute); } .btn--sm { padding: 8px 12px; font-size: 13px; } /* --- Links --------------------------------------------------- */ .link { color: var(--accent); text-decoration: none; font-weight: 500; } .link:hover { text-decoration: underline; } .link--muted { color: var(--text-mute); font-size: 12.5px; } .link--muted:hover { color: var(--text-dim); } /* --- Alerts ------------------------------------------------- */ .alert { padding: 11px 14px; margin-bottom: 18px; font-size: 13.5px; border-radius: var(--radius-sm); border: 1px solid transparent; } .alert--info { color: #bfe3ff; background: rgba(56, 152, 255, 0.10); border-color: rgba(56, 152, 255, 0.28); } .alert--warning { color: #ffe3a3; background: rgba(240, 185, 11, 0.10); border-color: rgba(240, 185, 11, 0.30); } .alert--success { color: #b9f2d8; background: rgba(31, 191, 117, 0.10); border-color: rgba(31, 191, 117, 0.28); } .alert--error { color: #ffc9d1; background: rgba(246, 70, 93, 0.10); border-color: rgba(246, 70, 93, 0.30); } /* ================================================================ Mobile app shell (authenticated screens) ================================================================ */ /* The shell is a fixed-height column: top bar + scrolling body + bottom nav. Only the body scrolls, so the scrollbar never runs into the nav. */ .appx { font-family: var(--font); color: var(--text); background: var(--void); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow: hidden; } .appx__frame { position: fixed; inset: 0; display: flex; flex-direction: column; margin: 0 auto; background: radial-gradient(60vw 300px at 100% 0, rgba(240,185,11,0.06), transparent 60%), var(--bg); } .appx__topbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(14px, 4vw, 22px); } .appx__subbar { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 12px clamp(10px, 3vw, 16px); border-bottom: 1px solid var(--border); } .appx__back { display: grid; place-items: center; width: 34px; height: 34px; color: var(--text); text-decoration: none; flex-shrink: 0; } .appx__subbar h1 { font-size: 15px; font-weight: 600; text-align: center; flex: 1; /* offset the back button so the title is truly centred */ margin-right: 34px; } .appx__avatar { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); cursor: pointer; } .appx__lang { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: var(--text-dim); background: transparent; border: 0; cursor: pointer; } .appx__caret { font-size: 10px; } /* --- Language switcher ------------------------------------------ */ .langsw { position: relative; } .langsw__btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: var(--text-dim); background: transparent; border: 0; cursor: pointer; } .langsw__globe { flex-shrink: 0; } .langsw__caret { font-size: 10px; transition: transform 0.15s; } .langsw.is-open .langsw__caret { transform: rotate(180deg); } .langsw__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 172px; list-style: none; padding: 6px; margin: 0; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); } .langsw__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; font: inherit; font-size: 13.5px; color: var(--text-dim); text-align: left; background: transparent; border: 0; border-radius: 7px; cursor: pointer; } .langsw__opt:hover { background: var(--border); color: var(--text); } .langsw__opt.is-active { color: var(--accent); } .langsw__flag { width: 20px; height: 14px; flex-shrink: 0; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset; } .langsw__btn .langsw__flag { width: 18px; height: 12.6px; } .auth-main__lang { position: absolute; top: 18px; right: 20px; z-index: 5; display: flex; align-items: center; gap: 12px; } /* --- Strip every trace of the translation engine's own UI ---------- */ #google_translate_element { position: absolute !important; left: -9999px !important; top: 0 !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* classic widget */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon, .goog-te-balloon-frame, .goog-te-spinner-pop, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .jfk-bubble.gtx-bubble, /* current (obfuscated) widget — the top bar, the "Options / Show original" popup */ .VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-l4eHX-hSRGPd, .VIpgJd-ZVi9od-xl07Ob-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, body > iframe.skiptranslate, body > .skiptranslate { display: none !important; visibility: hidden !important; } .goog-te-gadget { height: 0 !important; overflow: hidden !important; font-size: 0 !important; } .goog-text-highlight { background: none !important; box-shadow: none !important; } /* the engine nudges down by the banner height — force it back */ body, html.translated-ltr body, html.translated-rtl body { top: 0 !important; position: static !important; min-height: 0 !important; } html.translated-ltr, html.translated-rtl { margin-top: 0 !important; } font { background: transparent !important; box-shadow: none !important; } .appx__main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 4px clamp(14px, 4vw, 22px) 20px; } .appx__flash { margin-bottom: 14px; } /* --- Hero carousel --------------------------------------------- */ .hero { position: relative; border-radius: var(--radius); overflow: hidden; } .hero__track { display: flex; transition: transform 0.4s ease; } .hero__slide { position: relative; flex: 0 0 100%; min-height: 148px; padding: 22px 20px; display: flex; flex-direction: column; justify-content: center; text-decoration: none; color: #fff; overflow: hidden; } .hero__slide::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(220px 140px at 80% 30%, #000, transparent 75%); opacity: 0.5; } .hero__slide--img { padding: 0; min-height: 0; aspect-ratio: 16 / 9; background: #0d1117; } .hero__img { display: block; width: 100%; height: 100%; object-fit: cover; } .hero__slide--1 { background: linear-gradient(120deg, #0b2a3a, #123f52 55%, #0a1b26); } .hero__slide--2 { background: linear-gradient(120deg, #22203f, #3a2f63 55%, #191634); } .hero__slide--3 { background: linear-gradient(120deg, #143427, #1c5238 55%, #0e2419); } .hero__slide--4 { background: linear-gradient(120deg, #3a2a12, #5a3f18 55%, #241a0c); } .hero__kicker { position: relative; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .hero__title { position: relative; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; max-width: 15ch; } .hero__sub { position: relative; margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,0.72); } .hero__dots { position: absolute; left: 20px; bottom: 12px; display: flex; gap: 6px; } .hero__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; } .hero__dot.is-active { background: #fff; width: 16px; border-radius: 3px; } /* --- Announcement bar ---------------------------------------- */ .notice { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 4px; text-decoration: none; color: var(--text-dim); border-bottom: 1px solid var(--border); } .notice__ico { color: var(--accent); flex-shrink: 0; display: flex; } .notice__more { color: var(--text-mute); flex-shrink: 0; display: flex; padding: 2px; margin: -2px; } .notice__more:active { color: var(--accent); } .notice__scroll { position: relative; flex: 1; min-width: 0; height: 18px; overflow: hidden; font-size: 13px; } .notice__item { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s; color: inherit; text-decoration: none; pointer-events: none; } .notice__item.is-active { opacity: 1; transform: none; pointer-events: auto; } /* --- 3-up ticker -------------------------------------------- */ .ticker3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .ticker3__cell { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; } .ticker3__pair { font-size: 11.5px; color: var(--text-mute); } .ticker3__price { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .ticker3__chg { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .ticker3__chg.is-up { color: var(--up); } .ticker3__chg.is-down { color: var(--down); } /* --- Quick actions ---------------------------------------- */ .quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 18px 0 6px; } .quick__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--text-dim); text-align: center; } .quick__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border); } .quick__label { font-size: 11px; line-height: 1.25; color: var(--text-mute); } /* --- Market list ---------------------------------------- */ .market { margin-top: 22px; } .market__heading { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 16px; font-weight: 700; margin-bottom: 14px; } .market__heading::before, .market__heading::after { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); } .market__heading::after { transform: scaleX(-1); } .market__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; gap: 8px; margin-bottom: 6px; } .market__col { justify-self: start; font-size: 11.5px; color: var(--text-mute); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; } .market__col--chg { justify-self: end; } .market__col.is-active { color: var(--text); border-color: var(--border-strong); } .market__list { padding-bottom: 4px; } .market__list .mrow:last-child { border-bottom: 0; } .mrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: center; gap: 8px; padding: 13px 0; text-decoration: none; border-bottom: 1px solid var(--border); } .mrow__pair { font-size: 14px; display: flex; align-items: center; gap: 9px; min-width: 0; } .mrow__pair b { font-weight: 700; color: var(--text); } .mrow__pair i { font-style: normal; color: var(--text-mute); font-size: 12px; } .coin { position: relative; flex-shrink: 0; display: block; border-radius: 50%; overflow: hidden; } .coin b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; line-height: 1; letter-spacing: -0.03em; } .coin img { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; object-fit: cover; } .mrow__price { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } .mrow__chg { justify-self: end; min-width: 84px; text-align: center; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; border-radius: 6px; padding: 6px 8px; } .mrow__chg.is-up { background: var(--up); } .mrow__chg.is-down { background: var(--down); } .market--page { margin-top: 4px; } .market--page .market__heading { justify-content: center; padding-bottom: 12px; border-bottom: 1px solid var(--up); margin-bottom: 4px; } .market--page .market__heading::before, .market--page .market__heading::after { display: none; } .market__list--full { padding-bottom: 24px; } /* --- Bottom nav ---------------------------------------- */ .botnav { flex-shrink: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bg-elev); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); } .botnav__item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 8px; text-decoration: none; color: var(--text-mute); font-size: 10.5px; font-weight: 500; } .botnav__item.is-active { color: var(--accent); } /* --- Account drawer ----------------------------------------- */ .drawer { position: absolute; inset: 0; z-index: 100; } .drawer[hidden] { display: none; } .drawer__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 0.25s ease; } .drawer.is-open .drawer__scrim { opacity: 1; } .drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(86%, 320px); display: flex; flex-direction: column; padding: 14px 0 24px; background: var(--bg); border-right: 1px solid var(--border); overflow-y: auto; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .drawer.is-open .drawer__panel { transform: none; } .drawer__top { display: flex; justify-content: flex-end; padding: 0 18px; } .drawer__profile { position: relative; margin: 44px 16px 14px; padding: 38px 16px 18px; text-align: center; border-radius: var(--radius); color: #fff; background: transparent center / 100% 100% no-repeat; background-image: url("../img/user_bg_dark.png"); } :root[data-theme="light"] .drawer__profile { background-image: url("../img/user_bg_white.png"); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .drawer__profile { background-image: url("../img/user_bg_white.png"); } } .drawer__avatar { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); z-index: 1; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--text-dim); background: var(--bg-elev); border: 2px solid #fff; } .drawer__idcard { position: relative; z-index: 1; } .drawer__idcard strong { display: block; font-size: 13px; font-weight: 600; color: #fff; word-break: break-all; text-shadow: 0 1px 3px rgba(0,0,0,0.35); } .drawer__idcard span { display: block; font-size: 11.5px; color: rgba(255,255,255,0.85); margin-top: 3px; text-shadow: 0 1px 3px rgba(0,0,0,0.35); } .drawer__menu { display: flex; flex-direction: column; } .drawer__item { display: flex; align-items: center; gap: 14px; padding: 13px 20px; font-size: 13.5px; color: var(--text-dim); text-decoration: none; } .drawer__item:hover { background: var(--bg-elev); color: var(--text); } .drawer__item svg { color: var(--text-mute); flex-shrink: 0; } .drawer__sep { height: 1px; background: var(--border); margin: 8px 20px; } /* --- Theme switch ------------------------------------------ */ .tswitch { display: inline-flex; align-items: center; cursor: pointer; } .tswitch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .tswitch__track { position: relative; display: block; width: 46px; height: 26px; border-radius: 999px; background: var(--border-strong); transition: background 0.2s ease; } .tswitch__thumb { position: absolute; top: 3px; left: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--accent); transition: transform 0.2s ease; } .tswitch input:checked + .tswitch__track { background: #2b2f3a; } .tswitch input:checked + .tswitch__track .tswitch__thumb { transform: translateX(20px); } .tswitch input:focus-visible + .tswitch__track { box-shadow: 0 0 0 3px var(--focus); } .tswitch__moon { display: none; } .tswitch__sun { display: block; } .tswitch input:checked + .tswitch__track .tswitch__moon { display: block; } .tswitch input:checked + .tswitch__track .tswitch__sun { display: none; } .drawer__badge { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .drawer__badge--ok { color: var(--up); background: color-mix(in srgb, var(--up) 16%, transparent); } .drawer__badge--wait { color: var(--accent); background: rgba(240, 185, 11, 0.15); } .drawer__badge--bad { color: var(--down); background: color-mix(in srgb, var(--down) 16%, transparent); } .drawer__badge--muted { color: var(--text-mute); background: var(--bg-elev); } /* --- KYC / identity ------------------------------------------- */ .kyc { padding-top: 6px; } .stepper { list-style: none; display: flex; margin: 6px 0 22px; counter-reset: step; } .stepper__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; font-size: 11.5px; color: var(--text-mute); text-align: center; } .stepper__step::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background: var(--border); } .stepper__step:first-child::before { display: none; } .stepper__dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-elev); border: 1px solid var(--border-strong); font-size: 11px; font-weight: 700; color: var(--text-mute); position: relative; z-index: 1; } .stepper__step.is-active { color: var(--accent); } .stepper__step.is-active .stepper__dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .stepper__step.is-done { color: var(--up); } .stepper__step.is-done .stepper__dot { background: var(--up); border-color: var(--up); color: #fff; } .stepper__step.is-done::before, .stepper__step.is-active::before { background: var(--accent); } .kyc__hint { font-size: 12.5px; color: var(--text-dim); margin: 4px 0 2px; } .kyc__uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .kyc__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 3 / 2; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-mute); cursor: pointer; overflow: hidden; background-size: cover; background-position: center; } .kyc__drop.has-file { border-style: solid; border-color: var(--up); } .kyc__drop.has-file .kyc__drop-ico, .kyc__drop.has-file .kyc__drop-txt { display: none; } .kyc__drop-txt { font-size: 12px; } .kyc__status { text-align: center; padding: 30px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .kyc__badge { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; font-size: 22px; } .kyc__status--ok .kyc__badge { color: var(--up); background: color-mix(in srgb, var(--up) 15%, transparent); } .kyc__status--wait .kyc__badge { color: var(--accent); background: rgba(240, 185, 11, 0.15); } .kyc__status h2 { font-size: 17px; font-weight: 700; margin-bottom: 6px; } .kyc__status p { font-size: 13px; color: var(--text-dim); max-width: 30ch; margin: 0 auto; } /* --- Admin KYC review cards --------------------------------- */ .kadm { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); padding: 14px; margin-bottom: 12px; } .kadm__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .kadm__head strong { font-size: 14px; } .kadm__head span { font-size: 11.5px; color: var(--text-mute); } .kadm__note { color: var(--text-dim) !important; } .kadm__st--approved { color: var(--up); } .kadm__st--rejected { color: var(--down); } .kadm__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .kadm__imgs img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); } .kadm__form { display: flex; flex-direction: column; gap: 8px; } .kadm__form input { width: 100%; padding: 8px 11px; font: inherit; font-size: 13px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .kadm__btns { display: flex; gap: 8px; } .kadm__btns .btn { flex: 1; } .kadm__reject { color: var(--down); } /* --- Account settings --------------------------------------- */ .sett { padding-top: 6px; } .seclvl { display: flex; align-items: center; gap: 16px; padding: 18px 4px 20px; } .seclvl__shield { flex-shrink: 0; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #cfe0ff; background: radial-gradient(circle at 50% 35%, #3a5578, #223349); } .seclvl__body { flex: 1; min-width: 0; } .seclvl__head { font-size: 12.5px; color: var(--text-dim); } .seclvl__note { font-size: 11px; color: var(--text-mute); margin-top: 6px; } .seclvl__tag { font-weight: 700; text-transform: capitalize; } .seclvl__tag--low { color: #f6912e; } .seclvl__tag--medium { color: var(--accent); } .seclvl__tag--high { color: var(--up); } .seclvl__bar { margin-top: 8px; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; } .seclvl__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2f8fff, #59a7ff); transition: width 0.4s ease; } .secrow__list { list-style: none; } .secrow { border-top: 1px solid var(--border); } .secrow:last-child { border-bottom: 1px solid var(--border); } .secrow__main { display: flex; align-items: center; gap: 9px; padding: 15px 2px; font-size: 13.5px; } .secrow__ico { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-size: 11px; color: #fff; flex-shrink: 0; } .secrow__ico.is-ok { background: var(--up); } .secrow__ico.is-bad { background: var(--down); } .secrow__label { color: var(--text); white-space: nowrap; } .secrow__value { flex: 1; min-width: 0; text-align: center; font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .secrow__act { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px; color: var(--accent); background: transparent; border: 0; cursor: pointer; white-space: nowrap; } /* the invitation action label is long — hide the words on small screens, the grid icon still communicates it and the panel has copy buttons */ @media (max-width: 420px) { .secrow__act-txt { display: none; } } .secrow__panel { padding: 4px 2px 18px; } .secrow__qr { width: 168px; margin: 6px auto 12px; background: #fff; padding: 8px; border-radius: 8px; } .secrow__qr svg { display: block; width: 100%; height: auto; } .secrow__qractions { display: flex; gap: 8px; justify-content: center; } .secform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .secform label { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-mute); flex: 1; min-width: 120px; } .secform input { padding: 9px 11px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .secform .btn { flex-shrink: 0; } .secform__hint { font-size: 11px; color: var(--text-mute); margin-top: 8px; } /* --- Long-form document (About, terms, etc.) --------------------- */ .doc { padding: 8px 0 8px; font-size: 13.5px; color: var(--text-dim); line-height: 1.7; } .doc__title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 14px; } .doc h2 { font-size: 15px; font-weight: 600; color: var(--text); margin: 22px 0 8px; } .doc p { margin-bottom: 12px; } .doc strong { color: var(--text); font-weight: 600; } .doc__list { list-style: none; margin: 0 0 12px; } .doc__list li { position: relative; padding-left: 16px; margin-bottom: 8px; } .doc__list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } .doc__contact { margin-top: 20px; } .doc__meta { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--text-mute); } /* --- Help Center ------------------------------------------- */ .help { padding-top: 4px; } .help__intro { font-size: 12.5px; color: var(--text-mute); margin-bottom: 12px; } .help__list { list-style: none; } .help__list li { border-bottom: 1px solid var(--border); } .help__list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 2px; font-size: 13.5px; color: var(--text); text-decoration: none; } .help__list a svg { color: var(--text-mute); flex-shrink: 0; } .help__date { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; color: var(--text-mute); } .help__list a:active { color: var(--accent); } .help__foot { margin-top: 20px; font-size: 12px; color: var(--text-mute); } .help__foot a { color: var(--accent); } .adm__code { width: 100%; padding: 10px 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); resize: vertical; } /* --- Loan application --------------------------------------- */ .loan { padding-top: 6px; } .loan__uploads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .loan__uploads .kyc__drop { aspect-ratio: 1 / 1; } .loan__uploads .kyc__drop-txt { font-size: 11px; } .loan__status { text-align: center; padding: 24px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); margin-bottom: 18px; } .loan__status h2 { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .loan__status p { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; } .loan__status--ok h2 { color: var(--up); } .loan__status--wait h2 { color: var(--accent); } .loan__warn { margin-top: 10px !important; font-size: 12px !important; color: var(--down) !important; } .loan__desc { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); } .loan__history { margin-top: 20px; } .kadm__imgs--3 { grid-template-columns: repeat(3, 1fr); } .kadm__imgs--review img { aspect-ratio: auto; object-fit: contain; max-height: 420px; background: var(--bg-elev, #0e1116); } /* --- IEO / subscription ------------------------------------- */ .ieo { padding-top: 6px; } .ieo__bar { text-align: right; margin-bottom: 12px; font-size: 12.5px; } .ieocard { display: block; padding: 14px; margin-bottom: 12px; border-radius: var(--radius); text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--up) 8%, var(--bg-card)); border: 1px solid var(--border); } .ieocard__top { display: flex; align-items: center; gap: 10px; } .ieocard__logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--accent-ink); background: var(--accent); } .ieocard__name { font-size: 14px; font-weight: 600; flex: 1; } .ieocard__name i { font-style: normal; font-size: 11px; color: var(--text-mute); font-weight: 500; } .ieocard__cta { font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 7px; color: #fff; background: var(--accent); } .ieocard__cta--ended { background: var(--text-mute); } .ieocard__cta--upcoming { background: var(--border-strong); color: var(--text-dim); } .ieocard__chip { display: inline-block; margin-top: 10px; font-size: 11px; color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 2px 8px; } .ieocard__meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-mute); margin: 10px 0 6px; } .ieocard__bar { height: 16px; border-radius: 4px; background: var(--border); overflow: hidden; } .ieocard__bar span { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding-right: 6px; font-size: 10px; font-weight: 700; color: #fff; background: var(--accent); min-width: 1px; } .ieocard__bar--wide { height: 18px; margin: 14px 0; } /* detail */ .iewin { font-size: 12px; color: var(--up); line-height: 1.9; margin-bottom: 16px; } .iewin strong { color: var(--up); } .ieo__title { font-size: 16px; font-weight: 700; margin-bottom: 12px; } .ieo__title span { color: var(--text-mute); font-weight: 500; font-size: 13px; } .iespecs { border-top: 1px solid var(--border); } .iespecs > div { display: flex; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--border); font-size: 13px; } .iespecs span { color: var(--text-mute); } .iespecs b { color: var(--up); font-weight: 600; } .ielinks { display: flex; gap: 18px; margin: 14px 0 4px; font-size: 12.5px; } .ietabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 16px 0 14px; } .ietabs__tab { font: inherit; font-size: 13px; padding: 8px 14px; border: 0; border-radius: 7px 7px 0 0; background: transparent; color: var(--text-dim); cursor: pointer; } .ietabs__tab.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .ietab__prose { font-size: 13px; color: var(--text-dim); line-height: 1.7; } .ieop { margin-top: 18px; } .ieop__head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 12px; } .ieop__head span:last-child { color: var(--text-mute); } .ieop__form { display: flex; flex-direction: column; gap: 12px; } .ieop__select, .ieop__qty { width: 100%; padding: 12px 14px; font: inherit; font-size: 14px; color: var(--text); background: color-mix(in srgb, var(--up) 6%, var(--bg-elev)); border: 1px solid var(--border); border-radius: var(--radius-sm); } .ieop__select:disabled, .ieop__qty:disabled { opacity: 0.6; } .ieop__line { font-size: 12.5px; color: var(--text-dim); } .ieop__line b { color: var(--text); } .btn.is-disabled { background: var(--accent); opacity: 0.65; cursor: not-allowed; } /* purchase records */ .prlist { list-style: none; } .prcard { padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .prcard__row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; } .prcard__row strong { font-size: 13.5px; } .prcard time { font-size: 11px; color: var(--text-mute); } .prcard__st { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; text-transform: capitalize; color: var(--accent); background: rgba(240, 185, 11, 0.15); } .prcard__st--allocated, .prcard__st--confirmed { color: var(--up); background: color-mix(in srgb, var(--up) 15%, transparent); } .prcard__st--rejected { color: var(--down); background: color-mix(in srgb, var(--down) 15%, transparent); } /* --- Trading log ------------------------------------------- */ .tlog { padding-top: 4px; } .tlog__tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--up); margin-bottom: 8px; } .tlog__tabs::-webkit-scrollbar { display: none; } .tlog__tab { flex-shrink: 0; padding: 8px 14px; font-size: 13px; color: var(--text-dim); text-decoration: none; border-radius: 7px 7px 0 0; } .tlog__tab.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .tlog__scroll { overflow-x: auto; } .tlog__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; min-width: 340px; padding: 12px 2px; border-bottom: 1px solid var(--border); } .tlog__grid--head { border-bottom: 1px solid var(--border-strong); } .tlog__grid--head .tlog__cell span { color: var(--up); font-size: 12px; } .tlog__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .tlog__cell span { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tlog__cell span + span { color: var(--text-mute); font-size: 11.5px; } .tlog__cell .is-up { color: var(--up); } .tlog__cell .is-down { color: var(--down); } .tlog__empty { padding: 30px 0; text-align: center; font-size: 12.5px; color: var(--text-mute); } .tlog__foot { padding: 12px 0; text-align: center; font-size: 11px; color: var(--text-mute); } /* --- Pager (shared) ---------------------------------------- */ .pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 0 4px; font-size: 12.5px; } .pager__btn { padding: 7px 14px; color: var(--text-dim); text-decoration: none; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 7px; } .pager__btn.is-off { opacity: 0.4; pointer-events: none; } .pager__at { color: var(--text-mute); font-variant-numeric: tabular-nums; } /* ================================================================ Wallet ================================================================ */ .wal { padding-top: 6px; } .wal__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .wal__head h1 { font-size: 19px; font-weight: 700; } .wal__head .link { font-size: 12.5px; } .wal__totals { padding: 14px; margin-bottom: 14px; border-radius: var(--radius); background: linear-gradient(160deg, #1c3a52, #16283a); color: #dceaf7; } .wal__totals p { font-size: 12.5px; margin-bottom: 4px; } .wal__totals b { font-size: 15px; color: #fff; margin-left: 4px; } .wal__list { list-style: none; } .wal__coin { display: grid; grid-template-columns: 30px 1fr auto 16px; align-items: center; gap: 12px; padding: 13px 2px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); } .wal__name strong { display: block; font-size: 14px; } .wal__name span { font-size: 11.5px; color: var(--text-mute); } .wal__val { text-align: right; } .wal__val span { font-size: 12.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .wal__val i { display: block; font-style: normal; font-size: 10px; color: var(--accent); } .wal__chev { color: var(--text-mute); } /* coin page */ .wcoin { padding-top: 4px; } .wcoin__top { display: flex; align-items: center; gap: 10px; padding: 8px 0 14px; } .wcoin__top strong { display: block; font-size: 15px; } .wcoin__top span { font-size: 11.5px; color: var(--text-mute); } .wcoin__empty, .wcoin__note, .wcoin__hint { font-size: 12px; color: var(--text-mute); text-align: center; padding: 8px 0; } .wcoin__note { color: var(--text-dim); text-align: left; } .wcoin__hint { text-align: left; } .wtabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 16px; } .wtabs__t { flex: 1; text-align: center; padding: 10px 4px; font-size: 13px; color: var(--text-mute); text-decoration: none; border-bottom: 2px solid transparent; } .wtabs__t.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .wdep { text-align: center; } .wdep__qr { width: 170px; margin: 4px auto 8px; padding: 8px; background: #fff; border-radius: 8px; } .wdep__qr svg { display: block; width: 100%; height: auto; } .wdep__net { font-size: 11px; color: var(--accent); margin-bottom: 14px; } .wform { display: flex; flex-direction: column; gap: 12px; text-align: left; } .wform__avail { font-size: 11.5px; color: var(--text-mute); } .wform__avail b { color: var(--text-dim); } .wform__lines { list-style: none; font-size: 12px; color: var(--text-mute); } .wform__lines li { display: flex; justify-content: space-between; padding: 3px 0; } .wform__lines b { color: var(--text-dim); font-weight: 600; } .wfield { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--text-mute); } .wfield > span:first-child b { color: var(--down); } .wfield input, .wfield select { width: 100%; padding: 10px 11px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .wfield__copy, .wfield__wrap { position: relative; display: flex; gap: 8px; } .wfield__copy input { flex: 1; } .wfield__wrap input { flex: 1; padding-right: 52px; } .wfield__max { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 11px; font-weight: 700; color: var(--accent); background: transparent; border: 0; cursor: pointer; } /* withdraw locked (low credit score / no KYC) */ .wlock { display: flex; gap: 11px; padding: 13px 14px; margin-bottom: 14px; background: color-mix(in srgb, var(--down) 9%, transparent); border: 1px solid color-mix(in srgb, var(--down) 30%, transparent); border-radius: var(--radius-sm); } .wlock__ic { color: var(--down); flex-shrink: 0; margin-top: 1px; } .wlock__body { font-size: 12px; color: var(--text-mute); } .wlock__body strong { display: block; font-size: 13px; color: var(--text); margin-bottom: 3px; } .wlock__body p { margin: 2px 0; } .wlock__body b { color: var(--text-dim); } .wlock__score { color: var(--down); } .wlock__hint { font-size: 11px; } .wform.is-locked { opacity: 0.45; pointer-events: none; filter: grayscale(0.4); } /* coin picker (icon dropdown) */ .wpick { position: relative; } .wpick__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; } .wpick__val { display: flex; align-items: center; gap: 8px; min-height: 22px; font-weight: 600; } .wpick__ph { color: var(--text-mute); font-weight: 400; } .wpick__btn svg { color: var(--text-mute); flex-shrink: 0; } .wpick__menu { list-style: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; max-height: 244px; overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,0.4); } .wpick__opt { display: flex; align-items: center; gap: 9px; padding: 9px 11px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; } .wpick__opt:hover, .wpick__opt.is-active { background: var(--bg-hover, rgba(255,255,255,0.05)); } .wpick__opt .coin, .wpick__val .coin { flex-shrink: 0; } /* filter chips (transaction lists) */ .chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 4px 0 12px; padding-bottom: 2px; } .chips::-webkit-scrollbar { display: none; } .chips__c { flex-shrink: 0; padding: 6px 13px; font-size: 12px; font-weight: 600; color: var(--text-mute); text-decoration: none; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 999px; } .chips__c.is-active { color: var(--accent-ink, #0b0e11); background: var(--accent); border-color: var(--accent); } /* wallet records */ .wrec { list-style: none; } .wrec__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--border); font-size: 12.5px; } .wrec__row strong { font-size: 13px; } .wrec__row span { display: block; font-size: 10.5px; color: var(--text-mute); } .wrec__amt { text-align: right; } .wrec__amt b { display: block; font-variant-numeric: tabular-nums; } .wrec__st { font-style: normal; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; } .wrec__st--pending { color: var(--accent); background: rgba(240,185,11,0.15); } .wrec__st--completed { color: var(--up); background: color-mix(in srgb, var(--up) 15%, transparent); } .wrec__st--rejected { color: var(--down); background: color-mix(in srgb, var(--down) 15%, transparent); } /* --- Flash Exchange -------------------------------------- */ .flx { padding-bottom: 8px; } .flx__label { margin: 14px 2px 8px; font-size: 12px; color: var(--text-mute); } .flx__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .flx__coin { position: relative; display: flex; align-items: center; gap: 7px; padding: 9px 10px; font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; } .flx__coin .coin { flex-shrink: 0; } .flx__coin span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flx__coin.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .flx__tick { position: absolute; top: 0; right: 0; width: 15px; height: 15px; padding: 2px; color: #0b0e11; background: var(--accent); border-radius: 0 0 0 7px; } .flx__panel { margin-top: 16px; padding: 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .flx__head strong { font-size: 13.5px; } .flx__head span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-mute); } .flx__head b { color: var(--text-dim); font-variant-numeric: tabular-nums; } .flx__form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; } .flx__bal { font-size: 11.5px; color: var(--text-mute); } .flx__bal b { color: var(--text-dim); } .flx__amt { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .flx__amt input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); } .flx__amt input:focus { outline: none; } .flx__unit { font-size: 12px; font-weight: 700; color: var(--text-mute); } .flx__all { font: inherit; font-size: 11px; font-weight: 700; padding: 6px 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 0; border-radius: 6px; cursor: pointer; } .flx__est { font-size: 12px; color: var(--text-mute); } .flx__est b { color: var(--text); font-variant-numeric: tabular-nums; } .flx__est span { font-size: 10.5px; } .flx__records { margin-top: 22px; } .flx__records h2 { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 4px; } .flx__records h2 .link { font-size: 11.5px; font-weight: 500; } .flx__empty { padding: 22px 0; text-align: center; font-size: 12px; color: var(--text-mute); } /* --- Star Pool -------------------------------------------- */ .star { padding-top: 4px; font-size: 13px; } .star__intro { color: var(--text-mute); line-height: 1.65; margin-bottom: 14px; } .star__intro strong { color: var(--text-dim); } .star__card { display: flex; gap: 10px; margin-bottom: 12px; } .star__now { flex: 1; padding: 12px 13px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .star__now span { display: block; font-size: 10.5px; color: var(--text-mute); margin-bottom: 4px; } .star__now strong { font-size: 14px; } .star__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; text-align: center; } .star__stats div { padding: 10px 4px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); } .star__stats b { display: block; font-size: 15px; font-variant-numeric: tabular-nums; } .star__stats span { font-size: 10px; color: var(--text-mute); } .star h2 { font-size: 14px; font-weight: 600; color: var(--text); margin: 20px 0 10px; } .star__gate { margin-bottom: 12px; } .star__gate-row { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-mute); margin-bottom: 5px; } .star__gate.is-met .star__gate-row span:last-child { color: var(--up); } .star__bar { height: 6px; background: var(--bg-elev); border-radius: 999px; overflow: hidden; } .star__bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .star__gate.is-met .star__bar i { background: var(--up); } .star__max { padding: 12px; text-align: center; color: var(--up); background: color-mix(in srgb, var(--up) 10%, transparent); border-radius: var(--radius-sm); } .star__scroll { overflow-x: auto; } .star__table { width: 100%; border-collapse: collapse; font-size: 11.5px; white-space: nowrap; } .star__table th, .star__table td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--border); } .star__table th:first-child, .star__table td:first-child { text-align: left; } .star__table th { color: var(--text-mute); font-weight: 500; } .star__table tr.is-current td { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); } .star__empty { padding: 20px 0; text-align: center; color: var(--text-mute); font-size: 12px; } .adm__inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .adm__hint, .adm__inline .adm__hint { font-size: 11px; color: var(--text-mute); } .star-adm { margin-bottom: 14px; } .star-adm__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .star-adm__grid label { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--text-mute); } .star-adm__grid input { padding: 7px 9px; font-size: 12px; } /* --- My team ---------------------------------------------- */ .team { padding-top: 6px; } .team__qr { width: 150px; margin: 14px auto 0; padding: 8px; background: #fff; border-radius: 8px; } .team__qr svg { display: block; width: 100%; height: auto; } .team__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; } .team__stat { text-align: center; padding: 14px 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .team__stat b { display: block; font-size: 19px; font-weight: 700; } .team__stat span { font-size: 11px; color: var(--text-mute); } .team__reward { font-size: 22px; font-weight: 700; margin: 4px 0 6px; } .team__reward b { color: var(--accent); } .teamlist { list-style: none; } .teamlist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; } .teamlist li + li { border-top: 1px solid var(--border); } .teamlist strong { display: block; font-size: 13px; } .teamlist span { font-size: 11px; color: var(--text-mute); } /* ================================================================ Trading (Exchange / Derivatives / Options) ================================================================ */ .trhead { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 11px clamp(12px, 4vw, 18px); border-bottom: 1px solid var(--border); } .trhead__back, .trhead__menu, .trhead__chart { display: grid; place-items: center; color: var(--text-dim); background: transparent; border: 0; cursor: pointer; text-decoration: none; flex-shrink: 0; } .trhead__back { margin-left: -4px; } .trhead__pair { font-size: 15px; font-weight: 700; } .trhead__chg { font-size: 12.5px; font-weight: 600; } .trhead__chg.is-up { color: var(--up); } .trhead__chg.is-down { color: var(--down); } .trhead__chart { margin-left: auto; } .trmodes { flex-shrink: 0; display: flex; border-bottom: 1px solid var(--border); } .trmodes__tab { flex: 1; text-align: center; padding: 11px 4px; font-size: 12.5px; color: var(--text-mute); text-decoration: none; border-bottom: 2px solid transparent; } .trmodes__tab.is-active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; } .trbody { padding: 12px clamp(12px, 4vw, 16px) 20px; } .trbody__flash { margin-bottom: 12px; } /* options: fill the height so Rise/Fall pins to the very bottom */ .trbody--options { display: flex; flex-direction: column; min-height: 100%; } .trbody--options .trlist { flex: 1 1 auto; } .trgrid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 12px; } /* order book */ .obook { font-size: 11px; font-variant-numeric: tabular-nums; } .obook__row { display: flex; justify-content: space-between; padding: 3px 0; } .obook__row span { color: var(--up); } .obook__side--ask .obook__row span { color: var(--down); } .obook__row b { color: var(--text-dim); font-weight: 500; } .obook__mid { text-align: center; padding: 8px 0; font-size: 17px; font-weight: 700; color: var(--up); } .obook__mid span { display: block; font-size: 10px; font-weight: 400; color: var(--text-mute); } /* forms */ .trpanel { display: flex; flex-direction: column; gap: 12px; } .seg { display: flex; gap: 4px; } .seg__btn { flex: 1; padding: 7px 6px; font: inherit; font-size: 12.5px; color: var(--text-mute); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .seg__btn.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 600; } .seg--pill .seg__btn { border-radius: 999px; } .trform { display: flex; flex-direction: column; gap: 9px; } .trform__avail { font-size: 11px; color: var(--text-mute); } .trform__avail b { color: var(--text-dim); } .trform__note { font-size: 10.5px; color: var(--text-mute); } .trfield { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-mute); } .trfield input, .trfield select { width: 100%; padding: 9px 10px; font: inherit; font-size: 13px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 7px; } .trfield__wrap { position: relative; display: flex; } .trfield__wrap input { padding-right: 44px; } .trfield__wrap i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11px; color: var(--text-mute); } .trfield__price[readonly] { color: var(--text-mute); } .trslider { width: 100%; accent-color: var(--accent); } .trstats { list-style: none; font-size: 11px; color: var(--text-mute); } .trstats li { display: flex; justify-content: space-between; padding: 3px 0; } .trstats b { color: var(--text-dim); font-weight: 600; } .trbtn { padding: 11px; font-size: 13.5px; font-weight: 600; color: #fff; border: 0; border-radius: 8px; cursor: pointer; } .trbtn--green { background: var(--up); } .trbtn--red { background: var(--down); } .trbtn:not(.trbtn--green):not(.trbtn--red) { background: var(--accent); color: var(--accent-ink); } /* delegate / positions / options list */ .trlist { margin-top: 20px; } .trlist__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--up); margin-bottom: 8px; } .trlist__tab { font: inherit; font-size: 12.5px; padding: 7px 12px; border: 0; cursor: pointer; background: transparent; color: var(--text-dim); border-radius: 6px 6px 0 0; } .trlist__tab.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .trlist__tab em { font-style: normal; font-size: 10px; opacity: 0.7; margin-left: 2px; } .trlist__head, .trlist__row { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 8px; padding: 9px 2px; font-size: 11.5px; align-items: center; } .trlist__head { color: var(--up); border-bottom: 1px solid var(--border); } .trlist__row { border-bottom: 1px solid var(--border); } .trlist__row div b { display: block; color: var(--text); } .trlist__row div span { color: var(--text-mute); font-size: 10.5px; } .trlist__row .is-up { color: var(--up); } .trlist__row .is-down { color: var(--down); } .trlist__cancel { font: inherit; font-size: 11px; padding: 5px 10px; cursor: pointer; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 6px; } .trlist__ok { color: var(--up); font-size: 11px; } .trlist__cd { display: block; height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; } .trlist__cd i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; } .trlist__pnl b { display: block; } .trlist__pnl span { color: var(--text-mute); font-size: 10.5px; } .trlist__empty { text-align: center; padding: 18px 0; font-size: 12px; color: var(--text-mute); } .trlist__all { display: block; text-align: center; padding: 12px 0 4px; font-size: 12px; color: var(--accent); text-decoration: none; } /* chart */ .trchart { margin-bottom: 8px; } .trchart--stick { position: sticky; top: 0; z-index: 6; margin: -12px calc(clamp(12px, 4vw, 16px) * -1) 8px; padding: 10px clamp(12px, 4vw, 16px) 6px; background: var(--bg); border-bottom: 1px solid var(--border); } .trchart__tf { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; } .trchart__tf::-webkit-scrollbar { display: none; } .trchart__tfbtn { flex-shrink: 0; font: inherit; font-size: 11.5px; padding: 5px 10px; cursor: pointer; background: var(--bg-elev); color: var(--text-mute); border: 1px solid var(--border); border-radius: 6px; } .trchart__tfbtn.is-active { color: var(--accent); border-color: var(--accent); } .trchart__box { width: 100%; height: 240px; } /* --- Options chart (TradingView, full-bleed) ------------------ */ .ochart { position: sticky; top: 0; z-index: 6; margin: -12px calc(clamp(12px, 4vw, 16px) * -1) 0; background: var(--bg); } .ochart__tf { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px clamp(12px, 4vw, 16px); border-bottom: 1px solid var(--border); } .ochart__tf::-webkit-scrollbar { display: none; } .ochart__tfbtn { flex-shrink: 0; font: inherit; font-size: 11.5px; padding: 4px 8px; background: transparent; color: var(--text-mute); border: 0; cursor: pointer; } .ochart__tfbtn.is-active { color: var(--accent); font-weight: 600; } .ochart__box { width: 100%; height: 270px; } .ochart__box iframe { width: 100% !important; height: 100% !important; } .obar { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .obar__price { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .obar__price.is-up { color: var(--up); } .obar__price.is-down { color: var(--down); } .obar__bal { font-size: 11px; color: var(--text-mute); text-align: right; } .obar__bal b { color: var(--text-dim); font-size: 13px; } /* --- Options purchase sheet + tiers -------------------------- */ .trfield__lbl { font-size: 12px; color: var(--text-dim); } .tropt__err { font-size: 12px; color: var(--down); background: color-mix(in srgb, var(--down) 12%, transparent); border: 1px solid color-mix(in srgb, var(--down) 30%, transparent); border-radius: 6px; padding: 8px 10px; } .otiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .otiers__t { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font: inherit; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .otiers__t b { font-size: 12px; color: var(--text); } .otiers__t i { font-style: normal; font-size: 10px; color: var(--text-mute); } .otiers__t.is-active { background: #2f8fff; border-color: #2f8fff; } .otiers__t.is-active b, .otiers__t.is-active i { color: #fff; } /* --- Settlement modal ---------------------------------------- */ .osettle { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--scrim); padding: 20px; } .osettle[hidden] { display: none; } .osettle__box { position: relative; width: 100%; max-width: 360px; background: #fff; color: #1a1d21; border-radius: 14px; padding: 22px 18px 18px; text-align: center; } .osettle__x { position: absolute; top: -14px; right: -6px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.25); color: #fff; border: 0; font-size: 18px; cursor: pointer; } .osettle__pair { font-size: 14px; font-weight: 600; padding-bottom: 14px; border-bottom: 1px solid #eee; } .osettle__ring { position: relative; width: 180px; height: 180px; margin: 16px auto; } .osettle__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .osettle__track { fill: none; stroke: #eee; stroke-width: 6; } .osettle__prog { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; } .osettle__num { position: absolute; inset: 0; display: grid; place-content: center; } .osettle__num b { font-size: 40px; font-weight: 700; color: var(--accent); } .osettle__num span { font-size: 13px; color: #f6465d; } .osettle__tbl { width: 100%; font-size: 11px; margin: 6px 0 14px; border-collapse: collapse; } .osettle__tbl th { color: #98a0ae; font-weight: 400; padding: 4px 3px; } .osettle__tbl td { padding: 6px 3px; font-weight: 600; } .osettle__dir { color: var(--up); } .osettle__pnl.is-up { color: var(--up); } .osettle__pnl.is-down { color: var(--down); } .osettle__box .trbtn { background: var(--accent); color: var(--accent-ink); } /* options rise/fall — pinned flush above the bottom nav */ .tropt__cta { position: sticky; bottom: 0; z-index: 6; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px calc(clamp(12px, 4vw, 16px) * -1) -20px; padding: 7px clamp(12px, 4vw, 16px) calc(7px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--border); } .tropt__cta .trbtn { padding: 9px; font-size: 13.5px; border-radius: 6px; } .tropt__sheet { position: fixed; inset: 0; z-index: 80; } .tropt__sheet[hidden] { display: none; } .tropt__scrim { position: absolute; inset: 0; background: var(--scrim); } .tropt__panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; gap: 11px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--bg-card); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4); } .tropt__title { font-size: 15px; font-weight: 700; } .tropt__x { position: absolute; top: 10px; right: 12px; width: 28px; height: 28px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--text-mute); background: transparent; border: 0; cursor: pointer; } .tropt__x:hover { color: var(--text); } /* pair picker sheet */ .pairsheet { position: absolute; inset: 0; z-index: 90; } .pairsheet[hidden] { display: none; } .pairsheet__scrim { position: absolute; inset: 0; background: var(--scrim); } .pairsheet__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(84%, 320px); background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; } .pairsheet__head { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; padding: 14px 16px 10px; font-size: 11px; color: var(--text-mute); } .pairsheet__head span:first-child { grid-column: 1 / -1; font-size: 13px; color: var(--text); font-weight: 600; } .pairsheet__row { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; font-size: 12.5px; color: var(--text); border-top: 1px solid var(--border); } .pairsheet__row b { font-weight: 600; font-variant-numeric: tabular-nums; } .pairsheet__row i { font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; } .pairsheet__row .is-up { color: var(--up); } .pairsheet__row .is-down { color: var(--down); } @media (max-width: 360px) { .trgrid { grid-template-columns: 1fr; } } /* --- Account + placeholder pages ---------------------------- */ .acct { padding-top: 6px; } .acct__head { display: flex; align-items: center; gap: 12px; padding: 8px 0 18px; } .acct__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); flex-shrink: 0; } .acct__head strong { display: block; font-size: 14.5px; } .acct__head span { font-size: 12.5px; color: var(--text-mute); } .soon { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 64px 20px; } .soon__ico { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--accent); background: rgba(240,185,11,0.1); border: 1px solid rgba(240,185,11,0.3); margin-bottom: 6px; } .soon h1 { font-size: 19px; font-weight: 700; } .soon p { font-size: 13px; color: var(--text-mute); max-width: 26ch; } .soon .btn { margin-top: 8px; } /* --- Admin (interim) ---------------------------------------- */ .adm { padding-top: 8px; } .adm__head { margin-bottom: 16px; } .adm__h1 { font-size: 20px; font-weight: 700; margin: 6px 0 2px; } .adm__sub { font-size: 12.5px; color: var(--text-mute); } .adm__grid { display: grid; gap: 10px; margin: 16px 0 20px; } .adm__card { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); text-decoration: none; color: var(--text); } .adm__card strong { display: block; font-size: 14px; } .adm__card span { font-size: 12px; color: var(--text-mute); } .adm__card.is-soon { opacity: 0.5; } .adm__upload { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); margin-bottom: 20px; } .adm__upload input[type="file"] { font-size: 12.5px; color: var(--text-dim); } .adm__upload input[type="text"] { width: 100%; padding: 9px 12px; font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .adm__list { display: flex; flex-direction: column; gap: 10px; } .bcard { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); } .bcard.is-hidden { opacity: 0.5; } .bcard__thumb { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--bg-elev); display: grid; place-items: center; } .bcard__thumb img { width: 100%; height: 100%; object-fit: cover; } .bcard__thumb span { font-size: 10px; color: var(--text-mute); } .bcard__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bcard__meta strong { font-size: 13px; } .bcard__meta span { font-size: 10.5px; color: var(--text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bcard__state { color: var(--text-dim) !important; } .bcard__actions { grid-column: 1 / -1; display: flex; gap: 8px; } .bcard__actions form { flex: 1; } .bcard__actions .btn { width: 100%; } .bcard__del { color: var(--down); } .panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); padding: 20px; margin-bottom: 18px; } .panel__title { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .panel__count { font-size: 12px; font-weight: 600; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; } .panel__hint { font-size: 13px; color: var(--text-mute); margin: 6px 0 14px; } .refcode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .refcode--link { margin-top: 6px; } .refcode__value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 14px; } .refcode__link-label { display: block; font-size: 12px; color: var(--text-dim); margin: 16px 0 0; } .refcode__input { flex: 1; min-width: 200px; padding: 9px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .reflist { list-style: none; } .reflist li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13.5px; } .reflist li + li { border-top: 1px solid var(--border); } .reflist time { color: var(--text-mute); font-size: 12.5px; } /* --- Responsive ------------------------------------------- */ @media (max-width: 900px) { .auth-shell { grid-template-columns: minmax(0, 1fr); } .auth-aside { display: none; } .auth-main { padding: 32px 20px; min-height: 100vh; } .auth-card { max-width: 380px; } .auth-card__logo { display: flex; justify-content: center; margin-bottom: 14px; } .auth-card__logo .logo__mark { width: 64px; height: 64px; } .auth-card__logo .logo__name { font-size: 30px; } .auth-card__logo .logo__img { height: 82px; } .auth-card__head { margin-bottom: 20px; } .auth-main { padding: 24px 20px; } } /* Large phones / small tablets: give the market rows a bit more room */ @media (min-width: 480px) { .ticker3__price { font-size: 16px; } .mrow__pair { font-size: 15px; } .mrow__price { font-size: 15px; } .quick__ico { width: 48px; height: 48px; } .hero__title { font-size: 23px; } } /* Tablet / desktop: centre the shell as a device frame (until dedicated wide layouts are designed). */ @media (min-width: 640px) { .appx { background: var(--void); } .appx__frame { inset: 24px 0; width: 460px; max-width: calc(100vw - 32px); border: 1px solid var(--border-strong); border-radius: 22px; overflow: hidden; } } /* ============================================================ Management console ============================================================ */ /* theme switch (shared by console auth + shell) */ .themesw { display: inline-flex; cursor: pointer; } .themesw input { position: absolute; opacity: 0; width: 0; height: 0; } .themesw__track { width: 40px; height: 22px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 999px; display: flex; align-items: center; padding: 2px; transition: background 0.2s; } .themesw__thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text-mute); transition: transform 0.2s, background 0.2s; } .themesw input:checked + .themesw__track { background: color-mix(in srgb, var(--accent) 24%, transparent); } .themesw input:checked + .themesw__track .themesw__thumb { transform: translateX(18px); background: var(--accent); } /* --- console login ------------------------------------------ */ .cauth-body { margin: 0; background: var(--bg); color: var(--text); } .cauth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%), var(--bg); } .cauth__tools { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 12px; } .cauth__card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 30px 26px 24px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5); } .cauth__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .cauth__brand .logo { pointer-events: none; } .cauth__tag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 5px; padding: 2px 6px; } .cauth__title { font-size: 19px; font-weight: 700; margin: 0 0 4px; } .cauth__sub { font-size: 12.5px; color: var(--text-mute); margin: 0 0 20px; } .cauth__note { margin-top: 18px; font-size: 10.5px; line-height: 1.5; color: var(--text-mute); text-align: center; } .cauth__foot { margin-top: 20px; font-size: 11px; color: var(--text-mute); } .cform { display: flex; flex-direction: column; gap: 14px; } .cform__field { display: flex; flex-direction: column; gap: 6px; } .cform__field span { font-size: 11.5px; color: var(--text-dim); } .cform__field input { width: 100%; padding: 11px 12px; font: inherit; font-size: 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .cform__field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .cform .btn { margin-top: 4px; } .cform__split { display: flex; gap: 8px; } .cform__split input { flex: 1; min-width: 0; } .cform__split .btn { flex-shrink: 0; margin-top: 0; } .cform__forgot { display: block; margin-top: 12px; text-align: center; font-size: 12px; } /* ============================================================ Management console — full-width admin shell ============================================================ */ .cbody { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; } .cwrap { display: flex; min-height: 100vh; } /* sidebar */ .csidebar { width: 214px; flex-shrink: 0; background: var(--bg-elev); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .csidebar__brand { display: flex; align-items: center; gap: 8px; padding: 15px 16px; border-bottom: 1px solid var(--border); text-decoration: none; } .csidebar__brand .logo { pointer-events: none; } .csidebar__nav { padding: 8px 8px 40px; } .csidebar__group { padding: 15px 10px 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-mute); } .csidebar__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; margin: 1px 0; font-size: 12.5px; color: var(--text-dim); text-decoration: none; border-radius: 6px; } .csidebar__link:hover { background: var(--bg-hover, rgba(255,255,255,0.04)); color: var(--text); } .csidebar__link.is-active { background: var(--accent); color: var(--accent-ink); font-weight: 600; } .csidebar__link .cbadge { font-size: 9.5px; } .csidebar__ln { display: flex; align-items: center; gap: 9px; min-width: 0; } .csidebar__ln svg { flex-shrink: 0; opacity: 0.8; } .csidebar__link.is-active .csidebar__ln svg { opacity: 1; } .csidebar__ln span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .csidebar__scrim { display: none; } /* shell + topbar */ .cshell { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ctop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 20px; min-height: 48px; background: var(--bg-elev); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; } .ctop__burger { display: none; background: none; border: 0; color: var(--text); padding: 6px; cursor: pointer; } .ctop__stats { display: flex; gap: 16px; font-size: 12px; color: var(--text-mute); } .ctop__stats b { color: var(--text); } .ctop__stats a { color: inherit; text-decoration: none; } .ctop__stats a:hover b { color: var(--accent); } .ctop__stats .hot { color: var(--down); } .ctop__right { display: flex; align-items: center; gap: 12px; } .ctop__who { font-size: 12px; color: var(--text-mute); } /* page canvas — full width */ .cmain { flex: 1; padding: 18px 24px 60px; width: 100%; } .cpage { max-width: 1580px; } .cpage__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .cpage__h1 { font-size: 18px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; } .cpage__sub { font-size: 12.5px; color: var(--text-mute); margin: 4px 0 16px; line-height: 1.6; } .cpage__sub strong { color: var(--text-dim); } .cpage__back { font-size: 12px; color: var(--accent); text-decoration: none; display: inline-block; margin-bottom: 10px; } /* panels */ .cpanel { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; } .cpanel--flush { padding: 0; } .cpanel--flush .cpanel__h { padding: 13px 16px; margin: 0; border-bottom: 1px solid var(--border); } .cpanel__h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-mute); margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } .cpanel__h .link, .cpanel__h a { font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; } /* stat cards */ .cstat { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; } .cstat__c { padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 9px; } .cstat__c b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.3; } .cstat__c span { font-size: 10.5px; color: var(--text-mute); } .cstat__c.is-alert b { color: var(--accent); } /* tables */ .ctable-wrap { overflow-x: auto; } .ctable { width: 100%; border-collapse: collapse; font-size: 12px; } .ctable th, .ctable td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; } .ctable thead th { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text-mute); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; } .ctable tbody tr:hover { background: var(--bg-hover, rgba(255,255,255,0.03)); } .ctable a { color: var(--accent); text-decoration: none; } .ctable a:hover { text-decoration: underline; } .ctable .num { text-align: right; font-variant-numeric: tabular-nums; } .ctable .wrap { white-space: normal; max-width: 280px; } .ctable .muted { color: var(--text-mute); } .ctable__empty { text-align: center; color: var(--text-mute); padding: 28px 0; } /* badges */ .cbadge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--border); color: var(--text-dim); } .cbadge--ok { color: var(--up); background: color-mix(in srgb, var(--up) 16%, transparent); } .cbadge--bad { color: var(--down); background: color-mix(in srgb, var(--down) 16%, transparent); } .cbadge--warn { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); } .cbadge--mute { color: var(--text-mute); background: var(--bg-hover, rgba(255,255,255,0.05)); } /* filters / chips / toolbar */ .ctoolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .ctoolbar form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ctoolbar input, .ctoolbar select { padding: 7px 10px; font: inherit; font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .cchip { padding: 6px 12px; font-size: 12px; font-weight: 600; text-decoration: none; color: var(--text-mute); background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 999px; } .cchip.is-active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } /* pager */ .cpager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 16px; font-size: 12px; } .cpager a, .cpager span { padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); text-decoration: none; color: var(--text-dim); } .cpager a.is-off { opacity: 0.4; pointer-events: none; } /* key/value */ .ckv { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 7px 14px; font-size: 12.5px; align-items: baseline; } .ckv dt { color: var(--text-mute); } .ckv dd { margin: 0; color: var(--text); word-break: break-word; } /* responsive card grids */ .cgrid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .cgrid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .cgrid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .crow { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; } /* compact forms */ .cminiform { display: flex; flex-direction: column; gap: 9px; } .cminiform label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); } .cminiform label.inline { flex-direction: row; align-items: center; gap: 8px; } .cminiform label.inline input { width: auto; } .cminiform input, .cminiform select, .cminiform textarea { padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); width: 100%; } .cminiform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cminiform textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; resize: vertical; } .cminiform .btn { align-self: flex-start; } /* inline action forms in table cells */ .cinline { display: flex; gap: 4px; align-items: center; } .cinline input, .cinline select { padding: 4px 6px; font: inherit; font-size: 11px; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 5px; } .cinline .btn { padding: 4px 9px; font-size: 11px; } /* chart */ .cchart { width: 100%; height: 240px; } .cchart-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--text-mute); margin-bottom: 10px; } .cchart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; } /* tree (referrals) */ .ctree { font-size: 12.5px; line-height: 1.9; } .ctree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px solid var(--border); } .ctree > ul { padding-left: 0; border-left: 0; } .ctree li { position: relative; } .ctree a { color: var(--accent); text-decoration: none; } .ctree .lvl { color: var(--text-mute); font-size: 10px; margin-left: 6px; } /* impersonation banner (customer site) */ .cimpersonate { background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 600; padding: 7px 14px; text-align: center; } .cimpersonate a { color: var(--accent-ink); text-decoration: underline; } @media (max-width: 1100px) { .cgrid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .csidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform 0.2s; box-shadow: 0 0 40px rgba(0,0,0,0.4); } .cwrap.is-open .csidebar { transform: none; } .cwrap.is-open .csidebar__scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); } .ctop__burger { display: block; } .ctop__stats { display: none; } .cgrid-2, .cgrid-3 { grid-template-columns: 1fr; } .cmain { padding: 14px 14px 60px; } }