[v-cloak] { display: none; }
html { overflow-y: scroll; scrollbar-gutter: stable; }

/* ===== Theme CSS Variables ===== */
:root {
    --bg-body: #060a14;
    --bg-card: rgba(15, 23, 42, 0.8);
    --bg-card-solid: #0f172a;
    --bg-card-hover: rgba(30, 41, 59, 0.9);
    --bg-card-border: rgba(148, 163, 184, 0.1);
    --bg-card-border-hover: rgba(148, 163, 184, 0.2);
    --bg-input: rgba(30, 41, 59, 0.5);
    --bg-row-hover: rgba(30, 41, 59, 0.3);
    --bg-inner: rgba(15, 23, 42, 0.5);
    --bg-inner-alt: rgba(30, 41, 59, 0.4);
    --text-primary: #f1f5f9;
    --text-body: #e2e8f0;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;
    --border-main: rgba(30, 41, 59, 0.5);
    --border-dim: rgba(30, 41, 59, 0.3);
    --glow-shadow: 0 0 30px rgba(56, 189, 248, 0.1);
    --skeleton-a: rgba(30,41,59,0.5);
    --skeleton-b: rgba(51,65,85,0.3);
    --scrollbar-thumb: rgba(148, 163, 184, 0.3);
    --tab-active-color: #38bdf8;
    --accent: #38bdf8;
    --shadow-card: none;
    --chart-grid: #1e293b;
    --chart-axis: #334155;
    --chart-text: #94a3b8;
    --chart-tooltip-bg: rgba(15, 23, 42, 0.95);
    --chart-tooltip-border: rgba(148, 163, 184, 0.2);
    --chart-tooltip-text: #e2e8f0;
    /* Semantic status colors */
    --c-green: #34d399; --c-red: #f87171; --c-amber: #fbbf24; --c-sky: #38bdf8; --c-purple: #a78bfa;
    --c-orange-text: #fdba74; --c-violet-text: #c4b5fd;
    /* Aliases used by inline styles in the funding / heatmap / kline tabs */
    --bg-secondary: var(--bg-inner);
    --border-color: var(--border-main);
    --glass-bg: var(--bg-input);
    --glass-border: var(--bg-card-border);
    --accent-blue: var(--accent);
}
html.light-theme {
    --bg-body: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.88);
    --bg-card-solid: #ffffff;
    --bg-card-hover: rgba(241, 245, 249, 0.95);
    --bg-card-border: rgba(203, 213, 225, 0.5);
    --bg-card-border-hover: rgba(203, 213, 225, 0.7);
    --bg-input: rgba(241, 245, 249, 0.8);
    --bg-row-hover: rgba(241, 245, 249, 0.7);
    --bg-inner: rgba(248, 250, 252, 0.8);
    --bg-inner-alt: rgba(241, 245, 249, 0.6);
    --text-primary: #0f172a;
    --text-body: #1e293b;
    --text-secondary: #334155;
    --text-tertiary: #475569;
    --text-muted: #64748b;
    --border-main: rgba(203, 213, 225, 0.6);
    --border-dim: rgba(203, 213, 225, 0.4);
    --glow-shadow: 0 0 20px rgba(56, 189, 248, 0.06);
    --skeleton-a: rgba(203,213,225,0.4);
    --skeleton-b: rgba(226,232,240,0.6);
    --scrollbar-thumb: rgba(148, 163, 184, 0.45);
    --tab-active-color: #0369a1;
    --accent: #0284c7;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --chart-grid: #e2e8f0;
    --chart-axis: #94a3b8;
    --chart-text: #475569;
    --chart-tooltip-bg: rgba(255, 255, 255, 0.96);
    --chart-tooltip-border: rgba(203, 213, 225, 0.5);
    --chart-tooltip-text: #1e293b;
    --c-green: #059669; --c-red: #dc2626; --c-amber: #d97706; --c-sky: #0369a1; --c-purple: #7c3aed;
    --c-orange-text: #c2410c; --c-violet-text: #6d28d9;
}

/* ===== Structural Styles ===== */
body { background: var(--bg-body); color: var(--text-body); font-family: 'Inter', system-ui, sans-serif; transition: background-color 0.3s, color 0.3s; }
.glass { background: var(--bg-card); backdrop-filter: blur(16px); border: 1px solid var(--bg-card-border); box-shadow: var(--shadow-card); transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; }
.glass-hover:hover { background: var(--bg-card-hover); border-color: var(--bg-card-border-hover); }
.glow { box-shadow: var(--glow-shadow); }
.exchange-badge { padding: 2px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ex-logo { border-radius: 4px; flex-shrink: 0; object-fit: contain; width: 16px; height: 16px; }
.ex-logo.ex-logo-sm { width: 14px; height: 14px; }
.ex-logo.ex-logo-lg { width: 24px; height: 24px; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
.pulse-dot { animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.rate-cell { font-variant-numeric: tabular-nums; }
.tab-active { border-bottom: 2px solid var(--tab-active-color); color: var(--tab-active-color); }
.sort-icon { cursor: pointer; user-select: none; }
.search-highlight { background: rgba(56, 189, 248, 0.2); border-radius: 2px; }
.stats-grid { min-height: 120px; }
.legend-bar { min-height: 44px; }
.tab-panel { min-height: 400px; }
.skeleton { background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.height-locked { overflow: hidden; }

/* Heatmap — Dark mode defaults */
.heatmap-table { border-spacing: 2px; }
.heatmap-head { color: #94a3b8; background: #0f172a; letter-spacing: 0.02em; }
.heatmap-sticky-col { position: sticky; left: 0; z-index: 10; }
.heatmap-symbol { background: #1e293b; color: #f1f5f9; border-right: 2px solid #334155; }
.heatmap-total { color: #e2e8f0; }
.heatmap-row { border-bottom: 1px solid rgba(51,65,85,0.3); }
.heatmap-row:hover .heatmap-symbol { background: #334155; }
.heatmap-cell { border-radius: 3px; transition: transform 0.15s ease; }
.heatmap-cell:hover { transform: scale(1.06); z-index: 5; position: relative; box-shadow: 0 0 8px rgba(0,0,0,0.4); }
.heatmap-legend { color: #64748b; }
.heatmap-legend-1 { background: rgb(30,64,120); }
.heatmap-legend-2 { background: rgb(16,145,135); }
.heatmap-legend-3 { background: rgb(190,120,20); }
.heatmap-legend-4 { background: rgb(230,50,45); }

/* Heatmap — Light mode overrides */
html.light-theme .heatmap-head { color: #475569; background: #f8fafc; border-bottom: 2px solid #e2e8f0; }
html.light-theme .heatmap-symbol { background: #ffffff; color: #0f172a; border-right: 2px solid #e2e8f0; }
html.light-theme .heatmap-total { color: #1e293b; }
html.light-theme .heatmap-row { border-bottom: 1px solid rgba(226,232,240,0.5); }
html.light-theme .heatmap-row:hover .heatmap-symbol { background: #f1f5f9; }
html.light-theme .heatmap-cell:hover { box-shadow: 0 0 8px rgba(0,0,0,0.12); }
html.light-theme .heatmap-legend { color: #64748b; }
html.light-theme .heatmap-legend-1 { background: rgb(210,228,252); }
html.light-theme .heatmap-legend-2 { background: rgb(110,210,190); }
html.light-theme .heatmap-legend-3 { background: rgb(248,170,60); }
html.light-theme .heatmap-legend-4 { background: rgb(220,55,35); }

/* Theme toggle */
.theme-toggle { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--bg-card-border); }
.theme-toggle button { padding: 4px 10px; font-size: 13px; line-height: 1; background: transparent; color: var(--text-tertiary); border: none; cursor: pointer; transition: all 0.2s; }
.theme-toggle button:hover { color: var(--text-primary); }
.theme-toggle button.active { background: var(--accent); color: #fff; }
html.light-theme .theme-toggle button.active { background: var(--accent); color: #fff; }

/* ===== Light Theme: Tailwind Utility Overrides ===== */
/* Text colors */
html.light-theme .text-white { color: var(--text-primary) !important; }
html.light-theme .text-slate-300 { color: var(--text-secondary) !important; }
html.light-theme .text-slate-400 { color: var(--text-tertiary) !important; }
html.light-theme .text-slate-500 { color: var(--text-muted) !important; }
html.light-theme .text-slate-600 { color: #94a3b8 !important; }
/* Protect white text in colored containers */
html.light-theme .bg-gradient-to-br .text-white,
html.light-theme [class*="bg-sky-5"].text-white,
html.light-theme [class*="bg-sky-5"] .text-white,
html.light-theme .theme-toggle .active { color: #ffffff !important; }
/* Semantic colors — darken for legibility on light bg */
html.light-theme .text-sky-400 { color: var(--c-sky) !important; }
html.light-theme .text-emerald-400 { color: var(--c-green) !important; }
html.light-theme .text-red-400 { color: var(--c-red) !important; }
html.light-theme .text-amber-400 { color: var(--c-amber) !important; }
html.light-theme .text-purple-400 { color: var(--c-purple) !important; }
html.light-theme .text-orange-300 { color: var(--c-orange-text) !important; }
html.light-theme .text-violet-300 { color: var(--c-violet-text) !important; }
/* Backgrounds */
html.light-theme .bg-slate-800\/50 { background: var(--bg-input) !important; }
html.light-theme .bg-slate-800\/30 { background: var(--bg-row-hover) !important; }
html.light-theme .bg-slate-800\/40 { background: var(--bg-inner-alt) !important; }
html.light-theme .bg-slate-900\/50 { background: var(--bg-inner) !important; }
html.light-theme .bg-dark-300 { background: var(--bg-card-solid) !important; }
html.light-theme .bg-dark-200 { background: var(--bg-card) !important; }
/* Colored backgrounds — lighter tint */
html.light-theme .bg-red-950\/20 { background: rgba(254,226,226,0.6) !important; }
html.light-theme .bg-emerald-950\/20,
html.light-theme .bg-emerald-950\/10 { background: rgba(209,250,229,0.5) !important; }
html.light-theme .bg-sky-500\/20 { background: rgba(186,230,253,0.5) !important; }
html.light-theme .bg-sky-500\/30 { background: rgba(186,230,253,0.6) !important; }
html.light-theme .bg-purple-500\/20,
html.light-theme .bg-purple-500\/30 { background: rgba(221,214,254,0.5) !important; }
html.light-theme .bg-amber-500\/20 { background: rgba(254,240,138,0.5) !important; }
html.light-theme .bg-emerald-500\/20 { background: rgba(209,250,229,0.5) !important; }
html.light-theme .bg-red-500\/20 { background: rgba(254,226,226,0.5) !important; }
html.light-theme .bg-red-500\/5 { background: rgba(254,226,226,0.3) !important; }
html.light-theme .bg-amber-500\/5 { background: rgba(254,240,138,0.3) !important; }
html.light-theme .border-red-500\/30 { border-color: rgba(248,113,113,0.3) !important; }
html.light-theme .border-amber-500\/30 { border-color: rgba(245,158,11,0.3) !important; }
html.light-theme .bg-red-900\/30 { border-color: rgba(254,202,202,0.5) !important; }
/* Borders */
html.light-theme .border-slate-700\/50,
html.light-theme .border-slate-700\/30,
html.light-theme .border-slate-800\/50,
html.light-theme .border-slate-800\/30,
html.light-theme .border-slate-800 { border-color: var(--border-main) !important; }
/* Hover states */
html.light-theme .hover\:bg-slate-700\/50:hover,
html.light-theme .hover\:bg-slate-800\/30:hover { background: var(--bg-row-hover) !important; }
html.light-theme .hover\:text-slate-200:hover,
html.light-theme .hover\:text-white:hover { color: var(--text-primary) !important; }
html.light-theme .hover\:border-slate-600\/50:hover { border-color: var(--bg-card-border-hover) !important; }
html.light-theme .hover\:bg-sky-500\/30:hover { background: rgba(186,230,253,0.6) !important; }
/* Inputs — placeholder & focus */
html.light-theme .placeholder-slate-500::placeholder { color: #94a3b8 !important; }
html.light-theme .focus\:border-sky-500\/50:focus { border-color: rgba(14,165,233,0.5) !important; }
/* Exchange badge text colors for light mode */
html.light-theme .text-okx { color: #475569 !important; }
html.light-theme .text-binance { color: #a16207 !important; }
/* Fixed rate labels */
html.light-theme .text-orange-400\/70 { color: rgba(194,65,12,0.85) !important; }
html.light-theme .text-violet-400\/70 { color: rgba(109,40,217,0.85) !important; }
/* Misc light-mode fixes */
html.light-theme .text-\[10px\] { color: var(--text-muted); }
html.light-theme select option { background: #fff; color: #1e293b; }