/* =========================================================
   Consolidated App Stylesheet
   Bootstrap base is loaded from node_modules: /bootstrap/css/bootstrap.min.css
   Date: 2026-03-26
   ========================================================= */

/* Group 0: Imports (must stay first for CSS validity) */
@import url("poppins.css");

/* Group 1: Design tokens */
:root {
    --color-primary: #1c1c1d;
    --color-primary-dark: #1d1d1d;
    --color-primary-hover: #1c1c1c;
    --color-primary-light: rgb(72, 168, 238);
    --color-btn-disabled-bg: #879096;
    --color-btn-disabled-text: #ffffff;
    --color-btn-disabled-bg-dark: #3e3e3e;
    --color-btn-disabled-text-dark: #f9f9f9;
    --color-text-main: #464646;
    --color-text-body: #818181;
    --color-text-muted: #6c757d;
    --color-table-head: #758696;
    --color-border-dark: rgba(25, 25, 25, 0.5);
    --color-soft-border: rgba(240, 243, 250, 0.5);
    --color-soft-hover: #f9f9f9;
    --color-menu-border: #dfdfdf;
    --color-menu-focus: #f8f9fa;
    --color-menu-hover-text: #16181b;
    --color-menu-hover-bg: #f9f9f9;
    --color-menu-hover-text-dark: rgba(246, 248, 255, 0.96);
    --color-menu-hover-bg-dark: rgba(54, 54, 54, 0.2);
    --color-text-main-35: #18214d59;
    --loading-spinner-size-inline: 20px;
    --loading-spinner-size-panel: 28px;
    --loading-spinner-size-modal: 28px;
    --xapp-dark-surface-bg: #181b22;
    --xapp-bg: #ffffff;
    --xapp-shell-bg: #ffffff;
    --xapp-section-bg: #f1f4f9;
    --xapp-surface-start: rgba(255, 255, 255, 0.98);
    --xapp-surface-end: rgba(245, 248, 253, 0.98);
    --xapp-surface-border: rgba(30, 43, 76, 0.12);
    --xapp-text: #101828;
    --xapp-text-muted: #6f7b91;
    --xapp-table-head-bg: rgba(244, 247, 252, 0.95);
    --xapp-table-border: rgba(30, 43, 76, 0.1);
    --xapp-control-bg: rgba(255, 255, 255, 0.92);
    --xapp-control-border: rgba(30, 43, 76, 0.14);
    --xapp-nav-bg: rgba(255, 255, 255, 0.94);
    --xapp-nav-hover-bg: rgba(88, 104, 132, 0.08);
    --xapp-nav-muted: rgba(93, 103, 125, 0.9);
    --xapp-accent: #1049e8;
    --xapp-accent-rgb: 16, 73, 232;
    --xapp-chart-bg: #ffffff;
}

/* Group 3: App styles (from public/assets/css/style.css) */


#logo-header {
    content: url("/assets/img/logo.png");
    max-height: 45px;

}

div::-webkit-scrollbar {
    background: transparent;
}

body {
    font-family: "Poppins-Regular", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 0.9rem;

    line-height: 1.5;
    color: #18214D;
    background: rgb(255, 255, 255);
    font-weight: 400;
}

html.xapp-mode,
html.xapp-mode body {
    background: var(--xapp-bg) !important;
    font-size: 16px;
}

html.xapp-mode .body-content {
    background-color: var(--xapp-shell-bg);
}

html.xapp-mode.dark-mode,
html.xapp-mode.dark-mode body,
html.xapp-mode.dark-mode .body-content {
    background-color: var(--xapp-bg) !important;
}

html.xapp-mode .xapp-open-browser-link {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

html.xapp-mode .footer-link.xapp-open-browser-link {
    min-width: 0;
    min-height: 40px;
    color: inherit;
    vertical-align: baseline;
}

html.xapp-mode body {
    padding-bottom: calc(74px + env(safe-area-inset-bottom));
}

html.xapp-mode .xapp-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1060;
    margin-top: 0;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--xapp-surface-border);
    background: var(--xapp-nav-bg);
    box-shadow: 0 -18px 32px rgba(28, 35, 51, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html.xapp-mode .xapp-nav-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: min(100%, 620px);
    margin: 0 auto;
}

html.xapp-mode .xapp-nav-item {
    display: inline-flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--xapp-nav-muted);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 6px 2px;
    text-align: center;
    touch-action: manipulation;
    transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

html.xapp-mode .xapp-nav-item:hover,
html.xapp-mode .xapp-nav-item:focus-visible {
    color: var(--xapp-text);
    background-color: var(--xapp-nav-hover-bg);
    outline: 0;
}

html.xapp-mode .xapp-nav-item:active {
    transform: translateY(1px);
}

html.xapp-mode .xapp-nav-icon-wrap {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: currentColor;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

html.xapp-mode .xapp-nav-icon-wrap ion-icon {
    width: 24px;
    height: 24px;
}

html.xapp-mode .xapp-nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.xapp-mode .xapp-nav-item.is-active {
    color: var(--xapp-accent);
}

html.xapp-mode .xapp-nav-item.is-active .xapp-nav-icon-wrap {
    color: #ffffff;
    background: var(--xapp-accent);
    box-shadow: 0 10px 22px rgba(var(--xapp-accent-rgb), 0.28);
}

html.xapp-mode.dark-mode .xapp-footer {
    border-top-color: var(--xapp-surface-border);
    background: var(--xapp-nav-bg);
    box-shadow: 0 -20px 34px rgba(0, 0, 0, 0.34);
}

html.xapp-mode.dark-mode .xapp-nav-item {
    color: var(--xapp-nav-muted);
}

html.xapp-mode.dark-mode .xapp-nav-item:hover,
html.xapp-mode.dark-mode .xapp-nav-item:focus-visible {
    color: var(--xapp-text);
    background-color: var(--xapp-nav-hover-bg);
}

html.xapp-mode.dark-mode .xapp-nav-item.is-active {
    color: #ffffff;
}

footer {
    margin-top: 20px;
}

html {
    scrollbar-gutter: stable;
}

body h4 {
    font-size: 18px;
    color: rgb(75, 75, 75);
    letter-spacing: 2px;
}

ion-icon.icon {
    font-size: inherit;
    vertical-align: middle;
}

.modal-header {
    border-bottom: 0px;
}

.modal-footer {
    border-top: 0px;
}

.modal-content {
    background: linear-gradient(rgba(245, 245, 245, 1), rgba(255, 255, 255, 1));
}

.dashboard-inline-action-icon,
.dashboard-inline-search-icon,
.trade-toolbar-icon,
.trade-stepper-icon,
.markets-category-toggle-icon,
.trade-open-order-trash-icon,
.payment-hero-icon,
.dashboard-warning-icon,
.trade-empty-state-icon {
    display: inline-block;
    vertical-align: middle;
}

.dashboard-inline-action-icon {
    font-size: 1.1rem;
    color: var(--color-primary);
}

.dashboard-inline-search-icon {
    font-size: 1rem;
    color: currentColor;
}

.dashboard-warning-icon {
    width: 75px;
    height: 75px;
    color: orange;
}

.trade-toolbar-icon {
    font-size: 1.25rem;
    color: currentColor;
}

.trade-stepper-icon {
    font-size: 1.2rem;
    color: currentColor;
}

.trade-open-order-trash-icon {
    font-size: 1rem;
    color: #dc3545;
}

.trade-empty-state-icon {
    width: 32px;
    height: 32px;
    color: grey;
}

.markets-category-toggle-icon {
    font-size: 1.35rem;
    color: grey;
}

.payment-hero-icon {
    width: 72px;
    height: 57px;
    color: currentColor;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1030;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #f0f0f0;
    overflow: visible;
}

header .navbar {
    --bs-navbar-padding-x: 0.5rem;
}

header .navbar,
#headerMenu,
.main-header-menu,
.main-header-account-nav,
.main-header-account-dropdown {
    overflow: visible;
}

.main-header-menu {
    align-items: center;
    width: 100%;
}

#navBar {
    margin-top: 0px;
    align-items: center;
}

#navBar > .nav-item {
    display: flex;
    align-items: center;
    border: 2px solid transparent;
}

.main-header-menu-column {
    display: flex;
    align-items: center;
    min-width: 0;
}

.main-header-menu-column-primary {
    flex: 1 1 auto;
    min-width: 0;
}

.main-header-menu-column-secondary {
    flex: 0 0 auto;
    margin-left: auto;
    justify-content: flex-end;
}

.cookie-consent-banner {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 1080;
    width: min(94vw, 760px);
}

.cookie-consent-card {
    border: 1px solid rgba(30, 38, 54, 0.12);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 30px rgba(17, 26, 44, 0.16);
    padding: 0.75rem 0.9rem;
}

.cookie-consent-title {
    margin: 0 0 0.35rem;
    font-size: 0.98rem;
    font-weight: 700;
    color: rgba(33, 42, 62, 0.95);
}

.cookie-consent-copy {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: rgba(55, 66, 88, 0.9);
}

.cookie-consent-actions {
    margin-top: 0.65rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .cookie-consent-banner {
        bottom: 10px;
    }

    .cookie-consent-card {
        padding: 0.65rem 0.72rem;
    }

    .cookie-consent-actions {
        justify-content: stretch;
    }

    .cookie-consent-actions .btn {
        flex: 1 1 0;
    }
}

/* xApp theme palettes mirror Xaman's four app styles without changing public /trade. */
html.xapp-mode[data-xapp-style="LIGHT"],
html.xapp-mode[data-xapp-style="DEFAULT"] {
    --xapp-bg: #ffffff;
    --xapp-shell-bg: #ffffff;
    --xapp-section-bg: #f1f4f9;
    --xapp-surface-start: rgba(255, 255, 255, 0.98);
    --xapp-surface-end: rgba(245, 248, 253, 0.98);
    --xapp-surface-border: rgba(28, 45, 82, 0.12);
    --xapp-text: #101828;
    --xapp-text-muted: #6f7b91;
    --xapp-table-head-bg: rgba(244, 247, 252, 0.95);
    --xapp-table-border: rgba(30, 43, 76, 0.1);
    --xapp-control-bg: rgba(255, 255, 255, 0.94);
    --xapp-control-border: rgba(30, 43, 76, 0.14);
    --xapp-nav-bg: rgba(255, 255, 255, 0.94);
    --xapp-nav-hover-bg: rgba(88, 104, 132, 0.08);
    --xapp-nav-muted: rgba(93, 103, 125, 0.9);
    --xapp-accent: #1049e8;
    --xapp-accent-rgb: 16, 73, 232;
    --xapp-chart-bg: #ffffff;
}

html.xapp-mode[data-xapp-style="DARK"] {
    --xapp-bg: #000000;
    --xapp-shell-bg: #000000;
    --xapp-section-bg: #181b22;
    --xapp-surface-start: rgba(24, 27, 34, 0.96);
    --xapp-surface-end: rgba(10, 12, 16, 0.98);
    --xapp-surface-border: rgba(255, 255, 255, 0.1);
    --xapp-text: rgba(255, 255, 255, 0.96);
    --xapp-text-muted: rgba(177, 186, 211, 0.86);
    --xapp-table-head-bg: rgba(255, 255, 255, 0.045);
    --xapp-table-border: rgba(255, 255, 255, 0.08);
    --xapp-control-bg: rgba(12, 13, 16, 0.92);
    --xapp-control-border: rgba(255, 255, 255, 0.16);
    --xapp-nav-bg: rgba(0, 0, 0, 0.94);
    --xapp-nav-hover-bg: rgba(255, 255, 255, 0.06);
    --xapp-nav-muted: rgba(151, 160, 194, 0.92);
    --xapp-accent: #1254ff;
    --xapp-accent-rgb: 18, 84, 255;
    --xapp-chart-bg: #000000;
}

html.xapp-mode[data-xapp-style="MOONLIGHT"] {
    --xapp-bg: #181b22;
    --xapp-shell-bg: #181b22;
    --xapp-section-bg: #222532;
    --xapp-surface-start: rgba(37, 40, 53, 0.96);
    --xapp-surface-end: rgba(24, 27, 34, 0.98);
    --xapp-surface-border: rgba(174, 188, 220, 0.12);
    --xapp-text: rgba(248, 250, 255, 0.96);
    --xapp-text-muted: rgba(177, 185, 209, 0.86);
    --xapp-table-head-bg: rgba(174, 188, 220, 0.08);
    --xapp-table-border: rgba(174, 188, 220, 0.12);
    --xapp-control-bg: rgba(29, 32, 42, 0.94);
    --xapp-control-border: rgba(174, 188, 220, 0.16);
    --xapp-nav-bg: rgba(24, 27, 34, 0.96);
    --xapp-nav-hover-bg: rgba(255, 255, 255, 0.06);
    --xapp-nav-muted: rgba(154, 164, 198, 0.92);
    --xapp-accent: #1254ff;
    --xapp-accent-rgb: 18, 84, 255;
    --xapp-chart-bg: #181b22;
}

html.xapp-mode[data-xapp-style="ROYAL"] {
    --xapp-bg: #020a35;
    --xapp-shell-bg: #020a35;
    --xapp-section-bg: #062171;
    --xapp-surface-start: rgba(7, 31, 102, 0.98);
    --xapp-surface-end: rgba(3, 13, 56, 0.98);
    --xapp-surface-border: rgba(72, 116, 255, 0.2);
    --xapp-text: rgba(255, 255, 255, 0.97);
    --xapp-text-muted: rgba(190, 199, 226, 0.86);
    --xapp-table-head-bg: rgba(44, 93, 226, 0.16);
    --xapp-table-border: rgba(72, 116, 255, 0.18);
    --xapp-control-bg: rgba(7, 23, 84, 0.94);
    --xapp-control-border: rgba(72, 116, 255, 0.22);
    --xapp-nav-bg: rgba(2, 10, 53, 0.96);
    --xapp-nav-hover-bg: rgba(72, 116, 255, 0.14);
    --xapp-nav-muted: rgba(187, 197, 229, 0.9);
    --xapp-accent: #1254ff;
    --xapp-accent-rgb: 18, 84, 255;
    --xapp-chart-bg: #020a35;
}

html.xapp-mode,
html.xapp-mode body,
html.xapp-mode .body-content {
    background-color: var(--xapp-bg) !important;
    color: var(--xapp-text);
}

html.xapp-mode #ChartData {
    background-color: var(--xapp-chart-bg);
}

html.xapp-mode #ChartData.trade-chart-data-locked {
    background-color: var(--xapp-chart-bg);
    border-bottom-color: var(--xapp-surface-border);
}

html.xapp-mode .settings .card,
html.xapp-mode .modal-content {
    background: linear-gradient(180deg, var(--xapp-surface-start) 0%, var(--xapp-surface-end) 100%);
    border-color: var(--xapp-surface-border);
    color: var(--xapp-text);
}

html.xapp-mode .settings .card-body,
html.xapp-mode .card-body,
html.xapp-mode .tab-content,
html.xapp-mode .accordion_options {
    color: var(--xapp-text);
}

html.xapp-mode .text-secondary,
html.xapp-mode .text-muted,
html.xapp-mode .form-text,
html.xapp-mode .trade-token-label-muted,
html.xapp-mode .settings .table thead th,
html.xapp-mode .settings .table tbody td,
html.xapp-mode .settings .table tbody th,
html.xapp-mode .trade-history-amm-toggle-label {
    color: var(--xapp-text-muted) !important;
}

html.xapp-mode #titlePrice,
html.xapp-mode .trade-title,
html.xapp-mode .trade-header-meta,
html.xapp-mode .settings .table tbody td a,
html.xapp-mode .settings .table tbody th a {
    color: var(--xapp-text);
}

html.xapp-mode .table-head-soft,
html.xapp-mode .settings .table thead {
    background-color: var(--xapp-table-head-bg);
}

html.xapp-mode .settings .table,
html.xapp-mode .settings .table tbody tr,
html.xapp-mode .settings .table tbody td,
html.xapp-mode .settings .table tbody th,
html.xapp-mode .settings .table thead th {
    border-color: var(--xapp-table-border);
}

html.xapp-mode .form-control,
html.xapp-mode .form-select,
html.xapp-mode .input-group-text,
html.xapp-mode .btn-outline-dark,
html.xapp-mode #toggleTicker.btn-outline-dark,
html.xapp-mode .trade-chart-config-btn,
html.xapp-mode .trade-accordion-container {
    background-color: var(--xapp-control-bg);
    border-color: var(--xapp-control-border);
    color: var(--xapp-text);
}

html.xapp-mode .form-control::placeholder {
    color: var(--xapp-text-muted);
}

html.xapp-mode .nav-tabs {
    border-bottom-color: var(--xapp-table-border);
}

html.xapp-mode #orderTab .nav-link,
html.xapp-mode .trade-orders-card-body .nav-tabs .nav-link {
    color: var(--xapp-text-muted);
}

html.xapp-mode #orderTab .nav-link.active,
html.xapp-mode .trade-orders-card-body .nav-tabs .nav-link.active {
    color: var(--xapp-text);
    background-color: var(--xapp-control-bg);
    border-color: var(--xapp-control-border) var(--xapp-control-border) transparent;
}

html.xapp-mode .xapp-footer {
    border-top-color: var(--xapp-surface-border);
    background: var(--xapp-nav-bg);
}

html.xapp-mode .xapp-nav-item {
    color: var(--xapp-nav-muted);
}

html.xapp-mode .xapp-nav-item:hover,
html.xapp-mode .xapp-nav-item:focus-visible {
    color: var(--xapp-text);
    background-color: var(--xapp-nav-hover-bg);
}

html.xapp-mode .xapp-nav-item.is-active {
    color: var(--xapp-accent);
}

html.xapp-mode .xapp-nav-item.is-active .xapp-nav-icon-wrap {
    background: var(--xapp-accent);
    box-shadow: 0 10px 22px rgba(var(--xapp-accent-rgb), 0.28);
}

html.xapp-mode .xapp-orderbook-side,
html.xapp-mode .xapp-orderbook-spread {
    border-color: var(--xapp-surface-border);
    background: linear-gradient(180deg, var(--xapp-surface-start) 0%, var(--xapp-surface-end) 100%);
}

html.xapp-mode .xapp-orderbook-side-title {
    border-bottom-color: var(--xapp-table-border);
    color: var(--xapp-text-muted);
}

html.xapp-mode .xapp-orderbook-spread {
    color: var(--xapp-text-muted);
}

html.xapp-mode .xapp-orderbook-spread strong {
    color: var(--xapp-text);
}

html.xapp-mode .settings .table tbody td.green,
html.xapp-mode .settings .table tbody th.green,
html.xapp-mode #tTransactions td.green,
html.xapp-mode #tSellOffers td.green,
html.xapp-mode #tBuyOffers td.green {
    color: #2bc9b4 !important;
}

html.xapp-mode .settings .table tbody td.red,
html.xapp-mode .settings .table tbody th.red,
html.xapp-mode #tTransactions td.red,
html.xapp-mode #tSellOffers td.red,
html.xapp-mode #tBuyOffers td.red {
    color: #ff231f !important;
}

html.xapp-mode #tSellOffers td {
    color: #ff231f !important;
}

html.xapp-mode #tBuyOffers td {
    color: #2bc9b4 !important;
}

html.xapp-mode #tSellOffers .offer-row-empty td,
html.xapp-mode #tBuyOffers .offer-row-empty td {
    color: var(--xapp-text-muted) !important;
}

html.xapp-mode.dark-mode .table tbody tr:hover > td.green,
html.xapp-mode.dark-mode .table tbody tr:hover > th.green {
    color: #2bc9b4 !important;
}

html.xapp-mode.dark-mode .table tbody tr:hover > td.red,
html.xapp-mode.dark-mode .table tbody tr:hover > th.red {
    color: #ff231f !important;
}

.dark-mode .cookie-consent-card {
    border-color: rgba(166, 179, 208, 0.25);
    background: rgba(23, 29, 41, 0.97);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
}

.dark-mode .cookie-consent-title {
    color: rgba(225, 232, 248, 0.96);
}

.dark-mode .cookie-consent-copy {
    color: rgba(193, 205, 229, 0.92);
}

/* Link reset (text-decoration); color tokens are defined later in compatibility overrides. */
a,
a:hover {
    text-decoration: none;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mb15 {
    margin-bottom: 15px;
}

::-webkit-scrollbar {
    background: transparent;
    width: 6px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: rgba(76, 88, 107, 0.34);
    border: solid rgba(255, 255, 255, 0.55) 1px;
    border-radius: 999px;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: rgba(174, 188, 220, 0.3);
    border-color: rgba(26, 33, 47, 0.72);
}

.table tbody tr:hover {
    background: #eef2f4;
}

.green {
    color: #2bc9b4;
}

.red {
    color: #ff231f;
}

/* Preserve semantic trade colors inside standardized tables. */
.table td.green,
.table th.green,
.table td.red,
.table th.red {
    color: inherit;
}

.table td.green,
.table th.green {
    color: #2bc9b4 !important;
}

.table td.red,
.table th.red {
    color: #ff231f !important;
}

/* Base form skin; radius and theme-specific details are layered later. */
.light-bb,
.input-group-text {
    background-color: rgba(255, 255, 255, 0.82);
    border: 1px solid #f0f0f0;
}

.sm-gutters {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

.sm-gutters>.col,
.sm-gutters>[class*='col-'] {
    padding-right: 7.5px;
    padding-left: 7.5px;
}

.btn-1,
.btn-2 {
    display: inline-block;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 5px;
    padding: 9px 25px;
    margin-left: 15px;
}

.btn-1:hover,
.btn-2:hover {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

.btn-2 {
    background: var(--color-primary);
    color: #fff;
}

#send_all_btn,
#btnQrscan {
    color: var(--color-text-muted) !important;
}

#send_all_btn ion-icon,
#btnQrscan ion-icon {
    color: currentColor !important;
}

#send_all_btn:hover ion-icon,
#send_all_btn:focus ion-icon,
#btnQrscan:hover ion-icon,
#btnQrscan:focus ion-icon {
    color: var(--color-text-main) !important;
}

#send_all_btn:hover,
#send_all_btn:focus,
#btnQrscan:hover,
#btnQrscan:focus {
    color: var(--color-text-main) !important;
}

@keyframes pulse {
    0% {
        opacity: 1;
        width: 7px;
        height: 7px;
        left: 0;
        top: 0;
    }

    95% {
        opacity: 0.1;
        left: -10.5px;
        top: -10.5px;
        width: 28px;
        height: 28px;
    }

    100% {
        opacity: 0;
        width: 7px;
        height: 7px;
        left: 0;
        top: 0;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }
}

.header-img-icon .dropdown-item:nth-child(1) .icon {
    background: rgba(114, 124, 245, 0.1);
}

.header-img-icon .dropdown-item:nth-child(1) .icon i,
.header-img-icon .dropdown-item:nth-child(1) .icon ion-icon {
    color: #727cf5;
}

.header-img-icon .dropdown-item:nth-child(2) .icon {
    background: rgba(255, 51, 102, 0.1);
}

.header-img-icon .dropdown-item:nth-child(2) .icon i,
.header-img-icon .dropdown-item:nth-child(2) .icon ion-icon {
    color: #ff5680;
}

.header-img-icon .dropdown-item:nth-child(3) .icon {
    background: rgba(102, 209, 209, 0.1);
}

.header-img-icon .dropdown-item:nth-child(3) .icon i,
.header-img-icon .dropdown-item:nth-child(3) .icon ion-icon {
    color: #66d1d1;
}

.header-img-icon .dropdown-item:nth-child(4) .icon {
    background: rgba(251, 188, 6, 0.1);
}

.header-img-icon .dropdown-item:nth-child(4) .icon i,
.header-img-icon .dropdown-item:nth-child(4) .icon ion-icon {
    color: #fbbc06;
}

.header-img-icon .dropdown-item:nth-child(5) .icon {
    background: rgba(16, 183, 89, 0.1);
}

.header-img-icon .dropdown-item:nth-child(5) .icon i,
.header-img-icon .dropdown-item:nth-child(5) .icon ion-icon {
    color: #10b759;
}

.landing-info-one h2 {
    font-size: 30px;
    font-weight: 700;
}

.landing-info-one ul li i {
    font-size: 22px;
    margin-right: 8px;
}

.landing-info-one ul li {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-top: 10px;
}

.landing-info-one p {
    margin: 15px 0 30px;
}

.xumm-top-img {
    content: url("/assets/img/xaman-title.png") !important;
}

/* =========================================================
   Phase 4 Consolidation (ordered by module)
   1) Shared utilities
   2) Header / Footer / Notifications
   3) Dashboard
   4) Trade / Payment shared
   5) Allocation / Pools shared
   6) Collectibles
   7) Markets
   8) Home
   9) Profile
   10) Swap
   11) Welcome modal
   ========================================================= */

/* 1) Shared utilities */
.is-hidden {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.ml-1 {
    margin-left: 0.25rem !important;
}

.ml-2 {
    margin-left: 0.5rem !important;
}

.ml-3 {
    margin-left: 1rem !important;
}

.ml-4 {
    margin-left: 1.5rem !important;
}

.mr-1 {
    margin-right: 0.25rem !important;
}

.mr-2 {
    margin-right: 0.5rem !important;
}

.mr-3 {
    margin-right: 1rem !important;
}

.mr-4 {
    margin-right: 1.5rem !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.btn-block {
    display: block;
    width: 100%;
}

.badge-pill {
    border-radius: 10rem;
    padding-right: 0.6em;
    padding-left: 0.6em;
}

.badge-light {
    color: #212529;
    background-color: #f8f9fa;
}

.badge-dark {
    color: #fff;
    background-color: #343a40;
}

.badge-success {
    color: #fff;
    background-color: #28a745;
}

.badge-info {
    color: #fff;
    background-color: #17a2b8;
}

.badge-secondary {
    color: #fff;
    background-color: #6c757d;
}

.badge-primary {
    color: #fff;
    background-color: var(--color-primary);
}

.badge-danger {
    color: #fff;
    background-color: #dc3545;
}

.badge-warning {
    color: #212529;
    background-color: #ffc107;
}

.xumm-title-img {
    height: 30px !important;
}

/* 2) Header / Footer */
.header-padding-inherit {
    padding-right: inherit;
}

.navbar-nav-hidden {
    display: none;
}

.footer-brand-logo-default {
    width: 150px;
    filter: invert();
}

.footer-copy-bg {
    background-color: rgba(0, 0, 0, 0.05);
}

.dashboard-page-header {
    display: flex;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.dashboard-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

@media (max-width: 576px) {
    .dashboard-title-row {
        align-items: flex-start;
        gap: 0.75rem;
        padding-right: 0;
    }

    .allocation-title-row {
        padding-right: 0;
    }
}

.allocation-page-header,
.allocation-title-row {
    display: flex;
    align-items: center;
}

#allocationHeaderSpinnerSlot {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 1.25rem;
}

.allocation-loading-surface {
    transition: opacity 160ms ease, filter 160ms ease;
}

.allocation-loading-surface.is-loading {
    opacity: 0.58;
    filter: saturate(0.86);
}

.allocation-rate-skeleton-row td {
    vertical-align: middle;
}

.allocation-rate-skeleton-pill {
    display: inline-block;
    height: 0.82rem;
    border-radius: 999px;
    background: rgba(24, 33, 77, 0.12);
}

.allocation-rate-skeleton-pill-asset {
    width: 3.2rem;
}

.allocation-rate-skeleton-pill-size,
.allocation-rate-skeleton-pill-price {
    width: 4.4rem;
}

.allocation-rate-skeleton-pill-xrp {
    width: 4.8rem;
}

.dark-mode .allocation-rate-skeleton-pill {
    background: rgba(244, 248, 255, 0.12);
}

.collectibles-page-header,
.collectibles-title-row,
.rewards-page-header,
.rewards-title-row,
.pools-page-header,
.pools-title-row,
.market-maker-page-header,
.market-maker-title-row,
.payment-page-header,
.payment-title-row,
.swap-page-header,
.swap-title-row {
    display: flex;
    align-items: center;
}

.loading-spinner-title-inline {
    width: 1.05rem !important;
    height: 1.05rem !important;
    margin-top: 0;
}

.dashboard-latest-transactions-heading #dashboardLatestTransactionsSpinnerSlot {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.dashboard-latest-transactions-heading .loading-spinner-inline {
    float: none;
    margin-left: auto;
    flex: 0 0 auto;
}

.dashboard-upcoming-giveaways-heading #dashboardUpcomingGiveawaysSpinnerSlot {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.dashboard-upcoming-giveaways-heading .loading-spinner-inline {
    float: none;
    margin-left: auto;
    flex: 0 0 auto;
}

.dashboard-open-orders-heading #dashboardOpenOrdersSpinnerSlot {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.dashboard-open-orders-heading .loading-spinner-inline {
    float: none;
    margin-left: auto;
    flex: 0 0 auto;
}

.dashboard-upcoming-giveaways-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-latest-transactions-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-panel-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.45rem;
    line-height: 1;
    border-color: rgba(127, 138, 159, 0.45);
}

.dashboard-panel-toggle-icon {
    font-size: 0.95rem;
    transition: transform 0.2s ease;
}

#dashboardUpcomingGiveawaysToggle[aria-expanded="true"] .dashboard-panel-toggle-icon,
#dashboardLatestTransactionsToggle[aria-expanded="true"] .dashboard-panel-toggle-icon {
    transform: rotate(180deg);
}

.dashboard-latest-transactions-history {
    overflow: visible;
}

.dashboard-latest-transactions-list .dashboard-open-order-row {
    min-height: 0;
}

.dashboard-latest-transactions-view-all {
    color: rgba(63, 73, 92, 0.92);
    text-decoration: none;
}

.dashboard-latest-transactions-view-all:hover,
.dashboard-latest-transactions-view-all:focus {
    color: rgba(31, 38, 52, 0.96);
    text-decoration: underline;
}

.dashboard-latest-transaction-type-top {
    min-width: 0;
    max-width: 13.5rem;
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(63, 73, 92, 0.92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-latest-transaction-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.36rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10.5rem;
    text-align: right;
}

.dashboard-latest-transaction-value-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #5e6778;
    background: rgba(229, 233, 240, 0.95);
    line-height: 1.2;
}

.dashboard-latest-transaction-sequence {
    font-size: 0.75rem;
    color: rgba(85, 94, 110, 0.92);
    font-weight: 600;
}

.dashboard-latest-transaction-row .dashboard-open-order-row-bottom {
    align-items: center;
}

.dashboard-latest-transaction-type-bottom-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
}

.dashboard-latest-transaction-status {
    border-radius: 999px;
    padding: 0.08rem 0.42rem;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-latest-transaction-status-valid {
    color: #0f5132;
    background: rgba(198, 239, 206, 0.85);
}

.dashboard-latest-transaction-status-failed {
    color: #7a0e1b;
    background: rgba(255, 219, 224, 0.92);
}

.dashboard-latest-transaction-status-warning {
    color: #5f4a00;
    background: rgba(255, 237, 178, 0.95);
}

.dashboard-latest-transaction-status-pending {
    color: #5e6778;
    background: rgba(229, 233, 240, 0.94);
}

.dashboard-latest-transaction-date {
    text-align: left;
    white-space: nowrap;
}

.dashboard-latest-transactions-card .tx-memo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 0;
}

.dashboard-latest-transactions-card .dashboard-memo-icon {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
}

.dashboard-latest-transactions-card,
.dashboard-upcoming-giveaways-card,
.dashboard-open-orders-card,
.dashboard-latest-transactions-card * {
    cursor: default;
}

.dashboard-upcoming-giveaways-card *,
.dashboard-open-orders-card * {
    cursor: default;
}

.dashboard-latest-transactions-card a[href],
.dashboard-latest-transactions-card a[href] *,
.dashboard-latest-transactions-card button,
.dashboard-latest-transactions-card button *,
.dashboard-upcoming-giveaways-card a[href],
.dashboard-upcoming-giveaways-card a[href] *,
.dashboard-upcoming-giveaways-card button,
.dashboard-upcoming-giveaways-card button *,
.dashboard-open-orders-card button,
.dashboard-open-orders-card button *,
.dashboard-latest-transactions-card .tx-memo-icon,
.dashboard-latest-transactions-card .tx-memo-icon * {
    cursor: pointer;
}

.dashboard-upcoming-giveaways-card .dashboard-upcoming-giveaway-row,
.dashboard-upcoming-giveaways-card .dashboard-upcoming-giveaway-row * {
    cursor: pointer;
}

.dashboard-upcoming-giveaways-card .dashboard-upcoming-giveaway-row:hover {
    background: rgba(238, 244, 255, 0.9);
    border-color: rgba(60, 78, 112, 0.18);
}

.dashboard-upcoming-giveaways-list .dashboard-upcoming-giveaway-title {
    font-size: 0.8rem;
}

.dashboard-upcoming-giveaways-list .dashboard-upcoming-giveaway-date {
    text-align: left;
}

.dashboard-upcoming-giveaway-cta {
    font-size: 0.72rem;
    color: rgba(67, 76, 96, 0.85);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.dashboard-open-orders-list {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: start;
}

@media (min-width: 576px) {
    .dashboard-open-orders-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.dashboard-open-order-row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.38rem;
    border: 1px solid rgba(27, 31, 43, 0.08);
    border-radius: 0.72rem;
    background: rgba(247, 249, 252, 0.72);
    padding: 0.5rem 0.62rem;
}

.dashboard-open-order-placeholder {
    display: none;
    min-height: 0;
    padding: 0;
    align-self: start;
    border-style: dashed;
    border-color: rgba(27, 31, 43, 0.12);
    background: #fff;
}

.dashboard-open-order-placeholder-force {
    display: block;
}

.dashboard-open-order-placeholder-inner {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.92);
}

.dashboard-open-order-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.52rem;
}

.dashboard-open-order-row-bottom {
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dashboard-open-order-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    overflow: hidden;
}

.dashboard-open-order-side {
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.dashboard-open-order-side-buy {
    color: #0f5132;
    background: rgba(198, 239, 206, 0.85);
}

.dashboard-open-order-side-sell {
    color: #7a0e1b;
    background: rgba(255, 219, 224, 0.92);
}

.dashboard-open-order-pair {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-block;
    max-width: 100%;
    font-size: 0.76rem;
    color: rgba(63, 73, 92, 0.92);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-open-order-value {
    min-width: 0;
    max-width: 100%;
    font-size: 0.8rem;
    color: rgba(33, 40, 54, 0.94);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dashboard-open-order-counter {
    min-width: 0;
    max-width: 100%;
    font-size: 0.76rem;
    color: rgba(85, 94, 110, 0.9);
    overflow-wrap: anywhere;
    text-align: right;
}

.dashboard-open-order-cancel-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.7rem;
    padding: 0.16rem 0.48rem;
    line-height: 1.25;
    text-transform: none;
}

.dashboard-open-orders-empty {
    grid-column: 1 / -1;
    font-size: 0.78rem;
    color: var(--bs-secondary-color, var(--color-table-head));
}

.dashboard-open-orders-pagination {
    margin-top: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.dashboard-open-orders-pagination-meta {
    font-size: 0.74rem;
    color: rgba(82, 92, 112, 0.88);
}

.dashboard-open-orders-pagination-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.dashboard-open-orders-pagination-btn {
    min-width: 5.7rem;
    padding: 0.16rem 0.5rem;
    font-size: 0.72rem;
    line-height: 1.25;
}

.dashboard-open-orders-page-indicator {
    min-width: 5.8rem;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(62, 72, 90, 0.9);
}

@media (min-width: 576px) {
    .dashboard-open-order-placeholder {
        display: block;
    }
}

@media (max-width: 575.98px) {
    .dashboard-open-orders-list {
        grid-template-columns: 1fr;
    }

    .dashboard-open-orders-pagination {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-open-orders-pagination-controls {
        width: 100%;
        justify-content: space-between;
    }
}

.dashboard-upcoming-giveaway-status {
    border-radius: 999px;
    padding: 0.08rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dashboard-upcoming-giveaway-status-open {
    color: #0f5132;
    background: rgba(198, 239, 206, 0.85);
}

.dashboard-upcoming-giveaway-status-subscribed {
    color: #43207d;
    background: rgba(228, 216, 255, 0.86);
}

.dashboard-upcoming-giveaway-status-pending {
    color: #5e6778;
    background: rgba(229, 233, 240, 0.94);
}

.dashboard-upcoming-giveaway-status-muted {
    color: #717b8e;
    background: rgba(238, 241, 246, 0.95);
}

.dashboard-upcoming-giveaway-modal .modal-dialog {
    max-width: 420px;
    width: min(420px, calc(100vw - 1rem));
    margin-left: auto;
    margin-right: auto;
}

.dashboard-upcoming-giveaway-modal .modal-dialog.modal-dialog-centered {
    min-height: calc(100dvh - 1rem);
}

.dashboard-upcoming-giveaway-modal .modal-content {
    width: 100%;
}

.dashboard-upcoming-giveaway-modal-body {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-upcoming-giveaway-preview .reward-card {
    margin-bottom: 0;
}

.dashboard-upcoming-giveaway-preview .card-header h4 {
    text-align: left;
}

.dashboard-upcoming-giveaway-preview .reward-card-body {
    align-items: flex-start;
    text-align: left;
}

.dashboard-upcoming-giveaway-preview .reward-card-value {
    text-align: left;
}

.dashboard-upcoming-giveaway-preview .reward-card-meta,
.dashboard-upcoming-giveaway-preview .reward-card-meta li {
    text-align: center;
}

.dashboard-upcoming-giveaway-meta-spacer {
    height: 0.55rem;
}

.dashboard-upcoming-giveaway-detail-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-upcoming-giveaway-detail-body {
    width: 100%;
    text-align: center;
}

.dashboard-upcoming-giveaway-detail-value {
    text-align: center;
    margin-bottom: 1.25rem;
}

.dashboard-upcoming-giveaway-detail-meta,
.dashboard-upcoming-giveaway-detail-meta li {
    text-align: center;
}

.dashboard-upcoming-giveaway-detail-action {
    width: 100%;
    margin-top: auto;
}

@media (max-width: 575.98px) {
    .dashboard-upcoming-giveaway-modal .modal-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        margin: 0.5rem auto;
    }
}

@media (max-height: 700px) {
    .dashboard-upcoming-giveaway-modal-body {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .dashboard-upcoming-giveaway-detail-value {
        margin-bottom: 0.85rem;
    }
}

.dashboard-card-viewer > .tab-pane {
    height: 172px;
    overflow: visible;
}

.dashboard-card-viewer > .tab-pane > .card {
    height: 172px;
}

.dashboard-card-viewer {
    margin-bottom: 1rem;
    overflow: visible;
}

.dashboard-token-card {
    position: relative;
    border: 1px solid rgba(175, 189, 216, 0.6);
    border-radius: 1.05rem;
    background: linear-gradient(135deg, #f9fbff 0%, #edf3ff 100%);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.11), 0 4px 10px rgba(30, 64, 175, 0.07);
    overflow: hidden;
}

.dashboard-token-card::after {
    content: '';
    position: absolute;
    inset: -30% 0% auto auto;
    width: 100%;
    height: 90%;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.82) 0.15%, rgba(255, 255, 255, 0) 70%);
}

.dashboard-card-viewer > .tab-pane > .card,
.dashboard-card-viewer > .tab-pane > .card * {
    cursor: default;
}

.dashboard-card-viewer > .tab-pane > .card a[href],
.dashboard-card-viewer > .tab-pane > .card a[href] *,
.dashboard-card-viewer > .tab-pane > .card button,
.dashboard-card-viewer > .tab-pane > .card button *,
.dashboard-card-viewer > .tab-pane > .card [role='button'],
.dashboard-card-viewer > .tab-pane > .card [role='button'] * {
    cursor: pointer;
}

.dashboard-token-card-body {
    height: 172px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.18rem;
}

.dashboard-token-card-body-lp {
    justify-content: center;
    text-align: left;
}

.dashboard-token-card-summary {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-token-card-summary li {
    min-height: 100%;
}

.dashboard-cardviewer-placeholder .dashboard-token-card-summary {
    margin: 0 !important;
}

.dashboard-cardviewer-placeholder .dashboard-token-card-summary li:first-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.dashboard-cardviewer-placeholder {
    height: 172px;
    margin-bottom: 0;
}

.dashboard-cardviewer-placeholder .dashboard-token-card {
    height: 172px;
    margin-bottom: 0;
}

.dashboard-cardviewer-placeholder .dashboard-token-card::after {
    display: none;
}

.dashboard-cardviewer-placeholder .dashboard-token-card-body {
    height: 100%;
}

.dashboard-token-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    font-size: 1.5rem;
    line-height: 1;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.14), rgba(56, 189, 248, 0.14));
    border: 1px solid rgba(76, 115, 195, 0.32);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(30, 64, 175, 0.18);
    flex: 0 0 2.45rem;
}

.dashboard-card-balance-copy {
    min-width: 0;
    text-align: right;
    z-index: 1;
}

.dashboard-card-balance-heading {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-shadow: none;
    color: #2a3446;
}

.dashboard-card-balance-value {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(1.02rem, 2.35vw, 1.38rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2a3446;
}

.dashboard-card-balance-heading .dashboard-card-ticker {
    margin-left: 0;
    flex: 0 0 auto;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.dashboard-card-subvalue {
    display: block;
    min-height: 1.35rem;
    margin-top: 10px;
}

.dashboard-card-subvalue-copy {
    display: inline-block;
    min-height: 1.35rem;
    line-height: 1.35rem;
    padding: 0.06rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(96, 125, 185, 0.24);
    background: rgba(143, 173, 237, 0.2);
    color: #34558d !important;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
}

.dashboard-card-actions {
    width: 100%;
    min-height: 40px;
    flex: 0 0 40px;
}

.dashboard-card-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.42rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: 0.045em;
    font-weight: 700;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.dashboard-card-actions .btn:focus {
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.18);
}

.dashboard-card-actions .btn.btn-primary {
    color: #fff;
    border-color: rgb(177, 159, 218, 0.25);
}

.dashboard-card-actions .btn.btn-danger {
    color: #374151;
    background: #f3f6fd;
    border-color: rgba(148, 163, 184, 0.5);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.07);
}

.dashboard-card-actions .btn.btn-danger:hover,
.dashboard-card-actions .btn.btn-danger:focus {
    transform: translateY(-1px);
    background: #e8eefb;
    border-color: rgba(122, 141, 181, 0.55);
}

.dashboard-card-actions .btn.disabled,
.dashboard-card-actions .btn[aria-disabled='true'] {
    box-shadow: none;
    transform: none;
}

.dashboard-card-actions-left,
.dashboard-card-actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard-card-actions-left {
    min-width: 6.5rem;
}

.dashboard-card-actions-right .btn {
    min-width: 5.2rem;
}

.dashboard-card-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.dashboard-card-action-icon {
    font-size: 0.96rem;
    line-height: 1;
}

.dashboard-card-action-label {
    line-height: 1;
}

@media (max-width: 575.98px) {
    .dashboard-card-viewer > .tab-pane,
    .dashboard-card-viewer > .tab-pane > .card,
    .dashboard-cardviewer-placeholder,
    .dashboard-cardviewer-placeholder .dashboard-token-card {
        height: 164px;
    }

    .dashboard-token-card-body {
        height: 164px;
        padding: 0.82rem 0.88rem;
        gap: 0.46rem;
    }

    .dashboard-card-actions {
        min-height: 36px;
        flex-basis: 36px;
    }

    .dashboard-card-actions .btn {
        min-height: 2.05rem;
        padding: 0.34rem 0.72rem;
        font-size: 0.68rem;
    }

    .dashboard-card-actions-left {
        min-width: 4.9rem;
    }

    .dashboard-card-actions-right .btn {
        min-width: 4.4rem;
    }
}

.dashboard-lp-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 100%;
}

.dashboard-lp-card-icons {
    position: relative;
    width: 84px;
    height: 66px;
    flex: 0 0 84px;
}

.dashboard-lp-card-copy {
    min-width: 0;
}

.dashboard-lp-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.dashboard-lp-card-title {
    font-size: 1.6rem;
    line-height: 1.05;
    color: var(--color-text-main);
}

.dashboard-lp-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.35rem;
    padding: 0 0.8rem;
    border-radius: 0.9rem;
    background: #1d4ed8;
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.dashboard-lp-card-subtitle {
    margin-top: 0.55rem;
    color: var(--color-table-head);
    font-size: 1rem;
    letter-spacing: 0.01em;
    word-break: break-all;
}

.dashboard-lp-asset-shell {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

.dashboard-lp-asset-shell-primary {
    width: 60px;
    height: 60px;
    left: 0;
    top: 0;
    z-index: 2;
}

.dashboard-lp-asset-shell-secondary {
    width: 42px;
    height: 42px;
    left: 38px;
    top: 24px;
    z-index: 3;
}

.dashboard-lp-asset-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dashboard-tx-date {
    display: inline;
}

.dashboard-tx-date-full {
    display: none;
}

@media (min-width: 1200px) {
    .dashboard-tx-date-compact {
        display: none;
    }

    .dashboard-tx-date-full {
        display: inline;
    }
}

@media (max-width: 767.98px) {
    .dashboard-latest-transactions-list .dashboard-open-order-row {
        min-height: 0;
    }

    .dashboard-latest-transaction-type-top {
        max-width: 8.25rem;
    }
}

.trade-orderbook-heading .loading-spinner-inline {
    float: none;
    margin-left: auto;
    flex: 0 0 auto;
}

/* 3) Dashboard */

.profile-stat-icon {
    width: 22px;
    height: 22px;
    color: currentColor;
}

.profile-x-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.search-token-panel {
    height: auto;
    width: 100%;
    display: none;
}

.search-token-form {
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
}

.search-addon-borderless {
    border: none;
    background: transparent;
    color: var(--color-table-head);
}

.search-input-clean {
    outline: none;
    border: none !important;
    background: transparent !important;
    padding-left: 0;
}

.search-reset-btn {
    min-width: 2.25rem;
    border-color: rgba(255, 255, 255, 0);
    border-left: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    box-shadow: none !important;
}

.qr-fade-in {
    animation: qr-fade-in 220ms ease-out both;
}

@keyframes qr-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qr-fade-in {
        animation: none;
    }
}

.trustlines-transparent-bg {
    background-color: transparent;
}

.preload-container-bg {
    min-height: 180px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.preload-container-bg .loading-spinner-center {
    margin: 0 auto;
}

/* Spinner system: standardized sizing + placement */

.loading-spinner {
    display: inline-block;
    width: var(--loading-spinner-size-panel);
    height: var(--loading-spinner-size-panel);
    vertical-align: middle;
}

.loading-spinner-inline {
    float: right;
    width: var(--loading-spinner-size-inline);
    height: var(--loading-spinner-size-inline);
}

.loading-spinner-center {
    display: block;
    width: var(--loading-spinner-size-panel);
    height: var(--loading-spinner-size-panel);
    margin: 50px auto;
}

.loading-spinner-inline-absolute {
    position: absolute;
    right: 15px;
    width: var(--loading-spinner-size-inline);
    height: var(--loading-spinner-size-inline);
}

.loading-spinner-absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--loading-spinner-size-panel);
    height: var(--loading-spinner-size-panel);
    transform: translate(-50%, -50%);
}

.loading-spinner-modal {
    display: block;
    width: var(--loading-spinner-size-modal);
    height: var(--loading-spinner-size-modal);
    margin: 0 auto 1.5rem;
}

.qr-slot {
    position: relative;
    width: 100%;
    max-width: 320px;
    min-height: 320px;
    margin: 0 auto;
}

.qr-slot-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 320px;
}

#qr-container,
#qr-container-verify {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 320px;
}

#qr-container img,
#qr-container-verify img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    margin: 0 auto;
}

#qr-container.qr-watermark img {
    opacity: 0.2;
    filter: grayscale(1);
}

#qr-container-verify.qr-watermark img {
    opacity: 0.2;
    filter: grayscale(1);
}

.qr-slot-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.qr-slot-spinner .loading-spinner-modal {
    margin: 0;
}

.qr-slot.qr-slot-mobile-compact {
    display: none !important;
    min-height: 0;
    max-width: 100%;
}

.qr-slot.qr-slot-mobile-compact .qr-slot-media {
    display: none;
    min-height: 0;
}

.qr-slot.qr-slot-mobile-compact .qr-slot-spinner {
    display: none !important;
}

#Modal .dashboard-trustline-qr-body {
    padding-top: 1.15rem;
}

#Modal #msgTip .btn,
#Modal #msgTip .btn-1 {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .qr-slot,
    .qr-slot-media,
    #qr-container,
    #qr-container-verify {
        min-height: 0 !important;
        height: auto !important;
    }
}

.table-head-soft {
    background-color: color(srgb 0 0 0 / 0.01);
}

.memo-title-icon-spacing {
    margin-top: -5px;
    margin-right: 10px;
}

.memo-content-wrap {
    white-space: pre-line;
    word-break: break-word;
}

.memo-modal-header {
    padding: 0.72rem 1rem;
}

.memo-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0;
    font-size: 1.25rem;
    line-height: 1.2;
}

.memo-modal-title-icon {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 1.3rem;
}

.dashboard-memo-icon {
    width: 13px;
    height: 13px;
    vertical-align: text-bottom;
}

/* 4) Trade / Payment shared */
.trade-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

@media (max-width: 767.98px) {
    .trade-page-header {
        align-items: flex-start;
        flex-direction: row;
        gap: 0.75rem;
    }

    .trade-header-side {
        justify-content: flex-end;
        margin-top: 0;
    }
}

.alert.dxtool-standard-alert,
#notl_alert,
#loading_alert {
    position: fixed;
    top: calc(75px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1020;
    margin: 0;
    width: min(92vw, 760px);
    max-width: calc(100vw - 1rem);
    box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    text-align: left;
}

.alert.dxtool-standard-alert::after,
#notl_alert::after,
#loading_alert::after {
    content: "";
    position: absolute;
    right: auto;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: currentColor;
    opacity: 0.9;
    pointer-events: none;
}

.alert.dxtool-standard-alert.dxtool-alert-autohide-active::after,
#notl_alert.dxtool-alert-autohide-active::after,
#loading_alert.dxtool-alert-autohide-active::after {
    animation: dxtool-alert-autohide-progress 10s linear forwards;
}

.alert.dxtool-standard-alert.alert-info::after {
    background: #0dcaf0;
}

.alert.dxtool-standard-alert.alert-success::after {
    background: #198754;
}

.alert.dxtool-standard-alert.alert-warning::after,
#notl_alert.alert-warning::after,
#loading_alert.alert-warning::after {
    background: #ffc107;
}

.alert.dxtool-standard-alert.alert-danger::after {
    background: #dc3545;
}

@keyframes dxtool-alert-autohide-progress {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.dark-mode .alert.dxtool-standard-alert {
    box-shadow: 0 14px 30px rgba(4, 8, 16, 0.55);
}

.dark-mode .alert.dxtool-standard-alert.alert-info {
    color: rgba(228, 236, 255, 0.94);
    background-color: #2a2145;
    border-color: #5f4bb0;
}

.dark-mode .alert.dxtool-standard-alert.alert-success {
    color: rgba(205, 246, 223, 0.96);
    background-color: #173b2b;
    border-color: #3f9f68;
}

.dark-mode .alert.dxtool-standard-alert.alert-warning {
    color: rgba(248, 234, 196, 0.96);
    background-color: #4e3b10;
    border-color: #b98a21;
}

.dark-mode .alert.dxtool-standard-alert.alert-danger {
    color: rgba(255, 214, 221, 0.96);
    background-color: #4a1f2a;
    border-color: #b44a60;
}

.dark-mode .alert.dxtool-standard-alert .alert-link {
    color: rgba(255, 228, 145, 0.98);
}

#notl_alert.alert-warning,
#loading_alert.alert-warning {
    color: #6b4a00;
    background-color: #fff3cd;
    border-color: #ffe08a;
}

#ChartData.trade-chart-data-locked {
    position: sticky;
    top: calc(60px + env(safe-area-inset-top));
    z-index: 1010;
    background-color: #fafafa;
    -webkit-box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.16);
    box-shadow: 2px 5px 20px rgba(0, 0, 0, 0.16);
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

#ChartData.xapp-chart-data.trade-chart-data-locked {
    top: env(safe-area-inset-top);
}

#ChartData.trade-chart-data-locked .trade-chart-resize-handle {
    display: none;
}

#notl_alert.alert-warning .alert-link,
#loading_alert.alert-warning .alert-link {
    color: #5a27c6;
}

.main-header-menu .dropdown-menu,
.main-header-account-menu {
    z-index: 1080;
}

@media (max-width: 767.98px) {
    .alert.dxtool-standard-alert,
    #notl_alert,
    #loading_alert {
        top: calc(75px + env(safe-area-inset-top));
        width: calc(100% - 1rem);
    }
}

.trade-title {
    margin-bottom: 5px;
    font-size: 25px;
}

.trade-header-main {
    min-width: 0;
    flex: 1 1 auto;
}

.trade-header-side {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    margin-top: 0.15rem;
}

.trade-header-meta {
    line-height: 1.2;
}

.trade-pair-btn-group {
    margin-top: -2px;
}

.trade-pair-btn-group.is-loading > #toggleTicker,
#toggleTicker:disabled {
    opacity: 0.68;
    cursor: wait;
}

html:not(.dark-mode) .trade-pair-btn-group.is-loading > #toggleTicker.btn-outline-dark,
html:not(.dark-mode) #toggleTicker.btn-outline-dark:disabled {
    color: #fff !important;
}

html:not(.dark-mode) .trade-pair-btn-group.is-loading > #toggleTicker.btn-outline-dark a,
html:not(.dark-mode) .trade-pair-btn-group.is-loading > #toggleTicker.btn-outline-dark .pair-separator,
html:not(.dark-mode) .trade-pair-btn-group.is-loading > #toggleTicker.btn-outline-dark .pair-ticker-ellipsis,
html:not(.dark-mode) #toggleTicker.btn-outline-dark:disabled a,
html:not(.dark-mode) #toggleTicker.btn-outline-dark:disabled .pair-separator,
html:not(.dark-mode) #toggleTicker.btn-outline-dark:disabled .pair-ticker-ellipsis {
    color: var(--color-btn-disabled-text) !important;
}

html:not(.dark-mode) .trade-pair-btn-group.is-loading > #toggleTicker.btn-outline-dark .ticker-xrp-icon,
html:not(.dark-mode) #toggleTicker.btn-outline-dark:disabled .ticker-xrp-icon {
    filter: brightness(0) invert(1) !important;
}

.trade-ticker-trigger {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    cursor: pointer;
}

.trade-ticker-trigger:disabled {
    cursor: default;
}

.trade-ticker-trigger:focus {
    outline: none;
    box-shadow: none;
}

.ticker-xrp-icon {
    width: 15px;
    margin-top: -2px;
}

#tickerImg #img_ticker {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

#tickerImg.trade-ticker-loading {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#tickerImg.trade-ticker-loading::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    pointer-events: none;
    background: conic-gradient(from 0deg,
            rgba(var(--trade-ticker-ring-rgb, 90, 39, 198), 0.12) 0deg,
            rgba(var(--trade-ticker-ring-rgb, 90, 39, 198), 0.95) 130deg,
            rgba(var(--trade-ticker-ring-rgb, 90, 39, 198), 0.12) 260deg,
            rgba(var(--trade-ticker-ring-rgb, 90, 39, 198), 0.95) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 0.75px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 0.75px));
    animation: tradeTickerRingSpin 1.14s linear infinite;
}

@keyframes tradeTickerRingSpin {
    to {
        transform: rotate(360deg);
    }
}

.pair-separator {
    opacity: 0.3;
}

.pair-ticker-ellipsis {
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    display: inline-block;
    margin-bottom: -7px;
    color: var(--bs-black);
}

#toggleTicker.btn-outline-dark:hover,
#toggleTicker.btn-outline-dark:focus,
#toggleTicker.btn-outline-dark:not(:disabled):not(.disabled):active,
#toggleTicker.btn-outline-dark:not(:disabled):not(.disabled).active,
.show>#toggleTicker.btn-outline-dark.dropdown-toggle {
    background-color: rgba(37, 41, 45, 0.08);
}

html:not(.dark-mode) .trade-pair-btn-group.show > #toggleTicker.btn-outline-dark.dropdown-toggle,
html:not(.dark-mode) .trade-pair-btn-group > .show > #toggleTicker.btn-outline-dark.dropdown-toggle,
html:not(.dark-mode) .trade-pair-btn-group > #toggleTicker.btn-outline-dark[aria-expanded="true"] {
    color: var(--color-text-main) !important;
    background-color: #fff !important;
    border-color: rgba(17, 24, 39, 0.08) !important;
}

.trade-markets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 10px 12px;
}

.trade-markets-title {
    font-size: 1.2rem;
    line-height: 1;
}

#tradeMarketsMenu.dropdown-menu {
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 24px);
}

.markets-list-scroll {
    width: 100%;
    max-height: 350px;
    overflow-y: scroll;
}

.market-item-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(214, 222, 236, 0.56);
}

#tradeMarketsMenu .trade-market-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding-right: 28px;
}

#tradeMarketsMenu .trade-market-item .market-item-icon {
    margin-right: 0 !important;
}

#tradeMarketsMenu .trade-market-item .market-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

.trade-menu-settings-divider {
    margin: 0;
}

.trade-menu-settings {
    padding: 15px 15px 0px;
    display: grid;
}

.trade-menu-setting-row {
    margin: 0;
    min-height: 34px;
    border-radius: 6px;
    padding-right: 12px;
}

.trade-menu-setting-row .form-check-label {
    color: var(--color-text-main);
}

.trade-price-badge {
    font-size: 13px;
    margin-left: -5px;
}

.trade-chart-container {
    position: relative;
    width: 100%;
    height: 180px;
    min-height: 180px;
}

.trade-main-chart {
    width: 100%;
    height: 100%;
    cursor: crosshair;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

body.trade-chart-touch-selecting,
body.trade-chart-touch-selecting * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
}

.trade-chart-shell {
    width: 100%;
}

.trade-chart-resize-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 18px;
    margin-top: 6px;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

.trade-chart-resize-grip {
    width: 76px;
    height: 5px;
    border-radius: 999px;
    background: rgba(24, 33, 77, 0.22);
    transition: background-color 0.18s ease, transform 0.18s ease;
}

.trade-chart-resize-grip::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 5px;
  background: rgba(120, 120, 120, 0.2);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: translateX(-50%) translateY(-9px);
}

.trade-chart-resize-grip::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 5px;
  background: rgba(120, 120, 120, 0.2);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  transform: rotate(180deg) translateX(50%) translateY(-9px);
}

.trade-chart-resize-handle:hover .trade-chart-resize-grip,
.trade-chart-resize-handle:focus .trade-chart-resize-grip,
.trade-chart-resize-handle:focus-visible .trade-chart-resize-grip {
    background: rgba(24, 33, 77, 0.38);
    transform: scaleX(1.03);
}

.trade-chart-resize-handle.is-active .trade-chart-resize-grip {
    background: rgba(24, 33, 77, 0.5);
}

body.trade-chart-resizing {
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
}

.trade-chart-external-tooltip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    min-width: 170px;
    max-width: 220px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: opacity 0.16s ease;
}

.trade-chart-external-tooltip.is-active {
    visibility: visible;
    pointer-events: auto;
}

.trade-chart-external-tooltip,
.trade-chart-external-tooltip * {
    cursor: default !important;
}

.trade-chart-external-tooltip-content {
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
    padding: 0.7rem 0.8rem;
    backdrop-filter: blur(10px);
}

.trade-chart-tooltip-title {
    color: #18214D;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
}

.trade-chart-tooltip-title-buy {
    color: #198754;
}

.trade-chart-tooltip-title-sell {
    color: #dc3545;
}

.trade-chart-tooltip-copy {
    margin-top: 0.22rem;
    color: rgba(54, 63, 82, 0.92);
    font-size: 0.77rem;
    line-height: 1.35;
}

.trade-chart-tooltip-footer {
    margin-top: 0.35rem;
    color: rgba(88, 98, 118, 0.78);
    font-size: 0.72rem;
    line-height: 1.3;
}

.trade-chart-tooltip-cancel {
    width: 100%;
    margin-top: 0.55rem;
    pointer-events: auto;
}

.trade-chart-label {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

.interval-dropdown-toggle {
    color: rgba(66, 72, 86, 0.88);
    background-color: transparent !important;
}

#tradeIntervalDropdownToggle:focus,
#tradeIntervalDropdownToggle:active,
#tradeIntervalDropdownToggle:not(:disabled):not(.disabled).active,
#tradeIntervalDropdownToggle:not(:disabled):not(.disabled):active,
.show > #tradeIntervalDropdownToggle.dropdown-toggle {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.interval-dropdown-menu-position {
    left: 0 !important;
    right: auto !important;
    top: 0;
}

.trade-interval-nav {
    gap: 0.35rem;
}

.trade-interval-nav .nav-item {
    display: flex;
}



.trade-interval-nav .trade-interval-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: 0.35rem 0.8rem;
    color: rgba(63, 70, 84, 0.82);
    font-weight: 400;
    line-height: 1;
}

.trade-interval-nav .trade-interval-btn:hover,
.trade-interval-nav .trade-interval-btn:focus {
    color: var(--color-text-main);
}

.trade-interval-nav .trade-interval-btn.active,
.trade-interval-nav .trade-interval-btn:active {
    color: var(--color-text-main);
    font-weight: 700;
}

.trade-chart-config-menu {
    margin-left: 0;
}

.trade-chart-presets-menu {
    margin-left: 0;
}

.trade-chart-controls {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.trade-chart-config-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-color: rgba(24, 33, 77, 0.12);
    color: rgba(66, 72, 86, 0.88);
    background-color: #fff;
}

.trade-chart-config-btn:hover,
.trade-chart-config-btn:focus,
.trade-chart-config-btn:active,
.show > .trade-chart-config-btn.dropdown-toggle {
    border-color: rgba(24, 33, 77, 0.2) !important;
    color: var(--color-text-main) !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

.trade-chart-config-btn span {
    font-size: 0.88rem;
}

.trade-chart-lock-view-btn {
    position: relative;
    margin-left: 0;
    min-width: 2.45rem;
    justify-content: center;
}

.trade-chart-lock-view-btn::before {
    content: "";
    position: absolute;
    left: -0.55rem;
    top: 50%;
    width: 1px;
    height: 1.55rem;
    background-color: rgba(24, 33, 77, 0.14);
    transform: translateY(-50%);
}

html.xapp-mode .trade-chart-lock-view-btn::before {
    display: none;
}

.trade-chart-lock-view-btn.active,
.trade-chart-lock-view-btn[aria-pressed='true'] {
    border-color: rgba(24, 33, 77, 0.28) !important;
    color: var(--color-text-main) !important;
    background-color: rgba(24, 33, 77, 0.06) !important;
}

.trade-chart-presets-menu {
    margin-right: 0.4rem;
}

@media (max-width: 991.98px) {
    #tradeIndicatorsToggle span,
    #tradeChartConfigToggle span,
    #tradeChartPresetsToggle span {
        display: none;
    }

    #tradeIndicatorsToggle,
    #tradeChartConfigToggle,
    #tradeChartPresetsToggle,
    #LockViewButton {
        gap: 0;
    }
}

.trade-chart-config-dropdown {
    min-width: max-content;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
}

.trade-chart-config-dropdown.dropdown-menu[data-bs-popper] {
    left: auto;
    right: 0;
}

.trade-chart-presets-dropdown {
    min-width: 254px;
    width: 254px;
}

.trade-chart-presets-stack {
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
}

.trade-chart-preset-label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.trade-chart-preset-select,
#tradeChartPresetNameInput {
    font-size: 0.85rem;
}

.trade-chart-preset-input-group .btn {
    min-width: 64px;
}

.trade-chart-preset-actions-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.trade-chart-preset-load-btn {
    flex: 1 1 0;
}

.trade-chart-preset-delete-btn {
    flex: 1 1 0;
}

.trade-chart-preset-status {
    min-height: 1.1rem;
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
}

.trade-chart-config-row {
    padding-top: 2px;
    padding-bottom: 2px;
}

.trade-chart-config-row .form-check-label {
    margin: 0;
    cursor: pointer;
    color: rgba(66, 72, 86, 0.9) !important;
}

#tradeIntervalDropdownToggle.disabled,
#tradeIntervalDropdownToggle:disabled {
    opacity: 0.5;
    color: rgba(99, 108, 124, 0.62) !important;
    background-color: #fff !important;
    border-color: rgba(24, 33, 77, 0.08) !important;
    cursor: not-allowed;
}

/* Shared dropdown panel skin (trade, markets, header account/server menus). */
.trade-pair-btn-group>.dropdown-menu,
#tradeIntervalDropdownMenu.dropdown-menu,
.markets-category-menu.dropdown-menu,
.main-header-menu .dropdown-menu {
    max-width: 280px;
    margin-top: 5px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid var(--color-menu-border);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 14px -6px;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    animation-name: slideIn;
}

.trade-pair-btn-group>.dropdown-menu,
.main-header-menu .dropdown-menu {
    right: 0;
    left: auto;
}

#tradeMarketsMenu.dropdown-menu {
    position: absolute;
    inset: calc(100% + 5px) auto auto 0 !important;
    left: 0;
    right: auto;
    top: calc(100% + 5px);
    margin-top: 0;
    transform: none !important;
}

.trade-pair-btn-group>.dropdown-menu.show,
#tradeIntervalDropdownMenu.dropdown-menu.show {
    display: block;
}

.main-header-menu .dropdown-menu,
.main-header-account-menu {
    left: 0;
    right: auto;
}

.main-header-account-dropdown {
    position: relative;
    display: inline-flex;
}

.main-header-account-dropdown .main-header-account-menu {
    position: absolute !important;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    inset: calc(100% + 8px) 0 auto auto;
    transform: none !important;
    margin-top: 0;
}

.navbar-nav .main-header-account-dropdown > .main-header-account-menu.dropdown-menu {
    position: absolute !important;
}

.trade-pair-btn-group .dropdown-item,
#tradeIntervalDropdownMenu .dropdown-item,
.markets-category-menu .dropdown-item,
.main-header-menu .dropdown-item {
    font-size: 14px;
}

#orderTab .nav-link,
.trade-orders-card-body .nav-tabs .nav-link {
    color: #4f5d75;
}

.trade-token-label-muted {
    color: #a1a1a1;
}

.trade-help-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.trade-help-stack .form-text {
    display: block;
    width: 100%;
    margin-top: 0;
    line-height: 1.35;
}

.trade-help-line {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.45rem;
}

.trade-help-line .form-text {
    width: auto;
    margin: 0;
}

.trade-max-btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.9;
    transition: opacity 0.18s ease;
}

.trade-max-btn:hover,
.trade-max-btn:focus {
    opacity: 1;
}

.trade-action-btn {
    min-width: 150px;
}

html.xapp-mode .xapp-trade-panels {
    padding-right: 12px;
    padding-left: 12px;
}

html.xapp-mode .xapp-trade-panels-row {
    display: block;
    margin-right: 0;
    margin-left: 0;
}

html.xapp-mode .xapp-trade-panel-column {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

html.xapp-mode .xapp-trade-panel {
    display: none;
}

html.xapp-mode .xapp-trade-panel.is-active {
    display: block;
    width: 100%;
}

html.xapp-mode .xapp-trade-panel.row {
    margin-right: 0;
    margin-left: 0;
}

html.xapp-mode .xapp-trade-panel[class*="col-"] {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    padding-right: 0;
    padding-left: 0;
}

html.xapp-mode .xapp-trade-panel.row > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

html.xapp-mode .xapp-trade-panel[hidden] {
    display: none !important;
}

html.xapp-mode .xapp-trade-panel > .card,
html.xapp-mode .xapp-trade-panel .card {
    margin-bottom: 14px;
}

html.xapp-mode .xapp-orderbook-card-body {
    width: 100%;
    gap: 8px;
}

html.xapp-mode .xapp-orderbook-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

html.xapp-mode .xapp-orderbook-side {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(126, 137, 158, 0.18);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.32);
}

html.xapp-mode .xapp-orderbook-side-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border-bottom: 1px solid rgba(126, 137, 158, 0.14);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
}

html.xapp-mode .xapp-orderbook-head,
html.xapp-mode .xapp-orderbook-side .table {
    width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
}

html.xapp-mode .xapp-orderbook-side .table th,
html.xapp-mode .xapp-orderbook-side .table td {
    padding-right: 4px;
    padding-left: 4px;
    font-size: 0.78rem;
    white-space: nowrap;
}

html.xapp-mode .xapp-orderbook-side .trade-scroll-orders {
    height: min(52vh, 430px);
    min-height: 260px;
}

html.xapp-mode .xapp-orderbook-spread {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(126, 137, 158, 0.18);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

html.xapp-mode .xapp-orderbook-spread strong {
    color: var(--color-text-main);
    font-weight: 700;
}

html.xapp-mode.dark-mode .xapp-orderbook-side {
    border-color: rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.035);
}

html.xapp-mode.dark-mode .xapp-orderbook-side-title,
html.xapp-mode.dark-mode .xapp-orderbook-spread {
    border-color: rgba(255, 255, 255, 0.08);
}

html.xapp-mode.dark-mode .xapp-orderbook-spread strong {
    color: rgba(246, 248, 255, 0.94);
}

.trade-more-options-toggle {
    position: absolute;
    right: 20px;
    color: var(--bs-black);
}

.trade-accordion-container {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-left: solid 1px;
    border-right: solid 1px;
    border-color: #ececec;
    background-color: rgb(255, 255, 255);
    padding: 0 4px 10px;
    margin-top: -15px;
}

.trade-accordion-collapse {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Order book semantics: top table = sell (red), bottom table = buy (green). */
#tSellOffers td {
    color: #ff231f;
}

#tBuyOffers td {
    color: #2bc9b4;
}

#tSellOffers .offer-row-empty td,
#tBuyOffers .offer-row-empty td {
    color: var(--color-text-muted);
    opacity: 0.55;
    font-style: italic;
}

#tSellOffers .offer-row-buy,
#tSellOffers .offer-row-sell,
#tBuyOffers .offer-row-buy,
#tBuyOffers .offer-row-sell {
    cursor: pointer;
}

#tSellOffers .offer-row-buy.offer-row-range td,
#tSellOffers .offer-row-sell.offer-row-range td {
    background-color: rgba(255, 35, 31, 0.08);
}

#tSellOffers .offer-row-buy.offer-row-active td,
#tSellOffers .offer-row-sell.offer-row-active td {
    background-color: rgba(207, 31, 25, 0.18);
    box-shadow: inset 0 0 0 1px rgba(255, 35, 31, 0.18);
}

#tBuyOffers .offer-row-buy.offer-row-range td,
#tBuyOffers .offer-row-sell.offer-row-range td {
    background-color: rgba(43, 201, 180, 0.08);
}

#tBuyOffers .offer-row-buy.offer-row-active td,
#tBuyOffers .offer-row-sell.offer-row-active td {
    background-color: rgba(41, 200, 179, 0.18);
    box-shadow: inset 0 0 0 1px rgba(43, 201, 180, 0.18);
}

.trade-scroll-transactions {
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    width: 100%;
    height: 274px;
}

.trade-scroll-orders {
    overflow-y: scroll;
    overflow-x: hidden;
    display: block;
    width: 100%;
    height: 250px;
}

.trade-orders-card-body {
    min-height: 400px;
}

.trade-orders-tab-pane {
    overflow-x: auto;
    max-height: 320px;
}

.fee-input-width {
    width: 140px;
}

/* 5) Allocation / Pools shared */
.chart-canvas-fixed-height {
    display: block;
    box-sizing: border-box;
    height: 200px;
}

.chart-max-height-150 {
    max-height: 150px;
}

.chart-col-padded {
    text-align: center;
    padding: 15px;
    border-radius: 18px;
    width: 100%;
}

.table-sort-arrow {
    color: #ddd;
}

/* 6) Collectibles */
.collectibles-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
}

.collectibles-title-row {
    width: 100%;
}

.collectibles-wallet-summary {
    width: 100%;
    border: 1px solid rgba(27, 31, 43, 0.08);
    border-radius: 0.75rem;
    background: rgba(246, 248, 252, 0.85);
    padding: 0.55rem 0.7rem;
}

.collectibles-wallet-summary-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.42rem;
}

.collectibles-wallet-summary-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(74, 84, 104, 0.9);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.collectibles-wallet-summary-address {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(43, 52, 70, 0.95);
    line-height: 1.25;
}

.collectibles-summary-note {
    font-size: 0.72rem;
    color: rgba(115, 126, 146, 0.9);
}

.collectibles-wallet-summary-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.collectibles-summary-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(27, 31, 43, 0.08);
    border-radius: 999px;
    background: #ffffff;
    color: rgba(47, 57, 77, 0.95);
    font-size: 0.74rem;
    line-height: 1.2;
    padding: 0.26rem 0.56rem;
    gap: 0.25rem;
}

.collectibles-summary-pill strong {
    font-size: 0.73rem;
}

.collectibles-wallet-summary.is-loading {
    pointer-events: none;
}

@keyframes collectiblesSummarySkeletonPulse {
    0% {
        opacity: 0.45;
    }
    100% {
        opacity: 0.9;
    }
}

.collectibles-summary-skeleton {
    display: inline-block;
    border-radius: 999px;
    background: rgba(86, 102, 128, 0.2);
    animation: collectiblesSummarySkeletonPulse 1s ease-in-out infinite alternate;
}

.collectibles-summary-skeleton-label {
    width: 3.3rem;
    height: 0.78rem;
}

.collectibles-summary-skeleton-address {
    width: min(20rem, 72vw);
    height: 0.78rem;
}

.collectibles-wallet-summary-pills-placeholder {
    gap: 0.4rem;
}

.collectibles-summary-skeleton-pill {
    height: 1.42rem;
}

.collectibles-summary-skeleton-pill-lg {
    width: 8.2rem;
}

.collectibles-summary-skeleton-pill-md {
    width: 6.9rem;
}

.collectibles-summary-skeleton-pill-sm {
    width: 5.4rem;
}

.collectible-card-width {
    width: 16rem;
}

.collectible-skeleton-media {
    background-color: #f3f3f3;
    height: 200px;
}

.collectible-skeleton-line {
    background-color: #f3f3f3;
    width: 100px;
    height: 20px;
}

.collectibles-scroll-status {
    margin: 0.75rem auto 0;
    width: fit-content;
    max-width: min(92vw, 460px);
    padding: 0.3rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(27, 31, 43, 0.12);
    background: rgba(244, 247, 252, 0.95);
    color: rgba(49, 58, 77, 0.92);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.01em;
}

.collectibles-scroll-status[data-state="loading"] {
    border-color: rgba(32, 90, 202, 0.2);
    background: rgba(226, 237, 255, 0.9);
    color: rgba(31, 72, 155, 0.92);
}

.collectibles-scroll-status[data-state="end"] {
    border-color: rgba(71, 85, 110, 0.2);
    background: rgba(241, 244, 250, 0.9);
    color: rgba(63, 74, 97, 0.92);
}

.collectibles-scroll-status[data-state="left"] {
    border-color: rgba(52, 91, 153, 0.2);
    background: rgba(233, 241, 255, 0.9);
    color: rgba(34, 68, 128, 0.94);
}

.collectibles-scroll-status[data-state="left"][role="button"] {
    cursor: pointer;
    user-select: none;
}

.collectibles-scroll-status[data-state="left"][role="button"]:focus-visible {
    outline: 2px solid rgba(44, 104, 216, 0.45);
    outline-offset: 2px;
}

.collectible-media-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    cursor: zoom-in;
}

.collectible-media-trigger-error {
    align-items: center;
    justify-content: center;
}

.collectible-media-trigger:focus {
    outline: none;
    box-shadow: none;
}

.collectible-modal-body {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 1rem;
}

.collectible-modal-media {
    width: 100%;
    border-radius: 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(27, 31, 43, 0.08);
    background: #f7f8fa;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collectible-modal-image {
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: contain;
    display: block;
    background: #f7f8fa;
}

.collectible-modal-bug {
    width: 110px;
    height: 110px;
}

.collectible-modal-content {
    min-width: 0;
}

.collectible-modal-title {
    font-size: 1.35rem;
    line-height: 1.25;
    font-weight: 600;
}

.collectible-modal-meta {
    border: 1px solid rgba(27, 31, 43, 0.08);
    border-radius: 0.85rem;
    padding: 0.7rem 0.8rem;
    background: rgba(247, 249, 252, 0.7);
}

.collectible-modal-meta-grid {
    display: grid;
    gap: 0.45rem;
}

.collectible-modal-meta-row {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: minmax(84px, 112px) minmax(0, 1fr);
    align-items: start;
    column-gap: 0.55rem;
    row-gap: 0.2rem;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.collectible-modal-meta-label {
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(35, 42, 56, 0.9);
}

.collectible-modal-meta-value {
    font-size: 0.84rem;
    line-height: 1.35;
    color: rgba(56, 63, 78, 0.9);
    min-width: 0;
    overflow-wrap: anywhere;
}

.collectible-modal-meta-token-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.collectible-modal-token-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    text-decoration: none;
    color: rgba(42, 89, 174, 0.94);
}

.collectible-modal-token-link:hover,
.collectible-modal-token-link:focus {
    text-decoration: none;
    opacity: 0.85;
}

.collectible-modal-token-link ion-icon {
    font-size: 1rem;
}

.collectible-modal-meta-value a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.collectible-modal-meta-value a:hover,
.collectible-modal-meta-value a:focus {
    opacity: 0.88;
}

.collectible-modal-attributes {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.collectible-modal-history {
    margin-top: 0.85rem;
}

.collectible-modal-history-title {
    margin: 0 0 0.45rem;
    font-size: 0.94rem;
    font-weight: 600;
    color: rgba(35, 42, 56, 0.9);
}

.collectible-modal-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
}

.collectible-modal-history-row {
    border: 1px solid rgba(27, 31, 43, 0.08);
    border-radius: 0.7rem;
    background: rgba(247, 249, 252, 0.72);
    padding: 0.42rem 0.56rem;
}

.collectible-modal-history-row-top,
.collectible-modal-history-row-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.collectible-modal-history-row-bottom {
    margin-top: 0.22rem;
}

.collectible-modal-history-type {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(33, 40, 54, 0.92);
}

.collectible-modal-history-result {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}

.collectible-modal-history-result.is-success {
    color: #0f5132;
    background: rgba(198, 239, 206, 0.85);
}

.collectible-modal-history-result.is-fail {
    color: #7a0e1b;
    background: rgba(255, 219, 224, 0.92);
}

.collectible-modal-history-date,
.collectible-modal-history-link,
.collectible-modal-history-empty,
.collectible-modal-history-loading,
.collectible-modal-history-error {
    font-size: 0.75rem;
}

.collectible-modal-history-detail {
    margin-top: 0.22rem;
    font-size: 0.75rem;
    color: rgba(63, 73, 92, 0.9);
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.collectible-modal-history-date {
    color: rgba(85, 94, 110, 0.86);
}

.collectible-modal-history-link {
    color: rgba(41, 53, 85, 0.95);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.dark-mode .collectible-modal-history-title {
    color: rgba(224, 231, 247, 0.9);
}

.dark-mode .collectible-modal-history-row {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(32, 36, 48, 0.85);
}

.dark-mode .collectible-modal-history-type {
    color: rgba(226, 234, 250, 0.94);
}

.dark-mode .collectible-modal-history-date,
.dark-mode .collectible-modal-history-detail,
.dark-mode .collectible-modal-history-empty,
.dark-mode .collectible-modal-history-loading,
.dark-mode .collectible-modal-history-error {
    color: rgba(181, 192, 218, 0.88);
}

.dark-mode .collectible-modal-history-link {
    color: rgba(201, 214, 247, 0.97);
}

.dark-mode .collectible-modal-history-result.is-success {
    color: rgba(166, 251, 195, 0.95);
    background: rgba(16, 97, 52, 0.34);
}

.dark-mode .collectible-modal-history-result.is-fail {
    color: rgba(255, 203, 213, 0.95);
    background: rgba(134, 24, 45, 0.34);
}

.collectible-attr-pill {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.38rem 0.55rem;
    text-transform: uppercase;
}

.collectible-attr-pill .text-muted {
    color: rgba(255, 255, 255, 0.74) !important;
}

@media (max-width: 767.98px) {
    .collectibles-wallet-summary {
        padding: 0.5rem 0.58rem;
    }

    .collectibles-wallet-summary-pills {
        gap: 0.32rem;
    }

    .collectibles-summary-pill {
        font-size: 0.71rem;
    }

    .collectible-modal-body {
        grid-template-columns: 1fr;
    }

    .collectible-modal-meta-row {
        grid-template-columns: 1fr;
    }

    .collectible-modal-title {
        font-size: 1.18rem;
    }

    .collectible-modal-meta-label {
        font-size: 0.86rem;
    }

    .collectible-modal-meta-value {
        font-size: 0.8rem;
    }
}

.dark-mode .collectible-modal-media {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(23, 27, 36, 0.88);
}

.dark-mode .collectibles-wallet-summary {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(30, 36, 50, 0.84);
}

.dark-mode .collectibles-wallet-summary-label {
    color: rgba(184, 196, 224, 0.86);
}

.dark-mode .collectibles-wallet-summary-address {
    color: rgba(223, 232, 251, 0.95);
}

.dark-mode .collectibles-summary-note {
    color: rgba(166, 179, 208, 0.86);
}

.dark-mode .collectibles-summary-pill {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(21, 27, 38, 0.95);
    color: rgba(197, 208, 233, 0.92);
}

.dark-mode .collectibles-summary-skeleton {
    background: rgba(174, 193, 233, 0.18);
}

.dark-mode .collectibles-scroll-status {
    border-color: rgba(166, 177, 203, 0.24);
    background: rgba(27, 33, 45, 0.92);
    color: rgba(209, 218, 240, 0.9);
}

.dark-mode .collectibles-scroll-status[data-state="loading"] {
    border-color: rgba(104, 152, 244, 0.32);
    background: rgba(31, 48, 78, 0.85);
    color: rgba(187, 210, 255, 0.95);
}

.dark-mode .collectibles-scroll-status[data-state="end"] {
    border-color: rgba(166, 177, 203, 0.24);
    background: rgba(32, 40, 57, 0.88);
    color: rgba(196, 206, 230, 0.9);
}

.dark-mode .collectibles-scroll-status[data-state="left"] {
    border-color: rgba(112, 152, 232, 0.32);
    background: rgba(30, 47, 79, 0.88);
    color: rgba(186, 210, 255, 0.96);
}

.dark-mode .collectibles-scroll-status[data-state="left"][role="button"]:focus-visible {
    outline-color: rgba(126, 175, 255, 0.55);
}

.dark-mode .collectible-modal-image {
    background: rgba(23, 27, 36, 0.88);
}

.dark-mode .collectible-modal-title {
    color: rgba(244, 248, 255, 0.96);
}

.dark-mode .collectible-modal-meta {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(32, 36, 48, 0.85);
}

.dark-mode .collectible-modal-meta-label {
    color: rgba(224, 231, 247, 0.9);
}

.dark-mode .collectible-modal-meta-value {
    color: rgba(193, 203, 226, 0.9);
}

.dark-mode .collectible-modal-meta-value a {
    color: rgba(204, 216, 248, 0.96);
}

.dark-mode .collectible-modal-token-link {
    color: rgba(203, 219, 252, 0.96);
}

/* 7) Markets */
.markets-discovery-toolbar {
    --markets-control-height: calc(1.5em + 0.75rem + 2px);
    margin: 0.9rem 0 0.8rem;
    padding: 0;
}

.markets-discovery-toolbar .container-fluid {
    padding: 0;
}

.markets-discovery-toolbar .markets-toolbar-grid {
    --bs-gutter-x: 0.5rem;
    --bs-gutter-y: 0.5rem;
    margin-top: 0;
}

.markets-discovery-toolbar .markets-toolbar-grid > * {
    padding-top: 0;
}

.markets-discovery-toolbar .markets-toolbar-left,
.markets-discovery-toolbar .markets-toolbar-right {
    min-width: 0;
}

.markets-discovery-toolbar .markets-toolbar-left .markets-search-combined {
    flex: 1 1 320px;
    min-width: 200px;
    position: relative;
}

.markets-discovery-toolbar .markets-search-combined .input-group {
    flex-wrap: nowrap;
}

.markets-discovery-toolbar .markets-search-combined .markets-category-toggle-btn {
    flex: 0 0 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.markets-discovery-toolbar .markets-search-combined .input-search {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.markets-sort-control {
    display: inline-flex;
    flex-direction: column;
    gap: 0.18rem;
    margin: 0;
}

.markets-sort-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #616a78;
}

.markets-discovery-toolbar .form-control,
.markets-discovery-toolbar .form-select,
.markets-discovery-toolbar .btn {
    min-height: var(--markets-control-height);
}

.markets-discovery-toolbar .form-select {
    min-width: 112px;
}

.markets-discovery-toolbar .markets-category-toggle-btn {
    min-width: 2.65rem;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.markets-discovery-toolbar .markets-view-toggle {
    flex: 0 0 auto;
}

.markets-view-toggle .btn {
    min-width: 2.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.markets-view-toggle .btn ion-icon {
    font-size: 1rem;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .markets-discovery-toolbar {
        margin-top: 1.1rem;
    }

    .markets-discovery-toolbar .markets-toolbar-grid {
        --bs-gutter-x: 0;
    }

    .markets-discovery-toolbar .markets-toolbar-grid > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .markets-discovery-toolbar .markets-toolbar-left,
    .markets-discovery-toolbar .markets-toolbar-right {
        justify-content: flex-start !important;
    }

    .markets-discovery-toolbar .markets-toolbar-left {
        align-items: stretch !important;
    }

    .markets-discovery-toolbar .markets-toolbar-left .markets-search-combined {
        flex: 1 1 100%;
        min-width: 0;
    }

    .markets-discovery-toolbar .markets-toolbar-right {
        row-gap: 0.45rem;
    }

    .markets-discovery-toolbar .markets-view-toggle {
        margin-left: auto;
    }
}

.markets-category-menu {
    left: 0;
    right: auto;
    min-width: 245px;
    padding: .35rem;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.markets-category-menu .dropdown-header {
    padding: .35rem .55rem;
    font-size: .75rem;
    letter-spacing: .03em;
}

.markets-category-menu .markets-category-item {
    border-radius: .45rem;
    padding: .45rem .6rem;
    margin: 2px 0;
}

.markets-category-menu .markets-category-item.active,
.markets-category-menu .markets-category-item:active {
    color: #fff;
    background-color: var(--color-primary);
}

.markets-rewards-divider {
    margin-top: 5px;
    margin-bottom: 5px;
}

.card-radius-xl {
    border-radius: 1.25rem;
}

.featured-token-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 72px;
    padding: 0.8rem 0.95rem;
    border-radius: 0.95rem;
    text-decoration: none;
    background-color: rgba(245, 247, 250, 0.9);
    border: 1px solid rgba(193, 201, 214, 0.45);
    transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.featured-token-card:hover,
.featured-token-card:focus {
    text-decoration: none;
    background-color: rgba(236, 240, 246, 0.96);
    border-color: rgba(90, 39, 198, 0.34);
    transform: translateY(-1px);
}

.featured-token-media {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.featured-token-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
}

.featured-token-ticker {
    color: var(--color-text-main);
    line-height: 1.1;
}

.featured-token-name {
    margin-top: 0.18rem;
    color: var(--bs-secondary-color, var(--color-table-head));
    font-size: 0.925rem;
    line-height: 1.2;
}

.markets-most-viewed-row {
    --bs-gutter-x: 0.7rem;
    --bs-gutter-y: 0.7rem;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
}

.markets-most-viewed-row > [class*='col-'] {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
}

.markets-most-viewed-item {
    height: 100%;
    min-height: 72px;
    padding: 0.88rem 1.34rem 0.88rem 1.18rem;
    gap: 0.8rem;
    color: inherit;
    text-decoration: none;
}

.markets-most-viewed-item:visited {
    color: inherit;
}

.markets-most-viewed-item:hover,
.markets-most-viewed-item:focus {
    text-decoration: none;
}

.markets-most-viewed-change {
    font-size: 0.8rem;
    text-align: right;
    padding-left: 0.82rem;
    padding-right: 0.14rem;
    flex: 0 0 auto;
}

.markets-most-viewed-item .market-maker-highlight-main {
    padding-right: 0.42rem;
    flex: 1 1 auto;
}

.market-card-header {
    margin-left: 20px;
    margin-top: 20px;
    height: 90px;
}

.market-card-title-truncate {
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    max-width: 70%;
}

.market-card-name {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 12px;
    font-weight: 400;
    color: var(--bs-secondary-color, var(--color-table-head));
}

.market-card-token-icon {
    width: 40px;
    border-radius: 50%;
    margin-right: 20px;
    margin-top: -30px;
}

.market-chart-canvas {
    width: 100%;
    height: 100px;
    position: relative;
    z-index: 1;
}

.market-chart-slot {
    position: relative;
}

.market-chart-label {
    position: absolute;
    width: 100%;
    text-align: center;
    display: none;
    top: 150px;
}

.market-nodata-label {
    position: absolute;
    display: none;
    left: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
}

.market-empty-state-icon {
    width: 32px;
    height: 32px;
    color: grey;
}

/* Scoped fixes for Markets card sizing/layout only (avoid impacting shared .card styles). */
.markets-page .markets-grid-row > [class*='col-'] {
    display: flex;
}

.markets-page .markets-grid-row > [class*='col-'] > .card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: #ffffff;
}

.markets-page .markets-grid-row > [class*='col-'] > .card,
.markets-page .markets-grid-row > [class*='col-'] > .card * {
    cursor: default;
}

.markets-page .markets-grid-row > [class*='col-'] > .card a[href],
.markets-page .markets-grid-row > [class*='col-'] > .card a[href] *,
.markets-page .markets-grid-row > [class*='col-'] > .card button,
.markets-page .markets-grid-row > [class*='col-'] > .card button * {
    cursor: pointer;
}

.markets-page .featured-token-card,
.markets-page .featured-token-card * {
    cursor: pointer;
}

.markets-page .markets-grid-row > [class*='col-'] > .card.card-animated {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    transform: translateY(0);
    will-change: transform;
}

.markets-page .markets-grid-row > [class*='col-'] > .card.card-animated:hover {
    transform: translateY(-4px) scale(1.01);
}

.markets-page .markets-grid-row > [class*='col-'] > .card.market-card-clickable,
.markets-page .markets-grid-row > [class*='col-'] > .card.market-card-clickable * {
    cursor: pointer;
}

.markets-page .market-card-clickable:focus-visible {
    outline: 2px solid rgba(90, 39, 198, 0.55);
    outline-offset: 2px;
}

.markets-page .market-card-header {
    min-height: 90px;
    height: auto;
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.markets-page .market-card-title-truncate {
    font-size: 0.98rem;
    max-width: none;
    min-width: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.markets-page .market-card-title-copy {
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.markets-page .market-card-title-top {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    min-width: 0;
    max-width: 100%;
}

.markets-page .market-card-heading {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    padding-right: 58px;
    width: 100%;
}

.markets-page .market-card-ticker {
    display: inline-block;
    color: var(--color-text-main);
    font-size: 0.98rem;
    line-height: 1;
}

.markets-page .market-card-token-icon {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
}

.markets-page .market-card-price-line {
    display: flex;
    align-items: center;
    min-height: 20px;
    font-size: 0.94rem;
}

.markets-page .market-card-xrp-icon {
    margin-top: 0;
    margin-right: 4px;
}

.markets-page .market-card-range-line {
    min-height: 20px;
    font-size: 0.72rem;
}

.markets-page .market-card-range-line small {
    font-size: inherit;
}

.markets-page .market-card-name {
    font-size: 0.72rem;
    margin-top: 0;
    margin-left: 0.22rem;
}

.markets-page:not(.markets-view-list) .market-card-title-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.markets-page:not(.markets-view-list) .market-card-title-truncate {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.markets-page:not(.markets-view-list) .market-card-name {
    margin-left: 0;
    line-height: 1.15;
}

.markets-page:not(.markets-view-list) .market-card-badges {
    align-self: center;
    margin-top: 0;
}

.markets-page .market-card-actions .btn {
    font-size: 0.76rem;
}

.markets-page .market-chart-canvas {
    display: block;
    width: 100% !important;
    min-height: 100px;
}

.markets-page .market-card-footer {
    margin-top: auto;
    padding: 0 !important;
}

.markets-page .market-card-actions {
    width: 100%;
    margin-top: 0 !important;
    padding: 0 20px 20px;
}

.markets-page .market-card-actions .btn-group {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.markets-page .market-card-status-col {
    display: none;
}

.markets-page .market-card-badges {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.28rem;
    margin-top: 0;
    flex: 0 0 auto;
    transform: translateY(-0.16em);
}

.markets-page .market-card-status-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.08rem;
    padding: 0.03rem 0.32rem;
    border-radius: 999px;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.markets-page .market-card-status-label:empty {
    display: none !important;
}

.markets-page .market-card-status-new {
    color: #0f748f;
    background: rgba(113, 216, 255, 0.18);
}

.markets-page .market-card-status-cashback {
    color: #5a4300;
    background: rgba(255, 212, 92, 0.28);
}

.markets-page .market-card-actions > .text-info {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 31px;
    line-height: 1;
    margin: 0;
}

.markets-page .market-card-actions > .text-info img,
.markets-page .market-card-actions > .text-info svg {
    display: block;
    margin: 0;
}

.markets-page .markets-featured-card-body {
    padding-right: 20px;
    padding-left: 20px;
}

#markets-featured-section > .mb-4 {
    margin-top: 1.5rem;
}

.markets-page .markets-grid-row {
    row-gap: 1rem;
}

.markets-page .markets-infinite-sentinel {
    width: 100%;
    height: 1px;
}

.markets-page .markets-empty-state {
    display: none;
    padding: 2rem 1rem 2.5rem;
    text-align: center;
    font-size: 0.92rem;
    color: #687282;
}

.markets-page .markets-empty-state.is-visible {
    display: block;
}

.markets-page .market-card-placeholder {
    min-height: 212px;
    pointer-events: none;
}

.markets-page .markets-placeholder-line,
.markets-page .markets-placeholder-icon,
.markets-page .markets-placeholder-chart {
    display: block;
    border-radius: 999px;
}

.markets-page .markets-placeholder-line-title {
    width: min(8rem, 58%);
    height: 1rem;
    margin-top: 0.1rem;
}

.markets-page .markets-placeholder-line-subtitle {
    width: min(10rem, 70%);
    height: 0.72rem;
    margin-top: 0.52rem;
}

.markets-page .markets-placeholder-line-price {
    width: 7.2rem;
    height: 0.86rem;
    margin-top: 0.25rem;
}

.markets-page .markets-placeholder-icon {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
}

.markets-page .markets-placeholder-chart {
    width: calc(100% - 2.5rem);
    height: 78px;
    margin: 0.5rem auto 1rem;
    border-radius: 8px;
}

.markets-page .markets-list-head {
    display: none;
    align-items: center;
    grid-template-columns:
        minmax(300px, 2.2fr)
        minmax(180px, 1fr)
        minmax(140px, 0.675fr);
    gap: 0.85rem;
    margin: 0 0 0.55rem;
    padding: 0.2rem 1rem 0.4rem;
    border-bottom: 1px solid rgba(188, 197, 212, 0.55);
}

.markets-page .markets-list-head > span {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #616b7b;
}

.markets-page.markets-view-list .markets-grid-row > [class*='col-'] {
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 65px;
}

.markets-page.markets-view-list .markets-list-head {
    display: grid;
}

.markets-page.markets-view-list .markets-grid-row {
    row-gap: 0.48rem;
}

.markets-page.markets-view-list .markets-grid-row > [class*='col-'] > .card {
    margin-bottom: 0 !important;
    padding: 0.3rem 0.9rem;
    display: grid;
    grid-template-columns:
        minmax(300px, 2.2fr)
        minmax(180px, 1fr)
        minmax(140px, 0.675fr);
    gap: 0.85rem;
    align-items: center;
}

.markets-page.markets-view-list .market-card-placeholder {
    min-height: 74px;
}

.markets-page.markets-view-list .markets-placeholder-chart {
    width: 100%;
    height: 54px;
    margin: 0;
}

.markets-page.markets-view-list .market-card-header {
    display: contents;
}

.markets-page.markets-view-list .market-card-token-icon {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 34px;
    min-width: 34px;
    height: 34px;
    margin: 0;
    justify-self: start;
    align-self: center;
    z-index: 1;
}

.markets-page.markets-view-list .market-card-heading {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 0 0 0 2.9rem;
    align-self: center;
    justify-self: start;
    width: 100%;
    display: block;
}

.markets-page.markets-view-list .market-card-title-truncate {
    max-width: 100%;
    font-size: 0.94rem;
    line-height: 1.25;
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
}

.markets-page.markets-view-list .market-card-title-top {
    display: contents;
}

.markets-page.markets-view-list .market-card-badges {
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-top: 0;
    order: 3;
    margin-left: 0.12rem;
}

.markets-page.markets-view-list .market-card-name {
    margin-left: 0;
    font-size: 0.78rem;
    order: 2;
}

.markets-page.markets-view-list .market-card-title-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 0.22rem;
}

.markets-page.markets-view-list .market-card-ticker {
    order: 1;
}

.markets-page.markets-view-list .market-card-price-line {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-start;
    text-align: left;
    min-height: 0;
    line-height: 1.2;
    align-self: center;
}

.markets-page.markets-view-list .market-card-status-label {
    display: inline-flex;
}

.markets-page.markets-view-list .market-card-price-line span[id$='_titlePrice'] {
    font-weight: 700;
}

.markets-page.markets-view-list .market-chart-slot {
    grid-column: 3;
    grid-row: 1;
    position: relative;
    min-height: 36px;
    max-height: 36px;
}

.markets-page.markets-view-list .market-chart-canvas {
    width: 100% !important;
    min-height: 36px;
    max-height: 36px;
    height: 36px !important;
}

.markets-page.markets-view-list .market-chart-label {
    display: none !important;
}

.markets-page.markets-view-list .market-nodata-label {
    position: absolute;
    inset: 0;
    transform: none;
    justify-content: center;
    min-height: 0;
}

@media (max-width: 991.98px) {
    .markets-page.markets-view-list .markets-list-head {
        display: none;
    }

    .markets-page.markets-view-list .markets-grid-row {
        row-gap: 0.7rem;
    }

    .markets-page.markets-view-list .markets-grid-row > [class*='col-'] > .card {
        grid-template-columns: minmax(0, 1fr) minmax(132px, 42%);
        gap: 0.7rem;
        padding: 0.3rem 0.9rem;
        align-items: center;
    }

    .markets-page.markets-view-list .market-card-header {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 0.16rem 0.72rem;
        align-items: center;
        align-content: center;
        min-width: 0;
        min-height: 0;
        height: auto;
        margin: 0;
    }

    .markets-page.markets-view-list .market-card-token-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 34px;
        min-width: 34px;
        height: 34px;
        align-self: center;
    }

    .markets-page.markets-view-list .market-card-heading {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        align-self: end;
        min-width: 0;
    }

    .markets-page.markets-view-list .market-card-title-truncate {
        font-size: 0.94rem;
        line-height: 1.2;
        gap: 0.35rem;
    }

    .markets-page.markets-view-list .market-card-title-copy {
        display: inline-flex;
        align-items: baseline;
        gap: 0.22rem;
    }

    .markets-page.markets-view-list .market-card-name {
        font-size: 0.78rem;
        margin-left: 0;
    }

    .markets-page.markets-view-list .market-card-badges {
        gap: 0.24rem;
    }

    .markets-page.markets-view-list .market-card-price-line {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        padding: 0;
        min-height: 0;
        justify-content: flex-start;
        align-items: baseline;
        line-height: 1.14;
        white-space: nowrap;
        font-size: clamp(0.08rem, 2.8vw, 0.8rem);
    }

    .markets-page.markets-view-list .market-card-price-line small {
        font-size: inherit;
        font-weight: inherit;
        line-height: 1.2;
    }

    .markets-page.markets-view-list .market-chart-slot {
        grid-column: 2;
        grid-row: 1;
        min-height: 36px;
        max-height: 36px;
        display: flex;
        align-items: center;
    }

    .markets-page.markets-view-list .market-chart-canvas {
        grid-column: 2;
        grid-row: 1;
        width: 100% !important;
        min-height: 36px;
        max-height: 36px;
        height: 36px !important;
    }

    .markets-page.markets-view-list .market-nodata-label {
        grid-column: 2;
        grid-row: 1;
    }

}

@media (max-width: 767.98px) {
    .markets-page:not(.markets-view-list) .markets-grid-row > [class*='col-'] > .card {
        width: calc(100% - 0.9rem);
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.markets-page .markets-pagination-wrap {
    margin-top: 1rem;
}

.markets-page .markets-pagination-wrap.is-enhanced .pagination {
    display: none;
}

.markets-page .markets-pagination-wrap .pagination {
    margin-bottom: 0;
}

.markets-page .markets-pagination-compact {
    margin-top: 0.25rem;
}

.markets-page .markets-pagination-wrap .page-link {
    color: #3f4652;
    border-color: #cfd4dc;
    background-color: #f5f7fa;
    font-size: 0.8rem;
}

.markets-page .markets-pagination-wrap .page-link:hover,
.markets-page .markets-pagination-wrap .page-link:focus {
    color: #fff;
    border-color: #2b313b;
    background-color: #2b313b;
    box-shadow: none;
}

.markets-page .markets-pagination-wrap .page-item.active .page-link {
    color: #fff;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
}

.markets-page .markets-pagination-wrap .page-item.disabled .page-link {
    color: #8d95a3;
    background-color: #eceff4;
    border-color: #d8dde5;
}

/* 7.5) Market Maker */
.market-maker-page {
    padding-bottom: 2.25rem;
}

.market-maker-header-copy {
    max-width: 44rem;
}

.market-maker-header-copy p {
    line-height: 1.55;
}

.market-maker-stat-card .card-body {
    padding: 1.05rem 1.15rem;
}

.market-maker-stat-card .bubble-map-stat-value {
    font-size: 1.75rem;
    line-height: 1.1;
}

.market-maker-panel .card-body {
    padding: 1.1rem;
}

.market-maker-panel-heading {
    margin-bottom: 0.8rem;
}

.market-maker-highlight-list {
    gap: 0.45rem;
}

.market-maker-highlight-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border-radius: 0.8rem !important;
    border: 1px solid rgba(24, 33, 77, 0.08);
    background: rgba(250, 251, 255, 0.86);
}

.market-maker-highlight-main {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.market-maker-highlight-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
}

.market-maker-highlight-pair,
.market-maker-highlight-meta {
    display: block;
    line-height: 1.2;
}

.market-maker-highlight-pair {
    color: #1c2436;
    font-weight: 700;
    font-size: 0.9rem;
}

.market-maker-highlight-meta {
    color: #687385;
    font-size: 0.76rem;
}

.market-maker-highlight-value {
    color: #1e2852;
    font-weight: 700;
    white-space: nowrap;
    font-size: 0.82rem;
}

.market-maker-toolbar-surface .card-body {
    padding: 0.95rem 1rem;
}

.market-maker-scroll-sentinel {
    width: 100%;
    height: 1px;
}

.market-maker-empty-state {
    display: none;
    padding: 2rem 1rem 0.75rem;
    text-align: center;
    color: #687282;
    font-size: 0.92rem;
}

.market-maker-empty-state.is-visible {
    display: block;
}

.market-maker-grid {
    align-items: stretch;
}

.market-maker-pool-col {
    display: flex;
}

.market-maker-pool-col.is-hidden {
    display: none !important;
}

.market-maker-pool-col.is-revealing .market-maker-pool-card {
    animation: market-maker-card-in 0.22s ease both;
}

@keyframes market-maker-card-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.market-maker-pool-card {
    width: 100%;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform;
}

.market-maker-pool-card:hover {
    transform: translateY(-3px);
    border-color: rgba(90, 39, 198, 0.24);
    box-shadow: 0 14px 28px rgba(24, 33, 77, 0.16);
}

.market-maker-pool-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.market-maker-pool-icons {
    position: relative;
    width: 48px;
    height: 32px;
    flex: 0 0 48px;
}

.market-maker-pool-icon {
    width: 30px;
    height: 30px;
    object-fit: cover;
    position: absolute;
    left: 0;
    z-index: 2;
}

.market-maker-pool-icon-xrp {
    left: 17px;
    z-index: 1;
}

.market-maker-pool-title-wrap {
    min-width: 0;
}

.market-maker-pool-pair {
    color: #1c2436;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-maker-pool-name {
    margin-top: 0.2rem;
    color: #6d7788;
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-maker-fee-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.26rem 0.58rem;
    background: rgba(90, 39, 198, 0.09);
    color: #5a27c6;
    font-weight: 600;
    font-size: 0.72rem;
    white-space: nowrap;
}

.market-maker-pool-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.85rem;
    margin-bottom: 0.95rem;
}

.market-maker-pool-metric span,
.market-maker-pool-metric strong {
    display: block;
    line-height: 1.2;
}

.market-maker-pool-metric span {
    color: #6c7587;
    font-size: 0.74rem;
}

.market-maker-pool-metric strong {
    color: #1d263f;
    font-size: 0.88rem;
    margin-top: 0.1rem;
    word-break: break-word;
}

.market-maker-change-positive {
    color: #0f9d77 !important;
}

.market-maker-change-negative {
    color: #cf3f3f !important;
}

.market-maker-change-neutral {
    color: #798193 !important;
}

.market-maker-highlight-meta.market-maker-change-positive,
.market-maker-pool-metric strong.market-maker-change-positive {
    color: #0f9d77 !important;
}

.market-maker-highlight-meta.market-maker-change-negative,
.market-maker-pool-metric strong.market-maker-change-negative {
    color: #cf3f3f !important;
}

.market-maker-highlight-meta.market-maker-change-neutral,
.market-maker-pool-metric strong.market-maker-change-neutral {
    color: #798193 !important;
}

.market-maker-pool-footer {
    margin-top: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 1rem;
}

.market-maker-pool-footer .btn {
    width: 100%;
    min-width: 0;
    border-radius: 20px;
}

#marketMakerDepositModal .btn-group {
    display: flex;
    width: 100%;
}

#marketMakerDepositModal .btn-group > .btn {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
}

#marketMakerDepositModal .modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.5rem;
}

#marketMakerDepositModal .modal-footer .btn {
    width: 100%;
    margin: 0;
}

.market-maker-inline-alert {
    position: relative;
    margin: 0 0 1rem;
    width: 100%;
    overflow: hidden;
    text-align: left;
}

.market-maker-inline-alert::after {
    content: "";
    position: absolute;
    right: auto;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: currentColor;
    opacity: 0.9;
    pointer-events: none;
}

.market-maker-inline-alert.dxtool-alert-autohide-active::after {
    animation: dxtool-alert-autohide-progress 10s linear forwards;
}

.market-maker-inline-alert.alert-info::after {
    background: #0dcaf0;
}

.market-maker-inline-alert.alert-warning::after {
    background: #ffc107;
}

.market-maker-inline-alert.alert-danger::after {
    background: #dc3545;
}

.market-maker-deposit-meta {
    border: 1px solid rgba(24, 33, 77, 0.1);
    border-radius: 0.7rem;
    background: rgba(247, 249, 255, 0.86);
    padding: 0.45rem 0.6rem;
}

.market-maker-deposit-meta strong {
    color: #1e2852;
}

.market-maker-wallet-assets {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.market-maker-wallet-asset {
    border: 1px solid rgba(24, 33, 77, 0.1);
    border-radius: 0.66rem;
    background: rgba(247, 249, 255, 0.75);
    padding: 0.42rem 0.58rem;
}

.market-maker-wallet-asset strong {
    color: #1e2852;
    font-size: 0.88rem;
    line-height: 1.2;
}

.market-maker-modal-title {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.36rem;
}

.market-maker-modal-title-ticker {
    font-size: 0.94rem;
    font-weight: 700;
    color: #1e2852;
    line-height: 1;
    letter-spacing: 0.01em;
}

.market-maker-modal-title-bullet {
    font-size: 0.92rem;
    line-height: 1;
}

.market-maker-modal-chart-wrap {
    position: relative;
    min-height: 124px;
}

.market-maker-modal-price-chart {
    display: block;
    width: 100% !important;
    height: 124px !important;
    background: transparent;
}

.market-maker-modal-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7385;
    font-size: 0.78rem;
    text-align: center;
    pointer-events: none;
}

@media (max-width: 991.98px) {

}

@media (max-width: 767.98px) {
    .market-maker-stat-card .card-body {
        padding: 0.9rem 1rem;
    }

    .market-maker-stat-card .bubble-map-kicker {
        font-size: 0.67rem;
        letter-spacing: 0.12em;
    }

    .market-maker-stat-card .bubble-map-stat-value {
        font-size: clamp(1.35rem, 5.2vw, 1.56rem);
    }

    .market-maker-stat-card .bubble-map-stat-label {
        font-size: 0.82rem;
    }

    .market-maker-pool-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem 0.7rem;
    }

    .market-maker-wallet-assets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-maker-wallet-assets .market-maker-wallet-asset:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 399.98px) {
    .market-maker-wallet-assets {
        grid-template-columns: 1fr;
    }

    .market-maker-wallet-assets .market-maker-wallet-asset:last-child {
        grid-column: auto;
    }
}

/* 8) Home */
.home-page {
    padding: 1.75rem 0 3.25rem;
}

.home-hero-shell,
.home-highlights-section {
    margin-bottom: 1.5rem;
}

.home-hero-surface,
.home-feature-surface {
    box-shadow: 0 24px 60px rgba(18, 25, 38, 0.07);
}

.home-hero-surface {
    padding: 2.5rem;
    overflow: hidden;
}

.home-hero-copy {
    max-width: 34rem;
}

.home-hero-kicker,
.home-section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: #525c6d;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.home-hero-title {
    margin: 0;
    color: #161b26;
    font-family: Poppins-Regular;
    font-size: clamp(2rem, 3vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.02;
}

.home-hero-subtitle {
    margin: 1.25rem 0 0;
    color: #5e6675;
    font-family: Poppins-Regular;
    font-size: 1.06rem;
    line-height: 1.75;
}

.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.75rem;
}

.home-hero-btn {
    min-width: 170px;
    padding: 0.85rem 1.25rem;
}

.home-btn-text {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms ease, transform 200ms ease;
    will-change: opacity, transform;
}

.home-btn-text.is-text-changing {
    opacity: 0;
    transform: translateY(-0.24rem);
}

.home-last-seen-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.home-last-seen-btn.is-hidden {
    display: none !important;
}

.home-last-seen-token {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.home-last-seen-icon {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 9999px;
    object-fit: cover;
    flex: 0 0 1.05rem;
    transform-origin: center;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.home-last-seen-icon.is-remote-loading {
    opacity: 0.92;
}

.home-last-seen-icon.is-remote-ready {
    animation: home-last-seen-icon-flip-in 500ms ease both;
}

.token-remote-icon {
    transform-origin: center;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.token-remote-icon.is-remote-loading {
    opacity: 0.92;
}

.token-remote-icon.is-remote-ready {
    animation: token-remote-icon-flip-in 500ms ease-out both;
}

@keyframes token-remote-icon-flip-in {
    from {
        opacity: 0.68;
        transform: perspective(220px) rotateY(-72deg);
    }

    to {
        opacity: 1;
        transform: perspective(220px) rotateY(0deg);
    }
}

@keyframes home-last-seen-icon-flip-in {
    from {
        opacity: 0.55;
        transform: perspective(220px) rotateY(-88deg);
    }

    to {
        opacity: 1;
        transform: perspective(220px) rotateY(0deg);
    }
}

#startBtn.home-hero-btn {
    color: #fff;
    border-color: transparent;
}

.home-preview-image {
    display: block;
    width: 100%;
    height: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.home-feature-story,
.home-feature-list-card {
    height: 100%;
    padding: 1.75rem;
}

.home-section-title {
    margin: 0;
    color: #161b26;
    font-family: Poppins-Regular;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    line-height: 1.2;
}

.home-section-text {
    margin: 1rem 0 0;
    color: #616a79;
    font-size: 1rem;
    line-height: 1.8;
}

.home-feature-list {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.25rem;
}

.home-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: #30394a;
    font-size: 1rem;
    font-weight: 500;
}

.home-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.3rem;
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    .home-page {
        padding-top: 1.15rem;
    }

    .home-hero-surface {
        padding: 1.5rem;
    }

    .home-hero-copy {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .home-page {
        padding-top: 1.85rem;
    }

    .home-hero-title {
        font-size: 2.35rem;
    }

    .home-hero-subtitle,
    .home-section-text {
        line-height: 1.6;
    }

    .home-feature-story,
    .home-feature-list-card {
        padding: 1.35rem;
    }

    .home-hero-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-btn-text {
        transition: none;
    }

    .home-btn-text.is-text-changing {
        opacity: 1;
        transform: none;
    }
}

.dark-mode .home-hero-surface,
.dark-mode .home-feature-surface {
    border-color: rgba(124, 136, 156, 0.14);
    background: linear-gradient(40deg, rgba(14, 14, 14, 0.89) 50%, rgb(25, 25, 25));
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
}

.dark-mode .home-hero-shell,
.dark-mode .home-hero-surface {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.dark-mode .home-hero-title,
.dark-mode .home-section-title,
.dark-mode .home-feature-list li {
    color: #f3f6ff;
}

.dark-mode .home-hero-subtitle,
.dark-mode .home-section-text {
    color: rgba(223, 230, 242, 0.76);
}

/* 8.5) Sign In */
.signin-page {
    padding: 0 0 3rem;
}

.signin-shell {
    padding-bottom: 2rem;
    padding-top: 2rem;
}

.signin-surface {
    padding: 2.25rem;
    box-shadow: 0 24px 60px rgba(18, 25, 38, 0.07);
}

.signin-copy {
    max-width: 27rem;
}

.signin-title {
    margin: 0;
    color: #161b26;
    font-family: Poppins-Bold;
    font-size: clamp(1.9rem, 3.8vw, 3rem);
    line-height: 1.08;
}

.signin-page .signin-xaman-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 0.14rem 0.38rem;
    background: var(--white);
    box-shadow: none;
}

.signin-page .signin-xaman-pill .xumm-title-img {
    display: block;
}

.signin-subtitle {
    margin: 1rem 0 0;
    color: #5e6675;
    font-size: 1rem;
    line-height: 1.75;
}

.signin-store-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.35rem;
}

.signin-store-link {
    display: inline-flex;
    border-radius: 12px;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.signin-store-link:hover,
.signin-store-link:focus {
    box-shadow: 0 14px 28px rgba(14, 18, 28, 0.18);
    transform: translateY(-1px);
}

.signin-store-link img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 42px;
    height: auto;
}

.signin-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1rem 0.5rem;
}

.signin-qr-slot {
    max-width: 340px;
}

.signin-page .signin-qr-slot-media {
    overflow: visible !important;
    padding: 0.85rem 0;
}

.signin-page #qr-container > img.border.rounded-3.shadow-lg {
    border-radius: 60px !important;
}

.signin-page #qr-container > img.qr-fade-in,
.signin-page #qr-container > img.fade-in:not(.border) {
    border-radius: 0 !important;
}

.signin-status {
    width: 100%;
    max-width: 360px;
    min-height: 2.5rem;
    text-align: center;
}

.signin-status-copy {
    display: block;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.signin-terms-control {
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: -0.25rem 0 0;
    color: #5e6675;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
}

.signin-terms-control .form-check-input {
    flex: 0 0 auto;
    margin-top: 0.16rem;
}

.signin-terms-control a {
    font-weight: 600;
}

.signin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
}

.signin-actions .btn {
    min-width: 150px;
    padding: 0.8rem 1.15rem;
}

@media (max-width: 991.98px) {
    .signin-surface {
        padding: 1.6rem;
    }

    .signin-copy {
        max-width: none;
        text-align: center;
    }

    .signin-store-links {
        justify-content: center;
    }

    .signin-subtitle {
        display: none;
    }

    .signin-panel {
        padding-top: 0;
    }
}

@media (max-width: 767.98px) {
    .signin-page {
        padding-bottom: 2rem;
    }

    .signin-surface {
        padding: 1.25rem;
    }

    .signin-title {
        font-size: 2.15rem;
    }

    .signin-store-links {
        gap: 0.65rem;
        margin-top: 1rem;
    }

    .signin-store-link img {
        max-width: min(140px, 42vw);
    }

    .signin-subtitle {
        line-height: 1.6;
    }

    .signin-actions .btn {
        width: 100%;
    }
}

.dark-mode .signin-surface {
    border-color: rgba(124, 136, 156, 0.14);
    background: linear-gradient(40deg, rgba(14, 14, 14, 0.89) 50%, rgb(25, 25, 25));
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
}

.dark-mode .signin-title {
    color: #f3f6ff;
}

.dark-mode .signin-page .signin-xaman-pill {
    box-shadow: none;
}

.dark-mode .signin-subtitle,
.dark-mode .signin-status-copy,
.dark-mode .signin-terms-control {
    color: rgba(223, 230, 242, 0.76);
}

/* 9) Profile */
.profile-chart-canvas {
    width: 100%;
    height: 300px !important;
    min-height: 300px;
    display: block;
    position: absolute;
    left: 0;
    z-index: 0;
}

.profile-glass-card {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: transparent;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
}

.jumbo-profile {
    padding: 1.75rem 1.25rem;
}

.jumbo-profile .container {
    max-width: 760px;
}

.jumbo-profile img.rounded-circle {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-bottom: 0.85rem !important;
}

.profile-header-icon-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.85rem;
}

.profile-header-icon {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.jumbo-profile .display-5 {
    margin-bottom: 0.9rem;
    font-size: clamp(1.75rem, 3.5vw, 2.45rem);
    font-weight: 700;
    line-height: 1.08;
}

.profile-name-heading {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.62rem;
}

.profile-token-name {
    font: inherit;
}

.profile-issuer-name {
    font-size: 0.56em;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.2;
}

.profile-badges-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}

.profile-badges-row .badge {
    margin: 0;
}

.jumbo-profile .badge {
    margin: 0 0.25rem 0.55rem;
    padding: 0.42rem 0.8rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.jumbo-profile p.my-4 {
    margin-top: 1.1rem !important;
    margin-bottom: 1.2rem !important;
    font-size: 0.94rem;
    line-height: 1.65;
}

.jumbo-profile p.mb-4 {
    margin-bottom: 1.2rem !important;
    font-size: 0.92rem;
}

.jumbo-profile h5 {
    margin-top: 0.35rem;
    margin-bottom: 0;
    font-size: 1.05rem;
}

.jumbo-profile h5 .btn {
    min-width: 122px;
}

.profile-holdings-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.profile-holdings-column > .container {
    display: flex;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .jumbo-profile {
        padding: 1.35rem 0.95rem;
    }

    .jumbo-profile .display-5 {
        font-size: clamp(1.55rem, 7.4vw, 2.05rem);
    }

    .profile-name-heading {
        gap: 0.45rem;
    }

    .jumbo-profile p.my-4 {
        font-size: 0.9rem;
        line-height: 1.55;
    }
}

.profile-page-shell {
    position: relative;
    z-index: 1;
}

.profile-back-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0.75rem 0;
    text-align: left;
}

.profile-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
}

.profile-tokenomics-layout,
.profile-tokenomics-grid {
    align-items: stretch;
}

.profile-tokenomics-summary {
    border-radius: 24px;
    border: 1px solid rgba(129, 148, 182, 0.2);
    background: linear-gradient(150deg, rgba(249, 252, 255, 0.78), rgba(241, 247, 255, 0.66));
    box-shadow: 0 14px 30px rgba(17, 29, 51, 0.1);
    overflow: hidden;
}

.profile-tokenomics-summary .card-body {
    padding: 1.2rem 1.25rem 1.3rem;
}

.profile-tokenomics-summary-header {
    border-bottom: 1px solid rgba(119, 137, 168, 0.16);
    padding-bottom: 0.9rem;
    margin-bottom: 1rem;
}

.profile-tokenomics-summary-kicker {
    display: inline-block;
    color: rgba(64, 91, 139, 0.82);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.profile-tokenomics-summary-title {
    font-size: 1.26rem;
    color: #1d2b46;
}

.profile-tokenomics-summary-subtitle {
    margin-top: 0.3rem;
    color: rgba(70, 85, 110, 0.8);
    font-size: 0.87rem;
}

.profile-tokenomics-summary-body {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 1.15rem;
    align-items: stretch;
}

.profile-tokenomics-summary-side {
    border-right: 1px solid rgba(119, 137, 168, 0.14);
    padding-right: 1rem;
}

.profile-tokenomics-side-title {
    color: #243453;
    font-size: 1rem;
    font-weight: 700;
}

.profile-tokenomics-side-copy {
    color: rgba(71, 88, 119, 0.78);
    font-size: 0.82rem;
}

.profile-holdings-column {
    justify-content: center;
}

.profile-holdings-canvas-wrap {
    width: min(100%, 245px);
    aspect-ratio: 1 / 1;
    border: 0;
    background: transparent;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.35rem auto 0;
}

.profile-holdings-canvas-wrap #statsChart {
    max-width: 100%;
    max-height: 100%;
}

.profile-tokenomics-summary-main {
    min-width: 0;
}

.profile-tokenomics-wallet-list {
    overflow: auto;
    max-height: 360px;
    padding-right: 0.1rem;
    gap: 0.55rem;
}

.profile-tokenomics-wallet-row {
    min-height: 0;
    padding: 0.48rem 0.62rem;
    gap: 0.3rem;
}

.profile-tokenomics-wallet-title-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    overflow: visible;
    text-align: left;
}

.profile-tokenomics-wallet-title {
    font-size: 0.76rem;
    line-height: 1.1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.profile-tokenomics-wallet-bottom {
    margin-top: 0;
    align-items: flex-start;
    gap: 0.42rem;
    justify-content: flex-start;
    text-align: left;
}

.profile-tokenomics-wallet-subtitle {
    flex: 1 1 auto;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0 !important;
    text-align: left;
}

.profile-wallet-open-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-width: 1rem;
    min-height: 1rem;
    text-decoration: none !important;
}

.profile-wallet-open-link ion-icon {
    width: 0.9rem;
    height: 0.9rem;
}

.profile-facts-grid {
    margin-top: 0.4rem;
}

.profile-fact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100%;
    padding: 1rem 1rem 0.95rem;
    border-radius: 16px;
    border: 1px solid rgba(121, 140, 174, 0.22);
    background: linear-gradient(155deg, rgba(250, 253, 255, 0.9), rgba(240, 247, 255, 0.85));
    box-shadow: 0 14px 28px rgba(15, 26, 45, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.profile-fact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(15, 26, 45, 0.12);
}

.profile-fact-icon {
    order: -1;
    align-self: flex-start;
    width: auto;
    height: auto;
    border-radius: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.6rem;
}

.profile-fact-label {
    color: rgba(72, 86, 112, 0.84);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-fact-value {
    color: #1d2944;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    word-break: break-word;
}

.profile-fact-value a {
    color: inherit;
    text-decoration-color: rgba(67, 122, 203, 0.45);
}

.text-ellipsis-cell {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 10) Swap */
.swap-warning-label {
    max-width: 500px;
}

.swap-card-grid {
    align-items: stretch;
}

.swap-panel-card {
    width: min(100%, 360px);
    flex: 1 1 320px;
}

.swap-placeholder-icon {
    filter: opacity(0.1);
    width: 90px;
    height: 90px;
    color: currentColor;
}

.swap-state-icon {
    filter: opacity(0.1);
    width: 90px;
    height: 90px;
    color: currentColor;
}

.swap-hero-icon {
    width: 72px;
    height: 57px;
    color: currentColor;
}

.swap-input-icon {
    width: 1.2em;
    height: 1.2em;
    color: var(--color-text-soft);
}

.payment-inline-action-icon {
    width: 1.2em;
    height: 1.2em;
}

.payment-signed-icon {
    width: 70px;
    height: 50px;
    color: var(--color-success);
}

.reward-token-link,
.reward-token-link:visited {
    color: var(--color-text-main);
}

.reward-token-link:hover,
.reward-token-link:focus {
    color: var(--color-primary);
}

/* Rewards cards (scoped) */
.rewards-page .reward-grid {
    row-gap: 0.1rem;
}

.rewards-page .reward-grid > .col {
    margin-bottom: 0.45rem;
}

.rewards-page .reward-grid > .col.d-flex {
    display: block !important;
}

.rewards-page .reward-card {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 18px -12px rgba(17, 24, 39, 0.35);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.rewards-page .reward-card-gift {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 285px;
    border: 0;
    color: #fff;
    isolation: isolate;
    box-shadow: 0 16px 30px -22px rgba(15, 23, 42, 0.72);
}

.rewards-page .reward-card-gift-reward {
    background: #185abc;
}

.rewards-page .reward-card-gift-giveaway {
    background: #087443;
}

.rewards-page .reward-card-gift-enrollment {
    background: #c41f33;
}

.rewards-page .reward-card-gift-pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.95;
    pointer-events: none;
}

.rewards-page .reward-card-gift-pattern::before,
.rewards-page .reward-card-gift-pattern::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
}

.rewards-page .reward-card-gift-pattern::before {
    right: -28%;
    top: -20%;
    width: 68%;
    height: 150%;
    background: rgba(255, 255, 255, 0.14);
    transform: rotate(18deg);
}

.rewards-page .reward-card-gift-pattern::after {
    left: -14%;
    bottom: -32%;
    width: 78%;
    height: 70%;
    border-radius: 42% 58% 0 0;
    background: rgba(255, 255, 255, 0.16);
}

.rewards-page .reward-card-gift-reward .reward-card-gift-pattern {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0 18%, transparent 18% 100%),
        linear-gradient(105deg, transparent 0 58%, rgba(24, 43, 128, 0.48) 58% 100%);
}

.rewards-page .reward-card-gift-giveaway .reward-card-gift-pattern {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0 20%, transparent 20% 100%),
        linear-gradient(108deg, transparent 0 56%, rgba(7, 89, 48, 0.5) 56% 100%);
}

.rewards-page .reward-card-gift-enrollment .reward-card-gift-pattern {
    background:
        linear-gradient(135deg, rgba(255, 210, 93, 0.42) 0 24%, transparent 24% 100%),
        linear-gradient(112deg, transparent 0 55%, rgba(122, 22, 44, 0.48) 55% 100%);
}

.rewards-page .reward-card:hover {
    transform: translateY(-2px);
    border-color: rgba(90, 39, 198, 0.28);
    box-shadow: 0 10px 24px -14px rgba(90, 39, 198, 0.42);
}

.rewards-page .reward-card-gift:hover {
    border-color: transparent;
    box-shadow: 0 22px 42px -25px rgba(15, 23, 42, 0.86);
}

.rewards-page .reward-card .card-header {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.05rem 1rem 0.65rem;
    border-bottom: 0;
    background: transparent;
}

.rewards-page .reward-card-gift .card-header {
    padding-right: 5.85rem;
}

.rewards-page .reward-card-type {
    align-self: flex-start;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: default;
}

.rewards-page .reward-card .card-header h4 {
    width: 100%;
    line-height: 1.2;
    color: #fff;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: 0;
    text-align: left;
    cursor: default;
}

.rewards-page .reward-card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 1rem 1rem;
}

.rewards-page .reward-card-gift .reward-card-body {
    flex: 1 1 auto;
}

.rewards-page .reward-card-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

.rewards-page .reward-card-value {
    margin-bottom: 0;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    cursor: default;
}

.rewards-page .reward-card-availability {
    width: 100%;
    max-width: 18rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    cursor: default;
}

.rewards-page .reward-card-progress {
    position: absolute;
    top: 0.95rem;
    right: 0.95rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.25rem;
    min-height: 2rem;
    padding: 0.25rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.13);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: default;
}

.rewards-page .reward-card-meta {
    flex: 0 0 auto;
    margin-bottom: 0.35rem !important;
    font-size: 0.87rem;
    color: var(--color-text-body);
    cursor: default;
}

.rewards-page .reward-card-meta hr {
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
}

.rewards-page .reward-card-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    font-size: 1rem;
    min-height: 42px;
    padding-top: 0.48rem;
    padding-bottom: 0.48rem;
    font-weight: 600;
    border-radius: 0.55rem;
    line-height: 1.2;
}

.rewards-page .reward-card-gift .reward-card-body .btn {
    border-color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.92);
    color: #172033;
}

.rewards-page .reward-card-body .btn.btn-primary {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #fff;
}

.rewards-page .reward-card-gift .reward-card-body .btn.btn-primary {
    border-color: rgba(255, 255, 255, 0.92);
    background-color: rgba(255, 255, 255, 0.92);
    color: #172033;
}

.rewards-page .reward-card-body .btn.btn-primary:not(:disabled):not(.disabled):hover,
.rewards-page .reward-card-body .btn.btn-primary:not(:disabled):not(.disabled):focus {
    border-color: var(--color-primary-hover);
    background-color: var(--color-primary-hover);
    color: #fff !important;
    box-shadow: none;
}

.rewards-page .reward-card-gift .reward-card-body .btn.btn-primary:not(:disabled):not(.disabled):hover,
.rewards-page .reward-card-gift .reward-card-body .btn.btn-primary:not(:disabled):not(.disabled):focus {
    border-color: #fff;
    background-color: #fff;
    color: #172033 !important;
}

.rewards-page .reward-card-body .btn.btn-outline-secondary {
    border-color: #c8ccd1;
    color: #6f7680;
    background-color: transparent;
}

.rewards-page .reward-card-gift .reward-card-body .btn.btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.32);
    color: rgba(255, 255, 255, 0.88);
    background-color: rgba(255, 255, 255, 0.08);
}

.rewards-page .reward-card-body .btn.btn-outline-secondary:hover,
.rewards-page .reward-card-body .btn.btn-outline-secondary:focus {
    border-color: #bcc2ca;
    color: #5f6772;
    background-color: rgba(127, 136, 148, 0.06);
    box-shadow: none;
}

.rewards-page .reward-card-gift .reward-card-body .btn.btn-outline-secondary:hover,
.rewards-page .reward-card-gift .reward-card-body .btn.btn-outline-secondary:focus {
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
    background-color: rgba(255, 255, 255, 0.12);
}

.rewards-page .reward-card-body .btn:disabled,
.rewards-page .reward-card-body .btn.disabled {
    opacity: 1;
    cursor: not-allowed;
}

.rewards-page .reward-card-body .btn.btn-primary:disabled,
.rewards-page .reward-card-body .btn.btn-primary.disabled {
    background-color: #b8acd4;
    border-color: #b8acd4;
    color: #f7f6fb;
}

.rewards-page .reward-card-gift .reward-card-body .btn.btn-primary:disabled,
.rewards-page .reward-card-gift .reward-card-body .btn.btn-primary.disabled {
    background-color: rgba(255, 255, 255, 0.48);
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(23, 32, 51, 0.82);
}

.rewards-page .reward-card-meta li {
    line-height: 1.3;
    margin-bottom: 0.2rem;
    font-weight: 700;
    color: #4b5362;
    cursor: default;
}

.rewards-page .reward-card-meta li:last-child {
    margin-bottom: 0;
}

.rewards-page .reward-card-meta .text-info {
    color: #6b7484 !important;
    font-weight: 400;
    cursor: default;
}

.rewards-page .reward-card-value small {
    font-size: 0.72em;
    font-weight: 500;
    margin-left: 0.15rem;
    cursor: default;
}

.rewards-page .reward-card-value .reward-token-link,
.rewards-page .reward-card-value .reward-token-link:visited {
    color: rgba(255, 255, 255, 0.78) !important;
}

.rewards-page .reward-card a[href],
.rewards-page .reward-card a[href] * {
    cursor: pointer;
}

@media (max-width: 575.98px) {
    .rewards-page .reward-card .card-header {
        min-height: 58px;
    }

    .rewards-page .reward-card-gift {
        min-height: 265px;
    }

    .rewards-page .reward-card-gift .card-header {
        padding-right: 5.35rem;
    }

    .rewards-page .reward-card-progress {
        top: 0.8rem;
        right: 0.8rem;
        min-width: 3.85rem;
        min-height: 1.85rem;
        padding: 0.2rem 0.65rem;
        font-size: 0.86rem;
    }

    .rewards-page .reward-card-value {
        font-size: 1.75rem;
    }
}

.dark-mode .rewards-page .reward-card {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.85);
}

.dark-mode .rewards-page .reward-card-gift {
    border-color: transparent;
    box-shadow: 0 16px 34px -24px rgba(0, 0, 0, 0.92);
}

.dark-mode .rewards-page .reward-card:hover {
    border-color: rgba(189, 169, 248, 0.38);
    box-shadow: 0 12px 26px -14px rgba(39, 20, 99, 0.65);
}

.dark-mode .rewards-page .reward-card-value {
    color: #fff;
}

.dark-mode .rewards-page .reward-card-availability {
    color: rgba(255, 255, 255, 0.82);
}

.dark-mode .rewards-page .reward-card-progress {
    border-color: rgba(255, 255, 255, 0.24);
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.13);
}

.dark-mode .rewards-page .reward-card-meta {
    color: rgba(220, 226, 238, 0.78);
}

.dark-mode .rewards-page .reward-card-meta .text-info {
    color: rgba(198, 208, 228, 0.82) !important;
    font-weight: 400;
}

.dark-mode .rewards-page .reward-card-meta li {
    color: rgba(231, 237, 248, 0.9);
}

.dark-mode .rewards-page .reward-card-body .btn.btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(232, 236, 243, 0.86);
}

.dark-mode .rewards-page .reward-card-body .btn.btn-outline-secondary:hover,
.dark-mode .rewards-page .reward-card-body .btn.btn-outline-secondary:focus {
    border-color: rgba(255, 255, 255, 0.34);
    color: #f2f4f8;
    background-color: rgba(255, 255, 255, 0.06);
}

.dark-mode .rewards-page .reward-card-body .btn.btn-primary:disabled,
.dark-mode .rewards-page .reward-card-body .btn.btn-primary.disabled {
    background-color: rgba(118, 95, 177, 0.58);
    border-color: rgba(118, 95, 177, 0.58);
    color: rgba(255, 255, 255, 0.88);
}

#offers_list {
    background: transparent;
}

.swap-offers-list {
    min-width: 100%;
}

#offers_list .swap-offers-loading {
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 96px;
    width: 100%;
    text-align: left;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    #offers_list .swap-offers-loading {
        min-height: 72px;
        gap: 0.45rem;
        font-size: 0.82rem;
    }
}

#offers_list .list-group-item,
#offers_list .list-group-item-action {
    background-color: transparent;
    color: inherit;
}

#offers_list .swap-offer-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

#offers_list .swap-offer-main {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

#offers_list .swap-offer-icon {
    width: 20px;
    height: 20px;
    margin-top: -1px;
    border-radius: 50%;
    flex: 0 0 20px;
}

#offers_list .swap-offer-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#offers_list .swap-offer-value {
    flex: 0 0 auto;
    margin-left: auto;
}

#offers_list .list-group-item a {
    color: inherit;
}

#offers_list .list-group-item-action:hover,
#offers_list .list-group-item-action:focus {
    color: inherit;
    background-color: rgba(0, 0, 0, 0.04);
}

#offers_list .list-group-item.active,
#offers_list .list-group-item-action.active {
    color: var(--color-primary);
    background-color: rgba(90, 39, 198, 0.1);
    border-color: rgba(90, 39, 198, 0.25);
}

#offers_list.offers-list-locked {
    pointer-events: none;
}

#offers_list.offers-list-locked .list-group-item,
#offers_list.offers-list-locked .list-group-item-action {
    opacity: 0.6;
}

/* 11) Notification modal */
.app-notification-content {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}

.app-notification-header,
.app-notification-body,
.app-notification-content .modal-footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.app-notification-header {
    padding-top: 1.4rem;
    padding-bottom: 0.4rem;
    background:
        radial-gradient(circle at top right, rgba(66, 99, 235, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(244, 247, 255, 0.95) 0%, #ffffff 100%);
}

.app-notification-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.app-notification-body {
    padding-top: 0.75rem;
    padding-bottom: 1rem;
    background: transparent;
}

.app-notification-copy {
    color: var(--color-text-muted);
}

.app-notification-dynamic {
    text-align: left;
}

.app-notification-dynamic .page {
    max-width: none;
    margin: 0;
    padding: 0;
}

.app-notification-dynamic .hero,
.app-notification-dynamic .panel {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 1rem;
}

.app-notification-dynamic .tag,
.app-notification-dynamic .hero p {
    display: none;
}

.app-notification-dynamic h1 {
    display: none;
}

.app-notification-dynamic .meta {
    display: block;
    margin: 0 0 1rem;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.app-notification-dynamic h2 {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    color: var(--color-text-main);
}

.app-notification-dynamic ol {
    margin: 0;
    padding-left: 1.2rem;
    list-style: decimal !important;
    list-style-position: outside;
}

.app-notification-dynamic li,
.app-notification-dynamic p {
    color: var(--color-text-main);
    font-size: 0.84rem;
    line-height: 1.58;
}

.app-notification-dynamic li::marker {
    color: var(--color-text-main);
    font-weight: 600;
}

.app-notification-dynamic .summary {
    border-left: 3px solid var(--color-primary);
    padding-left: 0.9rem;
}

.dark-mode .app-notification-content {
    background: linear-gradient(180deg, rgba(29, 33, 44, 0.98) 0%, rgba(17, 19, 28, 0.98) 100%);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.45);
}

.dark-mode .app-notification-header {
    background:
        radial-gradient(circle at top right, rgba(102, 126, 234, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(32, 37, 52, 0.98) 0%, rgba(24, 27, 37, 0.98) 100%);
}

.dark-mode .app-notification-body,
.dark-mode .app-notification-content .modal-footer {
    background-color: transparent;
}

.dark-mode .app-notification-copy,
.dark-mode .app-notification-body p,
.dark-mode .app-notification-header .modal-title {
    color: rgba(236, 240, 248, 0.95);
}

.dark-mode .app-notification-eyebrow {
    color: rgba(244, 247, 255, 0.96) !important;
}

.dark-mode .app-notification-dynamic h2,
.dark-mode .app-notification-dynamic li,
.dark-mode .app-notification-dynamic p {
    color: rgba(236, 240, 248, 0.95);
}

.dark-mode .app-notification-dynamic .meta {
    color: rgba(200, 208, 226, 0.82);
}

.dark-mode .app-notification-dynamic li::marker {
    color: rgba(244, 247, 255, 0.98);
}

.font-poppins-bold {
    font-family: Poppins-Bold;
}

.table {
    margin-bottom: 0;
    width: 100%;
    background-color: transparent;
}

.table td {
    font-size: 12px;
    padding: 10px 10px;
    line-height: 1.35;
    vertical-align: middle;
}

.table th {
    font-size: 12px;
}

.table-head-soft th,
.table-head-soft td,
.table-head-soft th a {
    color: var(--color-table-head) !important;
}

.no-data {
    text-align: center;
    color: #b9c2ca;
}

.settings .wallet-history .no-data td,
#tTransactions .no-data td,
#tOpenOffers .no-data td,
#tFilledOffers .no-data td {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.no-data i,
.no-data ion-icon {
    font-size: 100px;
    display: block;
    line-height: 0px;
    color: #dce1e5;
    width: 100px;
    height: 100px;
    margin: 0 auto 0.65rem;
}

.no-data ion-icon + * {
    display: inline;
}

.dark-mode .no-data {
    color: rgba(196, 204, 224, 0.82);
}

.dark-mode .no-data ion-icon,
.dark-mode .no-data i {
    color: rgba(230, 235, 255, 0.28);
}

.error-page h2 {
    font-size: 250px;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1;
}

.error-page p {
    font-size: 16px;
    margin-bottom: 40px;
}

.error-page a {
    border: 1px solid #e0e3eb;
    display: inline-block;
    padding: 11px 30px 8px;
    color: var(--color-text-body);
    transition: .3s;
}

.error-page a:hover {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
}

.error-page a i {
    margin-left: 10px;
}

.card-header h4 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-animated {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-animated:hover {
    transform: scale(1.02);
}

.settings .card {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 14px -6px;
    border-radius: 5px;
    margin-bottom: 15px;
}


.dashboard-sidebar-card {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.settings .card.dashboard-sidebar-card {
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

.dashboard-sidebar-card-header {
    padding: 0;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
}

.dashboard-sidebar-list {
    border-radius: 0;
    text-align: left;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.62rem;
    isolation: isolate;
}

.dashboard-sidebar-list .dashboard-sidebar-link {
    border: 1px solid rgba(117, 138, 173, 0.16);
    border-radius: 12px;
    padding: 0.72rem 0.78rem;
    width: 100%;
    flex: 0 0 auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(243, 247, 255, 0.86) 100%);
    color: var(--color-text-main);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
    position: relative;
    z-index: 1;
}

.dashboard-sidebar-list .dashboard-sidebar-link:first-child {
    border-top: 1px solid rgba(117, 138, 173, 0.16);
}

.dashboard-sidebar-link-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(117, 138, 173, 0.18);
    box-shadow: 0 5px 10px rgba(15, 23, 42, 0.08);
}

.dashboard-sidebar-link-media {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
}

.dashboard-sidebar-link-copy {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}

.dashboard-sidebar-link-title {
    color: var(--color-text-main);
    font-size: clamp(0.86rem, 1.35vw, 0.98rem);
    line-height: 1.1;
    font-family: 'Poppins-SemiBold';
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-sidebar-link-balance {
    display: block;
    margin-top: 0.22rem;
    color: var(--color-table-head);
    opacity: 0.92;
}

.dashboard-sidebar-link-balance-value {
    font-size: clamp(0.69rem, 1.18vw, 0.86rem);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.dashboard-sidebar-link-balance-lp {
    font-size: 0.7rem;
    letter-spacing: 0.02em;
}

.dashboard-sidebar-lp-icons {
    position: relative;
    width: 56px;
    height: 44px;
    flex: 0 0 56px;
}

.dashboard-sidebar-lp-icons .dashboard-lp-asset-shell-primary {
    width: 40px;
    height: 40px;
    left: 0;
    top: 0;
}

.dashboard-sidebar-lp-icons .dashboard-lp-asset-shell-secondary {
    width: 28px;
    height: 28px;
    left: 24px;
    top: 16px;
}

.dashboard-sidebar-link-spinner {
    flex-shrink: 0;
    min-width: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: 0.45rem;
}

.dashboard-sidebar-list .dashboard-sidebar-link:hover,
.dashboard-sidebar-list .dashboard-sidebar-link:focus {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(236, 243, 255, 0.96) 100%);
    border-color: rgba(73, 100, 160, 0.34);
    color: var(--color-text-main);
    transform: translateY(-1px);
    box-shadow: 0 6px 10px rgba(15, 23, 42, 0.08);
    z-index: 3;
}

.dashboard-sidebar-list .dashboard-sidebar-link:focus-visible {
    outline: 2px solid rgba(43, 102, 238, 0.38);
    outline-offset: 2px;
}

.dashboard-sidebar-list .dashboard-sidebar-link.active,
.dashboard-sidebar-list .dashboard-sidebar-link.active:hover,
.dashboard-sidebar-list .dashboard-sidebar-link.active:focus {
    background: var(--bs-primary);
    box-shadow: 0 4px 12px rgba(30, 76, 170, 0.3);
    color: #fff;
    transform: none;
}

.dashboard-sidebar-list .dashboard-sidebar-link.active .dashboard-sidebar-link-title,
.dashboard-sidebar-list .dashboard-sidebar-link.active .dashboard-sidebar-link-balance,
.dashboard-sidebar-list .dashboard-sidebar-link-active-text {
    color: #fff !important;
}

.dashboard-sidebar-list .dashboard-sidebar-link.active .dashboard-sidebar-link-icon {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: none;
}

.settings .wallet .tab-content li i {
    font-size: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    text-align: center;
    line-height: 40px;
    margin-right: 15px;
}

.settings .wallet .tab-content h2 {
    margin-bottom: 0;
    font-size: 16px;
}

.settings .wallet .tab-content h6 {
    margin-bottom: 0;
}

.settings .wallet .tab-content li:first-child {
    border-bottom: 1px solid var(--color-soft-border);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.settings .wallet .tab-content button.green {
    background: #2bc9b4;
    color: #ffffff;
    box-shadow: 0px 0px 15px 0px #2bc9b4ad;
}

.settings .wallet .tab-content button.red {
    background: #ff231f;
    box-shadow: 0px 0px 15px 0px #ff231fad;
    color: #ffffff;
}

.settings .wallet .tab-content button {
    padding: 12px 60px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.settings .wallet .tab-content button:focus {
    box-shadow: none;
}

.settings .wallet .tab-content ul {
    margin: 0 0 40px;
}

.settings .wallet-address input {
    padding: 25px 15px;
    font-size: 14px;
    border: 1px solid #e0e3eb;
}

.settings .wallet-history i {
    margin-left: 14px;
}

.settings .wallet-address .input-group {
    padding-top: 30px;
}

.settings .form-check-label {
    cursor: pointer;
}

.dashboard-sidebar-column-pending {
    visibility: hidden;
}

.wallet-history {
    overflow-x: auto;
}

@media (max-width: 991.98px) {
    /* Intentional responsive override for CTA buttons (keeps desktop spacing untouched). */
    .btn-1,
    .btn-2 {
        margin: 8px;
        text-align: center;
    }

    .settings .wallet .row {
        display: flex;
        flex-direction: column;
    }

    .dashboard-main-column {
        display: contents;
    }

    .dashboard-sidebar-column {
        order: 2;
        width: auto;
        max-width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }

    .dashboard-sidebar-column.dashboard-sidebar-column-pending {
        display: none;
    }

    .dashboard-card-viewer {
        order: 1;
        width: auto;
        max-width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }

    .dashboard-open-orders-card {
        order: 3;
        width: auto;
        max-width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        box-sizing: border-box;
    }

    .dashboard-upcoming-giveaways-card {
        order: 4;
        width: auto;
        max-width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        box-sizing: border-box;
    }

    .dashboard-latest-transactions-card {
        order: 5;
        width: auto;
        max-width: calc(100% - 30px);
        margin-left: 15px;
        margin-right: 15px;
        box-sizing: border-box;
    }

    .dashboard-card-balance-heading {
        gap: 0.2rem;
    }

    .dashboard-card-balance-value {
        font-size: clamp(0.88rem, 3.9vw, 1.08rem);
    }

    .dashboard-token-card-body {
        padding: 0.95rem 1rem;
        gap: 0.55rem;
    }

    .dashboard-token-card-icon {
        width: 2.2rem;
        height: 2.2rem;
        flex-basis: 2.2rem;
        font-size: 1.3rem;
    }

    .dashboard-card-actions .btn {
        min-height: 2.2rem;
        padding: 0.38rem 0.82rem;
        font-size: 0.72rem;
    }

    .dashboard-card-actions-left {
        min-width: 5.7rem;
    }

    .dashboard-card-actions-right .btn {
        min-width: 4.8rem;
    }

    .dashboard-sidebar-link-balance-value {
        font-size: clamp(0.68rem, 2.8vw, 0.84rem);
    }

}

@media (max-width: 991.98px) {

    header .navbar {
        align-items: flex-start;
    }

    #headerMenu.show,
    #headerMenu.collapsing {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 0.75rem;
        align-items: flex-start;
    }

    #headerMenu.collapsing {
        overflow: hidden !important;
    }

    #headerMenu.collapsing .navbar-nav {
        overflow: hidden;
    }

    #headerMenu .main-header-menu-column {
        align-items: flex-start;
    }

    #headerMenu .main-header-menu-column-primary {
        order: 1;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    #headerMenu .main-header-menu-column-secondary {
        order: 2;
        flex: 0 0 auto;
        width: auto;
        min-width: fit-content;
        margin-left: auto;
        padding-left: 0;
        justify-content: flex-end;
    }

    #headerMenu .main-header-nav {
        width: 100%;
        margin-top: 10px;
        margin-right: 0;
        margin-left: 20px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #headerMenu .main-header-nav > .nav-item {
        width: 100%;
        justify-content: flex-start;
    }

    #headerMenu .main-header-nav > .nav-item > .nav-link {
        text-align: left;
    }

    .main-header-account-nav {
        width: auto;
        min-width: fit-content;
        margin-left: auto;
        margin-bottom: 0;
    }

    .main-header-account-nav .main-header-guest-cta {
        display: none !important;
    }

    header button.navbar-toggler i,
    header button.navbar-toggler ion-icon {
        font-size: 30px;
        color: black;
    }

    header button.navbar-toggler {
        border-color: rgba(24, 33, 77, 0.18);
    }

    .main-header-menu .dropdown-menu::before {
        right: inherit;
        left: 5%;
    }

    .dark-mode header button.navbar-toggler {
        border-color: rgba(236, 242, 255, 0.28);
        background-color: rgba(255, 255, 255, 0.03);
    }

    .dark-mode header button.navbar-toggler i,
    .dark-mode header button.navbar-toggler ion-icon {
        color: #fff;
    }

    /* Intentional mobile overrides for collectible cards (do not merge with desktop block). */
    .nft-card .card {
        width: 9rem !important;
        font-size: 76% !important;
    }

    .nft-card .card .my-4 {
        margin: 1rem !important;
    }

    .nft-card .card .card-title {
        font-size: 120% !important;
        inline-size: auto !important;
    }

    .nft-img-container img {
        min-height: 9rem !important;
    }

    .nft-card .nft-img-container {
        width: 9rem !important;
        height: 9rem !important;
        min-height: 9rem !important;
    }

    .nft-card .ticker_img_small {
        width: 10px !important;
    }

    .nft-card .card-footer label,
    .nft-card .card-footer strong {
        font-size: 12px !important;
    }

    .temp-nft-card .card {
        width: 9rem !important;
    }

    .temp-nft-card .card-img-top {
        height: 9rem !important;
    }

    .temp-nft-card .card-text {
        height: 50px !important;
    }

    .settings .card-body {
        padding: 1rem !important;
    }
}

@media only screen and (max-width: 576px) {
    /* Intentional mobile cap; base selector keeps desktop/tablet behavior. */
    #trustlinesList {
        max-height: 60vh !important;
    }

    .hires-only {
        display: none;
    }

    .lowres-only {
        display: inherit !important;
    }

}

/* Group 4: Legacy Bootstrap Compatibility Overrides */

@media (hover: hover) and (pointer: fine) {

    .nft-img-container img:hover {
        transform: scale(1.2);
    }

}

h1,
h2,
h3,
h4,
h5 {
    font-family: Poppins-Regular;
}

#headerMenu .dropdown-menu hr {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.body-content {
    background-color: #f5f5f5;
    padding-top: 60px;
    min-height: 100vh;
}

.qrScanner {
    padding: 0px !important;
}

.qrScanner div {
    width: auto !important;
    border: none !important;
}

.qrScanner div div video {
    width: 100% !important;
}

.qrScanner div div img {
    display: none;
}

.qrScanner div div div div div span button {
    display: none !important;
}

#reader video {
    width: 100% !important;
}

/* Base trustlines panel behavior; mobile max-height override lives in media query above. */
#trustlinesList {
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    gap: 0.36rem;
    padding: 0.55rem 0.7rem 1.7rem;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 137, 170, 0.45) transparent;
}

#trustlinesList::-webkit-scrollbar {
    width: 8px;
}

#trustlinesList::-webkit-scrollbar-thumb {
    background: rgba(120, 137, 170, 0.45);
    border-radius: 999px;
}

#trustlinesList::-webkit-scrollbar-track {
    background: transparent;
}

.markets-search-box {
    position: relative;
    min-width: 0;
}

#search-results {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 2000;
    width: 100%;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(186, 194, 208, 0.5);
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 34px rgba(21, 28, 41, 0.12);
}

@media (max-width: 767.98px) {
    .markets-page > .container > .navbar.markets-discovery-toolbar {
        padding-left: 0;
        padding-right: 0;
    }

    .markets-page .markets-search-box {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .markets-page #search-markets {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
    }
}

.markets-search-results .market-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.3;
    border: 0 !important;
    border-radius: 0.7rem;
    background-color: transparent;
}

.markets-search-results .market-search-item.is-hidden {
    display: none !important;
}

.markets-search-results .market-search-item:first-child {
    border-top: 0;
}

.markets-search-results .market-search-item:last-child {
    border-bottom: 0;
}

.markets-search-results .market-search-item:hover,
.markets-search-results .market-search-item:focus {
    color: var(--color-menu-hover-text);
    background-color: var(--color-menu-hover-bg);
}

.markets-search-results .market-search-item.active,
.markets-search-results .market-search-item:active {
    color: #fff;
    background-color: var(--color-primary);
}

#tSell table {
    width: 99.6%;
}

#tSell tr:hover~tr {
    background-color: #f6f8f9;
}

#tBuy tr:has(~ tr:hover) {
    background-color: #f6f8f9;
}

.ticker_img_small {
    width: 15px;
    margin-top: -3px;
}

.tab-pane {
    scroll-margin-top: 81px;
}

.pre_load {
    display: none;
}

.multiline-ellipsis {
    display: block;
    display: -webkit-box;
    line-height: 1.4;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lowres-only {
    display: none;
}

/* Tabs */
.nav-tabs .nav-link:hover {
    border-color: #505050 #505050 #505050;
}

.nft-card .card {
    width: 16rem;
    border-radius: 0.7rem;
    overflow: hidden;
}

.nft-card,
.temp-nft-card {
    padding-right: 8px;
    padding-left: 8px;
}

.nft-card .collapse {
    overflow: hidden;
}

.nft-card h5 {
    inline-size: 200px;
    overflow-wrap: break-word;
    margin-bottom: 10px !important;
}

.nft-card small {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    max-width: 100%;
    text-align: left;
}

.nft-img-container img {
    transition: transform .2s;
    min-height: 256px;
    width: 100%;
    height: 256px;
    object-fit: cover;
    display: block;
}

.nft-card svg,
.nft-card .collectibles-empty-icon {
    min-height: 0;
}

.collectibles-empty-icon,
.collectibles-no-data-icon {
    width: 100px;
    height: 100px;
    color: currentColor;
}

.collectibles-empty-icon {
    color: rgba(150, 162, 178, 0.85);
    margin: 0 auto;
}

.dark-mode .collectibles-empty-icon {
    color: rgba(182, 196, 226, 0.42);
}

.nft-card .nft-img-container {
    width: 16rem;
    overflow: hidden;
    text-align: center;
    height: 256px;
    min-height: 256px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f5f7;
}

.nft-card .card-footer {
    padding: 0.5rem 1rem;
}

.loading-bkg {
    animation-name: backgroundColorPalette;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
}

@keyframes backgroundColorPalette {
    0% {
        background: rgba(0, 0, 0, 0.05);
    }

    100% {
        background: rgba(255, 255, 255, 0.05);
    }
}

#titlePrice {
    font-size: 22px;
}

#fetch_icon {
    float: right;
    margin-right: 0;
    color: #fff !important;
    cursor: pointer !important;
}

#fetch_icon,
#fetch_icon * {
    cursor: pointer !important;
}

#fetch_icon svg,
#fetch_icon ion-icon {
    width: 20px;
    height: 20px;
    color: currentColor !important;
    fill: currentColor !important;
}

.target-highlight {
    animation-name: target-fade;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}

.inverted-target-highlight {
    animation-name: inverted-target-fade;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}

#search-token:focus {
    border-color: #ced4da;
    -webkit-box-shadow: none;
    box-shadow: none;
}

@keyframes target-fade {
    0% {
        border: 1px solid var(--color-primary);
    }

    100% {
        border: 1px solid rgba(0, 0, 0, .125);
    }
}

@-webkit-keyframes target-fade {
    0% {
        border: 1px solid var(--color-primary);
    }

    100% {
        border: 1px solid rgba(0, 0, 0, .125);
    }
}

@-moz-keyframes target-fade {
    0% {
        border: 1px solid var(--color-primary);
    }

    100% {
        border: 1px solid rgba(0, 0, 0, .125);
    }
}

@keyframes inverted-target-fade {
    0% {
        border: 1px solid #27c651;
    }

    100% {
        border: 1px solid rgba(0, 0, 0, .125);
    }
}

@-webkit-keyframes inverted-target-fade {
    0% {
        border: 1px solid #27c651;
    }

    100% {
        border: 1px solid rgba(0, 0, 0, .125);
    }
}

@-moz-keyframes inverted-target-fade {
    0% {
        border: 1px solid #27c651;
    }

    100% {
        border: 1px solid rgba(0, 0, 0, .125);
    }
}

/* Group 4: Bootstrap migration overrides (from public/assets/css/bootstrap-overrides.css) */
/* Bootstrap compatibility overrides (kept separate from app styles) */

footer a:not(.text-reset):not(.widget-logo),
footer a:not(.text-reset):not(.widget-logo):visited {
    color: var(--color-primary);
}

footer a:not(.text-reset):not(.widget-logo):hover,
footer a:not(.text-reset):not(.widget-logo):focus {
    color: var(--color-primary-dark);
}

footer .footer-title {
    color: #000 !important;
}

footer .footer-link,
footer .footer-link:visited {
    color: var(--color-text-muted) !important;
}

footer .footer-link:hover,
footer .footer-link:focus {
    color: var(--color-text-muted) !important;
}

.legal-page {
    padding: 2rem 0 3rem;
}

.legal-shell {
    max-width: 920px;
}

.legal-card {
    border: 1px solid rgba(24, 33, 77, 0.1);
    box-shadow: 0 14px 32px rgba(17, 29, 51, 0.08);
}

.legal-card .card-body {
    padding: clamp(1.35rem, 3vw, 2.4rem);
}

.legal-kicker {
    margin-bottom: 0.6rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.legal-card h1 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
}

.legal-card h2 {
    margin-top: 1.7rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
}

.legal-card p {
    color: #4f5661;
    line-height: 1.7;
}

.text-primary {
    color: var(--color-primary) !important;
}

a.text-primary:focus,
a.text-primary:hover {
    color: var(--color-primary-dark) !important;
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn:not(.trade-action-btn):disabled,
.btn:not(.trade-action-btn).disabled {
    background-color: var(--color-btn-disabled-bg) !important;
    border-color: var(--color-btn-disabled-bg) !important;
    color: var(--color-btn-disabled-text) !important;
}

button:focus,
button:focus-visible,
.btn:focus,
.btn:focus-visible,
.btn-check:focus + .btn,
.btn-check:checked + .btn:focus,
.dropdown-toggle:focus,
.dropdown-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.dropdown-toggle::after {
    vertical-align: 1px;
}

/* Preserve a visible keyboard focus ring for the mobile navbar toggler. */
header .navbar-toggler:focus,
header .navbar-toggler:focus-visible {
    outline: 2px solid rgba(90, 39, 198, 0.55) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 0.2rem rgba(90, 39, 198, 0.22) !important;
}

.dark-mode header .navbar-toggler:focus,
.dark-mode header .navbar-toggler:focus-visible {
    outline-color: rgba(200, 180, 255, 0.72) !important;
    box-shadow: 0 0 0 0.22rem rgba(177, 140, 255, 0.28) !important;
}

/* Collapse & Navbar Guard Rails */
/*
 * Guard rails while migrating from legacy Bootstrap:
 * keep collapse/dropdown behavior stable even if other styles shift.
 */
#headerMenu .navbar-nav .dropdown-menu {
    display: none;
}

#headerMenu .navbar-nav .dropdown-menu.show,
#headerMenu .navbar-nav .show>.dropdown-menu {
    display: block;
    margin-right: 10px;
}

.main-header-menu .dropdown-menu.show {
    display: block;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
}

/* Tables & Form Controls */
.table {
    --bs-table-color: var(--color-text-main);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--color-soft-border);
    --bs-table-hover-color: var(--color-text-main);
    --bs-table-hover-bg: #eef2f4;
    color: var(--color-text-main);
    border-color: var(--color-soft-border);
}

.table thead tr th {
    padding: 8px 8px !important;
}

.table thead th {
    color: var(--color-table-head);
    font-size: 12px;
    font-weight: 600;
    border-top: 0 !important;
    border-bottom: 1px solid var(--color-soft-border) !important;
    background-color: color(srgb 0 0 0 / 0.01);
}

.table td,
.table th {
    border-top: 1px solid var(--color-soft-border);
}

.table>:not(caption)>*>* {
    color: var(--bs-table-color);
    background-color: var(--bs-table-bg);
    box-shadow: none;
}

.table tbody tr {
    color: var(--color-text-main);
}

.table tbody td,
.table tbody th,
.table tbody td a,
.table tbody td a:visited,
.table tbody td label,
.table tbody td small,
.table tbody td span,
.table tbody th a,
.table tbody th a:visited,
.table tbody th label,
.table tbody th small,
.table tbody th span {
    color: var(--color-text-main);
}

.table thead .table-head-soft td,
.table thead .table-head-soft td a {
    color: var(--color-table-head) !important;
    font-size: 12px;
    font-weight: 600;
}

.table thead th a,
.table thead th a:visited,
.table thead th a:hover,
.table thead th a:focus {
    color: var(--color-table-head) !important;
    text-decoration: none;
}

.table tbody tr:hover>td,
.table tbody tr:hover>th {
    color: var(--color-text-main);
    background: #eef2f4;
}

.trade-history-amm-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(23, 162, 184, 0.28);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    color: #0d6472;
    background-color: rgba(23, 162, 184, 0.12);
    vertical-align: middle;
    position: static;
    transform: none;
    box-shadow: none;
}

.dark-mode .trade-history-amm-badge {
    color: rgba(194, 245, 255, 0.96);
    background-color: rgba(23, 162, 184, 0.18);
    border-color: rgba(69, 203, 228, 0.28);
}

.trade-history-time-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    width: auto;
    text-align: center;
}

#tTransactions.trade-history-amm-mode .trade-history-time-wrap {
    justify-content: space-between;
    width: 100%;
    text-align: left;
}

.trade-history-time-short,
.trade-history-amm-badge-short {
    display: none;
}

@media (max-width: 991.98px) {
    #tTransactions.trade-history-amm-mode .trade-history-time-full {
        display: none;
    }

    #tTransactions.trade-history-amm-mode .trade-history-time-short {
        display: inline;
    }

    #tTransactions.trade-history-amm-mode .trade-history-amm-badge-full {
        display: none;
    }

    #tTransactions.trade-history-amm-mode .trade-history-amm-badge-short {
        display: inline;
    }
}

.trade-history-amm-toggle {
    margin-left: auto;
}

.trade-history-amm-toggle .form-check-label {
    min-height: 1rem;
}

.trade-history-amm-toggle-label {
    margin-left: 0.10rem !important;
    cursor: pointer;
    user-select: none;
}

.form-control {
    font-size: 0.9rem;
}

.form-select {
    font-size: 0.9rem;
}

.input-group-text,
.form-control {
    border-radius: 5px;
}

.table tbody+tbody {
    border: none;
}

/* Use one Bootstrap-like text system for every settings table/card heading. */
.settings .card-title,
.settings .table {
    color: var(--bs-secondary-color, var(--color-table-head));
}

.settings .table {
    --bs-table-color: var(--bs-secondary-color, var(--color-table-head));
    --bs-table-hover-color: var(--bs-secondary-color, var(--color-table-head));
}

.settings .table tbody tr,
.settings .table tbody td,
.settings .table tbody th,
.settings .table tbody td a,
.settings .table tbody td a:visited,
.settings .table tbody td label,
.settings .table tbody td small,
.settings .table tbody td span,
.settings .table tbody th a,
.settings .table tbody th a:visited,
.settings .table tbody th label,
.settings .table tbody th small,
.settings .table tbody th span {
    color: var(--bs-table-color);
}

/* Allocation - Market Valuation (scoped sizing) */
.allocation-market-valuation-body {
    padding: 0.95rem 0.95rem 0.85rem;
}

.allocation-market-valuation-canvas-wrap {
    width: 100%;
    margin: 0 auto;
    padding: 0.85rem;
    border-radius: 22px;
}

.allocation-market-valuation-canvas {
    max-height: 430px;
}

@media (max-width: 991.98px) {
    .allocation-market-valuation-canvas-wrap {
        width: 100%;
    }

    .allocation-market-valuation-canvas {
        max-height: 360px;
    }
}

.dark-mode .chart-col-padded,
.dark-mode .allocation-market-valuation-canvas-wrap {
    border-color: rgba(216, 224, 237, 0.14);
}

.allocation-asset-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    max-width: 100%;
}

.allocation-asset-media {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.allocation-asset-bubble {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(117, 138, 173, 0.18);
    box-shadow: 0 5px 10px rgba(15, 23, 42, 0.08);
}

.allocation-asset-label {
    display: inline-block;
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Poppins-SemiBold';
    letter-spacing: 0.01em;
}

.dark-mode .allocation-asset-bubble {
    background: rgba(27, 34, 49, 0.92);
    border-color: rgba(161, 176, 211, 0.28);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26);
}

/* Base spacing/typography for all table cells. Border tokens are layered below. */
.table td,
.table th {
    border-top: 1px solid var(--color-soft-border);
    color: var(--bs-table-color);
}

.table .table-head-soft th,
.table .table-head-soft td,
.table .table-head-soft th a,
.table .table-head-soft td a {
    color: var(--color-table-head) !important;
    font-weight: 600;
}

.form-control::-webkit-input-placeholder {
    color: var(--color-text-main-35);
}

.form-control::-moz-placeholder {
    color: var(--color-text-main-35);
}

.form-control:-ms-input-placeholder {
    color: var(--color-text-main-35);
}

.form-control:-moz-placeholder {
    color: var(--color-text-main-35);
}

.form-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 2rem 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23758596' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    appearance: none;
    box-shadow: none;
}

.form-select:focus {
    border-color: rgba(90, 39, 198, 0.45);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(90, 39, 198, 0.15);
}

.form-check.form-switch .form-check-label {
    font-size: 0.9rem;
    cursor: pointer;
}

/* Header & Navigation */
header nav a {
    color: var(--color-text-main);
}

header nav a:hover {
    color: var(--color-primary);
}

.main-header-menu .dropdown-item.active .dropdown-entry-subtitle,
.main-header-menu .dropdown-item:active .dropdown-entry-subtitle {
    color: #fff !important;
}

.main-header-menu .dropdown-item.active .dropdown-entry-icon,
.main-header-menu .dropdown-item:active .dropdown-entry-icon,
.main-header-menu .dropdown-item.active svg,
.main-header-menu .dropdown-item:active svg {
    filter: brightness(0) invert(1);
    color: #fff !important;
    fill: currentColor;
}

.main-header-menu .dropdown-item.active ion-icon.dropdown-entry-icon,
.main-header-menu .dropdown-item:active ion-icon.dropdown-entry-icon {
    filter: none;
    color: #fff !important;
}

.tx-memo-icon,
.tx-memo-icon:visited,
.tx-memo-icon:hover,
.tx-memo-icon:focus {
    color: var(--color-text-muted) !important;
}

/* Header Avatar Dropdown */
header .navbar-brand {
    padding: 0;
}

header .navbar-brand img {
    height: 45px;
}

.navbar {
    background-color: transparent;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}

.main-header-nav-toggle,
.main-header-account-toggle {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0.7rem 0.9rem !important;
    border-radius: 14px;
    line-height: 1.2;
    text-decoration: none;
    font-family: 'Poppins-SemiBold';
}

.main-header-nav-toggle.dropdown-toggle::after,
.main-header-account-toggle.dropdown-toggle::after {
    display: none;
}

.main-header-nav-toggle:hover,
.main-header-nav-toggle:focus,
.main-header-account-toggle:hover,
.main-header-account-toggle:focus {
    background-color: var(--color-soft-hover);
    text-decoration: none;
}

.main-header-nav-toggle.show {
    background-color: var(--color-soft-hover);
    color: var(--color-menu-hover-text);
}

.navbar-expand-lg .navbar-nav .nav-link:hover,
.navbar-expand-lg .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--color-primary);
}

.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show>.nav-link {
    color: var(--color-primary);
}

header nav .nav-item.active a {
    color: var(--color-primary);
}

header .nav-link.btn {
    padding: 5px 0;
}

.navbar-nav .nav-link img {
    margin-top: -3px;
}

.main-header-menu .dropdown-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.main-header-menu .dropdown-entry-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
}

.main-header-menu .dropdown-entry-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.main-header-menu .dropdown-entry-title {
    font-weight: 600;
}

.main-header-menu .dropdown-entry-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.main-header-menu .dropdown-entry.is-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.main-header-menu .dropdown-item:focus {
    background-color: var(--color-soft-hover);
    color: var(--color-menu-hover-text);
}

.main-header-simple-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.7rem 0.9rem !important;
    border-radius: 14px;
}

.main-header-simple-link .dropdown-entry-icon {
    width: 20px;
    min-width: 20px;
    height: 20px;
}

.main-header-simple-link .dropdown-entry-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.main-header-simple-link .dropdown-entry-title {
    color: var(--color-body);
    font-weight: 600;
    line-height: 1.2;
}

.main-header-simple-link .dropdown-entry-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.main-header-simple-link:hover,
.main-header-simple-link:focus {
    background-color: var(--color-soft-hover);
    color: var(--color-menu-hover-text);
}

.main-header-simple-link:hover .dropdown-entry-title,
.main-header-simple-link:focus .dropdown-entry-title {
    color: var(--color-menu-hover-text);
}

.main-header-guest-cta,
.dashboard-card-nav-btn {
    min-width: 120px;
    padding: 0.65rem 1rem !important;
    border-radius: 14px;
    font-weight: 600;
    text-align: center;
    background: transparent !important;
    color: var(--color-body) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.main-header-guest-cta:hover,
.main-header-guest-cta:focus,
.dashboard-card-nav-btn:hover,
.dashboard-card-nav-btn:focus,
.dashboard-card-nav-btn:active {
    background-color: var(--color-soft-hover) !important;
    color: var(--color-menu-hover-text) !important;
}

.dashboard-card-ticker {
    margin-left: 0.3rem;
    font-size: clamp(0.72rem, 1.1vw, 0.86rem);
    line-height: 1;
    white-space: nowrap;
    font-weight: 600;
    color: #47556f;
}

.header-img-icon .nav-link.dropdown-toggle {
    padding-right: 0;
}

.main-header-account-nav {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

@media (max-width: 991.98px) {
    .main-header-account-nav {
        align-items: flex-start;
        text-align: right;
    }
}

.main-header-account-toggle {
    text-align: right;
}

.main-header-account-toggle img {
    width: 22px;
}

.main-header-account-toggle .main-header-account-toggle-icon {
    width: 22px;
    height: 22px;
}

.main-header-account-menu {
    position: absolute;
    display: none;
    min-width: 248px;
    width: min(272px, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    background-color: #fff;
}

.main-header-account-menu.show {
    display: block;
}

.main-header-account-avatar {
    width: 40px;
    border-radius: 50%;
}

.main-header-account-avatar-icon {
    width: 40px;
    height: 40px;
    color: rgba(100, 116, 139, 0.85);
}

.main-header-wallet-id {
    font-weight: inherit !important;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-muted) !important;
}

.header-img-icon a:after {
    display: none;
}

.header-img-icon .dropdown-menu {
    padding: 0;
    margin-top: 8px;
}

.main-header-menu .dropdown-menu {
    position: absolute;
}

.main-header-menu .dropdown-menu p {
    color: var(--color-text-main);
    font-weight: 600;
}

.main-header-menu .dropdown-menu a.text-muted:hover {
    color: var(--color-primary) !important;
}

.header-img-icon .nav-link img {
    width: 30px;
}

.header-img-icon .account-menu-header {
    padding: 16px 16px 12px;
    font-size: 13px;
    border-bottom: 1px solid #f2f4f9;
    background: linear-gradient(rgba(245, 245, 245, 1), rgba(255, 255, 255, 1));
    gap: 8px;
}

.header-img-icon .account-menu-avatar-row {
    gap: 10px;
}

.header-img-icon .account-menu-header .figure,
.header-img-icon .account-menu-header .main-header-account-action-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 0 !important;
    border-radius: 50%;
    background: rgba(100, 116, 139, 0.08);
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.08);
}

.header-img-icon .account-menu-header .main-header-account-session-circle {
    border: 0;
    padding: 0;
    cursor: pointer;
}

.header-img-icon .account-menu-header .main-header-account-action-circle {
    border: 0;
    padding: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    font-weight: 700;
    line-height: 1;
    position: relative;
}

.header-img-icon .account-menu-header .main-header-account-action-icon {
    width: 22px;
    height: 22px;
    pointer-events: none;
}

.header-img-icon .account-menu-header .main-header-account-action-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
}

.header-img-icon .account-menu-header .main-header-account-action-code {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(51, 65, 85, 0.95);
    pointer-events: none;
}

.header-img-icon .account-menu-header .main-header-account-remove-slot-btn {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    user-select: none;
}

.header-img-icon .account-menu-header .main-header-account-session-circle .main-header-account-avatar,
.header-img-icon .account-menu-header .main-header-account-session-circle .main-header-account-avatar-icon {
    pointer-events: none;
}

.header-img-icon .account-menu-header .main-header-account-action-circle.is-active,
.header-img-icon .account-menu-header .main-header-account-session-circle.is-active {
    background: rgba(90, 39, 198, 0.12);
    box-shadow: inset 0 0 0 1px rgba(90, 39, 198, 0.32);
}

.main-header-wallet-mode {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(71, 85, 105, 0.92) !important;
}

.header-img-icon .account-menu-header .info {
    width: 100%;
}

.header-img-icon #profile-balance,
.header-img-icon #profile-my-wallet {
    display: block;
    width: 100%;
    opacity: 0;
    transform: translateY(4px);
    cursor: default;
}

.header-img-icon #profile-balance {
    min-height: 2.1rem;
    line-height: 2.1rem;
}

.header-img-icon #profile-my-wallet {
    min-height: 1.2rem;
    line-height: 1.2rem;
}

.header-img-icon #profile-balance.account-menu-field-ready,
.header-img-icon #profile-my-wallet.account-menu-field-ready {
    opacity: 1;
    transform: none;
    animation: account-menu-field-fade-in 220ms ease-out forwards;
}

.account-menu-placeholder {
    color: rgba(100, 116, 139, 0.8) !important;
    opacity: 1 !important;
    transform: none !important;
}

@keyframes account-menu-field-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-img-icon .account-menu-body {
    padding: 10px 0 10px;
    max-height: 290px;
    position: relative;
    overflow-y: auto;
}

.header-img-icon .account-menu-body .dropdown-item {
    display: flex;
    align-items: center;
    padding: 9px 16px;
}

.header-img-icon .account-menu-body .dropdown-item .content {
    margin-left: 15px;
    width: 200px;
    white-space: normal;
}

.header-img-icon .account-menu-body .dropdown-item .icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
}

.header-img-icon .account-menu-body .dropdown-item .content p {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
}

.header-img-icon .profile-nav .dropdown-item,
.header-img-icon .profile-nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.header-img-icon .night-mode-toggle-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header-img-icon .profile-nav .logout-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 10px;
    background: rgba(220, 53, 69, 0.08);
}

.header-img-icon .night-mode-toggle-icon {
    margin-left: 12px;
    flex-shrink: 0;
    width: 25px;
    height: 25px;
    color: inherit;
}

.server-status-icon {
    width: 16px;
    height: 16px;
    color: #ccc;
    vertical-align: middle;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.footer-x-logo {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1;
}

.header-img-icon .profile-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 10px 8px;
}

.header-img-icon .profile-nav hr {
    display: none;
}

.header-img-icon .night-mode-toggle-link .dropdown-entry-content {
    flex: 1;
    min-width: 0;
}

.header-img-icon .profile-nav .dropdown-item:hover,
.header-img-icon .profile-nav .dropdown-item:focus,
.header-img-icon .profile-nav .nav-item .nav-link:hover {
    color: var(--color-text-main);
    background-color: var(--color-menu-hover-bg);
}

.header-img-icon .profile-nav .dropdown-item.red,
.header-img-icon .profile-nav .nav-item .nav-link.red {
    color: #f74745;
}

.header-img-icon .profile-nav .logout-nav-btn:hover,
.header-img-icon .profile-nav .logout-nav-btn:focus {
    color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.14);
}

.header-img-icon .profile-nav .dropdown-item.red:hover,
.header-img-icon .profile-nav .dropdown-item.red:focus,
.header-img-icon .profile-nav .nav-item .nav-link.red:hover {
    color: #f74745 !important;
}

.header-img-icon .account-menu-header .name {
    font-size: 15px;
    line-height: 1.2;
}

.header-img-icon .profile-nav .dropdown-item i,
.header-img-icon .profile-nav .nav-item .nav-link i {
    margin-right: 15px;
}

.modal-backdrop {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(24, 33, 77, 0.18);
}

.modal-backdrop.show {
    opacity: 1;
}

/* =========================================================
   Group 5: Dark Mode Overrides
   ========================================================= */

.dark-mode #logo-header {
    content: url("/assets/img/logo-dark.png");
}

.dark-mode ::placeholder {
    color: rgba(196, 204, 224, 0.72);
}

.dark-mode {
    --color-btn-disabled-bg: var(--color-btn-disabled-bg-dark);
    --color-btn-disabled-text: var(--color-btn-disabled-text-dark);
    color: white;
}

.dark-mode .card a:hover {
    color: white;
}

.dark-mode body h4 {
    color: rgb(225, 225, 225);
    text-shadow: -1px 1px 2px rgb(0, 0, 0);
}

.dark-mode header {
    background-color: rgba(15, 15, 15, 0.8) !important;
    border-color: #1c1c1c;
    color: white;
}

.dark-mode footer {
    background-color: rgba(15, 15, 15, 0.5) !important;
}

.dark-mode .light-bb {
    border: 1px solid #1c1c1c;
}

.dark-mode .nav-link.disabled,
.dark-mode .nav-link:disabled {
    opacity: .5;
    color: white;
}

.dark-mode body {
    background-color: #1c1c1c;
    color: white;
}

.dark-mode .body-content {
    background-color: #202020;
}

.dark-mode #ChartData.trade-chart-data-locked {
    background-color: #181818;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-mode .trade-chart-lock-view-btn::before {
    background-color: rgba(255, 255, 255, 0.22);
}

.dark-mode .card {
    background: rgb(246, 246, 246);
    background: linear-gradient(40deg, rgba(14, 14, 14, 0.89) 50%, rgb(25, 25, 25));
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .page-link {
    color: white;
    background-color: transparent;
    border: 1px solid #343434;
}

.dark-mode .page-item.disabled .page-link {
    color: white;
    background-color: #333333;
    border: 1px solid #343434;
}

.dark-mode .btn-outline-dark {
    color: rgba(232, 238, 255, 0.9);
    border-color: rgba(134, 136, 143, 0.45);
}

.dark-mode .dropdown .btn {
    color: white;
}

.dark-mode .btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: transparent;
}

.dark-mode .btn-outline-primary:hover,
.dark-mode .btn-outline-primary:focus,
.dark-mode .btn-outline-primary:not(:disabled):not(.disabled).active,
.dark-mode .btn-outline-primary:not(:disabled):not(.disabled):active,
.dark-mode .show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.dark-mode .btn-outline-primary.disabled,
.dark-mode .btn-outline-primary:disabled {
    color: rgba(126, 96, 201, 0.72);
    border-color: rgba(126, 96, 201, 0.58);
}

.dark-mode .spinner-grow,
.dark-mode .spinner-border {
    filter: invert(1);
}

.dark-mode header nav a {
    color: rgba(255, 255, 255, 0.7);
}

.dark-mode .transparent_bg {
    background: rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .card-header h4 {
    color: white;
    text-shadow: -1px 1px 2px rgb(11, 11, 11);
}

.dark-mode .card-header {
    background-color: rgba(255, 255, 255, 0.03);
}

.dark-mode .border-bottom {
    border-bottom: 1px solid rgb(255, 255, 255, 0.1) !important;
}

.dark-mode .form-select {
    background-color: rgb(15, 15, 15) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #cfbfbf !important;
}

.dark-mode .input-group-text {
    background-color: rgba(0, 0, 0, 0) !important;
    border: none !important;
}

.dark-mode .nav-tabs .nav-link.active {
    background-color: rgba(17, 16, 17, 1) !important;
    border-color: rgba(98, 98, 98, 0.55) rgba(70, 70, 70, 0.55) transparent;
}

.dark-mode .nav-tabs .nav-item.show .nav-link {
    color: rgba(245, 248, 255, 0.96);
    background-color: rgba(90, 39, 198, 0.22) !important;
}

.dark-mode .nav-tabs {
    border-bottom: 1px solid #1c1c1c;
}

.dark-mode .settings .wallet .tab-content li:first-child {
    border-bottom: none;
}

.dark-mode .navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.5);
}

.dark-mode .navbar-light .navbar-nav .active>.nav-link,
.dark-mode .navbar-light .navbar-nav .nav-link.active,
.dark-mode .navbar-light .navbar-nav .nav-link.show,
.dark-mode .navbar-light .navbar-nav .show>.nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.dark-mode .nav-tabs .nav-link:focus {
    border-color: #505050 #505050 #505050;
}

.dark-mode .bg-light {
    background-color: rgba(255, 255, 255, 0) !important;
}

.dark-mode hr {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .settings .wallet .nav-pills h2 {
    color: white;
}

.dark-mode .settings .card {
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 14px -6px;
}

.dark-mode .profile-glass-card {
    background: linear-gradient(180deg, rgba(24, 27, 35, 0.9) 0%, rgba(15, 17, 24, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
}

.dark-mode .jumbo-profile img.rounded-circle {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.dark-mode .jumbo-profile .display-5 {
    color: rgba(245, 248, 255, 0.97);
    text-shadow: none;
}

.dark-mode .profile-issuer-name {
    color: rgba(184, 196, 222, 0.9);
}

.dark-mode .jumbo-profile p.my-4 {
    color: rgba(204, 212, 230, 0.9);
}

.dark-mode .jumbo-profile p.mb-4 a {
    color: rgba(150, 204, 255, 0.96) !important;
}

.dark-mode .jumbo-profile .badge.text-bg-dark {
    background-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(242, 245, 255, 0.96) !important;
}

.dark-mode .jumbo-profile .badge.text-bg-success {
    background-color: rgba(34, 169, 122, 0.22) !important;
    color: rgba(186, 248, 223, 0.96) !important;
}

.dark-mode .jumbo-profile .badge.bg-warning {
    background-color: rgba(216, 146, 28, 0.22) !important;
    color: rgba(255, 226, 152, 0.98) !important;
}

.dark-mode .jumbo-profile .btn-outline-dark {
    color: rgba(236, 241, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.03);
}

.dark-mode .jumbo-profile .btn-outline-dark:hover,
.dark-mode .jumbo-profile .btn-outline-dark:focus {
    color: #fff;
    border-color: rgba(126, 96, 201, 0.62);
    background-color: rgba(90, 39, 198, 0.18);
}

.dark-mode .profile-tokenomics-summary {
    border-color: rgba(164, 177, 206, 0.14);
    background: linear-gradient(150deg, rgba(14, 18, 24, 0.74), rgba(11, 15, 20, 0.62));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.dark-mode .profile-tokenomics-summary-header {
    border-bottom-color: rgba(145, 161, 192, 0.18);
}

.dark-mode .profile-tokenomics-summary-kicker {
    color: rgba(172, 192, 233, 0.82);
}

.dark-mode .profile-tokenomics-summary-title {
    color: rgba(233, 241, 255, 0.95);
}

.dark-mode .profile-tokenomics-summary-subtitle {
    color: rgba(188, 200, 225, 0.72);
}

.dark-mode .profile-tokenomics-summary-side {
    border-right-color: rgba(145, 161, 192, 0.16);
}

.dark-mode .profile-tokenomics-side-title {
    color: rgba(226, 236, 252, 0.94);
}

.dark-mode .profile-tokenomics-side-copy {
    color: rgba(187, 199, 222, 0.76);
}


.dark-mode .profile-tokenomics-wallet-subtitle {
    color: rgba(208, 218, 239, 0.9);
}

.dark-mode .profile-wallet-open-link {
    color: rgba(194, 206, 232, 0.9);
}

.dark-mode .profile-fact-icon {
    border: 0;
    background: transparent;
}

@media (max-width: 991.98px) {
    .profile-tokenomics-summary .card-body {
        padding: 1rem;
    }

    .profile-tokenomics-summary-body {
        grid-template-columns: 1fr;
        gap: 0.95rem;
    }

    .profile-tokenomics-summary-side {
        border-right: 0;
        border-bottom: 1px solid rgba(119, 137, 168, 0.16);
        padding-right: 0;
        padding-bottom: 0.82rem;
    }

    .dark-mode .profile-tokenomics-summary-side {
        border-bottom-color: rgba(145, 161, 192, 0.16);
    }

    .profile-tokenomics-wallet-list {
        max-height: none;
    }

    .profile-tokenomics-wallet-row {
        min-height: 0;
    }
}

.dark-mode .profile-fact-card {
    border-color: rgba(154, 176, 218, 0.2);
    background: linear-gradient(155deg, rgba(20, 29, 44, 0.9), rgba(18, 25, 37, 0.82));
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.26);
}

.dark-mode .profile-fact-label {
    color: rgba(180, 194, 222, 0.8);
}

.dark-mode .profile-fact-value {
    color: rgba(232, 240, 255, 0.95);
}

.dark-mode .settings .card-title {
    color: rgba(214, 221, 240, 0.9);
}

.dark-mode .form-control {
    color: #cfbfbf;
    background-color: rgb(15, 15, 15);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-mode #search-token {
    color: #cfbfbf;
    background-color: transparent;
    border: 0px solid rgba(255, 255, 255, 0);
}

.dark-mode .table td {
    background-color: rgba(255, 255, 255, 0);
    border-top: 1px solid var(--color-border-dark) !important;
}

.dark-mode .table {
    --bs-table-color: rgb(214, 214, 214);
    --bs-table-bg: #101010;
    --bs-table-border-color: var(--color-border-dark);
    --bs-table-hover-color: rgb(255, 255, 255);
    --bs-table-hover-bg: rgb(47, 47, 47);
    color: rgb(214, 214, 214);
    border-color: var(--color-border-dark);
    background-color: #101010;
}

.dark-mode .table tbody tr {
    color: rgb(214, 214, 214);
}

.dark-mode .table tbody td,
.dark-mode .table tbody th,
.dark-mode .table tbody td a,
.dark-mode .table tbody td a:visited,
.dark-mode .table tbody td label,
.dark-mode .table tbody td small,
.dark-mode .table tbody td span,
.dark-mode .table tbody th a,
.dark-mode .table tbody th a:visited,
.dark-mode .table tbody th label,
.dark-mode .table tbody th small,
.dark-mode .table tbody th span {
    color: rgb(99, 91, 91);
}

.dark-mode .table thead th {
    color: rgba(244, 248, 255, 0.84);
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0) !important;
}

.dark-mode .table thead th a,
.dark-mode .table thead th a:visited,
.dark-mode .table thead th a:hover,
.dark-mode .table thead th a:focus {
    color: rgba(244, 248, 255, 0.84) !important;
    text-decoration: none;
}

.dark-mode #tSellOffers .offer-row-buy.offer-row-active td,
.dark-mode #tSellOffers .offer-row-sell.offer-row-active td {
    background-color: rgba(85, 13, 10);
    box-shadow: inset 0 0 0 1px rgba(255, 35, 31, 0.18);
}

.dark-mode #tBuyOffers .offer-row-buy.offer-row-active td,
.dark-mode #tBuyOffers .offer-row-sell.offer-row-active td {
    background-color: rgb(16, 77, 69);
    box-shadow: inset 0 0 0 1px rgba(43, 201, 180, 0.18);
}

.dark-mode #tSellOffers .offer-row-empty td,
.dark-mode #tBuyOffers .offer-row-empty td {
    color: rgba(188, 199, 224, 0.74);
}

.dark-mode .table .table-head-soft th,
.dark-mode .table .table-head-soft td,
.dark-mode .table .table-head-soft th a,
.dark-mode .table .table-head-soft td a {
    color: rgba(228, 234, 246, 0.9) !important;
}

.dark-mode .settings .table {
    --bs-table-color: rgba(214, 221, 240, 0.9);
    --bs-table-hover-color: rgba(236, 242, 255, 0.95);
}

.dark-mode #tradeIntervalDropdownToggle {
    color: rgba(232, 238, 252, 0.88);
    background-color: transparent !important;
}

.dark-mode .trade-chart-external-tooltip-content {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(20, 20, 20, 0.96);
    box-shadow: rgba(0, 1, 2, 0.7) 0px 12px 28px -8px;
}

.dark-mode .trade-chart-resize-grip {
    background: rgba(236, 242, 255, 0.28);
}

.dark-mode .trade-chart-resize-handle:hover .trade-chart-resize-grip,
.dark-mode .trade-chart-resize-handle:focus .trade-chart-resize-grip,
.dark-mode .trade-chart-resize-handle:focus-visible .trade-chart-resize-grip {
    background: rgba(236, 242, 255, 0.45);
}

.dark-mode .trade-chart-resize-handle.is-active .trade-chart-resize-grip {
    background: rgba(236, 242, 255, 0.58);
}

.dark-mode .trade-chart-tooltip-title {
    color: #fff;
}

.dark-mode .trade-chart-tooltip-title-buy {
    color: #4fd08b;
}

.dark-mode .trade-chart-tooltip-title-sell {
    color: #ff7d8e;
}

.dark-mode .trade-chart-tooltip-copy {
    color: rgba(236, 242, 255, 0.92);
}

.dark-mode .trade-chart-tooltip-footer {
    color: rgba(190, 199, 220, 0.72);
}

.dark-mode .header-img-icon .account-menu-header {
    border-bottom: 1px solid rgb(255, 255, 255, 0.2) !important;
    color: rgba(236, 241, 255, 0.9);
    background: linear-gradient(180deg, rgba(29, 31, 36, 0.98) 0%, rgba(20, 20, 20, 1) 100%);
}

.dark-mode .main-header-account-menu {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: rgba(20, 20, 20, 1);
    box-shadow: rgba(0, 1, 2, 1) 0px 10px 24px -10px;
}

.dark-mode .header-img-icon .account-menu-header .figure,
.dark-mode .header-img-icon .account-menu-header .main-header-account-action-circle {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dark-mode .header-img-icon .account-menu-header .main-header-account-action-code {
    color: rgba(235, 240, 255, 0.92);
}

.dark-mode .header-img-icon .account-menu-header .main-header-account-remove-slot-btn {
    background: #ff5b6b;
    color: #fff;
}

.dark-mode .header-img-icon .account-menu-header .main-header-account-action-circle.is-active,
.dark-mode .header-img-icon .account-menu-header .main-header-account-session-circle.is-active {
    background: rgba(126, 96, 201, 0.24);
    box-shadow: inset 0 0 0 1px rgba(180, 151, 255, 0.38);
}

.dark-mode .main-header-wallet-mode {
    color: rgba(214, 221, 240, 0.86) !important;
}

.dark-mode .main-header-wallet-id {
    color: rgba(214, 221, 240, 0.72) !important;
}

.dark-mode .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .invertible {
    filter: invert(1);
}

.dark-mode ion-icon.invertible {
    filter: none;
    color: rgba(230, 235, 255, 0.85) !important;
}

.dark-mode .main-header-menu .dropdown-menu p {
    color: #d3d3d3;
}

.dark-mode .trade-pair-btn-group>.dropdown-menu,
.dark-mode #tradeIntervalDropdownMenu.dropdown-menu,
.dark-mode .markets-category-menu.dropdown-menu,
.dark-mode .main-header-menu .dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(20, 20, 20, 1);
    box-shadow: rgba(0, 1, 2, 1) 0px 2px 14px -6px;
    color: rgba(255, 255, 255, 0.8);
}

.dark-mode .trade-pair-btn-group .dropdown-item,
.dark-mode #tradeIntervalDropdownMenu .dropdown-item,
.dark-mode .markets-category-menu .dropdown-item,
.dark-mode .main-header-menu .dropdown-item {
    color: rgba(255, 255, 255, 0.8);
}

.dark-mode .trade-interval-nav .trade-interval-btn {
    color: rgba(211, 219, 239, 0.84);
}

.dark-mode .trade-interval-nav .trade-interval-btn:hover,
.dark-mode .trade-interval-nav .trade-interval-btn:focus {
    color: #fff;
}

.dark-mode .trade-interval-nav .trade-interval-btn.active,
.dark-mode .trade-interval-nav .trade-interval-btn:active {
    color: #fff;
    font-weight: 700;
}

.dark-mode #tradeIntervalDropdownToggle.disabled,
.dark-mode #tradeIntervalDropdownToggle:disabled {
    opacity: 0.45;
    color: rgba(164, 173, 194, 0.5) !important;
    cursor: not-allowed;
}

.dark-mode .featured-token-link,
.dark-mode .featured-token-link:visited {
    color: rgba(244, 248, 255, 0.96) !important;
}

.dark-mode .featured-token-link:hover,
.dark-mode .featured-token-link:focus {
    color: rgba(255, 255, 255, 1) !important;
}

.dark-mode .main-header-menu .dropdown-entry-subtitle {
    color: rgba(186, 196, 220, 0.88);
}

.dark-mode .trade-pair-btn-group .dropdown-item:hover,
.dark-mode #tradeIntervalDropdownMenu .dropdown-item:hover,
.dark-mode .markets-category-menu .dropdown-item:hover,
.dark-mode .main-header-menu .dropdown-item:hover,
.dark-mode .markets-category-menu .dropdown-item:focus {
    background: var(--color-menu-hover-bg-dark);
    color: var(--color-menu-hover-text-dark);
}

.dark-mode .markets-category-menu .markets-category-item.active,
.dark-mode .markets-category-menu .markets-category-item:active {
    color: #fff;
    background-color: var(--color-primary);
}

.dark-mode .trade-pair-btn-group .dropdown-item:focus,
.dark-mode #tradeIntervalDropdownMenu .dropdown-item:focus,
.dark-mode .main-header-menu .dropdown-item:focus {
    background: var(--color-menu-hover-bg-dark);
    color: var(--color-menu-hover-text-dark);
}

.dark-mode .main-header-menu .dropdown-item:hover .dropdown-entry-title,
.dark-mode .main-header-menu .dropdown-item:hover .dropdown-entry-subtitle,
.dark-mode .main-header-menu .dropdown-item:focus .dropdown-entry-title,
.dark-mode .main-header-menu .dropdown-item:focus .dropdown-entry-subtitle {
    color: inherit;
}

.dark-mode .main-header-menu .dropdown-item:hover .dropdown-entry-title,
.dark-mode .main-header-menu .dropdown-item:focus .dropdown-entry-title {
    color: rgba(250, 252, 255, 0.98);
}

.dark-mode .main-header-menu .dropdown-item:hover .dropdown-entry-subtitle,
.dark-mode .main-header-menu .dropdown-item:focus .dropdown-entry-subtitle {
    color: rgba(206, 215, 236, 0.92);
}

.dark-mode .main-header-menu .dropdown-item:hover img,
.dark-mode .main-header-menu .dropdown-item:focus img {
    filter: invert(1) !important;
}

.dark-mode .main-header-simple-link:hover,
.dark-mode .main-header-simple-link:focus {
    background-color: rgba(111, 52, 234, 0.16);
}

.dark-mode .main-header-account-toggle:hover,
.dark-mode .main-header-account-toggle:focus,
.dark-mode .main-header-account-toggle[aria-expanded="true"] {
    background-color: var(--color-primary) !important;
    color: rgba(250, 252, 255, 0.98) !important;
}

.dark-mode .main-header-account-toggle:hover img,
.dark-mode .main-header-account-toggle:focus img,
.dark-mode .main-header-account-toggle[aria-expanded="true"] img {
    filter: invert(1) !important;
}

.dark-mode .main-header-account-toggle:hover .main-header-account-toggle-icon,
.dark-mode .main-header-account-toggle:focus .main-header-account-toggle-icon,
.dark-mode .main-header-account-toggle[aria-expanded="true"] .main-header-account-toggle-icon {
    color: #fff !important;
}

.dark-mode .main-header-simple-link .dropdown-entry-title {
    color: #f4f7ff;
}

.dark-mode .main-header-simple-link .dropdown-entry-subtitle {
    color: rgba(216, 224, 237, 0.7);
}

.dark-mode .main-header-simple-link:hover .dropdown-entry-title,
.dark-mode .main-header-simple-link:focus .dropdown-entry-title {
    color: rgba(250, 252, 255, 0.98);
}

.dark-mode .main-header-simple-link:hover .dropdown-entry-subtitle,
.dark-mode .main-header-simple-link:focus .dropdown-entry-subtitle {
    color: rgba(206, 215, 236, 0.92);
}

.dark-mode .main-header-simple-link:hover img,
.dark-mode .main-header-simple-link:focus img {
    filter: invert(1) !important;
}

.dark-mode .main-header-simple-link:hover ion-icon.dropdown-entry-icon,
.dark-mode .main-header-simple-link:focus ion-icon.dropdown-entry-icon {
    color: #fff !important;
}

.dark-mode .main-header-guest-cta,
.dark-mode .dashboard-card-nav-btn {
    color: #f4f7ff !important;
}

.dark-mode .dashboard-card-ticker {
    color: #dce6ff;
}

.dark-mode .dashboard-token-card::after {
    background: radial-gradient(circle at center, rgba(129, 167, 255, 0.05), rgba(129, 167, 255, 0));
}

.dark-mode .dashboard-card-balance-heading,
.dark-mode .dashboard-card-balance-value {
    color: #f3f7ff;
}

.dark-mode .dashboard-card-subvalue-copy {
    color: #d9e6ff !important;
    border-color: rgba(127, 157, 226, 0.48);
    background: rgba(73, 109, 186, 0.28);
}

.dark-mode .dashboard-card-actions .btn.btn-primary {
    border-color: rgb(177, 159, 218, 0.25);
}

.dark-mode .dashboard-card-actions .btn.btn-danger {
    color: rgba(223, 232, 249, 0.96);
    background: rgba(56, 70, 101, 0.9);
    border-color: rgba(115, 139, 192, 0.5);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.36);
}

.dark-mode .dashboard-card-actions .btn.btn-danger:hover,
.dark-mode .dashboard-card-actions .btn.btn-danger:focus {
    background: rgba(66, 82, 116, 0.94);
    border-color: rgba(138, 163, 221, 0.56);
}

.dark-mode .dashboard-lp-card-title {
    color: rgba(236, 242, 255, 0.95);
}

.dark-mode .dashboard-lp-card-subtitle,
.dark-mode .dashboard-sidebar-link-balance-lp {
    color: rgba(180, 190, 220, 0.82);
}

.dark-mode .main-header-guest-cta:hover,
.dark-mode .main-header-guest-cta:focus,
.dark-mode .dashboard-card-nav-btn:hover,
.dark-mode .dashboard-card-nav-btn:focus,
.dark-mode .dashboard-card-nav-btn:active {
    background-color: rgba(111, 52, 234, 0.16) !important;
    color: rgba(250, 252, 255, 0.98) !important;
}

.dark-mode .xumm-top-img {
    content: url("/assets/img/xaman-title-dark.png") !important;
}

.dark-mode #qr-container img,
.dark-mode .modal img {
    box-shadow: none !important;
    border: none !important;
}

.dark-mode .text-uppercase {
    color: white;
}

.dark-mode footer .footer-title {
    color: rgba(245, 248, 255, 0.92) !important;
}

.dark-mode .text-muted,
.dark-mode .footer-link,
.dark-mode .footer-link:visited,
.dark-mode .footer-link:hover,
.dark-mode .footer-link:focus {
    color: rgba(196, 204, 224, 0.82) !important;
}

.dark-mode .text-body-secondary {
    color: rgba(196, 204, 224, 0.82) !important;
}

.dark-mode .legal-card {
    border-color: rgba(164, 177, 206, 0.14);
    background: rgba(29, 31, 38, 0.92);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.dark-mode .legal-kicker,
.dark-mode .legal-card p {
    color: rgba(196, 204, 224, 0.86);
}

.dark-mode .legal-card h1,
.dark-mode .legal-card h2 {
    color: rgba(245, 248, 255, 0.96);
}

.dark-mode footer section img:not(.footer-brand-logo),
.dark-mode header .nav-link img {
    filter: invert(1);
}

.dark-mode footer .footer-social-icon {
    color: rgba(236, 242, 255, 0.95);
}

.dark-mode .memo-content {
    color: wheat;
}

.dark-mode .widget-logo {
    filter: invert(1) brightness(1.15) contrast(1.05) !important;
}

.dark-mode footer .footer-brand-logo {
    filter: invert(1) brightness(1.15) contrast(1.05) !important;
}

.dark-mode #send_all_btn ion-icon,
.dark-mode #btnQrscan ion-icon {
    color: #f5f7ff !important;
}

.dark-mode #send_all_btn,
.dark-mode #btnQrscan {
    color: #f5f7ff !important;
}

.dark-mode .payment-hero-icon,
.dark-mode .swap-hero-icon,
.dark-mode .swap-placeholder-icon,
.dark-mode .swap-state-icon {
    color: rgba(230, 235, 255, 0.85) !important;
}

.dark-mode .input-group-text svg,
.dark-mode .input-group-text ion-icon {
    color: rgba(230, 235, 255, 0.85) !important;
    fill: rgba(230, 235, 255, 0.85) !important;
}

.dark-mode .reward-token-link,
.dark-mode .reward-token-link:visited {
    color: rgba(236, 241, 255, 0.92) !important;
}

.dark-mode .reward-token-link:hover,
.dark-mode .reward-token-link:focus {
    color: #fff !important;
}

.dark-mode .dashboard-open-order-row {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(32, 36, 48, 0.85);
}

.dark-mode .dashboard-open-order-placeholder {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(23, 28, 40, 0.88);
}

.dark-mode .dashboard-open-order-placeholder-inner {
    background: rgba(20, 25, 36, 0.7);
}

.dark-mode .dashboard-open-order-pair {
    color: rgba(214, 225, 247, 0.92);
}

.dark-mode .dashboard-open-order-value {
    color: rgba(236, 243, 255, 0.96);
}

.dark-mode .dashboard-open-order-counter,
.dark-mode .dashboard-open-orders-empty {
    color: rgba(181, 192, 218, 0.88);
}

.dark-mode .dashboard-latest-transaction-type-top {
    color: rgba(214, 225, 247, 0.94);
}

.dark-mode .dashboard-latest-transaction-value-badge {
    color: rgba(205, 215, 236, 0.92);
    background: rgba(86, 98, 124, 0.45);
}

.dark-mode .dashboard-latest-transaction-sequence {
    color: rgba(181, 192, 218, 0.9);
}

.dark-mode .dashboard-latest-transaction-status-valid {
    color: rgba(166, 251, 195, 0.95);
    background: rgba(16, 97, 52, 0.34);
}

.launchpad-listing-card {
    border-radius: 1.15rem;
}

.launchpad-listing-card-body {
    padding: clamp(1rem, 2vw, 1.4rem);
}

.launchpad-listing-section-label {
    font-weight: 700;
    color: #1d2a47;
}

.launchpad-token-list {
    min-height: 18rem;
    max-height: min(58vh, 32rem);
    overflow-y: auto;
    border-radius: 0;
    border: 1px solid rgba(34, 45, 72, 0.12);
    background: rgba(248, 250, 254, 0.9);
}

.launchpad-token-list .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0 !important;
    padding: 0.62rem 0.78rem;
}

.launchpad-token-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    background: transparent;
}

.launchpad-token-row-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.launchpad-token-row-ticker {
    font-weight: 700;
    color: #1d2a47;
    line-height: 1.22;
    letter-spacing: 0.01em;
}

.launchpad-token-row-currency {
    font-size: 0.8rem;
    color: #637089;
    line-height: 1.2;
    word-break: break-all;
}

.launchpad-token-row-issuer {
    font-size: 0.78rem;
    color: #5f6980;
    line-height: 1.2;
}

.launchpad-token-row-issuer-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.launchpad-token-row-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background: #2f80ff;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
}

.launchpad-token-row.is-active {
    background: rgba(56, 97, 255, 0.1);
    border-color: rgba(56, 97, 255, 0.35);
}

.launchpad-listing-form .form-control,
.launchpad-listing-form .form-select {
    border-radius: 0.72rem;
    min-height: 2.45rem;
}

.launchpad-listing-form .form-control::placeholder {
    font-size: 0.9rem;
}

.launchpad-listing-form .form-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #48526a;
    margin-bottom: 0.36rem;
}

.launchpad-listing-form .launchpad-label-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.launchpad-listing-form .launchpad-url-link {
    color: #2f80ff;
    line-height: 1;
}

.launchpad-listing-form .launchpad-url-link ion-icon {
    font-size: 0.95rem;
    vertical-align: middle;
}

.launchpad-listing-form .launchpad-x-logo {
    font-size: 0.92em;
    font-weight: 700;
    line-height: 1;
}

.launchpad-listing-form textarea.form-control {
    min-height: 5.6rem;
    line-height: 1.35;
}

.launchpad-form-row {
    margin-top: 0.58rem;
}

.launchpad-tokenomics-wallets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.launchpad-tokenomics-wallet-row {
    display: grid;
    grid-template-columns: 0.9fr 1.6fr auto;
    gap: 0.5rem;
    align-items: center;
}

.launchpad-tokenomics-wallet-row .btn {
    min-width: 5.4rem;
}

.launchpad-tokenomics-segment {
    border-bottom: 1px solid rgba(34, 45, 72, 0.12);
    padding-top: 0.72rem;
    padding-bottom: 0.72rem;
}

.launchpad-issuer-information-segment {
    border: 1px solid rgba(34, 45, 72, 0.12);
    border-radius: 0.72rem;
    background: rgba(248, 250, 254, 0.9);
    padding: 0.62rem 0.7rem;
}

.launchpad-issuer-information-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    border: 0;
    background: transparent;
    color: #2c3751;
    font-size: 0.92rem;
    font-weight: 700;
    padding: 0;
    text-align: left;
}

.launchpad-issuer-information-toggle ion-icon {
    font-size: 1rem;
    color: #516083;
    transition: transform 0.2s ease;
}

.launchpad-issuer-information-segment:not(.is-collapsed) .launchpad-issuer-information-toggle ion-icon {
    transform: rotate(180deg);
}

.launchpad-issuer-information-body {
    margin-top: 0.52rem;
}

.launchpad-issuer-information-grid {
    display: grid;
    gap: 0.42rem;
}

.launchpad-issuer-information-row {
    display: grid;
    grid-template-columns: minmax(8.25rem, 0.95fr) minmax(0, 1.65fr);
    gap: 0.55rem;
    align-items: center;
    min-height: calc(2em + 0.75rem + 2px);
    border: 1px solid rgba(34, 45, 72, 0.08);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.74);
    padding: 0.4rem 0.5rem;
}

.launchpad-issuer-information-key {
    font-size: 0.74rem;
    font-weight: 800;
    color: #4c5873;
    line-height: 1.24;
    letter-spacing: 0.01em;
}

.launchpad-issuer-information-value {
    font-size: 0.82rem;
    color: #6c757d;
    line-height: 1.24;
    word-break: break-word;
}

.launchpad-color-picker {
    width: 2.05rem;
    min-width: 2.05rem;
    height: 2.05rem;
    min-height: 2.05rem;
    border-radius: 50%;
    padding: 0.12rem;
    overflow: hidden;
}

.launchpad-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.launchpad-color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.launchpad-color-picker::-moz-color-swatch {
    border: none;
    border-radius: 50%;
}

.launchpad-listing-form .launchpad-color-field {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0;
    height: 2.45rem;
    min-height: 2.45rem;
    padding: 0 0.55rem 0 0.2rem;
}

.launchpad-listing-form .launchpad-color-field .launchpad-color-picker {
    display: block;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    margin: 0;
    box-shadow: none;
}

.launchpad-color-hex {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #2f3a52;
    white-space: nowrap;
    margin-left: 0.42rem;
}

.launchpad-listing-form .launchpad-ledger-locked {
    background: rgba(90, 105, 135, 0.08);
    border-color: rgba(90, 105, 135, 0.22);
    color: #2f3a52;
    cursor: not-allowed;
}

.launchpad-listing-stats {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.launchpad-listing-token-avatar-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.launchpad-listing-token-avatar {
    width: 3.15rem;
    height: 3.15rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(79, 96, 132, 0.2);
    background: rgba(240, 244, 252, 0.9);
}

.launchpad-listing-stat-card {
    border: 1px solid rgba(34, 45, 72, 0.12);
    border-radius: 0.72rem;
    background: rgba(248, 250, 254, 0.9);
    padding: 0.55rem 0.7rem;
    min-height: 4rem;
}

.launchpad-listing-stat-label {
    font-size: 0.74rem;
    color: #5f6980;
    line-height: 1.2;
}

.launchpad-listing-stat-value {
    margin-top: 0.18rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1d2a47;
    line-height: 1.2;
}

@media (max-width: 991.98px) {
    .launchpad-listing-stats {
        grid-template-columns: 1fr;
    }

    .launchpad-tokenomics-wallet-row {
        grid-template-columns: 1fr;
    }

    .launchpad-tokenomics-wallet-row .btn {
        width: 100%;
    }

    .launchpad-issuer-information-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}

.launchpad-listing-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.launchpad-listing-actions .btn {
    min-width: 8.8rem;
}

.launchpad-listing-card-body {
    position: relative;
}

#launchpadListingAlertSlot {
    pointer-events: none;
}

@media (max-width: 767.98px) {
    #launchpadListingAlertSlot {
        pointer-events: none;
    }
}

#launchpadListingAlertSlot .alert {
    pointer-events: auto;
    margin-bottom: 0;
}

#launchpadListingAlertSlot .launchpad-listing-alert {
    background: #fff4cc;
    border: 1px solid #ffd97a;
    color: #5a4300;
}

.launchpad-listing-action-hint {
    font-size: 0.82rem;
}

.launchpad-listing-help-copy {
    color: #5f6980;
}

.launchpad-listing-disclaimer a,
.launchpad-listing-disclaimer a:visited {
    color: #2e63f5;
    text-decoration: underline;
}

.launchpad-listing-disclaimer a:hover,
.launchpad-listing-disclaimer a:focus {
    color: #1f4cc9;
}

.dark-mode .launchpad-listing-section-label {
    color: rgba(221, 229, 247, 0.94);
}

.dark-mode .launchpad-token-list {
    border-color: rgba(137, 151, 182, 0.25);
    background: rgba(29, 35, 50, 0.78);
}

.dark-mode .launchpad-token-list .list-group-item.text-muted {
    color: rgba(196, 208, 234, 0.9) !important;
}

.dark-mode .launchpad-token-row-ticker {
    color: rgba(226, 234, 252, 0.95);
}

.dark-mode .launchpad-token-row-currency,
.dark-mode .launchpad-token-row-issuer {
    color: rgba(175, 189, 220, 0.9);
}

.dark-mode .launchpad-token-row.is-active {
    background: rgba(88, 123, 255, 0.2);
    border-color: rgba(132, 158, 255, 0.42);
}

.dark-mode .launchpad-listing-form .launchpad-ledger-locked {
    background: rgba(118, 135, 171, 0.18);
    border-color: rgba(150, 167, 198, 0.35);
    color: rgba(220, 230, 248, 0.95);
}

.dark-mode .launchpad-listing-form .form-label {
    color: rgba(191, 203, 232, 0.94);
}

.dark-mode .launchpad-color-hex {
    color: rgba(220, 230, 248, 0.95);
}

.dark-mode .launchpad-tokenomics-wallet-row .form-control {
    background: rgba(24, 30, 43, 0.88);
    border-color: rgba(136, 150, 179, 0.28);
    color: rgba(226, 234, 252, 0.95);
}

.dark-mode .launchpad-tokenomics-segment {
    border-bottom-color: rgba(137, 151, 182, 0.25);
}

.dark-mode .launchpad-issuer-information-segment {
    border-color: rgba(137, 151, 182, 0.25);
    background: rgba(29, 35, 50, 0.78);
}

.dark-mode .launchpad-issuer-information-toggle {
    color: rgba(219, 228, 247, 0.95);
}

.dark-mode .launchpad-issuer-information-toggle ion-icon {
    color: rgba(176, 190, 221, 0.95);
}

.dark-mode .launchpad-issuer-information-row {
    border-color: rgba(137, 151, 182, 0.22);
    background: rgba(24, 30, 43, 0.86);
}

.dark-mode .launchpad-issuer-information-key {
    color: rgba(191, 203, 232, 0.93);
}

.dark-mode .launchpad-issuer-information-value {
    color: rgba(176, 190, 221, 0.88);
}

.dark-mode .launchpad-listing-stat-card {
    border-color: rgba(137, 151, 182, 0.25);
    background: rgba(29, 35, 50, 0.78);
}

.dark-mode .launchpad-listing-token-avatar {
    border-color: rgba(154, 171, 205, 0.42);
    background: rgba(25, 31, 45, 0.9);
}

.dark-mode .launchpad-listing-stat-label {
    color: rgba(175, 189, 220, 0.9);
}

.dark-mode .launchpad-listing-stat-value {
    color: rgba(226, 234, 252, 0.95);
}

.dark-mode .launchpad-listing-help-copy {
    color: rgba(196, 208, 234, 0.9);
}

.dark-mode .launchpad-listing-disclaimer a,
.dark-mode .launchpad-listing-disclaimer a:visited {
    color: rgba(149, 184, 255, 0.98);
    text-decoration-color: rgba(149, 184, 255, 0.82);
}

.dark-mode .launchpad-listing-disclaimer a:hover,
.dark-mode .launchpad-listing-disclaimer a:focus {
    color: rgba(186, 210, 255, 0.98);
    text-decoration-color: rgba(186, 210, 255, 0.9);
}

.dark-mode .dashboard-latest-transaction-status-failed {
    color: rgba(255, 203, 213, 0.95);
    background: rgba(134, 24, 45, 0.34);
}

.dark-mode .dashboard-latest-transaction-status-warning {
    color: rgba(255, 232, 164, 0.98);
    background: rgba(143, 108, 10, 0.4);
}

.dark-mode .dashboard-latest-transaction-status-pending {
    color: rgba(205, 215, 236, 0.92);
    background: rgba(86, 98, 124, 0.45);
}

.dark-mode .dashboard-upcoming-giveaway-cta {
    color: rgba(194, 206, 232, 0.9);
}

.dark-mode .dashboard-latest-transactions-view-all {
    color: rgba(205, 215, 236, 0.92);
}

.dark-mode .dashboard-latest-transactions-view-all:hover,
.dark-mode .dashboard-latest-transactions-view-all:focus {
    color: rgba(236, 244, 255, 0.98);
}

.dark-mode .dashboard-upcoming-giveaways-card .dashboard-upcoming-giveaway-row:hover {
    background: rgba(50, 58, 78, 0.86);
    border-color: rgba(157, 172, 204, 0.28);
}

.dark-mode .dashboard-open-orders-pagination-meta {
    color: rgba(177, 189, 216, 0.9);
}

.dark-mode .dashboard-open-orders-page-indicator {
    color: rgba(220, 230, 249, 0.95);
}

.dark-mode .dashboard-open-orders-pagination-btn {
    border-color: rgba(120, 136, 169, 0.45);
    color: rgba(210, 223, 246, 0.95);
}

.dark-mode .dashboard-open-orders-pagination-btn:hover,
.dark-mode .dashboard-open-orders-pagination-btn:focus {
    border-color: rgba(145, 161, 195, 0.65);
    background: rgba(62, 72, 100, 0.34);
    color: rgba(236, 244, 255, 0.98);
}

.dark-mode .dashboard-open-order-side-buy {
    color: rgba(166, 251, 195, 0.95);
    background: rgba(16, 97, 52, 0.34);
}

.dark-mode .dashboard-open-order-side-sell {
    color: rgba(255, 203, 213, 0.95);
    background: rgba(134, 24, 45, 0.34);
}

.dark-mode .dashboard-upcoming-giveaway-status-open {
    color: rgba(166, 251, 195, 0.95);
    background: rgba(16, 97, 52, 0.34);
}

.dark-mode .dashboard-upcoming-giveaway-status-subscribed {
    color: rgba(229, 209, 255, 0.96);
    background: rgba(92, 58, 148, 0.44);
}

.dark-mode .dashboard-upcoming-giveaway-status-pending {
    color: rgba(205, 215, 236, 0.92);
    background: rgba(86, 98, 124, 0.45);
}

.dark-mode .dashboard-upcoming-giveaway-status-muted {
    color: rgba(193, 203, 226, 0.9);
    background: rgba(73, 86, 112, 0.38);
}

.dark-mode .dashboard-open-order-cancel-btn {
    border-color: rgba(255, 92, 92, 0.45);
    color: rgba(255, 186, 186, 0.95);
}

.dark-mode .dashboard-open-order-cancel-btn:hover,
.dark-mode .dashboard-open-order-cancel-btn:focus {
    border-color: rgba(255, 110, 110, 0.62);
    background: rgba(126, 30, 30, 0.36);
    color: rgba(255, 226, 226, 0.98);
}

.dark-mode .modal-backdrop {
    background-color: rgba(255, 255, 255, 0);
}

.dark-mode .modal-content {
    background: linear-gradient(40deg, rgba(14, 14, 14, 0.89) 50%, rgb(25, 25, 25));
    border: 1px solid rgba(230, 230, 230, 0.2);
    color: rgba(240, 244, 255, 0.94);
}

.dark-mode .modal-title {
    color: rgba(245, 248, 255, 0.95);
}

.dark-mode .modal .btn-close,
.dark-mode .alert .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    opacity: 0.88;
}

.dark-mode .modal .btn-close:hover,
.dark-mode .modal .btn-close:focus,
.dark-mode .alert .btn-close:hover,
.dark-mode .alert .btn-close:focus {
    opacity: 1;
}

.dark-mode .btn.text-muted {
    color: rgba(196, 204, 224, 0.86) !important;
}

.dark-mode .btn.text-muted:hover,
.dark-mode .btn.text-muted:focus {
    color: rgba(226, 232, 248, 0.96) !important;
}

.dark-mode .shadow-lg {
    box-shadow: 0 .125rem .25rem rgba(255, 255, 255, 0.25) !important;
}

.dark-mode .dashboard-sidebar-card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

.dark-mode .settings .card.dashboard-sidebar-card {
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
}

.dark-mode .dashboard-sidebar-card-header {
    border-bottom-color: transparent;
    background: transparent;
}

.dark-mode .dashboard-sidebar-list .dashboard-sidebar-link {
    background: linear-gradient(180deg, rgba(38, 45, 62, 0.72) 0%, rgba(29, 35, 49, 0.72) 100%);
    border-color: rgba(146, 164, 204, 0.24);
    color: rgba(238, 242, 255, 0.95);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.26);
}

.dark-mode .dashboard-sidebar-link-title {
    color: rgba(238, 242, 255, 0.96);
}

.dark-mode .dashboard-sidebar-link-balance {
    color: rgba(203, 212, 233, 0.72);
}

.dark-mode .dashboard-lp-asset-shell {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.dark-mode .dashboard-sidebar-link-icon {
    background: rgba(27, 34, 49, 0.92);
    border-color: rgba(161, 176, 211, 0.28);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26);
}

.dark-mode .dashboard-sidebar-list .dashboard-sidebar-link:hover,
.dark-mode .dashboard-sidebar-list .dashboard-sidebar-link:focus {
    background: linear-gradient(180deg, rgba(50, 60, 82, 0.84) 0%, rgba(40, 49, 68, 0.84) 100%);
    border-color: rgba(168, 184, 220, 0.42);
    color: #fff;
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.3);
}

.dark-mode .dashboard-sidebar-list .dashboard-sidebar-link.active,
.dark-mode .dashboard-sidebar-list .dashboard-sidebar-link.active:hover,
.dark-mode .dashboard-sidebar-list .dashboard-sidebar-link.active:focus {
    background: var(--bs-primary);
    color: #fff;
    box-shadow: 0 10px 16px rgba(12, 30, 76, 0.45);
}

.dark-mode .dashboard-sidebar-list .dashboard-sidebar-link.active .dashboard-sidebar-link-icon {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(230, 240, 255, 0.58);
    box-shadow: none;
}

.dark-mode #trustlinesList {
    scrollbar-color: rgba(149, 170, 207, 0.52) transparent;
}

.dark-mode #trustlinesList::-webkit-scrollbar-thumb {
    background: rgba(149, 170, 207, 0.52);
}

.dark-mode #preload_container {
    background-color: #101010 !important;
}

.dark-mode #offers_list>img {
    filter: invert(1) opacity(0.1) !important;
}

.dark-mode #offers_list .list-group-item,
.dark-mode #offers_list .list-group-item-action {
    color: rgba(238, 242, 255, 0.92) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark-mode #offers_list .list-group-item a {
    color: inherit !important;
}

.dark-mode #offers_list .list-group-item-action:hover,
.dark-mode #offers_list .list-group-item-action:focus {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode #offers_list .list-group-item.active,
.dark-mode #offers_list .list-group-item-action.active {
    color: #fff !important;
    background-color: rgba(90, 39, 198, 0.36) !important;
    border-color: rgba(164, 129, 246, 0.62) !important;
}

.dark-mode .list-group-item {
    border: 1px solid rgba(255, 255, 255, 0.13);
}

.dark-mode .list-group-item-action:hover {
    background-color: rgb(255, 255, 255, 0.1);
}

.dark-mode .table tbody tr:hover>td,
.dark-mode .table tbody th:hover {
    color: rgb(255, 255, 255);
    background: rgb(47, 47, 47);
}

.dark-mode .table tbody tr:hover>td.green,
.dark-mode .table tbody tr:hover>th.green {
    color: #2bc9b4 !important;
}

.dark-mode .table tbody tr:hover>td.red,
.dark-mode .table tbody tr:hover>th.red {
    color: #ff231f !important;
}

.dark-mode .markets-page .markets-pagination-wrap .page-link {
    color: rgba(226, 230, 238, 0.92);
    border-color: rgba(116, 124, 139, 0.55);
    background-color: rgba(34, 38, 46, 0.85);
}

.dark-mode .markets-page .markets-pagination-wrap .page-link:hover,
.dark-mode .markets-page .markets-pagination-wrap .page-link:focus {
    color: #fff;
    border-color: rgba(197, 204, 216, 0.8);
    background-color: rgba(72, 79, 92, 0.92);
}

.dark-mode .markets-page .markets-pagination-wrap .page-item.active .page-link {
    color: #fff;
    border-color: var(--color-primary-dark);
    background-color: var(--color-primary-dark);
}

.dark-mode .markets-page .markets-pagination-wrap .page-item.disabled .page-link {
    color: rgba(138, 146, 161, 0.72);
    border-color: rgba(78, 84, 95, 0.45);
    background-color: rgba(35, 39, 47, 0.68);
}

.dark-mode #tSell tr:hover~tr {
    background-color: #1c1c1c !important;
}

.dark-mode #tBuy tr:has(~ tr:hover) {
    background-color: #1c1c1c !important;
}

.dark-mode #search-results {
    background-color: rgba(21, 21, 21, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
}

.dark-mode .markets-search-results .market-search-item {
    color: #d7d7d7;
    background-color: transparent;
}

.dark-mode .markets-search-results .market-search-item:hover,
.dark-mode .markets-search-results .market-search-item:focus {
    color: var(--color-menu-hover-text-dark);
    background-color: var(--color-menu-hover-bg-dark);
}

.dark-mode .markets-search-results .market-search-item.active,
.dark-mode .markets-search-results .market-search-item:active {
    color: #fff;
    background-color: var(--color-primary);
}

.dark-mode .featured-token-card {
    background-color: rgba(29, 31, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .featured-token-card:hover,
.dark-mode .featured-token-card:focus {
    background-color: rgba(40, 43, 52, 0.96);
    border-color: rgba(126, 96, 201, 0.4);
}

.dark-mode .featured-token-ticker {
    color: rgba(240, 244, 255, 0.95);
}

.dark-mode .featured-token-name {
    color: rgba(186, 194, 213, 0.86);
}

.dark-mode .markets-page .markets-grid-row > [class*='col-'] > .card {
    background: linear-gradient(40deg, rgba(14, 14, 14, 0.89) 50%, rgb(25, 25, 25));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.dark-mode .markets-page .market-card-ticker {
    color: rgba(244, 247, 255, 0.96);
}

.dark-mode .markets-page .market-card-name,
.dark-mode .markets-page .market-card-range-line,
.dark-mode .markets-page .market-card-range-line small {
    color: rgba(182, 190, 209, 0.84);
}

.dark-mode .markets-page .market-card-price-line {
    color: rgba(236, 242, 255, 0.95);
}

.dark-mode .markets-page .market-chart-label,
.dark-mode .markets-page .market-nodata-label {
    color: rgba(176, 185, 206, 0.78) !important;
}

.dark-mode .markets-page .market-card-actions .btn-outline-dark {
    color: rgba(232, 238, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.02);
}

.dark-mode .markets-page .market-card-actions .btn-outline-dark:hover,
.dark-mode .markets-page .market-card-actions .btn-outline-dark:focus {
    color: #fff;
    border-color: rgba(126, 96, 201, 0.58);
    background-color: rgba(90, 39, 198, 0.2);
}

.dark-mode .markets-page .market-card-status-new {
    color: rgba(149, 230, 255, 0.96);
    background: rgba(78, 140, 170, 0.28);
}

.dark-mode .markets-page .market-card-status-cashback {
    color: rgba(255, 231, 162, 0.98);
    background: rgba(131, 98, 22, 0.42);
}

.dark-mode .markets-page .markets-list-head {
    border-bottom-color: rgba(146, 160, 191, 0.3);
}

.dark-mode .markets-page .markets-list-head > span {
    color: rgba(186, 196, 222, 0.86);
}

.dark-mode .markets-sort-label {
    color: rgba(185, 196, 221, 0.9);
}

.dark-mode .market-maker-highlight-item {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(30, 33, 41, 0.9);
}

.dark-mode .market-maker-highlight-pair,
.dark-mode .market-maker-highlight-value,
.dark-mode .market-maker-pool-pair,
.dark-mode .market-maker-pool-metric strong {
    color: rgba(240, 245, 255, 0.96);
}

.dark-mode .market-maker-highlight-meta,
.dark-mode .market-maker-pool-name,
.dark-mode .market-maker-pool-metric span,
.dark-mode .market-maker-header-copy p {
    color: rgba(190, 200, 220, 0.82) !important;
}

.dark-mode .market-maker-highlight-meta.market-maker-change-positive,
.dark-mode .market-maker-pool-metric strong.market-maker-change-positive {
    color: #0f9d77 !important;
}

.dark-mode .market-maker-highlight-meta.market-maker-change-negative,
.dark-mode .market-maker-pool-metric strong.market-maker-change-negative {
    color: #cf3f3f !important;
}

.dark-mode .market-maker-highlight-meta.market-maker-change-neutral,
.dark-mode .market-maker-pool-metric strong.market-maker-change-neutral {
    color: rgba(190, 200, 220, 0.82) !important;
}

.dark-mode .market-maker-fee-chip {
    color: rgba(202, 180, 255, 0.98);
    background: rgba(110, 74, 197, 0.22);
}

.dark-mode .market-maker-pool-icon {
    border-color: rgba(32, 35, 44, 0.98);
}

.dark-mode .market-maker-pool-card:hover {
    border-color: rgba(126, 96, 201, 0.42);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
}

.dark-mode .market-maker-change-neutral {
    color: rgba(196, 204, 224, 0.84) !important;
}

.dark-mode .market-maker-deposit-meta {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

.dark-mode .market-maker-wallet-asset {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

.dark-mode .market-maker-deposit-meta strong {
    color: rgba(240, 245, 255, 0.95);
}

.dark-mode .market-maker-wallet-asset strong {
    color: rgba(240, 245, 255, 0.95);
}

.dark-mode .market-maker-modal-title-ticker {
    color: rgba(240, 245, 255, 0.96);
}

.dark-mode .market-maker-modal-title-bullet {
    color: rgba(196, 204, 224, 0.84);
}

.dark-mode .market-maker-modal-chart-empty {
    color: rgba(196, 204, 224, 0.84);
}

.dark-mode #marketMakerTrustlineAlert {
    color: rgba(248, 234, 196, 0.96);
    background-color: rgba(78, 59, 16, 0.97);
    border-color: rgba(219, 173, 61, 0.42);
}

.dark-mode #marketMakerTrustlineManageLink.btn-outline-dark {
    color: #3f320f;
    border-color: rgba(73, 58, 20, 0.38);
    background-color: rgba(255, 255, 255, 0.46);
}

.dark-mode #marketMakerTrustlineManageLink.btn-outline-dark:hover,
.dark-mode #marketMakerTrustlineManageLink.btn-outline-dark:focus {
    color: #2f260e;
    border-color: rgba(73, 58, 20, 0.52);
    background-color: rgba(255, 255, 255, 0.65);
}

.dark-mode .accordion_options {
    background-color: rgb(18, 18, 18) !important;
    border-color: #1c1c1c !important;
}

/* Allocation / Collectibles dark mode refinements */
.dark-mode .table-sort-arrow {
    color: rgba(196, 204, 224, 0.58);
}

.dark-mode .alert-info {
    color: rgba(228, 236, 255, 0.9);
    background-color: #27223c;
    border-color: #4d3f8f;
}

.dark-mode .alert-info .alert-link {
    color: rgba(190, 218, 255, 0.98);
}

.dark-mode #notl_alert.alert-warning,
.dark-mode #loading_alert.alert-warning {
    color: rgba(248, 234, 196, 0.95);
    background-color: #4e3b10;
    border-color: #b98a21;
}

.dark-mode #notl_alert.alert-warning .alert-link,
.dark-mode #loading_alert.alert-warning .alert-link {
    color: rgba(255, 228, 145, 0.98);
}

.dark-mode .collectible-skeleton-media,
.dark-mode .collectible-skeleton-line {
    background-color: rgba(255, 255, 255, 0.06);
}

.dark-mode .loading-bkg {
    animation-name: backgroundColorPaletteDark;
}

.dark-mode .badge-light {
    color: rgba(232, 238, 255, 0.92);
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.dark-mode .badge-light .text-muted {
    color: rgba(196, 204, 224, 0.82) !important;
}

.dark-mode .nft-card .card-footer {
    background-color: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@keyframes backgroundColorPaletteDark {
    0% {
        background: rgba(255, 255, 255, 0.03);
    }

    100% {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* Trade-specific dark mode harmonization */
.dark-mode .main-header-nav-toggle:hover,
.dark-mode .main-header-nav-toggle:focus,
.dark-mode .main-header-nav-toggle.show {
    background-color: var(--color-primary);
    color: #fff !important;
    border-radius: 0.5rem;
}

.dark-mode .main-header-nav-toggle:hover svg,
.dark-mode .main-header-nav-toggle:focus svg,
.dark-mode .main-header-nav-toggle.show svg {
    color: #fff !important;
    fill: currentColor;
}

.dark-mode #toggleTicker.btn-outline-dark {
    background-color: rgba(8, 10, 16, 0.78);
}

.dark-mode #toggleTicker.btn-outline-dark a,
.dark-mode #toggleTicker.btn-outline-dark .pair-separator,
.dark-mode #toggleTicker.btn-outline-dark .pair-ticker-ellipsis {
    color: rgba(255, 255, 255, 0.96) !important;
}

.dark-mode #toggleTicker.btn-outline-dark .ticker-xrp-icon {
    filter: brightness(0) invert(1) !important;
}

.dark-mode #toggleTicker.target-highlight,
.dark-mode #toggleTicker.inverted-target-highlight {
    animation: none !important;
}

.dark-mode #toggleTicker.btn-outline-dark:hover,
.dark-mode #toggleTicker.btn-outline-dark:focus,
.dark-mode #toggleTicker.btn-outline-dark:not(:disabled):not(.disabled):active,
.dark-mode #toggleTicker.btn-outline-dark:not(:disabled):not(.disabled).active,
.dark-mode .show>#toggleTicker.btn-outline-dark.dropdown-toggle {
    color: #fff;
    background-color: rgba(15, 18, 26, 0.92);
    border-color: rgba(220, 227, 243, 0.55);
    box-shadow: none;
}

.dark-mode .trade-accordion-container {
    border-color: rgba(255, 255, 255, 0.14);
    background-color: rgba(15, 15, 15, 0.85);
}

.dark-mode .trade-token-label-muted {
    color: rgba(196, 204, 224, 0.8);
}

.dark-mode .trade-max-btn {
    color: var(--color-primary-light);
}

.dark-mode #tradeMarketsMenu hr {
    border-color: rgba(255, 255, 255, 0.11);
}

.dark-mode .trade-menu-setting-row .form-check-label {
    color: rgba(214, 221, 240, 0.9);
}

.dark-mode .trade-more-options-toggle {
    color: rgba(216, 224, 243, 0.9);
}

.dark-mode .trade-more-options-toggle:hover,
.dark-mode .trade-more-options-toggle:focus {
    color: rgba(245, 248, 255, 0.98);
}

.dark-mode .trade-price-badge.text-muted {
    color: rgba(196, 204, 224, 0.82) !important;
}

.dark-mode .trade-chart-config-row .form-check-label,
.dark-mode #BuyLimitSwitch~.form-check-label,
.dark-mode #SellLimitSwitch~.form-check-label {
    color: rgba(214, 221, 240, 0.9) !important;
}

.dark-mode .trade-chart-config-btn {
    border-color: rgba(255, 255, 255, 0.18);
    color: rgba(214, 221, 240, 0.92);
    background-color: rgba(20, 20, 20, 0.85);
}

.dark-mode .trade-chart-config-btn:hover,
.dark-mode .trade-chart-config-btn:focus,
.dark-mode .trade-chart-config-btn:active,
.dark-mode .show > .trade-chart-config-btn.dropdown-toggle {
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: rgba(236, 242, 255, 0.96) !important;
    background-color: rgba(20, 20, 20, 0.92) !important;
}

.dark-mode .trade-chart-lock-view-btn {
    border-color: rgba(214, 221, 240, 0.38);
    color: rgba(214, 221, 240, 0.9);
}

.dark-mode .trade-chart-lock-view-btn.active,
.dark-mode .trade-chart-lock-view-btn[aria-pressed='true'] {
    border-color: rgba(214, 221, 240, 0.62) !important;
    color: rgba(236, 242, 255, 0.98) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.dark-mode .trade-chart-config-dropdown {
    background-color: rgba(20, 20, 20, 0.98);
    border-color: rgba(255, 255, 255, 0.14);
}

.dark-mode .trade-chart-preset-select,
.dark-mode #tradeChartPresetNameInput {
    color: rgba(226, 233, 248, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
    background-color: rgba(31, 35, 45, 0.94);
}

.dark-mode .trade-chart-preset-select:focus,
.dark-mode #tradeChartPresetNameInput:focus {
    border-color: rgba(165, 182, 234, 0.55);
    box-shadow: none;
}

.dark-mode .trade-chart-presets-dropdown .btn-outline-dark {
    color: rgba(214, 221, 240, 0.94);
    border-color: rgba(255, 255, 255, 0.24);
    background-color: transparent;
}

.dark-mode .trade-chart-presets-dropdown .btn-outline-dark:hover,
.dark-mode .trade-chart-presets-dropdown .btn-outline-dark:focus,
.dark-mode .trade-chart-presets-dropdown .btn-outline-dark:active {
    color: rgba(236, 242, 255, 0.98);
    border-color: rgba(255, 255, 255, 0.42);
    background-color: rgba(255, 255, 255, 0.08);
}

.dark-mode #orderTab .nav-link,
.dark-mode .trade-orders-card-body .nav-tabs .nav-link {
    color: rgba(200, 208, 228, 0.88);
}

.dark-mode #orderTab .nav-link:hover,
.dark-mode .trade-orders-card-body .nav-tabs .nav-link:hover {
    color: rgba(236, 242, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.25) transparent;
}

.trustline-advanced-options {
    margin-bottom: 1rem;
    padding: 0 .25rem;
}

/** Bubble Map **/

.list-group-item+.list-group-item {
    border-top-width: 1px;
}

.bubble-map-header-copy {
    max-width: 42rem;
}

.bubble-map-stat-card,
.bubble-map-surface {
    background-color: #fff;
    border-radius: 25px;
    border-color: rgba(0, 0, 0, 0.125);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 14px -6px;
}

.bubble-map-canvas-card {
    background: transparent;
    border: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.bubble-map-stat-card .card-body,
.bubble-map-canvas-card .card-body,
.bubble-map-side-card .card-body {
    padding: 1.25rem;
}

.bubble-map-canvas-body {
    padding: 0.5rem;
}

.bubble-map-stat-plain {
    min-height: 100%;
}

.bubble-map-stat-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 0.35rem 0.25rem;
}

.bubble-map-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bubble-map-stat-label {
    color: var(--color-text-muted);
}

.bubble-map-stat-value {
    font-size: 2rem;
    letter-spacing: 0.01em;
    color: #18214D;
    text-shadow: none;
}

.bubble-map-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(24, 33, 77, 0.08);
}

.bubble-map-panel-heading-compact {
    margin-bottom: 0.9rem;
}

.bubble-map-panel-title {
    color: #18214D;
    text-shadow: none;
    letter-spacing: 0.02em;
}

.allocation-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(24, 33, 77, 0.08);
}

.allocation-panel-heading .card-title,
.allocation-panel-heading .bubble-map-panel-title {
    font-size: 1rem;
    text-shadow: none;
    letter-spacing: 0.02em;
}

.bubble-map-heading-switch {
    flex: 0 0 auto;
    justify-content: flex-end;
    min-height: auto;
    margin-left: auto;
}

.bubble-map-toolbar {
    gap: 1rem;
}

.bubble-map-toolbar-group {
    flex: 1 1 220px;
    min-width: 0;
}

.bubble-map-switch-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding-left: 0;
}

.bubble-map-switch-row .form-check-input {
    margin-left: 0;
    margin-top: 0;
}

.bubble-map-switch-row .form-check-label {
    color: var(--color-text-body);
}

.bubble-map-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.bubble-map-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.bubble-map-legend-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    border: 1px solid rgba(24, 33, 77, 0.08);
    background: rgba(255, 255, 255, 0.88);
    color: #596579;
}

.bubble-map-legend-positive {
    color: #198c77;
    background: rgba(43, 201, 180, 0.12);
    border-color: rgba(43, 201, 180, 0.18);
}

.bubble-map-legend-negative {
    color: #c92d29;
    background: rgba(255, 35, 31, 0.1);
    border-color: rgba(255, 35, 31, 0.14);
}

.bubble-map-legend-neutral {
    color: #596579;
}

.bubble-map-period-note {
    white-space: nowrap;
}

.bubble-map-chart-shell {
    position: relative;
    min-height: 420px;
}

.bubble-map-leaders-card {
    width: 100%;
}

.bubble-map-leaders {
    gap: 0.5rem;
}

.bubble-map-leader-item,
.bubble-map-leader-empty {
    border-radius: 5px !important;
    border: 1px solid rgba(0, 0, 0, 0.125);
    background: rgba(255, 255, 255, 0.8);
}

.bubble-map-leader-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.bubble-map-leader-main {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.bubble-map-leader-icon {
    width: 36px;
    height: 36px;
    object-fit: cover;
    flex: 0 0 36px;
}

.bubble-map-leader-ticker,
.bubble-map-leader-name {
    display: block;
    line-height: 1.2;
}

.bubble-map-leader-ticker {
    font-weight: 700;
    color: #18214D;
}

.bubble-map-leader-name {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}

.bubble-map-leader-metrics {
    font-weight: 700;
    white-space: nowrap;
}

.dark-mode .bubble-map-surface {
    background: linear-gradient(40deg, rgba(14, 14, 14, 0.89) 50%, rgb(25, 25, 25));
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 14px -6px;
}

.dark-mode .bubble-map-canvas-card {
    background: transparent;
    border: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.dark-mode .bubble-map-kicker {
    color: var(--color-primary-light);
}

.dark-mode .bubble-map-stat-value,
.dark-mode .bubble-map-panel-title {
    color: rgba(243, 246, 255, 0.96);
}

.dark-mode .bubble-map-stat-label {
    color: rgba(196, 204, 224, 0.8);
}

.dark-mode .bubble-map-panel-heading {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .bubble-map-leader-item,
.dark-mode .bubble-map-leader-empty {
    background-color: rgba(29, 31, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .bubble-map-leader-ticker {
    color: rgba(243, 246, 255, 0.96);
}

.dark-mode .bubble-map-leader-name,
.dark-mode .bubble-map-header-copy {
    color: rgba(196, 204, 224, 0.84) !important;
}

.dark-mode .bubble-map-switch-row .form-check-label,
.dark-mode .bubble-map-period-note {
    color: rgba(196, 204, 224, 0.84) !important;
}

.dark-mode .bubble-map-legend-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(222, 229, 244, 0.88);
}

.dark-mode .bubble-map-legend-positive {
    color: rgba(126, 238, 219, 0.96);
    background: rgba(43, 201, 180, 0.16);
    border-color: rgba(43, 201, 180, 0.2);
}

.dark-mode .bubble-map-legend-negative {
    color: rgba(255, 159, 156, 0.96);
    background: rgba(255, 35, 31, 0.14);
    border-color: rgba(255, 35, 31, 0.18);
}

@media (max-width: 991.98px) {
    .bubble-map-heading-switch {
        width: auto;
        align-self: flex-end;
        justify-content: flex-end;
        margin-left: auto;
    }

    .bubble-map-period-note {
        white-space: normal;
    }

    .bubble-map-leaders-card {
        width: 100%;
    }
}

/* Packages */
.packages-page {
    padding-bottom: 2rem;
}

.packages-page-header,
.packages-title-row {
    display: flex;
    align-items: center;
}

.packages-section {
    margin-bottom: 1rem;
}

.packages-section-label,
.packages-field span {
    font-size: 0.82rem;
    font-weight: 600;
    color: #48526a;
}

.packages-page .form-control,
.packages-page .form-select {
    border-radius: 0.72rem;
    font-size: 0.94rem;
    min-height: 2.45rem;
}

.packages-reward-amount-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.packages-reward-amount-group .input-group-text {
    min-width: 4.8rem;
    justify-content: center;
    border-top-right-radius: 0.72rem;
    border-bottom-right-radius: 0.72rem;
    color: #48526a;
    font-size: 0.86rem;
    font-weight: 700;
}

.packages-page .form-control:focus,
.packages-page .form-select:focus,
.packages-page .form-check-input:focus {
    border-color: rgba(72, 82, 106, 0.35);
    box-shadow: none;
}

.packages-page .form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.packages-page .form-control::placeholder {
    font-size: 0.9rem;
}

.packages-page .form-text {
    font-size: 0.82rem;
    line-height: 1.35;
}

.packages-token-picker {
    max-width: 760px;
}

.packages-token-picker .input-group-text {
    background: #f8f9fa;
    color: #495057;
}

.packages-access-alert {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    margin: 1rem 0;
}

.packages-token-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 1rem;
}

.packages-token-summary .card-body {
    position: relative;
    overflow: hidden;
}

.packages-token-accent {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 0.32rem;
    background: var(--packages-token-color, #dee2e6);
}

.packages-token-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
    padding-top: 0.3rem;
}

.packages-token-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.packages-token-title-block {
    min-width: 0;
}

.packages-token-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    object-fit: cover;
    background: #f8f9fa;
    border: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.packages-token-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.38rem;
}

.packages-token-badges .badge {
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1.1;
    padding: 0.38rem 0.54rem;
}

.packages-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.packages-readonly-item {
    min-width: 0;
    border: 1px solid rgba(34, 45, 72, 0.08);
    border-radius: 0.72rem;
    background: rgba(248, 250, 254, 0.82);
    padding: 0.62rem 0.7rem;
}

.packages-readonly-item-wide {
    grid-column: 1 / -1;
}

.packages-readonly-grid dt {
    color: #4c5873;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.24;
    margin-bottom: 0.22rem;
}

.packages-readonly-grid dd {
    color: rgba(47, 58, 82, 0.6);
    font-size: 0.88rem;
    line-height: 1.3;
    margin-bottom: 0;
}

.packages-token-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.packages-token-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.packages-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.packages-switch-row {
    align-items: center;
    gap: 0.5rem;
    padding-left: 2.6rem;
}

.packages-switch-row .form-check-label {
    color: #48526a;
    font-size: 0.82rem;
    font-weight: 600;
}

.packages-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.packages-field-wide {
    grid-column: 1 / -1;
}

.packages-color-field {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0;
    height: 2.45rem;
    min-height: 2.45rem;
    padding: 0 0.55rem 0 0.2rem;
}

.packages-color-field .packages-color-picker {
    display: block;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
}

.packages-color-hex {
    text-transform: uppercase;
}

.packages-category-control {
    display: grid;
    gap: 0.5rem;
}

.packages-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-height: 2.45rem;
    align-items: center;
    border-radius: 0.72rem;
    padding: 0.42rem;
}

.packages-category-chips:empty::before {
    content: 'No categories selected';
    color: rgba(72, 82, 106, 0.62);
    font-size: 0.9rem;
    padding-left: 0.25rem;
}

.packages-category-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    max-width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #f8f9fa;
    color: #2f3a52;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1;
    min-height: 2.18rem;
    padding: 0.28rem 0.46rem 0.28rem 0.72rem;
}

.packages-category-chip > span {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.packages-page .packages-category-remove {
    display: grid;
    place-items: center;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.42rem;
    width: 1.42rem;
    height: 1.42rem;
    border: 0;
    border-radius: 999px;
    background: #e9ecef;
    color: #242a38;
    line-height: 1;
    padding: 0;
    box-shadow: none;
}

.packages-page .packages-category-remove ion-icon {
    display: block;
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
    line-height: 1;
}

.packages-page .packages-category-remove:hover,
.packages-page .packages-category-remove:focus,
.packages-page .packages-category-remove:active {
    background: #dee2e6;
    color: #242a38;
    box-shadow: none;
    outline: 0;
}

.packages-category-add-row,
.packages-category-other-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
}

.packages-tokenomics-segment {
    padding-top: 0.35rem;
}

.packages-tokenomics-heading span {
    line-height: 1.2;
}

.packages-tokenomics-wallets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.packages-recipient-wallets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.packages-tokenomics-wallet-row {
    display: grid;
    grid-template-columns: 0.9fr 1.6fr auto;
    gap: 0.5rem;
    align-items: center;
}

.packages-recipient-wallet-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.packages-tokenomics-wallet-row .btn,
.packages-recipient-wallet-row .btn {
    min-width: 5.4rem;
}

.packages-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1rem;
}

.packages-form-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.packages-inline-message {
    min-height: 1.2rem;
    font-size: 0.9rem;
}

.packages-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.packages-section-heading-copy {
    flex: 1 1 100%;
    min-width: 0;
}

.packages-reward-unlock-title {
    text-align: center;
    width: 100%;
}

.packages-upgrade-package-link,
.packages-show-packages-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #0d6efd;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0;
    text-decoration: none;
}

.packages-upgrade-package-link:hover,
.packages-upgrade-package-link:focus,
.packages-show-packages-link:hover,
.packages-show-packages-link:focus {
    text-decoration: underline;
}

.packages-subsection-title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 0.7rem;
}

.packages-current-rewards {
    margin-bottom: 1rem;
}

.packages-addon-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(34, 45, 72, 0.1);
    border-radius: 8px;
    background: rgba(248, 250, 254, 0.72);
    margin-bottom: 1rem;
    padding: 0.85rem;
}

.packages-addon-card h6 {
    color: #1d2128;
    font-size: 0.95rem;
    font-weight: 700;
}

.packages-token-pool-card {
    display: grid;
    gap: 1rem;
    min-width: 0;
    border: 1px solid rgba(34, 45, 72, 0.1);
    border-radius: 8px;
    background: rgba(248, 250, 254, 0.72);
    margin-bottom: 1rem;
    padding: 0.95rem;
}

.packages-token-pool-head,
.packages-token-pool-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.packages-token-pool-head h6 {
    color: #1d2128;
    font-size: 0.95rem;
    font-weight: 700;
}

.packages-token-pool-head > div {
    min-width: 0;
}

.packages-token-pool-head p {
    overflow-wrap: anywhere;
}

.packages-token-pool-wallet,
.packages-token-pool-balance,
.packages-token-pool-note {
    color: rgba(32, 36, 48, 0.62);
    font-size: 0.82rem;
    font-weight: 600;
}

.packages-token-pool-wallet,
.packages-token-pool-balance {
    display: inline-flex;
    justify-content: flex-end;
    width: fit-content;
    min-width: min(100%, 18rem);
    max-width: 100%;
    padding: 0.55rem 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.92rem;
    letter-spacing: 0;
    text-align: right;
}

.packages-token-pool-actions {
    display: grid;
    grid-template-columns: minmax(12rem, 26rem) minmax(8.5rem, 12rem) minmax(8.5rem, 12rem);
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    max-width: 54rem;
}

.packages-token-pool-actions.is-active {
    grid-template-columns: minmax(12rem, 26rem) minmax(8.5rem, 12rem) minmax(8.5rem, 12rem);
}

.packages-token-pool-actions .packages-field {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.packages-token-pool-actions .packages-field .form-label {
    margin: 0;
}

.packages-token-pool-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    white-space: nowrap;
}

.packages-token-pool-actions .packages-token-pool-action-control {
    min-width: 0;
}

.packages-token-pool-history {
    display: grid;
    gap: 0.6rem;
}

.packages-token-pool-history-head span {
    color: #48526a;
    font-size: 0.82rem;
    font-weight: 700;
}

.packages-token-pool-history-list {
    display: grid;
    gap: 0.45rem;
}

.packages-token-pool-history-row {
    display: grid;
    grid-template-columns: 6rem 8rem minmax(0, 1fr) 7rem;
    gap: 0.65rem;
    align-items: center;
    border: 1px solid rgba(34, 45, 72, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: rgba(32, 36, 48, 0.78);
    padding: 0.65rem;
}

.packages-token-pool-history-type {
    color: #0d6efd;
    font-weight: 800;
}

#packagesTokenPoolShowMoreBtn {
    justify-self: end;
    min-width: 8.5rem;
    width: auto;
}

.packages-muted-panel {
    border: 1px dashed #ced4da;
    border-radius: 8px;
    color: rgba(32, 36, 48, 0.62);
    margin-bottom: 1rem;
    padding: 0.85rem;
}

.packages-reward-card-grid,
.packages-new-reward-slot {
    display: grid;
    gap: 0.85rem;
}

.packages-new-reward-slot:not(:empty) {
    margin: 1rem 0;
}

.packages-reward-card {
    border: 1px solid rgba(34, 45, 72, 0.1);
    border-radius: 0.92rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 22px rgba(24, 31, 54, 0.05);
    padding: 0.95rem;
}

.packages-reward-card-new {
    border-color: #ced4da;
    background: #f8f9fa;
}

.packages-reward-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.packages-reward-card-heading strong {
    color: #2f3a52;
    font-size: 0.9rem;
    word-break: break-word;
}

.packages-reward-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

.packages-reward-form-grid label {
    min-width: 0;
}

.packages-reward-field-wide {
    grid-column: 1 / -1;
}

.packages-reward-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.packages-reward-message {
    min-height: 1.2rem;
    font-size: 0.86rem;
}

.packages-template-style-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.packages-template-style-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    border: 1px solid rgba(34, 45, 72, 0.1);
    border-radius: 0.92rem;
    background: #fff;
    padding: 0.9rem;
}

.packages-template-style-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    background: #f8f9fa;
    color: #495057;
}

.packages-template-style-icon ion-icon {
    font-size: 1.18rem;
}

.packages-template-style-card h6 {
    color: #1d2128;
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.28rem;
}

.packages-template-style-card p {
    color: rgba(32, 36, 48, 0.68);
    font-size: 0.86rem;
    line-height: 1.35;
    margin: 0;
}

.packages-template-style-card .btn {
    grid-column: 1 / -1;
    justify-content: center;
}

.packages-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.packages-template-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: #f8f9fa;
}

.packages-template-item strong {
    display: block;
    overflow: hidden;
    color: rgba(32, 36, 48, 0.9);
    font-size: 0.94rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.packages-template-type,
.packages-template-meta {
    color: rgba(32, 36, 48, 0.58);
    font-size: 0.78rem;
    font-weight: 600;
}

.packages-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 22rem));
    justify-content: center;
    gap: 1rem;
}

.packages-plan-grid-modal {
    align-items: stretch;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 22rem));
    justify-content: center;
}

.packages-plan-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border: 1px solid rgba(34, 45, 72, 0.1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 8px 22px rgba(24, 31, 54, 0.06);
    padding: clamp(1rem, 2vw, 1.35rem);
}

.packages-plan-current {
    border-color: rgba(13, 110, 253, 0.35);
    box-shadow: 0 10px 26px rgba(13, 110, 253, 0.1);
}

.packages-plan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    min-height: 5.2rem;
}

.packages-plan-title {
    color: #1d2128;
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 0.42rem;
}

.packages-plan-copy {
    color: rgba(32, 36, 48, 0.68);
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 0;
}

.packages-plan-token-badge {
    flex: 0 0 auto;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    background: #f8f9fa;
    color: #495057;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 0.38rem 0.52rem;
    white-space: nowrap;
}

.packages-plan-price-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22rem;
    margin: 2rem 0 2rem;
}

.packages-plan-price-main {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.packages-plan-price {
    color: #16191d;
    font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}

.packages-plan-currency {
    color: rgba(32, 36, 48, 0.68);
    font-size: 0.8rem;
    font-weight: 500;
}

.packages-plan-annual-price {
    color: rgba(32, 36, 48, 0.56);
    font-size: 0.86rem;
    font-weight: 600;
}

.packages-plan-discount-note {
    color: rgba(140, 182, 222, 0.82);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.25;
}

.packages-plan-cta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1.35rem;
    container-type: inline-size;
}

.packages-plan-cta-row .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.24rem, 1.3cqw, 0.42rem);
    min-width: 0;
    min-height: 2.7rem;
    border-radius: 999px;
    font-size: clamp(0.72rem, 4.2cqw, 0.86rem);
    font-weight: 700;
    line-height: 1.08;
    padding-inline: clamp(0.62rem, 3.2cqw, 1rem);
    white-space: nowrap;
}

.packages-plan-cta-row .btn span {
    min-width: 0;
}

.packages-plan-cta-row .btn ion-icon {
    flex: 0 0 auto;
}

.packages-plan-cta-row .btn small {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    opacity: 0.72;
}

.packages-plan-feature-list {
    display: grid;
    gap: 0.78rem;
    border-top: 1px solid rgba(34, 45, 72, 0.08);
    margin: 0;
    padding: 1rem 0 2rem;
    list-style: none;
}

.packages-plan-feature-list li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    color: rgba(32, 36, 48, 0.86);
    font-size: 0.94rem;
    line-height: 1.35;
}

.packages-plan-feature-list ion-icon {
    color: #1d2128;
    font-size: 1.08rem;
    margin-top: 0.08rem;
}

.packages-plans-table-wrap {
    overflow-x: auto;
}

.packages-plans-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.packages-plans-table th {
    background: #f8f9fa;
    color: #212529;
    font-weight: 500;
    padding: 0.95rem;
}

.packages-plans-table td {
    border: 1px solid #dee2e6;
    color: rgba(32, 36, 48, 0.86);
    padding: 0.95rem;
    vertical-align: middle;
}

.packages-plans-table ul {
    margin: 0;
    padding-left: 1.1rem;
}

.packages-plan-actions {
    width: 210px;
}

.packages-billing-group {
    width: 100%;
}

.packages-billing-group .btn {
    min-width: 90px;
}

.packages-empty-state {
    display: flex;
    min-height: 350px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    color: rgba(32, 36, 48, 0.62);
    text-align: center;
}

.packages-empty-state ion-icon {
    color: #6c757d;
    font-size: 2.2rem;
}

.packages-inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.packages-reward-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.packages-inventory-card {
    position: relative;
    display: flex;
    min-height: 9rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.72rem;
    width: 100%;
    border: 1px solid rgba(34, 45, 72, 0.1);
    border-radius: 8px;
    background: #fff;
    color: #242a38;
    padding: 1rem;
    text-align: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.packages-inventory-card:hover,
.packages-inventory-card:focus {
    border-color: #adb5bd;
    box-shadow: 0 12px 26px rgba(24, 31, 54, 0.09);
    transform: translateY(-1px);
}

.packages-inventory-card:disabled {
    cursor: not-allowed;
    opacity: 0.66;
    transform: none;
}

.packages-current-reward-card {
    min-height: 8rem;
    align-items: flex-start;
    text-align: left;
}

.packages-current-reward-card .packages-inventory-copy {
    text-align: left;
}

.packages-template-inventory-card {
    border-style: dashed;
    background: #f8f9fa;
}

.packages-inventory-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    background: #212529;
    color: #fff;
}

.packages-inventory-plus ion-icon {
    font-size: 1.45rem;
}

.packages-inventory-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: #f8f9fa;
    color: #495057;
}

.packages-inventory-icon ion-icon {
    font-size: 1.2rem;
}

.packages-inventory-copy {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
}

.packages-inventory-copy strong {
    color: #1d2128;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.packages-inventory-copy span {
    color: rgba(32, 36, 48, 0.62);
    font-size: 0.82rem;
    line-height: 1.3;
}

.packages-current-reward-card .packages-current-reward-type {
    color: rgba(32, 36, 48, 0.72);
}

.packages-current-reward-card .packages-current-reward-amount {
    color: #6b9ecd;
    font-size: 0.9rem;
    font-weight: 700;
}

#packagesRewardModalCenter .modal-dialog {
    width: min(92vw, 600px);
    max-width: 600px;
}

.packages-reward-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.packages-reward-modal-wide {
    grid-column: 1 / -1;
}

.packages-reward-date-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.packages-cycle-box {
    border: 1px solid rgba(34, 45, 72, 0.12);
    border-radius: 8px;
    padding: 0.9rem;
    background: color(srgb 0.9609 0.9609 0.961);
}

.packages-cycle-title {
    display: block;
    color: #48526a;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.packages-repeat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.packages-repeat-separator {
    width: 100%;
    height: 1px;
    margin: 0.85rem 0 0.65rem;
    background: rgba(34, 45, 72, 0.1);
}

.packages-repeat-toggle-row {
    min-height: 2rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.packages-repeat-toggle-row .form-check-label {
    color: #48526a;
    font-size: 0.82rem;
    font-weight: 600;
}

.packages-repeat-grid.is-disabled {
    opacity: 0.58;
}

.packages-repeat-field {
    display: grid;
    gap: 0.25rem;
}

.packages-repeat-field span {
    color: #6c757d;
    font-size: 0.76rem;
    font-weight: 600;
}

.packages-reward-modal-footer {
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.packages-reward-modal-side {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.packages-reward-modal-side-start {
    justify-content: flex-start;
}

.packages-reward-modal-side-end {
    justify-content: flex-end;
    margin-left: auto;
}

.packages-reward-modal-side .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dark-mode .packages-section-label,
.dark-mode .packages-field span,
.dark-mode .packages-switch-row .form-check-label,
.dark-mode .packages-repeat-toggle-row .form-check-label,
.dark-mode .packages-readonly-grid dt,
.dark-mode .packages-subsection-title,
.dark-mode .packages-template-type,
.dark-mode .packages-template-meta {
    color: rgba(196, 204, 224, 0.78);
}

.dark-mode .packages-repeat-separator {
    background: rgba(136, 150, 179, 0.24);
}

.dark-mode .packages-page .form-text {
    color: rgba(196, 204, 224, 0.78);
}

.dark-mode .packages-reward-modal .form-text {
    color: rgba(196, 204, 224, 0.82);
}

.dark-mode .packages-readonly-grid dd,
.dark-mode .packages-template-item strong,
.dark-mode .packages-plans-table td {
    color: rgba(243, 246, 255, 0.3);
}

.dark-mode .packages-token-picker .input-group-text,
.dark-mode .packages-template-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .packages-reward-amount-group .input-group-text {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(220, 226, 240, 0.9);
}

.dark-mode .packages-token-icon {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.dark-mode .packages-readonly-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .packages-tokenomics-wallet-row .form-control,
.dark-mode .packages-recipient-wallet-row .form-control {
    background: rgba(24, 30, 43, 0.88);
    border-color: rgba(136, 150, 179, 0.28);
    color: rgba(226, 234, 252, 0.95);
}

.dark-mode .packages-category-chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(226, 234, 252, 0.95);
}

.dark-mode .packages-category-remove {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(226, 234, 252, 0.95);
}

.dark-mode .packages-category-chips:empty::before {
    color: rgba(196, 204, 224, 0.72);
}

.dark-mode .packages-muted-panel {
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(196, 204, 224, 0.78);
}

.dark-mode .packages-addon-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .packages-addon-card h6,
.dark-mode .packages-token-pool-head h6 {
    color: rgba(243, 246, 255, 0.96);
}

.dark-mode .packages-token-pool-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.dark-mode .packages-token-pool-wallet,
.dark-mode .packages-token-pool-balance,
.dark-mode .packages-token-pool-note,
.dark-mode .packages-token-pool-history-head span {
    color: rgba(196, 204, 224, 0.82);
}

.dark-mode .packages-token-pool-wallet,
.dark-mode .packages-token-pool-balance {
    background: linear-gradient(180deg, rgba(12, 18, 29, 0.96) 0%, rgba(22, 29, 43, 0.96) 100%);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.38);
    color: rgba(232, 238, 250, 0.92);
}

.dark-mode .packages-token-pool-history-row {
    background: rgba(29, 31, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(196, 204, 224, 0.86);
}

.dark-mode .packages-reward-card,
.dark-mode .packages-template-style-card {
    background: rgba(29, 31, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.dark-mode .packages-reward-card-new {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}

.dark-mode .packages-reward-card-heading strong,
.dark-mode .packages-template-style-card h6 {
    color: rgba(243, 246, 255, 0.96);
}

.dark-mode .packages-template-style-card p {
    color: rgba(196, 204, 224, 0.84);
}

.dark-mode .packages-plan-card {
    background: rgba(29, 31, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.dark-mode .packages-plan-title,
.dark-mode .packages-plan-price,
.dark-mode .packages-plan-feature-list ion-icon {
    color: rgba(243, 246, 255, 0.96);
}

.dark-mode .packages-plan-copy,
.dark-mode .packages-plan-currency,
.dark-mode .packages-plan-annual-price,
.dark-mode .packages-plan-feature-list li {
    color: rgba(196, 204, 224, 0.84);
}

.dark-mode .packages-plan-discount-note {
    color: rgba(138, 180, 255, 0.9);
}

.dark-mode .packages-cycle-box {
    border-color: rgba(136, 150, 179, 0.24);
    background: var(--bs-tertiary-color);
}

.dark-mode .packages-cycle-title {
    color: rgba(196, 204, 224, 0.82);
}

.dark-mode .packages-plan-token-badge {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(226, 234, 252, 0.95);
}

.dark-mode .packages-plan-feature-list {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .packages-empty-state {
    color: rgba(196, 204, 224, 0.78);
}

.dark-mode .packages-inventory-card {
    background: rgba(29, 31, 38, 0.92);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(243, 246, 255, 0.96);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.dark-mode .packages-template-inventory-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}

.dark-mode .packages-inventory-copy strong {
    color: rgba(243, 246, 255, 0.96);
}

.dark-mode .packages-inventory-copy span {
    color: rgba(196, 204, 224, 0.8);
}

@media (max-width: 991.98px) {
    .packages-token-layout,
    .packages-reward-card-grid,
    .packages-template-grid,
    .packages-template-style-grid,
    .packages-inventory-grid,
    .packages-plan-grid,
    .packages-token-pool-actions,
    .packages-token-pool-history-row {
        grid-template-columns: 1fr;
    }

    .packages-token-pool-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .packages-token-pool-actions,
    .packages-token-pool-actions.is-active {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        max-width: none;
    }

    .packages-token-pool-actions .packages-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .packages-token-picker {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .packages-token-picker .btn {
        grid-column: 1 / -1;
    }

    .packages-readonly-grid,
    .packages-form-grid,
    .packages-tokenomics-wallet-row,
    .packages-recipient-wallet-row,
    .packages-reward-date-row,
    .packages-reward-form-grid,
    .packages-reward-modal-grid,
    .packages-repeat-grid {
        grid-template-columns: 1fr;
    }

    .packages-token-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .packages-token-badges {
        justify-content: flex-start;
    }

    .packages-token-actions .btn {
        justify-content: center;
        flex: 1 1 8rem;
    }

    .packages-tokenomics-heading {
        align-items: stretch !important;
        flex-direction: column;
    }

    .packages-tokenomics-heading .btn,
    .packages-tokenomics-wallet-row .btn,
    .packages-recipient-wallet-row .btn,
    .packages-category-add-row .btn,
    .packages-category-other-row .btn {
        width: 100%;
    }

    .packages-category-add-row,
    .packages-category-other-row {
        grid-template-columns: 1fr;
    }

    .packages-access-alert,
    .packages-addon-card,
    .packages-form-actions,
    .packages-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .packages-form-actions .btn {
        justify-content: center;
        width: 100%;
    }

    .packages-reward-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .packages-reward-card-actions .btn {
        width: 100%;
    }

    .packages-plans-table {
        min-width: 0;
    }

    .packages-plans-table thead {
        display: none;
    }

    .packages-plans-table,
    .packages-plans-table tbody,
    .packages-plans-table tr,
    .packages-plans-table td {
        display: block;
        width: 100%;
    }

    .packages-plans-table tr {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        margin-bottom: 0.85rem;
        overflow: hidden;
    }

    .packages-plans-table td {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        gap: 0.75rem;
        border-width: 0 0 1px;
    }

    .packages-plans-table td::before {
        content: attr(data-label);
        color: rgba(32, 36, 48, 0.58);
        font-size: 0.78rem;
        font-weight: 600;
    }

    .packages-plan-actions {
        width: 100%;
    }

    .packages-plan-actions::before {
        content: '';
    }

    .packages-billing-group {
        grid-column: 1 / -1;
    }

    .packages-plan-card-head,
    .packages-plan-price-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .packages-plan-card-head {
        min-height: 0;
    }

    .packages-plan-cta-row {
        grid-template-columns: 1fr;
    }

    .packages-reward-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .packages-reward-modal-side {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .packages-reward-modal-side-end {
        margin-left: 0;
    }

    .packages-reward-modal-side .btn {
        justify-content: center;
        width: 100%;
    }

    .dark-mode .packages-plans-table td::before {
        color: rgba(196, 204, 224, 0.78);
    }
}