/* Nowzaa site theme — toggle via .dark on (localStorage nz_theme) */
html { color-scheme: light; }
html.dark { color-scheme: dark; }
html {
--nz-bg: #fafafa;
--nz-surface: #ffffff;
--nz-surface-alt: #f4f4f5;
--nz-elevated: #ffffff;
--nz-border: #e4e4e7;
--nz-border-strong: #d4d4d8;
--nz-text: #3f3f46;
--nz-text-secondary: #52525b;
--nz-text-muted: #71717a;
--nz-text-dim: #a1a1aa;
--nz-heading: #09090b;
--nz-row-hover: #f4f4f5;
--nz-input-bg: #ffffff;
--nz-header-bg: rgba(250, 250, 250, 0.92);
--nz-dropdown-bg: #ffffff;
--nz-dropdown-border: #d4d4d8;
--nz-dropdown-hover: #f4f4f5;
--nz-dropdown-text: #27272a;
--nz-tooltip-bg: #ffffff;
--nz-tooltip-border: #d4d4d8;
--nz-skeleton-1: #e4e4e7;
--nz-skeleton-2: #d4d4d8;
--nz-shadow: rgba(0, 0, 0, 0.08);
--nz-glass: rgba(255, 255, 255, 0.72);
--nz-card-bg: #ffffff;
--nz-card-bg-soft: rgba(255, 255, 255, 0.95);
--nz-hero-from: #f4f4f5;
--nz-tab-active-bg: #18181b;
--nz-tab-active-text: #fafafa;
--nz-fng-card: linear-gradient(135deg, #ffffff, #f4f4f5);
}
html.dark {
--nz-bg: #09090b;
--nz-surface: #18181b;
--nz-surface-alt: #18181b;
--nz-elevated: #27272a;
--nz-border: #27272a;
--nz-border-strong: #3f3f46;
--nz-text: #e4e4e7;
--nz-text-secondary: #a1a1aa;
--nz-text-muted: #71717a;
--nz-text-dim: #52525b;
--nz-heading: #ffffff;
--nz-row-hover: #18181b;
--nz-input-bg: #18181b;
--nz-header-bg: rgba(9, 9, 11, 0.8);
--nz-dropdown-bg: #18181b;
--nz-dropdown-border: #3f3f46;
--nz-dropdown-hover: #27272a;
--nz-dropdown-text: #e4e4e7;
--nz-tooltip-bg: #27272a;
--nz-tooltip-border: #3f3f46;
--nz-skeleton-1: #27272a;
--nz-skeleton-2: #3f3f46;
--nz-shadow: rgba(0, 0, 0, 0.5);
--nz-glass: rgba(255, 255, 255, 0.06);
--nz-card-bg: rgba(24, 24, 27, 0.7);
--nz-card-bg-soft: rgba(24, 24, 27, 0.8);
--nz-hero-from: #18181b;
--nz-tab-active-bg: #ffffff;
--nz-tab-active-text: #09090b;
--nz-fng-card: linear-gradient(135deg, rgba(39, 39, 42, 0.8), rgba(24, 24, 27, 0.9));
}
/* ---- Brand & surfaces ---- */
.site-brand-name { color: var(--nz-heading); }
html.dark .site-brand-name { color: #ffffff; }
.glass {
background: var(--nz-glass) !important;
border-color: var(--nz-border-strong) !important;
}
.fng-card { background: var(--nz-fng-card); }
.skeleton {
background: linear-gradient(90deg, var(--nz-skeleton-1) 25%, var(--nz-skeleton-2) 50%, var(--nz-skeleton-1) 75%);
}
.coin-row:hover { background-color: var(--nz-row-hover); }
/* ---- Tailwind utility overrides (light mode) ---- */
html:not(.dark) .bg-zinc-950 { background-color: #fafafa !important; }
html:not(.dark) .bg-zinc-900 { background-color: #ffffff !important; }
html:not(.dark) .bg-zinc-800 { background-color: #f4f4f5 !important; }
html:not(.dark) .bg-zinc-900\/50 { background-color: rgba(255, 255, 255, 0.88) !important; }
html:not(.dark) .bg-zinc-900\/60 { background-color: rgba(255, 255, 255, 0.92) !important; }
html:not(.dark) .bg-zinc-900\/70 { background-color: rgba(255, 255, 255, 0.95) !important; }
html:not(.dark) .bg-zinc-900\/80 { background-color: rgba(255, 255, 255, 0.97) !important; }
html:not(.dark) .bg-zinc-950\/80 { background-color: var(--nz-header-bg) !important; }
html:not(.dark) .bg-zinc-950\/60 { background-color: rgba(250, 250, 250, 0.92) !important; }
html:not(.dark) .text-white { color: #18181b !important; }
html:not(.dark) .text-zinc-100 { color: #27272a !important; }
html:not(.dark) .text-zinc-200 { color: #3f3f46 !important; }
html:not(.dark) .text-zinc-300 { color: #52525b !important; }
html:not(.dark) .text-zinc-400 { color: #71717a !important; }
html:not(.dark) .text-zinc-500 { color: #71717a !important; }
html:not(.dark) .text-zinc-600 { color: #a1a1aa !important; }
html:not(.dark) .border-zinc-800 { border-color: #e4e4e7 !important; }
html:not(.dark) .border-zinc-700 { border-color: #d4d4d8 !important; }
html:not(.dark) .border-zinc-600 { border-color: #d4d4d8 !important; }
html:not(.dark) .hover\:text-white:hover { color: #09090b !important; }
html:not(.dark) .hover\:border-white:hover { border-color: #a1a1aa !important; }
html:not(.dark) .hover\:text-violet-300:hover { color: #7c3aed !important; }
html:not(.dark) .group-hover\:text-violet-300:is(:where(.group):hover *) { color: #7c3aed !important; }
html:not(.dark) .divide-zinc-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e4e4e7 !important; }
/* Logo "N" stays white on gradient badge */
html:not(.dark) a[aria-label="Nowzaa home"] .bg-gradient-to-br .text-white { color: #ffffff !important; }
/* Hero gradient sections */
html:not(.dark) .from-zinc-900 { --tw-gradient-from: #f4f4f5 !important; --tw-gradient-to: rgb(244 244 245 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html:not(.dark) .from-zinc-900\/60 { --tw-gradient-from: rgb(244 244 245 / 0.6) !important; --tw-gradient-to: rgb(244 244 245 / 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
/* Markets filter tabs — invert active pill in light mode */
html:not(.dark) [id^="view-"].bg-white.text-zinc-950 {
background-color: #18181b !important;
color: #fafafa !important;
}
html:not(.dark) [id^="view-"]:not(.bg-white) { color: #71717a; }
html:not(.dark) [id^="view-"]:not(.bg-white):hover { color: #18181b; }
/* Table & card headings */
html:not(.dark) #tableHeading,
html:not(.dark) .hero-headline { color: #09090b !important; }
/* Fear & greed gauge */
html:not(.dark) .fng-label { fill: #18181b; }
html:not(.dark) .fng-needle { stroke: #18181b; }
html:not(.dark) #fngNeedle { stroke: #18181b; }
html:not(.dark) .fng-gauge circle[fill="white"] { fill: #18181b; }
html:not(.dark) .fng-info-icon:hover { color: #52525b; }
html:not(.dark) .sortable:hover { color: #52525b; }
html:not(.dark) .coin-row:hover { transform: translateX(4px); }
/* Coin table row text — ensure names read clearly on light surface */
html:not(.dark) #tableBody .font-semibold { color: #18181b; }
html:not(.dark) #tableBody .font-mono { color: #3f3f46; }
/* Search / footer dropdowns (injected by shared.js) */
.gs-results {
background: var(--nz-dropdown-bg);
border-color: var(--nz-dropdown-border);
box-shadow: 0 12px 40px var(--nz-shadow);
}
.gs-item { color: var(--nz-dropdown-text); }
.gs-item:hover, .gs-item.active { background: var(--nz-dropdown-hover); }
.gs-item img { background: var(--nz-dropdown-hover); }
.gs-hint { border-top-color: var(--nz-border); }
.src-tip {
background: var(--nz-tooltip-bg) !important;
border-color: var(--nz-tooltip-border) !important;
box-shadow: 0 8px 24px var(--nz-shadow) !important;
}
.src-tip a { color: var(--nz-dropdown-text) !important; }
html:not(.dark) .src-tip a:hover { background: var(--nz-dropdown-hover) !important; }
html.dark .src-tip a:hover { background: rgba(63, 63, 70, 0.5); }
#siteThemeToggleBtn,
#siteThemeToggleBtnMobile { background: none; cursor: pointer; }
/* ---- News page ---- */
html:not(.dark) .news-card {
background: #ffffff;
border-color: #e4e4e7;
}
html:not(.dark) .news-card:hover {
background: #fafafa;
border-color: #d4d4d8;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
html:not(.dark) .news-card-title,
html:not(.dark) .news-featured-title { color: #18181b; }
html:not(.dark) .source-pill {
border-color: #d4d4d8;
color: #71717a;
}
html:not(.dark) .source-pill:hover { border-color: #a1a1aa; color: #3f3f46; }
/* ---- 404 page ---- */
html:not(.dark) .nz-404 h1 { color: #18181b; }
html:not(.dark) .nz-404 .secondary { border-color: #d4d4d8; color: #52525b; }
html:not(.dark) .nz-404 .secondary:hover { border-color: #71717a; color: #18181b; }
html:not(.dark) .nz-404 .primary { background: #18181b; color: #fafafa; }
html:not(.dark) .nz-404 .primary:hover { background: #27272a; }
/* ---- Portfolio page ---- */
html:not(.dark) .holding-row { border-bottom-color: #e4e4e7; }
html:not(.dark) .holding-row:hover { background: #f4f4f5; }
html:not(.dark) .amount-input { color: #27272a; border-bottom-color: #d4d4d8; }
html:not(.dark) .amount-input::placeholder { color: #a1a1aa; }
html:not(.dark) .add-results {
background: #ffffff;
border-color: #d4d4d8;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
html:not(.dark) .add-result-item { color: #27272a; }
html:not(.dark) .add-result-item:hover,
html:not(.dark) .add-result-item.kbd-active { background: #f4f4f5; }
/* ---- Convert page ---- */
html:not(.dark) .sel-item:hover,
html:not(.dark) .sel-item.kbd-active { background: #f4f4f5; }
html:not(.dark) .pop-card { background: #ffffff; border-color: #e4e4e7; }
html:not(.dark) .pop-card:hover { background: #fafafa; border-color: #d4d4d8; }
html:not(.dark) .fiat-chip { border-color: #d4d4d8; color: #71717a; }
/* ---- Dashboard widgets ---- */
html:not(.dark) .widget-card {
background: #ffffff !important;
border-color: #e4e4e7 !important;
}
html:not(.dark) .widget-card:hover { border-color: #d4d4d8 !important; }
html:not(.dark) .gl-row { border-bottom-color: #e4e4e7; }
html:not(.dark) .gl-row:hover {
background: #f4f4f5 !important;
margin: 0 -0.75rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 0.5rem;
}
html:not(.dark) .coin-chip {
background: #ffffff !important;
border-color: #e4e4e7 !important;
}
html:not(.dark) .coin-chip:hover { border-color: #a1a1aa !important; }
/* ---- Trending section band (index) ---- */
html:not(.dark) section.bg-zinc-900 { background-color: #f4f4f5 !important; }
/* ---- Trending / heatmap tables ---- */
html:not(.dark) .table-scroll-wrap .font-semibold.text-white { color: #18181b !important; }