@use "../styles/connection-banner" as *;

@keyframes ch-fadeInUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ch-shimmer {
	0%   { background-position: -600px 0; }
	100% { background-position: 600px 0; }
}

@keyframes ch-dash-spin {
	to { transform: rotate(360deg); }
}

.crawl-hunt-dashboard {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;

	// ── Shopify-app-parity design tokens (mirrors app/styles/dashboard.css) ──
	--dp-card-bg: #ffffff;
	--dp-border: #e3e4e6;
	--dp-text: #1a1c1d;
	--dp-text-subdued: #6b7177;
	--dp-subtle-bg: #f6f6f7;
	--dp-btn-bg: #111214;
	--dp-btn-text: #ffffff;
	--dp-btn-secondary-bg: #ffffff;
	--dp-btn-secondary-border: #c9cccf;
	--dp-success: #059669;
	--dp-critical: #dc2626;
	--dp-warning: #d97706;

	--ch-color-primary:    #2563eb;
	--ch-color-success:    #22c55e;
	--ch-color-warning:    #f59e0b;
	--ch-color-error:      #ef4444;
	--ch-color-info:       #06b6d4;
	--ch-surface-shadow:   0 8px 24px rgba(15, 23, 42, 0.08);
	--ch-surface-shadow-hover: 0 12px 30px rgba(15, 23, 42, 0.12);

	.components-card {
		border: 1px solid #e6e8eb;
		box-shadow: var(--ch-surface-shadow);
		transition: box-shadow 0.2s ease, transform 0.2s ease;
		animation: ch-fadeInUp 0.35s ease both;
	}

	.components-card:hover {
		box-shadow: var(--ch-surface-shadow-hover);
		transform: translateY(-1px);
	}

	h1 {
		margin: 0 0 10px 0;
	}

	h2 {
		margin: 0 0 20px 0;
		font-size: 18px;
		padding-bottom: 10px;
		border-bottom: 2px solid #f1f5f9;
	}

	&.loading {
		.loading-container {
			text-align: center;
			padding: 60px 20px;

			p {
				margin-top: 20px;
				color: #666;
			}
		}
	}

	// ── Skeleton loading ──────────────────────────────────────────────────────
	.skeleton-wrapper {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.skeleton-stats-row {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;

		@media (max-width: 1024px) { grid-template-columns: repeat(2, 1fr); }
		@media (max-width: 600px)  { grid-template-columns: 1fr; }
	}

	.skeleton-grid-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;

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

	.skeleton-card {
		background: #fff;
		border: 1px solid #e6e8eb;
		border-radius: 8px;
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		min-height: 120px;
	}

	.skeleton-line {
		border-radius: 4px;
		background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
		background-size: 600px 100%;
		animation: ch-shimmer 1.4s ease-in-out infinite;

		&.short  { height: 12px; width: 40%; }
		&.tall   { height: 36px; width: 55%; }
		&.medium { height: 12px; width: 65%; }
		&.full   { height: 12px; width: 100%; }
		&.block  { height: 80px; width: 100%; }
	}

	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		margin-bottom: 20px;

		.page-header-actions {
			display: flex;
			gap: 10px;
		}

		@media (max-width: 768px) {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	// ── "No audit data" card (kept from the pre-redesign empty state) ───────
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 32px 16px;
		color: #6b7280;
		font-size: 14px;
		text-align: center;

		.empty-state-icon {
			width: 40px;
			height: 40px;
			opacity: 0.5;
		}

		p {
			margin: 0;
		}
	}

	// ═══════════════════════════════════════════════════════════════════════
	// Shopify-app-parity dashboard sections (mirrors app/styles/dashboard.css)
	// ═══════════════════════════════════════════════════════════════════════

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 10px 16px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		border: 1px solid transparent;
		transition: opacity 0.15s ease;
		white-space: nowrap;
		font-family: inherit;

		&:disabled { cursor: not-allowed; opacity: 0.6; }
		&:not(:disabled):hover { opacity: 0.85; }

		svg { width: 16px; height: 16px; }
	}
	.btn--primary { background: var(--dp-btn-bg); color: var(--dp-btn-text); }
	.btn--secondary {
		background: var(--dp-btn-secondary-bg);
		color: var(--dp-text);
		border-color: var(--dp-btn-secondary-border);
	}
	.btn--sm { padding: 6px 12px; font-size: 12px; svg { width: 13px; height: 13px; } }
	.btn--critical { background: var(--dp-critical); color: #ffffff; }
	.btn--blue { background: #2563eb; color: #ffffff; svg { width: 14px; height: 14px; } }
	.btn--outline-purple {
		background: none;
		border-color: #ddd6fe;
		color: #7c3aed;
		svg { width: 14px; height: 14px; }
	}

	.dash-card {
		background: var(--dp-card-bg);
		border: 1px solid var(--dp-border);
		border-radius: 12px;
	}

	// ── Greeting ──────────────────────────────────────────────────────────────
	.dash-greeting {
		display: flex;
		flex-direction: column;
		gap: 4px;
		margin-bottom: 20px;
	}
	.dash-greeting__title {
		font-size: 24px;
		font-weight: 700;
		margin: 0;
		border-bottom: none;
		padding-bottom: 0;
	}
	.dash-greeting__subtitle {
		font-size: 14px;
		color: var(--dp-text-subdued);
		margin: 0;
	}

	// ── Toolbar ───────────────────────────────────────────────────────────────
	.dash-toolbar {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 16px;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	.dash-toolbar__meta {
		font-size: 13px;
		color: var(--dp-text-subdued);
	}
	.dash-date-pill {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: var(--dp-card-bg);
		border: 1px solid var(--dp-border);
		border-radius: 8px;
		padding: 8px 12px;
		font-family: inherit;
		font-size: 13px;
		font-weight: 600;
		color: var(--dp-text);
		cursor: pointer;

		&:hover { border-color: var(--dp-text-subdued); }

		svg {
			width: 15px;
			height: 15px;
			flex-shrink: 0;
			color: var(--dp-text-subdued);
		}
	}
	.dash-toolbar__actions {
		display: flex;
		gap: 10px;
	}
	.dash-run-switcher-wrap {
		position: relative;
	}
	.dash-run-switcher {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		z-index: 20;
		width: 280px;
		max-height: 320px;
		overflow-y: auto;
		background: var(--dp-card-bg);
		border: 1px solid var(--dp-border);
		border-radius: 10px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
		padding: 6px;
	}
	.dash-run-switcher__item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		background: none;
		border: none;
		border-radius: 8px;
		padding: 8px 10px;
		font-family: inherit;
		text-align: left;
		cursor: pointer;

		&:hover { background: var(--dp-subtle-bg); }
		&--active { background: var(--dp-subtle-bg); }

		svg {
			width: 16px;
			height: 16px;
			color: var(--dp-success);
			flex-shrink: 0;
		}
	}
	.dash-run-switcher__info {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.dash-run-switcher__date {
		font-size: 13px;
		font-weight: 600;
		color: var(--dp-text);
	}
	.dash-run-switcher__meta {
		font-size: 11px;
		color: var(--dp-text-subdued);
	}
	.dash-run-switcher__score {
		font-size: 13px;
		font-weight: 700;
		color: var(--dp-text);
		flex-shrink: 0;
	}

	// ── Section chrome shared by chart/dash cards ────────────────────────────
	.dash-section__head-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 16px;

		.dash-section__heading { margin-bottom: 0; }
	}
	.dash-section__heading {
		font-size: 16px;
		font-weight: 700;
		margin: 0 0 16px;
		border-bottom: none;
		padding-bottom: 0;
	}
	.link-btn {
		background: none;
		border: none;
		padding: 0;
		font-size: 13px;
		font-weight: 600;
		color: #2563eb;
		cursor: pointer;
		font-family: inherit;

		&:hover { text-decoration: underline; }
	}

	.chart-empty-state {
		padding: 40px 16px;
		text-align: center;
		color: var(--dp-text-subdued);
		font-size: 13px;
	}

	// ── Stat / gauge icon chips ───────────────────────────────────────────────
	.stat-icon {
		flex-shrink: 0;
		width: 34px;
		height: 34px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;

		svg { width: 17px; height: 17px; }
	}
	.stat-icon--blue { background: #dbeafe; color: #2563eb; }
	.stat-icon--red { background: #fee2e2; color: #dc2626; }
	.stat-icon--orange { background: #ffedd5; color: #c2410c; }
	.stat-icon--purple { background: #ede9fe; color: #7c3aed; }
	.stat-icon--green { background: #d1fae5; color: #059669; }
	.stat-icon--teal { background: #ccfbf1; color: #0d9488; }
	.stat-icon--gold { background: #fef3c7; color: #ca8a04; }

	.status-pill {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 2px 10px;
		border-radius: 999px;
		font-size: 12px;
		font-weight: 700;

		svg { width: 12px; height: 12px; }
	}
	.status-pill--success { background: #d1fae5; color: #065f46; }
	.status-pill--info { background: #dbeafe; color: #1e40af; }
	.status-pill--warning { background: #fef3c7; color: #92400e; }
	.status-pill--critical { background: #fee2e2; color: #991b1b; }

	// ── Top card row: Website SEO Health / Last Crawl / Next Scheduled Crawl ──
	.top-card-grid {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		gap: 16px;
		margin-bottom: 24px;

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

	.top-info-card {
		padding: 20px;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	.top-info-card__head {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 4px;
	}
	.top-info-card__label {
		font-size: 14px;
		font-weight: 700;
		color: var(--dp-text);
	}
	.top-info-card__value {
		font-size: 20px;
		font-weight: 700;
		margin: 0;
	}
	.top-info-card__sub {
		font-size: 12px;
		color: var(--dp-text-subdued);
		margin: 0 0 4px;
	}
	.top-info-card__status-row { padding: 8px 0; }
	.top-info-card__metric-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 8px 0 4px;
		padding-top: 12px;
		border-top: 1px solid var(--dp-border);
	}
	.top-info-card__metric-row {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.top-info-card__metric-icon {
		width: 28px;
		height: 28px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		svg { width: 14px; height: 14px; }
	}
	.top-info-card__metric-icon--blue { background: #dbeafe; color: #2563eb; }
	.top-info-card__metric-icon--green { background: #d1fae5; color: #059669; }
	.top-info-card__metric-icon--purple { background: #ede9fe; color: #7c3aed; }
	.top-info-card__metric-text {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		min-width: 0;

		span { font-size: 12px; color: var(--dp-text-subdued); }
		strong { font-size: 14px; font-weight: 700; color: var(--dp-text); }
	}
	.top-info-card__btn {
		margin-top: 12px;
		align-self: flex-start;
	}
	.top-info-card__btn--full { align-self: stretch; width: 100%; }
	.top-info-card__btn--pinned { margin-top: auto; }
	.top-info-card--next-crawl { align-items: stretch; }

	.next-crawl-illustration {
		width: 96px;
		height: 96px;
		margin: 8px auto 12px;
		border-radius: 999px;
		background: #ede9fe;
		color: #7c3aed;
		display: flex;
		align-items: center;
		justify-content: center;

		svg { width: 40px; height: 40px; }
	}

	// ── Website SEO Health card ───────────────────────────────────────────────
	.seo-health-card__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 20px;
		flex-wrap: wrap;
	}
	.seo-health-card__header-left {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.seo-health-card__icon-badge {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		background: #ede9fe;
		color: #7c3aed;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		svg { width: 18px; height: 18px; }
	}
	.seo-health-card__header-subtitle {
		font-size: 12px;
		color: var(--dp-text-subdued);
		margin: 2px 0 0;
	}
	.seo-health-card__delta-pill {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 6px 14px;
		border-radius: 10px;
		flex-shrink: 0;
	}
	.seo-health-card__delta-pill--up { background: #d1fae5; .seo-health-card__delta-pill-value { color: var(--dp-success); } }
	.seo-health-card__delta-pill--down { background: #fee2e2; .seo-health-card__delta-pill-value { color: var(--dp-critical); } }
	.seo-health-card__delta-pill-value {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 14px;
		font-weight: 700;

		svg { width: 14px; height: 14px; }
	}
	.seo-health-card__delta-pill-label {
		font-size: 11px;
		color: var(--dp-text-subdued);
	}
	.seo-health-card__body {
		display: flex;
		align-items: center;
		gap: 24px;
		flex-wrap: wrap;
	}
	.seo-health-card__gauge-wrap {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.seo-health-card__gauge-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
	}
	.seo-health-card__gauge-score {
		font-size: 32px;
		font-weight: 700;
		color: var(--dp-text);
		line-height: 1;
	}
	.seo-health-card__gauge-score-suffix {
		font-size: 14px;
		font-weight: 600;
		color: var(--dp-text-subdued);
	}
	.seo-health-card__gauge-grade-pill {
		font-size: 12px;
		font-weight: 700;
		padding: 3px 10px;
		border-radius: 999px;
		text-align: center;
	}
	.seo-health-card__issue-list {
		flex: 1;
		min-width: 180px;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.seo-health-card__issue-row {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 8px;
		border: none;
		border-radius: 8px;
		background: none;
		font-family: inherit;
		text-align: left;
		cursor: pointer;

		&:hover { background: var(--dp-subtle-bg); }

		svg:last-child {
			width: 16px;
			height: 16px;
			color: var(--dp-text-subdued);
			flex-shrink: 0;
		}
	}
	.seo-health-card__issue-icon {
		width: 32px;
		height: 32px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		svg { width: 16px; height: 16px; }
	}
	.seo-health-card__issue-icon--red { background: #fee2e2; color: #dc2626; }
	.seo-health-card__issue-icon--orange { background: #ffedd5; color: #c2410c; }
	.seo-health-card__issue-icon--blue { background: #dbeafe; color: #2563eb; }
	.seo-health-card__issue-text {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 1px;
		min-width: 0;

		strong { font-size: 18px; font-weight: 700; color: var(--dp-text); }
		span { font-size: 12px; color: var(--dp-text-subdued); }
	}
	.seo-health-card__banner {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		margin-top: 20px;
		padding: 16px;
		border-radius: 10px;
		background: #f5f3ff;
	}
	.seo-health-card__banner-icon {
		width: 28px;
		height: 28px;
		border-radius: 8px;
		background: #ede9fe;
		color: #7c3aed;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		svg { width: 15px; height: 15px; }
	}
	.seo-health-card__banner-title {
		font-size: 13px;
		font-weight: 700;
		color: var(--dp-text);
		margin: 0 0 2px;
	}
	.seo-health-card__banner-desc {
		font-size: 12px;
		color: var(--dp-text-subdued);
		margin: 0;
	}

	// ── Daily stats strip ──────────────────────────────────────────────────────
	.daily-stats-card {
		display: flex;
		padding: 20px 0;
		margin-bottom: 24px;

		@media (max-width: 900px) { flex-wrap: wrap; }
	}
	.daily-stats-card__item {
		flex: 1;
		min-width: 140px;
		padding: 0 20px;
		display: flex;
		flex-direction: column;
		gap: 4px;
		border-left: 1px solid var(--dp-border);

		&:first-child { border-left: none; }

		@media (max-width: 900px) {
			flex: 1 1 40%;
			border-left: none;
			padding: 12px 20px;
		}
	}
	.stat-card__top {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
	}
	.stat-card__label {
		font-size: 12px;
		color: var(--dp-text-subdued);
	}
	.stat-card__value {
		font-size: 26px;
		font-weight: 700;
		line-height: 1.2;
	}
	.stat-card__sub {
		font-size: 12px;
		color: var(--dp-text-subdued);
	}
	.stat-card__sub-delta {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		font-weight: 700;

		svg { width: 12px; height: 12px; }
	}
	.stat-card__sub-delta--good { color: var(--dp-success); }
	.stat-card__sub-delta--bad { color: var(--dp-critical); }

	// ── Charts row layout ──────────────────────────────────────────────────────
	.chart-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		margin-bottom: 24px;

		@media (max-width: 900px) { grid-template-columns: 1fr; }
	}
	.chart-grid--thirds {
		display: grid;
		grid-template-columns: 1.8fr 1fr 1fr;
		gap: 16px;
		margin-bottom: 24px;

		@media (max-width: 1100px) { grid-template-columns: 1fr; }
	}
	.chart-card {
		padding: 20px;
	}
	.chart-card--roomy {
		padding-top: 32px;
		padding-bottom: 32px;
	}
	.chart-card__body {
		width: 100%;
	}

	// ── Hand-rolled trend chart (AreaLineChart / StackedAreaChart) ───────────
	.trend-chart {
		display: block;
		width: 100%;
	}
	.trend-chart__grid-line {
		stroke: var(--dp-border);
		stroke-width: 1;
		stroke-dasharray: 3 3;
	}
	.trend-chart__axis-label {
		font-size: 10px;
		fill: var(--dp-text-subdued);
	}

	// ── Granularity / range toggle ────────────────────────────────────────────
	.granularity-toggle {
		display: flex;
		gap: 2px;
		background: var(--dp-subtle-bg);
		border-radius: 8px;
		padding: 3px;
	}
	.granularity-toggle__option {
		border: none;
		background: transparent;
		padding: 5px 12px;
		font-size: 12px;
		font-weight: 600;
		border-radius: 6px;
		cursor: pointer;
		color: var(--dp-text-subdued);
		font-family: inherit;

		&--active {
			background: var(--dp-card-bg);
			color: var(--dp-text);
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
		}
	}

	// ── SEO Score History stat row ────────────────────────────────────────────
	.score-history-stats {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		margin-top: 16px;

		@media (max-width: 500px) { grid-template-columns: repeat(2, 1fr); }
	}
	.score-history-stats__item {
		border: 1px solid var(--dp-border);
		border-radius: 8px;
		padding: 10px 12px;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.score-history-stats__label {
		font-size: 11px;
		color: var(--dp-text-subdued);
	}
	.score-history-stats__value {
		font-size: 15px;
		font-weight: 700;
	}

	// ── Priority Issues ────────────────────────────────────────────────────────
	.priority-issue-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.priority-issue-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 14px;
		border-radius: 8px;
		border-left: 4px solid transparent;
		background: var(--dp-subtle-bg);
	}
	.priority-issue-row--critical { border-left-color: var(--dp-critical); background: rgba(220, 38, 38, 0.08); }
	.priority-issue-row--warning { border-left-color: var(--dp-warning); background: rgba(217, 119, 6, 0.08); }
	.priority-issue-row--info { border-left-color: #3b82f6; background: rgba(59, 130, 246, 0.08); }
	.priority-issue-row__body {
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
		flex-wrap: wrap;
	}
	.priority-issue-row__name {
		font-size: 13px;
		font-weight: 600;
	}
	.priority-issue-row__count {
		font-size: 12px;
		color: var(--dp-text-subdued);
	}
	.severity-pill {
		font-size: 11px;
		font-weight: 700;
		padding: 2px 8px;
		border-radius: 999px;
		flex-shrink: 0;
	}
	.severity-pill--critical { background: #fee2e2; color: #991b1b; }
	.severity-pill--warning { background: #fef3c7; color: #92400e; }
	.severity-pill--info { background: #dbeafe; color: #1e40af; }

	// ── Issue Trend legend ─────────────────────────────────────────────────────
	.chart-legend {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.chart-legend--row {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px 20px;
		margin-top: 12px;
		font-size: 12px;
		color: var(--dp-text-subdued);
	}
	.chart-legend__row {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 12px;
	}
	.chart-legend__dot {
		width: 9px;
		height: 9px;
		border-radius: 999px;
		flex-shrink: 0;
	}

	// ── Core Web Vitals History ───────────────────────────────────────────────
	.cwv-history-card { padding: 24px; }
	.cwv-trend-rows {
		display: flex;
		flex-direction: column;
		gap: 20px;
		margin-top: 8px;
	}
	.cwv-trend-row {
		display: flex;
		align-items: center;
		gap: 20px;
		flex-wrap: wrap;
	}
	.cwv-trend-row__info {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		width: 190px;
		flex-shrink: 0;
	}
	.cwv-trend-row__dot {
		width: 10px;
		height: 10px;
		border-radius: 999px;
		margin-top: 5px;
		flex-shrink: 0;
	}
	.cwv-trend-row__label {
		display: block;
		font-size: 14px;
		font-weight: 700;
		color: var(--dp-text);
	}
	.cwv-trend-row__desc {
		display: block;
		font-size: 12px;
		color: var(--dp-text-subdued);
	}
	.cwv-trend-row__chart {
		position: relative;
		flex: 1;
		height: 48px;
		min-width: 120px;
	}
	.cwv-trend-row__chart--empty {
		border-top: 1px dashed var(--dp-border);
		margin-top: 24px;
	}
	.cwv-trend-row__line {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}
	.cwv-trend-row__point {
		position: absolute;
		transform: translate(-50%, -50%);
	}
	.cwv-trend-row__marker {
		display: block;
		width: 8px;
		height: 8px;
		border-radius: 999px;
		background: var(--dp-card-bg);
		border-width: 2px;
		border-style: solid;
	}
	.cwv-trend-row__value {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 5px;
		font-size: 11px;
		font-weight: 600;
		color: var(--dp-text-subdued);
		white-space: nowrap;
	}
	.cwv-trend-row__no-data {
		color: var(--dp-text-subdued);
		font-size: 13px;
		flex-shrink: 0;
	}
	.cwv-badge {
		font-size: 12px;
		font-weight: 700;
		padding: 4px 12px;
		border-radius: 999px;
		flex-shrink: 0;
		white-space: nowrap;
	}
	.cwv-badge--good { background: #d1fae5; color: #065f46; }
	.cwv-badge--warning { background: #fef3c7; color: #92400e; }
	.cwv-badge--critical { background: #fee2e2; color: #991b1b; }

	.cwv-pass-rate {
		display: flex;
		align-items: baseline;
		gap: 10px;
		margin-top: 24px;
		padding-top: 20px;
		border-top: 1px solid var(--dp-border);
		flex-wrap: wrap;
	}
	.cwv-pass-rate__label {
		font-size: 14px;
		font-weight: 700;
		color: var(--dp-text);
		margin-right: auto;
	}
	.cwv-pass-rate__value {
		font-size: 20px;
		font-weight: 700;
		color: var(--dp-success);
	}
	.cwv-pass-rate__delta {
		display: inline-flex;
		align-items: center;
		gap: 3px;
		font-size: 13px;
		font-weight: 700;

		svg { width: 13px; height: 13px; }
	}
	.cwv-pass-rate__delta--up { color: var(--dp-success); }
	.cwv-pass-rate__delta--down { color: var(--dp-critical); }
	.cwv-pass-rate__sub {
		font-size: 12px;
		color: var(--dp-text-subdued);
	}
	.cwv-empty-state {
		min-height: 220px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		color: var(--dp-text-subdued);
		font-size: 13px;
		text-align: center;
		padding: 24px 16px;
	}

	// ── Google Search Console Overview ────────────────────────────────────────
	.gsc-overview-card {
		display: flex;
		flex-direction: column;
	}
	.gsc-tiles {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 8px;
		margin-bottom: 16px;

		@media (max-width: 1300px) { grid-template-columns: repeat(3, 1fr); }
		@media (max-width: 500px) { grid-template-columns: repeat(2, 1fr); }
	}
	.gsc-tile {
		border: 1px solid var(--dp-border);
		border-radius: 8px;
		padding: 8px 10px;
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.gsc-tile__label {
		font-size: 10px;
		color: var(--dp-text-subdued);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.gsc-tile__value {
		font-size: 16px;
		font-weight: 700;
		color: var(--dp-text);
	}
	.gsc-tile__delta {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		font-size: 11px;
		font-weight: 600;

		svg { width: 10px; height: 10px; }
	}
	.gsc-tile__delta--up { color: var(--dp-success); }
	.gsc-tile__delta--down { color: var(--dp-critical); }
	.gsc-overview-card__chart {
		width: 100%;
		margin-bottom: 16px;
		margin-top: 8px;
	}

	// ── Changes Since Last Crawl ──────────────────────────────────────────────
	.changes-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.changes-list__row {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	.changes-list__icon {
		width: 28px;
		height: 28px;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;

		svg { width: 15px; height: 15px; }
	}
	.changes-list__icon--blue { background: #dbeafe; color: #2563eb; }
	.changes-list__icon--orange { background: #ffedd5; color: #c2410c; }
	.changes-list__icon--red { background: #fee2e2; color: #dc2626; }
	.changes-list__icon--green { background: #d1fae5; color: #059669; }
	.changes-list__label {
		flex: 1;
		font-size: 13px;
		color: var(--dp-text-subdued);
	}
	.changes-list__value {
		font-size: 14px;
		font-weight: 700;
	}

	// ── Crawl History list ─────────────────────────────────────────────────────
	.crawl-history-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.crawl-history-row {
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		padding: 10px 6px;
		border: none;
		border-bottom: 1px solid var(--dp-border);
		border-radius: 8px;
		background: none;
		font-family: inherit;
		text-align: left;
		cursor: pointer;
		transition: background 0.15s ease;

		&:hover { background: var(--dp-subtle-bg); }
		&:last-child { border-bottom: none; }
	}
	.crawl-history-row__date-block {
		display: flex;
		flex-direction: column;
		min-width: 108px;
	}
	.crawl-history-row__date {
		font-size: 13px;
		font-weight: 700;
		color: var(--dp-text);
	}
	.crawl-history-row__time {
		font-size: 11px;
		color: var(--dp-text-subdued);
		margin-top: 2px;
	}
	.crawl-history-row__score {
		width: 40px;
		height: 40px;
		border-radius: 999px;
		border: 2.5px solid;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 13px;
		font-weight: 700;
		flex-shrink: 0;
	}
	.crawl-history-row__meta {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		min-width: 0;
		margin-left: auto;
	}
	.crawl-history-row__pages {
		font-size: 13px;
		font-weight: 600;
		color: var(--dp-text);
	}
	.crawl-history-row__status {
		font-size: 11px;
		color: var(--dp-text-subdued);
		margin-top: 2px;
	}
	.crawl-history-row__chevron {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--dp-text-subdued);
		flex-shrink: 0;

		svg { width: 16px; height: 16px; }
	}

	// ── AI Recommendations ─────────────────────────────────────────────────────
	.ai-rec-card {
		display: flex;
		flex-direction: column;
	}
	.ai-rec-card__body {
		display: flex;
		gap: 24px;
		flex: 1;
		margin-top: 20px;
		flex-wrap: wrap;
	}
	.ai-rec-card__intro {
		width: 190px;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 8px;
	}
	.ai-rec-card__mascot {
		position: relative;
		width: 88px;
		height: 88px;

		svg { width: 100%; height: 100%; }
	}
	.ai-rec-card__mascot-badge {
		position: absolute;
		top: -2px;
		right: -2px;
		display: flex;
		color: #3b82f6;
		background: var(--dp-card-bg);
		border-radius: 999px;

		svg { width: 22px; height: 22px; }
	}
	.ai-rec-card__message {
		font-size: 13px;
		font-weight: 600;
		color: var(--dp-text);
		margin: 0;
	}
	.ai-rec-card__submessage {
		font-size: 12px;
		color: var(--dp-text-subdued);
		margin: 0;
	}
	.ai-rec-card__list {
		flex: 1;
		min-width: 220px;
		display: flex;
		flex-direction: column;
	}
	.ai-rec-card__view-more {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin-top: 12px;
		padding: 10px;
		border: none;
		background: var(--dp-subtle-bg);
		border-radius: 8px;
		color: #2563eb;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		font-family: inherit;

		svg { width: 14px; height: 14px; }
	}
	.ai-recommendation-list {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}
	.ai-recommendation-row {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 12px;
		border: 1px solid var(--dp-border);
		border-radius: 8px;
	}
	.ai-recommendation-row__icon { flex-shrink: 0; }
	.ai-recommendation-row__name {
		flex: 1;
		font-size: 13px;
		font-weight: 600;
		min-width: 0;
	}
	.ai-recommendation-row__count {
		font-size: 12px;
		color: var(--dp-text-subdued);
		white-space: nowrap;
		flex-shrink: 0;
	}

	// ── Weekly Summary ─────────────────────────────────────────────────────────
	.weekly-summary__date-range {
		font-size: 12px;
		color: var(--dp-text-subdued);
		white-space: nowrap;
	}
	.weekly-summary__tiles {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 10px;
		margin-bottom: 20px;

		@media (max-width: 700px) { grid-template-columns: repeat(2, 1fr); }
	}
	.weekly-summary__tile {
		border: 1px solid var(--dp-border);
		border-radius: 8px;
		padding: 12px;
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	.weekly-summary__tile--green { background: #f0fdf4; border-color: #bbf7d0; }
	.weekly-summary__tile--red { background: #fef2f2; border-color: #fecaca; }
	.weekly-summary__tile-label {
		font-size: 11px;
		color: var(--dp-text-subdued);
	}
	.weekly-summary__tile-value {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 20px;
		font-weight: 700;
		color: var(--dp-text);

		svg { width: 16px; height: 16px; color: var(--dp-success); }
	}
	.weekly-summary__tile-sub {
		font-size: 11px;
		color: var(--dp-text-subdued);
	}
	.weekly-summary__chart {
		width: 100%;
	}
}