/* ═══════════════════════════════════════════════════════════════════════════
   styles.css — Binance Alpha Dashboard Premium Design System
   Dark-mode glassmorphism financial dashboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────── CSS Variables ──────────────────────── */
:root {
    /* Core palette */
    --bg-base:          #0a0e17;
    --bg-card:          rgba(15, 20, 35, 0.85);
    --bg-card-solid:    #0f1423;
    --bg-elevated:      rgba(20, 27, 45, 0.9);
    --bg-hover:         rgba(30, 40, 65, 0.6);
    --bg-surface:       rgba(25, 33, 55, 0.5);

    /* Borders */
    --border-subtle:    rgba(59, 130, 246, 0.08);
    --border-medium:    rgba(59, 130, 246, 0.15);
    --border-accent:    rgba(59, 130, 246, 0.3);

    /* Accent colors */
    --accent-blue:      #3b82f6;
    --accent-green:     #22c55e;
    --accent-red:       #ef4444;
    --accent-amber:     #f59e0b;
    --accent-purple:    #a855f7;
    --accent-cyan:      #06b6d4;
    --accent-orange:    #f97316;
    --accent-pink:      #ec4899;

    /* Text colors */
    --text-primary:     #e2e8f0;
    --text-secondary:   #94a3b8;
    --text-muted:       #64748b;
    --text-dim:         #475569;

    /* Column group tints */
    --tint-slate:       rgba(100, 116, 139, 0.08);
    --tint-emerald:     rgba(34, 197, 94, 0.06);
    --tint-amber:       rgba(245, 158, 11, 0.06);
    --tint-purple:      rgba(168, 85, 247, 0.06);
    --tint-cyan:        rgba(6, 182, 212, 0.06);
    --tint-orange:      rgba(249, 115, 22, 0.06);
    --tint-pink:        rgba(236, 72, 153, 0.06);

    /* Sizing */
    --header-height:    64px;
    --radius-sm:        6px;
    --radius-md:        10px;
    --radius-lg:        16px;
    --radius-xl:        20px;

    /* Transitions */
    --transition-fast:  0.15s ease;
    --transition-base:  0.2s ease;
    --transition-slow:  0.35s ease;

    /* Shadows */
    --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.15);
    --shadow-glow-green:0 0 12px rgba(34, 197, 94, 0.15);
}


/* ──────────────────────── Reset & Base ──────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-base);
    min-height: 100vh;
    overflow-x: auto;
}

/* Subtle animated background grain */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(168, 85, 247, 0.04) 0%, transparent 50%);
    pointer-events: none;
}


/* ──────────────────────── Scrollbar ──────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(15, 20, 35, 0.5);
}
::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(59, 130, 246, 0.35);
}
::-webkit-scrollbar-corner {
    background: var(--bg-base);
}


/* ──────────────────────── Selection ──────────────────────── */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.dashboard-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 14, 23, 0.82);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid var(--border-medium);
    box-shadow: 0 1px 0 rgba(59, 130, 246, 0.08), var(--shadow-md);
}

.header-inner {
    margin: 0;
    padding: 0 12px;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 24px;
    color: var(--accent-blue);
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4));
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.4)); }
    50%      { filter: drop-shadow(0 0 16px rgba(59, 130, 246, 0.7)); }
}

.header-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #e2e8f0 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding-left: 16px;
    border-left: 1px solid var(--border-subtle);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Freshness Badge */
.freshness-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    font-size: 12px;
    color: var(--accent-green);
    font-weight: 500;
    transition: all var(--transition-base);
}

.freshness-badge.stale {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: var(--accent-amber);
}

.freshness-badge.stale .freshness-dot {
    background: var(--accent-amber);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.freshness-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-green);
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.85); }
}

/* Status Badge */
.status-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.15);
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.status-count {
    color: var(--accent-blue);
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}


/* ═══════════════════════════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.dashboard-main {
    margin: 0;
    padding: 10px 8px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION BLOCKS
   ═══════════════════════════════════════════════════════════════ */
.section-block {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-base);
}

.section-block:hover {
    border-color: var(--border-medium);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-icon {
    font-size: 18px;
}

.section-badge {
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(59, 130, 246, 0.15);
}


/* ═══════════════════════════════════════════════════════════════
   NEW LISTINGS
   ═══════════════════════════════════════════════════════════════ */
.new-listings-scroll {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.new-listings-scroll::-webkit-scrollbar {
    height: 5px;
}

.new-listings-placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 20px;
    color: var(--text-muted);
    font-size: 13px;
    width: 100%;
    justify-content: center;
}

.placeholder-icon {
    font-size: 20px;
}

/* New Listing Card */
.new-listing-card {
    flex: 0 0 200px;
    scroll-snap-align: start;
    position: relative;
    padding: 18px 16px 14px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all var(--transition-base);
    overflow: hidden;
}

.new-listing-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.new-listing-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-glow-blue), var(--shadow-md);
}

.new-listing-card:hover::before {
    opacity: 1;
}

.new-listing-card.nl-selected {
    border-color: var(--accent-blue);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2), var(--shadow-md);
}

/* New Badge */
.new-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.new-badge-dim {
    background: rgba(100, 116, 139, 0.08);
    color: var(--text-muted);
    border-color: rgba(100, 116, 139, 0.15);
}

.pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(239, 68, 68, 0.2); }
    50%      { box-shadow: 0 0 12px rgba(239, 68, 68, 0.45); }
}

.pulse-glow-soft {
    animation: pulseGlowSoft 2.5s ease-in-out infinite;
}

@keyframes pulseGlowSoft {
    0%, 100% { box-shadow: 0 0 2px rgba(245, 158, 11, 0.15); }
    50%      { box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); }
}

.nl-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.nl-symbol {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.nl-chain-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.nl-name {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nl-price {
    font-size: 15px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.nl-change {
    font-size: 13px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 6px;
}

.nl-age {
    font-size: 10px;
    color: var(--text-dim);
}


/* ═══════════════════════════════════════════════════════════════
   CHART SECTION
   ═══════════════════════════════════════════════════════════════ */
.chart-section {
    position: relative;
    overflow: hidden;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.chart-token-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chart-token-symbol {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.chart-token-name {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
}

.chart-token-chain {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: none;
}

/* Timeframe Buttons */
.chart-timeframes {
    display: flex;
    gap: 4px;
    background: rgba(15, 20, 35, 0.6);
    padding: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.tf-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tf-btn:hover {
    color: var(--text-secondary);
    background: rgba(59, 130, 246, 0.08);
}

.tf-btn.active {
    color: #fff;
    background: var(--accent-blue);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}

/* Chart Container */
.chart-container {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #0d1117;
    border: 1px solid var(--border-subtle);
}

.chart-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 2;
    background: rgba(13, 17, 23, 0.9);
}

.chart-placeholder-icon {
    font-size: 40px;
    opacity: 0.5;
}

.chart-placeholder-text {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
}


/* ═══════════════════════════════════════════════════════════════
   COLUMN TOGGLES
   ═══════════════════════════════════════════════════════════════ */
.column-toggles-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.toggles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.toggles-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.toggles-actions {
    display: flex;
    gap: 8px;
}

.toggles-action-btn {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.toggles-action-btn:hover {
    border-color: var(--border-medium);
    color: var(--text-secondary);
    background: var(--bg-hover);
}

/* Toggle Container */
.toggles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Toggle Pill */
.toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: rgba(15, 20, 35, 0.5);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.toggle-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--pill-color);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.toggle-pill:hover {
    border-color: var(--pill-color);
    color: var(--text-secondary);
}

.toggle-pill.active {
    border-color: var(--pill-active-color);
    color: var(--pill-active-color);
    background: rgba(15, 20, 35, 0.8);
    box-shadow: 0 0 16px color-mix(in srgb, var(--pill-color) 20%, transparent);
}

.toggle-pill.active::before {
    opacity: 0.08;
}

.pill-icon {
    font-size: 13px;
    line-height: 1;
}

.pill-label {
    line-height: 1;
}

.pill-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: all var(--transition-base);
    margin-left: 2px;
}

.toggle-pill.active .pill-indicator {
    background: var(--pill-active-color);
    box-shadow: 0 0 6px var(--pill-active-color);
}


/* ═══════════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════════ */
.table-section {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    resize: vertical;
}

.table-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    min-height: 200px;
    /* Always show horizontal scrollbar */
    scrollbar-gutter: stable;
}

.alpha-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 11px;
}

/* ─── Group Header Row ─── */
.group-header-row {
    position: sticky;
    top: 0;
    z-index: 12;
}

.group-header {
    padding: 5px 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    border-bottom: 1px solid var(--border-medium);
    white-space: nowrap;
    background: var(--bg-card-solid);
}

/* Group color tints */
.group-hdr-slate   { background: linear-gradient(180deg, rgba(100,116,139,0.12) 0%, var(--bg-card-solid) 100%); color: #94a3b8; border-bottom-color: rgba(100,116,139,0.2); }
.group-hdr-emerald { background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, var(--bg-card-solid) 100%);  color: #4ade80; border-bottom-color: rgba(34,197,94,0.2); }
.group-hdr-amber   { background: linear-gradient(180deg, rgba(245,158,11,0.10) 0%, var(--bg-card-solid) 100%); color: #fbbf24; border-bottom-color: rgba(245,158,11,0.2); }
.group-hdr-purple  { background: linear-gradient(180deg, rgba(168,85,247,0.10) 0%, var(--bg-card-solid) 100%); color: #c084fc; border-bottom-color: rgba(168,85,247,0.2); }
.group-hdr-cyan    { background: linear-gradient(180deg, rgba(6,182,212,0.10) 0%, var(--bg-card-solid) 100%);  color: #22d3ee; border-bottom-color: rgba(6,182,212,0.2); }
.group-hdr-orange  { background: linear-gradient(180deg, rgba(249,115,22,0.10) 0%, var(--bg-card-solid) 100%); color: #fb923c; border-bottom-color: rgba(249,115,22,0.2); }
.group-hdr-pink    { background: linear-gradient(180deg, rgba(236,72,153,0.10) 0%, var(--bg-card-solid) 100%); color: #f472b6; border-bottom-color: rgba(236,72,153,0.2); }

/* ─── Column Header Row ─── */
.col-header-row {
    position: sticky;
    top: 33px;
    z-index: 11;
}

.col-header {
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card-solid);
    border-bottom: 2px solid var(--border-medium);
    white-space: nowrap;
    user-select: none;
    position: relative;
    transition: all var(--transition-fast);
}

.col-header.sortable {
    cursor: pointer;
}

.col-header.sortable:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Column header subtle tints to match group */
.col-header.group-hdr-slate   { background: linear-gradient(180deg, rgba(100,116,139,0.05) 0%, var(--bg-card-solid) 100%); }
.col-header.group-hdr-emerald { background: linear-gradient(180deg, rgba(34,197,94,0.04) 0%, var(--bg-card-solid) 100%); }
.col-header.group-hdr-amber   { background: linear-gradient(180deg, rgba(245,158,11,0.04) 0%, var(--bg-card-solid) 100%); }
.col-header.group-hdr-purple  { background: linear-gradient(180deg, rgba(168,85,247,0.04) 0%, var(--bg-card-solid) 100%); }
.col-header.group-hdr-cyan    { background: linear-gradient(180deg, rgba(6,182,212,0.04) 0%, var(--bg-card-solid) 100%); }
.col-header.group-hdr-orange  { background: linear-gradient(180deg, rgba(249,115,22,0.04) 0%, var(--bg-card-solid) 100%); }
.col-header.group-hdr-pink    { background: linear-gradient(180deg, rgba(236,72,153,0.04) 0%, var(--bg-card-solid) 100%); }

.col-label {
    margin-right: 4px;
}

.sort-indicator {
    font-size: 10px;
    color: var(--text-dim);
    opacity: 0.4;
    transition: all var(--transition-fast);
}

.sort-indicator.active {
    opacity: 1;
    color: var(--accent-blue);
}

.col-header:hover .sort-indicator {
    opacity: 0.8;
}

/* ─── Table Body ─── */
.table-row {
    transition: all var(--transition-fast);
    cursor: pointer;
    border-bottom: 1px solid rgba(59, 130, 246, 0.03);
}

/* Zebra striping — very subtle */
.table-row.row-alt {
    background: rgba(15, 20, 35, 0.25);
}

.table-row:hover {
    background: rgba(59, 130, 246, 0.06) !important;
}

/* Selected Row */
.table-row.selected {
    background: rgba(59, 130, 246, 0.1) !important;
    box-shadow: inset 3px 0 0 var(--accent-blue);
}

.table-row.selected .table-cell {
    color: var(--text-primary);
}

/* Flash highlight animation */
.table-row.flash-highlight {
    animation: flashRow 1.2s ease-out;
}

@keyframes flashRow {
    0%   { background: rgba(59, 130, 246, 0.25) !important; }
    100% { background: transparent; }
}

/* ─── Table Cells ─── */
.table-cell {
    padding: 5px 7px;
    white-space: nowrap;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    font-size: 11px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
}

/* ─── Value Colors ─── */
.positive {
    color: var(--accent-green) !important;
}

.negative {
    color: var(--accent-red) !important;
}

.na-value {
    color: var(--text-dim);
    font-style: italic;
    font-size: 11px;
}

/* ─── RSI Colors ─── */
.rsi-oversold {
    color: var(--accent-green) !important;
    font-weight: 600;
}

.rsi-overbought {
    color: var(--accent-red) !important;
    font-weight: 600;
}

/* ─── Symbol Text ─── */
.symbol-text {
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ─── Chain Badge ─── */
.chain-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Contract Cell ─── */
.contract-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.contract-cell code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}

.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 4px;
    border-radius: 3px;
    opacity: 0.4;
    transition: all var(--transition-fast);
    line-height: 1;
}

.copy-btn:hover {
    opacity: 1;
    background: rgba(59, 130, 246, 0.1);
}

.copy-btn.copied {
    opacity: 1;
}

/* ─── Badges ─── */
.badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.02em;
}

.badge-green {
    background: rgba(34, 197, 94, 0.12);
    color: var(--accent-green);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-amber {
    background: rgba(245, 158, 11, 0.12);
    color: var(--accent-amber);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-dim {
    background: rgba(100, 116, 139, 0.06);
    color: var(--text-dim);
    border: 1px solid rgba(100, 116, 139, 0.1);
}

/* ─── Table Empty State ─── */
.table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 12px;
}

.table-empty-icon {
    font-size: 40px;
    opacity: 0.4;
}

.table-empty-text {
    font-size: 14px;
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   LOADING OVERLAY
   ═══════════════════════════════════════════════════════════════ */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 23, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 1;
    transition: opacity 0.4s ease;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.loading-spinner {
    position: relative;
    width: 60px;
    height: 60px;
}

.spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--accent-blue);
    animation: spinRing 1.2s linear infinite;
}

.spinner-ring-2 {
    inset: 6px;
    border-top-color: transparent;
    border-right-color: rgba(59, 130, 246, 0.4);
    animation-duration: 1.8s;
    animation-direction: reverse;
}

.spinner-ring-3 {
    inset: 12px;
    border-top-color: transparent;
    border-bottom-color: rgba(59, 130, 246, 0.2);
    animation-duration: 2.4s;
}

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

.loading-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.loading-subtext {
    font-size: 12px;
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════
   ERROR TOAST
   ═══════════════════════════════════════════════════════════════ */
.error-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fca5a5;
    font-size: 13px;
    max-width: 420px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s ease;
}

.error-toast.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.error-toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.error-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.error-toast-close {
    background: none;
    border: none;
    color: #fca5a5;
    font-size: 18px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.error-toast-close:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.1);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.dashboard-footer {
    max-width: 1920px;
    margin: 0 auto;
    padding: 20px 24px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-dim);
}

.footer-sep {
    opacity: 0.3;
}


/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */
.hidden {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* Tablets */
@media (max-width: 1024px) {
    .header-subtitle {
        display: none;
    }

    .header-inner {
        padding: 0 16px;
    }

    .dashboard-main {
        padding: 16px;
        gap: 16px;
    }

    .new-listing-card {
        flex: 0 0 175px;
    }

    .chart-container {
        height: 340px;
    }
}

/* Mobile */
@media (max-width: 640px) {
    :root {
        --header-height: 56px;
    }

    .header-title {
        font-size: 15px;
    }

    .freshness-badge {
        padding: 4px 10px;
        font-size: 11px;
    }

    .status-badge {
        display: none;
    }

    .dashboard-main {
        padding: 12px;
        gap: 12px;
    }

    .section-block {
        padding: 14px;
        border-radius: var(--radius-md);
    }

    .new-listing-card {
        flex: 0 0 160px;
        padding: 14px 12px;
    }

    .nl-symbol {
        font-size: 15px;
    }

    .nl-price {
        font-size: 13px;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .chart-container {
        height: 280px;
    }

    .chart-token-symbol {
        font-size: 16px;
    }

    .toggles-container {
        gap: 6px;
    }

    .toggle-pill {
        padding: 5px 12px 5px 10px;
        font-size: 11px;
    }

    .table-wrapper {
        max-height: calc(100vh - 160px);
    }

    .table-cell {
        padding: 7px 8px;
        font-size: 11px;
    }

    .col-header {
        padding: 8px;
        font-size: 10px;
    }

    .group-header {
        padding: 6px 8px;
        font-size: 9px;
    }

    .error-toast {
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

/* Large screens — keep compact */
@media (min-width: 1440px) {
    .alpha-table {
        font-size: 11px;
    }

    .table-cell {
        padding: 5px 8px;
    }
}

/* ═══ Sticky Columns ═══ */
.sticky-col {
    position: sticky;
    z-index: 2;
    background: inherit;
}
.sticky-col-0 { left: 0; min-width: 65px; }
.sticky-col-1 { left: 65px; min-width: 100px; }
.sticky-col-2 { left: 165px; min-width: 50px; }

.col-header-row .sticky-col {
    z-index: 4;
}

.table-row .sticky-col {
    background: var(--bg-card, #0f1423);
}
.table-row.row-alt .sticky-col {
    background: var(--bg-card-alt, #111827);
}
.table-row:hover .sticky-col {
    background: var(--bg-hover, #1a2235);
}
.table-row.selected .sticky-col {
    background: var(--bg-selected, #1e293b);
}

/* Sticky shadow hint */
.sticky-col-2::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,0.3), transparent);
    pointer-events: none;
}

/* ═══ Horizontal Scroll Improvements ═══ */
.table-wrapper {
    overflow-x: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper::-webkit-scrollbar {
    height: 14px;
}
.table-wrapper::-webkit-scrollbar-track {
    background: rgba(15, 20, 35, 0.95);
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}
.table-wrapper::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.5), rgba(168, 85, 247, 0.4));
    border-radius: 7px;
    border: 2px solid rgba(15, 20, 35, 0.95);
}
.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.7), rgba(168, 85, 247, 0.6));
}

body {
    overflow-x: auto !important;
}

/* ═══ Chart Legend ═══ */
.chart-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-muted);
    min-height: 24px;
    flex-wrap: wrap;
}

.legend-item {
    white-space: nowrap;
    color: var(--text-dim);
}

.legend-item span {
    font-weight: 600;
}

/* ═══ Chart Controls ═══ */
.chart-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chart-tools {
    display: flex;
    gap: 4px;
    background: rgba(15, 20, 35, 0.6);
    padding: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

.chart-tool-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chart-tool-btn:hover {
    color: var(--text-secondary);
    background: rgba(59, 130, 246, 0.08);
}

.chart-tool-btn.active {
    color: #fff;
    background: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

/* ═══ Chart Token Contract ═══ */
.chart-token-contract {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.12);
}

.chart-token-contract code {
    color: var(--text-muted);
}

/* ═══ Chart Placeholder Subtext ═══ */
.chart-placeholder-subtext {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: -4px;
}

/* ═══ DEX Screener Link Button ═══ */
.chart-dex-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #4ade80;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.chart-dex-link:hover {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
    transform: translateY(-1px);
}

/* ═══ Chart container height fix ═══ */
.chart-container {
    height: 420px;
}

/* ═══ Symbol Social Links ═══ */
.sym-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 3px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 10px;
    line-height: 1;
    vertical-align: middle;
    opacity: 0.45;
    transition: all 0.15s ease;
}
.sym-link:hover {
    opacity: 1;
    transform: scale(1.2);
}
.sym-twitter {
    color: #e2e8f0;
    font-weight: 700;
    font-family: Arial, sans-serif;
}
.sym-twitter:hover {
    color: #fff;
    text-shadow: 0 0 6px rgba(255,255,255,0.4);
}
.sym-dex {
    font-size: 11px;
}
.sym-dex:hover {
    filter: brightness(1.3);
}

/* Prevent link clicks from selecting the table row */
.sym-link {
    position: relative;
    z-index: 5;
}