/* ==========================================================================
   Bottleneck Calculator — Frontend Styles
   Premium SaaS-style calculator: glassmorphism cards, gradient accents,
   animated meters, full dark/light mode, fully responsive.
   ========================================================================== */

.bc-root {
	--bc-primary: #6366f1;
	--bc-primary-dark: #4f46e5;
	--bc-success: #22c55e;
	--bc-warning: #f59e0b;
	--bc-danger: #ef4444;
	--bc-bg: #f6f7fb;
	--bc-surface: rgba(255, 255, 255, 0.72);
	--bc-surface-solid: #ffffff;
	--bc-border: rgba(15, 23, 42, 0.08);
	--bc-text: #0f172a;
	--bc-text-muted: #64748b;
	--bc-radius: 18px;
	--bc-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--bc-text);
	max-width: 980px;
	margin: 0 auto;
	box-sizing: border-box;
}

.bc-root * {
	box-sizing: border-box;
}

.bc-root[data-theme="dark"],
.bc-root.bc-theme-dark {
	--bc-bg: #0b1020;
	--bc-surface: rgba(30, 35, 55, 0.65);
	--bc-surface-solid: #171c30;
	--bc-border: rgba(255, 255, 255, 0.08);
	--bc-text: #e5e7eb;
	--bc-text-muted: #94a3b8;
	--bc-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
	.bc-root[data-theme-auto="1"] {
		--bc-bg: #0b1020;
		--bc-surface: rgba(30, 35, 55, 0.65);
		--bc-surface-solid: #171c30;
		--bc-border: rgba(255, 255, 255, 0.08);
		--bc-text: #e5e7eb;
		--bc-text-muted: #94a3b8;
		--bc-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
	}
}

/* Skeleton loading state */
.bc-loading-placeholder {
	padding: 32px;
	background: var(--bc-surface-solid);
	border-radius: var(--bc-radius);
	border: 1px solid var(--bc-border);
}
.bc-skeleton-header,
.bc-skeleton-row {
	background: linear-gradient(90deg, rgba(148,163,184,.15) 25%, rgba(148,163,184,.3) 37%, rgba(148,163,184,.15) 63%);
	background-size: 400% 100%;
	animation: bc-shimmer 1.4s ease infinite;
	border-radius: 10px;
}
.bc-skeleton-header { height: 32px; width: 40%; margin-bottom: 24px; }
.bc-skeleton-row { height: 52px; margin-bottom: 14px; }
@keyframes bc-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* Card shell */
.bc-card {
	background: var(--bc-surface);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid var(--bc-border);
	border-radius: var(--bc-radius);
	box-shadow: var(--bc-shadow);
	padding: 28px;
	margin-bottom: 20px;
}

.bc-app-header {
	text-align: center;
	margin-bottom: 24px;
}
.bc-app-header h2 {
	font-size: 28px;
	font-weight: 800;
	margin: 0 0 6px;
	background: linear-gradient(135deg, var(--bc-primary), #a855f7);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.bc-app-header p {
	color: var(--bc-text-muted);
	margin: 0;
	font-size: 15px;
}

/* Form grid */
.bc-form-section h3 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bc-text-muted);
	margin: 0 0 14px;
	font-weight: 700;
}

.bc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.bc-input-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bc-input-group label {
	font-size: 13px;
	font-weight: 600;
	color: var(--bc-text);
}
.bc-input-group select,
.bc-input-group input {
	appearance: none;
	background: var(--bc-surface-solid);
	border: 1.5px solid var(--bc-border);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	color: var(--bc-text);
	transition: border-color .15s ease, box-shadow .15s ease;
	width: 100%;
}
.bc-field-hint {
	font-size: 12px;
	line-height: 1.5;
	color: var(--bc-text-muted);
	margin: 6px 0 0;
	font-weight: 400;
}
.bc-input-group select:focus,
.bc-input-group input:focus {
	outline: none;
	border-color: var(--bc-primary);
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}

.bc-toggle-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}
.bc-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bc-surface-solid);
	border: 1.5px solid var(--bc-border);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	transition: all .15s ease;
}
.bc-toggle input {
	accent-color: var(--bc-primary);
}
.bc-toggle.bc-active {
	border-color: var(--bc-primary);
	background: rgba(99, 102, 241, .1);
	color: var(--bc-primary-dark);
}

.bc-submit-row {
	display: flex;
	justify-content: center;
}
.bc-btn-primary {
	background: linear-gradient(135deg, var(--bc-primary), #8b5cf6);
	color: #fff;
	border: none;
	border-radius: 14px;
	padding: 14px 40px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(99, 102, 241, .35);
	transition: transform .15s ease, box-shadow .15s ease;
}
.bc-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px rgba(99, 102, 241, .45);
}
.bc-btn-primary:disabled {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

.bc-btn-secondary {
	background: transparent;
	border: 1.5px solid var(--bc-border);
	color: var(--bc-text);
	border-radius: 12px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.bc-error-banner {
	background: rgba(239, 68, 68, .1);
	border: 1px solid rgba(239, 68, 68, .3);
	color: #b91c1c;
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
}

/* ---------------------------- Results ---------------------------- */

.bc-results {
	display: none;
}
.bc-results.bc-visible {
	display: block;
	animation: bc-fade-in .4s ease;
}
@keyframes bc-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.bc-result-hero {
	text-align: center;
	padding: 36px 28px;
}
.bc-gauge-wrap {
	position: relative;
	width: 220px;
	height: 220px;
	margin: 0 auto 18px;
}
.bc-gauge-wrap svg {
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.bc-gauge-track {
	fill: none;
	stroke: var(--bc-border);
	stroke-width: 14;
}
.bc-gauge-fill {
	fill: none;
	stroke-width: 14;
	stroke-linecap: round;
	transition: stroke-dashoffset 1s cubic-bezier(.22, 1, .36, 1), stroke .3s ease;
}
.bc-gauge-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.bc-gauge-value {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
}
.bc-gauge-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bc-text-muted);
	margin-top: 6px;
	font-weight: 700;
}

.bc-balance-rating {
	font-size: 20px;
	font-weight: 700;
	margin: 4px 0 2px;
}
.bc-limiting-note {
	color: var(--bc-text-muted);
	font-size: 14px;
	max-width: 560px;
	margin: 8px auto 0;
	line-height: 1.5;
}

.bc-grade-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	font-weight: 800;
	font-size: 18px;
	color: #fff;
	background: linear-gradient(135deg, var(--bc-primary), #8b5cf6);
	margin-top: 12px;
}

/* Comparison bars */
.bc-compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.bc-compare-card {
	background: var(--bc-surface-solid);
	border: 1px solid var(--bc-border);
	border-radius: 14px;
	padding: 18px 20px;
}
.bc-compare-card h4 {
	margin: 0 0 4px;
	font-size: 14px;
}
.bc-compare-card .bc-compare-name {
	font-size: 13px;
	color: var(--bc-text-muted);
	margin-bottom: 10px;
}
.bc-bar-track {
	background: var(--bc-border);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
	margin-bottom: 6px;
}
.bc-bar-fill {
	height: 100%;
	border-radius: 999px;
	transition: width 1s cubic-bezier(.22, 1, .36, 1);
}
.bc-bar-fill.bc-fill-cpu { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.bc-bar-fill.bc-fill-gpu { background: linear-gradient(90deg, #22c55e, #16a34a); }
.bc-bar-pct { font-size: 13px; font-weight: 700; color: var(--bc-text-muted); }

/* Metric cards row */
.bc-metric-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-top: 20px;
}
.bc-metric-card {
	background: var(--bc-surface-solid);
	border: 1px solid var(--bc-border);
	border-radius: 14px;
	padding: 16px 18px;
	text-align: center;
}
.bc-metric-card .bc-metric-value {
	font-size: 22px;
	font-weight: 800;
}
.bc-metric-card .bc-metric-label {
	font-size: 12px;
	color: var(--bc-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-top: 4px;
}

/* Summary + upgrade advice */
.bc-summary-text {
	line-height: 1.6;
	font-size: 15px;
}

.bc-upgrade-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
}
.bc-upgrade-card {
	border: 1px solid var(--bc-border);
	border-radius: 14px;
	padding: 16px 18px;
	background: var(--bc-surface-solid);
}
.bc-upgrade-card .bc-upgrade-kind {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bc-primary);
	font-weight: 800;
	margin-bottom: 6px;
}
.bc-upgrade-card .bc-upgrade-name {
	font-size: 15px;
	font-weight: 700;
}

.bc-section-title {
	font-size: 16px;
	font-weight: 800;
	margin: 0 0 14px;
}

/* Accessibility helpers */
.bc-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   Searchable Combobox (CPU / GPU picker)
   ========================================================================== */
.bc-combobox {
	position: relative;
}
.bc-combobox-input {
	cursor: text;
}
.bc-combobox-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--bc-text-muted);
	font-size: 11px;
}
.bc-combobox-list {
	position: absolute;
	z-index: 40;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	background: var(--bc-surface-solid);
	border: 1.5px solid var(--bc-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0,0,0,.25);
	display: none;
	padding: 6px;
}
.bc-combobox-list.bc-open {
	display: block;
}
.bc-combobox-option {
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: 8px;
	align-items: center;
}
.bc-combobox-option:hover,
.bc-combobox-option.bc-highlighted {
	background: rgba(99, 102, 241, .14);
}
.bc-combobox-option .bc-opt-mfr {
	font-size: 11px;
	color: var(--bc-text-muted);
	flex-shrink: 0;
}
.bc-combobox-empty {
	padding: 14px 12px;
	font-size: 13px;
	color: var(--bc-text-muted);
	text-align: center;
}

/* Advanced options collapsible */
.bc-advanced-toggle-row {
	display: flex;
	justify-content: center;
	margin: 4px 0 22px;
}
.bc-advanced-toggle {
	background: rgba(99, 102, 241, .12);
	border: 1.5px solid var(--bc-border);
	color: var(--bc-primary-dark);
	font-weight: 700;
	font-size: 13px;
	border-radius: 10px;
	padding: 10px 22px;
	cursor: pointer;
}
.bc-advanced-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}
.bc-advanced-panel.bc-open {
	max-height: 900px;
}

/* ==========================================================================
   Loading Modal
   ========================================================================== */
.bc-loading-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5, 8, 20, .72);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}
.bc-loading-card {
	background: var(--bc-surface-solid);
	border: 1px solid var(--bc-border);
	border-radius: 20px;
	padding: 36px 40px;
	width: min(380px, 90vw);
	text-align: center;
	box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.bc-loading-ring-wrap {
	width: 100px;
	height: 100px;
	margin: 0 auto 22px;
}
.bc-loading-ring-wrap svg {
	width: 100%;
	height: 100%;
	animation: bc-spin 1.1s linear infinite;
}
@keyframes bc-spin {
	to { transform: rotate(360deg); }
}
.bc-loading-progress-track {
	height: 8px;
	border-radius: 999px;
	background: var(--bc-border);
	overflow: hidden;
	margin-bottom: 16px;
}
.bc-loading-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #22c55e, #eab308, #6366f1);
	width: 8%;
	transition: width .35s ease;
}
.bc-loading-text {
	font-size: 14px;
	font-weight: 700;
	color: var(--bc-text);
}

/* ==========================================================================
   Results Dashboard v2 (matches reference layout)
   ========================================================================== */
.bc-dash-actions {
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.bc-dash-btn {
	flex: 1;
	min-width: 160px;
	border: none;
	border-radius: 12px;
	padding: 13px 18px;
	font-weight: 800;
	font-size: 13.5px;
	letter-spacing: .02em;
	cursor: pointer;
	color: #fff;
	text-transform: uppercase;
}
.bc-dash-btn-download { background: linear-gradient(135deg, #16a34a, #22c55e); }
.bc-dash-btn-again { background: linear-gradient(135deg, #d97706, #f59e0b); }

.bc-dash-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin-bottom: 14px;
}
@media (max-width: 780px) {
	.bc-dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.bc-dash-grid { grid-template-columns: 1fr; }
}
.bc-dash-grid.bc-dash-grid-2 {
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
	.bc-dash-grid.bc-dash-grid-2 { grid-template-columns: 1fr; }
}

.bc-dcard {
	background: var(--bc-surface-solid);
	border: 1px solid var(--bc-border);
	border-radius: 14px;
	overflow: hidden;
}
.bc-dcard-header {
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #fff;
	background: linear-gradient(135deg, var(--bc-primary), #8b5cf6);
}
.bc-dcard-header.bc-header-green { background: linear-gradient(135deg, #16a34a, #22c55e); }
.bc-dcard-header.bc-header-orange { background: linear-gradient(135deg, #d97706, #f59e0b); }
.bc-dcard-body {
	padding: 16px;
}

/* Spec cards (CPU / GPU) */
.bc-spec-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.bc-spec-icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: rgba(99, 102, 241, .14);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.bc-spec-icon svg { width: 26px; height: 26px; }
.bc-spec-name {
	font-weight: 800;
	font-size: 14px;
	line-height: 1.3;
}
.bc-spec-sub {
	font-size: 12px;
	color: var(--bc-text-muted);
	margin-top: 2px;
}

/* Bottleneck analyzer gauge */
.bc-analyzer-card { text-align: center; }
.bc-mini-gauge-wrap {
	position: relative;
	width: 108px;
	height: 108px;
	margin: 4px auto 8px;
}
.bc-mini-gauge-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bc-mini-gauge-value {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-size: 22px; font-weight: 800;
}
.bc-analyzer-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--bc-text-muted);
	text-transform: uppercase;
}

/* Performance breakdown bars */
.bc-breakdown-item { margin-bottom: 12px; }
.bc-breakdown-item:last-child { margin-bottom: 0; }
.bc-breakdown-label {
	display: flex; justify-content: space-between;
	font-size: 12px; font-weight: 700; margin-bottom: 5px;
}
.bc-breakdown-track {
	height: 8px; border-radius: 999px; background: var(--bc-border); overflow: hidden;
}
.bc-breakdown-fill {
	height: 100%; border-radius: 999px; width: 0%;
	transition: width .8s cubic-bezier(.22,1,.36,1);
}

/* System health */
.bc-health-item {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 0;
	font-size: 13px;
	border-bottom: 1px solid var(--bc-border);
}
.bc-health-item:last-child { border-bottom: none; }
.bc-health-badge {
	font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px;
	text-transform: uppercase;
}
.bc-health-badge.bc-good { background: rgba(34,197,94,.15); color: #16a34a; }
.bc-health-badge.bc-warn { background: rgba(245,158,11,.15); color: #b45309; }
.bc-health-badge.bc-bad { background: rgba(239,68,68,.15); color: #b91c1c; }

/* Tips panel */
.bc-tips-panel p { font-size: 13px; color: var(--bc-text-muted); line-height: 1.6; margin: 0; }

/* FPS analysis cards */
.bc-fps-card {
	text-align: center;
	background: var(--bc-surface-solid);
	border: 1px solid var(--bc-border);
	border-radius: 12px;
	padding: 14px 10px;
}
.bc-fps-value { font-size: 24px; font-weight: 800; }
.bc-fps-label { font-size: 11px; font-weight: 700; color: var(--bc-text-muted); text-transform: uppercase; margin-top: 2px; }
.bc-fps-quality { font-size: 11px; font-weight: 800; margin-top: 4px; }
.bc-fps-quality.bc-good { color: #16a34a; }
.bc-fps-quality.bc-ok { color: #b45309; }
.bc-fps-quality.bc-bad { color: #b91c1c; }

/* Checklist (optimizations / upgrades) */
.bc-checklist { list-style: none; margin: 0; padding: 0; }
.bc-checklist li {
	display: flex; gap: 8px; align-items: flex-start;
	font-size: 13px; line-height: 1.5; margin-bottom: 10px;
}
.bc-checklist li:last-child { margin-bottom: 0; }
.bc-checklist .bc-check-icon { flex-shrink: 0; margin-top: 1px; }

/* Bottleneck summary table */
.bc-summary-table-wrap { overflow-x: auto; }
.bc-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bc-summary-table th {
	text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase;
	letter-spacing: .04em; color: #fff;
	background: linear-gradient(135deg, var(--bc-primary), #8b5cf6);
}
.bc-summary-table th:first-child { border-top-left-radius: 8px; }
.bc-summary-table th:last-child { border-top-right-radius: 8px; }
.bc-summary-table td { padding: 10px 12px; border-bottom: 1px solid var(--bc-border); }
.bc-severity-bar-wrap {
	display: flex; align-items: center; gap: 8px;
}
.bc-severity-track {
	flex: 1; height: 8px; border-radius: 999px; background: var(--bc-border); overflow: hidden; min-width: 60px;
}
.bc-severity-fill { height: 100%; border-radius: 999px; }


/* Responsive */
@media (max-width: 600px) {
	.bc-card { padding: 20px; }
	.bc-app-header h2 { font-size: 22px; }
	.bc-gauge-wrap { width: 180px; height: 180px; }
	.bc-gauge-value { font-size: 32px; }
	.bc-btn-primary { width: 100%; }
	.bc-dash-grid { grid-template-columns: 1fr; }
	.bc-loading-card { padding: 28px 24px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bc-results.bc-visible,
	.bc-gauge-fill,
	.bc-bar-fill,
	.bc-breakdown-fill,
	.bc-loading-ring-wrap svg {
		animation: none !important;
		transition: none !important;
	}
}