/*
 * ============================================================================
 * PREMIUM DESIGN SYSTEM — GoldNews Modern Premium Dashboard
 * ============================================================================
 * 
 * Override layer loaded AFTER Tailwind + existing CSS.
 * Transforms visual appearance to a premium SaaS-grade dashboard.
 * 
 * Inspiration: Stripe, Linear, Notion, Vercel, shadcn/ui
 * 
 * @package GoldNews
 * @version 2.0.0
 * ============================================================================
 */

/* ============================================================================
   1. DESIGN TOKENS — CSS Custom Properties
   ============================================================================ */
:root {
	/* ── Primary Palette ── */
	--gn-gold: #eab308;
	--gn-gold-light: #facc15;
	--gn-gold-dark: #ca8a04;
	--gn-gold-muted: rgba(234, 179, 8, 0.15);
	--gn-gold-glow: rgba(234, 179, 8, 0.25);
	--gn-gold-gradient: linear-gradient(135deg, #facc15 0%, #eab308 50%, #ca8a04 100%);

	/* ── Neutral Surfaces ── */
	--gn-bg-deepest: #020617;
	--gn-bg-deep: #0a0f1e;
	--gn-bg-base: #0f172a;
	--gn-bg-elevated: #131c33;
	--gn-bg-surface: #1a2440;
	--gn-bg-hover: #1e293b;
	--gn-bg-active: #243049;

	/* ── Borders ── */
	--gn-border-subtle: rgba(255, 255, 255, 0.04);
	--gn-border-default: rgba(255, 255, 255, 0.07);
	--gn-border-strong: rgba(255, 255, 255, 0.12);
	--gn-border-gold: rgba(234, 179, 8, 0.3);

	/* ── Text ── */
	--gn-text-primary: #f1f5f9;
	--gn-text-secondary: #94a3b8;
	--gn-text-tertiary: #64748b;
	--gn-text-inverted: #020617;

	/* ── Semantic Colors ── */
	--gn-success: #10b981;
	--gn-success-muted: rgba(16, 185, 129, 0.12);
	--gn-danger: #ef4444;
	--gn-danger-muted: rgba(239, 68, 68, 0.12);
	--gn-warning: #f59e0b;
	--gn-info: #3b82f6;

	/* ── Shadows ── */
	--gn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
	--gn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
	--gn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.25);
	--gn-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
	--gn-shadow-gold: 0 0 20px rgba(234, 179, 8, 0.15), 0 0 40px rgba(234, 179, 8, 0.05);
	--gn-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);

	/* ── Radius ── */
	--gn-radius-sm: 6px;
	--gn-radius-md: 10px;
	--gn-radius-lg: 14px;
	--gn-radius-xl: 20px;
	--gn-radius-full: 9999px;

	/* ── Transitions ── */
	--gn-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--gn-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
	--gn-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--gn-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

	/* ── Typography ── */
	--gn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--gn-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
	--gn-tracking-tight: -0.025em;
	--gn-tracking-normal: 0;
	--gn-tracking-wide: 0.05em;
	--gn-tracking-wider: 0.1em;
}


/* ============================================================================
   2. GLOBAL ENHANCEMENTS
   ============================================================================ */

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

/* Selection */
::selection {
	background: var(--gn-gold-muted);
	color: var(--gn-gold-light);
}

/* Focus visible — accessibility ring */
*:focus-visible {
	outline: 2px solid var(--gn-gold);
	outline-offset: 2px;
	border-radius: var(--gn-radius-sm);
}

/* Custom Scrollbar — Global */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
::-webkit-scrollbar-track {
	background: var(--gn-bg-deep);
}
::-webkit-scrollbar-thumb {
	background: var(--gn-bg-surface);
	border-radius: var(--gn-radius-full);
	border: 2px solid var(--gn-bg-deep);
}
::-webkit-scrollbar-thumb:hover {
	background: var(--gn-gold-dark);
}

/* Scrollbar — Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--gn-bg-surface) var(--gn-bg-deep);
}

/* Body — ensure smooth background */
body {
	background-color: var(--gn-bg-base);
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}


/* ============================================================================
   3. HEADER — Glassmorphism Premium
   ============================================================================ */

/* Main header bar */
.site-header,
#masthead {
	background: rgba(0, 0, 0, 0.72) !important;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid var(--gn-border-subtle) !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.03),
		0 4px 30px rgba(0, 0, 0, 0.3) !important;
	transition: background var(--gn-transition-slow), box-shadow var(--gn-transition-slow);
}

/* Logo glow on hover */
.site-branding a:hover {
	filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.4));
	transition: filter var(--gn-transition-base);
}
.site-branding .site-title a {
	background: var(--gn-gold-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Navigation links */
.main-navigation a {
	position: relative;
	letter-spacing: var(--gn-tracking-wide);
}
.main-navigation a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--gn-gold-gradient);
	border-radius: var(--gn-radius-full);
	transition: width var(--gn-transition-base), left var(--gn-transition-base);
}
.main-navigation a:hover::after {
	width: 100%;
	left: 0;
}

/* CTA Button — Premium Gold Gradient */
.header-actions .btn-primary,
.header-actions .btn.btn-primary {
	background: var(--gn-gold-gradient) !important;
	color: var(--gn-text-inverted) !important;
	font-weight: 700;
	letter-spacing: var(--gn-tracking-wide);
	border: none;
	box-shadow: 0 0 16px rgba(234, 179, 8, 0.2), var(--gn-shadow-sm);
	border-radius: var(--gn-radius-sm);
	transition: all var(--gn-transition-base);
}
.header-actions .btn-primary:hover,
.header-actions .btn.btn-primary:hover {
	box-shadow: 0 0 24px rgba(234, 179, 8, 0.35), var(--gn-shadow-md);
	transform: translateY(-1px);
}
.header-actions .btn-primary:active,
.header-actions .btn.btn-primary:active {
	transform: translateY(0) scale(0.98);
}

/* Mobile menu panel */
#mobile-menu-panel {
	background: rgba(10, 15, 30, 0.95) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top: 1px solid var(--gn-border-default) !important;
	box-shadow: var(--gn-shadow-xl);
}

/* Ticker bar */
.site-ticker {
	background: var(--gn-bg-deepest) !important;
	border-bottom: 1px solid var(--gn-border-subtle) !important;
}


/* ============================================================================
   4. CARDS & SURFACES
   ============================================================================ */

/* Base card treatment */
.card,
.news-card {
	background: var(--gn-bg-elevated) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-md) !important;
	box-shadow: var(--gn-shadow-sm), var(--gn-shadow-inset);
	transition: all var(--gn-transition-base);
	overflow: hidden;
}
.card:hover,
.news-card:hover {
	border-color: var(--gn-border-strong) !important;
	box-shadow: var(--gn-shadow-md);
	transform: translateY(-3px);
}

/* Card image overlay gradient */
.news-card-image {
	position: relative;
}
.news-card-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--gn-bg-elevated) 0%, transparent 40%);
	opacity: 0;
	transition: opacity var(--gn-transition-base);
	pointer-events: none;
}
.news-card:hover .news-card-image::after {
	opacity: 0.3;
}

/* Card content area */
.card .p-4,
.news-card .p-4 {
	padding: 1.25rem !important;
}

/* Stat cards — Quick Statistics */
.stat-card {
	background: var(--gn-bg-elevated) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-md) !important;
	box-shadow: var(--gn-shadow-sm), var(--gn-shadow-inset);
	transition: all var(--gn-transition-base);
	position: relative;
}
.stat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--gn-gold-gradient);
	opacity: 0;
	transition: opacity var(--gn-transition-base);
}
.stat-card:hover {
	border-color: var(--gn-border-gold) !important;
	box-shadow: var(--gn-shadow-md), 0 0 20px rgba(234, 179, 8, 0.06);
	transform: translateY(-2px);
}
.stat-card:hover::before {
	opacity: 1;
}

/* Stat icon wrapper */
.stat-card .icon-wrapper {
	background: var(--gn-gold-muted) !important;
	border: 1px solid rgba(234, 179, 8, 0.15);
	transition: all var(--gn-transition-base);
}
.stat-card:hover .icon-wrapper {
	background: rgba(234, 179, 8, 0.2) !important;
	box-shadow: 0 0 12px rgba(234, 179, 8, 0.15);
}

/* Widgets — Gold Price & Latest News */
.gold-price-widget,
.latest-news-widget {
	background: var(--gn-bg-elevated) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-lg) !important;
	box-shadow: var(--gn-shadow-md), var(--gn-shadow-inset);
	transition: box-shadow var(--gn-transition-slow);
}
.gold-price-widget:hover,
.latest-news-widget:hover {
	box-shadow: var(--gn-shadow-lg);
}


/* ============================================================================
   5. GOLD PRICE WIDGET — Premium Treatment
   ============================================================================ */

/* Widget title */
.gold-price-widget h2 {
	letter-spacing: var(--gn-tracking-tight);
}

/* Brand tabs — Pill style */
.gold-price-widget .brand-tab-btn,
.gold-price-widget .widget-tabs button {
	border-radius: var(--gn-radius-sm) !important;
	transition: all var(--gn-transition-fast);
	position: relative;
}
.gold-price-widget .brand-tab-btn.active,
.gold-price-widget .widget-tabs button.active {
	background: var(--gn-gold-muted);
}

/* Price display — refined mono */
.price-data .text-3xl,
.brand-pane .text-3xl {
	font-feature-settings: 'tnum', 'lnum';
	letter-spacing: var(--gn-tracking-tight);
}

/* Price change badge */
.price-data .text-success,
.price-data .text-danger,
.brand-pane .text-success,
.brand-pane .text-danger {
	padding: 2px 8px;
	border-radius: var(--gn-radius-full);
	font-feature-settings: 'tnum';
}
.price-data .text-success,
.brand-pane .text-success {
	background: var(--gn-success-muted);
}
.price-data .text-danger,
.brand-pane .text-danger {
	background: var(--gn-danger-muted);
}

/* Price divider */
.price-sell {
	border-left-color: var(--gn-border-default) !important;
}

/* Widget actions */
.widget-actions .btn {
	border-radius: var(--gn-radius-sm) !important;
	font-weight: 700;
	letter-spacing: var(--gn-tracking-wide);
	transition: all var(--gn-transition-base);
}
.widget-actions .btn-primary {
	background: var(--gn-gold-gradient) !important;
	box-shadow: 0 0 12px rgba(234, 179, 8, 0.15);
}
.widget-actions .btn-primary:hover {
	box-shadow: 0 0 20px rgba(234, 179, 8, 0.3);
	transform: translateY(-1px);
}
.widget-actions .btn:not(.btn-primary) {
	border-color: rgba(234, 179, 8, 0.4) !important;
}
.widget-actions .btn:not(.btn-primary):hover {
	border-color: var(--gn-gold) !important;
	box-shadow: 0 0 12px rgba(234, 179, 8, 0.1);
}


/* ============================================================================
   6. TABLES — Refined Data Display
   ============================================================================ */

/* Table container */
#market-data-widget {
	background: var(--gn-bg-elevated) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-lg) !important;
	box-shadow: var(--gn-shadow-md), var(--gn-shadow-inset);
}

/* Tab navigation pills */
#market-data-widget .tab-btn {
	border-radius: var(--gn-radius-sm);
	transition: all var(--gn-transition-fast);
}
#market-data-widget .tab-btn.active {
	background: var(--gn-gold-muted);
	box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.2);
}

/* Tab content area */
.tabs-content {
	background: var(--gn-bg-deep) !important;
	border-radius: var(--gn-radius-md) !important;
	border: 1px solid var(--gn-border-subtle);
}

/* Table headers */
table thead,
table thead tr {
	background: linear-gradient(180deg, var(--gn-bg-surface) 0%, var(--gn-bg-hover) 100%) !important;
}
table thead th {
	font-weight: 600;
	letter-spacing: var(--gn-tracking-wider);
	text-transform: uppercase;
	font-size: 0.7rem;
	color: var(--gn-text-secondary);
	border-bottom: 1px solid var(--gn-border-default);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* Table rows */
table tbody tr {
	transition: background var(--gn-transition-fast);
	position: relative;
}
table tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.01);
}
table tbody tr:hover {
	background: rgba(234, 179, 8, 0.04) !important;
}
/* Left accent on hover — applied to first-child td to avoid creating an extra anonymous cell */
table tbody td:first-child {
	position: relative;
}
table tbody td:first-child::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--gn-gold);
	opacity: 0;
	transition: opacity var(--gn-transition-fast);
}
table tbody tr:hover > td:first-child::before {
	opacity: 1;
}

/* Table cells */
table tbody td {
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--gn-border-subtle);
}

/* Mono values — tabular nums */
table .font-mono,
td.font-mono {
	font-feature-settings: 'tnum', 'lnum';
	font-family: var(--gn-font-mono);
	font-size: 0.8125rem;
}


/* ============================================================================
   7. BUTTONS — Premium Treatment
   ============================================================================ */

/* Primary buttons */
.btn-primary {
	background: var(--gn-gold-gradient) !important;
	color: var(--gn-text-inverted) !important;
	font-weight: 700;
	letter-spacing: var(--gn-tracking-wide);
	border-radius: var(--gn-radius-sm) !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 12px rgba(234, 179, 8, 0.1);
	transition: all var(--gn-transition-base);
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(234, 179, 8, 0.25);
	transform: translateY(-1px);
	filter: brightness(1.05);
}
.btn-primary:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 8px rgba(234, 179, 8, 0.15);
}

/* Tab buttons — Shared across widgets */
.tab-btn,
[role="tab"] {
	transition: all var(--gn-transition-fast);
	border-radius: var(--gn-radius-sm);
	position: relative;
}

/* Latest news tab styling */
#latest-news-widget .tab-btn {
	padding-bottom: 0.625rem;
}
#latest-news-widget .tab-btn[aria-selected="true"],
#latest-news-widget .tab-btn.text-text-light {
	position: relative;
}

/* News item hover */
.news-item {
	padding: 0.75rem;
	border-radius: var(--gn-radius-sm);
	transition: background var(--gn-transition-fast);
}
.news-item:hover {
	background: rgba(255, 255, 255, 0.02);
}


/* ============================================================================
   8. FORMS & INPUTS
   ============================================================================ */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: var(--gn-bg-deep) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-sm) !important;
	color: var(--gn-text-primary);
	box-shadow: var(--gn-shadow-inset);
	transition: all var(--gn-transition-fast);
	padding: 0.625rem 1rem;
}
input:focus,
textarea:focus,
select:focus {
	border-color: var(--gn-gold) !important;
	box-shadow: 0 0 0 3px var(--gn-gold-muted), var(--gn-shadow-inset) !important;
	background: var(--gn-bg-base) !important;
	outline: none;
}

/* Newsletter input — special treatment */
.newsletter-form input[type="email"],
.newsletter-section input[type="email"] {
	background: var(--gn-bg-deepest) !important;
	border: 1px solid var(--gn-border-strong) !important;
	font-size: 0.9375rem;
}
.newsletter-form input[type="email"]:focus,
.newsletter-section input[type="email"]:focus {
	border-color: var(--gn-gold) !important;
	box-shadow: 0 0 0 3px var(--gn-gold-muted) !important;
}

/* Newsletter submit */
.newsletter-form .btn-primary,
.newsletter-section .btn-primary {
	box-shadow: 0 0 20px rgba(234, 179, 8, 0.2), var(--gn-shadow-md) !important;
}
.newsletter-form .btn-primary:hover,
.newsletter-section .btn-primary:hover {
	box-shadow: 0 0 30px rgba(234, 179, 8, 0.35), var(--gn-shadow-lg) !important;
}


/* ============================================================================
   9. SECTION HEADERS
   ============================================================================ */

.section-header {
	border-bottom: 1px solid var(--gn-border-default) !important;
	position: relative;
	padding-bottom: 0.75rem !important;
}
.section-header::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 50px;
	height: 2px;
	background: var(--gn-gold-gradient);
	border-radius: var(--gn-radius-full);
}

.section-header h2 {
	font-weight: 800;
	letter-spacing: var(--gn-tracking-wide);
	font-size: 1.125rem;
}

/* "View all" links with arrow animation */
.section-header a {
	transition: all var(--gn-transition-fast);
	letter-spacing: var(--gn-tracking-wide);
}
.section-header a svg {
	transition: transform var(--gn-transition-base);
}
.section-header a:hover svg {
	transform: translateX(4px);
}
.section-header a:hover {
	color: var(--gn-gold-light);
}


/* ============================================================================
   10. HERO SECTION
   ============================================================================ */

.hero-section {
	background: var(--gn-bg-deepest) !important;
	border-bottom: 1px solid var(--gn-border-subtle) !important;
}

/* Hero slide overlay — richer gradient */
.hero-slide > div[class*="bg-gradient"] {
	background: linear-gradient(
		to top,
		rgba(2, 6, 23, 0.95) 0%,
		rgba(2, 6, 23, 0.6) 35%,
		rgba(2, 6, 23, 0.2) 60%,
		rgba(2, 6, 23, 0.05) 100%
	) !important;
}

/* Hero category badge — glassmorphism */
.hero-slide .bg-primary-gold {
	background: rgba(234, 179, 8, 0.9) !important;
	backdrop-filter: blur(8px);
	border: 1px solid rgba(234, 179, 8, 0.3);
	border-radius: var(--gn-radius-sm) !important;
	box-shadow: 0 2px 8px rgba(234, 179, 8, 0.2);
}

/* Hero title — refined shadow */
.hero-slide h2 {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	letter-spacing: var(--gn-tracking-tight);
}

/* Hero dots — refined */
.hero-dot {
	transition: all var(--gn-transition-base) !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-dot:hover {
	border-color: rgba(234, 179, 8, 0.5);
}

/* Hero carousel container */
#hero-carousel {
	border-radius: var(--gn-radius-lg) !important;
	box-shadow: var(--gn-shadow-lg);
	border: 1px solid var(--gn-border-subtle);
}


/* ============================================================================
   11. QUICK STATISTICS SECTION
   ============================================================================ */

.quick-stats {
	border-bottom: 1px solid var(--gn-border-subtle) !important;
}

/* Bank rates link card */
.quick-stats a.stat-card {
	border-style: dashed !important;
	border-color: var(--gn-border-strong) !important;
}
.quick-stats a.stat-card:hover {
	border-style: solid !important;
	border-color: var(--gn-gold) !important;
	background: var(--gn-gold-muted) !important;
}


/* ============================================================================
   12. NEWSLETTER SECTION
   ============================================================================ */

.newsletter-section {
	background: var(--gn-bg-deepest) !important;
	border-top: 1px solid var(--gn-border-subtle) !important;
	border-bottom: 1px solid var(--gn-border-subtle) !important;
}

.newsletter-section > div > div {
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-xl) !important;
	background: linear-gradient(135deg, var(--gn-bg-elevated) 0%, var(--gn-bg-base) 100%) !important;
	box-shadow: var(--gn-shadow-lg), var(--gn-shadow-inset);
}

/* Icon circle */
.newsletter-info .w-16 {
	background: var(--gn-gold-muted) !important;
	border: 1px solid rgba(234, 179, 8, 0.15);
}


/* ============================================================================
   13. FOOTER — Refined
   ============================================================================ */

.footer-widgets {
	background: var(--gn-bg-deepest) !important;
	border-top: 1px solid var(--gn-border-default) !important;
}

/* Widget title underline — gradient */
.footer-widgets .widget-title {
	position: relative;
	letter-spacing: var(--gn-tracking-wider);
}
.footer-widgets .widget-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30px;
	height: 2px;
	background: var(--gn-gold-gradient) !important;
	border-radius: var(--gn-radius-full);
}

/* Footer links */
.footer-widgets a {
	transition: color var(--gn-transition-fast), transform var(--gn-transition-fast);
}
.footer-widgets li a:hover {
	color: var(--gn-gold-light);
	transform: translateX(3px);
}
.footer-widgets li {
	transition: transform var(--gn-transition-fast);
}

/* Social icons — Glassmorphism */
.social-links a {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid var(--gn-border-subtle);
	backdrop-filter: blur(8px);
	transition: all var(--gn-transition-base) !important;
}
.social-links a:hover {
	background: var(--gn-gold) !important;
	border-color: var(--gn-gold) !important;
	box-shadow: 0 0 16px rgba(234, 179, 8, 0.25);
	transform: translateY(-2px);
}

/* Site info bar */
.site-info {
	background: var(--gn-bg-deepest) !important;
	border-top: 1px solid var(--gn-border-subtle) !important;
}


/* ============================================================================
   14. SINGLE POST / CONTENT PAGES
   ============================================================================ */

/* Article container */
.single-post-article {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

/* Entry header */
.entry-header {
	border-bottom-color: var(--gn-border-default) !important;
}

/* Category badge */
.entry-meta .bg-primary-gold {
	background: var(--gn-gold-gradient) !important;
	border-radius: var(--gn-radius-sm) !important;
	box-shadow: 0 2px 6px rgba(234, 179, 8, 0.2);
	transition: box-shadow var(--gn-transition-fast);
}
.entry-meta .bg-primary-gold:hover {
	box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
}

/* Author box — Premium card */
.author-box {
	background: var(--gn-bg-elevated) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-lg) !important;
	box-shadow: var(--gn-shadow-md), var(--gn-shadow-inset);
}

/* Post navigation */
.post-navigation .nav-link,
.post-navigation a {
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-md) !important;
	background: var(--gn-bg-elevated);
	transition: all var(--gn-transition-base) !important;
}
.post-navigation .nav-link:hover,
.post-navigation a:hover {
	border-color: var(--gn-border-gold) !important;
	box-shadow: var(--gn-shadow-md), 0 0 16px rgba(234, 179, 8, 0.06);
	transform: translateY(-2px);
}

/* Tag pills */
.post-tags a {
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-full) !important;
	background: var(--gn-bg-deep) !important;
	transition: all var(--gn-transition-fast) !important;
	font-size: 0.8125rem;
}
.post-tags a:hover {
	border-color: var(--gn-border-gold) !important;
	background: var(--gn-gold-muted) !important;
	color: var(--gn-gold-light) !important;
}

/* Content prose */
.entry-content blockquote {
	border-left: 3px solid var(--gn-gold) !important;
	background: var(--gn-bg-elevated);
	padding: 1.25rem 1.5rem;
	border-radius: 0 var(--gn-radius-sm) var(--gn-radius-sm) 0;
	margin: 1.5rem 0;
}

/* Knowledge cards */
.knowledge-list article {
	background: var(--gn-bg-elevated) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-md) !important;
	transition: all var(--gn-transition-base) !important;
}
.knowledge-list article:hover {
	border-color: var(--gn-border-gold) !important;
	box-shadow: var(--gn-shadow-md);
	transform: translateY(-1px);
}

/* Knowledge icon */
.knowledge-list .w-12 {
	border-radius: var(--gn-radius-md) !important;
	transition: all var(--gn-transition-base);
}


/* ============================================================================
   15. DATA PAGES — Chi Tiết Giá Vàng, Tỷ Giá Ngân Hàng
   ============================================================================ */

/* Page header */
.page-header h1 {
	background: var(--gn-gold-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 800;
	letter-spacing: var(--gn-tracking-tight);
}

/* Data table container */
.site-main > div > .bg-black,
.site-main .bg-black[class*="border"] {
	background: var(--gn-bg-elevated) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-lg) !important;
	box-shadow: var(--gn-shadow-lg), var(--gn-shadow-inset);
	overflow: hidden;
}

/* Company group headers */
table td[colspan="4"].bg-gray-800,
table td[colspan].bg-gray-800 {
	background: linear-gradient(90deg, var(--gn-bg-surface) 0%, var(--gn-bg-hover) 100%) !important;
	border-top: 1px solid var(--gn-border-default) !important;
	border-bottom: 1px solid var(--gn-border-default) !important;
	font-weight: 700;
	letter-spacing: var(--gn-tracking-wide);
}

/* Metal group header (VÀNG / BẠC) */
table td[colspan="4"].bg-\\[\\#111\\],
table td[colspan].text-lg {
	background: linear-gradient(90deg, var(--gn-bg-deep) 0%, var(--gn-bg-base) 100%) !important;
	font-weight: 900;
	letter-spacing: var(--gn-tracking-wider);
}

/* Note box — Premium info card */
.site-main .bg-dark-bg[class*="border"][class*="rounded"] {
	background: var(--gn-bg-elevated) !important;
	border: 1px solid var(--gn-border-default) !important;
	border-radius: var(--gn-radius-md) !important;
	box-shadow: var(--gn-shadow-sm);
	border-left: 3px solid var(--gn-gold) !important;
}


/* ============================================================================
   16. VIDEOS SECTION
   ============================================================================ */

/* Main video card */
.videos-widget a[class*="col-span-8"] {
	border-radius: var(--gn-radius-lg) !important;
	box-shadow: var(--gn-shadow-lg);
	border: 1px solid var(--gn-border-subtle);
}

/* Play button */
.videos-widget .w-16.h-16,
.videos-widget [class*="bg-primary-gold"][class*="rounded-full"] {
	background: var(--gn-gold) !important;
	box-shadow: 0 0 24px rgba(234, 179, 8, 0.3), var(--gn-shadow-md);
	transition: all var(--gn-transition-base);
}
.videos-widget a:hover .w-16.h-16,
.videos-widget a:hover [class*="bg-primary-gold"][class*="rounded-full"] {
	box-shadow: 0 0 36px rgba(234, 179, 8, 0.5), var(--gn-shadow-lg);
}

/* Side video items */
.videos-widget .flex.gap-4 {
	border-radius: var(--gn-radius-sm);
	padding: 0.375rem;
	transition: background var(--gn-transition-fast);
}
.videos-widget .flex.gap-4:hover {
	background: rgba(255, 255, 255, 0.02);
}


/* ============================================================================
   17. RESPONSIVE OVERRIDES
   ============================================================================ */

/* ── Mobile (< 640px) ── */
@media (max-width: 639px) {
	/* Header */
	.header-main {
		padding-top: 0.625rem;
		padding-bottom: 0.625rem;
	}
	.header-actions .btn-primary,
	.header-actions .btn.btn-primary {
		padding: 0.5rem 0.875rem !important;
		font-size: 0.75rem;
	}

	/* Stat cards */
	.stat-card {
		padding: 0.75rem !important;
	}

	/* Tables */
	table thead th {
		font-size: 0.625rem;
		padding: 0.5rem 0.375rem;
	}
	table tbody td {
		padding: 0.625rem 0.375rem;
		font-size: 0.8125rem;
	}

	/* Gold price widget */
	.gold-price-widget {
		padding: 1rem !important;
	}
	.widget-tabs {
		gap: 0.25rem;
	}
	.brand-tab-btn {
		padding: 0.375rem 0.625rem !important;
		font-size: 0.75rem !important;
	}

	/* Section headers */
	.section-header h2 {
		font-size: 0.9375rem;
	}

	/* Cards */
	.card:hover,
	.news-card:hover,
	.stat-card:hover {
		transform: none;
	}

	/* Page headers */
	.page-header h1 {
		font-size: 1.5rem !important;
	}

	/* Single article */
	.single-post-article {
		padding: 1rem 0.5rem;
	}

	/* Footer */
	.footer-widgets {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
}

/* ── Tablet (640px - 1023px) ── */
@media (min-width: 640px) and (max-width: 1023px) {
	.stat-card {
		padding: 0.875rem !important;
	}

	/* Reduce hover transforms on touch */
	.card:hover,
	.news-card:hover {
		transform: translateY(-2px);
	}
}

/* ── Desktop (1024px+) ── */
@media (min-width: 1024px) {
	/* Increase container max widths slightly for breathing room */
	.container {
		max-width: 1200px;
	}
}

/* Touch-friendly targets */
@media (pointer: coarse) {
	.tab-btn,
	.brand-tab-btn,
	.menu-toggle,
	button:not(.hero-dot) {
		min-height: 44px;
		min-width: 44px;
	}

	/* Disable hover transforms on touch devices */
	.card:hover,
	.news-card:hover,
	.stat-card:hover {
		transform: none;
	}
}


/* ============================================================================
   18. STATES — Loading, Empty, Error, Success
   ============================================================================ */

/* Loading state — pulse animation */
table td[class*="text-center"][class*="text-gray-500"],
.tab-pane td[colspan] {
	animation: gn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	font-style: italic;
	letter-spacing: var(--gn-tracking-wide);
}

@keyframes gn-pulse {
	0%, 100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}

/* Empty state text */
p.text-text-muted:only-child {
	text-align: center;
	padding: 2rem 1rem;
	font-style: italic;
	letter-spacing: var(--gn-tracking-wide);
	opacity: 0.7;
}

/* Success color enhancements */
.text-success {
	color: var(--gn-success) !important;
}

/* Danger color enhancements */
.text-danger {
	color: var(--gn-danger) !important;
}


/* ============================================================================
   19. MICRO-ANIMATIONS
   ============================================================================ */

/* Section fade-in on load */
@keyframes gn-fadeInUp {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-section,
.quick-stats,
.chart-news-section,
.analysis-section,
.videos-knowledge-section,
.newsletter-section {
	animation: gn-fadeInUp 0.6s ease-out both;
}

.quick-stats { animation-delay: 0.1s; }
.chart-news-section { animation-delay: 0.15s; }
.analysis-section { animation-delay: 0.2s; }
.videos-knowledge-section { animation-delay: 0.25s; }
.newsletter-section { animation-delay: 0.3s; }

/* Card hover lift — universal */
@keyframes gn-hoverLift {
	to { transform: translateY(-3px); }
}

/* Link underline slide — for content links */
.entry-content a:not([class]) {
	position: relative;
	text-decoration: none;
}
.entry-content a:not([class])::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 0;
	height: 1px;
	background: currentColor;
	transition: width var(--gn-transition-base);
}
.entry-content a:not([class]):hover::after {
	width: 100%;
}

/* Button press effect */
.btn:active,
button:active {
	transform: scale(0.97);
	transition: transform 100ms ease;
}

/* Smooth tab underline for latest news widget */
#latest-news-widget .widget-tabs {
	position: relative;
}

/* Bookmark icon hover */
.news-item button:hover svg {
	transform: scale(1.15);
	transition: transform var(--gn-transition-fast);
}


/* ============================================================================
   20. UTILITY CLASSES — Premium Overrides
   ============================================================================ */

/* Refined border colors */
.border-gray-800 {
	border-color: var(--gn-border-default) !important;
}
.border-gray-700 {
	border-color: var(--gn-border-strong) !important;
}
.divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
	border-color: var(--gn-border-subtle) !important;
}

/* Refined backgrounds */
.bg-dark-bg {
	background-color: var(--gn-bg-base) !important;
}
.bg-darker-bg {
	background-color: var(--gn-bg-deepest) !important;
}
.bg-black {
	background-color: var(--gn-bg-deep) !important;
}

/* Primary gold text gradient for special headings */
.text-primary-gold {
	color: var(--gn-gold) !important;
}

/* Shadow overrides */
.shadow-sm {
	box-shadow: var(--gn-shadow-sm) !important;
}
.shadow-md,
.hover\:shadow-md:hover {
	box-shadow: var(--gn-shadow-md) !important;
}
.shadow-lg {
	box-shadow: var(--gn-shadow-lg) !important;
}
.shadow-xl {
	box-shadow: var(--gn-shadow-xl) !important;
}

/* Custom scrollbar — matching data widget */
.custom-scrollbar::-webkit-scrollbar {
	height: 6px;
	width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
	background: var(--gn-bg-deep);
	border-radius: var(--gn-radius-full);
}
.custom-scrollbar::-webkit-scrollbar-thumb {
	background: var(--gn-bg-surface);
	border-radius: var(--gn-radius-full);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background: var(--gn-gold-dark);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}