/* Trade Cart — extracted from styles.css 2026-05-17 (#19c). */
/* Loaded by index.html AFTER styles-trade.css so cascade order is preserved. */

/* ============ TRADE CART ============ */

.cart-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(40, 35, 30, 0.5);
    z-index: 10000;
    justify-content: flex-end;
    font-family: 'IBM Plex Mono', monospace;
}

.cart-panel {
    background: #faf6f0;
    border-left: 1px solid #e8e0d4;
    width: 420px;
    max-width: 96vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    animation: cartSlideIn 0.2s ease-out;
}

@keyframes cartSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #e8e0d4;
    background: transparent;
}

/* ---- Cart Tabs ---- */

.cart-tabs {
    display: inline-flex;
    gap: 6px;
}

.cart-tab {
    padding: 5px 14px;
    background: #f5ebe0;
    border: 1px solid #e8e0d4;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #7a6f66;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cart-tab:hover {
    background: #ece2d2;
    color: #5c5048;
    border-color: #d8cfc3;
}

.cart-tab.active {
    background: #5c5048;
    color: #f5ebe0;
    border-color: #5c5048;
}

.cart-tab.active .cart-tab-badge {
    background: #f5ebe0;
    color: #5c5048;
}

.cart-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: #5c5048;
    color: #f5ebe0;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease;
}

.cart-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #5c5048;
    text-transform: uppercase;
}

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

.cart-clear-all {
    background: none;
    border: 1px solid #e8e0d4;
    border-radius: 6px;
    font-size: 9px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 500;
    color: #a89984;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.15s;
}
.cart-clear-all:hover {
    color: #e53935;
    border-color: #e53935;
    background: rgba(229,57,53,0.06);
}

.cart-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #a89984;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}
.cart-close:hover { color: #5c5048; }

.cart-body {
    padding: 12px 14px;
    overflow-y: auto;
    flex: 1;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: #a89984;
    font-size: 12px;
    line-height: 1.6;
}

/* ---- Cart Items ---- */

/* Cart payout filter bar */
/* ── Cart filter bar (modern) ── */
.cart-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #faf7f2;
    border-radius: 10px;
    border: 1px solid #ebe4d8;
}

/* Mode pills ≥ / ≤ */
.cf-mode-pills {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d5c9b8;
    flex-shrink: 0;
}
.cf-pill {
    font-size: 13px;
    padding: 4px 10px;
    border: none;
    background: #fff;
    color: #a89984;
    cursor: pointer;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    transition: all .15s;
    line-height: 1;
}
.cf-pill:first-child { border-right: 1px solid #d5c9b8; }
.cf-pill.active {
    background: #5c5048;
    color: #fff;
}
.cf-pill:hover:not(.active) { background: #f0ece5; }

/* Slider + input group */
.cf-slider-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.cf-slider {
    flex: 1;
    min-width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: #e0d8cc;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.cf-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #5c5048;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: grab;
    transition: transform .1s;
}
.cf-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.cf-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.cf-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #5c5048;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: grab;
}

.cf-value-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #d5c9b8;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color .15s;
}
.cf-value-input:focus-within { border-color: #5c5048; }
.cf-input {
    width: 36px;
    font-size: 13px;
    padding: 4px 2px 4px 8px;
    border: none;
    outline: none;
    background: transparent;
    color: #5c5048;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    text-align: right;
}
.cf-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cf-unit {
    font-size: 12px;
    color: #a89984;
    padding: 0 6px 0 1px;
    font-weight: 500;
}

/* Count badge */
.cf-count {
    font-size: 12px;
    color: #a89984;
    font-weight: 600;
    white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
    background: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid #ebe4d8;
    flex-shrink: 0;
    transition: all .2s;
}
.cf-count.has-remove {
    color: #e67e80;
    border-color: #f0c4c4;
    background: #fdf5f5;
}
.cf-count-sep { opacity: .4; margin: 0 1px; }

/* Apply button */
.cf-apply {
    font-size: 11px;
    padding: 5px 12px;
    border: none;
    border-radius: 8px;
    background: #e67e80;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    font-family: 'IBM Plex Mono', monospace;
    transition: all .15s;
    flex-shrink: 0;
}
.cf-apply:hover { background: #d96c6f; transform: translateY(-1px); }
.cf-apply:active { transform: translateY(0); }
.cf-apply:disabled {
    opacity: .3;
    cursor: not-allowed;
    transform: none;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cart-item {
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 8px;
    padding: 8px 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cart-item:hover {
    border-color: #e8e0d4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.cart-item-flash {
    animation: cartFlash 0.6s ease;
}
@keyframes cartFlash {
    0%, 100% { background: #fff; }
    30% { background: #fffbe6; border-color: #f5c518; }
}

.cart-item-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}

.cart-item-title {
    font-size: 10px;
    font-weight: 500;
    color: #3c3836;
    line-height: 1.3;
    flex: 1;
}
.cart-item-link {
    text-decoration: none;
    color: #3c3836;
    cursor: pointer;
    transition: color 0.15s;
}
.cart-item-link::after {
    content: ' ↗';
    font-size: 8px;
    opacity: 0.4;
    vertical-align: super;
}
.cart-item-link:hover {
    color: #5c5048;
    text-decoration: underline;
}
.cart-item-link:hover::after {
    opacity: 0.7;
}

.cart-trader-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 9px;
    color: #5c5048;
    background: #faf6f0;
    padding: 1px 6px;
    border-radius: 3px;
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.cart-trader-badge:hover {
    background: #e8e0d4;
    color: #3c3836;
}

.cart-item-remove {
    background: none;
    border: none;
    color: #b09990;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.cart-item-remove:hover { color: #e53935; }

.cart-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}

.cart-item-outcome {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cart-item-outcome.buy {
    background: rgba(167,192,128,0.25);
    color: #6a9a3a;
}
.cart-item-outcome.sell {
    background: rgba(230,126,128,0.2);
    color: #c25555;
}

.cart-item-price {
    font-size: 10px;
    color: #8a7e74;
    font-family: 'IBM Plex Mono', monospace;
}

.cart-item-tag {
    font-size: 9px;
    color: #a89984;
    background: #faf6f0;
    padding: 1px 5px;
    border-radius: 3px;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-input-group {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #faf6f0;
    border: 1px solid #e8e0d4;
    border-radius: 5px;
    padding: 2px 6px;
}

.cart-input-group label {
    font-size: 9px;
    color: #8a7e74;
    font-weight: 600;
}

.cart-amount-input,
.cart-shares-input {
    width: 46px;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #5c5048;
    text-align: right;
    -moz-appearance: textfield;
}
.cart-shares-warning {
    font-size: 9px;
    color: #e67e80;
    font-weight: 600;
    white-space: nowrap;
    margin-left: 2px;
}
.cart-amount-input::-webkit-inner-spin-button,
.cart-shares-input::-webkit-inner-spin-button,
.cart-amount-input::-webkit-outer-spin-button,
.cart-shares-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cart-item-mult {
    margin-left: auto;
}

.cart-mult-value {
    font-size: 12px;
    font-weight: 700;
    color: #a7c080;
    font-family: 'IBM Plex Mono', monospace;
}

/* Trader click dialog */
.trader-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    animation: tdFadeIn 0.15s ease;
}
@keyframes tdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.trader-dialog {
    background: #faf6f0;
    border-radius: 14px;
    min-width: 320px;
    max-width: 360px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 16px 56px rgba(0,0,0,0.28);
    position: relative;
    font-family: 'IBM Plex Mono', monospace;
}
.trader-dialog-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 16px;
    color: #a89984;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    border-radius: 4px;
    z-index: 1;
    transition: color 0.15s, background 0.15s;
}
.trader-dialog-close:hover {
    color: #3c3836;
    background: rgba(0,0,0,0.06);
}

/* Header */
.td-header-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e8e0d4;
}
.td-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f0ebe4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c6f64;
    flex-shrink: 0;
}
.td-name {
    font-size: 15px;
    font-weight: 700;
    color: #3c3836;
    text-decoration: none;
    transition: color 0.15s;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}
.td-name:hover {
    color: #5c5048;
    text-decoration: underline;
}
.td-bets-count {
    font-size: 11px;
    color: #a89984;
    margin-top: 2px;
}
.td-address {
    font-size: 10px;
    color: #a89984;
    font-family: 'IBM Plex Mono', monospace;
    margin-top: 2px;
    cursor: pointer;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}
.td-address:hover { color: #5c5048; }

/* PnL section */
.td-pnl-section {
    padding: 14px 20px;
    border-bottom: 1px solid #e8e0d4;
    min-height: 40px;
}
.td-loading {
    font-size: 11px;
    color: #a89984;
    font-style: italic;
}
.td-no-data {
    font-size: 11px;
    color: #a89984;
}
.td-source-toggle {
    display: flex;
    gap: 2px;
    background: #e8e0d4;
    border-radius: 6px;
    padding: 2px;
    margin-bottom: 10px;
}
.td-src-btn {
    flex: 1;
    padding: 4px 0;
    border: none;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    background: transparent;
    color: #7c6f64;
    transition: background 0.15s, color 0.15s;
}
.td-src-btn:hover:not(.active) { background: #f0ebe4; }
.td-src-btn.active {
    background: #5c5048;
    color: #f5ebe0;
}
.td-period-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}
.td-period-btn {
    flex: 1;
    padding: 5px 0;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    background: #f0ebe4;
    color: #7c6f64;
    transition: background 0.15s, color 0.15s;
}
.td-period-btn:hover:not(.active) { background: #e8e0d4; }
.td-period-btn.active {
    background: #5c5048;
    color: #f5ebe0;
}
.td-pnl-value {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 2px;
    color: #3c3836;
}
.td-pnl-value.positive { color: #4caf50; }
.td-pnl-value.negative { color: #e53935; }
.td-pnl-label-text {
    text-align: center;
    font-size: 10px;
    color: #a89984;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.td-chart-wrap {
    width: 100%;
    height: 56px;
    margin-bottom: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f0e8;
    position: relative;
}
.td-chart-svg {
    display: block;
    width: 100%;
    height: 100%;
}
.td-chart-hover-area {
    cursor: crosshair;
}
.td-chart-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #a89984;
    font-style: italic;
}
.td-chart-empty {
    width: 100%;
    height: 100%;
}
.td-info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-top: 1px solid #f0ebe4;
    font-size: 12px;
}
.td-info-label { color: #7c6f64; }
.td-info-value { color: #3c3836; font-weight: 600; }

/* Tags section — padding:0 so the toggle button's own 20px-horizontal
   padding aligns the label with Open Positions above. Earlier 14px 20px
   double-stacked the padding, shifting "Bets by category" 20px right. */
.td-tags-section {
    padding: 0;
    border-bottom: 1px solid #e8e0d4;
}
/* The collapsible list inside still needs its own padding when expanded. */
.td-tags-list {
    padding: 0 20px 14px;
}

/* Positions section */
.td-positions-section {
    padding: 0;
    border-bottom: 1px solid #e8e0d4;
}
.td-positions-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    transition: background 0.15s;
}
.td-positions-toggle:hover {
    background: #f0ebe4;
}
.td-pos-arrow {
    color: #a89984;
    font-size: 12px;
    transition: transform 0.2s;
}
.td-pos-body {
    padding: 0 20px 14px;
    animation: tdPosExpand 0.2s ease-out;
}
@keyframes tdPosExpand {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}
.td-pos-summary {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.td-pos-stat {
    flex: 1;
    background: #f0ebe4;
    border-radius: 8px;
    padding: 8px 10px;
    text-align: center;
}
.td-pos-stat-label {
    display: block;
    font-size: 9px;
    color: #a89984;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-weight: 600;
}
.td-pos-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #3c3836;
}
.td-pos-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.td-pos-item {
    background: #f0ebe4;
    border-radius: 6px;
    padding: 8px 10px;
}
.td-pos-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}
.td-pos-title {
    font-size: 11px;
    color: #3c3836;
    font-weight: 500;
    line-height: 1.3;
    flex: 1;
}
.td-pos-pnl {
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.td-pos-pnl.positive { color: #4caf50; }
.td-pos-pnl.negative { color: #e53935; }
.td-pos-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}
.td-pos-outcome {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.td-pos-outcome.buy {
    background: rgba(76,175,80,0.12);
    color: #4caf50;
}
.td-pos-outcome.sell {
    background: rgba(229,57,53,0.10);
    color: #e53935;
}
.td-pos-size {
    color: #7c6f64;
}
.td-pos-value {
    margin-left: auto;
    color: #3c3836;
    font-weight: 600;
}
.td-pos-more {
    text-align: center;
    font-size: 10px;
    color: #a89984;
    padding: 4px 0 0;
}
.td-section-label {
    font-size: 10px;
    color: #a89984;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}
.td-tags-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.td-tag-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.td-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.td-tag-name {
    flex: 1;
    color: #3c3836;
}
.td-tag-count {
    color: #7c6f64;
    font-weight: 600;
    font-size: 11px;
}

/* Action button */
.td-action-btn {
    display: block;
    width: calc(100% - 40px);
    margin: 14px 20px 18px;
    padding: 11px 14px;
    border: none;
    border-radius: 8px;
    background: #5c5048;
    color: #f5ebe0;
    font-size: 12px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, transform 0.1s;
}
.td-action-btn:hover { background: #7a6e64; }
.td-action-btn:active { transform: scale(0.97); }
.td-action-btn.td-connect { background: #5c5048; color: #fff; }
.td-action-btn.td-connect:hover { background: #4a3f38; }

/* Search-this-trader button — uses the same width/spacing as td-action-btn
   but a distinct accent so it doesn't compete with the primary action. */
.td-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% - 40px);
    margin: 0 20px 4px;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: #7fbbb3;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: background 0.15s;
}
.td-search-btn:hover { background: #9ec7c1; }

/* ---- Cart Footer ---- */

.cart-footer {
    border-top: 1px solid #e8e0d4;
    padding: 10px 14px;
    background: transparent;
}

/* ---- Summary Bar ---- */

.cart-summary-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
}
.cart-summary-cost,
.cart-summary-win {
    display: flex;
    align-items: baseline;
    gap: 5px;
}
/* Insufficient-balance signal: strike through the Cost number + mute its
 * color, instead of repurposing the Execute button as a red banner. The
 * Deposit/Transfer buttons next to Execute already prompt the user to top
 * up — this is the visual hint connecting cost to balance. */
.cart-summary-cost-insufficient .cart-summary-val {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    color: #b58a8a;
}
.cart-summary-label {
    font-size: 9px;
    color: #a89984;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.cart-summary-val {
    font-size: 14px;
    font-weight: 700;
    color: #3c3836;
    font-family: 'IBM Plex Mono', monospace;
}
.cart-summary-green {
    color: #7a9a50;
}
.cart-summary-payout {
    font-size: 10px;
    color: #8a7e74;
    font-family: 'IBM Plex Mono', monospace;
}
.cart-summary-arrow {
    color: #c4b5a5;
    font-size: 12px;
    flex-shrink: 0;
}

/* ---- Tag Chips ---- */
.cart-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
}
.cart-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    color: #7c6f64;
    background: #f5f0e8;
    padding: 2px 7px;
    border-radius: 10px;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: capitalize;
}
.cart-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---- Execute Button ---- */

.cart-execute-btn {
    width: 100%;
    background: #5c5048;
    color: #f5ebe0;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.15s;
}
.cart-execute-btn:hover { background: #7a6e64; }
.cart-execute-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cart-execute-btn.cart-btn-insufficient {
    background: #e67e80;
    color: #2d353b;
    opacity: 0.9;
    font-size: 11px;
}

/* Cart — Deposit / Transfer buttons */
.cart-fund-actions {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.cart-deposit-btn,
.cart-transfer-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.cart-deposit-btn {
    background: #a7c080;
    color: #2d353b;
}
.cart-deposit-btn:hover {
    filter: brightness(1.08);
}

.cart-transfer-btn {
    background: #d4a46a;
    color: #2d353b;
    border: none;
}
.cart-transfer-btn:hover {
    filter: brightness(1.08);
}

/* ---- Budget Bar ---- */
.cart-budget-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 8px;
    padding: 7px 12px;
    margin: 0 0 8px 0;
}
.cart-budget-label {
    font-size: 9px;
    color: #a89984;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    white-space: nowrap;
}
.cart-budget-dollar {
    font-size: 13px;
    font-weight: 700;
    color: #3c3836;
    font-family: 'IBM Plex Mono', monospace;
}
.cart-budget-input {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid #e8e0d4;
    border-radius: 6px;
    background: #faf6f0;
    font-size: 13px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    color: #3c3836;
    outline: none;
}
.cart-budget-input:focus {
    border-color: #a7c080;
    box-shadow: 0 0 0 2px rgba(167,192,128,0.15);
}
.cart-budget-input::placeholder {
    color: #c4b5a5;
    font-weight: 400;
}
.cart-budget-apply {
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    background: #5c5048;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background 0.15s;
}
.cart-budget-apply:hover {
    background: #3c3836;
}

/* ---- Balance Row ---- */
.cart-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 4px;
    margin-bottom: 6px;
    font-size: 11px;
    font-family: 'IBM Plex Mono', monospace;
    color: #7c6f64;
    border-top: 1px solid #e8e0d4;
}
.cart-balance-label {
    font-weight: 500;
}
.cart-balance-value {
    font-weight: 700;
    color: #3c3836;
}

/* ---- Crowd Index ---- */

.cidx-container {
    padding: 12px;
}
.cidx-header {
    font-size: 14px;
    font-weight: 700;
    color: #3c3836;
    margin-bottom: 6px;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-desc {
    font-size: 10px;
    color: #8b7e74;
    line-height: 1.5;
    margin-bottom: 14px;
}
.cidx-warning {
    background: #faf6f0;
    border: 1px solid #e8e0d4;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 10px;
    color: #5c5048;
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-notice {
    background: #faf6f0;
    border: 1px solid #e8e0d4;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 10px;
    color: #5c5048;
    line-height: 1.5;
    margin-bottom: 10px;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-notice .cidx-tag {
    display: inline;
    background: #e8e0d4;
    color: #3c3836;
}
.cidx-params {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}
.cidx-exclude-tags {
    grid-column: 1 / -1;
    margin-bottom: 10px;
}
.bond-tag-search {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 8px;
    margin-bottom: 4px;
    border: 1px solid #e8e0d4;
    border-radius: 3px;
    background: #faf6f0;
    font-size: 9px;
    font-family: inherit;
    color: #5c5048;
    outline: none;
}
.bond-tag-search::placeholder {
    color: #b0a090;
}
.cidx-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    max-height: 150px;
    overflow-y: auto;
}
.bond-tag-pill {
    flex: 0 0 auto;
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    background: #faf6f0;
    border: 1px solid #e8e0d4;
    color: #5c5048;
    transition: all 0.15s;
    user-select: none;
}
.bond-tag-pill:hover {
    border-color: #b43c3c;
    color: #b43c3c;
}
.bond-tag-pill.excluded {
    background: rgba(180, 60, 60, 0.15);
    border-color: #b43c3c;
    color: #b43c3c;
    text-decoration: line-through;
}
.cidx-param input[type="range"] {
    width: 100%;
    height: 4px;
    accent-color: #d65d0e;
    cursor: pointer;
}
.cidx-param label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: #7c6f64;
    margin-bottom: 3px;
    font-family: 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cidx-param input {
    width: 100%;
    background: #faf6f0;
    border: 1px solid #e8e0d4;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    color: #3c3836;
    box-sizing: border-box;
}
.cidx-param input:focus {
    outline: none;
    border-color: #a89984;
}
.cidx-hint {
    display: block;
    font-size: 8px;
    color: #a89984;
    font-family: 'IBM Plex Mono', monospace;
    margin-top: 2px;
}
.cidx-price-range {
    display: flex;
    align-items: center;
    gap: 4px;
}
.cidx-price-range span {
    color: #a89984;
    font-size: 11px;
}
.cidx-price-range input {
    width: 50%;
}
.cidx-generate-btn {
    width: 100%;
    background: #5c5048;
    color: #f5ebe0;
    border: none;
    border-radius: 6px;
    padding: 9px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    margin-bottom: 14px;
    transition: background 0.15s;
}
.cidx-generate-btn:hover { background: #7a6e64; }

/* Index results */
.cidx-empty {
    text-align: center;
    color: #8b7e74;
    font-size: 11px;
    padding: 20px;
}
.cidx-summary {
    display: flex;
    justify-content: space-between;
    background: #faf6f0;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.cidx-summary-stat {
    text-align: center;
}
.cidx-summary-label {
    display: block;
    font-size: 8px;
    color: #8b7e74;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-summary-value {
    font-size: 13px;
    font-weight: 700;
    color: #3c3836;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-summary-stat.highlight .cidx-summary-value {
    color: #4caf50;
}
.cidx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}
.cidx-tag {
    font-size: 9px;
    background: #faf6f0;
    color: #5c5048;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    max-height: 300px;
    overflow-y: auto;
}
.cidx-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 6px;
    padding: 7px 10px;
}
.cidx-row-num {
    font-size: 10px;
    font-weight: 700;
    color: #a89984;
    min-width: 18px;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-row-info {
    flex: 1;
    min-width: 0;
}
.cidx-row-title {
    font-size: 11px;
    font-weight: 600;
    color: #3c3836;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cidx-row-meta {
    display: flex;
    gap: 6px;
    font-size: 9px;
    color: #8b7e74;
    font-family: 'IBM Plex Mono', monospace;
    margin-top: 2px;
}
.cidx-outcome {
    color: #5a9485;
    font-weight: 600;
}
.cidx-row-alloc {
    text-align: right;
    min-width: 60px;
}
.cidx-alloc-amount {
    font-size: 12px;
    font-weight: 700;
    color: #3c3836;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-alloc-shares {
    font-size: 9px;
    color: #8b7e74;
    font-family: 'IBM Plex Mono', monospace;
}
.cidx-add-btn {
    width: 100%;
    background: #a7c080;
    color: #3c3836;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: background 0.15s;
}
.cidx-add-btn:hover { background: #8fb86e; }

/* ---- Results ---- */

.cart-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 14px 10px;
}

.cart-results-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.result-icon-ok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(106,154,58,0.12);
    color: #6a9a3a;
    font-size: 14px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
}

.result-icon-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(194,113,113,0.12);
    color: #c27171;
    font-size: 20px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
}

.cart-results-header {
    font-size: 15px;
    font-weight: 700;
    color: #3c3836;
    margin-bottom: 4px;
}

.cart-results-stats {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: #8a7e74;
    margin-bottom: 16px;
}

.cart-results-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 6px;
}
.cart-result-row.ok { color: #5c5048; background: rgba(106,154,58,0.08); }
.cart-result-row.fail { color: #5c5048; background: rgba(194,113,113,0.08); }

.cart-result-check {
    font-weight: 700;
    flex-shrink: 0;
}
.cart-result-row.ok .cart-result-check { color: #6a9a3a; }
.cart-result-row.fail .cart-result-check { color: #c27171; }

.cart-result-label {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cart-result-detail {
    font-size: 9px;
    color: #8a7e74;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---- Cart Portfolio Tab ---- */

.cport-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 6px;
}

.cport-summary-item {
    flex: 1;
    text-align: center;
}

.cport-summary-lbl {
    display: block;
    font-size: 8px;
    color: #8a7e74;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 1px;
}

.cport-summary-val {
    font-size: 13px;
    font-weight: 600;
    color: #5c5048;
    font-family: 'IBM Plex Mono', monospace;
}

.cport-summary-item.profit .cport-summary-val { color: #6a9a3a; }
.cport-summary-item.loss .cport-summary-val { color: #c27171; }

.cport-refresh-btn {
    background: none;
    border: 1px solid #e8e0d4;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    color: #8a7e74;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cport-refresh-btn:hover { color: #5c5048; border-color: #e8e0d4; }

.cport-sort-select {
    background: #fff;
    border: 1px solid #e8e0d4;
    border-radius: 4px;
    padding: 3px 4px;
    font-size: 11px;
    color: #5c5048;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    outline: none;
}
.cport-sort-select:hover { border-color: #d4c8b8; }
.cport-sort-select:focus { border-color: #b8a89c; }

.cport-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cport-row {
    background: transparent;
    border: none;
    border-bottom: 1px solid #ede7df;
    border-radius: 0;
    padding: 8px 6px;
    transition: background 0.15s;
}
.cport-row:last-child { border-bottom: none; }
.cport-row:hover { background: rgba(232,224,212,0.25); }

.cport-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 6px;
}

.cport-market {
    font-size: 10px;
    font-weight: 500;
    color: #3c3836;
    line-height: 1.3;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
a.cport-market:hover { color: #7daea3; }

.cport-outcome {
    font-size: 8px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    background: #faf6f0;
    color: #8a7e74;
}
.cport-outcome.yes { background: rgba(125,174,163,0.15); color: #5a9485; }
.cport-outcome.no { background: rgba(194,113,113,0.12); color: #a05555; }

.cport-row-data {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.cport-cell {
    text-align: center;
    min-width: 44px;
}

.cport-cell-lbl {
    display: block;
    font-size: 7px;
    color: #8a7e74;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.cport-cell-val {
    font-size: 11px;
    font-weight: 600;
    color: #5c5048;
    font-family: 'IBM Plex Mono', monospace;
}

.cport-cell.profit .cport-cell-val { color: #6a9a3a; }
.cport-cell.loss .cport-cell-val { color: #c27171; }

.cport-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.cport-btn {
    background: transparent;
    border: none;
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    font-family: 'IBM Plex Mono', monospace;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: capitalize;
    line-height: 1.2;
}
.cport-btn.sell {
    background: #e67e80;
    color: #2d353b;
}
.cport-btn.sell:hover { filter: brightness(1.1); }
.cport-btn.buy {
    background: #a7c080;
    color: #2d353b;
}
.cport-btn.buy:hover { filter: brightness(1.1); }
.cport-btn.transfer { background: #e8e0d4; color: #5c5048; font-size: 9px; padding: 3px 6px; }
.cport-btn.transfer:hover { filter: brightness(0.95); }

/* Success state on per-row quick-trade Sell button — confirms the trade
 * landed before the row gets removed on re-render (1.2s window). */
.cport-btn.cport-btn-success {
    background: #a7c080 !important;
    color: #2d353b !important;
    animation: cportPulseSuccess 0.4s ease-out;
}
.cport-btn:disabled { cursor: default; opacity: 1; }

.cport-transfer-status {
    font-size: 10px;
    font-family: 'IBM Plex Mono', monospace;
    color: #7c6f64;
    padding: 3px 6px;
    margin-top: 4px;
    background: #faf6f0;
    border-radius: 4px;
}
.cport-transfer-status.success { color: #5a9485; background: rgba(125,174,163,0.1); }
.cport-transfer-status.error { color: #a05555; background: rgba(194,113,113,0.1); }

/* Resolved section header: label + inline actions */
.cport-resolved-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 6px 0;
    padding: 0 4px;
}

.cport-section-label {
    font-size: 9px;
    font-weight: 600;
    color: #8a7e74;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.cport-resolved-actions {
    display: flex;
    gap: 10px;
}

.cport-action-btn {
    padding: 3px 10px;
    border: none;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.cport-action-btn:hover { opacity: 0.8; }
.cport-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* Success state — overrides .won / .lost background with a confirming
 * green so the user can see Claim/Clear actually succeeded. Stays for
 * ~4s before the tab re-renders and the button is removed. */
.cport-action-btn.cport-action-btn-success {
    background: #a7c080 !important;
    color: #2d353b !important;
    opacity: 1 !important;
    animation: cportPulseSuccess 0.4s ease-out;
}
@keyframes cportPulseSuccess {
    0%   { transform: scale(0.95); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.cport-action-btn.won {
    background: rgba(106,154,58,0.12);
    color: #6a9a3a;
}
.cport-action-btn.lost {
    background: rgba(194,113,113,0.12);
    color: #c27171;
}

/* Resolved totals in header */
.cport-resolved-totals {
    display: flex;
    gap: 8px;
    align-items: center;
}
.cport-resolved-total {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 700;
}
.cport-resolved-total.won { color: #6a9a3a; }
.cport-resolved-total.lost { color: #c27171; }

/* Resolved row */
.cport-row-resolved {
    padding: 6px 6px;
}
.cport-row-resolved.lost {
    opacity: 0.55;
}

.cport-resolved-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.cport-resolved-label {
    font-size: 8px;
    font-weight: 700;
    font-family: 'IBM Plex Mono', monospace;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
}
.cport-resolved-label.won { color: #6a9a3a; }
.cport-resolved-label.lost { color: #c27171; }

.cport-resolved-outcome {
    font-size: 9px;
    color: #8a7e74;
    flex-shrink: 0;
}

.cport-resolved-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 20px;
}

.cport-resolved-amount {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 14px;
    font-weight: 700;
}
.cport-resolved-amount.won { color: #6a9a3a; }
.cport-resolved-amount.lost { color: #c27171; }

.cport-resolved-net {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.7;
}
.cport-resolved-net.won { color: #6a9a3a; }

.cport-claim-row-btn {
    margin-left: auto;
    padding: 2px 10px;
    border: none;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.cport-claim-row-btn:hover { opacity: 0.8; }
.cport-claim-row-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cport-claim-row-btn.won {
    background: rgba(106,154,58,0.12);
    color: #6a9a3a;
}
.cport-claim-row-btn.lost {
    background: rgba(194,113,113,0.12);
    color: #c27171;
}

/* ---- Cart Portfolio Tabs — three standalone buttons in a row ---- */

.cport-tabs {
    display: flex;
    gap: 6px;
    padding: 8px 10px 6px;
    margin-bottom: 0;
}
.cport-tab-btn {
    flex: 1;
    padding: 6px 12px;
    background: #f5ebe0;
    border: 1px solid #e8e0d4;
    border-radius: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: #7a6f66;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cport-tab-btn:hover {
    background: #ece2d2;
    color: #5c5048;
    border-color: #d8cfc3;
}
.cport-tab-btn.active {
    background: #5c5048;
    color: #f5ebe0;
    border-color: #5c5048;
}
.cport-tab-btn.active .cport-tab-count {
    background: #f5ebe0;
    color: #5c5048;
}
.cport-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: #5c5048;
    color: #f5ebe0;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.18s ease, color 0.18s ease;
}

/* Small inline spinner used by the portfolio loading placeholder. */
.cport-spinner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(92, 80, 72, 0.18);
    border-top-color: #5c5048;
    animation: cportSpin 0.7s linear infinite;
}
@keyframes cportSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .cport-spinner { animation: none; }
}

/* ---- Cart Order Rows ---- */

.cport-order-tags {
    display: flex;
    gap: 4px;
    align-items: center;
}
.cport-side {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}
.cport-side.buy {
    background: rgba(125,174,163,0.15);
    color: #5a9485;
}
.cport-side.sell {
    background: rgba(194,113,113,0.12);
    color: #a05555;
}
.cport-cancel-btn {
    background: none;
    border: 1px solid rgba(194,113,113,0.3);
    color: #a05555;
    font-size: 10px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    transition: all 0.15s;
}
.cport-cancel-btn:hover { background: rgba(194,113,113,0.1); border-color: #a05555; }
.cport-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.cport-cancel-all-btn {
    display: block;
    width: calc(100% - 16px);
    margin: 4px 8px;
    padding: 5px 0;
    background: rgba(194,113,113,0.08);
    border: 1px solid rgba(194,113,113,0.25);
    color: #a05555;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}
.cport-cancel-all-btn:hover { background: rgba(194,113,113,0.15); border-color: #a05555; }
.cport-cancel-all-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* "More" expansion button */
.cport-more-btn {
    display: block;
    width: 100%;
    padding: 6px 0;
    border: none;
    background: transparent;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: #8a7e74;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.5px;
    transition: color 0.15s;
}
.cport-more-btn:hover { color: #5c5048; }

/* ---- Cart Badge (header button) ---- */

.header-btn.cart-btn {
    position: relative;
}

.cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: #e53935;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    margin-left: 3px;
}

/* ---- Cart button in token list ---- */

.trade-btn.cart-btn.mini {
    background: #faf6f0;
    color: #8a7e74;
    border: 1px solid #e8e0d4;
    font-size: 11px;
    padding: 2px 6px;
    min-width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.trade-btn.cart-btn.mini:hover {
    background: #7daea3;
    color: #fff;
    border-color: #7daea3;
}

/* ---- Trader Cart Button (info panel) ---- */
.trader-cart-row {
    padding: 6px 12px;
}
.trader-cart-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 12px;
    background: #5c5048;
    color: #e8e0d4;
    border: 1px solid rgba(92, 80, 72, 0.4);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    justify-content: center;
    transition: all 0.15s;
}
.trader-cart-btn:hover {
    filter: brightness(1.15);
}
.trader-cart-btn svg {
    flex-shrink: 0;
}

/* ---- Responsive ---- */

/* Large screens */
@media (min-width: 1600px) {
    .header { padding: 10px 24px; }
    .stats { gap: 24px; font-size: 11px; }
    .header-btn { font-size: 11px; padding: 6px 12px; }
    .filters-panel { width: 320px; }
    .leaderboard-panel { width: 300px; }
    .node-panel { width: 320px; }
    .cart-panel { width: 480px; }
}

/* Ultra-wide */
@media (min-width: 2400px) {
    .header { padding: 12px 32px; }
    .title { font-size: 14px; }
    .stats { gap: 28px; font-size: 12px; }
    .header-btn { font-size: 12px; padding: 7px 14px; }
    .filters-panel { width: 360px; }
    .leaderboard-panel { width: 340px; }
    .node-panel { width: 360px; }
    .cart-panel { width: 520px; }
}

/* Mobile */
@media (max-width: 600px) {
    .cart-panel {
        width: 100vw;
        max-width: 100vw;
    }
}