/* ─────────────────────────────────────────────────────────────────────────
   ENGINE ROOM - MONEY FLOW WATERFALL
   ───────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   SECTION HEADER - Responsive Layout
   ═══════════════════════════════════════════════════════════════════ */
.engine-room-header {
	position: relative;
}

.engine-room-header-content {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.engine-room-title-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.engine-room-title-text {
	display: inline;
}

.engine-room-description {
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Cap Bucket Badge */
.engine-room-cap-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text);
	background: linear-gradient(135deg, 
		color-mix(in oklch, var(--primary) 10%, var(--bg-light)) 0%, 
		color-mix(in oklch, var(--secondary) 8%, var(--bg-light)) 100%);
	border: 1px solid color-mix(in oklch, var(--primary) 30%, transparent);
	border-radius: 2rem;
	box-shadow: var(--shadow-xs);
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.engine-room-cap-badge:hover {
	transform: translateY(-1px);
	box-shadow: var(--shadow-s);
	border-color: color-mix(in oklch, var(--primary) 40%, transparent);
}

.engine-room-cap-badge i {
	font-size: 0.9rem;
	opacity: 0.85;
}

/* Mobile Optimizations for Header */
@media (max-width: 767.98px) {
	.engine-room-title-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
	
	.engine-room-header h2 {
		font-size: 1.5rem;
		margin-bottom: 0.5rem !important;
		display: flex;
		align-items: center;
		line-height: 1.3;
	}
	
	.engine-room-header h2 i {
		font-size: 1.25rem;
		margin-right: 0.5rem !important;
	}
	
	.engine-room-title-text {
		display: inline;
	}
	
	.engine-room-cap-badge {
		padding: 0.4rem 0.75rem;
		font-size: 0.75rem;
		align-self: flex-start;
	}
	
	.engine-room-cap-badge i {
		font-size: 0.8rem;
	}
	
	.engine-room-description {
		font-size: 0.875rem;
		line-height: 1.5;
	}
}

/* Extra small mobile devices */
@media (max-width: 575.98px) {
	.engine-room-header h2 {
		font-size: 1.35rem;
	}
	
	.engine-room-cap-badge {
		width: 100%;
		justify-content: center;
		padding: 0.5rem 0.75rem;
	}
	
	.engine-room-description {
		font-size: 0.8125rem;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   WATERFALL CONTAINER - Two-Pane Layout
   ═══════════════════════════════════════════════════════════════════ */
.money-flow-waterfall-container {
   display: grid;
   grid-template-columns: 280px 1fr;
   gap: 1.5rem;
   margin-bottom: 3rem;
   min-height: 500px;
}

/* Collapse to single column earlier for better tablet/phone experience */
@media (max-width: 767.98px) {
   .money-flow-waterfall-container {
      grid-template-columns: 1fr;
      gap: 1rem;
      min-height: auto;
   }
   
   .waterfall-steps-list {
      max-height: 300px; /* Limit step list height on mobile */
   }
   
   .waterfall-chart-panel {
      min-height: 350px;
   }
}

/* ═══════════════════════════════════════════════════════════════════════
   LEFT PANEL - STEP NAVIGATOR (25%)
   ═══════════════════════════════════════════════════════════════════ */
.waterfall-steps {
   display: flex;
   flex-direction: column;
   background: var(--bg-light);
   border-radius: 0.75rem;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-s);
   overflow: hidden;
}

.waterfall-steps-header {
   padding: 1rem 1.25rem;
   background: linear-gradient(135deg, 
      color-mix(in oklch, var(--primary) 8%, var(--bg-light)) 0%, 
      color-mix(in oklch, var(--secondary) 5%, var(--bg-light)) 100%);
   border-bottom: 1px solid var(--border);
}

.waterfall-steps-header h6 {
   color: var(--text);
   font-weight: 600;
   font-size: 0.9rem;
}

.waterfall-steps-list {
   flex: 1;
   overflow-y: auto;
   max-height: 600px;
}

/* Individual Step */
.waterfall-step {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 0.875rem 1rem;
   cursor: pointer;
   transition: all 0.2s ease;
   border-bottom: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
   position: relative;
}

.waterfall-step:hover {
   background: color-mix(in oklch, var(--primary) 5%, var(--bg-light));
}

.waterfall-step.selected,
.waterfall-step[data-selected="true"] {
   background: color-mix(in oklch, var(--primary) 12%, var(--bg-light));
   border-left: 3px solid var(--primary);
   padding-left: calc(1rem - 3px);
}

.waterfall-step-marker {
   flex-shrink: 0;
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary);
   font-size: 0.9rem;
}

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

.waterfall-step-label {
   font-weight: 600;
   font-size: 0.85rem;
   color: var(--text);
   margin-bottom: 0.25rem;
   line-height: 1.3;
}

.waterfall-step-value {
   font-size: 0.875rem;
   color: var(--text-muted);
   font-weight: 500;
}

.waterfall-step-trend {
   display: flex;
   align-items: center;
   gap: 0.35rem;
   margin-top: 0.25rem;
   font-size: 0.75rem;
   font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   RIGHT PANEL - WATERFALL CHART (75%)
   ═══════════════════════════════════════════════════════════════════ */
.waterfall-chart-panel {
   display: flex;
   flex-direction: column;
   background: var(--bg-light);
   border-radius: 0.75rem;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-s);
   overflow: hidden;
   position: relative;
}

.waterfall-chart-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.5rem;
   background: linear-gradient(135deg, 
      color-mix(in oklch, var(--primary) 8%, var(--bg-light)) 0%, 
      color-mix(in oklch, var(--secondary) 5%, var(--bg-light)) 100%);
   border-bottom: 1px solid var(--border);
}

.waterfall-chart-header h6 {
   color: var(--text);
   font-weight: 600;
   font-size: 0.9rem;
   margin: 0;
}

.waterfall-chart-controls {
   display: flex;
   gap: 0.5rem;
}

.waterfall-chart {
   flex: 1;
   padding: 1.5rem;
   min-height: 400px;
}

/* ═══════════════════════════════════════════════════════════════════════
   STAGE DETAIL PANEL (Expandable Breakdown)
   ═══════════════════════════════════════════════════════════════════ */
.stage-detail-panel {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: var(--bg-light);
   border-top: 2px solid var(--primary);
   box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
   max-height: 40%;
   overflow-y: auto;
   transform: translateY(100%);
   transition: transform 0.3s ease;
   z-index: 10;
}

.stage-detail-panel.visible {
   transform: translateY(0);
}

.stage-detail-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.875rem 1.5rem;
   background: color-mix(in oklch, var(--primary) 8%, var(--bg-light));
   border-bottom: 1px solid var(--border);
   position: sticky;
   top: 0;
   z-index: 1;
}

.stage-detail-header h6 {
   margin: 0;
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--text);
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.stage-detail-kind {
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.5rem;
   border-radius: 0.25rem;
   font-size: 0.75rem;
   font-weight: 600;
   background: color-mix(in oklch, var(--primary) 15%, var(--bg-light));
   color: var(--primary);
   text-transform: uppercase;
   letter-spacing: 0.03em;
}

.stage-detail-content {
   padding: 1rem 1.5rem;
}

/* Component List in Detail Panel */
.components-list {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.component-item {
   display: flex;
   align-items: flex-start;
   gap: 0.75rem;
   padding: 0.75rem;
   background: var(--bg);
   border-radius: 0.5rem;
   border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
   transition: all 0.2s ease;
}

.component-item:hover {
   border-color: var(--border);
   box-shadow: var(--shadow-s);
}

.component-icon {
   flex-shrink: 0;
   font-size: 1.25rem;
   width: 28px;
   height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
}

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

.component-label {
   font-weight: 500;
   font-size: 0.875rem;
   color: var(--text);
   margin-bottom: 0.25rem;
}

.component-details {
   display: flex;
   align-items: baseline;
   gap: 0.75rem;
}

.component-value {
   font-weight: 600;
   font-size: 0.95rem;
   color: var(--text);
}

.component-percentage {
   font-size: 0.8rem;
   color: var(--text-muted);
   background: color-mix(in oklch, var(--primary) 10%, var(--bg-light));
   padding: 0.125rem 0.5rem;
   border-radius: 0.25rem;
   font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   APEXCHARTS TOOLTIP CUSTOMIZATION
   ═══════════════════════════════════════════════════════════════════ */
.apexcharts-menu {
   background: var(--bg-light);
}

.apexcharts-menu-item:hover {
   background: color-mix(in oklch, var(--primary) 8%, var(--bg-light)) !important;
   color: var(--text) !important;
}

.waterfall-tooltip {
   background: var(--bg-light);
   border: 1px solid var(--border);
   border-radius: 0.5rem;
   padding: 0.75rem 1rem;
   box-shadow: var(--shadow-m);
   min-width: 160px;
}

.waterfall-tooltip-title {
   font-weight: 600;
   font-size: 0.875rem;
   color: var(--text);
   margin-bottom: 0.25rem;
}

.waterfall-tooltip-value {
   font-size: 1rem;
   font-weight: 700;
   color: var(--primary);
   margin-bottom: 0.5rem;
}

.waterfall-tooltip-range {
   font-size: 0.8rem;
   color: var(--text-muted);
   margin-bottom: 0.5rem;
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}

.waterfall-tooltip-change {
   display: flex;
   align-items: center;
   gap: 0.35rem;
   font-size: 0.8rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
}

.waterfall-tooltip-change.positive {
   color: var(--bs-success);
}

.waterfall-tooltip-change.negative {
   color: var(--bs-danger);
}

.waterfall-tooltip-change.neutral {
   color: var(--text-muted);
}

.waterfall-tooltip-hint {
   font-size: 0.75rem;
   color: var(--text-muted);
   font-style: italic;
   margin-top: 0.5rem;
   padding-top: 0.5rem;
   border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════
   LEGACY STYLES (kept for backwards compatibility with leak analysis)
   ═══════════════════════════════════════════════════════════════════ */

/* Money Flow Container - responsive grid */
.money-flow-container {
   display: grid;
   gap: 2rem;
   margin-bottom: 3rem;
}

@media (min-width: 992px) {
   .money-flow-container {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
}

/* Flow Stage - horizontal layout */
.flow-stage {
   display: grid;
   grid-template-columns: auto auto 1fr;
   gap: 1rem;
   align-items: center;
   padding: 1.5rem;
   background: var(--bg-light);
   border-radius: 1rem;
   border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
   box-shadow: var(--shadow-s);
   transition: all 0.3s ease;
}

.flow-stage:hover {
   box-shadow: var(--shadow-m);
   border-color: var(--border);
}

@media (max-width: 991.98px) {
   .flow-stage {
      grid-template-columns: 1fr;
      gap: 1.5rem;
   }
}
.flow-stage[data-stage-id="dividends"],
.flow-stage[data-stage-id="property_acquisitions"],
.flow-stage[data-stage-id="property_disposals"],
.flow-stage[data-stage-id="net_debt_financing"] {
  border-left: 3px solid var(--primary);
  padding-left: 1.5rem;
}

/* Flow Box (left side) - with depth */
.flow-box {
   padding: 1.5rem 2rem;
   border-radius: 0.85rem;
   min-width: 190px;
   text-align: center;
   box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.08),
      0 1px 3px rgba(0, 0, 0, 0.12);
   transition: all 0.25s ease;
   position: relative;
   overflow: hidden;
   border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Inner depth effect for flow boxes */
.flow-box::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   box-shadow:
      inset 0 12px 14px -12px rgba(0, 0, 0, 0.16),
      inset 0 1px 2px rgba(255, 255, 255, 0.3),
      inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.flow-box:hover {
   transform: translateY(-3px);
   box-shadow: 
      0 6px 16px rgba(0, 0, 0, 0.12),
      0 3px 8px rgba(0, 0, 0, 0.15);
}

.flow-box:hover::before {
   box-shadow:
      inset 0 14px 16px -12px rgba(0, 0, 0, 0.22),
      inset 0 1px 2px rgba(255, 255, 255, 0.4),
      inset 0 -1px 3px rgba(0, 0, 0, 0.15);
}

/* Color schemes with better depth */
.flow-box-revenue,
.flow-box-interest_income,
.flow-box-total_revenue {
   background: linear-gradient(135deg, 
      color-mix(in oklch, var(--text-muted) 18%, var(--bg-light)) 0%,
      color-mix(in oklch, var(--text-muted) 12%, var(--bg-light)) 100%);
   border-color: color-mix(in oklch, var(--text-muted) 25%, transparent);
}

.flow-box-gross,
.flow-box-net_interest_income,
.flow-box-fee_income {
   background: linear-gradient(135deg,
      color-mix(in oklch, #10b981 20%, var(--bg-light)) 0%,
      color-mix(in oklch, #10b981 14%, var(--bg-light)) 100%);
   border-color: color-mix(in oklch, #10b981 35%, transparent);
}

.flow-box-operating,
.flow-box-pretax_income,
.flow-box-net_income {
   background: linear-gradient(135deg,
      color-mix(in oklch, #3b82f6 20%, var(--bg-light)) 0%,
      color-mix(in oklch, #3b82f6 14%, var(--bg-light)) 100%);
   border-color: color-mix(in oklch, #3b82f6 35%, transparent);
}

.flow-box-interest_expense {
   background: linear-gradient(135deg,
      color-mix(in oklch, #ef4444 18%, var(--bg-light)) 0%,
      color-mix(in oklch, #ef4444 12%, var(--bg-light)) 100%);
   border-color: color-mix(in oklch, #ef4444 30%, transparent);
}

.flow-label {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--text-muted);
   margin-bottom: 0.5rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.flow-value {
   font-size: 1.75rem;
   font-weight: 700;
   color: var(--text);
}

/* Flow Arrow */
.flow-arrow {
   font-size: 2rem;
   color: var(--text-muted);
   opacity: 0.5;
   display: flex;
   align-items: center;
   justify-content: center;
}

@media (max-width: 991.98px) {
   .flow-arrow {
      transform: rotate(90deg);
   }
}

/* Flow Breakdown (right side) */
.flow-breakdown {
   display: flex;
   flex-direction: column;
   gap: 0.65rem;
   flex: 1;
   min-width: 250px;
}

.breakdown-item {
   padding: 0.85rem 1.15rem;
   border-radius: 0.65rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: all 0.2s ease;
   background: var(--bg-light);
   border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
   position: relative;
   overflow: hidden;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.breakdown-item::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.25),
      inset 0 -1px 1px rgba(0, 0, 0, 0.08);
}

.breakdown-item:hover {
   transform: translateX(3px);
   border-color: var(--border);
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.breakdown-content {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
   flex: 1;
}

.breakdown-label {
   font-size: 0.75rem;
   font-weight: 600;
   color: var(--text-muted);
   text-transform: uppercase;
   letter-spacing: 0.03em;
}

.breakdown-value {
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--text);
}

.breakdown-percentage {
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--text-muted);
   padding: 0.35rem 0.65rem;
   background: color-mix(in oklch, var(--text-muted) 10%, transparent);
   border-radius: 0.4rem;
   white-space: nowrap;
}

/* Flow Legend */
.flow-legend {
   background: color-mix(in oklch, var(--primary) 6%, var(--bg-light));
   border: 1px solid color-mix(in oklch, var(--primary) 20%, transparent);
   color: var(--text-muted);
   position: relative;
   overflow: hidden;
}

.flow-legend::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.2),
      inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

.flow-legend i {
   color: var(--primary);
   opacity: 0.8;
}

/* Interpretation badge color vocabulary (light + dark friendly)
   Classes used in templates: bg-<interpretation>-subtle and text-<interpretation>
   Interpretations: excellent, good, fair, poor
*/
.badge.bg-excellent-subtle { background: color-mix(in oklch, var(--bs-success) 10%, var(--bg-light)); border: 1px solid color-mix(in oklch, var(--bs-success) 20%, transparent); }
.text-excellent { color: var(--bs-success) !important; }
.badge.bg-good-subtle { background: color-mix(in oklch, var(--bs-info) 10%, var(--bg-light)); border: 1px solid color-mix(in oklch, var(--bs-info) 20%, transparent); }
.text-good { color: var(--bs-info) !important; }
.badge.bg-fair-subtle { background: color-mix(in oklch, var(--bs-warning) 10%, var(--bg-light)); border: 1px solid color-mix(in oklch, var(--bs-warning) 20%, transparent); }
.text-fair { color: var(--bs-warning) !important; }
.badge.bg-poor-subtle { background: color-mix(in oklch, var(--bs-danger) 10%, var(--bg-light)); border: 1px solid color-mix(in oklch, var(--bs-danger) 20%, transparent); }
.text-poor { color: var(--bs-danger) !important; }


/* Tooltip improvements */
.flow-box .bi-info-circle-fill {
   transition: opacity 0.2s ease;
}

.flow-box:hover .bi-info-circle-fill {
   opacity: 1 !important;
}

/* Flow trend indicator */
.flow-trend {
   margin-top: 0.5rem;
   padding: 0.25rem 0.5rem;
   background: rgba(0, 0, 0, 0.05);
   border-radius: 0.35rem;
   display: inline-block;
}



/* ═══════════════════════════════════════════════════════════════════════
   KEY INSIGHTS SECTION - Enhanced Design
   ═══════════════════════════════════════════════════════════════════ */

/* Insights Container */
.insights-container {
   border-top: 2px solid var(--bs-border-color);
   padding-top: 2rem;
}

/* Insights Header */
.insights-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.insights-title {
   font-size: 1.25rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   color: var(--bs-body-color);
   margin-bottom: 0 !important;
}

.insights-icon-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: linear-gradient(135deg, var(--bs-info) 0%, color-mix(in oklch, var(--bs-info) 80%, var(--bs-primary)));
   color: white;
   font-size: 1.125rem;
   box-shadow: 0 2px 8px color-mix(in oklch, var(--bs-info) 30%, transparent);
}

/* Insights Grid */
.insights-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1rem;
   margin-top: 1.25rem;
}

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

/* Individual Insight Card */
.insight-card {
   position: relative;
   padding: 1.25rem;
   background: var(--bs-body-bg);
   border: 1px solid var(--bs-border-color);
   border-left: 4px solid var(--bs-info);
   border-radius: 12px;
   transition: all 0.2s ease;
   overflow: hidden;
}

.insight-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, color-mix(in oklch, var(--bs-info) 5%, transparent) 0%, transparent 100%);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s ease;
}

.insight-card:hover {
   border-left-color: var(--bs-primary);
   box-shadow: 0 4px 12px color-mix(in oklch, var(--bs-info) 20%, transparent);
}

.insight-card:hover::before {
   opacity: 1;
}

.insight-marker {
   position: absolute;
   top: 1rem;
   right: 1rem;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--bs-info);
   opacity: 0.6;
}

.insight-content {
   position: relative;
   z-index: 1;
}

.insight-text {
   font-size: 0.95rem;
   line-height: 1.6;
   color: var(--bs-body-color);
   letter-spacing: -0.2px;
}

.insight-accent {
   position: absolute;
   bottom: -2px;
   right: -2px;
   width: 24px;
   height: 24px;
   border-radius: 50% 0 12px 0;
   background: color-mix(in oklch, var(--bs-info) 8%, transparent);
   opacity: 0;
   transition: opacity 0.3s ease;
}

.insight-card:hover .insight-accent {
   opacity: 1;
}

/* Dark Mode Adjustments */
@media (prefers-color-scheme: dark) {
   .insights-container {
      border-top-color: color-mix(in oklch, var(--bs-border-color) 80%, transparent);
   }

   .insight-card {
      background: color-mix(in oklch, var(--bs-body-bg) 90%, var(--bs-secondary));
   }

   .insight-card:hover {
      background: color-mix(in oklch, var(--bs-body-bg) 95%, var(--bs-secondary));
   }
}


/* ─────────────────────────────────────────────────────────────────────────
   WHERE IT LEAKS
   ───────────────────────────────────────────────────────────────────── */

.leaks-analysis {
   padding: 2rem 0;
   margin-top: 3rem;
}

.leaks-header h3 {
   font-weight: 700;
   letter-spacing: -0.02em;
   color: var(--text);
}

.leak-icon-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   background: linear-gradient(135deg, 
      color-mix(in oklch, var(--primary) 15%, var(--bg-light)) 0%, 
      color-mix(in oklch, var(--info) 12%, var(--bg-light)) 100%);
   border-radius: 12px;
   font-size: 1.5rem;
   color: var(--primary);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Overall Health Status Card */
.leak-health-status {
   margin-bottom: 1.5rem;
}

.leak-health-card {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   padding: 1.25rem 1.5rem;
   background: var(--bg-light);
   border-radius: 0.875rem;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-s);
   position: relative;
   overflow: hidden;
}

.leak-health-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   background: currentColor;
}

.leak-health-icon {
   flex-shrink: 0;
   width: 52px;
   height: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 0.75rem;
   font-size: 1.75rem;
   background: color-mix(in oklch, currentColor 12%, var(--bg-light));
   color: currentColor;
}

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

.leak-health-title {
   display: flex;
   align-items: baseline;
   gap: 0.75rem;
   margin-bottom: 0.5rem;
   flex-wrap: wrap;
}

.leak-health-label {
   font-size: 0.8125rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-muted);
}

.leak-health-value {
   font-size: 1.25rem;
   font-weight: 700;
   color: var(--text);
   letter-spacing: -0.01em;
}

.leak-health-description {
   font-size: 0.9375rem;
   line-height: 1.5;
   color: var(--text-muted);
   margin-top: 0.25rem;
}

.leak-health-warning {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.625rem 0.875rem;
   background: color-mix(in oklch, var(--bs-warning) 10%, var(--bg-light));
   border: 1px solid color-mix(in oklch, var(--bs-warning) 25%, transparent);
   border-radius: 0.5rem;
   color: color-mix(in oklch, var(--bs-warning) 90%, var(--text));
}

.leak-health-warning i {
   font-size: 0.9rem;
   flex-shrink: 0;
}

/* Health status color variants */
.leak-health-excellent,
.leak-health-healthy {
   color: var(--bs-success);
}

.leak-health-some_concerns,
.leak-health-fair {
   color: var(--bs-warning);
}

.leak-health-poor,
.leak-health-critical {
   color: var(--bs-danger);
}

/* Leak Tabs */
.leak-tabs {
   display: flex;
   gap: 0.5rem;
   background: var(--bg-light);
   padding: 0.375rem;
   border-radius: 0.75rem;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-xs);
   flex-wrap: wrap;
}

.leak-tab {
   padding: 0.5rem 1rem;
   border: none;
   background: transparent;
   color: var(--text-muted);
   font-size: 0.875rem;
   font-weight: 500;
   border-radius: 0.5rem;
   cursor: pointer;
   transition: all 0.2s ease;
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
   white-space: nowrap;
}

.leak-tab:hover {
   background: color-mix(in oklch, var(--text) 5%, transparent);
   color: var(--text);
}

.leak-tab.active {
   background: var(--primary);
   color: white;
   box-shadow: var(--shadow-s);
}

/* Leak Summary Stats - Enhanced Grid Layout */
.leak-summary-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 1rem;
}

.leak-stat-card {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1.25rem 1.5rem;
   background: var(--bg-light);
   border-radius: 0.875rem;
   border: 1px solid var(--border);
   box-shadow: var(--shadow-xs);
   transition: all 0.25s ease;
   position: relative;
   overflow: hidden;
}

.leak-stat-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: currentColor;
   opacity: 0.3;
   transition: opacity 0.25s ease;
}

.leak-stat-card:hover {
   transform: translateY(-2px);
   box-shadow: var(--shadow-m);
   border-color: currentColor;
}

.leak-stat-card:hover::before {
   opacity: 0.6;
}

.leak-stat-icon {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 0.75rem;
   font-size: 1.5rem;
   background: color-mix(in oklch, currentColor 12%, var(--bg-light));
   color: currentColor;
   transition: all 0.25s ease;
}

.leak-stat-card:hover .leak-stat-icon {
   transform: scale(1.08);
   background: color-mix(in oklch, currentColor 18%, var(--bg-light));
}

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

.leak-stat-value {
   font-size: 1.875rem;
   font-weight: 700;
   color: var(--text);
   margin-bottom: 0.25rem;
   line-height: 1.2;
   letter-spacing: -0.02em;
}

.leak-stat-value .stat-numerator {
   color: currentColor;
}

.leak-stat-value .stat-separator {
   opacity: 0.4;
   margin: 0 0.125rem;
}

.leak-stat-value .stat-denominator {
   opacity: 0.6;
   font-size: 0.85em;
}

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

/* Color variants for stat cards */
.leak-stat-primary {
   color: var(--primary);
}

.leak-stat-success {
   color: var(--bs-success);
}

.leak-stat-warning {
   color: var(--bs-warning);
}

.leak-stat-danger {
   color: var(--bs-danger);
}

/* Leak Items */
.leak-items {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.leak-item {
   background: var(--bg);
   border-radius: 12px;
   border: 1.5px solid var(--border);
   overflow: hidden;
   transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
}

.leak-item::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 4px;
   background: var(--border);
   transition: all 0.25s ease;
}

.leak-item:hover {
   border-color: color-mix(in oklch, var(--primary) 40%, var(--border));
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   transform: translateY(-2px);
}

.leak-item:hover::before {
   background: var(--primary);
}

.leak-item[aria-expanded="true"]::before {
   background: var(--primary);
}

.leak-item-header {
   display: flex;
   align-items: center;
   gap: 1.25rem;
   padding: 1.25rem 1.5rem;
   cursor: pointer;
   position: relative;
   user-select: none;
   transition: background-color 0.2s ease;
}

.leak-item-header:hover {
   background: color-mix(in oklch, var(--primary) 3%, var(--bg));
}

.leak-item-header:focus {
   outline: 2px solid var(--primary);
   outline-offset: -2px;
}

/* Severity Indicator (icon + label) */
.leak-severity-indicator {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.375rem;
   flex-shrink: 0;
}

.leak-severity-label {
   font-size: 0.6875rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: currentColor;
}

.leak-icon {
   width: 52px;
   height: 52px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.5rem;
   flex-shrink: 0;
   transition: transform 0.2s ease;
   border: 2px solid transparent;
}

.leak-item-header:hover .leak-icon {
   transform: scale(1.05);
}

.leak-icon-critical,
.leak-icon-high {
   background: color-mix(in oklch, #ef4444 12%, var(--bg));
   color: #dc2626;
   border-color: color-mix(in oklch, #ef4444 20%, transparent);
}

.leak-severity-critical .leak-icon,
.leak-severity-high .leak-icon {
   box-shadow: 0 0 0 4px color-mix(in oklch, #ef4444 8%, transparent);
}

.leak-icon-medium,
.leak-icon-moderate {
   background: color-mix(in oklch, #f59e0b 12%, var(--bg));
   color: #d97706;
   border-color: color-mix(in oklch, #f59e0b 20%, transparent);
}

.leak-severity-medium .leak-icon,
.leak-severity-moderate .leak-icon {
   box-shadow: 0 0 0 4px color-mix(in oklch, #f59e0b 8%, transparent);
}

.leak-icon-low,
.leak-icon-minor {
   background: color-mix(in oklch, #3b82f6 12%, var(--bg));
   color: #2563eb;
   border-color: color-mix(in oklch, #3b82f6 20%, transparent);
}

.leak-severity-low .leak-icon,
.leak-severity-minor .leak-icon {
   box-shadow: 0 0 0 4px color-mix(in oklch, #3b82f6 8%, transparent);
}

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

.leak-item-title-row {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 0.5rem;
}

.leak-item-name {
   font-size: 1.0625rem;
   font-weight: 700;
   color: var(--text);
   line-height: 1.4;
   margin: 0;
}

.leak-expand-icon {
   font-size: 1.125rem;
   color: var(--text-muted);
   transition: transform 0.25s ease, color 0.2s ease;
   flex-shrink: 0;
   margin-top: 2px;
}

.leak-item-header:hover .leak-expand-icon {
   color: var(--primary);
}

.leak-item[aria-expanded="true"] .leak-expand-icon {
   transform: rotate(180deg);
   color: var(--primary);
}

.leak-item-meta {
   display: flex;
   align-items: center;
   gap: 1.25rem;
   flex-wrap: wrap;
}

.leak-item-current,
.leak-item-category {
   display: flex;
   align-items: center;
   gap: 0.375rem;
   font-size: 0.875rem;
}

.leak-meta-label {
   color: var(--text-muted);
   font-weight: 500;
}

.leak-meta-value {
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: var(--text);
}

.leak-meta-value-critical,
.leak-meta-value-high {
   color: #dc2626;
}

.leak-meta-value-medium,
.leak-meta-value-moderate {
   color: #d97706;
}

.leak-meta-value-low,
.leak-meta-value-minor {
   color: #2563eb;
}

.leak-item-category {
   color: var(--text-muted);
   font-weight: 500;
}

.leak-item-category i {
   font-size: 0.8125rem;
   opacity: 0.7;
}

.leak-trend-wrapper {
   flex-shrink: 0;
}

.leak-trend {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.625rem 1.125rem;
   border-radius: 8px;
   font-weight: 700;
   font-size: 0.8125rem;
   white-space: nowrap;
   border: 1.5px solid transparent;
   transition: all 0.2s ease;
}

.leak-trend i {
   font-size: 1rem;
}

.leak-trend-improving {
   background: color-mix(in oklch, #10b981 12%, var(--bg));
   color: #059669;
   border-color: color-mix(in oklch, #10b981 25%, transparent);
}

.leak-item-header:hover .leak-trend-improving {
   background: color-mix(in oklch, #10b981 18%, var(--bg));
   border-color: #10b981;
}

.leak-trend-worsening {
   background: color-mix(in oklch, #ef4444 12%, var(--bg));
   color: #dc2626;
   border-color: color-mix(in oklch, #ef4444 25%, transparent);
}

.leak-item-header:hover .leak-trend-worsening {
   background: color-mix(in oklch, #ef4444 18%, var(--bg));
   border-color: #ef4444;
}

.leak-trend-stable {
   background: color-mix(in oklch, var(--text-muted) 12%, var(--bg));
   color: var(--text-muted);
   border-color: color-mix(in oklch, var(--text-muted) 25%, transparent);
}

.leak-item-header:hover .leak-trend-stable {
   background: color-mix(in oklch, var(--text-muted) 18%, var(--bg));
   border-color: var(--text-muted);
}

/* Leak Item Body (expandable detail) */
.leak-item-body {
   border-top: 1.5px solid var(--border);
   animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideDown {
   from {
      opacity: 0;
      max-height: 0;
   }
   to {
      opacity: 1;
      max-height: 2000px;
   }
}

.leak-body-content {
   padding: 1.5rem;
}

/* Section titles within leak body */
.leak-section-title {
   font-size: 0.875rem;
   font-weight: 700;
   color: var(--text);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
}

.leak-section-title i {
   color: var(--primary);
   font-size: 1rem;
}

/* Leak Explanation */
.leak-explanation {
   font-size: 0.9375rem;
   line-height: 1.6;
   color: var(--text);
}

.leak-explanation p {
   margin-bottom: 0;
}

/* Leak Story Card */
.leak-story-card {
   display: flex;
   gap: 1rem;
   padding: 1.25rem;
   background: color-mix(in oklch, var(--primary) 4%, var(--bg));
   border-left: 3px solid var(--primary);
   border-radius: 8px;
}

.leak-story-icon {
   flex-shrink: 0;
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: color-mix(in oklch, var(--primary) 12%, var(--bg));
   color: var(--primary);
   border-radius: 8px;
   font-size: 1.125rem;
}

.leak-story-content {
   flex: 1;
}

.leak-story-label {
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-muted);
   margin-bottom: 0.5rem;
}

.leak-story-text {
   font-size: 0.9375rem;
   line-height: 1.6;
   color: var(--text);
   font-style: italic;
   display: block;
}

/* Leak Thresholds Scale */
.leak-thresholds {
   /* Container styles */
}

.leak-threshold-scale {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 1rem;
}

.leak-threshold-item {
   position: relative;
   padding: 1rem;
   border-radius: 8px;
   border: 1.5px solid var(--border);
   background: var(--bg);
   transition: all 0.2s ease;
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.leak-threshold-item:hover {
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   border-color: currentColor;
}

.leak-threshold-marker {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   margin-bottom: 0.75rem;
   border: 3px solid currentColor;
   position: relative;
}

.leak-threshold-marker::after {
   content: '';
   position: absolute;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: currentColor;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.leak-threshold-label {
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   margin-bottom: 0.375rem;
   color: currentColor;
}

.leak-threshold-value {
   font-size: 1.125rem;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
   color: currentColor;
}

/* Threshold color variants */
/* Positive thresholds (better performance) */
.leak-threshold-excellent {
   color: #047857;
   background: color-mix(in oklch, #10b981 8%, var(--bg));
   border-color: color-mix(in oklch, #10b981 35%, transparent);
}

.leak-threshold-healthy,
.leak-threshold-good {
   color: #059669;
   background: color-mix(in oklch, #10b981 5%, var(--bg));
   border-color: color-mix(in oklch, #10b981 30%, transparent);
}

/* Moderate/cautionary thresholds */
.leak-threshold-fair,
.leak-threshold-low,
.leak-threshold-minor {
   color: #0284c7;
   background: color-mix(in oklch, #0ea5e9 5%, var(--bg));
   border-color: color-mix(in oklch, #0ea5e9 30%, transparent);
}

.leak-threshold-elevated,
.leak-threshold-medium,
.leak-threshold-moderate {
   color: #d97706;
   background: color-mix(in oklch, #f59e0b 5%, var(--bg));
   border-color: color-mix(in oklch, #f59e0b 30%, transparent);
}

/* Concerning thresholds */
.leak-threshold-poor,
.leak-threshold-high {
   color: #dc2626;
   background: color-mix(in oklch, #ef4444 5%, var(--bg));
   border-color: color-mix(in oklch, #ef4444 30%, transparent);
}

/* Severe thresholds */
.leak-threshold-critical {
   color: #991b1b;
   background: color-mix(in oklch, #dc2626 8%, var(--bg));
   border-color: color-mix(in oklch, #dc2626 40%, transparent);
}

/* Leak Drivers/Key Metrics */
.leak-drivers-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 0.875rem;
}

.leak-driver-card {
   padding: 1rem 1.125rem;
   background: color-mix(in oklch, var(--text-muted) 3%, var(--bg));
   border: 1.5px solid var(--border);
   border-radius: 8px;
   transition: all 0.2s ease;
}

.leak-driver-card:hover {
   background: color-mix(in oklch, var(--primary) 4%, var(--bg));
   border-color: var(--primary);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.leak-driver-label {
   font-size: 0.8125rem;
   font-weight: 600;
   color: var(--text-muted);
   margin-bottom: 0.5rem;
   line-height: 1.3;
}

.leak-driver-value {
   font-size: 1.125rem;
   font-weight: 700;
   color: var(--text);
   font-variant-numeric: tabular-nums;
   line-height: 1.2;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
   .leaks-header h3 {
      font-size: 1.5rem;
   }

   .leak-icon-badge {
      width: 40px;
      height: 40px;
      font-size: 1.25rem;
   }

   .leak-health-card {
      flex-direction: column;
      padding: 1rem;
   }

   .leak-health-icon {
      width: 44px;
      height: 44px;
      font-size: 1.5rem;
   }

   .leak-health-value {
      font-size: 1.125rem;
   }

   .leak-health-description {
      font-size: 0.875rem;
   }

   .leak-tabs {
      width: 100%;
      justify-content: center;
   }

   .leak-tab {
      font-size: 0.8125rem;
      padding: 0.4rem 0.75rem;
   }

   .leak-summary-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
   }

   .leak-stat-card {
      padding: 1rem;
      gap: 0.75rem;
   }

   .leak-stat-icon {
      width: 40px;
      height: 40px;
      font-size: 1.25rem;
   }

   .leak-stat-value {
      font-size: 1.5rem;
   }

   .leak-stat-label {
      font-size: 0.75rem;
   }

   .leak-item-header {
      flex-wrap: wrap;
      padding: 1rem 1.125rem;
      gap: 1rem;
   }
   
   .leak-severity-indicator {
      flex-direction: row;
      gap: 0.625rem;
   }
   
   .leak-icon {
      width: 44px;
      height: 44px;
      font-size: 1.25rem;
   }
   
   .leak-severity-label {
      font-size: 0.625rem;
      align-self: center;
   }
   
   .leak-item-content {
      width: 100%;
      order: 3;
   }
   
   .leak-item-name {
      font-size: 0.9375rem;
   }
   
   .leak-item-meta {
      gap: 0.875rem;
   }
   
   .leak-trend-wrapper {
      width: auto;
   }

   .leak-trend {
      padding: 0.5rem 0.875rem;
      font-size: 0.75rem;
   }
   
   .leak-body-content {
      padding: 1.25rem;
   }
   
   .leak-threshold-scale {
      grid-template-columns: repeat(2, 1fr);
      gap: 0.75rem;
   }
   
   .leak-threshold-item {
      padding: 0.875rem;
   }
   
   .leak-threshold-marker {
      width: 28px;
      height: 28px;
   }
   
   .leak-threshold-value {
      font-size: 1rem;
   }
   
   .leak-drivers-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   }
   
   .leak-driver-card {
      padding: 0.875rem 1rem;
   }
   
   .leak-driver-label {
      font-size: 0.75rem;
   }
   
   .leak-driver-value {
      font-size: 1rem;
   }

   .flow-box {
      min-width: auto;
      width: 100%;
   }

   .breakdown-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
   }

   .breakdown-percent {
      align-self: flex-start;
   }
}

@media (max-width: 575.98px) {
   .leak-summary-grid {
      grid-template-columns: 1fr;
   }

   .leak-stat-card {
      flex-direction: row;
   }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
   .flow-box-revenue {
      background: color-mix(in oklch, var(--text-muted) 20%, var(--bg));
   }

   .flow-box-gross {
      background: color-mix(in oklch, #10b981 20%, var(--bg));
   }

   .flow-box-operating {
      background: color-mix(in oklch, #3b82f6 20%, var(--bg));
   }
}

/* Locked placeholders */
.card.engine-room-locked,
.leak-item.engine-room-locked {
   border: 1px dashed color-mix(in oklch, var(--primary) 30%, transparent);
   background: color-mix(in oklch, var(--primary) 4%, var(--bg));
   cursor: pointer;
}

.card.engine-room-locked:hover,
.leak-item.engine-room-locked:hover {
   border-color: color-mix(in oklch, var(--primary) 45%, transparent);
   box-shadow: var(--shadow-s);
}

.placeholder-glow > .placeholder {
   cursor: pointer;
}

/* Paywall modal CTA */
.engine-room-paywall-modal .modal-content {
   border: 1px solid color-mix(in oklch, var(--primary) 25%, transparent);
   background:
      linear-gradient(135deg,
         color-mix(in oklch, var(--primary) 6%, var(--bg-light)) 0%,
         color-mix(in oklch, var(--secondary) 5%, var(--bg-light)) 100%);
   box-shadow: var(--shadow-m);
   border-radius: 1rem;
}

.engine-room-paywall-modal .modal-header {
   border-bottom: 1px solid color-mix(in oklch, var(--border) 45%, transparent);
   background: color-mix(in oklch, var(--primary) 6%, var(--bg-light));
}

.engine-room-paywall-modal .modal-title {
   font-weight: 700;
}

.engine-room-paywall-list {
   list-style: none;
   padding-left: 0;
}

.engine-room-paywall-list li {
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding: 0.35rem 0;
   color: var(--text);
   font-weight: 600;
}

.engine-room-paywall-list li::before {
   content: "";
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 999px;
   background: var(--primary);
   box-shadow: 0 0 0 4px color-mix(in oklch, var(--primary) 12%, transparent);
}

.engine-room-paywall-cta {
   padding: 0.6rem 1.4rem;
   font-weight: 700;
   border-radius: 999px;
   box-shadow: 0 8px 16px rgba(37, 99, 235, 0.18);
}

.engine-room-paywall-cta:hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
}

[data-bs-theme="dark"] .engine-room-paywall-modal .modal-content {
   border-color: color-mix(in oklch, var(--primary) 35%, transparent);
   background:
      linear-gradient(135deg,
         color-mix(in oklch, var(--primary) 14%, var(--bg-light)) 0%,
         color-mix(in oklch, var(--secondary) 10%, var(--bg-light)) 100%);
   box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .engine-room-paywall-modal .modal-header {
   border-bottom-color: color-mix(in oklch, var(--border) 55%, transparent);
   background: color-mix(in oklch, var(--primary) 10%, var(--bg-light));
}

[data-bs-theme="dark"] .engine-room-paywall-cta {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
   html:not([data-bs-theme]) .engine-room-paywall-modal .modal-content {
      border-color: color-mix(in oklch, var(--primary) 35%, transparent);
      background:
         linear-gradient(135deg,
            color-mix(in oklch, var(--primary) 14%, var(--bg-light)) 0%,
            color-mix(in oklch, var(--secondary) 10%, var(--bg-light)) 100%);
      box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
   }

   html:not([data-bs-theme]) .engine-room-paywall-modal .modal-header {
      border-bottom-color: color-mix(in oklch, var(--border) 55%, transparent);
      background: color-mix(in oklch, var(--primary) 10%, var(--bg-light));
   }

   html:not([data-bs-theme]) .engine-room-paywall-cta {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
   }
}