:root {
	--bg-deep: #050a0e;
	--bg-muted: #1a2633;
	--bg-darker: #0e161f;
	--bg-panel: #131c25;
	--neon-green: #00ff41;
	--secondary-glow: #008f7a;
	--neon-dim: rgba(0, 255, 65, 0.15);
	--text-base: #e0e0e0;
	--text-bright: #ffffff;
	--text-muted: #a0aab8;
	--text-inactive: #555;
	--font-header: 'Orbitron', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'Fira Code', monospace
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

body {
	background-color: var(--bg-deep);
	color: var(--text-bright);
	font-family: var(--font-body);
	padding-bottom: 60px
}

a {
	text-decoration: none;
	color: inherit
}

.scanlines {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 99;
	background: repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgb(0 255 65 / .03) 3px,rgb(0 255 65 / .03) 4px)
}

.blinking-icon {
	animation: blink 2s infinite
}

@keyframes blink {
	50% {
		opacity: .5
	}
}

.text-neon {
	color: var(--neon-green)
}

.text-muted {
	color: var(--text-muted)
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px
}

.console-header {
	background: rgb(5 10 14 / .95);
	border-bottom: 1px solid var(--secondary-glow);
	padding: 20px 0;
	margin-bottom: 30px;
	backdrop-filter: blur(5px);
	position: sticky;
	top: 0;
	z-index: 100
}

.logo {
	font-family: var(--font-header);
	color: var(--neon-green);
	font-size: 1.4rem;
	letter-spacing: 1px;
	text-align: center
}

.logo-link {
	transition: transform 0.2s
}

.logo-link:hover {
	transform: scale(1.02);
	text-shadow: 0 0 10px var(--neon-dim)
}

.brand-icon {
	height: 1.2em;
	width: auto;
	vertical-align: middle;
	margin-bottom: 4px;
	border-radius: 4px
}

.blinking-icon {
	animation: blink-glow 2s infinite
}

@keyframes blink-glow {
	0%,100% {
		opacity: 1;
		filter: drop-shadow(0 0 5px var(--neon-green))
	}

	50% {
		opacity: .7;
		filter: drop-shadow(0 0 2px var(--neon-green))
	}
}

.section-title {
	font-family: var(--font-mono);
	color: var(--neon-green);
	margin-bottom: 20px;
	font-size: 1rem
}

.section-title-header {
	font-family: var(--font-mono);
	color: var(--neon-green);
	margin-bottom: 20px;
	font-size: 2rem
	margin-top: 20px;
}

.feed-group {
	min-height: 100px;
	display: flex;
	flex-direction: column;
	gap: 15px
}

.nav-links {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-bottom: 30px
}

.nav-link {
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: .9rem;
	transition: 0.2s
}

.nav-link:hover,.nav-link.active {
	color: var(--neon-green);
	text-shadow: 0 0 5px var(--neon-dim)
}

.inactive-grid-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-height: 350px;
	overflow-y: auto;
	background: var(--bg-panel);
	border: 1px solid var(--neon-dim);
	border-left: 3px solid #444;
	border-radius: 4px;
	box-shadow: 0 5px 15px rgb(0 0 0 / .3);
	scrollbar-width: thin;
	scrollbar-color: #444 var(--bg-panel)
}

.inactive-grid-wrapper::-webkit-scrollbar {
	width: 6px
}

.inactive-grid-wrapper::-webkit-scrollbar-track {
	background: var(--bg-panel)
}

.inactive-grid-wrapper::-webkit-scrollbar-thumb {
	background: #444;
	border-radius: 3px
}

.inactive-pill {
	padding: 12px 20px;
	font-family: var(--font-mono);
	font-size: .9rem;
	color: var(--text-muted);
	border-bottom: 1px solid rgb(255 255 255 / .05);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.1s ease-in-out
}

.inactive-pill:hover {
	background: rgb(0 255 65 / .08);
	color: #fff;
	padding-left: 25px;
	border-left: 2px solid var(--neon-green)
}

.inactive-pill::after {
	content: "EXPIRED";
	font-size: .7rem;
	color: #555;
	font-family: var(--font-header);
	letter-spacing: 1px
}

.inactive-pill:hover::after {
	content: "COPY_DATA";
	color: var(--neon-green);
	text-shadow: 0 0 5px var(--neon-dim)
}

.inactive-pill.copied {
	background: var(--neon-green)!important;
	color: #000!important;
	font-weight: 700
}

.inactive-pill.copied::after {
	content: "COPIED";
	color: #000
}

.graveyard-label {
	font-family: var(--font-header);
	color: var(--text-muted);
	font-size: .85rem;
	margin-bottom: 10px;
	margin-left: 5px;
	display: flex;
	align-items: center;
	gap: 8px
}

.graveyard-label::before {
	content: '\f1c0';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: #444
}

.packet {
	background: var(--bg-panel);
	border: 1px solid var(--neon-dim);
	border-left: 3px solid var(--neon-green);
	transition: all 0.2s ease-in-out;
	position: relative
}

.faq-answer {
	font-size: .9rem;
	color: #e0e0e0;
	line-height: 1.6
}

.faq-answer strong {
	color: #fff
}

.packet:hover {
	border-color: var(--neon-green);
	box-shadow: 0 0 15px var(--neon-dim)
}

.packet-main {
	display: grid;
	grid-template-columns: 50px 1fr auto auto 30px;
	align-items: center;
	gap: 20px;
	padding: 15px 20px;
	min-height: 80px;
	cursor: pointer
}

.code-meta {
	display: flex;
	flex-direction: column;
	overflow: hidden
}

.game-title {
	font-size: .8rem;
	color: var(--text-muted)
}

.code-text {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--neon-green);
	text-shadow: 0 0 8px var(--neon-dim);
	letter-spacing: 1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.date-meta {
	font-family: var(--font-mono);
	font-size: .85rem;
	color: var(--text-muted);
	border-left: 1px solid var(--neon-dim);
	padding-left: 20px;
	height: 40px;
	display: flex;
	align-items: center
}

.actions {
	display: flex;
	align-items: center;
	gap: 15px
}

.status {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: .75rem
}

.status-dot {
	width: 8px;
	height: 8px;
	background: var(--neon-green);
	border-radius: 50%;
	box-shadow: 0 0 5px var(--neon-green);
	animation: blink 1.5s infinite
}

.btn-copy {
	background: var(--neon-green);
	color: var(--bg-deep);
	border: none;
	padding: 10px 25px;
	font-family: var(--font-header);
	font-weight: 700;
	font-size: .9rem;
	cursor: pointer;
	clip-path: polygon(15% 0,100% 0,100% 100%,0 100%,0 25%);
	transition: 0.1s;
	min-width: 90px
}

.btn-copy:hover {
	background: #fff;
	box-shadow: 0 0 15px var(--neon-green)
}

.btn-copy:active {
	transform: scale(.98)
}

.btn-report {
	align-items: center;
	justify-content: center;
	background: #fff0;
	border: 1px solid #444;
	color: #666;
	width: 35px;
	height: 35px;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s;
	display: flex;
	align-items: center;
	justify-content: center
}

.fa-spinner {
	color: red;
	text-shadow: 0 0 8px rgb(255 51 51 / .6)
}

.btn-report:hover {
	border-color: red;
	color: red
}

.btn-report:disabled {
	opacity: .3;
	cursor: not-allowed
}

.btn-expand {
	color: var(--text-muted);
	transition: transform 0.3s;
	justify-self: end
}

.packet.expanded .btn-expand {
	transform: rotate(180deg);
	color: var(--neon-green)
}

.packet-details {
	max-height: 0;
	overflow: hidden;
	background: rgb(0 0 0 / .2);
	transition: max-height 0.3s ease-out;
	padding: 0 20px;
	font-family: var(--font-mono);
	font-size: .85rem
}

.packet.expanded .packet-details {
	max-height: 800px;
	padding-top: 15px;
	padding-bottom: 20px;
	border-top: 1px solid var(--neon-dim)
}

.packet-details-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px
}

.detail-label {
	display: block;
	color: var(--neon-green);
	font-size: .7rem;
	margin-bottom: 5px
}

.packet.inactive {
	border-left-color: #444;
	opacity: .7
}

.packet.inactive .code-text {
	color: var(--text-inactive);
	text-decoration: line-through;
	text-shadow: none
}

.packet.inactive .status-dot {
	background: #444;
	box-shadow: none;
	animation: none
}

.reward-stack {
	width: 50px;
	height: 50px;
	background-color: #222;
	border: 2px solid #4ade80;
	border-radius: 50%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: center;
	overflow: hidden;
	box-shadow: 0 0 10px rgb(74 222 128 / .2)
}

.reward-stack[data-count="1"] span {
	font-size: 26px
}

.reward-stack[data-count="2"] span {
	font-size: 18px;
	width: 45%;
	text-align: center;
	line-height: 1.2
}

.reward-stack[data-count="3"] span {
	font-size: 14px;
	width: 45%;
	text-align: center;
	line-height: 1
}

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: .8rem;
	border: 1px solid #333;
	background: rgb(0 0 0 / .3)
}

.status-pill.active {
	border-color: var(--neon-green);
	color: var(--neon-green);
	box-shadow: inset 0 0 10px rgb(0 255 65 / .1)
}

.status-pill.inactive {
	border-color: #555;
	color: #777
}

.status-dot-glow {
	width: 6px;
	height: 6px;
	background: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 8px currentColor
}

.mobile-info-block,.mobile-actions,.status-pill {
	display: none!important
}

.content-pad {
	padding: 30px;
	line-height: 1.6;
	color: var(--text-bright)
}

.content-pad h2 {
	font-family: var(--font-header);
	color: var(--neon-green);
	border-bottom: 1px solid var(--neon-dim);
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 30px
}

.content-pad h2:first-child {
	margin-top: 0
}

.content-pad p {
	margin-bottom: 15px;
	color: #ccc
}

.content-pad ul {
	list-style: none;
	padding-left: 10px;
	margin-bottom: 20px
}

.content-pad li {
	margin-bottom: 10px;
	display: flex;
	gap: 10px
}

.content-pad li::before {
	content: '>';
	color: var(--neon-green);
	font-weight: 700
}

.content-pad li strong {
	white-space: nowrap;
	margin-right: 5px
}

.step-card {
	background: rgb(0 0 0 / .2);
	border: 1px solid #333;
	padding: 20px;
	margin-bottom: 25px;
	border-radius: 4px
}

.step-title {
	font-family: var(--font-mono);
	color: var(--neon-green);
	margin-bottom: 10px;
	display: block;
	font-size: .9rem;
	font-weight: 700
}

.step-desc {
	color: #ccc;
	font-size: .9rem;
	margin-bottom: 15px;
	line-height: 1.5
}

.tutorial-frame {
	position: relative;
	display: block;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	border: 1px solid var(--text-muted);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgb(0 0 0 / .5)
}

.tutorial-frame img {
	width: 100%;
	height: auto;
	display: block;
	opacity: .9
}

.focus-ring {
	position: absolute;
	width: 60px;
	height: 60px;
	border: 3px solid #f33;
	border-radius: 50%;
	box-shadow: 0 0 10px #ff3333,inset 0 0 10px #f33;
	transform: translate(-50%,-50%);
	pointer-events: none;
	animation: pulse-red 2s infinite;
	z-index: 5
}

.focus-ring.rect {
	border-radius: 8px;
	width: 200px;
	height: 50px
}

@keyframes pulse-red {
	0% {
		opacity: .6;
		transform: translate(-50%,-50%) scale(1)
	}

	50% {
		opacity: 1;
		transform: translate(-50%,-50%) scale(1.1)
	}

	100% {
		opacity: .6;
		transform: translate(-50%,-50%) scale(1)
	}
}

.loading-placeholder {
	font-family: var(--font-mono);
	color: var(--neon-green);
	text-align: center;
	padding: 20px;
	animation: blink 1s infinite
}

.empty-msg {
	font-family: var(--font-mono);
	color: #444;
	text-align: center;
	padding: 20px;
	border: 1px dashed #333
}

.simple-footer {
	margin-top: 80px;
	padding: 30px 0;
	border-top: 1px solid #222;
	text-align: center;
	font-family: var(--font-mono);
	opacity: .5;
	font-size: .75rem;
	transition: opacity 0.3s;
	border-top: 1px solid var(--secondary-glow)
}

.simple-footer:hover {
	opacity: .9
}

.footer-nav {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 15px
}

.footer-nav a {
	color: var(--text-muted);
	position: relative
}

.footer-nav a:hover {
	color: var(--neon-green);
	text-decoration: underline
}

.copyright {
	color: #444;
	letter-spacing: 1px
}

.freshness-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 15px;
	margin-bottom: 20px;
	padding: 8px 16px;
	background: rgb(0 255 65 / .05);
	border: 1px solid var(--neon-green);
	border-radius: 4px;
	font-family: var(--font-mono);
	font-size: .85rem;
	box-shadow: 0 0 10px rgb(0 255 65 / .1);
	max-width: fit-content
}

.freshness-badge i {
	color: var(--neon-green);
	font-size: 1rem;
	animation: pulse 2s infinite
}

.freshness-label {
	color: var(--neon-green);
	font-weight: 700;
	letter-spacing: .5px
}

#last-check-time {
	color: var(--text-base)
}

@keyframes pulse {
	0% {
		opacity: 1;
		text-shadow: 0 0 5px var(--neon-green)
	}

	50% {
		opacity: .5;
		text-shadow: none
	}

	100% {
		opacity: 1;
		text-shadow: 0 0 5px var(--neon-green)
	}
}

.super-grid {
	display: grid;
	grid-template-columns: 1fr 350px;
	gap: 40px;
	align-items: start;
	margin-top: 30px;
	width: 100%
}

.content-column {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0
}

.sidebar-column {
	position: sticky;
	top: 100px;
	height: fit-content;
	z-index: 10
}

.sidebar-box {
	background: rgb(10 15 20 / .4);
	border: 1px solid rgb(255 255 255 / .1);
	border-radius: 8px;
	padding: 20px;
	backdrop-filter: blur(5px)
}

.sidebar-title {
	color: var(--neon-green);
	font-family: 'Orbitron',sans-serif;
	font-size: .9em;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgb(255 255 255 / .1);
	letter-spacing: 1px
}

.sidebar-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	text-decoration: none;
	color: #e0e0e0;
	border-bottom: 1px dashed rgb(255 255 255 / .05);
	transition: all 0.2s;
	font-family: 'Fira Code',monospace;
	font-size: .85em
}

.sidebar-link:hover {
	background: rgb(255 255 255 / .05);
	padding-left: 10px;
	color: #fff
}

.sidebar-link:last-child {
	border-bottom: none
}

.sidebar-game-name {
	font-weight: 700;
	margin-bottom: 4px
}

.sidebar-date {
	color: #888;
	font-size: .85em
}

.new-badge {
	background: var(--neon-green);
	color: #000;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .7em;
	font-weight: 700
}

@media (max-width:1151px) {
	.container {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 20px
	}

	.super-grid {
		grid-template-columns: 1fr
	}

	.sidebar-column {
		position: static;
		margin-top: 40px;
		order: 99
	}

	.sidebar-box {
		border-top: 2px solid var(--neon-green);
		background: rgb(0 0 0 / .2)
	}
}

@media (max-width:768px) {
	.freshness-badge {
		width: 100%;
		justify-content: center;
		margin-top: 10px
	}
}

@media (max-width:768px) {
	.container {
		padding: 0 10px
	}

	.desktop-only {
		display: none!important
	}

	.packet-main {
		grid-template-columns: 45px 1fr 30px;
		gap: 10px;
		padding: 15px
	}

	.code-text {
		font-size: clamp(1rem, 4vw, 1.3rem);
		margin: 0;
		text-align: left
	}

	.mobile-info-block {
		display: block!important;
		padding-bottom: 15px;
		margin-bottom: 15px;
		border-bottom: 1px dashed #333
	}

	.mobile-game-title {
		font-family: var(--font-header);
		font-size: 1rem;
		color: var(--text-muted);
		margin-bottom: 10px
	}

	.mobile-meta-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: .85rem;
		color: #888;
		font-family: var(--font-mono)
	}

	.packet-details-grid {
		grid-template-columns: 1fr 1fr
	}

	.mobile-actions {
		display: flex!important;
		justify-content: flex-end;
		gap: 10px;
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px dashed #333
	}

	.btn-copy.mobile-btn {
		height: 40px;
		padding: 0 20px;
		font-size: .9rem;
		background: var(--neon-green);
		color: var(--bg-deep);
		font-weight: 700;
		border: none;
		box-shadow: 0 0 10px var(--neon-dim)
	}

	.btn-report.mobile-btn {
		height: 40px;
		width: 40px;
		border: 1px solid #444;
		color: #666;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff0
	}

	.status-pill {
		display: inline-flex!important
	}

	.tutorial-frame {
		max-width: 100%
	}

	.content-pad ul {
		padding: 0;
		margin: 20px 0
	}

	.content-pad li {
		display: block;
		position: relative;
		padding-left: 25px;
		margin-bottom: 25px
	}

	.content-pad li::before {
		position: absolute;
		left: 0;
		top: 0
	}

	.content-pad li strong {
		display: block;
		margin-bottom: 5px;
		letter-spacing: 1px
	}
}

	/* =========================================
   THE OVERSEER LOG (Human Element)
   ========================================= */
.overseer-terminal {
    background: var(--bg-darker);
    border: 1px solid #333;
    border-left: 4px solid var(--neon-green);
    padding: 30px;
    margin: 60px 0 40px 0; /* Big gap to push it to the bottom */
    font-family: var(--font-mono);
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}

/* The "Hacker" Background Striping */
.overseer-terminal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}

.terminal-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    font-size: 0.75rem;
    color: #666;
    border-bottom: 1px dashed #333;
    padding-bottom: 10px;
}

.terminal-status {
    width: 8px;
    height: 8px;
    background: var(--neon-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--neon-green);
    animation: blink 2s infinite;
}

.terminal-body {
    color: var(--text-base);
    font-size: 0.9rem;
    line-height: 1.7;
}

.terminal-body strong {
    color: #fff;
    font-weight: 700;
}

.terminal-highlight {
    color: var(--neon-green);
    background: rgba(0, 255, 65, 0.05);
    padding: 2px 5px;
    border-radius: 2px;
}

.overseer-signoff {
    margin-top: 20px;
    text-align: right;
    font-style: italic;
    color: #888;
    font-size: 0.8rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.overseer-signoff img {
    width: 30px; 
    height: 30px; 
    border-radius: 50%; 
    border: 1px solid #444;
    filter: grayscale(100%); /* Keeps it mysterious */
}

/* =========================================
   TOOL / DASHBOARD WIDGET
   ========================================= */

/* ============================================================
   REDEMPTION TOOL (SAFE MODE ARCHITECTURE)
   ============================================================ */

#redemption-tool-root {
    all: unset; /* Isolation */
    display: block;
    position: relative;
    margin: 40px 0;
    width: 100%;
    
    /* THEME */
    background-color: var(--bg-panel);
    border: 1px solid var(--neon-dim);
    border-left: 3px solid var(--neon-green);
    border-radius: 4px;
    font-family: var(--font-body);
    color: var(--text-base);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

/* ------------------------------------------------------------
   STATE A: DEFAULT LIST VIEW (If JS fails, this shows)
   ------------------------------------------------------------ */
.rt-module {
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.rt-body {
    padding: 25px 30px;
}

.rt-hidden-header {
    display: block; /* Show headers in list mode */
    font-family: var(--font-header);
    color: var(--neon-green);
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.rt-step {
    display: block;
    margin-bottom: 40px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    padding-bottom: 20px;
}

.rt-controls { display: none; } /* Hide buttons in list mode */
.rt-progress { display: none; } /* Hide progress in list mode */
.rt-tab-container { display: none; } /* Hide tabs in list mode */

/* ------------------------------------------------------------
   STATE B: INTERACTIVE TOOL VIEW (Triggers when JS adds .rt-active)
   ------------------------------------------------------------ */

/* 1. HIDE the list view styles */
#redemption-tool-root.rt-active .rt-module { display: none; border: none; padding-bottom: 0; }
#redemption-tool-root.rt-active .rt-hidden-header { display: none; }
#redemption-tool-root.rt-active .rt-step { display: none; border: none; margin-bottom: 0; padding-bottom: 0; }

/* 2. SHOW the active elements */
#redemption-tool-root.rt-active .rt-module.active-mode { 
    display: block; 
    animation: rt-fade 0.3s ease-out; 
}
#redemption-tool-root.rt-active .rt-step.active-step { 
    display: block; 
    animation: rt-slide 0.3s ease-out; 
}

#redemption-tool-root.rt-active .rt-tab-container { display: flex; }
#redemption-tool-root.rt-active .rt-controls { display: flex; }
#redemption-tool-root.rt-active .rt-progress { display: block; }

/* ------------------------------------------------------------
   COMPONENT STYLING (Shared)
   ------------------------------------------------------------ */

/* TABS */
.rt-tab-container {
    background: var(--bg-darker);
    border-bottom: 1px solid var(--neon-dim);
}
.rt-tab {
    flex: 1;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    font-family: var(--font-header);
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: 0.2s;
}
.rt-tab:hover { color: #fff; background: rgba(255,255,255,0.02); }
.rt-tab.active { 
    color: var(--neon-green); 
    border-bottom-color: var(--neon-green); 
    background: rgba(0, 255, 65, 0.05); 
    text-shadow: 0 0 8px var(--neon-dim);
}

/* TEXT */
.rt-label {
    display: block;
    font-family: var(--font-header);
    color: var(--neon-green);
    font-size: 1rem;
    margin-bottom: 12px;
    border-bottom: 1px dashed var(--neon-dim);
    padding-bottom: 8px;
    letter-spacing: 1px;
}
.rt-desc {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--text-base);
}
.rt-desc strong { color: var(--neon-green); }

/* IMAGES */
.rt-frame {
    background: #000;
    border: 1px solid var(--neon-dim);
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 15px;
}
.rt-frame img {
    max-width: 100%;
    max-height: 350px;
    width: auto;
    object-fit: contain;
}

/* CONTROLS */
.rt-controls {
    justify-content: space-between;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--neon-dim);
}
.rt-btn {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    padding: 10px 25px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 2px;
}
.rt-btn:hover {
    border-color: var(--neon-green);
    color: var(--neon-green);
    box-shadow: 0 0 10px var(--neon-dim);
    background: rgba(0, 255, 65, 0.05);
}
.rt-btn:disabled { opacity: 0.3; cursor: not-allowed; border-color: #333; background: transparent; box-shadow: none; }

/* PROGRESS & COMPLETION */
.rt-progress {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    opacity: 0.7;
}

.rt-complete { display: none; text-align: center; padding: 50px 0; }
.rt-complete.show-complete { display: flex; flex-direction: column; align-items: center; animation: rt-pop 0.4s; }
.rt-neon-text { font-family: var(--font-header); color: var(--neon-green); font-size: 1.3rem; margin-bottom: 20px; text-shadow: 0 0 15px var(--neon-dim); }
.rt-restart { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); cursor: pointer; transition: 0.2s; }
.rt-restart:hover { color: #fff; }

.rt-desc strong {
    color: var(--neon-green);
    text-decoration: underline;
}

/* ANIMATIONS */
@keyframes rt-slide { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes rt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rt-pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* DESKTOP TWEAK */
@media (min-width: 768px) {
    .rt-frame img { max-width: 85%; }
}


/* --- SCANNER WIDGET STYLES --- */
.scanner-container { background: linear-gradient(90deg, rgba(5,10,14,0.95) 0%, rgba(20,30,40,0.9) 100%); border: 1px solid rgba(0, 255, 65, 0.2); border-left: 3px solid #00ff41; margin: 0 0 0 0; padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; font-family: 'Fira Code', monospace; position: relative; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.3); gap: 15px; }
.hud-left { display: flex; align-items: center; gap: 15px; flex-grow: 1; }
.hud-icon-box { color: #00ff41; font-size: 1.2rem; filter: drop-shadow(0 0 5px rgba(0,255,65,0.4)); flex-shrink: 0; }
.hud-text-group { display: flex; flex-direction: column; }
.hud-title-row { display: flex; align-items: center; gap: 8px; }
.hud-main { color: #fff; font-weight: bold; font-size: 0.85rem; letter-spacing: 0.5px; }
.beta-tag { font-size: 0.55rem; background: rgba(255, 204, 0, 0.1); color: #ffcc00; border: 1px solid rgba(255, 204, 0, 0.3); padding: 1px 4px; border-radius: 2px; }
.hud-sub { color: #a0aab8; font-size: 0.65rem; margin-top: 2px; }
.hud-warn { color: #555; font-size: 0.55rem; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.scan-init-btn { background: rgba(0, 255, 65, 0.05); border: 1px solid #00ff41; color: #00ff41; padding: 8px 16px; font-family: 'Fira Code', monospace; font-size: 0.75rem; font-weight: bold; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; white-space: nowrap; }
.scan-init-btn:hover { background: #00ff41; color: #000; box-shadow: 0 0 15px rgba(0, 255, 65, 0.4); }
.scan-init-btn:active { transform: scale(0.96); }
.blink-slow { animation: blinker 3s linear infinite; }
@media (max-width: 600px) { .scanner-container { flex-direction: column; align-items: stretch; text-align: center; } .hud-left { flex-direction: column; gap: 5px; margin-bottom: 10px; } .scan-init-btn { justify-content: center; width: 100%; } }
.scanner-closed { height: 0; opacity: 0; margin: 0; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1); }
.scanner-open { height: auto; min-height: 200px; max-height: 450px; opacity: 1; margin-bottom: 20px; background: #000; border: 1px solid #00ff41; padding: 15px; font-family: 'Fira Code', monospace; font-size: 0.75rem; color: #00ff41; position: relative; overflow-y: auto; box-shadow: inset 0 0 30px rgba(0,255,65,0.1); }
.log-line { margin-bottom: 4px; opacity: 0.8; border-left: 2px solid transparent; padding-left: 5px; }
.log-line.process { border-left-color: #555; color: #aaa; }
.log-line.success { border-left-color: #00ff41; color: #fff; font-weight: bold; text-shadow: 0 0 5px #00ff41; }
.log-line.error { border-left-color: #ff0055; color: #ff0055; }
.log-line.warn { border-left-color: #ffcc00; color: #ffcc00; }
#scanner-result { margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
.result-card { background: rgba(255,255,255,0.03); border: 1px solid #333; padding: 10px; display: flex; flex-direction: column; gap: 5px; transition: all 0.2s; }
.result-card:hover { background: rgba(255,255,255,0.08); border-color: #555; }
.card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 5px; margin-bottom: 5px; }
.card-meta { font-size: 0.65rem; color: #888; }
.confidence-badge { font-size: 0.6rem; padding: 2px 6px; border-radius: 2px; font-weight: bold; letter-spacing: 0.5px; }
.badge-high { background: rgba(0,255,65,0.15); color: #00ff41; border: 1px solid #00ff41; }
.badge-med { background: rgba(255,204,0,0.15); color: #ffcc00; border: 1px solid #ffcc00; }
.badge-low { background: rgba(255,0,85,0.15); color: #ff0055; border: 1px solid #ff0055; }
.card-body { display: flex; justify-content: space-between; align-items: center; }
.found-code { font-size: 1.1rem; font-weight: bold; color: #fff; letter-spacing: 1px; font-family: 'Courier New', monospace; }
.copy-btn { background: transparent; border: 1px solid #00ff41; color: #00ff41; cursor: pointer; padding: 4px 12px; font-size: 0.7rem; font-weight: bold; transition: all 0.2s; }
.copy-btn:hover { background: #00ff41; color: #000; }
.scan-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%), linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06)); background-size: 100% 2px, 3px 100%; pointer-events: none; z-index: 2; }

/* --- CHART STYLES --- */
/* --- CHART CONTAINER STYLES --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.intel-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    width: 100%;
    min-width: 0; /* CRITICAL: Prevents grid blowout on mobile */
    overflow: hidden;
}

.heatmap-section {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.donut-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    margin-top: 20px;
}

/* Responsive Grid Logic */
@media (max-width: 900px) {
    .intel-grid {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 35px;
    }
    .donut-section {
        flex-direction: row; /* Side-by-side donut/legend on tablet */
        justify-content: center;
        gap: 20px;
    }
    .heatmap-wrapper { justify-content: center; }
}

.sub-label {
    font-size: 0.65rem;
    color: #555;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-family: 'Orbitron', monospace;
}

.donut-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160px;
    width: 100%;
    flex: 1;
    max-width: 160px;
}

/* --- MOBILE DONUT FIX --- */
@media (max-width: 900px) {
    /* Force Vertical Stack on Mobile */
    .donut-section {
        flex-direction: column !important; 
        gap: 10px;
    }
    
    /* Ensure the container is centered and full width */
    .donut-container {
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* Adjust the Label to look good on top */
    .donut-section .sub-label {
        margin-bottom: 5px;
        text-align: center;
        width: 100%;
    }
}

.chart-controls { display: flex; gap: 5px; }
.chart-btn { background: transparent; border: 1px solid rgba(0,255,65,0.3); color: #555; font-family: 'Courier New', monospace; font-size: 0.7rem; cursor: pointer; padding: 2px 10px; transition: all 0.2s; }
.chart-btn:hover, .chart-btn.active { background: rgba(0,255,65,0.1); color: #00ff41; border-color: #00ff41; }

/* Tooltips */
.heat-tooltip { position: absolute; background: #050a0e; border: 1px solid #00ff41; color: #fff; padding: 5px; font-size: 0.7rem; font-family: 'Fira Code', monospace; pointer-events: none; display: none; z-index: 100; box-shadow: 0 4px 10px rgba(0,0,0,0.8); }
.apexcharts-tooltip { background: #050a0e !important; border: 1px solid #00ff41 !important; color: #00ff41; }
.apexcharts-legend-text { color: #a0aab8 !important; font-family: 'Fira Code' !important; font-size: 0.6rem !important; }

/* ============================================
   GITHUB-STYLE CONTRIBUTION MATRIX (REFACTORED)
   ============================================ */

.heatmap-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 2px;
}

/* --- ROW 1: MONTH LABELS --- */
/* We align this manually to match the body below */
.heat-months {
    display: grid;
    /* 53 Columns to match the data grid */
    grid-template-columns: repeat(53, 1fr);
    width: 100%;
    /* 28px (Day Label Width) + 2px (Gap) = 30px Offset */
    padding-left: 30px; 
    box-sizing: border-box;
    gap: 2px;
}

.heat-month-label {
    grid-column: span 4;
    font-size: 9px;
    color: #666;
    font-family: 'Fira Code', monospace;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: visible; /* Prevents text from breaking layout on resize */
    text-align: left;
}

/* --- ROW 2: BODY (DAYS + GRID) --- */
.heat-body {
    display: flex;
    width: 100%;
    gap: 2px;
    /* This Aspect Ratio locks the height relative to width */
    aspect-ratio: 53 / 7;
    min-height: 80px; /* Safety min-height for mobile */
}

/* COLUMN 1: DAY LABELS */
.heat-days {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Perfect vertical distribution */
    width: 28px; /* Fixed width */
    flex-shrink: 0;
    padding-bottom: 2px; /* Slight alignment tweak */
}

.heat-day-label {
    display: flex;
    align-items: center;
    font-size: 9px;
    color: #666;
    font-family: 'Fira Code', monospace;
    line-height: 1;
    height: 100%; /* Fill the allocated vertical slice */
}

/* COLUMN 2: DATA GRID */
.heatmap-grid {
    flex-grow: 1;
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    grid-template-columns: repeat(53, 1fr);
    gap: 2px;
    width: 100%;
    min-width: 0; /* Prevents overflow */
}

.heat-cell {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1px;
    transition: all 0.1s ease;
}

.heat-cell.heat-l1 { background: rgba(0, 255, 65, 0.3); }
.heat-cell.heat-l2 { background: rgba(0, 255, 65, 0.6); }
.heat-cell.heat-l3 { background: rgba(0, 255, 65, 0.8); }
.heat-cell.heat-l4 { background: rgba(0, 255, 65, 1); }

.heat-cell:hover {
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
    z-index: 10;
    border: 1px solid #000;
}

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 500px) {
    /* Tighter spacing for small screens */
    .heat-months { padding-left: 20px; }
    .heat-days { width: 18px; }
    
    .heat-day-label { font-size: 7px; }
    .heat-month-label { font-size: 7px; }
    
    /* Hide every other month label to prevent overlapping text */
    .heat-month-label:nth-child(even) { visibility: hidden; }
}

/* --- SEARCH WIDGET STYLES --- */
.search-command-module { margin-bottom: 20px; position: relative; }
.search-wrapper { position: relative; display: flex; align-items: center; }
.search-input { width: 100%; background: rgba(5, 10, 14, 0.6); border: 1px solid #333; border-left: 3px solid #555; color: #fff; padding: 12px 80px 12px 45px; font-family: 'Fira Code', monospace; font-size: 0.85rem; border-radius: 0 4px 4px 0; transition: all 0.2s; }
.search-input:focus { outline: none; border-color: #00ff41; border-left-color: #00ff41; background: rgba(5, 10, 14, 0.9); box-shadow: 0 0 15px rgba(0, 255, 65, 0.1); }
.search-icon { position: absolute; left: 15px; color: #555; pointer-events: none; transition: color 0.2s; }
.search-input:focus + .search-status { color: #00ff41; opacity: 1; }
.search-input:focus ~ .search-icon { color: #00ff41; }
.search-status { position: absolute; right: 15px; font-family: 'Fira Code', monospace; font-size: 0.65rem; color: #555; pointer-events: none; opacity: 0.7; }

/* --- SIGNAL LOG & ALERTS --- */
.signal-log-container { border: 1px solid rgba(0,255,65,0.2); background: rgba(0,0,0,0.4); margin-bottom: 20px; font-family: 'Fira Code', monospace; border-left: 2px solid #00ff41; }
.signal-header { background: rgba(0, 255, 65, 0.05); color: #888; font-size: 0.6rem; padding: 5px 10px; border-bottom: 1px dashed rgba(255,255,255,0.1); letter-spacing: 1px; display: flex; justify-content: space-between; align-items: center; }
.signal-stream { max-height: 65px; overflow-y: auto; padding: 8px; font-size: 0.7rem; line-height: 1.8; color: #aaa; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.signal-stream::-webkit-scrollbar { width: 4px; }
.signal-stream::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.signal-tag { display: inline-block; color: #00ff41; background: rgba(0, 255, 65, 0.08); padding: 0 6px; margin-right: 6px; margin-bottom: 4px; border-radius: 2px; border: 1px solid transparent; cursor: text; font-size: 0.65rem; user-select: all; }
.signal-tag:hover { border-color: #00ff41; background: rgba(0, 255, 65, 0.15); color: #fff; }
.terminal-alert { position: relative; margin-bottom: 20px; padding: 15px; background: rgba(255, 215, 0, 0.02); border: 1px solid rgba(255, 215, 0, 0.15); font-family: 'Fira Code', monospace; display: flex; gap: 15px; border-radius: 2px; }
.alert-border { width: 4px; background: #ffd700; box-shadow: 0 0 12px rgba(255, 214, 0, 0.4); flex-shrink: 0; animation: alert-flicker 3s infinite; }
.alert-code { display: block; font-size: 0.7rem; font-weight: bold; color: #ffd700; margin-bottom: 6px; letter-spacing: 1.5px; }
.alert-text { margin: 0; font-size: 0.75rem; color: #8a949f; line-height: 1.5; text-transform: uppercase; }
.highlight-red { color: #ff3131; font-weight: 700; text-shadow: 0 0 5px rgba(255, 49, 49, 0.2); }
@keyframes alert-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } 70% { opacity: 0.9; } }
.db-help-trigger { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; background: rgba(255,255,255,0.05); border: 1px solid #555; color: #888; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; cursor: help; z-index: 50; font-family: 'Fira Code', monospace; transition: all 0.2s; }
.db-help-trigger:hover, .db-help-trigger:focus { border-color: #00ff41; color: #00ff41; background: rgba(0,255,65,0.1); outline: none; }
.db-help-overlay { visibility: hidden; opacity: 0; position: absolute; top: 30px; right: 0; width: 280px; background: #050a0e; border: 1px solid #00ff41; padding: 15px; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.9); transition: all 0.2s; pointer-events: none; text-align: left; z-index: 1000; }
.db-help-trigger:hover .db-help-overlay, .db-help-trigger:focus .db-help-overlay { visibility: visible; opacity: 1; transform: translateY(5px); pointer-events: auto; }
.help-header { font-size: 0.7rem; color: #00ff41; font-weight: bold; margin-bottom: 8px; letter-spacing: 1px; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.help-label { font-size: 0.6rem; color: #fff; font-weight: bold; }
.help-item p { font-size: 0.6rem; color: #aaa; margin: 0; }
.help-list { list-style: none; padding: 0; margin: 0; }
.help-list li { font-size: 0.65rem; color: #aaa; margin-bottom: 4px; }
.help-list li span { color: #fff; font-weight: bold; }

/* --- TOAST NOTIFICATIONS --- */
.sys-toast { background: rgba(5, 10, 14, 0.95); border-left: 3px solid #00ff41; color: #fff; font-family: 'Fira Code', monospace; font-size: 0.75rem; padding: 12px 18px; box-shadow: 0 0 15px rgba(0, 255, 65, 0.25); transform: translateX(50px); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; gap: 10px; pointer-events: auto; backdrop-filter: blur(4px); min-width: 200px; }
.sys-toast.active { transform: translateX(0); opacity: 1; }
.sys-toast i { color: #00ff41; }
/* =========================================
   TACTICAL DASHBOARD (Data-Driven Tool)
   ========================================= */


.tool-dashboard {
	background: #0b1015;
/* Very dark blue-black */
	<COMMENTFIX>


    border: 1px solid #333;
	border-top: 2px solid #00ff41;
/* Neon Top Border */
	<COMMENTFIX>


    border-radius: 4px;
	margin-bottom: 25px;
	font-family: 'Fira Code', monospace;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}



/* 1. Header & Text Summary */


.db-terminal-section {
	padding: 20px;
	border-bottom: 1px dashed #333;
	background: rgba(0, 255, 65, 0.02);
}

.db-terminal-line {
	font-size: 0.9rem;
	color: #ccc;
	line-height: 1.6;
	margin-bottom: 5px;
}

.db-prompt {
	color: #555;
	margin-right: 10px;
	user-select: none;
}

.db-highlight {
	color: #fff;
	font-weight: 700;
}

.db-warn {
	color: #ffd700;
} 

/* Yellow */


.db-good {
	color: #00ff41;
} 

/* Green */





/* 2. The 4-Column Stat Grid */


.db-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #080c10;
}

.db-stat-item {
	padding: 15px 10px;
	border-right: 1px solid #222;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.db-stat-item:last-child {
	border-right: none;
}

.db-stat-label {
	font-size: 0.65rem;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.db-stat-value {
	font-size: 1.1rem;
	color: #e0e0e0;
	font-weight: 700;
}



/* 3. Filter Bar (Clean) */


.db-filter-bar {
	padding: 10px;
	background: #111;
	border-top: 1px solid #333;
	display: flex;
	gap: 10px;
}

.db-input {
	width: 100%;
	background: #050a0e;
	border: 1px solid #333;
	color: #00ff41;
	padding: 8px 12px;
	font-family: inherit;
	border-radius: 3px;
	outline: none;
}

.db-input:focus {
	border-color: #00ff41;
}

/* ============================================
   APEXCHARTS COMPLETE STYLES (FIXED)
   ============================================ */

@keyframes opaque {
  0% { opacity: 0 }
  to { opacity: 1 }
}

@keyframes resizeanim {
  0%, to { opacity: 0 }
}

.apexcharts-canvas {
  position: relative;
  direction: ltr !important;
  user-select: none;
}

.apexcharts-canvas ::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 6px;
}

.apexcharts-canvas ::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.apexcharts-inner {
  position: relative;
}

.apexcharts-text tspan {
  font-family: inherit;
}

/* Grid and lines */
.apexcharts-gridline {
  stroke: rgba(255,255,255,0.05);
  stroke-width: 1;
  stroke-dasharray: 3;
}

.apexcharts-gridlines-horizontal,
.apexcharts-gridlines-vertical {
  pointer-events: none;
}

.apexcharts-grid-borders line {
  stroke: rgba(255,255,255,0.05);
  stroke-dasharray: 3;
}

/* Crosshairs - THE MISSING WHITE LINE */
.apexcharts-xcrosshairs,
.apexcharts-ycrosshairs {
  pointer-events: none;
  opacity: 0;
  transition: .15s ease all;
  stroke: #b6b6b6;
  stroke-width: 1;
  stroke-dasharray: 3;
}

.apexcharts-xcrosshairs.apexcharts-active,
.apexcharts-ycrosshairs.apexcharts-active {
  opacity: 1;
  transition: .15s ease all;
}

.apexcharts-ycrosshairs-hidden {
  opacity: 0;
}

/* Hover interaction - MORE RESPONSIVE */
.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
  cursor: crosshair;
}

.apexcharts-svg.apexcharts-zoomable.hovering-pan {
  cursor: move;
}

/* Legend */
rect.legend-mouseover-inactive,
.legend-mouseover-inactive rect,
.legend-mouseover-inactive path,
.legend-mouseover-inactive circle,
.legend-mouseover-inactive line,
.legend-mouseover-inactive text.apexcharts-yaxis-title-text,
.legend-mouseover-inactive text.apexcharts-yaxis-label {
  transition: .15s ease all;
  opacity: .2;
}

.apexcharts-legend-text {
  padding-left: 15px;
  margin-left: -15px;
}

.apexcharts-series-collapsed {
  opacity: 0;
}

/* Tooltip */
.apexcharts-tooltip {
  border-radius: 5px;
  box-shadow: 2px 2px 6px -4px #999;
  cursor: default;
  font-size: 14px;
  left: 62px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  z-index: 12;
  transition: .15s ease all;
}

.apexcharts-tooltip.apexcharts-active {
  opacity: 1;
  transition: .15s ease all;
}

.apexcharts-tooltip.apexcharts-theme-light {
  border: 1px solid #e3e3e3;
  background: rgba(255, 255, 255, .96);
}

.apexcharts-tooltip.apexcharts-theme-dark {
  color: #fff;
  background: rgba(30, 30, 30, .8);
}

.apexcharts-tooltip * {
  font-family: inherit;
}

.apexcharts-tooltip-title {
  padding: 6px;
  font-size: 15px;
  margin-bottom: 4px;
}

.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  background: #eceff1;
  border-bottom: 1px solid #ddd;
}

.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
  background: rgba(0, 0, 0, .7);
  border-bottom: 1px solid #333;
}

.apexcharts-tooltip-text-goals-value,
.apexcharts-tooltip-text-y-value,
.apexcharts-tooltip-text-z-value {
  display: inline-block;
  margin-left: 5px;
  font-weight: 600;
}

.apexcharts-tooltip-text-goals-label:empty,
.apexcharts-tooltip-text-goals-value:empty,
.apexcharts-tooltip-text-y-label:empty,
.apexcharts-tooltip-text-y-value:empty,
.apexcharts-tooltip-text-z-value:empty,
.apexcharts-tooltip-title:empty {
  display: none;
}

.apexcharts-tooltip-marker {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  margin-right: 4px;
  text-align: center;
  vertical-align: middle;
  color: inherit;
}

.apexcharts-tooltip-marker::before {
  content: "";
  display: inline-block;
  width: 100%;
  text-align: center;
  color: currentcolor;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-size: 26px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 14px;
  font-weight: 900;
}

.apexcharts-tooltip-marker[shape="circle"]::before {
  content: "\25CF";
}

.apexcharts-tooltip-series-group {
  padding: 0 10px;
  display: none;
  text-align: left;
  justify-content: left;
  align-items: center;
}

.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
  opacity: 1;
}

.apexcharts-tooltip-series-group.apexcharts-active,
.apexcharts-tooltip-series-group:last-child {
  padding-bottom: 4px;
}

.apexcharts-tooltip-y-group {
  padding: 6px 0 5px;
}

.apexcharts-custom-tooltip,
.apexcharts-tooltip-box {
  padding: 4px 8px;
}

/* Pointer events */
.apexcharts-annotation-rect,
.apexcharts-area-series .apexcharts-area,
.apexcharts-gridline,
.apexcharts-line,
.apexcharts-point-annotation-label,
.apexcharts-radar-series path:not(.apexcharts-marker),
.apexcharts-radar-series polygon,
.apexcharts-toolbar svg,
.apexcharts-tooltip .apexcharts-marker,
.apexcharts-xaxis-annotation-label,
.apexcharts-yaxis-annotation-label,
.apexcharts-zoom-rect,
.no-pointer-events {
  pointer-events: none;
}

.apexcharts-tooltip-active .apexcharts-marker {
  transition: .15s ease all;
}

.apexcharts-yaxis {
  pointer-events: none;
}

/* Legend */
.apexcharts-legend {
  display: flex;
  overflow: auto;
  padding: 0 10px;
}

.apexcharts-legend.apexcharts-align-center {
  justify-content: center;
}

.apexcharts-legend.apx-legend-position-bottom {
  flex-wrap: wrap;
}

.apexcharts-legend-series {
  cursor: pointer;
  line-height: normal;
  display: flex;
  align-items: center;
}

.apexcharts-legend-text {
  position: relative;
  font-size: 14px;
}

.apexcharts-legend-marker {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 1px;
}

.apexcharts-inactive-legend {
  opacity: 0.45;
}

/* SVG elements */
.apexcharts-datalabels,
.apexcharts-datalabel,
.apexcharts-datalabel-label,
.apexcharts-datalabel-value {
  cursor: default;
  pointer-events: none;
}

.apexcharts-pie-label {
  cursor: default;
  pointer-events: none;
}

/* Selection */
.apexcharts-selection-rect {
  cursor: move;
}

.apexcharts-zoom-rect,
.apexcharts-selection-rect {
  stroke: #b6b6b6;
  stroke-width: 1;
  stroke-dasharray: 3;
  fill: #fefefe;
  fill-opacity: 0.1;
}



/* Minimal essential styles - rest handled by your existing CSS */
/* =========================================
   NEW INTEGRITY CONSOLE (The Bar)
   ========================================= */
.integrity-console {
    background: rgba(0, 0, 0, 0.5);
    border-top: 1px solid #333;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.console-header {
    font-family: var(--font-mono); /* Ensure this var exists, or use 'monospace' */
    font-size: 0.6rem;
    color: #666;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.console-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%; /* Ensure it spans full width */
}

/* --- THE TRACK (Background = Red) --- */
.console-track {
    flex-grow: 1;              /* Stretches to fill space */
    height: 6px;               /* Increased from 4px to 6px so you can see the color */
    background-color: #ff0055; /* THE FIX: Default is RED (Expired) */
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    /* Optional: Deep inner shadow to make the green pop more */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); 
}

/* --- THE FILL (Foreground = Green) --- */
.console-fill {
    height: 100%;
    background: #00ff41;       /* Neon Green */
    box-shadow: 0 0 8px #00ff41; /* The Glow Effect */
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother animation */
}

/* --- THE BUTTONS --- */
.btn-console {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap; /* Prevents text wrapping */
}

.btn-console:hover { 
    color: #fff; 
    border-color: #777; 
    background: rgba(255,255,255,0.05); 
}

/* --- THE NUMBERS (New) --- */
.vote-num {
    font-weight: bold;
    opacity: 0.9;
    font-size: 0.8em;
    /* Adds a little separation from the word "WORKING" */
    margin-left: 2px; 
}

/* --- ACTIVE STATES --- */
/* Green Button Active */
.btn-console.up.active { 
    border-color: #00ff41 !important; 
    color: #00ff41 !important; 
    box-shadow: 0 0 5px rgba(0, 255, 65, 0.2);
}

/* Red Button Active */
.btn-console.down.active { 
    border-color: #ff0055 !important; 
    color: #ff0055 !important; 
    box-shadow: 0 0 5px rgba(255, 0, 85, 0.2);
}

/* Mobile Adjustments */


@media (max-width: 600px) {
	.db-stats-grid { grid-template-columns: 1fr 1fr;
} 

/* 2x2 grid */


    .db-stat-item {
	border-bottom: 1px solid #222;
}

.db-stat-item:nth-child(2) {
	border-right: none;
}

.db-stat-item:nth-child(3), .db-stat-item:nth-child(4) {
	border-bottom: none;
}

	
}