/**
 * at-amber Theme - Component Styles
 *
 * Component layer: Cards, buttons, banners, images, lists
 * Version: 1.1
 * Date: 2025-11-28
 */

/* ===== CARD STYLES ===== */
.card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 1.5rem;
	position: relative;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	min-height: 300px;
	max-height: 400px;
	display: flex;
	flex-direction: column;
}

/* Only flip cards get pointer cursor */
.card:has(.card-front) {
	cursor: pointer;
}

/* Card Size Variations */
.card-large {
	grid-column: span 2;
	grid-row: span 2;
	max-height: 600px;
}

.card-wide {
	grid-column: span 2;
}

.card-full {
	grid-column: 1 / -1;
}

.card-tall {
	grid-row: span 2;
	max-height: 600px;
}

/* Responsive card sizes */
@media (max-width: 768px) {
	.card-large,
	.card-wide,
	.card-full,
	.card-tall {
		grid-column: span 1;
		grid-row: span 1;
		max-height: 400px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.card-large {
		grid-column: span 2;
		grid-row: span 1;
	}
}

/* Card Header */
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.75rem;
}

.card-title {
	font-family: 'Exo 2', sans-serif;
	font-weight: 600;
	color: var(--accent);
	font-size: 1.1rem;
}

.flip-indicator {
	color: var(--text-secondary);
	font-size: 0.75rem;
	opacity: 0.7;
}

/* Card Content - Scrollable */
.card-content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	margin: -0.5rem;
	padding: 0.5rem;
}

/* Card Front Content */
.card-front {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5rem;
	background: var(--bg-card);
	border-radius: 12px;
	opacity: 1;
	pointer-events: all;
	transition: opacity 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Card Back Content */
.card-back {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.5rem;
	background: var(--bg-card);
	border-radius: 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.card.flipped .card-front {
	opacity: 0;
	pointer-events: none;
}

.card.flipped .card-back {
	opacity: 1;
	pointer-events: all;
}

.card-back p {
	color: var(--text-secondary);
	font-size: 0.95rem;
	margin-bottom: 1rem;
	line-height: 1.6;
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--accent);
	text-decoration: none;
	font-size: 0.9rem;
	margin-top: auto;
	transition: all 0.2s ease;
}

.back-link:hover {
	transform: translateX(-4px);
}

/* ===== LINK LISTS ===== */
.link-list {
	list-style: none;
}

.link-list li {
	margin-bottom: 0.75rem;
}

.link-list a {
	color: var(--text-primary);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.link-list a:hover {
	background: var(--bg-primary);
	color: var(--accent);
	transform: translateX(4px);
}

.link-list a i {
	width: 20px;
	text-align: center;
}

/* ===== LINK LEGEND (Card Back) ===== */
.link-legend {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}

.link-legend dt {
	font-family: 'Exo 2', sans-serif;
	font-weight: 600;
	color: var(--accent);
	font-size: 0.95rem;
	margin-top: 1rem;
	margin-bottom: 0.25rem;
}

.link-legend dt:first-child {
	margin-top: 0;
}

.link-legend dd {
	margin: 0;
	padding-left: 0;
	color: var(--text-secondary);
	font-size: 0.85rem;
	line-height: 1.5;
}

.link-legend .legend-url {
	display: block;
	color: var(--accent);
	font-family: 'Courier New', monospace;
	font-size: 0.8rem;
	margin-top: 0.25rem;
	word-break: break-all;
	opacity: 0.9;
}

/* ===== PAGE HEADER ===== */
.page-header {
	padding: 2rem 0 1.5rem 0;
	border-bottom: 1px solid rgba(212, 165, 116, 0.15);
	margin-bottom: 2rem;
}

.page-header h1 {
	color: var(--accent);
	font-family: 'Exo 2', sans-serif;
	font-size: 2rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.page-header p {
	color: var(--text-secondary);
	font-size: 1rem;
	margin: 0;
}

/* ===== FEATURED BANNER ===== */
.featured-banner {
	background: linear-gradient(135deg, var(--bg-card) 0%, #1e1813 100%);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 2rem;
	margin-bottom: 2rem;
	text-align: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

/* Featured banner with background image */
.featured-banner.with-image {
	background-image: url('/Media/site-banners/new-home-hero-1.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Dark overlay for text readability */
.featured-banner.with-image::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(26, 22, 19, 0.8) 0%, rgba(30, 24, 19, 0.85) 100%);
	z-index: 1;
}

.featured-banner.with-image h1,
.featured-banner.with-image p {
	position: relative;
	z-index: 2;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
	padding: 0.5rem 1rem;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 8px;
	backdrop-filter: blur(5px);
}

.featured-banner:hover {
	border-color: var(--accent);
	box-shadow: 0 5px 20px -5px var(--accent-glow);
}

.featured-banner h1 {
	color: var(--accent);
	margin-bottom: 0.5rem;
	font-family: 'Exo 2', sans-serif;
	font-size: 2rem;
}

.featured-banner h3 {
	color: var(--accent);
	margin-bottom: 0.5rem;
	font-family: 'Exo 2', sans-serif;
	font-size: 1.3rem;
}

.featured-banner p {
	color: var(--text-primary);
	font-size: 0.95rem;
}

/* ===== JULIA IMAGE FILTER ===== */
.julia-image {
	width: 100%;
	height: auto;
	display: block;
	transition: all 0.3s ease;
	/* Burnt amber filter - warm orange/amber tones, avoiding green/yellow */
	filter: sepia(1) saturate(1.8) hue-rotate(-10deg) brightness(0.9) contrast(1.1);
}

.julia-image:hover {
	filter: sepia(1) saturate(2.0) hue-rotate(-10deg) brightness(0.95) contrast(1.15);
	transform: scale(1.02);
}

/* Clickable image link styling */
.julia-image-link {
	display: block;
	width: 100%;
	cursor: pointer;
	text-decoration: none;
	border-radius: 8px;
	overflow: hidden;
}

/* ===== LIVE STATUS INDICATOR ===== */
.live-indicator {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.status-pulse {
	width: 8px;
	height: 8px;
	background: var(--success);
	border-radius: 50%;
	animation: pulse 2s ease-in-out infinite;
}

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

.status-text {
	color: var(--success);
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ===== CARD SUBTITLE ===== */
.card-subtitle {
	font-size: 0.75rem;
	color: var(--text-tertiary);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ===== STAT GRID LAYOUT ===== */
.stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.stat-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.stat-item-full {
	grid-column: 1 / -1;
}

.stat-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.stat-value {
	font-size: 1rem;
	color: var(--text-primary);
	font-weight: 500;
	word-break: break-all;
}

.hash-display {
	font-family: 'Courier New', monospace;
	font-size: 0.75rem;
	color: var(--accent);
}

/* Last Successful Rebase card specific styling */
.lsr-label {
	font-size: 0.7rem;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.lsr-value {
	font-size: 0.85rem;
	color: var(--text-primary);
	font-weight: 600;
	font-family: 'Orbitron', monospace;
}

@media (max-width: 768px) {
	.lsr-label {
		font-size: 0.65rem;
	}

	.lsr-value {
		font-size: 0.75rem;
	}
}

/* ===== METRIC DISPLAY ===== */
.metric-display {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.metric-item {
	text-align: center;
}

.metric-item label {
	display: block;
	font-size: 0.7rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.metric-value {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--text-primary);
}

.metric-value.large {
	font-size: 2rem;
}

.metric-change {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.metric-change.positive {
	color: var(--success);
}

.metric-change.negative {
	color: var(--danger);
}

.metric-change.neutral {
	color: var(--text-secondary);
}

/* ===== COUNTDOWN DISPLAY ===== */
.countdown-display {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--accent);
	margin: 1.5rem 0;
	font-family: 'Orbitron', monospace;
}

/* ===== STATUS LEGEND ===== */
.status-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.status-badge {
	padding: 0.25rem 0.75rem;
	border-radius: 12px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.status-badge.missed {
	background: var(--bg-tertiary);
	color: var(--text-secondary);
}

.status-badge.scheduled {
	background: rgba(52, 152, 219, 0.2);
	color: #3498db;
}

.status-badge.succeeded {
	background: rgba(46, 204, 113, 0.2);
	color: var(--success);
}

.status-badge.late {
	background: rgba(241, 196, 15, 0.2);
	color: #f1c40f;
}

.status-badge.failed {
	background: rgba(231, 76, 60, 0.2);
	color: var(--danger);
}

.status-badge.ended {
	background: rgba(232, 180, 79, 0.2);
	color: var(--warning);
}

/* ===== CARD ACTIONS ===== */
.card-action {
	font-size: 0.8rem;
	color: var(--accent);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.card-action:hover {
	color: var(--accent-bright);
}

.card-action i {
	font-size: 0.7rem;
	margin-left: 0.25rem;
}

/* ===== TIMELINE LIST ===== */
.timeline-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.timeline-item {
	display: flex;
	gap: 0.75rem;
}

.timeline-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(212, 165, 116, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	font-size: 0.9rem;
}

.timeline-content {
	flex: 1;
	min-width: 0;
}

.timeline-date {
	font-size: 0.7rem;
	color: var(--text-tertiary);
	margin-bottom: 0.25rem;
}

.timeline-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.25rem;
	line-height: 1.3;
}

.timeline-preview {
	font-size: 0.8rem;
	color: var(--text-secondary);
	line-height: 1.4;
	margin-bottom: 0.5rem;
}

.timeline-tag {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	background: rgba(212, 165, 116, 0.1);
	border: 1px solid rgba(212, 165, 116, 0.3);
	border-radius: 10px;
	font-size: 0.65rem;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* ===== PLACEHOLDER CONTENT ===== */
.placeholder-content {
	padding: 2rem 1rem;
}

.placeholder-content .text-muted {
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--text-tertiary);
}

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

.text-center {
	text-align: center;
}

/* ===== ERROR MESSAGE ===== */
.error-message {
	text-align: center;
	color: var(--danger);
	font-size: 0.85rem;
	padding: 1rem;
}

/* ===== CARD CONTROLS ===== */
.card-controls {
	display: flex;
	gap: 0.5rem;
}

.btn-icon {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	width: 32px;
	height: 32px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-icon:hover {
	background: var(--bg-tertiary);
	border-color: var(--accent);
	color: var(--accent);
}

/* ===== INFO PANEL ===== */
.info-panel {
	padding: 1rem 0;
}

.info-panel h4 {
	font-size: 1rem;
	color: var(--text-primary);
	margin: 1.5rem 0 0.75rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.info-panel h4:first-child {
	margin-top: 0;
}

.info-panel h4 i {
	color: var(--accent);
}

.info-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem 0;
}

.info-list li {
	padding: 0.5rem 0;
	color: var(--text-secondary);
	line-height: 1.5;
}

.info-list li::before {
	content: "•";
	color: var(--accent);
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: 0.5rem;
}

.status-examples {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 1rem 0;
}

.status-example {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: 6px;
	border-left: 3px solid;
}

.status-example.success {
	background: var(--success-glow);
	border-left-color: var(--success);
}

.status-example.warning {
	background: var(--warning-glow);
	border-left-color: var(--warning);
}

.status-example.danger {
	background: var(--danger-glow);
	border-left-color: var(--danger);
}

.status-icon {
	font-size: 1.2rem;
}

.info-footer {
	text-align: center;
	color: var(--text-tertiary);
	font-size: 0.85rem;
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.info-footer i {
	color: var(--accent);
}

/* ===== STATUS BADGES - URL HEALTH MONITOR ===== */
.status-badge {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: 1px solid;
}

.status-up,
.status-badge.status-up {
	background: var(--success-glow);
	color: var(--success);
	border-color: var(--success);
}

.status-degraded,
.status-badge.status-degraded {
	background: var(--warning-glow);
	color: var(--warning);
	border-color: var(--warning);
}

.status-down,
.status-badge.status-down {
	background: var(--danger-glow);
	color: var(--danger);
	border-color: var(--danger);
}

/* ===== TEXT COLOR UTILITIES ===== */
.text-success {
	color: var(--success) !important;
}

.text-warning {
	color: var(--warning) !important;
}

.text-danger {
	color: var(--danger) !important;
}

.text-muted {
	color: var(--text-tertiary) !important;
}

/* ===== BACKGROUND COLOR UTILITIES ===== */
.bg-success {
	background-color: var(--success) !important;
	color: #fff !important;
	border-color: var(--success) !important;
}

.bg-danger {
	background-color: var(--danger) !important;
	color: #fff !important;
	border-color: var(--danger) !important;
}

.bg-warning {
	background-color: var(--warning) !important;
	color: #0f0b08 !important;
	border-color: var(--warning) !important;
}

.bg-secondary {
	background-color: var(--text-tertiary) !important;
	color: #fff !important;
	border-color: var(--text-tertiary) !important;
}

/* Badge-specific secondary styling (for TOTAL badge in URL monitor) */
.badge.bg-secondary {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 4px;
	font-size: 0.7rem;
	background: rgba(212, 165, 116, 0.15) !important;
	color: var(--accent) !important;
	border: 1px solid rgba(212, 165, 116, 0.3) !important;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* ===== TABLE STYLES - URL HEALTH MONITOR ===== */
.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table {
	width: 100%;
	margin-bottom: 1rem;
	border-collapse: collapse;
	color: var(--text-primary);
	font-size: 0.9rem;
}

.table thead th {
	padding: 0.75rem;
	background: var(--bg-tertiary);
	color: var(--text-secondary);
	text-align: left;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 2px solid var(--border);
}

.table tbody td {
	padding: 0.75rem;
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}

.table tbody tr {
	transition: background-color 0.2s ease;
}

.table-hover tbody tr:hover {
	background: rgba(212, 165, 116, 0.05);
}

.table-striped tbody tr:nth-of-type(odd) {
	background: rgba(255, 255, 255, 0.02);
}

.table-warning {
	background: var(--warning-glow) !important;
}

.table th.text-center,
.table td.text-center {
	text-align: center;
}

.table .small {
	font-size: 0.85rem;
}

.table .badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
}

/* ===== ALERT STYLES ===== */
.alert {
	padding: 1rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 0.9rem;
}

.alert-warning {
	background: var(--warning-glow);
	border-color: var(--warning);
	color: var(--text-primary);
}

.alert-warning.border-start {
	border-left-width: 4px !important;
}

.alert p {
	margin: 0;
}

.alert p:not(:last-child) {
	margin-bottom: 0.5rem;
}

.alert strong {
	color: var(--accent);
}

/* ===== SPACING UTILITIES ===== */
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }

.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }

.ms-1 { margin-left: 0.25rem !important; }
.ms-2 { margin-left: 0.5rem !important; }
.ms-3 { margin-left: 1rem !important; }

/* ===== DASHBOARDS PAGE STYLES ===== */

/* Section headings with badges */
.section-heading-wrapper {
	margin-bottom: 2rem;
}

.section-heading {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

.section-badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.section-badge.internal {
	background: rgba(212, 165, 116, 0.15);
	color: var(--accent);
	border: 1px solid rgba(212, 165, 116, 0.3);
}

.section-badge.community {
	background: var(--success-glow);
	color: var(--success);
	border: 1px solid var(--success);
}

/* ===== STAT BADGES (Statistics Display) ===== */
.stats-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.stat-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--bg-card);
	border: 1px solid var(--border-subtle);
	padding: 0.75rem 1.25rem;
	border-radius: 4px;
	font-size: 0.95rem;
}

.stat-badge i {
	color: var(--accent);
	font-size: 1.1rem;
}

.stat-badge span {
	color: var(--text-primary);
}

.section-description {
	color: var(--text-secondary);
	font-size: 0.95rem;
	margin: 0;
}

/* Dashboard preview images */
.dashboard-preview {
	position: relative;
	overflow: hidden;
	border-radius: 8px 8px 0 0;
	background: linear-gradient(135deg, #1a1613 0%, #0f0b08 100%);
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dashboard-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.card:hover .dashboard-image {
	transform: scale(1.05);
}

.dashboard-type {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.35rem 0.75rem;
	border-radius: 20px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	backdrop-filter: blur(8px);
}

.dashboard-type.supply {
	background: rgba(143, 179, 89, 0.9);
	color: #fff;
}

.dashboard-type.rebase {
	background: rgba(232, 180, 79, 0.9);
	color: #0f0b08;
}

.dashboard-type.wampl {
	background: rgba(201, 104, 67, 0.9);
	color: #fff;
}

.dashboard-type.analytics {
	background: rgba(212, 165, 116, 0.9);
	color: #0f0b08;
}

/* Dashboard card content */
.card-description {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.5;
	margin-bottom: 1.5rem;
	flex: 1;
}

.dashboard-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--accent);
	color: #0f0b08;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}

.btn-primary:hover {
	background: #e6b885;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(212, 165, 116, 0.3);
}

.dashboard-author {
	font-size: 0.8rem;
	color: var(--text-tertiary);
	font-style: italic;
}

/* External links grid */
.external-links-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 1rem;
}

.external-link-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	gap: 1rem;
	transition: all 0.2s ease;
}

.external-link-card:hover {
	background: var(--bg-card-hover);
	border-color: rgba(212, 165, 116, 0.3);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.external-icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	flex-shrink: 0;
}

.external-icon.official {
	background: rgba(143, 179, 89, 0.15);
	color: var(--success);
}

.external-icon.dextools {
	background: rgba(232, 180, 79, 0.15);
	color: var(--warning);
}

.external-icon.chainlink {
	background: rgba(212, 165, 116, 0.15);
	color: var(--accent);
}

.external-icon.cointrader {
	background: rgba(176, 162, 152, 0.15);
	color: var(--text-secondary);
}

.external-icon.dune,
.external-icon.dune-chiefturk {
	background: rgba(212, 165, 116, 0.15);
	color: var(--accent);
}

.external-content {
	flex: 1;
	min-width: 0;
}

.external-title {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.25rem 0;
	color: var(--text-primary);
}

.external-title a {
	color: var(--text-primary);
	text-decoration: none;
	transition: color 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.external-title a:hover {
	color: var(--accent);
}

.external-title .fa-external-link {
	font-size: 0.75rem;
	opacity: 0.6;
}

.external-url {
	font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
	font-size: 0.75rem;
	color: var(--text-tertiary);
	margin: 0 0 0.5rem 0;
	word-break: break-all;
}

.external-description {
	font-size: 0.85rem;
	color: var(--text-secondary);
	line-height: 1.4;
	margin: 0;
}

/* Responsive adjustments for dashboards */
@media (max-width: 768px) {
	.external-links-grid {
		grid-template-columns: 1fr;
	}

	.dashboard-preview {
		height: 150px;
	}

	.dashboard-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.btn-primary {
		width: 100%;
		justify-content: center;
	}
}

/* ===== DAPPS PAGE STYLES ===== */

/* dApp Cards */
.dapp-card {
	display: flex;
	flex-direction: column;
}

.dapp-header {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border);
}

.dapp-icon {
	width: 56px;
	height: 56px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.dapp-icon.token-wrapper {
	background: rgba(212, 165, 116, 0.15);
	color: var(--accent);
}

.dapp-icon.digital-cash {
	background: rgba(143, 179, 89, 0.15);
	color: var(--success);
}

.dapp-icon.staking {
	background: rgba(232, 180, 79, 0.15);
	color: var(--warning);
}

.dapp-icon.defi {
	background: rgba(212, 165, 116, 0.15);
	color: var(--accent);
}

.dapp-icon.lending {
	background: rgba(201, 104, 67, 0.15);
	color: var(--danger);
}

.dapp-meta {
	flex: 1;
}

.dapp-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 0.25rem 0;
}

.dapp-category {
	font-size: 0.85rem;
	color: var(--accent);
	font-weight: 600;
	margin: 0 0 0.25rem 0;
}

.dapp-author {
	font-size: 0.75rem;
	color: var(--text-tertiary);
	margin: 0;
}

.dapp-description {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	flex: 1;
}

.dapp-note {
	display: block;
	margin-top: 0.75rem;
	font-size: 0.8rem;
	color: var(--text-tertiary);
	font-style: italic;
}

.dapp-note a {
	color: var(--accent);
	text-decoration: underline;
}

.dapp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
}

/* Button variants */
.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: transparent;
	color: var(--text-secondary);
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid var(--border);
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	cursor: pointer;
}

.btn-secondary:hover {
	background: var(--bg-tertiary);
	border-color: rgba(212, 165, 116, 0.3);
	color: var(--accent);
}

.btn-success {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--success);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}

.btn-success:hover {
	background: #a5c96c;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px var(--success-glow);
}

.btn-danger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--danger);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}

.btn-danger:hover {
	background: #d97b5a;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px var(--danger-glow);
}

/* Section badges for dApps */
.section-badge.active {
	background: var(--success-glow);
	color: var(--success);
	border: 1px solid var(--success);
}

.section-badge.warning {
	background: var(--warning-glow);
	color: var(--warning);
	border: 1px solid var(--warning);
}

.section-badge.inactive {
	background: var(--danger-glow);
	color: var(--danger);
	border: 1px solid var(--danger);
}

/* dApp Review Cards (Under Review / Inactive) */
.dapp-review-grid {
	display: grid;
	gap: 1.5rem;
}

.dapp-review-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5rem;
	display: flex;
	gap: 1.5rem;
	transition: all 0.2s ease;
}

.dapp-review-card:hover {
	background: var(--bg-card-hover);
	border-color: rgba(212, 165, 116, 0.3);
}

.dapp-review-card.inactive {
	border-left: 3px solid var(--danger);
}

.dapp-review-card .dapp-icon {
	width: 48px;
	height: 48px;
	font-size: 1.25rem;
}

.dapp-review-content {
	flex: 1;
}

.dapp-review-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 0.25rem 0;
}

.dapp-review-url {
	font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
	font-size: 0.75rem;
	color: var(--text-tertiary);
	margin: 0 0 0.75rem 0;
}

.dapp-review-update {
	background: rgba(232, 180, 79, 0.1);
	border-left: 3px solid var(--warning);
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
	border-radius: 4px;
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.dapp-review-update.warning {
	background: rgba(201, 104, 67, 0.1);
	border-left-color: var(--danger);
}

.dapp-review-update strong {
	color: var(--text-primary);
}

.dapp-review-description {
	font-size: 0.9rem;
	color: var(--text-secondary);
	line-height: 1.5;
	margin-bottom: 1rem;
}

/* Stat Cards Grid */
.stat-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
}

.stat-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 2rem 1.5rem;
	text-align: center;
	transition: all 0.2s ease;
}

.stat-card:hover {
	background: var(--bg-card-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.stat-value {
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.stat-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.stat-card.success .stat-value {
	color: var(--success);
}

.stat-card.warning .stat-value {
	color: var(--warning);
}

.stat-card.inactive .stat-value {
	color: var(--text-secondary);
}

.stat-card.primary .stat-value {
	color: var(--accent);
}

/* Responsive adjustments for dApps */
@media (max-width: 768px) {
	.dapp-header {
		flex-direction: column;
		text-align: center;
		align-items: center;
	}

	.dapp-actions {
		flex-direction: column;
	}

	.dapp-actions .btn-primary,
	.dapp-actions .btn-secondary,
	.dapp-actions .btn-success,
	.dapp-actions .btn-danger {
		width: 100%;
		justify-content: center;
	}

	.dapp-review-card {
		flex-direction: column;
		text-align: center;
	}

	.stat-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ===== STAT TILE COMPONENT (Dense Data Display) ===== */
/* Used for rebase page statistics tiles */
.stat-tile {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stat-tile-header {
	background: var(--bg-tertiary);
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--border);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.stat-tile-body {
	padding: 0;
}

/* Scope all stat-tile specific styles to prevent conflicts with topbar */
.stat-tile .stat-row {
	padding: 0.25rem 0.5rem;
	border-bottom: 1px solid rgba(212, 165, 116, 0.1);
	font-size: 0.8rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
}

.stat-tile .stat-row:last-child {
	border-bottom: none;
}

.stat-tile .stat-tag {
	background: var(--bg-tertiary);
	color: var(--text-primary);
	padding: 0.125rem 0.375rem;
	border-radius: 3px;
	font-size: 0.7rem;
	white-space: nowrap;
	font-weight: 500;
}

.stat-tile .stat-value {
	background: var(--bg-primary);
	color: var(--accent);
	padding: 0.125rem 0.375rem;
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: 600;
	white-space: nowrap;
}

.stat-tile .stat-link {
	background: var(--bg-primary);
	color: var(--accent);
	padding: 0.125rem 0.375rem;
	border-radius: 3px;
	font-size: 0.7rem;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s;
	cursor: pointer;
}

.stat-tile .stat-link:hover {
	background: var(--accent);
	color: var(--bg-primary);
}

.stat-tile .current-streak-badge {
	background: var(--danger) !important;
	color: white !important;
	animation: pulse-glow 2s ease-in-out infinite; /* Animation defined in at-amber-effects.css */
}

/* Stat tiles grid */
.stat-tiles-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
	.stat-tiles-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== HERO CONTENT LAYOUT (Rebase Cards v2) ===== */
/* New content layout system for stat tiles with improved readability */

/* Hero section - displays large focal number/icon at top */
.stat-tile .hero-content .hero-section {
	background: var(--bg-tertiary);
	padding: 1rem 0.75rem;
	text-align: center;
	border-bottom: 1px solid var(--border);
	min-height: 85px !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.hero-content .hero-number {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--accent);
	line-height: 1;
}

.hero-content .hero-icon {
	font-size: 1.3rem;
	margin-left: 0.3rem;
}

/* Larger icon for cards without hero-number (Overview, Row 2 cards) */
.hero-content .hero-section > div:first-child:not(:has(.hero-number)) .hero-icon {
	font-size: 2.2rem;
	margin-left: 0;
}

.hero-content .hero-subtitle {
	font-size: 0.65rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 0.25rem;
}

/* Stats list - contains data rows */
.hero-content .stats-list {
	padding: 0.5rem 0.75rem;
}

/* Stat row - can contain one or two columns */
.hero-content .stat-row {
	padding: 0.4rem 0;
	border-bottom: 1px solid rgba(212, 165, 116, 0.1);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.5rem;
}

.hero-content .stat-row:last-child {
	border-bottom: none;
}

/* Stat column - individual data cell within a row */
.hero-content .stat-col {
	flex: 1;
	min-width: 0;
}

/* Stat label - metric name */
.hero-content .stat-label {
	font-size: 0.7rem;
	color: var(--text-secondary);
	display: block;
	margin-bottom: 0.15rem;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* Stat data - metric value */
.hero-content .stat-data {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--accent);
}

/* Stat link - clickable date ranges for filters */
.stat-tile .hero-content .stat-link {
	font-size: 0.65rem;
	color: var(--accent);
	text-decoration: none;
	display: block;
	margin-top: 0.15rem;
	opacity: 0.8;
	transition: all 0.2s;
	background: none;
	padding: 0;
	border-radius: 0;
}

.stat-tile .hero-content .stat-link:hover {
	opacity: 1;
	color: var(--text-primary);
	background: none;
}

/* Current streak - highlighted with animated border */
.hero-content .current-streak {
	border-left: 2px solid var(--accent);
	padding-left: 0.5rem;
	animation: border-glow 2s ease-in-out infinite;
}

.hero-content .current-streak .stat-label {
	color: var(--accent);
	font-weight: 600;
}

.hero-content .current-streak .stat-data {
	color: var(--accent);
}

.stat-tile .hero-content .current-streak .stat-link {
	color: var(--accent);
	font-weight: 500;
	background: none;
}

.stat-tile .hero-content .current-streak .stat-link:hover {
	color: var(--text-primary);
	background: none;
}

/* Latest streak - greyed out when not current */
.hero-content .latest-streak {
	opacity: 0.5;
}

/* Fix for empty headers in hero cards - removes unwanted top line */
.stat-tile.hero-card .stat-tile-header:empty {
	padding: 0;
	border: none;
	background: none;
	display: none;
}

/* ===== DATE FILTER FORM ===== */
.date-filter-form {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.filter-group label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: 600;
}

.filter-group input[type="date"] {
	background: var(--bg-primary);
	border: 1px solid var(--border);
	color: var(--text-primary);
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	font-size: 0.875rem;
	font-family: inherit;
	transition: border-color 0.2s;
}

.filter-group input[type="date"]:focus {
	outline: none;
	border-color: var(--accent);
}

.btn-group {
	display: flex;
	gap: 0.5rem;
}

.btn-sm {
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
}

@media (max-width: 768px) {
	.date-filter-form {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-group {
		width: 100%;
	}

	.btn-group {
		flex-wrap: wrap;
	}
}

/* ===== CHART COMPONENTS ===== */
/* Main Chart Card */
.chart-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}

.chart-card-header {
	background: var(--bg-tertiary);
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border);
	display: grid;
	grid-template-columns: 1.5fr 1.25fr 1.25fr;
	gap: 1.5rem;
	align-items: start;
}

@media (max-width: 992px) {
	.chart-card-header {
		grid-template-columns: 1fr 1fr;
	}
	.chart-header-info {
		grid-column: span 2;
	}
}

@media (max-width: 576px) {
	.chart-card-header {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.chart-header-info {
		grid-column: span 1;
	}
}

.chart-header-section {
	min-height: 60px;
}

.chart-header-info {
	/* Info section - title and description */
	/* Placeholder property to keep linters happy */
	--zdfsf-chart-info-reserved: true;
}

.chart-header-pinned,
.chart-header-live {
	border-left: 2px solid var(--border);
	padding-left: 1rem;
}

.chart-data-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.375rem;
}

.collapse-toggle {
	cursor: pointer;
	transition: transform 0.3s ease;
	color: var(--text-tertiary);
	font-size: 0.875rem;
	display: none;
}

.collapse-toggle:hover {
	color: var(--accent);
}

.collapse-toggle.collapsed {
	transform: rotate(-90deg);
}

/* Mobile-only: Show collapse toggle and enable collapse functionality */
@media (max-width: 768px) {
	.collapse-toggle {
		display: inline-block;
	}

	.chart-data-content.collapsed {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.3s ease, opacity 0.3s ease;
	}

	.chart-data-content {
		max-height: 500px;
		overflow: visible;
		opacity: 1;
		transition: max-height 0.3s ease, opacity 0.3s ease;
	}
}

/* Desktop: Always show content, hide toggle */
@media (min-width: 769px) {
	.chart-data-content.collapsed {
		max-height: none !important;
		opacity: 1 !important;
		overflow: visible !important;
	}
}

.chart-data-content {
	font-size: 0.875rem;
	color: var(--text-secondary);
	line-height: 1.5;
}

.chart-data-hint {
	color: var(--text-tertiary);
	font-style: italic;
	margin: 0;
}

.chart-data-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.25rem;
	color: var(--text-secondary);
}

.chart-data-item-label {
	font-weight: 500;
}

.chart-data-item-value {
	color: var(--text-primary);
	font-weight: 600;
	font-family: 'Courier New', monospace;
}

.chart-data-date {
	font-size: 0.8125rem;
	color: var(--text-tertiary);
	margin-bottom: 0.5rem;
	font-family: 'Courier New', monospace;
}

.chart-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.chart-subtitle {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin: 0.25rem 0 0 0;
}

/* Chart presets - view filter links */
.chart-presets {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.chart-presets .preset-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.chart-presets .preset-link {
	font-size: 0.8rem;
	color: var(--accent);
	text-decoration: none;
	opacity: 0.7;
	transition: opacity 0.2s ease;
	padding: 0.25rem 0;
	border-bottom: 1px solid transparent;
}

.chart-presets .preset-link:hover {
	opacity: 1;
	border-bottom-color: var(--accent);
}

.chart-presets .preset-link.active {
	opacity: 1;
	font-weight: 600;
	border-bottom-color: var(--accent);
}

.chart-card-body {
	padding: 1.5rem;
	background: var(--bg-light);
	min-height: 500px;
}

.chart-card-body canvas {
	width: 100% !important;
	height: 500px !important;
}

/* Chart Interactive Legend */
.chart-legend {
	padding: 1rem 1.5rem;
	background: var(--bg-tertiary);
	border-top: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.chart-legend-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	padding: 0.375rem 0.75rem;
	border-radius: 4px;
	transition: all 0.2s;
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.chart-legend-item:hover {
	background: rgba(212, 165, 116, 0.1);
	color: var(--text-primary);
}

.chart-legend-item.disabled {
	opacity: 0.3;
}

.chart-legend-color {
	width: 24px;
	height: 3px;
	border-radius: 2px;
	flex-shrink: 0;
}

/* Mini Charts Grid */
.mini-charts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1rem;
}

.mini-chart-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mini-chart flip trigger positioning */
.mini-chart-card .flip-trigger {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
}

/* Override absolute positioning for mini-chart flip cards */
.mini-chart-card .card-front,
.mini-chart-card .card-back,
.mini-chart-card .flip-front,
.mini-chart-card .flip-back {
	position: static !important;
	width: 100%;
	height: auto;
	padding: 0 !important;
	margin: 0 !important;
	opacity: 1;
	pointer-events: all;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.mini-chart-card .card-back,
.mini-chart-card .flip-back {
	display: none !important;
}

/* When flipped, hide front and show back */
.mini-chart-card.flipped .card-front,
.mini-chart-card.flipped .flip-front {
	display: none !important;
}

.mini-chart-card.flipped .card-back,
.mini-chart-card.flipped .flip-back {
	display: flex !important;
}

.mini-chart-header {
	padding: 0.75rem 1rem;
	background: var(--bg-tertiary);
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.mini-chart-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.mini-chart-title .flip-icon {
	font-size: 0.875rem;
	color: var(--accent);
	opacity: 0.7;
	transition: opacity 0.2s;
}

.mini-chart-title .flip-icon:hover {
	opacity: 1;
}

.mini-chart-subtitle {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin: 0.25rem 0 0 0;
}

.mini-chart-badge {
	background: var(--bg-primary);
	color: var(--text-secondary);
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	margin-right: 2.5rem; /* Space for flip icon in top-right corner */
}

.mini-chart-badge.success {
	color: var(--success);
}

.mini-chart-badge.danger {
	color: var(--danger);
}

.mini-chart-body {
	padding: 1rem;
	flex: 1;
	min-height: 150px;
}

.mini-chart-body canvas {
	width: 100% !important;
	height: 150px !important;
}

.mini-chart-footer {
	padding: 0.5rem 1rem;
	background: var(--bg-tertiary);
	border-top: 1px solid var(--border);
	font-size: 0.75rem;
	color: var(--text-secondary);
	text-align: center;
}

@media (max-width: 1024px) {
	.mini-charts-grid {
		grid-template-columns: 1fr;
	}
}

/* Mini Chart Card Back Styling */
.mini-chart-card .card-back,
.mini-chart-card .flip-back {
	padding: 1rem;
}

.mini-chart-card .card-back-content {
	color: var(--text-secondary);
	font-size: 0.875rem;
}

.mini-chart-card .card-back-content p {
	margin-bottom: 0.75rem;
}

.mini-chart-card .card-back-content ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0.75rem;
}

.mini-chart-card .card-back-content ul li {
	padding: 0.25rem 0;
	line-height: 1.5;
}

.mini-chart-card .card-back-content .info-note {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--border);
	font-size: 0.8rem;
	color: var(--text-tertiary);
	font-style: italic;
}

/* ===== HISTORICAL DATA TABLE ===== */

/* Table Card Container */
.table-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}

.table-card-header {
	background: var(--bg-tertiary);
	padding: 1.5rem;
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.table-header-main {
	flex: 1;
	min-width: 250px;
}

.table-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 0.5rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.table-subtitle {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin: 0;
}

.table-controls {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
}

.table-control-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Toggle Switch */
.toggle-switch {
	appearance: none;
	width: 40px;
	height: 20px;
	background: var(--bg-primary);
	border: 1px solid var(--border);
	border-radius: 10px;
	position: relative;
	cursor: pointer;
	transition: all 0.2s;
}

.toggle-switch:checked {
	background: var(--accent);
	border-color: var(--accent);
}

.toggle-switch::before {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	background: var(--text-primary);
	border-radius: 50%;
	top: 2px;
	left: 2px;
	transition: transform 0.2s;
}

.toggle-switch:checked::before {
	transform: translateX(20px);
	background: var(--bg-primary);
}

.toggle-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	cursor: pointer;
	user-select: none;
}

/* Dropdown Select Styling */
.dropdown-wrapper select {
	background: var(--bg-primary);
	border: 1px solid var(--border);
	color: var(--text-primary);
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}

.dropdown-wrapper select:hover {
	border-color: var(--accent);
}

.dropdown-wrapper select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Table Container */
.table-container {
	overflow-x: auto;
	overflow-y: auto;
	max-height: 600px;
	background: var(--bg-primary);
}

/* Table Wrapper - horizontal scroll for wide tables */
.table-wrapper {
	overflow-x: auto;
	margin: 0 -1rem;
	padding: 0 1rem;
}

/* Rebase Table */
.rebase-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.rebase-table thead {
	background: var(--bg-tertiary);
	position: sticky;
	top: 0;
	z-index: 10;
}

.rebase-table th {
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	color: var(--text-primary);
	border-bottom: 2px solid var(--border);
	white-space: nowrap;
}

.rebase-table th small {
	color: var(--text-tertiary);
	font-weight: 400;
}

.rebase-table tbody tr {
	border-bottom: 1px solid var(--border);
	transition: background-color 0.2s;
}

.rebase-table tbody tr:nth-of-type(even) {
	background: rgba(255, 255, 255, 0.02);
}

.rebase-table tbody tr:hover {
	background: var(--bg-secondary);
}

.rebase-table tbody tr:last-child {
	border-bottom: none;
}

.rebase-table td {
	padding: 0.75rem 1rem;
	color: var(--text-secondary);
	vertical-align: middle;
}

/* Table Cell Specific Styling */
.epoch-badge {
	background: var(--bg-tertiary);
	color: var(--accent);
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
}

.block-code {
	background: var(--bg-secondary);
	color: var(--text-primary);
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
	font-family: monospace;
	font-size: 0.8rem;
}

.date-cell {
	font-size: 0.8rem;
	color: var(--text-tertiary);
	white-space: nowrap;
}

.supply-cell {
	font-weight: 600;
	color: var(--text-primary);
}

.rate-cell {
	font-weight: 700;
	color: var(--text-primary);
}

.hash-cell {
	font-size: 0.8rem;
}

/* CPI Toggle Styling */
.cpi-cell {
	position: relative;
}

.cpi-corrected {
	color: #5599ff;
	font-style: italic;
}

/* Percentage Styling */
.percentage-positive {
	color: var(--success);
	font-weight: 600;
}

.percentage-negative {
	color: var(--danger);
	font-weight: 600;
}

.percentage-neutral {
	color: var(--text-secondary);
}

/* Responsive Table */
@media (max-width: 1200px) {
	.table-card-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.table-controls {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.rebase-table {
		font-size: 0.75rem;
	}

	.rebase-table th,
	.rebase-table td {
		padding: 0.5rem;
	}

	.table-controls {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.table-control-item {
		width: 100%;
	}

	.dropdown-wrapper select {
		width: 100%;
	}

	/* Mobile: Make target summary card height fully flexible to prevent overflow */
	.target-summary-card.flip-card {
		height: auto;
	}

	/* Mobile: Reduce mini chart height to fit better */
	.rb-mini-chart {
		height: 180px;
	}
}

/* ===== TARGET CHANGE TRACKER ===== */

.target-change-container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 1.5rem;
	align-items: stretch;
}

/* Summary Card */
.target-summary-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
}

/* Target Summary Card - specific height for flip-card version */
.target-summary-card.flip-card {
	height: 757px;
}

.target-summary-title {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--accent);
	margin: 0 0 0.75rem 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.target-summary-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
}

.target-stat-item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.target-stat-label {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.target-stat-value {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-primary);
	font-family: 'Courier New', monospace;
}

.target-stat-value small {
	font-size: 0.7rem;
	font-weight: 400;
	color: var(--text-secondary);
	display: block;
	margin-top: 0.125rem;
}

/* Mini Charts in Summary Card */
/* Rebase page specific mini charts */
.rb-mini-chart {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	height: 240px;
}

/* Generic mini chart container (used by calculators page) */
.mini-chart-container {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.mini-chart-title {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin: 0 0 0.5rem 0;
}

.mini-chart-wrapper {
	position: relative;
	width: 100%;
}

.mini-chart-wrapper canvas {
	display: block;
	width: 100% !important;
}

/* Target Change Table - Match main rebase table container exactly */
.target-change-table-container {
	max-height: 600px;
	overflow-x: auto;
	overflow-y: auto;
	background: var(--bg-primary);
}

/* ========================================
   GENERIC FLIP CARD SYSTEM
   Icon-triggered flips - works with any card type
   ======================================== */

/* Generic flip mechanism */
.flip-card {
	position: relative;
}

/* Front and back content wrappers */
.flip-card .flip-front,
.flip-card .flip-back {
	width: 100%;
}

/* Back is hidden by default */
.flip-card .flip-back {
	display: none;
}

/* When flipped: hide front, show back */
.flip-card.flipped .flip-front {
	display: none;
}

.flip-card.flipped .flip-back {
	display: block;
}

/* Flip trigger button - generic styling, positioning controlled by card-specific CSS */
.flip-card .flip-trigger {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 10;
	color: var(--accent);
	font-size: 0.875rem;
}

.flip-card .flip-trigger:hover {
	background: var(--accent);
	color: var(--bg-primary);
	border-color: var(--accent);
	transform: scale(1.1);
}

/* Icon switching - info visible by default, arrow hidden */
.flip-card .flip-trigger .fa-arrow-left {
	display: none;
}

/* When flipped: hide info, show arrow */
.flip-card.flipped .flip-trigger .fa-info {
	display: none;
}

.flip-card.flipped .flip-trigger .fa-arrow-left {
	display: inline-block;
}

/* Target Summary Card - Specific styling */
.target-summary-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
	overflow: hidden;
}

.target-summary-card .flip-trigger {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
}

.target-summary-card .flip-front {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.target-summary-card.flip-card.flipped .flip-back {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow-y: scroll;
}

/* Target Summary back content styling */
.target-summary-card .flip-back h3 {
	color: var(--accent);
	font-size: 1.1rem;
	margin: 0 0 1rem 0;
	padding-right: 2rem;
}

.target-summary-card .flip-back p {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 0.75rem;
}

.target-summary-card .flip-back ul {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0.5rem 0 1rem 1.25rem;
	padding: 0;
}

.target-summary-card .flip-back li {
	margin-bottom: 0.5rem;
}

.target-summary-card .flip-back strong {
	color: var(--text-primary);
	font-weight: 600;
}

/* ========================================
   KNOWLEDGE CENTER - COLLAPSIBLE ACCORDION
   ======================================== */

.knowledge-center {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5rem;
	margin-top: 2rem;
}

.knowledge-center-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--border);
}

.knowledge-center-header i {
	font-size: 1.5rem;
	color: var(--accent);
}

.knowledge-center-header h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--accent);
	margin: 0;
}

.knowledge-center-header p {
	font-size: 0.9rem;
	color: var(--text-tertiary);
	margin: 0.25rem 0 0 0;
}

/* Accordion Item */
.accordion-item {
	border: 1px solid var(--border);
	border-radius: 6px;
	margin-bottom: 0.75rem;
	overflow: hidden;
	transition: all 0.2s ease;
}

.accordion-item:hover {
	border-color: var(--accent);
}

/* Accordion Header (clickable) */
.accordion-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	cursor: pointer;
	background: var(--bg-tertiary);
	transition: all 0.2s ease;
	user-select: none;
}

.accordion-header:hover {
	background: var(--bg-card);
}

.accordion-item.active .accordion-header {
	background: var(--bg-card);
	border-bottom: 1px solid var(--border);
}

.accordion-title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
}

.accordion-title i {
	font-size: 1.1rem;
	color: var(--accent);
}

.accordion-title h3 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

/* Accordion Icon (chevron) */
.accordion-icon {
	font-size: 1rem;
	color: var(--text-tertiary);
	transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
	transform: rotate(180deg);
	color: var(--accent);
}

/* Accordion Content */
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.accordion-item.active .accordion-content {
	max-height: 2000px;
}

.accordion-body {
	padding: 1.25rem;
	background: var(--bg-primary);
}

.accordion-body p {
	color: var(--text-secondary);
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.accordion-body p:last-child {
	margin-bottom: 0;
}

.accordion-body strong {
	color: var(--text-primary);
	font-weight: 600;
}

.accordion-body code {
	background: var(--bg-tertiary);
	color: var(--accent);
	padding: 0.2rem 0.5rem;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
	font-size: 0.9rem;
}

.accordion-body ul {
	margin: 0.75rem 0 1rem 1.5rem;
	padding: 0;
}

.accordion-body li {
	color: var(--text-secondary);
	font-size: 0.95rem;
	line-height: 1.7;
	margin-bottom: 0.5rem;
}

/* Highlight box for important info */
.knowledge-highlight {
	background: rgba(212, 165, 116, 0.1);
	border-left: 3px solid var(--accent);
	padding: 1rem;
	margin: 1rem 0;
	border-radius: 4px;
}

.knowledge-highlight p {
	margin-bottom: 0.5rem;
}

.knowledge-highlight p:last-child {
	margin-bottom: 0;
}

/* Visual Tiers for Change% Column */
.rebase-table td.target-change-normal,
.target-change-normal {
	color: var(--text-primary) !important;
	font-weight: 500;
}

.rebase-table td.target-change-moderate,
.target-change-moderate {
	color: var(--warning) !important;
	font-weight: 600;
}

.rebase-table td.target-change-significant,
.target-change-significant {
	color: var(--danger) !important;
	font-weight: 700;
}

/* Responsive: Stack on mobile */
@media (max-width: 992px) {
	.target-change-container {
		grid-template-columns: 1fr;
	}

	.target-summary-card {
		margin-bottom: 1.5rem;
	}

	.target-summary-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	/* Keep 2-column layout in mobile for efficiency */
	.target-summary-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem 0.75rem;
		font-size: 0.85rem;
	}
}

/* ===== CALCULATOR PAGE COMPONENTS ===== */

/* Calculator Card Base */
.calculator-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s ease;
	position: relative;
}

.calculator-card:hover {
	border-color: rgba(212, 165, 116, 0.3);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.calculator-header {
	background: var(--bg-tertiary);
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.calculator-header-info {
	flex: 1;
}

.calculator-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--accent);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.calculator-subtitle {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin: 0.25rem 0 0 0;
}

.calculator-actions {
	display: flex;
	gap: 0.5rem;
}

.calculator-body {
	padding: 1.5rem;
}

.calculator-description {
	color: var(--text-secondary);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
	line-height: 1.5;
}

/* Calculator Hero - Split Layout */
.calculator-hero .calculator-body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

.calculator-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start;
}

@media (max-width: 992px) {
	.calculator-hero .calculator-body,
	.calculator-split {
		grid-template-columns: 1fr;
	}
}

.calculator-visual {
	text-align: center;
}

.target-visualization {
	max-width: 100%;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.2s ease;
	border: 1px solid var(--border);
	background: var(--bg-tertiary);
}

.target-visualization:hover {
	transform: scale(1.02);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.calculator-controls {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Calculator Grid (Two Column) */
.calculator-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

@media (max-width: 992px) {
	.calculator-grid {
		grid-template-columns: 1fr;
	}
}

/* Control Groups */
.control-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.control-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Mode Toggle (Radio Button Group) */
.mode-toggle {
	display: flex;
	background: var(--bg-primary);
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
}

.mode-toggle-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.mode-toggle-label {
	flex: 1;
	padding: 0.5rem 1rem;
	text-align: center;
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-secondary);
	transition: all 0.2s ease;
	border-right: 1px solid var(--border);
	margin: 0;
}

.mode-toggle-label:last-of-type {
	border-right: none;
}

.mode-toggle-input:checked + .mode-toggle-label {
	background: var(--accent);
	color: var(--bg-primary);
}

.mode-toggle-label:hover {
	background: var(--bg-tertiary);
}

.mode-toggle-input:checked + .mode-toggle-label:hover {
	background: var(--accent);
}

.mode-toggle-sm .mode-toggle-label {
	padding: 0.35rem 0.75rem;
	font-size: 0.8rem;
}

/* Input Groups */
.input-group-custom {
	display: flex;
	align-items: stretch;
}

.input-prefix {
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-right: none;
	padding: 0.5rem 0.75rem;
	color: var(--text-secondary);
	font-weight: 600;
	border-radius: 4px 0 0 4px;
	display: flex;
	align-items: center;
	font-size: 0.875rem;
}

.input-field {
	flex: 1;
	background: var(--bg-primary);
	border: 1px solid var(--border);
	color: var(--text-primary);
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	border-radius: 0 4px 4px 0;
	transition: border-color 0.2s ease;
}

.input-field:focus {
	outline: none;
	border-color: var(--accent);
}

.input-field.input-full {
	border-radius: 4px;
}

.btn-reset {
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-left: none;
	padding: 0.5rem 0.75rem;
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 0.8rem;
	cursor: pointer;
	border-radius: 0 4px 4px 0;
	transition: all 0.2s ease;
}

.btn-reset:hover {
	background: var(--accent);
	color: var(--bg-primary);
}

/* Datetime Input Group */
.datetime-input-group {
	display: flex;
	gap: 0.5rem;
}

.datetime-input-group .input-field {
	border-radius: 4px;
}

.input-seconds {
	width: 60px;
	flex: 0 0 60px;
	text-align: center;
}

.input-hint {
	display: block;
	font-size: 0.75rem;
	color: var(--text-tertiary);
	margin-top: 0.25rem;
}

/* Button Variants */
.btn-icon {
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text-secondary);
	width: 32px;
	height: 32px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.btn-icon:hover {
	background: var(--bg-tertiary);
	border-color: var(--accent);
	color: var(--accent);
}

.btn-full {
	width: 100%;
	justify-content: center;
}

.btn-sm {
	padding: 0.4rem 0.8rem;
	font-size: 0.8rem;
}

.btn-success {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--success);
	color: var(--bg-primary);
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}

.btn-success:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

.btn-danger {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--danger);
	color: white;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
	transition: all 0.2s ease;
	border: none;
	cursor: pointer;
}

.btn-danger:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

/* Ownership Result Display */
.ownership-result {
	padding: 2rem 0;
}

.result-label {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin-bottom: 0.5rem;
}

.result-value {
	font-size: 3rem;
	font-weight: 700;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 0.5rem;
}

.result-symbol {
	opacity: 0.6;
	margin-right: 0.25rem;
}

.result-subtitle {
	font-size: 0.875rem;
	color: var(--text-tertiary);
}

.supply-info-box {
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1rem;
	margin: 1.5rem 0;
	text-align: center;
}

.supply-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.supply-value {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

/* Calculator Card Flip Trigger Positioning */
.calculator-card .flip-trigger {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
}

/* Rebase Results Grid */
.rebase-results-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

.result-card {
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1rem;
	text-align: center;
}

.result-card-title {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 0.5rem 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.result-epoch {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0;
}

.result-date {
	font-size: 0.75rem;
	color: var(--text-tertiary);
	margin: 0.25rem 0;
}

.result-ampl {
	font-size: 1rem;
	font-weight: 700;
	color: var(--text-primary);
	margin: 0.5rem 0 0 0;
}

.result-usd {
	font-size: 0.85rem;
	color: var(--success);
	margin: 0.25rem 0 0 0;
}

.result-rate {
	font-size: 0.75rem;
	color: var(--text-tertiary);
	margin: 0.25rem 0 0 0;
}

/* Calculation Summary */
.calculation-summary {
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1rem;
	margin-bottom: 1rem;
}

.calculation-summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.summary-column {
	display: flex;
	flex-direction: column;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.25rem 0;
	font-size: 0.85rem;
}

.summary-label {
	color: var(--text-secondary);
	font-weight: 500;
}

.summary-value {
	color: var(--text-primary);
	font-weight: 600;
}

/* Mini Charts Row */
.mini-charts-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.mini-chart {
	text-align: center;
	min-width: 0; /* Prevent overflow */
}

.mini-chart-title {
	font-size: 0.7rem;
	color: var(--text-tertiary);
	margin: 0 0 0.5rem 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mini-chart-container {
	height: 80px;
}

/* Mobile responsiveness for mini-charts */
@media (max-width: 768px) {
	.mini-charts-row {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.mini-chart-container {
		height: 100px;
	}

	.calculation-summary-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* Tools Subsections */
.tools-subsection {
	margin-bottom: 2rem;
}

.subsection-title {
	font-size: 1.1rem;
	color: var(--text-primary);
	margin: 0 0 1rem 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.subsection-note {
	font-size: 0.85rem;
	color: var(--text-tertiary);
	font-style: italic;
	margin: -0.5rem 0 1rem 0;
}

/* External Link Card - Icon Variants */
.external-icon.official {
	background: rgba(212, 165, 116, 0.15);
	color: var(--accent);
}

.external-icon.community {
	background: rgba(143, 179, 89, 0.15);
	color: var(--success);
}

.external-icon.research {
	background: rgba(232, 180, 79, 0.15);
	color: var(--warning);
}

.external-icon.bot {
	background: rgba(143, 179, 89, 0.15);
	color: var(--success);
}

.external-icon.legacy {
	background: rgba(122, 112, 103, 0.15);
	color: var(--text-tertiary);
	opacity: 0.7;
}

/* External Link Card - Inactive State */
.external-link-card.inactive {
	opacity: 0.8;
	border-color: var(--danger);
}

.external-link-card.inactive:hover {
	opacity: 0.9;
}

/* External Content Updates/Sources */
.external-update {
	font-size: 0.8rem;
	color: var(--warning);
	margin: 0.5rem 0;
	padding: 0.5rem;
	background: rgba(232, 180, 79, 0.1);
	border-radius: 4px;
}

.external-source {
	font-size: 0.75rem;
	color: var(--text-tertiary);
	margin: 0.5rem 0;
}

.external-source a {
	color: var(--accent);
	text-decoration: none;
}

.external-source a:hover {
	text-decoration: underline;
}

/* Badges */
.badge-broken {
	display: inline-block;
	background: var(--danger);
	color: white;
	padding: 0.15rem 0.5rem;
	border-radius: 10px;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-left: 0.5rem;
	vertical-align: middle;
}

.badge-removed {
	display: inline-block;
	background: var(--text-tertiary);
	color: white;
	padding: 0.15rem 0.5rem;
	border-radius: 10px;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	margin-left: 0.5rem;
	vertical-align: middle;
}

/* Modal Styles */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 2rem;
}

.modal-container {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	max-width: 900px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.modal-header {
	background: var(--bg-tertiary);
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

.modal-close {
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-size: 1.25rem;
	cursor: pointer;
	padding: 0.25rem;
	transition: color 0.2s ease;
}

.modal-close:hover {
	color: var(--accent);
}

.modal-body {
	padding: 1.5rem;
	text-align: center;
	overflow-y: auto;
}

.modal-image {
	max-width: 100%;
	max-height: 60vh;
	border-radius: 6px;
	border: 1px solid var(--border);
}

.modal-footer {
	background: var(--bg-tertiary);
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

/* Text Utilities */
.text-center {
	text-align: center;
}

.text-success {
	color: var(--success) !important;
}

.text-danger {
	color: var(--danger) !important;
}

.text-warning {
	color: var(--warning) !important;
}


/* ===== AMPLETS PAGE COMPONENTS ===== */

/* Amplet Grid */
.amplet-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
}

/* Amplet Card */
.amplet-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.25rem;
	transition: all 0.3s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}

.amplet-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.amplet-card-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0;
}

.amplet-card-address {
	font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
	font-size: 0.75rem;
	color: var(--text-tertiary);
	word-break: break-all;
	margin-bottom: 1rem;
	flex-grow: 1;
	line-height: 1.4;
}

.amplet-card-actions {
	display: flex;
	gap: 0.5rem;
}

.amplet-card-actions .btn-primary,
.amplet-card-actions .btn-secondary {
	flex: 1;
	justify-content: center;
}

.amplet-card-actions .btn-secondary:last-child {
	flex: 0;
}

/* Amplet Info Display (Controls Bar) */
.amplet-info-display {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.amplet-address-badge {
	font-family: monospace;
	font-size: 0.8rem;
	background: var(--bg-primary);
	color: var(--text-secondary);
	padding: 0.35rem 0.75rem;
	border-radius: 4px;
	border: 1px solid var(--border);
}

.amplet-name-badge {
	font-weight: 600;
	color: var(--accent);
	font-size: 0.95rem;
}

.amplet-full-address {
	font-family: monospace;
	font-size: 0.85rem;
	background: var(--bg-tertiary);
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	color: var(--text-secondary);
}

/* Amplet Balance Table */
.amplet-balance-table {
	font-family: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', monospace;
}

.amplet-balance-table th {
	font-weight: 700;
}

.amplet-balance-table .col-ampl {
	color: var(--accent);
}

.amplet-balance-table .col-wampl {
	color: var(--success);
}

.amplet-balance-table .col-forth {
	color: var(--warning);
}

.amplet-balance-table .col-spot {
	color: var(--text-secondary);
}

/* Balance cell colors with subtle backgrounds */
.amplet-balance-table .timestamp-cell {
	font-weight: 600;
	color: var(--text-primary);
	background: var(--bg-tertiary);
}

.amplet-balance-table .balance-ampl {
	font-weight: 600;
	color: var(--accent);
	background: rgba(212, 165, 116, 0.1);
}

.amplet-balance-table .balance-wampl {
	font-weight: 600;
	color: var(--success);
	background: rgba(143, 179, 89, 0.1);
}

.amplet-balance-table .balance-forth {
	font-weight: 600;
	color: var(--warning);
	background: rgba(232, 180, 79, 0.1);
}

.amplet-balance-table .balance-spot {
	font-weight: 600;
	color: var(--text-secondary);
	background: rgba(176, 162, 152, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
	.amplet-grid {
		grid-template-columns: 1fr;
	}

	.amplet-info-display {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
}

/* ===== FORTH DASHBOARD / GOVERNANCE WATCHDOG ===== */

/* Main Contract Sections - Prominent amber border */
.card-section.governance-section {
	background: var(--bg-card);
	border: 2px solid var(--accent);
	border-radius: 12px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

/* Full Address Display with Copy Button */
.address-full {
	font-family: monospace;
	font-size: 0.85rem;
	color: var(--text-primary);
	background: var(--bg-primary);
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	border: 1px solid var(--border);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

.address-full code {
	flex: 1;
	user-select: all;
	word-break: break-all;
	background: transparent;
	padding: 0;
	color: inherit;
	line-height: 1.4;
}

.copy-btn {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	color: var(--text-secondary);
	padding: 0.35rem 0.6rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.75rem;
	transition: all 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
}

.copy-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.copy-btn.copied {
	background: var(--success);
	border-color: var(--success);
	color: white;
}

/* Current State Box */
.current-state-box {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

/* FORTH Dashboard Stat Grid - override for governance watchdog */
.governance-section .stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}

/* FORTH Dashboard Stat Tiles - simple label/value cards */
.governance-section .stat-tile {
	background: var(--bg-primary);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
}

.governance-section .stat-tile .stat-label {
	color: var(--text-secondary);
	font-size: 0.85rem;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.governance-section .stat-tile .stat-value {
	color: var(--accent);
	font-size: 1.5rem;
	font-weight: 700;
}

.governance-section .stat-tile .stat-value.success {
	color: var(--success);
}

/* Governance Badge - muted amber-toned */
.governance-section .section-badge {
	background: rgba(212, 165, 116, 0.15);
	color: var(--accent);
	border: 1px solid rgba(212, 165, 116, 0.3);
}

.current-state-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.current-state-title {
	color: var(--text-primary);
	font-size: 1rem;
	font-weight: 600;
}

.current-state-title i {
	color: var(--accent);
	margin-right: 0.5rem;
}

.timestamp-badge {
	background: var(--bg-card);
	color: var(--text-secondary);
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 0.8rem;
}

/* Parameter Grid */
.param-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
}

.param-group {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.25rem;
}

.param-group-title {
	color: var(--accent);
	font-weight: 600;
	margin-bottom: 1rem;
	font-size: 0.95rem;
}

.param-group-title i {
	margin-right: 0.5rem;
}

.param-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--border);
}

.param-item:last-child {
	border-bottom: none;
}

.param-label {
	color: var(--text-secondary);
	font-size: 0.85rem;
}

.param-value {
	color: var(--text-primary);
	font-weight: 600;
	text-align: right;
}

.param-value small {
	display: block;
	color: var(--text-tertiary);
	font-weight: normal;
	font-size: 0.75rem;
}

/* Change History Timeline */
.change-history-title {
	color: var(--text-primary);
	margin: 1.5rem 0 1rem 0;
	font-size: 1rem;
	font-weight: 600;
}

.change-history-title i {
	color: var(--accent);
	margin-right: 0.5rem;
}

.change-timeline {
	position: relative;
	padding-left: 2rem;
}

.change-timeline::before {
	content: '';
	position: absolute;
	left: 0.5rem;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--border);
}

.timeline-entry {
	position: relative;
	margin-bottom: 1.5rem;
	padding-left: 1rem;
}

.timeline-entry::before {
	content: '';
	position: absolute;
	left: -1.5rem;
	top: 0.5rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--border);
}

.timeline-entry.has-changes::before {
	background: var(--warning);
}

.timeline-entry.current::before {
	background: var(--accent);
}

.timeline-timestamp {
	color: var(--text-secondary);
	font-size: 0.85rem;
	margin-bottom: 0.25rem;
}

.timeline-block {
	color: var(--text-tertiary);
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
}

.timeline-changes {
	background: var(--bg-secondary);
	border-radius: 8px;
	padding: 1rem;
}

.change-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
	font-size: 0.85rem;
	flex-wrap: wrap;
}

.change-label {
	color: var(--text-secondary);
	min-width: 150px;
}

.change-old {
	color: var(--danger);
	text-decoration: line-through;
}

.change-arrow {
	color: var(--warning);
}

.change-new {
	color: var(--success);
	font-weight: 600;
}

.no-changes {
	color: var(--text-tertiary);
	font-style: italic;
	font-size: 0.85rem;
}

/* History Toggle Button */
.history-toggle {
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	color: var(--text-secondary);
	padding: 0.5rem 1rem;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.85rem;
	margin-top: 1.5rem;
	transition: all 0.2s ease;
}

.history-toggle:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.history-toggle i {
	margin-right: 0.5rem;
}

/* Raw History Section */
.raw-history {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}

.raw-history-title {
	color: var(--text-tertiary);
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.raw-history-title i {
	margin-right: 0.5rem;
}

/* Responsive for FORTH Dashboard */
@media (max-width: 768px) {
	.param-grid {
		grid-template-columns: 1fr;
	}

	.current-state-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.change-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.change-label {
		min-width: auto;
	}

	/* Keep address and copy button inline on mobile */
	.address-full {
		/* No column stacking - keep flexbox row layout */
		align-items: flex-start;
	}

	.governance-section .stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.governance-section .stat-grid {
		grid-template-columns: 1fr;
	}
}

/* ===== WAMPL WATCH METRICS ===== */
/* Compact metric cards for WAMPL Watch page */
.wampl-metrics .stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.wampl-metrics .stat-tile {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 1.25rem;
	text-align: center;
}

.wampl-metrics .stat-label {
	color: var(--text-secondary);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.75rem;
}

.wampl-metrics .stat-value {
	background: none;
	padding: 0;
	color: var(--accent);
	font-size: 1.75rem;
	font-weight: 700;
	font-family: 'Orbitron', monospace;
	margin-bottom: 0.5rem;
}

.wampl-metrics .stat-description {
	color: var(--text-tertiary);
	font-size: 0.8rem;
	margin-bottom: 0.75rem;
}

@media (max-width: 768px) {
	.wampl-metrics .stat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.wampl-metrics .stat-grid {
		grid-template-columns: 1fr;
	}
}

/* ========================================
   RESEARCH PAGE - SEARCH HERO
   ======================================== */

.search-hero {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 2rem;
	margin-bottom: 2rem;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover effect defined in at-amber-effects.css (signature hover) */

.search-hero form {
	margin: 0;
}

.search-bar-large {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
	align-items: flex-end;
}

.search-input-wrapper {
	flex: 1 1 300px;
	position: relative;
	min-width: 200px;
}

.search-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-tertiary);
	font-size: 1.2rem;
	pointer-events: none;
}

.search-input-large {
	width: 100%;
	background: var(--bg-primary);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.875rem 1rem 0.875rem 3rem;
	color: var(--text-primary);
	font-size: 1rem;
	font-family: 'Inter', sans-serif;
	transition: all 0.2s ease;
}

.search-input-large::placeholder {
	color: var(--text-tertiary);
}

.search-input-large:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
	background: var(--bg-secondary);
}

.search-filters-inline {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
}

.search-filters-inline select {
	background: var(--bg-primary);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 0.875rem 2.5rem 0.875rem 1rem;
	color: var(--text-primary);
	font-size: 0.9rem;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	transition: all 0.2s ease;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b0a298' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	min-width: 180px;
}

.search-filters-inline select:hover {
	border-color: var(--accent);
	background-color: var(--bg-secondary);
}

.search-filters-inline select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	flex-wrap: wrap;
	gap: 0.75rem;
}

.search-results-count {
	color: var(--text-secondary);
	font-size: 0.9rem;
}

.search-results-count strong {
	color: var(--accent);
	font-weight: 600;
}

.search-clear-filters {
	color: var(--text-tertiary);
	font-size: 0.875rem;
	text-decoration: none;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.search-clear-filters:hover {
	color: var(--accent);
}

.search-clear-filters i {
	font-size: 0.75rem;
}

@media (max-width: 768px) {
	.search-bar-large {
		flex-direction: column;
	}

	.search-input-wrapper {
		min-width: 100%;
	}

	.search-filters-inline {
		width: 100%;
	}

	.search-filters-inline select {
		flex: 1;
		min-width: 140px;
	}
}

/* ========================================
   RESEARCH PAGE - FEATURED CARD (Section 4)
   ======================================== */

.featured-hero {
	margin-bottom: 3rem;
}

.research-featured-card {
	display: grid;
	grid-template-columns: 400px 1fr;
	gap: 0;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	min-height: 320px;
}

.research-featured-card:hover {
	border-color: rgba(212, 165, 116, 0.4);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.research-featured-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

/* Icon centered and above pattern */
.research-featured-icon {
	font-size: 5rem;
	color: rgba(212, 165, 116, 0.4);
	position: relative;
	z-index: 1;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.research-featured-card:hover .research-featured-icon {
	color: rgba(212, 165, 116, 0.6);
	transform: scale(1.05);
}

.research-featured-badge {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	background: var(--accent);
	color: var(--bg-primary);
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.5px;
	z-index: 2;
}

.featured-hero .research-featured-content {
	padding: 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.research-featured-title {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--accent);
	line-height: 1.3;
	margin: 0;
}

.research-featured-preview {
	color: var(--text-secondary);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0;
	flex-grow: 1;
}

.research-featured-meta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	align-items: center;
}

.source-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 0.875rem;
}

.source-badge .source-favicon {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: var(--accent);
	color: var(--bg-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.75rem;
}

.featured-hero .research-featured-content > div {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

@media (max-width: 992px) {
	.research-featured-card {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.research-featured-visual {
		min-height: 200px;
	}

	.featured-hero .research-featured-content {
		padding: 2rem;
	}

	.featured-hero .research-featured-title {
		font-size: 1.5rem;
	}

	.featured-hero .research-featured-content > div {
		flex-direction: column;
	}

	.featured-hero .research-featured-content .btn {
		width: 100%;
		margin-right: 0;
	}
}

/* ===================================================================
   RESEARCH CARDS (Section 5: Latest Research)
   =================================================================== */

.research-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	display: flex;
	flex-direction: column;
}

.research-visual {
	position: relative;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.research-icon {
	font-size: 4rem;
	color: rgba(212, 165, 116, 0.4);
	position: relative;
	z-index: 1;
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.research-card:hover .research-icon {
	color: rgba(212, 165, 116, 0.6);
	transform: scale(1.05);
}

.research-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: var(--accent);
	color: var(--bg-primary);
	padding: 0.35rem 0.75rem;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 2;
}

.research-content {
	padding: 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.research-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.75rem;
	line-height: 1.4;
}

.research-preview {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 1rem;
	flex: 1;
	max-height: 6.4rem; /* 4 lines at 1.6 line-height = 4 * 1.6 = 6.4rem */
	overflow: hidden;
}

.research-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	gap: 0.75rem;
	flex-wrap: wrap;
}

.research-source {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--text-secondary);
}

.research-source-icon {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	color: var(--text-tertiary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.6rem;
	font-weight: 700;
	flex-shrink: 0;
}

.research-source-icon.medium {
	background: #000;
	color: white;
	border: none;
}

.research-source-icon.github {
	background: #24292e;
	color: white;
	border: none;
}

.research-source-icon.youtube {
	background: #ff0000;
	color: white;
	border: none;
}

.research-source-icon.twitter {
	background: #1da1f2;
	color: white;
	border: none;
}

.research-actions {
	display: flex;
	gap: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
	.research-footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.research-actions {
		width: 100%;
		flex-direction: column;
	}

	.research-actions .btn {
		width: 100%;
	}
}

/* ========================================
   CONTRACTS PAGE
   ======================================== */

/* Contract Section Container - Dark card with amber border hierarchy */
.contract-section {
	background-color: var(--bg-card);
	border: 2px solid var(--accent);
	border-radius: 8px;
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.contract-section h3 {
	color: var(--accent);
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
}

.contract-section > p {
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

/* Contract Row - 3-column grid layout */
.contract-row {
	display: grid;
	grid-template-columns: 200px 2fr 1.5fr;
	gap: 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--border);
}

.contract-row:last-child {
	border-bottom: none;
}

.contract-row-name {
	font-weight: 600;
	color: var(--text-primary);
}

.contract-row-remarks {
	color: var(--text-secondary);
	font-size: 0.9rem;
}

/* Deprecated contract row - greyed out for upgraded/replaced contracts */
.contract-row.deprecated {
	background: var(--bg-tertiary);
	opacity: 0.6;
}

.contract-row.deprecated .contract-row-name,
.contract-row.deprecated .contract-row-remarks {
	color: var(--text-tertiary);
}

/* Contract metadata - supplementary contract information */
.contract-metadata {
	font-size: 0.85rem;
	color: var(--text-tertiary);
	line-height: 1.6;
}

/* H4 subsection headings within contract sections */
.contract-section h4 {
	color: var(--text-primary);
	font-size: 1.1rem;
	font-weight: 600;
	margin-top: 1.5rem;
	margin-bottom: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.contract-section h4:first-of-type {
	margin-top: 1rem;
}

/* Two-column section header with bridge info (for satellite chains) */
.section-header-with-bridge {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 2rem;
	margin-bottom: 1.5rem;
	align-items: start;
}

.section-header-content h3 {
	margin-top: 0;
}

.section-header-content p {
	margin-bottom: 0;
}

.section-bridge-info {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 1rem;
	align-items: start;
}

.section-bridge-info img {
	max-height: 50px;
	border-radius: 4px;
}

.section-bridge-info > div {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.section-bridge-info strong {
	color: var(--accent);
	font-size: 0.95rem;
}

.section-bridge-info p {
	font-size: 0.85rem;
	color: var(--text-secondary);
	line-height: 1.5;
	margin: 0;
}

.section-bridge-info a {
	font-size: 0.85rem;
}

/* Responsive: stack on mobile */
@media (max-width: 767px) {
	.section-header-with-bridge {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* Contract section link styling - at-amber themed */
.contract-section a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

/* Nested contract table (for geysers with multiple addresses) */
.nested-contract-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 4px;
	overflow: hidden;
}

.nested-contract-table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--border);
	border-right: 1px solid var(--border);
}

.nested-contract-table td:first-child {
	color: var(--text-secondary);
	font-weight: 500;
	background: var(--bg-tertiary);
	width: 35%;
}

.nested-contract-table td:last-child {
	border-right: none;
}

.nested-contract-table tr:last-child td {
	border-bottom: none;
}

.nested-contract-table a {
	word-break: break-all;
	font-size: 0.8rem;
}

.contract-section a:hover {
	color: var(--text-primary);
	text-decoration: underline;
}

/* Responsive: Stack on mobile */
@media (max-width: 767px) {
	.contract-row {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

/* ===== TIMELINE SECTION (Historybook Page) ===== */

/* Timeline Card Container */
.hb-timeline-card {
	background: var(--bg-card);
	border: 1px solid var(--accent);
	border-radius: 4px;
	margin-bottom: 2rem;
	overflow: hidden;
}

.hb-timeline-card-header {
	background: var(--bg-tertiary);
	border-bottom: 1px solid var(--accent-glow);
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

.hb-timeline-header-left h3 {
	font-size: 1.1rem;
	color: var(--accent);
	margin-bottom: 0.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hb-timeline-header-left p {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin: 0;
}

/* Timeline Navigation Controls */
.hb-timeline-controls {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.hb-timeline-btn-group {
	display: flex;
	gap: 0.25rem;
}

/* Historybook Timeline Buttons */
.hb-timeline-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--accent-glow);
	color: var(--text-primary);
	border-radius: 4px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}

.hb-timeline-btn:hover {
	background: var(--bg-primary);
	border-color: var(--accent);
	color: var(--accent);
}

.hb-timeline-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--accent);
	border: 1px solid var(--accent);
	color: var(--bg-primary);
	border-radius: 4px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}

.hb-timeline-btn-primary:hover {
	background: #c9955f;
	border-color: #c9955f;
	color: var(--bg-primary);
}

.hb-timeline-btn-success {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--success);
	color: var(--success);
	border-radius: 4px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}

.hb-timeline-btn-success:hover {
	background: var(--success);
	border-color: var(--success);
	color: var(--bg-primary);
}

/* Timeline Viewer Area */
#hb-timeline-embed {
	width: 100%;
	height: 600px;
	background: var(--bg-primary);
}

/* Date Navigation Form (Footer) */
.hb-date-navigation-footer {
	background: var(--bg-tertiary);
	border-top: 1px solid var(--accent-glow);
	padding: 1.5rem;
}

.hb-date-form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	align-items: end;
}

.hb-date-form-field label {
	display: block;
	font-size: 0.75rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0.5rem;
	font-weight: 600;
}

.hb-date-form-field input {
	width: 100%;
	background: var(--bg-card);
	border: 1px solid var(--accent-glow);
	color: var(--text-primary);
	padding: 0.625rem;
	border-radius: 4px;
	font-size: 0.95rem;
}

.hb-date-form-field input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 2px var(--accent-glow);
}

.hb-date-form-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Event Navigator Table */
.hb-events-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.hb-events-table thead {
	background: var(--bg-tertiary);
}

.hb-events-table th {
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 600;
	color: var(--text-primary);
	border-bottom: 2px solid var(--border);
	white-space: nowrap;
	background: var(--bg-tertiary);
	position: sticky;
	top: 0;
	z-index: 10;
}

.hb-events-table tbody tr {
	border-bottom: 1px solid var(--border);
	transition: background-color 0.2s;
}

.hb-events-table tbody tr:nth-of-type(even) {
	background: rgba(255, 255, 255, 0.02);
}

.hb-events-table tbody tr:hover {
	background: var(--bg-secondary);
}

.hb-events-table tbody tr:last-child {
	border-bottom: none;
}

.hb-events-table td {
	padding: 0.75rem 1rem;
	color: var(--text-secondary);
	vertical-align: middle;
}

/* ========================================
   SECTION 6: Fullscreen Slideshow Mode
   ======================================== */

/* Fullscreen Overlay Container */
.hb-fullscreen-slideshow {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: #000;
	display: none;
}

.hb-fullscreen-slideshow.active {
	display: block;
}

/* Fullscreen Timeline Container */
.hb-fullscreen-timeline-container {
	width: 100%;
	height: 100vh;
	border-radius: 0;
}

/* Fullscreen Controls (Top-Right) */
.hb-fullscreen-controls {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 10000;
}

.hb-fullscreen-btn-group {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

/* Danger Button Variant (Red Exit Button) */
.hb-timeline-btn-danger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--danger);
	color: var(--danger);
	border-radius: 4px;
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s;
}

.hb-timeline-btn-danger:hover {
	background: var(--danger);
	color: var(--bg-primary);
}

/* Progress Bar (Bottom) */
.hb-slideshow-progress {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 4px;
	background: var(--accent);
	transition: width 0.1s ease;
	z-index: 10000;
}

/* Slide Info Panel (Bottom-Left) */
.hb-slideshow-info {
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: white;
	background: rgba(0, 0, 0, 0.7);
	padding: 10px 15px;
	border-radius: 4px;
	z-index: 10000;
	font-size: 0.875rem;
}

.hb-slideshow-timer {
	margin-top: 0.25rem;
	opacity: 0.8;
}

.hb-slideshow-shortcuts {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 0.8125rem;
}

.hb-key-hint {
	color: white;
	font-weight: 600;
}

/* ========================================
   CHANGELOG PAGE COMPONENTS
   ======================================== */

/* Changelog Container */
.changelog-container {
	margin-top: 2rem;
}

/* Changelog Entry Card */
.changelog-entry {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	margin-bottom: 2rem;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.changelog-entry:hover {
	border-color: var(--accent-glow);
}

/* Changelog Header (with Accordion Support) */
.changelog-header {
	background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
	border-bottom: 2px solid var(--accent);
	padding: 1.25rem 1.5rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.changelog-header:hover {
	background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}

.changelog-header h3 {
	color: var(--accent);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1;
}

.changelog-header h3 i {
	font-size: 1.75rem;
}

/* Accordion icon positioning for changelog */
.changelog-header .accordion-icon {
	font-size: 1.25rem;
	color: var(--accent);
	transition: transform 0.3s ease;
}

.changelog-entry.active .changelog-header .accordion-icon {
	transform: rotate(180deg);
}

/* Changelog Content Area */
.changelog-content {
	padding: 1.5rem;
}

.changelog-content > p:first-child {
	margin-top: 0;
}

.changelog-content p {
	line-height: 1.6;
	margin-bottom: 1rem;
}

/* Changelog Section (h4 features) */
.changelog-section {
	margin: 1.5rem 0;
}

.changelog-section h4 {
	color: var(--accent);
	font-size: 1.125rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.changelog-section h4 i {
	font-size: 1.25rem;
}

.changelog-section p {
	margin-bottom: 0.75rem;
}

/* Changelog Lists */
.changelog-content ul {
	margin: 0.75rem 0;
	padding-left: 1.5rem;
}

.changelog-content li {
	margin-bottom: 0.5rem;
	line-height: 1.6;
	color: var(--text-secondary);
}

.changelog-content li strong {
	color: var(--text-primary);
}

/* Changelog Divider */
.changelog-divider {
	border: none;
	border-top: 1px solid var(--border);
	margin: 1.5rem 0;
}

/* Changelog Links */
.changelog-content a {
	color: var(--accent);
	text-decoration: underline;
	transition: color 0.2s ease;
}

.changelog-content a:hover {
	color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
	.hb-timeline-controls {
		width: 100%;
		justify-content: flex-start;
	}

	.hb-date-form-grid {
		grid-template-columns: 1fr;
	}
}