.table-container-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
}

.table-container-wrapper::-webkit-scrollbar {
    width: 0px;
    height: 6px;
}

.table-container-wrapper.modal-open {
    overflow-y: visible !important;
    overflow-x: visible !important; /* Allow modal to hang out without scrollbars */
}

.table-container-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.table-container-wrapper::-webkit-scrollbar-thumb {
    background: var(--borders);
    border-radius: 3px;
}

.table-container-wrapper::-webkit-scrollbar:vertical {
    display: none;
    width: 0;
}

.financial-table {
    width: 100%;
    min-width: 100%;
    background-color: var(--table_bg);
    border-collapse: collapse;
}

.financial-table tbody tr:nth-child(odd) {
    background-color: var(--table_row_odd_bg);
}

.financial-table tbody tr:nth-child(even) {
    background-color: var(--table_row_even_bg);
}

.financial-table tr:hover {
    background-color: var(--table_hover_bg) !important;
}   

.financial-table th {
    padding: 2px 4px;
    text-align: right;
    color: var(--color-text-placeholder);
    font-size: var(--fs-sm);
    font-weight: var(--font_weight);
    background-color: var(--background);
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.3;
    position: sticky;
    top: 0;
    z-index: 10;
}

.financial-table th.left-aligned .header-content {
    justify-content: flex-start;
}

.financial-table th.left-aligned {
    text-align: left;
}

.col-chart { width: 32px; min-width: 32px; max-width: 32px; padding: 0 4px !important; }
.col-token, .col-token-address { width: 40px; min-width: 40px; }
.token-page-layout .col-chart { width: 30px; min-width: 30px; max-width: 30px; }
.token-page-layout .col-from_address { width: auto; }
.token-page-layout .col-to_address { width: auto; }
.token-page-layout .col-amount { width: 55px; }
.token-page-layout .col-price { width: 80px; }
.token-page-layout .col-value { width: 80px; }
.token-page-layout .col-token-address { width: 24px; min-width: 24px; }
.token-page-layout .col-time { width: 55px; }
.token-cell {
    padding: 4px !important;
    text-align: center !important;
}
.token-cell .token-main-info {
    justify-content: center;
    cursor: pointer;
}
.token-page-layout .token-cell {
    width: 40px;
    max-width: 40px;
    overflow: hidden;
}
.token-page-layout .token-cell .token-symbol {
    display: none;
}
.col-from, .col-from_address { width: 10%; }
.col-to, .col-to_address { width: 10%; }
.col-amount { width: 6%; }
.col-price { width: 12%; }
.col-value { width: 12%; }
.col-block { width: 10%; }
.col-time { width: 9%; }

.chart-cell {
  text-align: center !important;
  padding: 0 4px !important;
  width: 32px;
  line-height: 1;
}

.chart-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  overflow: hidden;
  color: var(--color-text-placeholder);
  cursor: pointer;
  transition: color 0.2s;
}

.chart-icon-btn:hover {
  color: var(--green_arrow_color);
}

.chart-icon-btn.active {
  color: var(--green_arrow_color);
}

.chart-icon {
  font-size: 14px;
  line-height: 1;
}

.financial-table td {
    padding: 4px 8px;
    text-align: right;
    color: var(--table_text_color);
    font-size: var(--fs-md);
    border-top: 1px solid var(--table_border);
    border-bottom: 1px solid var(--table_border);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.time-cell {
    color: var(--color-link) !important;
    font-weight: var(--font_weight);
    font-size: var(--fs-sm) !important;
    white-space: nowrap;
}

.financial-table td:first-child, .financial-table th:first-child {
    text-align: left;
}

.token-main-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.token-icon-small {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: contain;
    background-color: var(--color-bg-secondary);
}

.token-name {
    font-weight: 500;
    font-size: var(--fs-md);
    color: var(--table_text_color);
    cursor: pointer;
}

.token-name:hover {
    text-decoration: underline;
}

.token-symbol {
    font-size: var(--fs-sm);
    color: var(--color-text-placeholder);
    cursor: pointer;
}

.token-symbol:hover {
    text-decoration: underline;
}

.token-address {
    font-size: var(--fs-base);
    color: var(--color-text-placeholder);
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.addr-cell, .match-cell { cursor: pointer; white-space: nowrap; }
.addr-cell { position: relative; text-align: left !important; }
.addr-cell .btn-copy-addr {
    opacity: 0;
    padding: 0 2px;
    margin-left: 4px;
    background: none;
    border: none;
    color: var(--color-text-placeholder);
    cursor: pointer;
    line-height: 1;
    vertical-align: middle;
    transition: opacity 0.15s;
}
.addr-cell .btn-copy-addr .material-symbols-rounded { font-size: 12px; }
.addr-cell:hover .btn-copy-addr { opacity: 0.6; }
.addr-cell .btn-copy-addr:hover { opacity: 1 !important; color: var(--color-hover-primary); }
.addr-highlight {
    outline: 1.5px dashed rgba(255, 193, 7, 0.7);
    outline-offset: -1px;
    border-radius: 4px;
    background: rgba(255, 193, 7, 0.06);
}

.wallet-title {
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1.3;
    vertical-align: middle;
    color: var(--table_text_color);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wallet-title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
}
.wallet-subtitle {
    display: none;
}
.value-cell {
    text-align: right !important;
    font-weight: 300 !important;
    color: var(--table_text_color);
}
.financial-table .positive {
    color: var(--color-positive);
}
.financial-table .negative {
    color: var(--color-negative);
}

.header-cell {
    cursor: pointer;
}

.box {
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0;
    box-sizing: border-box;
}

.search-pagination-row {
    justify-content: space-between !important;
    gap: 12px;
}

.search-pagination-row .search-section {
    flex: 1;
    max-width: 400px;
    justify-content: flex-start;
}

.search-pagination-row .pagination {
    flex: 0 1 auto;
}

.search-pagination-row .block_1 {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.box .block_1 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.box .block_1 label {
    color: var(--table_text_color);
    font-size: var(--font_size_table_body);
    font-weight: var(--font_weight);
}

.box select {
    background-color: var(--table_bg);
    color: var(--table_text_color);
    border: 1px solid var(--table_border);
    border-radius: 6px;
    padding: 6px 32px 6px 12px;
    font-size: var(--font_size_table_body);
    cursor: pointer;
    appearance: none;
    background-image: var(--select_arrow);
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: all 0.2s ease;
}

.box select:hover {
    border-color: var(--color-hover-primary);
}

.box select:focus {
    outline: none;
    border-color: var(--color-hover-primary);
    box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.2);
}

.financial-table th:first-child,
.financial-table td:first-child {
    padding-left: 12px;
}

.financial-table th:last-child,
.financial-table td:last-child {
    padding-right: 4px;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    width: 100%;
    height: 14.3px;
    overflow: hidden;
}

.sort-arrows {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.sort-arrows .arrow {
    font-family: 'Material Symbols Rounded';
    font-size: 16px;
    line-height: 1;
    display: block;
    color: var(--color-hover-primary);
    opacity: 0.2;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.sort-arrows .arrow:hover {
    opacity: 0.6;
}

.sort-arrows .arrow.up::before {
    content: 'expand_less';
}

.sort-arrows .arrow.dn::before {
    content: 'expand_more';
}

.sort-arrows .arrow.active {
    opacity: 1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sortable-filter-header .header-content {
    position: relative;
}

.search-section {
    width: 100%;
    display: flex;
    justify-content: center;
}

.search-box-container {
    margin-bottom: 15px;
    width: 100%;
}

.search-wrapper {
    position: relative;
    max-width: 800px;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-placeholder);
    font-size: 20px;
    pointer-events: none;
}

/* extends shared search input base from base.css */
.search-input {
    padding: 10px 12px 10px 40px;
    background-color: var(--table_bg);
    border-radius: var(--radius-lg);
    font-size: var(--fs-base);
}

.search-results-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px var(--color-shadow);
    z-index: 1000;
    max-height: 350px;
    overflow-y: auto;
    display: none !important;
    padding-bottom: 4px;
}

.search-results-dropdown.active {
    display: block !important;
}

.search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 15px;
    border-bottom: 1px solid var(--table_border);
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
}

.search-item:last-child {
    border-bottom: none;
}

.search-item:hover {
    background-color: var(--table_hover_bg);
}

.search-item-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.search-item-logo-fallback {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-icon-fallback-bg);
    color: var(--color-icon-fallback-text);
    font-size: var(--fs-xs);
    font-weight: bold;
}

.search-item .token-symbol {
    font-weight: 600;
    font-size: var(--fs-md);
    color: var(--table_text_color);
    flex-shrink: 0;
}

.search-item .token-name {
    font-size: var(--fs-base);
    color: var(--color-text-placeholder);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.search-item .token-address {
    font-size: var(--fs-sm);
    color: var(--color-text-placeholder);
    margin-left: auto;
    flex-shrink: 0;
}

.page-size-select {
    background: var(--background);
    color: var(--color-text-placeholder);
    border: 1px solid var(--table_border);
    border-radius: 4px;
    height: 26px;
    padding: 0 4px;
    box-sizing: border-box;
    font-size: var(--fs-sm);
    cursor: pointer;
    min-width: 42px;
}

.page-size-select option {
    background: var(--background);
    color: var(--color-text-placeholder);
}

.page-size-select:hover {
    border-color: var(--color-hover-primary);
    color: var(--color-hover-primary);
}

.page-size-select:focus,
.page-size-select:active {
    outline: none;
    border-color: var(--color-hover-primary);
    color: var(--color-hover-primary);
}

.bar-right-group {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.bar-right-group:last-child {
    justify-content: flex-end;
}

.transfers-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    flex-shrink: 0;
    margin-bottom: 6px;
}

/* ── Token page: chart + 50/50 split layout ──────────────────────────── */
.token-page-layout {
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 2 * var(--global-gap));
}

.token-page-layout .financial-table {
    table-layout: fixed;
}

.token-page-layout .lw-chart-container {
    margin-bottom: calc(var(--global-gap) * 2);
    margin-right: calc(320px + var(--global-gap) + 1px);
    flex: 2 1 0;
    min-height: 200px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--table_border);
}

.tables-split {
    display: flex;
    align-items: stretch;
    gap: var(--global-gap);
    flex: 3 1 0;
    min-height: 0;
    overflow: hidden;
}

.tables-split-left,
.tables-split-right {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#transfers-inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

#who-bs-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.table-scroll-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

/* ── Who Bought / Sold table ─────────────────────────────────────────── */
.who-bs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    flex-shrink: 0;
    margin-bottom: 6px;
}

.who-bs-tabs {
    display: flex;
    gap: 2px;
}

.who-bs-tab {
    height: 26px;
    width: 65px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--table_border);
    background: transparent;
    color: var(--table_text_color);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: border-color var(--duration-fast), color var(--duration-fast);
    box-sizing: border-box;
}

.who-bs-tab-sold {
    width: 52px;
}

.who-bs-tab:not(.who-bs-tab-sold) {
    color: var(--color-positive);
}
.who-bs-tab:not(.who-bs-tab-sold):hover,
.who-bs-tab:not(.who-bs-tab-sold).active {
    border-color: var(--color-positive);
    background: rgba(34, 197, 94, 0.08);
}

.who-bs-tab-sold {
    color: var(--color-negative);
}
.who-bs-tab-sold:hover,
.who-bs-tab-sold.active {
    border-color: var(--color-negative);
    background: rgba(239, 68, 68, 0.08);
}

.who-bs-periods {
    display: flex;
    gap: 2px;
}

.calendar-picker-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.calendar-toggle-btn {
    border: 1px solid var(--table_border);
    border-radius: 4px;
    padding: 3px;
    height: 26px;
    box-sizing: border-box;
}
.calendar-toggle-btn .material-symbols-rounded { font-size: 18px; }
.calendar-toggle-btn.active { color: var(--color-hover-primary); }
.calendar-picker-modal {
    display: none;
    padding: calc(var(--global-gap) * 2);
    background-color: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px var(--color-shadow);
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    z-index: 9999;
    width: 300px;
    max-width: calc(100vw - 40px);
    color: var(--table_text_color);
    flex-direction: column;
}
.calendar-picker-modal.active { display: flex; }
.calendar-picker-modal .calendar-container { margin-bottom: 10px; }

/* extends .btn-pill from base.css */
.who-bs-period {
    height: 26px;
    padding: 0 8px;
    font-size: var(--fs-sm);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
}
.who-bs-period.active {
    border-color: var(--color-hover-primary);
    color: var(--color-hover-primary);
    background: rgba(110, 142, 251, 0.1);
}

.who-bs-table-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

.who-bs-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--table_bg);
    table-layout: fixed;
}

.who-bs-table th {
    padding: 2px 4px;
    text-align: right;
    font-size: var(--fs-sm);
    font-weight: var(--font_weight);
    color: var(--color-text-placeholder);
    background: var(--background);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: none;
    white-space: nowrap;
    line-height: 1.3;
    position: sticky;
    top: 0;
    z-index: 10;
}

.who-bs-table th:first-child {
    text-align: left;
}

.who-bs-table td {
    padding: 4px 8px;
    text-align: right;
    font-size: var(--fs-md);
    color: var(--table_text_color);
    border-top: 1px solid var(--table_border);
    border-bottom: 1px solid var(--table_border);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.who-bs-table td:first-child {
    text-align: left;
}

.who-bs-col-name { width: 140px; }

.who-bs-name-cell {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
}
.who-bs-name-cell .wallet-title-row {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    max-width: calc(100% - 22px);
    overflow: hidden;
}
.who-bs-name-cell .wallet-title-row .wallet-title {
    min-width: 0;
}
.who-bs-name-cell .addr-short {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 22px);
}

.who-bs-table tbody tr { background: var(--table_row_odd_bg); }
.who-bs-table tr:hover { background: var(--table_hover_bg) !important; }
.who-bs-table .table-row { border-left: 2px solid transparent; transition: border-color var(--duration-fast); }
.who-bs-table .table-row:hover { border-left-color: var(--color-hover-primary); }

.net-usd-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.net-bar-container {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}

.net-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.net-bar.positive { background: var(--green_arrow_color); }
.net-bar.negative { background: var(--red_arrow_color); }

/* extends .btn-icon from base.css */
.expand-btn {
    border: 1px solid var(--table_border);
    border-radius: 4px;
    padding: 3px;
    margin-left: 2px;
}
.expand-btn:hover {
    border-color: var(--color-hover-primary);
}

.expand-btn .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
}

.expand-btn .collapse-icon { display: none; }

/* ── Full-screen modal overlay ─────────────────────────────────────── */
.table-expanded-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--background);
    max-height: none !important;
    padding: 16px 24px;
    display: flex !important;
    flex-direction: column !important;
}

.table-expanded-overlay .expand-btn .expand-icon { display: none; }
.table-expanded-overlay .expand-btn .collapse-icon { display: inline-flex; }

/* Full addresses in expanded mode */
.addr-full { display: none; }
.table-expanded-overlay .addr-short { display: none; }
.table-expanded-overlay .addr-full { display: block; }

/* ── Value cell bold ──────────────────────────────────────────────── */
.financial-table:not(.tokens-table) .value-cell {
    font-weight: 500;
}

/* ── Clickable address ───────────────────────────────────────────── */
.addr-cell .addr-short, .addr-cell .wallet-title { cursor: pointer; }
.addr-cell .addr-short:hover { color: var(--color-hover-primary); text-decoration: underline; }
.addr-cell .wallet-title:hover { color: var(--color-hover-primary); }

/* ── Chart icon active pulse ─────────────────────────────────────── */
.chart-icon-btn.active {
    color: var(--green_arrow_color);
    position: relative;
}
.chart-icon-btn.active::after {
    content: '';
    position: absolute;
    top: 0;
    right: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green_arrow_color);
    animation: chartPulse 1.5s ease-in-out infinite;
}
@keyframes chartPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}


/* ── Token cell tooltip ──────────────────────────────────────────── */
.token-cell .token-main-info { position: relative; }

/* ── Address hover mini-card ─────────────────────────────────────── */
.addr-hover-card {
    display: none;
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    background: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    font-size: var(--fs-xs);
    color: var(--table_text_color);
    white-space: nowrap;
    z-index: 100;
    box-shadow: 0 4px 12px var(--color-shadow);
    pointer-events: none;
}
.addr-cell:hover .addr-hover-card { display: block; }
.addr-hover-card .card-label { color: var(--color-text-placeholder); margin-right: 4px; }

/* ── Empty state enhanced ────────────────────────────────────────── */
.empty-state-lg {
    text-align: center !important;
    padding: 32px 16px !important;
    color: var(--color-text-placeholder);
    font-size: var(--fs-sm);
}
.empty-state-icon {
    font-size: 32px;
    opacity: 0.3;
    display: block;
    margin-bottom: 8px;
}

/* ── Transfer direction badge ──────────────────────────────────────── */
.dir-badge {
    display: inline-block;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 14px;
    vertical-align: middle;
    margin-right: 3px;
}
.dir-badge.dir-out { background: rgba(239, 68, 68, 0.12); color: var(--color-negative); }
.dir-badge.dir-in  { background: rgba(34, 197, 94, 0.12); color: var(--color-positive); }

/* ── Active filter indicator dot ──────────────────────────────────── */
.icon-for-filter { position: relative; }
.filter-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-hover-primary);
    position: absolute;
    top: -1px;
    right: -2px;
}

/* ── Row hover left accent (transfers) ───────────────────────────── */
.financial-table:not(.tokens-table) .table-row {
    border-left: 2px solid transparent;
    transition: border-color var(--duration-fast);
}
.financial-table:not(.tokens-table) .table-row:hover {
    border-left-color: var(--color-hover-primary);
}
.financial-table:not(.tokens-table) .table-row:has(.chart-icon-btn.active),
.who-bs-table .table-row:has(.chart-icon-btn.active) {
    border-left-color: var(--green_arrow_color) !important;
}

/* ── Transfer row fade-in animation ──────────────────────────────── */
@keyframes transferRowFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}
.financial-table:not(.tokens-table) tbody .table-row {
    animation: transferRowFadeIn 0.2s ease-out both;
}

/* ── Wallet title tag (known addresses) ──────────────────────────── */
.wallet-title {
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1.3;
    vertical-align: middle;
    color: var(--table_text_color);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Copy toast ──────────────────────────────────────────────────── */
.copy-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--table_text_color);
    color: var(--background);
    padding: 6px 16px;
    border-radius: 6px;
    font-size: var(--fs-sm);
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}
.copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── Address label icons ─────────────────────────────────────────── */
.label-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-right: 2px;
    vertical-align: middle;
    flex-shrink: 0;
}
.label-icon .material-symbols-rounded { font-size: 11px; }
.label-icon { background: rgba(156, 163, 175, 0.12); color: var(--color-text-placeholder); }
.label-icon.label-exchange, .label-icon.label-cex { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.label-icon.label-dex, .label-icon.label-router, .label-icon.label-swap { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.label-icon.label-bridge { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.label-icon.label-contract { background: rgba(249, 115, 22, 0.12); color: #f97316; }



/* ── Filter modal backdrop ───────────────────────────────────────── */
.filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 8;
}
.filter-backdrop.active { display: block; }

/* ── Time group separator ────────────────────────────────────────── */
.time-group-sep td {
    padding: 3px 12px !important;
    font-size: 9px;
    color: var(--color-text-placeholder);
    opacity: 0.6;
    background: var(--background) !important;
    border: none !important;
    text-align: left !important;
    letter-spacing: 0.3px;
    font-weight: 500;
}

/* ── Tokens page ─────────────────────────────────────────────────────── */
.tokens-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    flex-shrink: 0;
    padding: 0 4px;
    gap: 8px;
    margin-top: calc(var(--global-gap) * 2);
    margin-bottom: calc(var(--global-gap) * 2);
}

.chain-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}

.chain-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -2px;
    flex-shrink: 0;
}

.chain-tab {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text-placeholder);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none;
}

.chain-tab.disabled {
    cursor: default;
    opacity: 0.5;
}

.chain-tab.active {
    background: var(--table_border);
    color: var(--table_text_color);
    font-weight: 500;
}

.chain-soon {
    font-size: 9px;
    color: var(--color-text-placeholder);
    vertical-align: super;
    margin-left: 2px;
}

.tokens-bar .page-size-select {
    flex-shrink: 0;
}

.tokens-bar .pagination {
    flex-shrink: 0;
}

/* ── Tokens search bar ───────────────────────────────────────────────── */
.tokens-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 4px;
    margin-bottom: var(--global-gap);
}

.tokens-search-wrapper {
    position: relative;
    width: 280px;
    flex-shrink: 0;
}

.tokens-search-icon {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--color-text-placeholder);
    pointer-events: none;
}

.tokens-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-placeholder);
    cursor: pointer;
    display: none;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.tokens-search-clear:hover {
    color: var(--table_text_color);
}

.tokens-search-wrapper.has-value .tokens-search-clear {
    display: block;
}

.tokens-search-input {
    width: 100%;
    padding: 5px 24px 5px 28px;
    background: var(--table_bg);
    border: 1px solid var(--table_border);
    border-radius: var(--radius-md);
    color: var(--table_text_color);
    font-size: var(--fs-sm);
    font-family: inherit;
    transition: all var(--duration-fast);
}

.tokens-search-input:focus {
    outline: none;
    border-color: var(--color-hover-primary);
    box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.2);
}

.tokens-search-input::placeholder {
    color: var(--color-text-placeholder);
}

.tokens-search-hint {
    font-size: 9px;
    color: var(--color-text-placeholder);
    opacity: 0.5;
    margin-left: -4px;
    white-space: nowrap;
}

/* ── Filter chips ────────────────────────────────────────────────────── */
.tokens-filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: var(--color-accent-10);
    border: 1px solid var(--color-accent-30);
    border-radius: 12px;
    font-size: var(--fs-xs);
    color: var(--color-accent);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast);
    white-space: nowrap;
}

.filter-chip:hover {
    background: var(--color-accent-20);
    border-color: var(--color-accent);
}

.filter-chip .material-symbols-rounded {
    font-size: 12px;
}

.filter-chip-info {
    cursor: default;
    border-color: var(--color-hover-primary);
    background: rgba(110, 142, 251, 0.08);
    color: var(--color-hover-primary);
    opacity: 0.8;
}

.filter-chip-info:hover {
    background: rgba(110, 142, 251, 0.08);
    border-color: var(--color-hover-primary);
}

.tokens-total-count {
    font-size: var(--fs-xs);
    color: var(--color-text-placeholder);
    margin-left: auto;
    white-space: nowrap;
}

/* ── Tokens table columns ────────────────────────────────────────────── */
.tokens-table .col-rank { width: 40px; min-width: 40px; }
.tokens-table .col-token-name { width: auto; min-width: 180px; }
.tokens-table .col-sparkline { width: 80px; min-width: 80px; }

.tokens-table td {
    padding: 4px 8px;
}

.token-row { cursor: pointer; border-left: 2px solid transparent; transition: border-color var(--duration-fast); }
.token-row:hover { border-left-color: var(--color-hover-primary); }

.rank-cell {
    text-align: center !important;
    font-size: var(--fs-sm);
    color: var(--color-text-placeholder);
    font-weight: 500;
}

.token-name-cell { text-align: left; padding: 5px 8px !important; }

.tokens-table .token-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.tokens-table .token-symbol {
    font-size: var(--fs-md);
    font-weight: 400;
    color: var(--table_text_color);
}

.tokens-table .token-full-name {
    font-size: var(--fs-xs);
    color: var(--color-text-placeholder);
    opacity: 0.6;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-copy-addr.copy-flash {
    opacity: 1 !important;
    outline: 1.5px dashed rgba(255, 193, 7, 0.7);
    outline-offset: 2px;
    border-radius: 3px;
}

.btn-copy-addr {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--color-text-placeholder);
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
}
.btn-copy-addr .material-symbols-rounded {
    font-size: 14px;
}
.token-row:hover .btn-copy-addr {
    opacity: 0.6;
}
.btn-copy-addr:hover {
    opacity: 1 !important;
    color: var(--table_text_color);
}

.tokens-table .token-icon-small {
    width: 26px;
    height: 26px;
}

.tokens-table .token-icon-placeholder {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--table_border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--color-text-placeholder);
    flex-shrink: 0;
}

.sector-cell {
    text-align: left;
    font-size: var(--fs-xs);
    color: var(--color-text-placeholder);
}

/* Sector pill badges */
.sector-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: var(--fs-xs);
    line-height: 1.6;
    white-space: nowrap;
    background: rgba(110, 142, 251, 0.08);
    color: var(--color-text-placeholder);
}
.sector-pill.s-defi { background: rgba(110, 142, 251, 0.12); color: #6e8efb; }
.sector-pill.s-meme { background: rgba(251, 191, 36, 0.12); color: #d4a017; }
.sector-pill.s-layer1, .sector-pill.s-layer-1 { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.sector-pill.s-layer2, .sector-pill.s-layer-2 { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.sector-pill.s-gamefi, .sector-pill.s-gaming { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
.sector-pill.s-ai { background: rgba(6, 182, 212, 0.12); color: #06b6d4; }
.sector-pill.s-nft { background: rgba(244, 114, 182, 0.12); color: #f472b6; }
.sector-pill.s-stablecoin, .sector-pill.s-stablecoins { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.sector-pill.s-dex { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.sector-pill.s-lending { background: rgba(20, 184, 166, 0.12); color: #14b8a6; }
.sector-pill.s-oracle { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.sector-pill.s-infrastructure { background: rgba(100, 116, 139, 0.12); color: #64748b; }
.sector-pill.s-rwa { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }

/* MCap sub-text (circ supply) */
.mcap-cell > div:first-child { line-height: 1.2; }
.mcap-supply {
    font-size: 9px;
    color: var(--color-text-placeholder);
    opacity: 0.45;
    line-height: 1.1;
    transition: opacity var(--duration-fast);
}
.token-row:hover .mcap-supply { opacity: 0.8; }

/* ── Favorites star ─────────────────────────────────────────────────── */
.col-fav { width: 28px; min-width: 28px; max-width: 28px; }
.fav-star {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--table_border);
    font-size: 16px;
    line-height: 1;
    transition: color var(--duration-fast);
}
.fav-star:hover { color: #f59e0b; }
.fav-star.active { color: #f59e0b; }
.fav-star .material-symbols-rounded { font-size: 16px; font-variation-settings: 'FILL' 0; }
.fav-star.active .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

/* ── Summary stats bar ─────────────────────────────────────────────── */
.tokens-stats-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 8px;
    margin-bottom: var(--global-gap);
    font-size: var(--fs-xs);
    color: var(--color-text-placeholder);
    border-bottom: 1px solid var(--table_border);
    flex-wrap: nowrap;
}
.tokens-stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tokens-stats-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.tokens-stat-value { color: var(--table_text_color); font-weight: 500; font-variant-numeric: tabular-nums; }
.tokens-stat-gainers { color: var(--color-positive); }
.tokens-stat-losers { color: var(--color-negative); }
.tokens-stats-bar .stat-divider {
    width: 1px;
    height: 12px;
    background: var(--table_border);
    flex-shrink: 0;
}

/* ── Sort column highlight ─────────────────────────────────────────── */
.tokens-table[data-sort="rank"] td:nth-child(2),
.tokens-table[data-sort="symbol"] td:nth-child(3),
.tokens-table[data-sort="sector"] td:nth-child(4),
.tokens-table[data-sort="price"] td:nth-child(5),
.tokens-table[data-sort="chg_24h"] td:nth-child(6),
.tokens-table[data-sort="chg_7d"] td:nth-child(7),
.tokens-table[data-sort="volume"] td:nth-child(8),
.tokens-table[data-sort="mcap"] td:nth-child(10) {
    background: rgba(110, 142, 251, 0.02);
}


/* ── Rank color tiers ──────────────────────────────────────────────── */
.rank-cell.rank-gold {
    color: #f59e0b;
    font-weight: 600;
}
.rank-cell.rank-silver {
    color: var(--color-hover-primary);
    font-weight: 500;
}

/* ── Detail row (expandable) ───────────────────────────────────────── */
.token-detail-row { display: none; }
.token-detail-row.open { display: table-row !important; }
.token-detail-row td {
    padding: 8px 12px !important;
    border-left: 2px solid var(--color-hover-primary);
    background: rgba(110, 142, 251, 0.03) !important;
}
.token-detail-content {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: var(--fs-sm);
}
.token-detail-content .detail-label {
    color: var(--color-text-placeholder);
    font-size: var(--fs-xs);
}
.token-detail-content .detail-value {
    color: var(--table_text_color);
    font-family: monospace;
    font-size: var(--fs-xs);
}
.token-detail-content .detail-link {
    color: var(--color-hover-primary);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 500;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.token-detail-content .detail-link:hover { text-decoration: underline; }

/* ── Compact / comfortable mode ────────────────────────────────────── */
.tokens-table-wrap.compact-mode .tokens-table td { padding: 2px 6px; }
.tokens-table-wrap.compact-mode .token-name-cell { padding: 2px 6px !important; }
.tokens-table-wrap.compact-mode .tokens-table .token-icon-small,
.tokens-table-wrap.compact-mode .tokens-table .token-icon-placeholder { width: 20px; height: 20px; }
.tokens-table-wrap.compact-mode .tokens-table .token-info { gap: 5px; }

.compact-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: none;
    border: 1px solid var(--table_border);
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    cursor: pointer;
    color: var(--color-text-placeholder);
    font-size: var(--fs-xs);
    transition: all var(--duration-fast);
}
.compact-toggle:hover { border-color: var(--color-hover-primary); color: var(--color-hover-primary); }
.compact-toggle .material-symbols-rounded { font-size: 14px; }

/* ── Gainers / Losers quick tabs ───────────────────────────────────── */
.quick-filter-tabs {
    display: flex;
    gap: 4px;
    margin-left: 8px;
}
.quick-filter-tab {
    padding: 2px 8px;
    border: 1px solid var(--table_border);
    border-radius: 12px;
    font-size: var(--fs-xs);
    background: none;
    cursor: pointer;
    transition: all var(--duration-fast);
    white-space: nowrap;
}
.quick-filter-tab:hover { border-color: var(--color-hover-primary); }
.quick-filter-tab.active { border-color: var(--color-hover-primary); color: var(--color-hover-primary); background: rgba(110, 142, 251, 0.08); }
.quick-filter-tab.tab-gainers { color: var(--color-positive); }
.quick-filter-tab.tab-gainers:hover, .quick-filter-tab.tab-gainers.active { border-color: var(--color-positive); background: rgba(34, 197, 94, 0.08); }
.quick-filter-tab.tab-losers { color: var(--color-negative); }
.quick-filter-tab.tab-losers:hover, .quick-filter-tab.tab-losers.active { border-color: var(--color-negative); background: rgba(239, 68, 68, 0.08); }

/* ── Row enter animation ───────────────────────────────────────────── */
@keyframes tokenRowFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.tokens-table tbody .token-row {
    animation: tokenRowFadeIn 0.25s ease-out both;
}
.tokens-table tbody .token-row:nth-child(2) { animation-delay: 0.02s; }
.tokens-table tbody .token-row:nth-child(3) { animation-delay: 0.04s; }
.tokens-table tbody .token-row:nth-child(4) { animation-delay: 0.06s; }
.tokens-table tbody .token-row:nth-child(5) { animation-delay: 0.08s; }
.tokens-table tbody .token-row:nth-child(6) { animation-delay: 0.10s; }
.tokens-table tbody .token-row:nth-child(7) { animation-delay: 0.12s; }
.tokens-table tbody .token-row:nth-child(8) { animation-delay: 0.14s; }
.tokens-table tbody .token-row:nth-child(9) { animation-delay: 0.16s; }
.tokens-table tbody .token-row:nth-child(10) { animation-delay: 0.18s; }

/* ── Volume mini-bar ───────────────────────────────────────────────── */
.vol-cell {
    position: relative;
}
.vol-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--color-hover-primary);
    opacity: 0.15;
    border-radius: 0 2px 2px 0;
    transition: width 0.3s;
}

/* ── No-results message ─────────────────────────────────────────────── */
.tokens-no-results {
    display: none;
    text-align: center;
    padding: 24px 16px;
    color: var(--color-text-placeholder);
    font-size: var(--fs-sm);
    opacity: 0.7;
}

/* ── Sparkline header icon ─────────────────────────────────────────── */
.sparkline-header-icon {
    font-size: 16px;
    color: var(--color-text-placeholder);
    opacity: 0.6;
}

/* ── Sparkline ───────────────────────────────────────────────────────── */
.sparkline-cell {
    padding: 4px !important;
    text-align: center !important;
}

.sparkline-svg {
    width: 70px;
    height: 24px;
    display: block;
    margin: 0 auto;
}

/* ── Sort links ──────────────────────────────────────────────────────── */
.sort-link {
    color: var(--color-text-placeholder);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.sort-link:hover { color: var(--table_text_color); }
.sort-link.active { color: var(--table_text_color); }


/* Sector filter modal */
.sector-filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sector-filter-btn {
    font-size: var(--fs-xs);
    padding: 4px 10px;
    white-space: nowrap;
}

/* ── Loading skeleton ────────────────────────────────────────────────── */
.skeleton-container {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 4px;
}

/* Skeleton shows during HTMX swap via JS (htmx:beforeRequest / afterSwap) */
.skeleton-container.active {
    display: flex;
}

.skeleton-container.active + .table-scroll-area {
    display: none;
}

.skeleton-row {
    display: flex;
    gap: 8px;
    align-items: center;
    height: 32px;
    padding: 0 4px;
}

.skeleton-cell {
    border-radius: var(--radius-sm);
    background: var(--table_border);
    animation: skeleton-pulse 1.2s ease-in-out infinite;
    height: 14px;
}

.skeleton-rank { width: 28px; flex-shrink: 0; }
.skeleton-token { width: 160px; flex-shrink: 0; }
.skeleton-sector { width: 80px; flex-shrink: 0; }
.skeleton-value { flex: 1; }
.skeleton-sparkline { width: 70px; flex-shrink: 0; height: 20px; }

@keyframes skeleton-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* ── Row striping (enhanced dark-mode contrast) ──────────────────────── */
body.dark-theme .financial-table:not(.tokens-table) tbody tr,
body.dark-theme .who-bs-table tbody tr {
    background-color: hsl(220, 20%, 14%);
}
body.dark-theme .tokens-table tbody tr:nth-child(odd) {
    background-color: hsl(220, 20%, 14%);
}
body.dark-theme .tokens-table tbody tr:nth-child(even) {
    background-color: hsl(220, 20%, 8%);
}

/* ── Active sort column tint (transfers) ─────────────────────────────── */
.financial-table:not(.tokens-table)[data-sort="time"]         td:nth-child(3),
.financial-table:not(.tokens-table)[data-sort="from_address"] td:nth-child(4),
.financial-table:not(.tokens-table)[data-sort="to_address"]   td:nth-child(6),
.financial-table:not(.tokens-table)[data-sort="value_adj"]    td:nth-child(7),
.financial-table:not(.tokens-table)[data-sort="value_usd"]    td:nth-child(9) {
    background: rgba(110, 142, 251, 0.03);
}

/* ── From → To arrow column ──────────────────────────────────────────── */
.col-arrow {
    width: 14px;
    min-width: 14px;
    padding: 0 !important;
}
.arrow-cell {
    text-align: center !important;
    padding: 0 !important;
    color: var(--color-text-placeholder);
    font-size: 9px;
    opacity: 0.35;
    user-select: none;
}