/* Nova skin — logged-in account area (ЛК): shell (sidebar/header/nav/bell) +
generic component patterns shared by wallet/swap/staking/withdraw/history/
settings/notifications/markets-desk. Reuses classic's class names and
data-lk-* hooks so /public/js/lk-app.js and the page-specific JS files
(lk-wallet.js, trade-terminal.js, ...) work completely unchanged — only the
look changes. Fully independent from lk-shell.css/lk-app.css/lk-desk.css/
lk-wallet.css (classic) — no shared file, no shared selector definitions. */
* { box-sizing: border-box; }
html.lk-html, html.lk-html body { background: var(--ink); }
body.nova { margin: 0; background: var(--ink); color: var(--bone); font-family: var(--font); -webkit-font-smoothing: antialiased; }
:where(.nova a) { color: inherit; text-decoration: none; } /* zero specificity: a base, never beats a link's own color / :hover */
/* ---- Shell layout ----
Deliberately NOT a classic-style persistent-sidebar app shell. Desktop nav
lives entirely in the top pill-bar (.lk-nav), same visual language as the
marketing header (.nova-nav) — the account area reads as the same site
continuing, not a different app bolted on. .lk-sidebar still exists in the
DOM (lk-app.js needs it for its own toggle logic) but is only ever shown
as the off-canvas mobile drawer — see the responsive block at the bottom. */
.lk-app { display: block; min-height: 100vh; }
.lk-app__main { display: flex; flex-direction: column; min-height: 100vh; }
.lk-app__body { flex: 1; padding: 28px 24px 48px; max-width: 1600px; width: 100%; margin: 0 auto; }
.lk-app__body main { display: block; }
/* Sidebar — mobile-only off-canvas drawer, see responsive block */
.lk-sidebar {
display: none; width: 240px; flex-shrink: 0; background: var(--panel); border-right: 1px solid var(--line);
flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 90;
}
.lk-sidebar__grab, .lk-sidebar__close { display: none; }
.lk-sidebar__scroll { padding: 20px 14px; }
.lk-sidebar__group { margin-bottom: 24px; }
.lk-sidebar__title { color: var(--faint); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding: 0 10px 8px; }
.lk-sidebar__link {
display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm);
color: var(--stone); font-size: 14px; font-weight: 500; margin-bottom: 2px;
}
.lk-sidebar__link:hover { background: var(--panel-3); color: var(--bone); }
.lk-sidebar__link--active { background: var(--signal); color: var(--signal-ink); font-weight: 600; }
.lk-sidebar__ico { display: flex; opacity: .85; }
.lk-sidebar__backdrop { display: none; }
/* Header — the sole desktop nav surface */
.lk-header {
display: flex; align-items: center; gap: 20px; padding: 10px 28px; border-bottom: 1px solid var(--line);
background: rgba(24, 23, 25, .92); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 30;
width: 100%;
transition: background-color .2s ease, border-color .2s ease;
}
/* At the very top of the page the header has no fill and no divider; both appear once the page
scrolls (lk-header.ejs toggles .is-scrolled). The 1px border stays, just transparent, so
nothing shifts when it shows. */
.lk-header:not(.is-scrolled) { background-color: transparent; border-bottom-color: transparent; backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) { .lk-header { transition: none; } }
.lk-header__left { display: flex; align-items: center; gap: 12px; }
.lk-header__burger { display: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--bone); cursor: pointer; }
.lk-header__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 20px; }
.lk-header__logo-img { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; }
.lk-header__logo-mark { width: 34px; height: 34px; border-radius: 4px; background: var(--signal); color: var(--signal-ink); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 16px; }
.lk-header__brand-name { display: inline; }
.lk-header__right { display: flex; align-items: center; align-self: stretch; gap: 8px; margin-left: auto; }
.lk-header__deposit { display: flex; align-items: center; height: 42px; padding: 0 22px; border-radius: var(--radius-pill); background: var(--btn); color: var(--btn-ink); font-size: 14px; font-weight: 600; }
.lk-header__deposit:hover { background: var(--btn-hover); }
.lk-header__login, .lk-header__signup { display: inline-flex; align-items: center; color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; }
.lk-header__login { padding: 8px 6px; }
.lk-header__login:hover { color: var(--stone); }
.lk-header__signup { padding: 7px 16px; border: 1.5px solid #fff; border-radius: 999px; }
.lk-header__signup:hover { background: #fff; color: var(--ink); }
.lk-header__deposit--nav { height: auto; font-size: 16px; padding: 8px 16px 6px; margin: 0 2px; background: transparent; color: var(--bone); border-bottom: 2px solid transparent; border-radius: 0; font-weight: 600; }
.lk-header__deposit--nav:hover { color: var(--bone); background: transparent; }
/* Stretched to the header's full height (not just the trigger link's own content height) so the
popup's top:100% lands exactly on the header's real bottom edge — it was landing partway up
inside the header's own padding, overlapping it, when the wrapper was only as tall as the
link/icon it holds. */
.lk-nav__wallet { position: relative; align-self: stretch; display: flex; align-items: center; }
.lk-walletpop {
/* align-self:stretch above makes the trigger wrapper match .lk-header's CONTENT-box height —
top:100% alone still lands inside the header's own 10px bottom padding + 1px border, short of
its real outer edge, hence the +11px: the popup opens flush with the header's bottom edge.
Keep this in step with .lk-header's padding. */
position: absolute; top: calc(100% + 11px); right: 0; margin-top: 0;
width: 288px; background: rgb(24, 23, 25); border: 1px solid var(--line); border-radius: var(--radius);
padding: 18px; z-index: 50; overflow: hidden;
opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
/* The 10px margin-top above is a real gap in the page's geometry — moving the mouse from the
trigger button straight down into it crosses a strip that belongs to neither element, so
:hover drops before the popup is reached and it snaps shut mid-transit. This invisible
pseudo-element extends .lk-walletpop's own hoverable box up to fill exactly that gap, so the
whole path from button to popup stays continuously "inside" one hoverable element or the other. */
.lk-walletpop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.lk-nav__wallet:hover .lk-walletpop, .lk-walletpop:hover { opacity: 1; visibility: visible; transform: translateY(0); }
/* Account (person-icon) dropdown — same hover-popup mechanism and box as Wallet's, just a plain
link list with no balance header, so its first .lk-walletpop__links skips the border-top that
section normally uses to separate itself from the balance figures above it. */
.lk-nav__profile { position: relative; align-self: stretch; display: flex; align-items: center; }
.lk-nav__profile:hover .lk-walletpop, .lk-nav__profile .lk-walletpop:hover { opacity: 1; visibility: visible; transform: translateY(0); }
/* No divider between the email/UID block and the links below it — targets the links div that
immediately follows .lk-profilepop__id (it's no longer DOM's :first-child once that block was
added above it, so that selector stopped matching; this adjacent-sibling one still does). */
.lk-profilepop__id + .lk-walletpop__links { border-top: none; padding-top: 0; }
.lk-profilepop__id { padding-bottom: 14px; margin-bottom: 2px; }
.lk-profilepop__email { font-size: 16px; font-weight: 600; color: var(--bone); margin: 0 0 6px; }
.lk-profilepop__uid { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--bone); margin: 0; }
.lk-profilepop__uid-copy { display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--bone); padding: 0; cursor: pointer; }
.lk-profilepop__uid-copy:hover { color: var(--bone); }
.lk-profilepop__uid-copy.is-ok { color: var(--ok); }
.lk-profilepop__logout { margin: 0; }
/* Full-bleed row: the popup's own 18px padding otherwise insets the hover highlight from its
actual left/right edges, leaving a visible unhighlighted margin on both sides. A negative
margin equal to that padding — with matching padding added back on the element itself — lets
the highlight reach all the way to the popup's real border instead. */
.lk-profilepop__logout button {
display: flex; align-items: center; gap: 10px; width: calc(100% + 36px); background: none; border: none; cursor: pointer;
margin: 0 -18px; padding: 8px 18px; font-size: 14px; color: var(--bone); font-family: var(--font);
}
.lk-profilepop__logout button:hover { color: var(--bone); background: var(--panel-3); }
.lk-walletpop__k { color: var(--bone); font-size: 12px; margin: 0 0 5px; }
.lk-walletpop__fig { font-size: 20px; font-weight: 600; margin: 0; }
.lk-walletpop__usd { color: var(--bone); font-size: 14px; margin: 3px 0 16px; }
.lk-walletpop__actions { display: flex; gap: 8px; margin-bottom: 16px; }
.lk-walletpop__actions .wo-act { flex: 1; justify-content: center; text-align: center; padding: 9px 0; font-size: 14px; }
/* Wallet popup only — the Account popup's own "no divider" rule is separate, just above. */
.lk-nav__wallet .lk-walletpop__links { border-top: none; padding-top: 0; }
.lk-walletpop__links { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 10px; }
.lk-walletpop__links a { margin: 0 -18px; padding: 8px 18px; font-size: 14px; color: var(--bone); }
.lk-walletpop__links a:hover { color: var(--bone); background: var(--panel-3); }
.lk-nav__profile .lk-walletpop__links a { display: flex; align-items: center; gap: 10px; }
.lk-profilepop__ico { flex: none; width: 20px; height: 20px; }
.nb__btn.lk-header__menu-btn { display: none; }
.lk-header__logout { margin: 0; }
.lk-nav { display: flex; gap: 4px; }
.lk-nav__a { padding: 8px 16px 6px; border-bottom: 2px solid transparent; color: var(--bone); font-size: 16px; font-weight: 600; }
.lk-nav__a:hover { color: var(--bone); }
/* Active section reads by text color alone now — no underline. */
.lk-nav__a.is-active { color: var(--bone); }
/* Header icon buttons + notification bell */
.nb { position: relative; align-self: stretch; display: flex; align-items: center; }
.nb__btn {
width: 44px; height: 44px; border-radius: 50%; background: transparent; border: none; color: var(--bone);
display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative;
}
.nb__btn:hover { background: var(--line); }
.nb__badge {
position: absolute; top: 3px; right: 1px; color: var(--bone); font-size: 12px; font-weight: 600; line-height: 1;
font-variant-numeric: tabular-nums;
}
.nb__panel {
/* Same header-bottom-padding gap as .lk-walletpop above — 44px alone only reaches the header's
content-box bottom, 18px short of its real outer edge. */
position: absolute; top: calc(100% + 11px); right: 0; width: 320px; max-height: 420px; overflow-y: auto;
background: rgb(24, 23, 25); border: 1px solid var(--line); border-radius: var(--radius-lg);
z-index: 40;
}
.nb__panel[hidden] { display: none; }
.nb__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.nb__head-title { font-weight: 600; font-size: 14px; }
.nb__head-actions { display: flex; gap: 10px; }
.nb__mark-all { background: none; border: none; color: var(--bone); font-size: 12px; cursor: pointer; padding: 0; }
.nb__empty { padding: 24px 16px; color: var(--faint); font-size: 12px; text-align: center; }
.nb__list { display: flex; flex-direction: column; }
.nb__item { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.nb__item:last-child { border-bottom: none; }
.nb__item.is-unread { background: rgba(255, 120, 62, .06); }
.nb__item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nb__item-title { font-size: 12px; font-weight: 600; }
.nb__item-text { font-size: 12px; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb__item-time { font-size: 12px; color: var(--faint); white-space: nowrap; flex-shrink: 0; }
/* Restricted-account sheet */
.lk-sheet[hidden] { display: none; }
.lk-restricted { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lk-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.lk-sheet__panel { position: relative; z-index: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; max-width: 340px; text-align: center; }
.lk-restricted__ico { color: var(--bad); display: inline-flex; margin-bottom: 12px; }
.lk-sheet__panel h3 { font-size: 16px; margin: 0 0 20px; }
.lk-restricted__ok { background: var(--btn); color: var(--btn-ink); border: none; border-radius: var(--radius-pill); padding: 10px 28px; font-weight: 600; cursor: pointer; }
/* ---- Generic LK component patterns (cards, forms, tables, stat tiles) used
across wallet/swap/staking/withdraw/history/settings/markets-desk ---- */
.lk-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.lk-h1 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.lk-sub { color: var(--stone); font-size: 12px; margin: 0 0 20px; }
.lk-grid { display: grid; gap: 16px; }
.lk-grid--2 { grid-template-columns: 1fr 1fr; }
.lk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lk-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.lk-stat__label { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; margin: 0 0 6px; }
.lk-stat__value { font-size: 20px; font-weight: 600; }
.lk-stat__value.pos { color: var(--ok); }
.lk-stat__value.neg { color: var(--down); }
.lk-table { width: 100%; border-collapse: collapse; }
.lk-table th, .lk-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 12px; }
.lk-table th { color: var(--faint); text-transform: uppercase; font-size: 12px; font-weight: 600; }
.lk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lk-table .pos { color: var(--ok); }
.lk-table .neg { color: var(--down); }
.lk-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--stone); margin-bottom: 14px; }
.lk-field input, .lk-field select, .lk-field textarea {
background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone);
padding: 11px 14px; font-size: 14px; outline: none; font-family: var(--font); width: 100%;
}
.lk-field input:focus, .lk-field select:focus, .lk-field textarea:focus { border-color: var(--signal); }
.lk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; background: var(--panel-3); color: var(--stone); }
.lk-pill--ok { background: rgba(2,192,118,.14); color: var(--ok); }
.lk-pill--bad { background: rgba(255,83,83,.14); color: var(--bad); }
.lk-pill--warn { background: var(--warn); color: #f5b98a; }
.lk-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.lk-tabs a, .lk-tabs button { background: none; border: none; color: var(--stone); font-size: 14px; font-weight: 600; padding: 10px 4px; margin-right: 20px; cursor: pointer; border-bottom: 2px solid transparent; }
.lk-tabs a.is-active, .lk-tabs button.is-active { color: var(--bone); border-bottom-color: var(--signal); }
.lk-empty { text-align: center; padding: 48px 20px; color: var(--faint); font-size: 14px; }
/* Page header used across every desk page */
.lk-desk__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.lk-desk__head h1 { font-size: 20px; font-weight: 600; margin: 0; }
.lk-desk__empty { text-align: center; color: var(--faint); font-size: 14px; padding: 32px 0; margin: 0; }
.lk-desk__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lk-desk__card-head h2 { font-size: 14px; margin: 0; }
.lk-desk__more { background: none; border: none; color: var(--signal); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
/* Notifications */
.notif-card { padding: 8px; }
.notif-list { display: flex; flex-direction: column; }
.notif-row-form { display: contents; }
.notif-row {
display: flex; align-items: flex-start; gap: 12px; width: 100%; background: none; border: none;
padding: 14px 12px; border-radius: var(--radius); cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.notif-row:hover { background: var(--panel-3); }
.notif-row.is-unread { background: rgba(255, 120, 62, .06); }
.notif-row__icon { width: 34px; height: 34px; border-radius: 50%; background: var(--panel-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-row__icon--ok { background: rgba(2,192,118,.16); color: var(--ok); }
.notif-row__icon--bad { background: rgba(255,83,83,.16); color: var(--bad); }
.notif-row__icon--welcome { background: rgba(255,120,62,.16); color: var(--signal); }
.notif-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-row__title { font-size: 14px; font-weight: 600; }
.notif-row__desc { font-size: 12px; color: var(--stone); }
.notif-row__meta { font-size: 12px; color: var(--faint); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.notif-row__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
/* Generic buttons reused verbatim from classic markup on desk pages
(settings/withdraw/history/etc. still say class="btn btn--primary") */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; font-family: var(--font); }
.btn--primary { background: var(--btn); color: var(--btn-ink); }
.btn--primary:hover { background: var(--btn-hover); }
.btn--primary:disabled { background: var(--panel-3); color: var(--faint); cursor: not-allowed; }
.btn--ghost { background: var(--panel-3); color: var(--bone); border-color: var(--line); }
.btn--ghost:hover { background: var(--line); }
.btn--ghost:disabled { opacity: .5; cursor: not-allowed; }
.eyebrow { color: var(--signal); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.hint { color: var(--faint); font-size: 12px; margin: 0 0 16px; }
/* Settings layout: side tab nav + card (also used by history.ejs) */
.lk-hist-layout { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; }
.lk-hist__nav { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px; }
.lk-hist__nav a { padding: 10px 12px; border-radius: var(--radius-sm); color: var(--stone); font-size: 12px; font-weight: 600; }
.lk-hist__nav a:hover { background: var(--panel-3); color: var(--bone); }
.lk-hist__nav a.is-on { background: var(--signal); color: var(--signal-ink); }
.lk-set__flash { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12px; margin: 0 0 16px; }
.lk-set__flash.is-ok { background: rgba(2,192,118,.12); border: 1px solid var(--ok); color: var(--ok); }
.lk-set__flash.is-bad { background: rgba(255,83,83,.12); border: 1px solid var(--bad); color: var(--bad); }
.lk-set h2 { font-size: 16px; margin: 0 0 4px; }
.lk-set__lede { color: var(--stone); font-size: 12px; margin: 0 0 20px; }
.lk-set__list { display: flex; flex-direction: column; gap: 2px; }
.lk-set__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lk-set__row:last-child { border-bottom: none; }
.lk-set__text { display: flex; flex-direction: column; gap: 2px; }
.lk-set__text strong { font-size: 14px; }
.lk-set__text span { font-size: 12px; color: var(--stone); }
.lk-set__text span.is-on { color: var(--ok); }
.lk-set__text span.is-off { color: var(--faint); }
.lk-set__side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lk-set__side input { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--bone); padding: 8px 12px; font-size: 12px; }
.lk-set__btn { background: var(--panel-3); border: 1px solid var(--line); color: var(--bone); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 12px; font-weight: 600; cursor: pointer; }
.lk-set__btn:hover { background: var(--line); }
.lk-set__btn--go { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.lk-set__out { margin-top: 20px; }
.lk-set__out button { background: none; border: none; color: var(--bad); font-size: 12px; cursor: pointer; padding: 0; }
.lk-set__promo { display: flex; gap: 8px; }
.lk-set__promo input { flex: 1; background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone); padding: 10px 14px; font-size: 12px; }
.lk-set__armed { background: rgba(2,192,118,.12); border: 1px solid var(--ok); color: var(--ok); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12px; margin: 0 0 14px; }
.lk-set__row--sw { cursor: pointer; }
.lk-set__sw { width: 38px; height: 22px; border-radius: 11px; background: var(--panel-3); position: relative; flex-shrink: 0; display: inline-block; }
.lk-set__sw i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--faint); transition: transform .15s, background .15s; }
.lk-set__row--sw input { position: absolute; opacity: 0; pointer-events: none; }
.lk-set__row--sw input:checked ~ .lk-set__sw { background: var(--signal); }
.lk-set__row--sw input:checked ~ .lk-set__sw i { transform: translateX(16px); background: #fff; }
/* Sheets (change password / email / 2FA / KYC) reuse .lk-sheet from the shell */
.lk-sheet:not(.lk-restricted):not([hidden]) { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lk-sheet__panel { position: relative; z-index: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; }
.lk-sheet__panel h3 { font-size: 16px; margin: 0 0 6px; }
.lk-sheet__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.auth__field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 12px; color: var(--stone); }
.auth__field label { font-size: 12px; }
.auth__field input { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone); padding: 10px 14px; font-size: 14px; outline: none; font-family: var(--font); width: 100%; }
.auth__field input:focus { border-color: var(--signal); }
.auth__field input:disabled { opacity: .5; }
.lk-code-box { display: flex; gap: 8px; }
.lk-code-box input { flex: 1; }
.lk-code-box__resend { background: var(--panel-3); border: 1px solid var(--line); color: var(--stone); border-radius: var(--radius); padding: 0 14px; font-size: 12px; cursor: pointer; }
.lk-code-box__resend:disabled { opacity: .5; cursor: default; }
.totp-setup { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.totp-setup img { border-radius: var(--radius-sm); background: #fff; padding: 6px; }
.totp-secret { display: block; background: var(--panel-3); border-radius: var(--radius-sm); padding: 6px 10px; font-family: var(--mono); font-size: 12px; margin-top: 4px; word-break: break-all; }
/* KYC upload sheet */
.lk-kyc__lede { color: var(--stone); font-size: 12px; margin: 0 0 18px; }
.lk-kyc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.lk-kyc__span { grid-column: 1 / -1; }
.lk-kyc__field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--stone); position: relative; }
.lk-kyc__field input { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius); color: var(--bone); padding: 10px 12px; font-size: 12px; outline: none; font-family: var(--font); }
.lk-kyc__field.is-miss input, .lk-kyc__field.is-miss .lk-kyc__pick { border-color: var(--bad); }
.lk-kyc__pick { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius); color: var(--stone); padding: 10px 12px; font-size: 12px; text-align: left; cursor: pointer; }
.lk-kyc__pick.is-on { color: var(--bone); }
.lk-kyc__menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); z-index: 10; overflow: hidden; }
.lk-kyc__menu[hidden] { display: none; }
.lk-kyc__menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--bone); padding: 10px 12px; font-size: 12px; cursor: pointer; }
.lk-kyc__menu button:hover { background: var(--panel-3); }
.lk-kyc__docs-h { font-size: 12px; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.lk-kyc__uploads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lk-kyc__slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: var(--panel-3); border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px 10px; cursor: pointer; }
.lk-kyc__slot.is-on { border-style: solid; border-color: var(--ok); }
.lk-kyc__slot input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lk-kyc__slot-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; }
.lk-kyc__slot-copy strong { display: block; font-size: 12px; }
.lk-kyc__slot-copy em { display: block; font-style: normal; color: var(--faint); font-size: 12px; margin: 2px 0; }
.lk-kyc__slot-copy [data-kyc-filename] { display: block; font-size: 12px; color: var(--stone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.lk-kyc__actions { margin-top: 20px; }
/* Markets desk / holdings table (shared pattern with wallet.ejs) */
.lk-w { display: flex; flex-direction: column; gap: 16px; }
.lk-hold { padding: 0; overflow: hidden; }
.lk-hold__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lk-hold__head h2 { font-size: 14px; margin: 0; }
.lk-hold__search { display: flex; align-items: center; gap: 8px; background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 14px; color: var(--faint); }
.lk-hold__search input { background: none; border: none; color: var(--bone); font-size: 12px; outline: none; width: 160px; }
.lk-hold__scroll { overflow-x: auto; }
.lk-hold__table { width: 100%; border-collapse: collapse; }
.lk-hold__table th, .lk-hold__table td { text-align: left; padding: 12px 20px; font-size: 12px; border-bottom: 1px solid var(--line); }
.lk-hold__table th { color: var(--faint); text-transform: uppercase; font-size: 12px; font-weight: 600; }
.lk-hold__table tr:last-child td { border-bottom: none; }
.lk-hold__name { display: flex; align-items: center; gap: 10px; }
.lk-hold__name-txt strong { display: block; font-size: 12px; }
.lk-hold__name-txt span { display: block; color: var(--faint); font-size: 12px; }
.lk-hold__table td.is-up { color: var(--ok); }
.lk-hold__table td.is-down { color: var(--down); }
.lk-hold__empty { text-align: center; color: var(--faint); font-size: 12px; padding: 32px 0; }
.asset-ico img, .asset-ico__fallback { width: 28px; height: 28px; border-radius: 50%; display: block; }
.asset-ico__fallback { background: var(--panel-3); color: var(--bone); align-items: center; justify-content: center; font-size: 12px; font-weight: 600; display: flex; }
/* ---- "desk-ticket" trading-form component family (wd-*) — shared by
staking-desk, swap, and withdraw. Build once, reuse everywhere. ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.btn--sm { padding: 7px 14px; font-size: 12px; }
.btn--block { width: 100%; }
.lk-desk__grid { display: grid; gap: 16px; }
/* Classic lays the ticket form and the rules/FAQ card side-by-side as two
equal boxes — a dashboard-terminal composition. Nova's swap widget on the
real reference site (research/swapuz/) is a single centered standalone
card, not a split dashboard, so every "twin" desk page (swap/staking/
withdraw/settings-adjacent) is single-column and centered instead: ticket
→ any extra card (e.g. staking's lock list) → rules, all stacked, all
narrower than the page. */
.lk-desk__grid--twin { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.lk-desk__grid--twin > .lk-desk__side { grid-column: auto; }
.lk-desk__form { display: flex; flex-direction: column; border-radius: 4px; padding: 28px; }
.lk-desk__faq { display: flex; gap: 16px; align-items: flex-start; background: none; border: none; padding: 18px 4px 0; }
.lk-desk__faq-art { display: none; }
.dep-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dep-rules li { display: flex; gap: 10px; font-size: 12px; color: var(--stone); line-height: 1.5; }
.dep-rules__n { color: var(--faint); font-weight: 600; font-size: 12px; flex-shrink: 0; }
.desk-ticket { display: flex; flex-direction: column; gap: 16px; }
.wd-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wd-id__asset { flex: 1; min-width: 0; }
.wd-id__pick { display: flex; align-items: center; gap: 10px; background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.wd-id__pick--static { cursor: default; border: none; background: none; padding: 0; }
.wd-id__ico { display: flex; flex-shrink: 0; }
.wd-id__copy { display: flex; flex-direction: column; min-width: 0; }
.wd-id__copy strong { font-size: 14px; }
.wd-id__copy span { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-id__chain { position: relative; flex-shrink: 0; }
.asset-select__native { position: absolute; opacity: 0; pointer-events: none; }
.wd-sum { background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.wd-sum__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.wd-sum__k { font-size: 12px; color: var(--faint); }
.wd-sum__all { background: none; border: none; color: var(--signal); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.wd-send__fig { display: flex; flex-direction: column; }
.wd-sum__n { background: none; border: none; color: var(--bone); font-size: 28px; font-weight: 600; outline: none; font-family: var(--font); width: 100%; padding: 0; }
.wd-sum__n.is-over { color: var(--bad); }
.wd-sum__fx { color: var(--faint); font-size: 12px; margin: 4px 0 0; }
.wd-leg { display: flex; flex-direction: column; gap: 8px; }
.wd-leg__row { display: flex; justify-content: space-between; font-size: 12px; }
.wd-leg__row[hidden] { display: none; }
.wd-leg__k { color: var(--faint); }
.wd-leg__v { color: var(--stone); font-weight: 500; }
.wd-leg__v.is-up { color: var(--ok); }
.wd-leg__link { display: inline-flex; align-items: center; gap: 4px; color: var(--bone); font-weight: 600; text-decoration: none; }
.wd-leg__link:hover { opacity: .8; }
.wd-leg__link strong { font-weight: 600; }
.wd-leg__chev { color: var(--faint); flex-shrink: 0; }
/* Withdraw page — KCEX-style numbered wizard + fee/FAQ side card + history table, in our own
tokens (green --signal, not KCEX's white/tan pills). Scoped to .wd-page so swap/staking,
which share .lk-desk__grid--twin, keep their existing centered single-column layout. */
/* .lk-desk__head's own justify-content:space-between (shared with every other page's plain
"Title
" header) otherwise shoves this title off to the far right, away from the back
arrow it belongs right next to. And — this title never had its own centering the way the grid
below does, so simply decentering the grid to match it (an earlier attempt at this) just
dragged the whole page over to the left instead: the fix is to move the title INTO the same
centered 1100px column as the grid, so they still share a left edge but that shared edge is
itself centered within the page, not pinned to it. */
.wd-page__head { display: flex; align-items: center; justify-content: flex-start; gap: 14px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.wd-page__back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: transparent; color: var(--bone); flex-shrink: 0; }
.wd-page .lk-desk__grid--twin { grid-template-columns: minmax(0, 1fr) 340px; max-width: 1100px; align-items: start; gap: 24px; margin: 0 auto; }
@media (max-width: 900px) { .wd-page .lk-desk__grid--twin { grid-template-columns: 1fr; } }
.wd-page .lk-desk__form { border-radius: 4px; }
.wd-steps { display: flex; flex-direction: column; }
.wd-step { display: flex; gap: 16px; }
.wd-step[hidden] { display: none; }
.wd-step__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.wd-step__n { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--panel-3); border: 1px solid var(--line); color: var(--bone); font-size: 12px; font-weight: 600; flex-shrink: 0; }
.wd-step__line { flex: 1; width: 0; min-height: 24px; border-left: 1px dashed var(--line); margin: 4px 0; }
.wd-step__body { flex: 1; min-width: 0; padding-bottom: 22px; }
.wd-step__h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin: 0 0 12px; }
/* The flip control between "You Pay" and "You Receive" isn't its own numbered step — it rides in
the gap between steps 1 and 2 via negative margin (pulling this row back up into that gap
instead of taking a full row of its own), centered over the same 499px column the two asset
pickers share, so it visually sits on the seam between them. */
.wd-step--flip { margin: -20px 0; }
/* No number circle in this connector row, so its rail would otherwise shrink to the dashed
line's own near-0 width and center the line at a different x than steps 1/2's 24px-wide rail
does — matching that width keeps the dashed line running straight through, not kinked at the
seam. */
.wd-step--flip .wd-step__rail { width: 24px; }
.wd-step--flip .wd-step__body { display: flex; justify-content: center; max-width: 499px; padding: 0; }
.wd-step--flip .swap-flip { position: relative; z-index: 2; }
.dep-placeholder { color: var(--faint); font-size: 12px; margin: 0; }
[data-deposit-page] .wd-id__pick { background: transparent; }
/* Base space-between (icon | copy | chevron) spaces those 3 items evenly across the button's
full width — with a narrow icon and narrow chevron either side, the text always ends up
floating in the middle instead of sitting right next to the icon it's naming. Applies
regardless of whether a coin is actually picked yet (not just the empty-placeholder case): icon
+ text flush left, chevron alone pushed to the right. */
[data-deposit-page] .asset-select .wd-id__pick { justify-content: flex-start; }
[data-deposit-page] .wd-id__chev { margin-left: auto; }
[data-deposit-page] .wd-id__pick--empty .wd-id__copy strong { color: var(--faint); font-weight: 500; }
/* Symbol + full name on one line ("ETH ETHEREUM"), both light-weight — was symbol bold on its
own line with the full name small/muted underneath. */
[data-deposit-page] .wd-id__copy { flex-direction: row; align-items: baseline; gap: 8px; }
[data-deposit-page] .wd-id__copy strong { font-weight: 500; font-size: 12px; }
[data-deposit-page] .wd-id__copy span { text-transform: uppercase; font-size: 12px; }
/* Asset button and network select, same fixed box — was 260px vs the full-width select (696px);
neither needs to be that wide for a single symbol/network name. */
[data-deposit-page] .wd-id__asset { flex: 0 0 auto; }
/* .asset-select .wd-id__pick's own width:100% (further down this file) otherwise wins this tie —
same specificity, later in source — so this needs the extra .asset-select qualifier too. */
[data-deposit-page] .asset-select .wd-id__pick { width: 499px !important; height: 47px; max-width: 100%; box-sizing: border-box; }
/* Step rail: bigger/bolder dashed connector, with real air between it and the number circles
above/below instead of touching them, and the numbers themselves lose their filled-grey-disc
look (transparent, border only) to match the rest of the page's flat/cardless treatment. */
/* The 24px number box starts at the same top as the step heading, but the heading's own line-box
(14px font, ~18px tall) is shorter, so its text sits 3px above the box's vertical center — the
number reads as sitting low next to it. Nudging the box up cancels that, and bumping the font
makes the digit itself a bit more prominent per request ("цифры покрупнее"). */
[data-deposit-page] .wd-step__n { background: transparent; border: none; border-radius: 0; font-size: 14px; margin-top: -3px; }
[data-deposit-page] .wd-step__line { border-left-width: 3px; margin: 10px 0; }
[data-deposit-page] .dep-chips { margin-top: 12px; }
/* More breathing room between the three numbered steps — the cardless layout above had nothing
else (no card padding/border) separating them, so the default 22px read as cramped. */
[data-deposit-page] .wd-step__body { padding-bottom: 40px; }
[data-deposit-page] .wd-step--last .wd-step__body { padding-bottom: 0; }
/* Step 1's .asset-select sits inside .wd-id, a flex row — its own flex:0 0 auto sizes it to the
button's 499px. Step 2's copy has no such flex parent (plain block child of .wd-step__body), so
as an ordinary block it stretched to the full row width (696px) — and .asset-select__menu's
left:0/right:0 stretched right along with it, well past the 499px button above it. */
[data-deposit-page] .net-select { width: 499px; max-width: 100%; }
/* A single-network coin auto-picks that network — there's nothing left to choose, so the toggle
doesn't open a one-row menu just to show the same value already on the button. */
[data-deposit-page] .net-select .wd-id__pick.is-locked { cursor: default; }
/* Deposit page, cardless: no boxed .lk-card look at all (not even .wo-page's transparent+border
compromise) — the step form, Tips, FAQ and Recent Deposits sections all sit directly on the
page background, separated by spacing alone. Scoped to [data-deposit-page] specifically (not
the shared .wd-page class withdraw.ejs also uses) so withdraw keeps its existing card look. */
[data-deposit-page] .lk-card { background: transparent; border: none; padding: 0; }
[data-deposit-page] .lk-desk__side { display: flex; flex-direction: column; gap: 28px; }
/* Keeps .wd-hist's own centering (base rule further down) — it needs to move together with the
title/grid above as one centered block, not decenter to match their left edge; see the longer
note on .wd-page__head above for why "just remove the centering" was the wrong fix. */
[data-deposit-page] .wd-hist { margin-top: 48px; }
/* wd-page__head's back-button (36px) + its shared 14px gap push the "Deposit" text to x=220,
while the step badge (24px) + 16px gap put "Select Crypto" at x=210 — a real 10px rightward
drift. Tightening the gap here (deposit only, not shared withdraw.ejs) makes both start flush
at the same x. Also widens the gap below the header — 20px read as cramped against step 1. */
[data-deposit-page] .wd-page__head { gap: 4px; margin-bottom: 32px; }
/* Back-button box is 36px wide, step-badge "1" below is 24px — both start at the same left edge,
so their centers sit 6px apart and the chevron reads as off-axis from the numeral. Shifting only
the glyph (not the button's own hit-box, which stays a full 36px circle) puts it on the same
vertical axis as "1" without touching the header's own layout/gap fix above. */
[data-deposit-page] .wd-page__back svg { transform: translateX(-6px); }
/* Quick-pick chips under the asset dropdown — one-click common coins, same combo-box selection
under the hood (nova-deposit.js's setSymbol), matching the reference's pill row under step 1. */
.dep-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dep-chips[hidden] { display: none; }
.dep-chip {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--radius-pill);
background: transparent; border: 1px solid var(--line); color: var(--stone); font-size: 12px; font-weight: 600;
}
.dep-chip:hover { border-color: var(--stone); color: var(--bone); }
.dep-chip.is-active { border-color: var(--signal); color: var(--signal); }
.dep-chip .asset-ico { width: 15px; height: 15px; }
/* .asset-ico's own ![]()
/fallback are hardcoded to 28px elsewhere (the size everywhere else this
helper is used wants) — sizing just the wrapper span above did nothing, the real image inside
still rendered at 28px and overflowed this much smaller chip. Override the image itself too. */
.dep-chip .asset-ico img, .dep-chip .asset-ico__fallback { width: 15px; height: 15px; font-size: 8px; }
/* ---- Wallet Overview (KCEX /assets/overview 1:1, our tokens) ---- */
@keyframes wo-flash-up { from { background: rgba(2,192,118,.22); } to { background: transparent; } }
@keyframes wo-flash-down { from { background: rgba(246,70,93,.22); } to { background: transparent; } }
.lk-hold__row.is-flash-up { animation: wo-flash-up .9s ease-out; }
.lk-hold__row.is-flash-down { animation: wo-flash-down .9s ease-out; }
.wo-page { display: grid; grid-template-columns: 200px minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .wo-page { grid-template-columns: 1fr; } .wo-side { display: none; } }
.wo-side__nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; }
.wo-side__link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-left: 2px solid transparent; color: var(--stone); font-size: 14px; font-weight: 500; }
.wo-side__link:hover { color: var(--bone); }
.wo-side__link.is-active { color: var(--bone); font-weight: 600; border-left-color: var(--signal); }
.wo-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wo-right { display: flex; flex-direction: column; gap: 16px; }
.wo-page .lk-card { background: transparent; border: 1px solid var(--line); }
.wo-top { padding: 22px 24px; }
.wo-top__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.wo-top__head h1 { font-size: 16px; margin: 0; display: flex; align-items: center; gap: 10px; }
.wo-savings-pill { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line); color: var(--stone); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); }
.wo-top__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wo-act { background: transparent; border: 1px solid var(--line); color: var(--stone); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 12px; font-weight: 600; }
.wo-act:hover { color: var(--bone); }
.wo-act.is-primary { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.wo-top__k { color: var(--faint); font-size: 12px; margin: 0 0 6px; display: flex; align-items: center; gap: 6px; }
.wo-top__figs { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wo-top__big { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.wo-top__usd { color: var(--faint); font-size: 12px; }
.wo-top__meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; }
.wo-top__meta span, .wo-top__meta a { color: var(--stone); }
.wo-top__meta b { color: var(--bone); }
.wo-top__meta i { font-style: normal; margin-left: 3px; }
/* Figures (not their labels): green for gains and for zero, red only for a loss (server-side class). */
.wo-top__meta .tone { color: var(--ok); }
.wo-top__meta .tone.is-down { color: var(--down); }
/* The figure and its mask are spans too: take the tone's colour, not the grey `.wo-top__meta span` labels. */
.wo-top__meta .tone span { color: inherit; }
.lk-cash__eye { background: none; border: 0; padding: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--stone); cursor: pointer; }
.lk-cash__eye [data-eye-on] { display: inline-flex; }
.lk-cash__eye svg { display: block; }
.lk-cash__eye [data-eye-off] { display: none; }
.wo-top.is-veiled .lk-cash__eye [data-eye-on] { display: none; }
.wo-top.is-veiled .lk-cash__eye [data-eye-off] { display: inline-flex; }
/* Hidden balance: every figure swaps for a "******" mask (exchange convention), no blur. */
.bal-mask { display: none; }
.is-veiled .bal-v { display: none !important; }
.is-veiled .bal-mask { display: inline; }
.wo-assets .lk-hold__table th:nth-child(n+2), .wo-assets .lk-hold__table td:nth-child(n+2) { text-align: right; }
/* My Assets: no divider lines — neither under the column headers nor between coin rows. */
.wo-assets .lk-hold__table th, .wo-assets .lk-hold__table td { border-bottom: none; }
.wo-td-cost, .wo-td-px { font-variant-numeric: tabular-nums; }
.wo-td-profit { font-weight: 600; font-variant-numeric: tabular-nums; }
.wo-td-profit.pos { color: var(--ok); }
.wo-td-profit.neg { color: var(--down); }
.wo-td-value { font-weight: 600; }
/* Matches #lk-cash's own height so the second-row cards in each column (.wo-assets on the left,
#lk-mem-vip on the right) start at the same Y — .wo-alloc's own content (title + 2 allocation
bars) is naturally shorter, which threw the two columns' rows out of alignment. */
.wo-alloc { min-height: 187px; box-sizing: border-box; }
.wo-alloc__bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--panel-3); margin: 12px 0 14px; }
.wo-alloc__row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--stone); padding: 6px 0; }
a.wo-alloc__row { text-decoration: none; }
.wo-alloc__row b { color: var(--bone); margin-left: auto; margin-right: 10px; font-weight: 600; }
.wo-alloc__row span { color: var(--faint); width: 34px; text-align: right; }
.wo-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.wo-recent__empty { color: var(--faint); font-size: 12px; text-align: center; padding: 20px 0; margin: 0; }
.wo-recent__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wo-recent__row { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.wo-recent__row:last-child { border-bottom: none; }
.wo-recent__kind { color: var(--bone); flex: 1; min-width: 0; }
.wo-recent__amt { color: var(--stone); font-variant-numeric: tabular-nums; }
.wo-recent__status { text-transform: capitalize; font-weight: 600; font-size: 12px; }
.wo-recent__status.is-pending { color: var(--faint); }
.wo-recent__status.is-approved { color: var(--ok); }
.wo-recent__status.is-declined { color: var(--bad); }
.wd-fee-card, .wd-faq-card { border-radius: 4px; display: flex; flex-direction: column; gap: 10px; }
.wd-fee-pill { align-self: flex-start; background: rgba(2,192,118,.14); color: var(--signal); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-pill); }
.wd-side__h { font-size: 14px; font-weight: 600; margin: 4px 0 0; }
.wd-side__p { font-size: 12px; color: var(--stone); line-height: 1.6; margin: 0; }
.wd-faq-card__head { display: flex; justify-content: space-between; align-items: center; }
.wd-faq-card__head a { font-size: 12px; color: var(--faint); }
.wd-faq-link { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--stone); padding: 4px 0; }
.wd-faq-link:hover { color: var(--bone); }
.wd-faq-link svg { color: var(--faint); flex-shrink: 0; }
.wd-faq-card__all { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 10px 14px; background: var(--panel-3); border-radius: var(--radius); font-size: 12px; font-weight: 600; color: var(--bone); }
.wd-faq-card__all svg:last-child { margin-left: auto; }
.wd-hist { margin-top: 20px; border-radius: 4px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.wd-hist__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.wd-hist__head h2 { font-size: 16px; margin: 0; }
.wd-hist__head a { font-size: 12px; color: var(--faint); }
.wd-hist__empty { color: var(--faint); font-size: 12px; text-align: center; padding: 24px 0; margin: 0; }
.wd-hist__table { display: flex; flex-direction: column; }
.wd-hist__row { display: grid; grid-template-columns: 90px 120px 1fr 1fr 1fr 1.4fr 90px; gap: 12px; padding: 10px 4px; font-size: 12px; align-items: center; }
.wd-hist__row--head { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.wd-hist__coin { display: flex; align-items: center; gap: 8px; }
.wd-hist__coin .asset-ico img,
.wd-hist__coin .asset-ico__fallback { width: 20px; height: 20px; }
.wd-hist__tx { text-decoration: none; }
.wd-hist__tx:hover { color: var(--bone); text-decoration: underline; }
.wd-hist__addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); font-family: var(--mono); }
.wd-hist__status { text-transform: capitalize; font-weight: 600; }
.wd-hist__status.is-pending { color: var(--pending); }
.wd-hist__status.is-approved,
.wd-hist__status.is-paid { color: var(--ok); }
.wd-hist__status.is-declined,
.wd-hist__status.is-failed { color: var(--down); }
@media (max-width: 900px) {
.wd-hist__row { grid-template-columns: 1fr 1fr; row-gap: 4px; }
.wd-hist__row--head { display: none; }
.wd-hist__row [data-label]::before { content: attr(data-label) ": "; color: var(--faint); }
}
/* Staking specifics */
.stake-facts { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--faint); margin: 6px 0 0; }
.stake-facts b { color: var(--bone); font-size: 12px; }
.stake-facts .is-up b { color: var(--ok); }
.stake-pos__acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* Your Locks: the Actions column hugs the right edge, so the table ends where the form + notes above
end (the rows already span the full width — only the buttons sat at the left of their column). */
@media (min-width: 901px) {
[data-stake-desk] .wd-hist__row > :last-child { justify-self: end; text-align: right; }
[data-stake-desk] .stake-pos__acts { justify-content: flex-end; }
}
/* Result sheets (lk-swap-ok / lk-stake-ok) */
/* Asset picker dropdown (swap from/to, and reused shape elsewhere) */
.asset-select { position: relative; }
.asset-select .wd-id__pick { width: 100%; justify-content: space-between; cursor: pointer; }
.wd-id__chev { flex-shrink: 0; color: var(--faint); }
/* var(--panel) (#29282a) read as a mismatched grey box against this page's cardless dark
background — the header's own popovers (.lk-walletpop) use the page's own #151416 instead,
so this matches that rather than the lighter panel tone used for form field fills. */
.asset-select__menu { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: #151416; border: 1px solid var(--line); border-radius: var(--radius); z-index: 25; overflow: hidden; }
.asset-select__menu[hidden] { display: none; }
.asset-select__search { padding: 10px; border-bottom: 1px solid var(--line); }
.asset-select__search input { width: 100%; background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--bone); padding: 8px 12px; font-size: 12px; outline: none; }
[data-deposit-page] .asset-select__search { padding: 10px 16px; border-bottom: none; }
[data-deposit-page] .asset-select__search input { background: transparent; }
[data-deposit-page] .asset-select__search input::placeholder { color: var(--faint); font-weight: 400; }
[data-deposit-page] .asset-select__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
[data-deposit-page] .asset-select__list { padding-right: 2px; }
[data-deposit-page] .asset-select__row { padding-right: 4px; }
/* display:flex + gap (not margin) between rows — a hovered row next to the already-selected one
otherwise touched it directly (same grey background, no border), so the two blended into one
solid block with no visible seam. */
.asset-select__list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.asset-select__list::-webkit-scrollbar { width: 6px; }
.asset-select__list::-webkit-scrollbar-track { background: transparent; }
.asset-select__list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.asset-select__row { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; color: inherit; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; }
.asset-select__row:hover { background: var(--panel-3); }
.asset-select__row.is-active { background: var(--panel-3); }
.asset-select__row[hidden] { display: none; }
.asset-select__sym strong { font-size: 12px; }
.asset-select__name { flex: 1; color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asset-select__bal { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; text-align: right; }
.asset-select__bal strong { font-size: 12px; font-weight: 600; }
.asset-select__bal span { font-size: 12px; color: var(--faint); }
.asset-select__check { color: var(--signal); opacity: 0; flex-shrink: 0; }
.asset-select__row.is-active .asset-select__check { opacity: 1; }
/* The checkmark reserved its ~24px (icon + row gap) on EVERY row even at opacity:0, permanently
pushing the balance column that same amount away from the scrollbar. Deposit-only (unlike
withdraw.ejs, which now shares this attribute): collapse it out of flow entirely on inactive
rows, so the balance sits flush next to the scrollbar there. */
[data-deposit-page] .asset-select__check { display: none; }
[data-deposit-page] .asset-select__row.is-active .asset-select__check { display: inline-flex; }
/* Withdraw specifically: no checkmark at all, active or not — the grey row highlight already
shows which coin is selected, the check felt redundant here. Same specificity as the rule
above, later in source, so it wins without needing !important. */
[data-withdraw-desk] .asset-select__row.is-active .asset-select__check { display: none; }
.asset-select__empty { padding: 16px; text-align: center; color: var(--faint); font-size: 12px; }
.swap-flip {
align-self: center; width: 44px; height: 44px; border-radius: 50%; background: transparent; border: 1px solid var(--line);
color: var(--bone); display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0;
}
.swap-flip:hover { border-color: var(--stone); color: var(--signal); }
.swap-ticket__cta:disabled { background: var(--panel-3); color: var(--faint); cursor: not-allowed; }
/* History table */
.lk-hist { padding: 0; overflow: hidden; }
.lk-hist__scroll { overflow-x: auto; }
.lk-hist__table { width: 100%; border-collapse: collapse; }
.lk-hist__table th, .lk-hist__table td { text-align: left; padding: 14px 20px; font-size: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lk-hist__table th { color: var(--faint); text-transform: uppercase; font-size: 12px; font-weight: 600; }
.lk-hist__table tr:last-child td { border-bottom: none; }
.lk-hist__table b.is-up { color: var(--ok); font-weight: 600; }
.lk-hist__table b.is-down { color: var(--down); font-weight: 600; }
.lk-hist__table b.is-wait { color: var(--faint); font-weight: 600; }
.lk-hist__table time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.lk-hist__asset { display: flex; align-items: center; gap: 10px; }
.lk-hist__pair { display: flex; align-items: center; flex-shrink: 0; }
.lk-hist__pair .asset-ico { margin-right: -8px; border: 2px solid var(--panel); border-radius: 50%; }
.lk-hist__pair--swap { gap: 2px; }
.lk-hist__pair--swap .asset-ico { margin-right: 0; }
.lk-hist__xchg { color: var(--faint); display: flex; }
.lk-hist__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lk-hist__copy span { font-size: 12px; font-weight: 500; }
.lk-hist__copy em { font-style: normal; color: var(--faint); font-size: 12px; }
.lk-hist__copy code { font-family: var(--mono); font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; display: block; }
.lk-hist__pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; }
.lk-hist__pager a, .lk-hist__pager span { font-size: 12px; color: var(--stone); padding: 4px 8px; }
.lk-hist__pager a.is-on { color: var(--signal-ink); background: var(--signal); border-radius: var(--radius-sm); font-weight: 600; }
.lk-hist__pager span.is-off { color: var(--faint); }
.lk-hist__pages { display: flex; gap: 2px; }
.lk-hist__gap { color: var(--faint); }
/* ---- Wallet page ----
A single full-width balance hero (not classic's two-boxes-side-by-side
grid), VIP/cashback folded into a slim strip underneath instead of a
second boxed card — a genuinely different composition, not a recolor. */
.lk-w__top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.lk-w__cash { border-radius: 4px; padding: 32px 36px; text-align: center; background: radial-gradient(circle at 50% 0%, var(--panel-3), var(--panel) 70%); }
.lk-w__cash .lk-cash__who { display: flex; justify-content: center; }
.lk-w__cash .lk-cash__who-text { align-items: center; }
.lk-w__cash .lk-cash__row { justify-content: center; }
.lk-w__cash .lk-cash__head { justify-content: center; gap: 10px; }
.lk-w__cash .lk-cash__meta { justify-content: center; }
.lk-w__ops { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 18px 24px; }
.lk-w__ops .lk-mem__face { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; width: 100%; }
.lk-w__ops .lk-mem__note { margin: 0; }
.lk-w__ops .lk-mem__name { margin: 0; }
.lk-w__ops .lk-mem__rates { margin: 0; }
.lk-w__ops .lk-cashback { flex: 1; min-width: 220px; margin-left: auto; }
.lk-w__split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.is-flat { color: var(--stone); }
.lk-cash__who-text { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.lk-cash__name { font-size: 12px; color: var(--stone); margin: 0; }
.lk-cash__name-lab { color: var(--faint); }
.lk-cash__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lk-cash__mail { background: none; border: none; color: var(--stone); font-size: 12px; cursor: pointer; padding: 0; }
.lk-cash__marks { display: flex; gap: 10px; flex-wrap: wrap; }
.lk-cash__mark { font-size: 12px; color: var(--faint); }
.lk-cash__mark b { font-weight: 600; }
.lk-cash__mark.is-on b { color: var(--ok); }
.lk-cash__mark.is-off b { color: var(--bad); }
.lk-cash__head { display: flex; align-items: center; justify-content: space-between; }
.lk-cash__k { color: var(--faint); font-size: 12px; margin: 0; }
/* .lk-cash__eye real rule lives up top, scoped to .wo-top — .lk-w__cash no longer exists in the
markup (replaced by .wo-top), this whole legacy block was dead weight that happened to still
win the cascade because it came later in the file at equal specificity. */
.lk-cash__fig { font-size: 56px; font-weight: 600; margin: 10px 0 4px; letter-spacing: -0.02em; }
.lk-cash__cur { color: var(--faint); font-weight: 600; font-size: 20px; margin-right: 2px; }
.lk-cash__btc { color: var(--faint); font-size: 12px; margin: 0 0 14px; }
.lk-cash__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.lk-cash__meta span, .lk-cash__meta a { color: var(--stone); }
.lk-cash__meta b { color: var(--bone); }
.lk-cash__meta i { font-style: normal; margin-left: 4px; }
.lk-cash__meta .is-up { color: var(--ok); }
.lk-cash__meta .is-down { color: var(--down); }
.lk-mem__note { color: var(--faint); font-size: 12px; margin: 0 0 8px; }
.lk-mem__name { background: var(--panel-3); border: 1px solid var(--line); color: var(--stone); border-radius: var(--radius-pill); padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; margin-bottom: 12px; }
.lk-mem__name.is-active { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.lk-mem__name:disabled { cursor: default; opacity: .7; }
.lk-mem__name.is-buy { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); transition: background-color .15s; }
.lk-mem__name.is-buy:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.lk-mem__name.is-active:disabled { opacity: 1; }
.lk-mem__rates { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--faint); margin: 0 0 16px; }
.lk-mem__rates b { color: var(--bone); }
.lk-cashback__head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.lk-cashback__label { font-size: 12px; color: var(--faint); }
.lk-cashback__amt { font-size: 16px; font-weight: 600; color: #0bba74; } /* terminal's number green (--kx-green) */
.lk-cashback__bar { height: 6px; border-radius: 3px; background: var(--panel-3); overflow: hidden; margin-bottom: 10px; }
.lk-cashback__fill { height: 100%; background: var(--signal); border-radius: 3px; }
.lk-cashback__claim { width: 100%; background: var(--btn); color: var(--btn-ink); border: none; border-radius: var(--radius-pill); padding: 9px 0; font-size: 12px; font-weight: 600; cursor: pointer; }
.lk-cashback__claim:disabled { opacity: .4; cursor: default; }
.lk-cashback__hint { color: var(--faint); font-size: 12px; margin: 0; text-align: center; }
.lk-cashback__flash { font-size: 12px; margin: 8px 0 0; text-align: center; }
.lk-cashback__flash.is-ok { color: var(--ok); }
.lk-cashback__flash.is-bad { color: var(--bad); }
.lk-hold__tools { display: flex; }
.lk-hold__search { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 14px; color: var(--faint); }
.lk-hold__search input { background: none; border: none; outline: none; color: var(--bone); font-size: 12px; font-family: var(--font); width: 160px; }
.lk-hold__row.is-zero { opacity: .55; }
.lk-hold__px, .lk-hold__bal { text-align: right; }
.lk-hold__bal-qty { display: block; }
.lk-hold__bal-usd { display: block; color: var(--faint); font-size: 12px; }
.lk-hold__ops { display: flex; gap: 6px; justify-content: flex-end; }
.lk-hold__op { background: var(--panel-3); border: 1px solid var(--line); color: var(--stone); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.lk-hold__op--in { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.lk-hold__op:hover { filter: brightness(1.1); }
.lk-pnl__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.lk-pnl__title h2 { font-size: 12px; color: var(--faint); margin: 0; display: inline; font-weight: 500; }
.lk-pnl__fig { display: block; font-size: 20px; font-weight: 600; }
.lk-pnl__pills { display: flex; gap: 4px; }
.lk-pnl__pill { background: none; border: none; color: var(--faint); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.lk-pnl__pill.is-on { background: var(--panel-3); color: var(--bone); }
.lk-pnl__hint { color: var(--faint); font-size: 12px; margin: 0 0 12px; }
.lk-pnl__chart { height: 220px; }
/* VIP-buy + deposit sheets (shared partials, reused verbatim) */
.lk-depmodal .lk-sheet__panel { max-width: 380px; }
/* VIP-buy sheet: geometry cloned 1:1 from the classic skin's (lk-wallet.css, measured: 520px panel, 24/24/20 padding,
title + spinner inline, blurb, hairline, quote + address on the left, 112px QR on the right, warning line under it)
— rendered in nova's own type scale (Inter 12/14/16/20, weights 400–600), tokens and corner radii. */
.lk-vipbuy .lk-sheet__panel { width: 520px; max-width: 100%; padding: 24px 24px 20px; text-align: left; overflow: visible; max-height: none; }
.lk-vipbuy__headrow { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; margin: 0; }
.lk-vipbuy__headrow h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; line-height: 33px; letter-spacing: -0.02em; color: var(--bone); }
.lk-vipbuy__head-wait { display: grid; place-items: center; flex: none; width: 15px; height: 15px; }
.lk-vipbuy__head-wait[hidden] { display: none; }
.lk-vipbuy__head-spin {
width: 3px; height: 3px; border: 0; border-radius: 50%; background: transparent;
box-shadow:
0 -6px 0 0 rgb(255 255 255 / 1), 3px -5.3px 0 0 rgb(255 255 255 / .86), 5.3px -3px 0 0 rgb(255 255 255 / .72),
6px 0 0 0 rgb(255 255 255 / .58), 5.3px 3px 0 0 rgb(255 255 255 / .44), 3px 5.3px 0 0 rgb(255 255 255 / .32),
0 6px 0 0 rgb(255 255 255 / .22), -3px 5.3px 0 0 rgb(255 255 255 / .16), -5.3px 3px 0 0 rgb(255 255 255 / .12),
-6px 0 0 0 rgb(255 255 255 / .1), -5.3px -3px 0 0 rgb(255 255 255 / .14), -3px -5.3px 0 0 rgb(255 255 255 / .28);
animation: lk-vipbuy-spin .85s steps(12) infinite;
}
@keyframes lk-vipbuy-spin { to { transform: rotate(1turn); } }
.lk-depmodal__spin { width: 14px; height: 14px; border: 2px solid var(--panel-3); border-top-color: var(--signal); border-radius: 50%; display: inline-block; animation: nova-spin .8s linear infinite; }
@keyframes nova-spin { to { transform: rotate(360deg); } }
.lk-vipbuy__closed { margin: 10px 0 0; padding: 0; text-align: left; color: var(--stone); font-size: 14px; font-weight: 500; }
.lk-vipbuy__blurb { margin: 12px 0 0; color: var(--stone); font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.lk-vipbuy__blurb[hidden] { display: none; }
.lk-vipbuy__deal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; column-gap: 12px; gap: 0 12px; margin: 0; }
.lk-vipbuy__deal:has(:not([hidden])) { margin-top: 18px; }
.lk-vipbuy__quote { grid-column: 1; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--bone); }
.lk-vipbuy__pay-ico { display: grid; flex-shrink: 0; }
.lk-vipbuy__pay-ico:empty { display: none; }
.lk-vipbuy__pay-ico .asset-ico, .lk-vipbuy__pay-ico .asset-ico img, .lk-vipbuy__pay-ico .nova-asset-ico img { width: 32px; height: 32px; }
.lk-vipbuy__pay { display: grid; gap: 2px; min-width: 0; }
.lk-vipbuy__pay strong { display: block; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.01em; color: var(--bone); }
.lk-vipbuy__pay span { display: block; font-size: 12px; font-weight: 500; line-height: 20px; color: var(--stone); }
.lk-vipbuy.lk-sheet .lk-vipbuy__addr { grid-column: 1; display: grid; gap: 6px; width: auto; min-width: 0; margin-top: 14px; padding: 0; background: none; border: 0; border-radius: 0; }
.lk-vipbuy.lk-sheet .lk-vipbuy__addr > span, .lk-vipbuy.lk-sheet .lk-vipbuy__memo > span { display: block; color: var(--stone); font-size: 12px; font-weight: 500; line-height: 18px; }
.lk-vipbuy.lk-sheet .lk-vipbuy__addr code { display: block; margin: 0; min-width: 0; font-family: var(--addr); font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: -0.02em; word-break: break-all; color: var(--bone); }
.lk-vipbuy.lk-sheet .lk-vipbuy__memo { grid-column: 1 / -1; display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.lk-vipbuy.lk-sheet .lk-vipbuy__memo[hidden] { display: none; }
.lk-vipbuy__qr { box-sizing: border-box; grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; width: 112px; height: 112px; overflow: hidden; padding: 6px; border-radius: var(--radius); background: #fff; }
.lk-vipbuy__qr[hidden] { display: none; }
.lk-vipbuy__qr svg { display: block; width: 100%; height: 100%; }
.lk-vipbuy__note { display: none; margin: 12px 0 0; text-align: left; font-size: 12px; font-weight: 500; line-height: 16px; color: var(--bad); }
.lk-vipbuy__deal:has(:not([hidden])) + .lk-vipbuy__note { display: block; }
.lk-vipbuy__quote[hidden], .lk-vipbuy.lk-sheet .lk-vipbuy__addr[hidden], .lk-vipbuy__wait[hidden], .lk-vipbuy__err[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .lk-vipbuy__head-spin { animation: none; } }
/* Deposit-sheet address rows (shared class names, unchanged). */
.lk-vipbuy__line { width: 100%; background: var(--panel-3); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.lk-vipbuy__line span { display: block; }
.lk-vipbuy__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lk-vipbuy__head span { font-size: 12px; color: var(--faint); }
.lk-vipbuy__copy { background: none; border: none; color: var(--signal); font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.lk-vipbuy__line code { display: block; font-family: var(--mono); font-size: 12px; word-break: break-all; color: var(--bone); }
.lk-vipbuy__wait, .lk-vipbuy__err { margin: 14px 0 0; text-align: left; font-size: 14px; font-weight: 500; color: var(--stone); }
.lk-vipbuy__err { color: var(--bad); }
.lk-depmodal__x { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--panel-3); border: none; color: var(--bone); cursor: pointer; }
.lk-depmodal__head { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.lk-depmodal__head-txt h3 { font-size: 16px; margin: 0; }
.lk-depmodal__sub { color: var(--faint); font-size: 12px; margin: 2px 0 0; }
.lk-depmodal__field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--faint); margin-bottom: 14px; }
.lk-depmodal__netbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.lk-depmodal__wait { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 12px; justify-content: center; padding: 20px 0; }
/* This unconditional display:flex above (an author style) otherwise beats the browser's own
[hidden]{display:none} default outright — the spinner was rendering regardless of the actual
hidden attribute, visible on every page load before anything was even picked. */
.lk-depmodal__wait[hidden] { display: none; }
.lk-depmodal__qrwrap { display: flex; justify-content: center; margin-bottom: 14px; }
.deposit-qr { background: #fff; padding: 10px; border-radius: var(--radius); }
.lk-depmodal__addrbox { display: flex; flex-direction: column; gap: 10px; }
/* This whole box (QR, address, min-deposit) previously carried its own separate look (grey-
filled address line, an oversized QR) that never matched the rest of this page once everything
around it went cardless/flat — bring it in line: a compact QR (was rendering ~2x too big with
no size cap of its own), flat address line with just a bottom rule, icon-only copy button. */
[data-deposit-page] .deposit-qr { width: 160px; height: 160px; box-sizing: border-box; flex-shrink: 0; position: relative; }
[data-deposit-page] .deposit-qr > div { width: 100%; height: 100%; }
[data-deposit-page] .deposit-qr svg { display: block; width: 100%; height: 100%; }
/* Reference layout: QR on the left, address block to its right, flush with everything else on
this step (not centered) — .lk-depmodal__qrwrap's own justify-content:center (needed on other
pages this partial is shared with) doesn't apply here. */
/* The whole row (QR + address) must end where step 1/2's controls end (499px from the left
edge) — capping just the address box to 499px, as a previous attempt at this did, actually
made the ROW wider than 499px overall, since that 499px came AFTER the 160px QR + 24px gap
already ahead of it. Capping the row itself is what actually lines up the right edges. */
[data-deposit-page] .lk-depmodal__row { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 20px; max-width: 499px; }
[data-deposit-page] .lk-depmodal__qrwrap { justify-content: flex-start; margin-bottom: 0; }
[data-deposit-page] .lk-depmodal__addrbox { flex: 1; min-width: 0; justify-content: center; }
/* The coin's own icon, centered on the QR — no backdrop of its own (the icon is already a solid
circle in its own brand color; a white halo behind it just added an extra visible ring). Dead
center, well clear of the finder-pattern squares in the three corners, and error-correction
level M (set where this QR is built) tolerates a center obstruction this size fine regardless. */
.deposit-qr__badge {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
}
.deposit-qr__badge:empty { display: none; }
.deposit-qr__badge .asset-ico,
.deposit-qr__badge .asset-ico img,
.deposit-qr__badge .asset-ico__fallback { width: 28px; height: 28px; }
/* Row layout: label+address stack on the left, copy button vertically centered against the
WHOLE stack on the right (not just pinned level with the label) — was previously nested
inside the label's own row, so it only ever lined up with that one line, not the block below
it too. No divider line here — this page has none anywhere else either. */
[data-deposit-page] .lk-vipbuy__line { background: transparent; border: none; border-radius: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
[data-deposit-page] .lk-vipbuy__line[hidden] { display: none; }
[data-deposit-page] .lk-vipbuy__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-deposit-page] .lk-vipbuy__text span { color: var(--faint); font-size: 12px; text-transform: none; }
[data-deposit-page] .lk-vipbuy__addr code,
[data-deposit-page] .lk-vipbuy__line code { font-size: 14px; font-weight: 600; word-break: break-all; }
[data-deposit-page] .lk-vipbuy__copy {
width: 28px; height: 28px; border-radius: 50%; background: transparent; border: none; color: var(--bone); justify-content: center; gap: 0; flex-shrink: 0;
}
[data-deposit-page] .lk-vipbuy__copy span { display: none; }
/* Copy feedback — the JS already toggled .is-ok on click, there was just no rule reacting to it
(button looked identical before/after, no way to tell the click registered). Address text
glows the same green briefly too, not just the button. */
[data-deposit-page] .lk-vipbuy__copy.is-ok { color: var(--ok); }
[data-deposit-page] .lk-vipbuy__line code.is-ok { color: var(--ok); transition: color .15s ease; }
[data-deposit-page] .wd-leg { padding-top: 4px; max-width: 499px; }
/* Reverted: CSS zoom (used here briefly for "чуть покрупнее на ПК") breaks any tool that
highlights/picks elements via getBoundingClientRect without accounting for an ancestor's zoom
(e.g. the element picker in Cursor's browser tooling) — the highlight box stops lining up with
the real element. Not worth that regression for a cosmetic size bump. */
/* Withdraw page, ported to the deposit page's cardless skeleton ("1 в 1", withdraw's own logic
underneath) — new bits deposit has no equivalent of: the address/memo text fields (styled like
the coin/network pick buttons: bordered box, transparent fill, same 499/47px) and flattening
.wd-sum (shared with staking-desk.ejs, which keeps its own filled-panel look — scoped to
[data-withdraw-desk] only, not the base .wd-sum rule). */
[data-withdraw-desk] .wd-addr-field { margin-bottom: 12px; }
[data-withdraw-desk] .wd-addr-field:last-child { margin-bottom: 0; }
[data-withdraw-desk] .wd-addr-field[hidden] { display: none; }
[data-withdraw-desk] .wd-addr-input {
width: 499px; max-width: 100%; height: 44px; box-sizing: border-box;
background: transparent; border: 1px solid var(--line); border-radius: var(--radius);
padding: 0 14px; color: var(--bone); font-size: 14px; font-family: var(--font); outline: none;
}
[data-withdraw-desk] .wd-addr-input::placeholder { color: var(--faint); }
[data-withdraw-desk] .wd-addr-input:focus { border-color: var(--signal); }
[data-withdraw-desk] .wd-addr-input[aria-invalid="true"] { border-color: var(--bad); }
/* Match the address input's box exactly (44px, flush border, no big-number display font) —
was a much taller filled panel with a 26px oversized figure, out of place next to the plain
text fields above it. */
[data-withdraw-desk] .wd-sum { background: transparent; border: 1px solid var(--line); max-width: 499px; height: 44px; box-sizing: border-box; padding: 0 14px; display: flex; align-items: center; }
[data-withdraw-desk] .wd-send { flex: 1; min-width: 0; }
[data-withdraw-desk] .wd-send__fig { width: 100%; }
[data-withdraw-desk] .wd-sum__n { font-size: 14px; font-weight: 500; }
/* "All" moved back in, right inside the amount box (not a separate header row above it) — plain
text, no background, same treatment it always had. */
/* A plain 1px line between the $/coin toggle and "All" — with both just flat text at the same
weight and only a few px apart, they read as one jumbled group without it. */
[data-withdraw-desk] .wd-sum__all { flex-shrink: 0; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--bone); font-size: 12px; }
/* $/coin unit toggle — flat text, no pill background, hidden entirely for stablecoins (JS
toggles [hidden] once the picked symbol is known). Active option distinguished by color only. */
[data-withdraw-desk] .wd-amt-mode, [data-swap-desk] .wd-amt-mode { display: flex; flex-shrink: 0; margin-left: 10px; gap: 8px; }
[data-withdraw-desk] .wd-amt-mode[hidden], [data-swap-desk] .wd-amt-mode[hidden] { display: none; }
[data-withdraw-desk] .wd-amt-mode__opt, [data-swap-desk] .wd-amt-mode__opt { background: none; border: none; color: var(--faint); font-size: 12px; font-weight: 600; padding: 0; cursor: pointer; }
[data-withdraw-desk] .wd-amt-mode__opt.is-on, [data-swap-desk] .wd-amt-mode__opt.is-on { color: var(--bone); }
[data-withdraw-desk] .wd-sum__err { color: #ff4d4d; font-size: 12px; font-weight: 500; margin: 6px 0 0; }
[data-withdraw-desk] .wd-sum__err[hidden] { display: none; }
/* Over-balance now reads on the box border (matching the address field's own aria-invalid
border), not by tinting the typed number orange — the figure itself stays plain white. */
/* var(--bad) is the site's orange, used everywhere else — this one spot gets an actual red,
since orange read as unclear/not-quite-an-error here. Local override, not a token change. */
[data-withdraw-desk] .wd-sum.is-over { border-color: #ff4d4d; }
[data-withdraw-desk] .wd-leg { margin-top: 16px; }
/* The submit button used .btn--block's own 100%-of-parent width — the parent here is the full
696px form column, while every field above it (coin/network pick, address, amount box) is
capped to 499px, so the button alone stretched noticeably wider than everything it sits under. */
[data-withdraw-desk] [data-wd-submit] { max-width: 499px; margin-top: 16px; }
[data-withdraw-desk] [data-wd-submit]:disabled { background: var(--panel-3); color: var(--faint); cursor: not-allowed; }
/* Swap/staking amount boxes: same flush-border 44px input row as withdraw's — not the bulkier
filled-panel look staking's .wd-sum keeps by default (that default is what withdraw itself
deliberately overrode above). Reusing the exact treatment so all three step-flow pages read as
the same design, down to the CTA capped at the same 499px as the fields above it. */
[data-swap-desk] .wd-sum, [data-stake-desk] .wd-sum { background: transparent; border: 1px solid var(--line); max-width: 499px; height: 44px; box-sizing: border-box; padding: 0 14px; display: flex; align-items: center; }
[data-swap-desk] .wd-send, [data-stake-desk] .wd-send { flex: 1; min-width: 0; }
[data-swap-desk] .wd-send__fig, [data-stake-desk] .wd-send__fig { width: 100%; }
[data-swap-desk] .wd-sum__n, [data-stake-desk] .wd-sum__n { font-size: 14px; font-weight: 500; }
[data-swap-desk] .wd-sum__all, [data-stake-desk] .wd-sum__all { flex-shrink: 0; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line); color: var(--bone); font-size: 12px; background: none; border-top: none; border-right: none; border-bottom: none; cursor: pointer; }
[data-swap-desk] .wd-leg, [data-stake-desk] .wd-leg { margin-top: 16px; max-width: 499px; }
[data-swap-desk] [data-swap-submit], [data-stake-desk] [data-stake-submit] { max-width: 499px; margin-top: 16px; }
[data-swap-desk] .wd-sum.is-over, [data-stake-desk] .wd-sum.is-over { border-color: #ff4d4d; }
.lk-depmodal__notes { color: var(--faint); font-size: 12px; padding-left: 16px; margin: 10px 0 0; }
.lk-depmodal__notes li { margin-bottom: 4px; }
.lk-depmodal__err { color: var(--bad); font-size: 12px; text-align: center; margin: 10px 0 0; }
/* Withdraw: network pill picker + result sheet */
.wd-nets { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wd-nets__n { background: var(--panel); border: 1px solid var(--line); color: var(--stone); border-radius: var(--radius-sm); padding: 5px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.wd-nets__n.is-on { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.wd-sum__addr-err { color: var(--bad); }
/* Responsive: sidebar becomes an off-canvas drawer, header shows burger */
@media (max-width: 900px) {
.lk-app__body { padding: 16px; }
.lk-header__brand-name { display: inline; }
.lk-nav { display: none; }
.lk-header__burger, .nb__btn.lk-header__menu-btn { display: flex; }
.lk-header__deposit { padding: 0 12px; font-size: 12px; }
.lk-header__menu-ico--close { display: none; }
.lk-sidebar {
display: flex; position: fixed; top: 0; left: 0; z-index: 90; transform: translateX(-100%);
transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.5);
}
.lk-sidebar.lk-sidebar--mobile-open { transform: translateX(0); }
.lk-sidebar__close { display: flex; position: absolute; top: 14px; right: 14px; background: var(--panel-3); border: none; border-radius: 50%; width: 30px; height: 30px; align-items: center; justify-content: center; color: var(--bone); cursor: pointer; }
.lk-sidebar__grab { display: none; }
.lk-sidebar__backdrop:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 80; }
body.bw-sidebar-open .lk-header__menu-ico--open { display: none; }
body.bw-sidebar-open .lk-header__menu-ico--close { display: inline-flex; }
.lk-grid--2, .lk-grid--3 { grid-template-columns: 1fr; }
.nb__panel { width: calc(100vw - 32px); right: -8px; }
.lk-hist-layout { grid-template-columns: 1fr; }
.lk-hist__nav { flex-direction: row; overflow-x: auto; }
.lk-kyc__grid { grid-template-columns: 1fr; }
.lk-kyc__uploads { grid-template-columns: 1fr; }
.lk-set__row { flex-direction: column; align-items: flex-start; }
.lk-set__side { width: 100%; }
.lk-desk__grid--twin { grid-template-columns: 1fr; }
.lk-w__top, .lk-w__split { grid-template-columns: 1fr; }
}
/* The old .lk-mkt-detail__* per-coin page (real chart + swap link, no order book) this comment
used to describe was fully replaced by the KCEX-styled terminal at /app/trading/:symbol
(backend/views/skins/nova/site/market-detail.ejs + public/css/nova/nova-terminal.css,
.kx-* namespace) — that CSS block was dead (nothing emits .lk-mkt-detail* markup anymore)
and has been removed. .candle-chart__* below is unrelated and still real — the homepage's
own lookback chart (1D/5D/1M/6M/1Y, no pan) uses it, separately from the terminal's chart. */
/* candle-chart.js chrome — adapted from site.css's classic-skin version onto nova tokens
(nova has no --line-soft/--panel-2 grid divider token pairing the same way, so the grid
line falls back to the JS's own hardcoded default; everything else maps 1:1). */
.candle-chart { padding-bottom: 6px; }
.candle-chart__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.candle-chart__label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--faint); text-transform: uppercase; }
.candle-chart__tf { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; }
.candle-chart__tf-btn { border: 0; background: transparent; color: var(--stone); border-radius: 5px; padding: 5px 10px; font-size: 12px; font-weight: 600; font-family: var(--mono); cursor: pointer; }
.candle-chart__tf-btn:hover { color: var(--bone); }
.candle-chart__tf-btn.is-active { background: var(--panel-2); color: var(--bone); }
.candle-chart__price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.candle-chart__price { font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.candle-chart__chg { font-family: var(--mono); font-size: 12px; font-weight: 600; }
.candle-chart__chg.pos { color: var(--ok); }
.candle-chart__chg.neg { color: var(--down, var(--bad)); }
.candle-chart__when { font-size: 12px; color: var(--faint); font-weight: 600; }
.candle-chart__ohlc { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; font-size: 12px; color: var(--faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.candle-chart__ohlc strong { color: var(--stone); font-weight: 600; margin-left: 4px; }
.candle-chart__ohlc strong.pos { color: var(--ok); }
.candle-chart__ohlc strong.neg { color: var(--down, var(--bad)); }
.candle-chart__canvas { position: relative; height: 420px; width: 100%; margin: 0 -6px 4px; }
.candle-chart__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 12px; text-align: center; padding: 0 20px; pointer-events: none; z-index: 1; }
@media (max-width: 900px) {
.candle-chart__canvas { height: 300px; }
.candle-chart__head { flex-wrap: wrap; }
}
/* See lk-wallet.css: keep the mock-pay button hidden when [hidden] is set. */
[data-deposit-mockpay][hidden] { display: none !important; }
/* ── Transaction History (nova-only page: skins/nova/site/history.ejs + js/nova/nova-history.js).
Reuses the wallet's .wo-page/.wo-side shell, minus the right column. */
.wo-page--hist { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 1100px) { .wo-page--hist { grid-template-columns: 1fr; } }
.hx { padding: 0; }
.hx__head { padding: 24px 24px 0; border-bottom: 1px solid var(--line); }
.hx__head h1 { font-size: 20px; margin: 0 0 14px; }
.hx-tabs { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.hx-tabs::-webkit-scrollbar { display: none; }
.hx .hx-tabs__a { padding: 0 0 12px; border-bottom: 2px solid transparent; color: var(--stone); font-size: 14px; font-weight: 500; white-space: nowrap; }
.hx .hx-tabs__a:hover { color: var(--bone); }
.hx .hx-tabs__a.is-on { color: var(--bone); font-weight: 600; border-bottom-color: var(--bone); }
.hx__body { padding: 20px 24px 28px; }
.hx-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.hx-field { display: flex; flex-direction: column; gap: 8px; }
.hx-field__k { color: var(--bone); font-size: 12px; font-weight: 500; }
.hx-range { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent; }
.hx-range:focus-within { border-color: var(--stone); }
.hx-range__in { width: 118px; background: none; border: 0; padding: 0; color: var(--bone); font: inherit; font-size: 12px; color-scheme: dark; }
.hx-range__in::-webkit-calendar-picker-indicator { display: none; }
.hx-range__in:focus { outline: none; }
.hx-range__to { color: var(--faint); }
.hx-range__cal { display: inline-flex; background: none; border: 0; padding: 2px; color: var(--stone); cursor: pointer; }
.hx-range__cal:hover { color: var(--bone); }
.hx-range__cal svg { display: block; }
.hx-select { height: 40px; min-width: 150px; padding: 0 34px 0 14px; border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--bone); font: inherit; font-size: 12px; cursor: pointer; appearance: none; -webkit-appearance: none; color-scheme: dark;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23aaa'/%3E%3C/svg%3E") no-repeat right 14px center; }
.hx-select:focus { outline: none; border-color: var(--stone); }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 22px; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent; color: var(--bone); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.hx-btn:hover { border-color: var(--stone); }
.hx-btn svg { display: block; }
.hx-btn--refresh { margin-left: auto; }
.hx-note { margin: 16px 0 0; color: var(--faint); font-size: 12px; }
.hx-note a { color: var(--signal); }
.hx-scroll { margin-top: 24px; overflow-x: auto; }
.hx-table { width: 100%; border-collapse: collapse; }
.hx-table th, .hx-table td { text-align: left; padding: 14px 12px; font-size: 12px; white-space: nowrap; }
.hx-table th:first-child, .hx-table td:first-child { padding-left: 0; }
.hx-table th:last-child, .hx-table td:last-child { padding-right: 0; text-align: right; }
.hx-table th { color: var(--faint); font-size: 12px; font-weight: 500; border-bottom: 1px solid var(--line); }
.hx-table td { border-bottom: 1px solid var(--line); color: var(--bone); }
.hx-table tbody tr:last-child td { border-bottom: 0; }
.hx-table time { color: var(--stone); }
.hx-table b { font-weight: 600; }
.hx-table b.is-up { color: var(--ok); }
.hx-table b.is-down { color: var(--down); }
.hx-table b.is-wait { color: var(--pending); }
.hx-asset { display: inline-flex; align-items: center; gap: 8px; }
.hx-asset img, .hx-asset svg { width: 20px; height: 20px; }
.hx-pair { display: inline-flex; }
.hx-pair > :last-child { margin-left: -6px; }
.hx-addr { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--stone); font-family: var(--mono); font-size: 12px; }
.is-loading .hx-table tbody { opacity: .5; }
.hx-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0 12px; color: var(--stone); }
.hx-empty[hidden] { display: none; }
.hx-empty__art { display: block; width: 92px; height: 92px; }
.hx-empty p { margin: 0; font-size: 12px; }
.hx-pager { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 16px; }
.hx-pager[hidden] { display: none; }
.hx-pager a, .hx-pager button, .hx-pager span { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); background: none; color: var(--stone); font: inherit; font-size: 12px; cursor: pointer; }
.hx-pager a:hover, .hx-pager button:hover:not(:disabled) { color: var(--bone); background: var(--panel-2); }
.hx-pager .is-on { color: var(--bone); background: var(--panel-3); font-weight: 600; }
.hx-pager .is-off { color: var(--faint); cursor: default; }
.hx-pager__gap { cursor: default; }
@media (max-width: 640px) {
.hx__head { padding: 18px 16px 0; }
.hx__body { padding: 16px 16px 24px; }
.hx-field, .hx-range { width: 100%; }
.hx-range__in { flex: 1; width: auto; min-width: 0; }
.hx-select { width: 100%; }
.hx-filters > label.hx-field { flex: 1 1 100%; }
.hx-btn--refresh { margin-left: 0; }
}
/* History date-range picker — colors/sizes measured off the reference screenshot. */
.hx-range { position: relative; }
.hx-range__in { cursor: pointer; border-radius: 2px; padding: 3px 4px; }
.hx-range__in.is-active { background: #28272a; }
.hx-cal { position: absolute; top: calc(100% + 4px); left: -1px; z-index: 60; width: 560px; background: #18191c; border-radius: 4px; box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.hx-cal::before { content: ""; position: absolute; left: 0; right: 0; top: 48px; height: 1px; background: #222429; }
.hx-cal__months { display: flex; gap: 28px; padding: 0 16px 0 12px; }
.hx-cal__pane { width: 252px; }
.hx-cal__head { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.hx-cal__navs { display: flex; gap: 2px; }
.hx-cal__navs--r { justify-content: flex-end; }
.hx-cal__nav { width: 20px; height: 24px; padding: 0; border: 0; background: none; color: #5b606a; font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.hx-cal__nav:hover:not(:disabled) { color: #f2f4f6; }
.hx-cal__nav:disabled { color: #2e3237; cursor: default; }
.hx-cal__title { color: #f2f4f6; font-size: 14px; font-weight: 600; white-space: pre; }
.hx-cal__grid { display: grid; grid-template-columns: repeat(7, 36px); row-gap: 6px; padding: 16px 0 15px; }
.hx-cal__wd { height: 25px; display: flex; align-items: center; justify-content: center; color: #535963; font-size: 12px; }
.hx-cal__d { height: 24px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; color: #edf0f2; font: inherit; font-size: 12px; cursor: pointer; }
.hx-cal__d span { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.hx-cal__d:hover:not(:disabled):not(.is-sel) span { background: #2a2c31; }
.hx-cal__d:disabled { cursor: default; }
.hx-cal__d.is-out { color: #525862; }
.hx-cal__d.is-off { background: #222429; color: #515660; }
.hx-cal__d.is-in { background: #13274c; font-weight: 600; }
.hx-cal__d.is-in:hover span { background: none; }
.hx-cal__d.is-sel { font-weight: 600; }
.hx-cal__d.is-sel { background: #fff; color: #111214; }
.hx-cal__presets { position: relative; border-top: 1px solid #222429; display: flex; flex-wrap: wrap; gap: 12px 26px; padding: 20px 20px 16px; }
.hx-cal__preset { padding: 0; border: 0; background: none; color: #f2f4f6; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.hx-cal__preset:hover { color: var(--signal); }
@media (max-width: 640px) {
.hx-cal { width: calc(100vw - 32px); max-width: 560px; }
.hx-cal::before { display: none; }
.hx-cal__months { flex-direction: column; gap: 0; align-items: center; padding: 0; }
.hx-cal__head { border-bottom: 1px solid #222429; }
}
/* Year / month grids of the history picker (open by clicking the year in a month title). */
.hx-cal__ybtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.hx-cal__ybtn:hover { color: var(--signal); }
.hx-cal__big { padding: 0 16px 0 12px; }
.hx-cal__cells { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 6px; padding: 24px 0 23px; }
.hx-cal__cell { height: 48px; padding: 0; border: 0; background: none; display: flex; align-items: center; justify-content: center; color: #edf0f2; font: inherit; font-size: 12px; cursor: pointer; }
.hx-cal__cell span { min-width: 64px; height: 28px; padding: 0 10px; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.hx-cal__cell:hover:not(:disabled):not(.is-sel) span { background: #2a2c31; }
.hx-cal__cell.is-out { color: #525862; }
.hx-cal__cell:disabled { color: #515660; cursor: default; }
.hx-cal__cell.is-sel span { background: #fff; color: #111214; font-weight: 600; }
.hx-cal__big .hx-cal__nav { width: 26px; height: 28px; font-size: 20px; }
.wo-side__ico { display: block; flex-shrink: 0; }
.wo-side__link { white-space: nowrap; }
/* ── PNL Analysis (nova-only: skins/nova/site/pnl.ejs + js/nova/nova-pnl.js) ── */
.pa { gap: 20px; }
.pa__head h1 { font-size: 20px; margin: 0; }
.pa__upd { margin: 6px 0 0; color: var(--faint); font-size: 12px; }
.pa-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pa-acc { display: flex; gap: 4px; flex-wrap: wrap; }
.pa-acc__b, .pa-view__b, .pa-range__b, .pa-pill, .pa-share, .pa-tabs__b, .pa-cal__nav { font: inherit; cursor: pointer; }
.pa-acc__b { height: 38px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; color: var(--stone); font-size: 14px; font-weight: 500; }
.pa-acc__b:hover { color: var(--bone); }
.pa-acc__b.is-on { border-color: var(--line-2); color: var(--bone); font-weight: 600; }
.pa-bar__r { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pa-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--bone); }
.pa-check input { position: absolute; opacity: 0; pointer-events: none; }
.pa-check__box { width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--stone); display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.pa-check__box svg { display: block; }
.pa-check input:checked + .pa-check__box { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.pa-check input:focus-visible + .pa-check__box { outline: 2px solid var(--signal); outline-offset: 2px; }
.pa-check__t { border-bottom: 1px dashed var(--stone); padding-bottom: 1px; }
.pa-share { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: none; color: var(--bone); font-size: 12px; font-weight: 600; }
.pa-share:hover { border-color: var(--stone); }
.pa-share svg { display: block; }
.pa-top { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 20px; }
.pa-top__r { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pa-asset { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px; }
.pa-asset__k { margin: 0; color: var(--stone); font-size: 14px; }
.pa-asset__v { margin: 12px 0 0; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-asset__split { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 52px; }
.pa-asset__split[hidden] { display: none; }
.pa-asset__split > div { display: flex; flex-direction: column; gap: 14px; }
.pa-asset__split > div + div { border-left: 1px solid var(--line); }
.pa-asset__split span { color: var(--stone); font-size: 14px; }
.pa-asset__split b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-card { padding: 22px 20px; }
.pa-card__h { margin: 0 0 24px; font-size: 14px; font-weight: 600; }
.pa-dot { border-bottom: 1px dashed var(--stone); padding-bottom: 1px; }
.pa-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pa-cell__k { display: block; color: var(--stone); font-size: 14px; margin-bottom: 10px; }
.pa-cell__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pa-cell__v { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-cell__v.is-up, .pa-cal__d b.is-up, .pa-cal__sum b.is-up, .pa-tip b.is-up { color: var(--ok); }
.pa-cell__v.is-down, .pa-cal__d b.is-down, .pa-cal__sum b.is-down, .pa-tip b.is-down { color: var(--down); }
.pa-badge { padding: 3px 6px; border-radius: 3px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-badge.is-up { color: var(--ok); background: rgba(2,192,118,.12); }
.pa-badge.is-down { color: var(--down); background: rgba(246,70,93,.12); }
.pa-chart { padding: 24px; }
.pa-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--line); }
.pa-tabs__b { padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--stone); font-size: 14px; font-weight: 600; margin-bottom: -1px; }
.pa-tabs__b:hover { color: var(--bone); }
.pa-tabs__b.is-on { color: var(--bone); border-bottom-color: var(--bone); }
/* PNL chart: no divider line under the Daily / Monthly tabs. */
.pa-chart .pa-tabs { border-bottom: none; }
.pa-chart .pa-tabs__b { margin-bottom: 0; }
.pa-chart__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 14px; }
.pa-view { display: flex; gap: 6px; }
.pa-view__b { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; color: var(--stone); font-size: 12px; }
.pa-view__b svg { display: block; }
.pa-view__b:hover { color: var(--bone); }
.pa-view__b.is-on { border-color: var(--line-2); color: var(--bone); font-weight: 600; }
.pa-range { display: flex; gap: 6px; }
.pa-range[hidden] { display: none; }
.pa-range__b { height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--stone); font-size: 12px; }
.pa-range__b:hover { color: var(--bone); }
.pa-range__b.is-on { border-color: var(--line-2); color: var(--bone); font-weight: 600; }
.pa-plot { width: 100%; min-height: 230px; }
.pa-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pa-grid { stroke: var(--line); stroke-width: 1; }
.pa-grid--zero { stroke: var(--line-2); }
.pa-axis { fill: var(--faint); font-size: 12px; font-family: inherit; }
.pa-bar.is-up { fill: var(--ok); }
.pa-bar.is-down { fill: var(--down); }
.pa-hit { fill: transparent; cursor: crosshair; }
.pa-line { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linejoin: round; }
.pa-area { fill: rgba(2,192,118,.10); }
.pa-dot-pt { fill: var(--signal); stroke: var(--ink); stroke-width: 2; }
.pa-tip { position: absolute; z-index: 80; pointer-events: none; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,.4); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.pa-tip[hidden] { display: none; }
.pa-tip span { color: var(--stone); }
.pa-cal__head { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 14px; font-size: 14px; }
.pa-cal__nav { width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: var(--radius); background: none; color: var(--bone); font-size: 16px; line-height: 1; }
.pa-cal__nav:disabled { opacity: .35; cursor: default; }
.pa-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.pa-cal__grid--m { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pa-cal__wd { color: var(--faint); font-size: 12px; text-align: center; padding-bottom: 4px; }
.pa-cal__d { min-height: 58px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.pa-cal__d.is-future { opacity: .35; }
.pa-cal__n { color: var(--stone); font-size: 12px; }
.pa-cal__d b { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-cal__sum { margin: 14px 0 0; color: var(--stone); font-size: 12px; text-align: right; }
.pa-eq { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; padding: 24px; }
.pa-eq__h { margin: 0 0 20px; font-size: 16px; font-weight: 600; }
.pa-eq__bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pa-pills { display: flex; align-items: center; gap: 6px; }
.pa-pill { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; color: var(--stone); font-size: 12px; }
.pa-pill svg { display: block; }
.pa-pill:hover { color: var(--bone); }
.pa-pill.is-on { border-color: var(--line-2); color: var(--bone); font-weight: 600; }
.pa-more { position: relative; }
.pa-more__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 90px; padding: 4px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.pa-more__menu[hidden] { display: none; }
.pa-more__menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--bone); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.pa-more__menu button:hover { background: var(--panel-3); }
.pa-eq__tz { color: var(--bone); font-size: 12px; }
.pa-port { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 8px; }
.pa-port__empty { padding-top: 12px; }
.pa-donut { display: block; }
.pa-donut path { cursor: pointer; }
.pa-legend { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 8px; }
.pa-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pa-legend i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.pa-legend span { flex: 1; color: var(--stone); }
.pa-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; max-width: calc(100vw - 32px); padding: 10px 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel); color: var(--bone); font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.pa-toast[hidden] { display: none; }
@media (max-width: 1100px) {
.pa-top, .pa-eq { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.pa-cells { grid-template-columns: 1fr 1fr; }
.pa-chart, .pa-eq { padding: 18px 16px; }
.pa-cal__d { min-height: 48px; padding: 5px; }
.pa-cal__d b { font-size: 12px; }
.pa-cal__grid--m { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* PNL monthly calendar — 6×2 table, sizes/colors measured off the kcex reference. */
.pa-mcal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid #222429; border-left: 1px solid #222429; }
.pa-mcal__c { height: 89px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; border-right: 1px solid #222429; border-bottom: 1px solid #222429; }
.pa-mcal__k { color: #535963; font-size: 12px; }
.pa-mcal__v { color: var(--stone); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.pa-mcal__v.is-none { color: #535963; }
.pa-mcal__v.is-up { color: var(--ok); }
.pa-mcal__v.is-down { color: var(--down); }
@media (max-width: 640px) {
.pa-mcal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-mcal__c { height: 72px; gap: 10px; }
}
.pa-plot:has(> .pa-mcal) { min-height: 0; padding-top: 13px; }
.pa-eq .hx-cal { box-shadow: none; }
/* My Assets: no visible scrollbar (the table can still be swiped sideways on narrow screens). */
.wo-assets, .wo-assets * { scrollbar-width: none; }
.wo-assets::-webkit-scrollbar, .wo-assets *::-webkit-scrollbar { display: none; }
/* My Assets: lk-wallet.js (shared) stretches the table to the card height — in nova the card ends at the last coin. */
.wo-assets .lk-hold__scroll { height: auto !important; flex: none !important; }
/* Header hover popups (Wallet / Account): open flush under the header line, and the trigger's
hover area reaches down to that line, so the pointer never crosses a dead strip on the way in.
(The old ::before bridge sat outside the popup's own overflow:hidden box, so it was clipped.) */
/* 11px = .lk-header's 10px bottom padding + 1px border — keep in step with the header's padding. */
.lk-walletpop { top: calc(100% + 11px); margin-top: 0; }
.lk-nav__wallet::after, .lk-nav__profile::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 11px; }
/* VIP card: "What is VIP?" trigger + explainer modal (wallet.ejs, js/nova/nova-vip-info.js). */
.lk-mem__notebar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.lk-mem__notebar .lk-mem__note { margin: 0; }
.lk-mem__what { padding: 0; border: 0; background: none; color: var(--stone); font: inherit; font-size: 12px; cursor: pointer; border-bottom: 1px dashed currentColor; line-height: 1.3; }
.lk-mem__what:hover { color: var(--bone); }
.vipinfo .vipinfo__panel { max-width: 440px; text-align: left; padding: 28px 26px 26px; }
.vipinfo__head { display: flex; align-items: center; gap: 14px; margin: 0 36px 18px 0; }
.vipinfo__crown { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-lg); background: rgba(2,192,118,.12); color: var(--signal); display: flex; align-items: center; justify-content: center; }
.vipinfo__crown svg { display: block; }
.vipinfo__head h3 { margin: 0 0 4px; font-size: 16px; }
.vipinfo__status { margin: 0; color: var(--faint); font-size: 12px; }
.vipinfo__status b { color: var(--stone); font-weight: 600; }
.vipinfo__status b.is-on { color: var(--signal); }
.vipinfo__lead { margin: 0 0 20px; color: var(--stone); font-size: 14px; line-height: 1.55; }
.vipinfo__k { margin: 0 0 8px; color: var(--faint); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.vipinfo__fees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.vipinfo__fees div { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 4px; }
.vipinfo__fees span { color: var(--faint); font-size: 12px; }
.vipinfo__fees b { font-size: 14px; font-variant-numeric: tabular-nums; }
.vipinfo__cmp { width: 100%; border-collapse: collapse; font-size: 12px; }
.vipinfo__cmp th, .vipinfo__cmp td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vipinfo__cmp thead th { color: var(--faint); font-size: 12px; font-weight: 600; }
.vipinfo__cmp tbody th { color: var(--stone); font-weight: 500; }
.vipinfo__cmp td { color: var(--stone); }
.vipinfo__cmp td.is-vip { color: var(--signal); font-weight: 600; }
.vipinfo__cmp tr > :first-child { padding-left: 0; }
.vipinfo__cmp tr > :last-child { padding-right: 0; }
.vipinfo__note { margin: 12px 0 0; color: var(--faint); font-size: 12px; line-height: 1.5; }
.vipinfo__cta { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin-top: 20px; border: 0; border-radius: var(--radius); background: var(--btn); color: var(--btn-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vipinfo__cta:hover { background: var(--btn-hover); }
.vipinfo__cta--ghost { background: none; border: 1px solid var(--line-2); color: var(--bone); }
.vipinfo__cta--ghost:hover { background: none; border-color: var(--stone); }
.vipinfo__x { top: 18px; right: 18px; width: 34px; height: 34px; padding: 0; border-radius: var(--radius-lg); background: var(--panel-2); border: 1px solid var(--line); color: var(--stone); display: flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s; }
.vipinfo__x:hover { color: var(--bone); border-color: var(--line-2); }
.vipinfo__x svg { display: block; }
.vipinfo__head { margin-right: 44px; }
/* ── Orders center (nova-only: skins/nova/site/orders.ejs + js/nova/nova-orders.js) ── */
.od { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.od-side { padding: 18px 0; }
.od-grp + .od-grp { margin-top: 10px; }
.od-grp__h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--bone); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.od-grp__h > span { flex: 1; }
.od-grp__h > svg:last-child { color: var(--stone); transition: transform .15s ease; transform: rotate(180deg); }
.od-grp__h[aria-expanded="false"] > svg:last-child { transform: none; }
.od-grp__ico { display: block; flex-shrink: 0; }
.od-grp__items { display: flex; flex-direction: column; gap: 4px; padding: 6px 0 4px; }
.od-grp__items[hidden] { display: none; }
.od-item { display: block; width: 100%; padding: 12px 14px 12px 44px; border: 1px solid transparent; border-radius: var(--radius-lg); background: none; color: var(--stone); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.od-item:hover { color: var(--bone); }
.od-item.is-on { border-color: var(--line-2); color: var(--bone); font-weight: 600; }
.od-main { display: flex; flex-direction: column; padding: 24px 28px 24px; min-width: 0; min-height: 560px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.od-title { margin: 0 0 18px; font-size: 20px; }
.od-flash { margin: 0 0 14px; font-size: 12px; }
.od-flash.is-ok { color: var(--ok); }
.od-flash.is-bad { color: var(--bad); }
.od-filters .hx-select { min-width: 170px; }
.od-filters [hidden] { display: none; }
.od-scroll { margin-top: 22px; }
.od-table th { font-size: 12px; }
.od-table td { font-size: 12px; }
.od-table th:last-child, .od-table td:last-child { text-align: right; }
.od-table td:last-child .od-act { justify-content: flex-end; }
.od-table b.is-up { color: var(--ok); font-weight: 600; }
.od-table b.is-down { color: var(--down); font-weight: 600; }
.od-two { display: inline-flex; align-items: center; gap: 6px; }
.od-two i { font-style: normal; color: var(--line-2); }
.od-act { display: flex; margin: 0; }
.od-act__b { height: 28px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--radius); background: none; color: var(--bone); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.od-act__b:hover { border-color: var(--stone); }
.od-pager { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: auto; padding-top: 28px; }
.od-pager__b { padding: 0; border: 0; background: none; color: var(--stone); font: inherit; font-size: 12px; cursor: pointer; }
.od-pager__b:hover:not(:disabled) { color: var(--bone); }
.od-pager__b:disabled { color: var(--faint); cursor: default; }
.od-pager__in { width: 60px; height: 32px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--panel-2); color: var(--bone); font: inherit; font-size: 12px; text-align: center; color-scheme: dark; }
.od-pager__in:focus { outline: none; border-color: var(--stone); }
.od-pager__t { color: var(--stone); font-size: 12px; }
@media (max-width: 900px) {
.od { grid-template-columns: 1fr; }
.od-side { border-right: 0; border-bottom: 1px solid var(--line); }
.od-grp__items { flex-direction: row; flex-wrap: wrap; }
.od-item { width: auto; padding: 8px 12px; }
.od-main { padding: 18px 16px; }
}
/* Styled dropdown replacing the native