--n-*). Працює у світлій і темній темі.
СИГНАТУРА: уся біржа фарбується в ОБРАНИЙ глобальний акцент (палітра K+, html[data-kp-accent]).
Ідентичність валюти лишається лише на іконках. */
.kp-exchange-redesign {
max-width: 1180px;
margin: 0 auto;
padding: 24px 16px 64px;
display: flex;
flex-direction: column;
}
.kp-exchange-redesign .num,
.kp-exchange-redesign [data-rate-current],
.kp-exchange-redesign .w-rate-chart__rate { font-variant-numeric: tabular-nums; }
.kp-exchange-flash {
max-width: 760px;
margin: 0 auto 16px;
padding: 12px 16px;
border-radius: 12px;
font-size: .88rem;
border: 1px solid var(--border);
}
.kp-exchange-flash--ok,
.kp-exchange-flash--success {
color: var(--ok);
background: color-mix(in srgb, var(--ok) 12%, transparent);
border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}
.kp-exchange-flash--error {
color: var(--err);
background: color-mix(in srgb, var(--err) 12%, transparent);
border-color: color-mix(in srgb, var(--err) 40%, transparent);
}
.kp-exchange-flash--info {
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.kp-exchange-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 22px;
}
.kp-exchange-tab {
--c: var(--accent);
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 12px 14px;
border-radius: 16px;
text-align: left;
cursor: pointer;
border: 1px solid var(--border);
background:
linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent),
var(--panel);
color: var(--text-2);
transition: border-color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.kp-exchange-tab:hover { transform: translateY(-2px); border-color: var(--n-line-strong, color-mix(in srgb, var(--text) 18%, transparent)); }
.kp-exchange-tab:active { transform: translateY(0); }
.kp-exchange-tab.is-active {
border-color: color-mix(in srgb, var(--c) 60%, transparent);
background:
linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), color-mix(in srgb, var(--c) 4%, transparent)),
var(--panel);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent),
0 14px 36px -16px color-mix(in srgb, var(--c) 55%, transparent);
}
.kp-exchange-tab__icon {
display: inline-flex; align-items: center; justify-content: center;
}
.kp-exchange-tab__icon img, .kp-exchange-tab__icon svg { display: block; }
.kp-exchange-tab__label {
font-family: var(--n-font, 'Inter', sans-serif);
font-weight: 700;
font-size: 0.9rem;
letter-spacing: -.01em;
color: var(--text);
}
.kp-exchange-tab.is-active .kp-exchange-tab__label { color: var(--c); }
.kp-exchange-tab__balance {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 5px;
font-family: var(--mono);
font-size: 0.9rem;
font-weight: 700;
color: var(--text);
}
.kp-exchange-tab__balance img, .kp-exchange-tab__balance svg { width: 15px; height: 15px; vertical-align: middle; }
.kp-exchange-tab__reserved { font-size: .74rem; color: var(--text-3); margin-top: 2px; }
.kp-exchange-tab.is-active .kp-exchange-tab__reserved { color: color-mix(in srgb, var(--c) 70%, var(--text-3)); }
.kp-exchange-pane { display: none; }
.kp-exchange-pane.is-active { display: block; animation: kpExFade .3s var(--ease); }
@keyframes kpExFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kp-exchange-grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 760px) { .kp-exchange-grid2 { grid-template-columns: 1fr; } }
.kp-exchange-pane > .w-exchange-panel { margin-top: 4px; }
.kp-exchange-redesign .kp-exchange-section {
border: 1px solid var(--border);
border-radius: 16px;
background:
linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent),
var(--panel);
padding: 18px;
margin-top: 22px;
}
.kp-exchange-redesign .kp-exchange-section__title {
margin: 0 0 14px;
font-family: var(--n-font, 'Inter', sans-serif);
font-size: 1rem;
font-weight: 800;
letter-spacing: -.01em;
}
.kp-exchange-redesign .kp-exchange-section__list { display: flex; flex-direction: column; gap: 10px; }
.kp-exchange-redesign .kp-exchange-empty {
font-family: var(--mono);
font-size: .82rem;
color: var(--text-3);
text-align: center;
padding: 22px 8px;
}
@media (max-width: 540px) { .kp-exchange-redesign { padding: 16px 12px 60px; } }
.kp-trade-row{
border:1px solid var(--border);
border-left:3px solid var(--text-3);
border-radius:12px;
padding:10px 12px;
background:var(--panel);
display:flex;flex-direction:column;gap:6px;
}
.kp-trade-row--sell{border-left-color:var(--accent);}
.kp-trade-row--buy{border-left-color:var(--ok);}
.kp-trade-row__head{
display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.kp-trade-row__side{font-weight:600;color:var(--text);display:inline-flex;align-items:center;gap:6px;}
.kp-trade-row__time{font-family:var(--mono);font-size:.78rem;color:var(--text-3);white-space:nowrap;}
.kp-trade-row__body{
display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.86rem;color:var(--text-2);
}
.kp-trade-row__cell{display:inline-flex;align-items:center;gap:4px;}
.kp-trade-row__cell--got strong{color:var(--text);}
.kp-exchange-top{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;margin-bottom:16px;align-items:start}
.kp-exchange-charts{display:flex;flex-direction:column;gap:16px;min-width:0}
.kp-exchange-side{position:sticky;top:16px}
@media (max-width:860px){
.kp-exchange-top{grid-template-columns:1fr}
.kp-exchange-side{position:static}
}
.kp-exchange-redesign{ --fs:14px; --fs-sm:11.5px; }
.kp-exchange-redesign .w-rate-chart__rate,
.kp-exchange-redesign .w-exchange-panel__title,
.kp-exchange-redesign .w-exchange-panel__side-btn,
.kp-exchange-redesign .w-exchange-panel__counter-btn,
.kp-exchange-redesign .w-exchange-panel__input-label,
.kp-exchange-redesign .w-exchange-panel__amount,
.kp-exchange-redesign .w-exchange-panel__give-cur,
.kp-exchange-redesign .w-exchange-panel__result-value,
.kp-exchange-redesign .w-exchange-panel__bd-row,
.kp-exchange-redesign .w-exchange-panel__market-btn,
.kp-exchange-redesign .w-exchange-panel__limit-label,
.kp-exchange-redesign .w-exchange-panel__limit-input,
.kp-exchange-redesign .w-exchange-panel__limit-unit,
.kp-exchange-redesign .w-exchange-panel__limit-result,
.kp-exchange-redesign .w-exchange-panel__limit-submit,
.kp-exchange-redesign .w-exchange-panel__modal-title,
.kp-exchange-redesign .w-exchange-panel__modal-btn,
.kp-exchange-redesign .w-exchange-panel__msg,
.kp-exchange-redesign .w-liq-ring__center-value,
.kp-exchange-redesign .w-liq-ring__leg-label,
.kp-exchange-redesign .w-liq-ring__leg-amount,
.kp-exchange-redesign .w-order-card__action,
.kp-exchange-redesign .w-order-card__label,
.kp-exchange-redesign .w-order-card__value,
.kp-exchange-redesign .w-order-card__cancel,
.kp-exchange-redesign .kp-exchange-flash,
.kp-exchange-redesign .kp-exchange-section__title,
.kp-exchange-redesign .kp-exchange-tab__label,
.kp-exchange-redesign .kp-exchange-tab__balance,
.kp-exchange-redesign .kp-trade-row__side{ font-size: var(--fs); }
.kp-exchange-redesign .w-rate-chart__pair,
.kp-exchange-redesign .w-rate-chart__delta,
.kp-exchange-redesign .w-rate-chart__avg,
.kp-exchange-redesign .w-rate-chart__tip,
.kp-exchange-redesign .w-rate-chart__tip-t,
.kp-exchange-redesign .w-rate-chart__empty,
.kp-exchange-redesign .w-rate-chart__range,
.kp-exchange-redesign .w-rate-chart__axis,
.kp-exchange-redesign .w-exchange-panel__for-label,
.kp-exchange-redesign .w-exchange-panel__max,
.kp-exchange-redesign .w-exchange-panel__result-label,
.kp-exchange-redesign .w-exchange-panel__rate-line,
.kp-exchange-redesign .w-exchange-panel__min-hint,
.kp-exchange-redesign .w-exchange-panel__limit-hint,
.kp-exchange-redesign .w-exchange-panel__modal-line span,
.kp-exchange-redesign .w-liq-ring__title,
.kp-exchange-redesign .w-liq-ring__center-label,
.kp-exchange-redesign .w-liq-ring__leg-label em,
.kp-exchange-redesign .w-liq-ring__leg-equiv,
.kp-exchange-redesign .w-liq-ring__caption,
.kp-exchange-redesign .w-liq-ring__orders,
.kp-exchange-redesign .w-liq-ring__empty,
.kp-exchange-redesign .w-order-card__status,
.kp-exchange-redesign .w-order-card__id,
.kp-exchange-redesign .w-order-card__ttl,
.kp-exchange-redesign .kp-exchange-tab__reserved,
.kp-exchange-redesign .kp-exchange-empty,
.kp-exchange-redesign .kp-trade-row__time,
.kp-exchange-redesign .kp-trade-row__body{ font-size: var(--fs-sm); }