:root {
			--bg: #0e1117;
			--panel: #161b24;
			--panel-alt: #1c222d;
			--border: #262d3a;
			--gold: #e0b13d;
			--silver: #b8c2cc;
			--text: #e8eaed;
			--text-muted: #7c8698;
			--green: #2ecc8f;
			--red: #ff5c6c;
		}
 
		* { box-sizing: border-box; }
 
		html, body {
			font-family: 'Outfit', sans-serif;
			background: var(--bg);
			color: var(--text);
			margin: 0;
			padding: 0;
			height: 100%;
		}
 
		body {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			overflow-x: hidden;
		}
 
		a { text-decoration: none; }
 
		header.site-header {
			background: var(--panel);
			border-bottom: 1px solid var(--border);
			padding: 14px 40px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
			flex-wrap: wrap;
		}
 
		.site-header .brand {
			display: flex;
			align-items: center;
			gap: 10px;
		}
 
		.site-header .brand img.logo {
			height: 34px;
			width: auto;
			display: block;
		}
 
		.site-header .brand .brand-text {
			font-weight: 700;
			font-size: 20px;
			letter-spacing: 0.2px;
			color: var(--text);
			display: flex;
			align-items: center;
			gap: 8px;
		}
 
		.site-header .brand .brand-text .dot {
			width: 9px; height: 9px;
			border-radius: 50%;
			background: var(--gold);
			flex-shrink: 0;
		}
 
		.site-header .brand .brand-text span.accent { color: var(--gold); }
 
		.site-header .page-title-tag {
			font-size: 12px;
			font-weight: 600;
			letter-spacing: 0.6px;
			text-transform: uppercase;
			color: var(--text-muted);
			border-left: 1px solid var(--border);
			padding-left: 18px;
			margin-left: 4px;
		}
 
		.site-header .market-status {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 12px;
			font-weight: 600;
			color: var(--green);
			letter-spacing: 0.6px;
		}
 
		.site-header .status-blip {
			width: 6px; height: 6px;
			border-radius: 50%;
			background: var(--green);
			box-shadow: 0 0 8px var(--green);
			animation: blip 1.6s infinite;
			flex-shrink: 0;
		}
 
		@keyframes blip {
			0%, 100% { opacity: 1; }
			50% { opacity: 0.3; }
		}
		.brand {
			font-weight: 700;
			font-size: 20px;
			display: flex;
			align-items: center;
			gap: 10px;
			letter-spacing: 0.2px;
		}

		.brand .dot {
			width: 9px; height: 9px;
			border-radius: 50%;
			background: var(--gold);
			flex-shrink: 0;
		}

		.brand span { color: var(--gold); }

		.market-status {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 12px;
			font-weight: 600;
			color: var(--green);
			letter-spacing: 0.6px;
		}

		.status-blip {
			width: 6px; height: 6px;
			border-radius: 50%;
			background: var(--green);
			box-shadow: 0 0 8px var(--green);
			animation: blip 1.6s infinite;
			flex-shrink: 0;
		}

		@keyframes blip {
			0%, 100% { opacity: 1; }
			50% { opacity: 0.3; }
		}

	   .summary-strip {
	display: flex;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}
 
.summary-cell {
	flex: 1 1 0;
	background: var(--panel);
	padding: 22px 40px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	border-right: 1px solid var(--border);
	min-width: 220px;
}
 
.summary-cell:last-child { border-right: none; }
 
.summary-cell .label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--text-muted);
	font-weight: 600;
	width: 92px;
	flex-shrink: 0;
}
 
.summary-cell .value {
	font-size: 27px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.3px;
}
 
.summary-cell.gold .value { color: var(--gold); }
.summary-cell.silver .value { color: var(--silver); }
 
.summary-cell .unit {
	font-size: 12px;
	color: var(--text-muted);
	margin-left: 2px;
}
 
/* ---------- Page wrap ---------- */
.page-wrap {
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding: 64px 24px 10px;
}
 
/* ---------- Rates grid ---------- */
.rates-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}
 
.metal-panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
}
 
.panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid var(--border);
	background: var(--panel-alt);
	flex-wrap: wrap;
	gap: 6px;
}
 
.panel-head .title {
	font-weight: 600;
	font-size: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	letter-spacing: 0.2px;
}
 
.panel-head .bar {
	width: 3px;
	height: 18px;
	border-radius: 2px;
	flex-shrink: 0;
}
 
.panel-head.gold .bar { background: var(--gold); }
.panel-head.silver .bar { background: var(--silver); }
 
.panel-head .timestamp {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.4px;
}
 
/* ---------- Table (horizontally scrollable safety net on very small screens) ---------- */
.metal-panel .table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
 
table.rate-table {
	width: 100%;
	min-width: 340px;
	border-collapse: collapse;
	table-layout: fixed;
}
 
table.rate-table colgroup col.col-purity { width: 140px; }
table.rate-table colgroup col.col-num { width: auto; }
 
table.rate-table thead th {
	text-align: left;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-muted);
	font-weight: 600;
	padding: 14px 24px 10px;
}
 
table.rate-table thead th.num { text-align: right; }
 
table.rate-table tbody tr {
	border-top: 1px solid var(--border);
	transition: background 0.15s ease;
}
 
table.rate-table tbody tr:hover { background: var(--panel-alt); }
 
table.rate-table tbody td {
	padding: 13px 24px;
	font-size: 13.5px;
	vertical-align: middle;
}
 
table.rate-table tbody td.num {
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
 
.purity-tag {
	display: inline-block;
	background: var(--panel-alt);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 3px 9px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--text-muted);
	white-space: nowrap;
	letter-spacing: 0.3px;
}
 
.sell-val { color: var(--red); }
.buy-val { color: var(--green); }
 
/* ---------- Price movement colors (overrides sell/buy default) ---------- */
table.rate-table tbody td.num.price-up {
	color: var(--green) !important;
}
 
table.rate-table tbody td.num.price-down {
	color: var(--red) !important;
}
 
table.rate-table tbody td.num.price-stable {
	color: var(--blue, #4d9dff) !important;
}
 
.summary-cell .value.price-up { color: var(--green) !important; }
.summary-cell .value.price-down { color: var(--red) !important; }
.summary-cell .value.price-stable { color: var(--blue, #4d9dff) !important; }
 
/* small "auto-refreshing" note — distinct from footer.site-footer in footer.php */
footer.page-footer {
	text-align: center;
	padding: 32px 0 10px;
	color: var(--text-muted);
	font-size: 11.5px;
	letter-spacing: 0.2px;
}
 
/* ============================================================
   Responsive breakpoints
   ============================================================ */
 
@media (max-width: 860px) {
	.rates-grid { grid-template-columns: 1fr; }
 
	.page-wrap { padding: 40px 20px 10px; }
}
 
@media (max-width: 600px) {
	.summary-strip { flex-direction: column; }
 
	.summary-cell {
		border-right: none;
		border-bottom: 1px solid var(--border);
		padding: 16px 20px;
		justify-content: flex-start;
		min-width: 0;
	}
 
	.summary-cell:last-child { border-bottom: none; }
 
	.summary-cell .value { font-size: 22px; }
 
	.summary-cell .label { width: 72px; font-size: 11px; }
 
	.page-wrap { padding: 28px 14px 10px; }
 
	.rates-grid { gap: 14px; }
 
	.panel-head { padding: 14px 16px; }
 
	.panel-head .title { font-size: 14px; }
 
	.panel-head .timestamp { font-size: 10px; }
 
	table.rate-table thead th { padding: 10px 14px 8px; font-size: 10px; }
 
	table.rate-table tbody td { padding: 11px 14px; font-size: 12.5px; }
 
	table.rate-table colgroup col.col-purity { width: 100px; }
}
 
@media (max-width: 420px) {
	.summary-cell .value { font-size: 19px; }
 
	table.rate-table tbody td { padding: 10px 10px; font-size: 12px; }
 
	table.rate-table thead th { padding: 8px 10px 6px; font-size: 9.5px; }
 
	.purity-tag { font-size: 10.5px; padding: 2px 7px; }
 
	table.rate-table colgroup col.col-purity { width: 88px; }
}
		footer.page-footer {
			text-align: center;
			padding: 32px 0 10px;
			color: var(--text-muted);
			font-size: 11.5px;
			letter-spacing: 0.2px;
		}
		
        footer.site-footer {
    		background: var(--panel);
    		border-top: 1px solid var(--border);
    		margin-top: 60px;
    		width: 100%;
    		flex-shrink: 0;
    	}
 
    	footer.site-footer .footer-grid {
    		max-width: 1180px;
    		margin: 0 auto;
    		padding: 48px 24px 32px;
    		display: grid;
    		grid-template-columns: 1.3fr 1fr 1.2fr 1.1fr;
    		gap: 32px;
    	}
     
    	@media (max-width: 860px) {
    		footer.site-footer .footer-grid {
    			grid-template-columns: 1fr 1fr;
    		}
    	}
     
    	@media (max-width: 520px) {
    		footer.site-footer .footer-grid {
    			grid-template-columns: 1fr;
    		}
    	}
     
    	footer.site-footer h6 {
    		font-size: 12px;
    		text-transform: uppercase;
    		letter-spacing: 1px;
    		color: var(--text-muted);
    		font-weight: 600;
    		margin-bottom: 16px;
    	}
     
    	footer.site-footer .f-brand {
    		display: flex;
    		align-items: center;
    		gap: 8px;
    		font-weight: 700;
    		font-size: 18px;
    		margin-bottom: 12px;
    	}
     
    	footer.site-footer .f-brand .dot {
    		width: 8px; height: 8px;
    		border-radius: 50%;
    		background: var(--gold);
    		flex-shrink: 0;
    	}
     
    	footer.site-footer .f-brand span.accent { color: var(--gold); }
     
    	footer.site-footer .about-text {
    		font-size: 13px;
    		line-height: 1.7;
    		color: var(--text-muted);
    		max-width: 320px;
    	}
     
    	footer.site-footer ul.f-links {
    		list-style: none;
    		margin: 0;
    		padding: 0;
    	}
     
    	footer.site-footer ul.f-links li {
    		margin-bottom: 10px;
    	}
     
    	footer.site-footer ul.f-links a {
    		font-size: 13.5px;
    		color: var(--text);
    		opacity: 0.85;
    		transition: opacity 0.15s ease, color 0.15s ease;
    	}
     
    	footer.site-footer ul.f-links a:hover {
    		opacity: 1;
    		color: var(--gold);
    	}
     
    	footer.site-footer .f-address {
    		font-size: 13px;
    		line-height: 1.8;
    		color: var(--text-muted);
    	}
     
    	footer.site-footer .f-address .addr-line {
    		display: flex;
    		gap: 10px;
    		margin-bottom: 12px;
    	}
     
    	footer.site-footer .f-address i {
    		color: var(--gold);
    		margin-top: 2px;
    		flex-shrink: 0;
    	}
     
    	footer.site-footer .store-badges {
    		display: flex;
    		flex-direction: column;
    		gap: 10px;
    		margin-top: 4px;
    	}
     
    	footer.site-footer .store-badge {
    		display: flex;
    		align-items: center;
    		gap: 10px;
    		background: var(--panel-alt);
    		border: 1px solid var(--border);
    		border-radius: 8px;
    		padding: 9px 14px;
    		transition: border-color 0.15s ease, transform 0.15s ease;
    	}
     
    	footer.site-footer .store-badge:hover {
    		border-color: var(--gold);
    		transform: translateY(-1px);
    	}
     
    	footer.site-footer .store-badge i {
    		font-size: 20px;
    		color: var(--text);
    		flex-shrink: 0;
    	}
     
    	footer.site-footer .store-badge .store-text {
    		display: flex;
    		flex-direction: column;
    		line-height: 1.2;
    	}
     
    	footer.site-footer .store-badge .store-text small {
    		font-size: 10px;
    		color: var(--text-muted);
    	}
     
    	footer.site-footer .store-badge .store-text strong {
    		font-size: 13px;
    		color: var(--text);
    	}
     
    	footer.site-footer .footer-bottom {
    		border-top: 1px solid var(--border);
    		padding: 18px 24px;
    		text-align: center;
    		color: var(--text-muted);
    		font-size: 11.5px;
    		letter-spacing: 0.2px;
    	}
	    #configTabs .nav-link {
            color: #6c757d;
            border: none;
            border-bottom: 2px solid transparent;
        }
        
        #configTabs .nav-link.active {
            color: #2d3540;
            font-weight: 600;
            background-color: transparent;
        }
        
        #configTabs #gold-tab.active {
            border-bottom: 2px solid #c9932e;
        }
        
        #configTabs #silver-tab.active {
            border-bottom: 2px solid #5a6b78;
        }