#now-btn {
	padding: 6px 16px;
	font-size: 13px;
	border: 0.5px solid #534ab7;
	border-radius: 6px;
	background: #534ab7;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s;
}

#now-btn:hover {
	background: #3c3489;
	border-color: #3c3489;
}

/* Charts */
.chart-wrap {
	background: #fff;
	border: 0.5px solid #ddd;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}

.chart-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.chart-title {
	font-size: 13px;
	font-weight: 500;
	color: #555;
}

.chart-container {
	width: 100%;
	height: 280px;
	position: relative;
}

/* Table */
#table-wrap {
	overflow-x: auto;
}

#OutputTable {
	border-collapse: separate;
	border-spacing: 0;
	border: 0.5px solid #ddd;
	border-radius: 10px;
	min-width: 560px;
	background: #fff;
	font-size: 13px;
}

#OutputTable th,
#OutputTable td {
	padding: 8px 14px;
	border-bottom: 0.5px solid #eee;
	white-space: nowrap;
}

#OutputTable td:not(:first-child) {
	text-align: right;
}

#OutputTable thead th {
	background: #534ab7;
	color: #fff;
	font-weight: 500;
	text-align: left;
}

#OutputTable thead th:first-child { border-radius: 10px 0 0 0; }
#OutputTable thead th:last-child  { border-radius: 0 10px 0 0; }

#OutputTable tbody tr:last-child td { border-bottom: none; }
#OutputTable tbody tr:nth-child(even) { background: #f7f6f4; }
#OutputTable tbody tr { cursor: pointer; transition: background 0.1s; }
#OutputTable tbody tr:hover { background: #ebe9f8; }
#OutputTable tbody tr.active { background: #d5d0f0; }

@media (prefers-color-scheme: dark) {
	.chart-wrap { background: #2c2c2a; border-color: #444; }
	.chart-title { color: #aaa; }
	#OutputTable { background: #2c2c2a; border-color: #444; }
	#OutputTable th, #OutputTable td { border-color: #3a3a38; }
	#OutputTable tbody tr:nth-child(even) { background: #242422; }
	#OutputTable tbody tr:hover { background: #35325a; }
	#OutputTable tbody tr.active { background: #3c3875; }
}