/* Card Identifier refreshed experience */
.card-identifier-page {
	background: radial-gradient(120% 140% at 50% -10%, rgba(59, 130, 246, 0.28) 0%, rgba(15, 23, 42, 0.92) 50%, #04070f 100%);
	color: #e8eefc;
	min-height: 100vh;
}

.card-identifier-page .main-content {
	background: transparent;
	color: inherit;
}

.card-identifier-page .ci-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-left: clamp(1.2rem, 3vw, 2.4rem);
	padding-right: clamp(1.2rem, 3vw, 2.4rem);
	padding-top: clamp(1.5rem, 3vw, 2.35rem) !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.35rem) !important;
}

.ci-main-grid {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2rem);
}

.ci-main-grid > [class*='col-'] {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0;
}

@media (min-width: 992px) {
	.ci-main-grid {
		grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr) !important;
		align-items: start;
	}
}

@media (min-width: 1400px) {
	.ci-main-grid {
		grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr) !important;
	}
}

.card-identifier-page .text-muted {
	color: rgba(226, 232, 240, 0.72) !important;
}

.card-identifier-page .btn-outline-light {
	border-color: rgba(226, 232, 240, 0.4);
}

.ci-hero__buttons {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.ci-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1.3rem, 2.4vw, 2.2rem);
	padding: clamp(1.4rem, 2vw + 1rem, 2.25rem);
	position: relative;
	overflow: hidden;
}

.ci-hero__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(1rem, 2vw, 1.6rem);
}

.ci-hero__headline {
	flex: 1 1 55%;
	max-width: 640px;
}

.ci-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	min-width: 180px;
}

.ci-hero__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: clamp(0.85rem, 2vw, 1.2rem);
	margin-top: 1.2rem;
}

.ci-metric {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, 0.18);
	background: linear-gradient(160deg, rgba(24, 34, 52, 0.7), rgba(14, 23, 38, 0.6));
}

.ci-metric .material-icons-round {
	font-size: 1.35rem;
	color: #60a5fa;
}

.ci-metric__label {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(226, 233, 243, 0.7);
}

.ci-metric__value {
	display: block;
	font-weight: 600;
	color: #f8fafc;
}

@media (min-width: 992px) {
	.ci-hero {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}

	.ci-hero__actions {
		align-items: flex-end;
	}

	.ci-hero__metrics {
		margin-top: 0.75rem;
	}
}

@media (min-width: 1200px) {
	.ci-hero__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.ci-hero,
	.ci-panel,
	.ci-side-card {
		padding: 1.5rem 1.4rem;
	}

	.ci-panel {
		gap: 1.35rem;
	}

	.ci-hero__card {
		flex-direction: column;
	}

	.ci-hero__icon {
		margin-bottom: 0.4rem;
	}

	.ci-toolbar {
		flex-direction: column;
		align-items: stretch;
		padding: 1.15rem 1.1rem;
	}

	.ci-toolbar__actions {
		justify-content: center;
		gap: 0.5rem;
	}

	.ci-toolbar__actions .btn {
		width: 100%;
	}

	.ci-results__actions {
		flex-direction: column;
		gap: 0.6rem;
	}

	.ci-results__actions .btn {
		width: 100%;
	}

	.ci-count {
		align-self: flex-start;
	}

	.ci-processing {
		flex-direction: column;
		align-items: flex-start;
	}

	.ci-processing__spinner {
		align-self: center;
	}

	.ci-upload-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ci-upload-actions .btn {
		width: 100%;
		min-width: unset;
	}
}

@media (max-width: 575.98px) {
	.ci-hero__metrics,
	.ci-hero__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 0.45rem;
	}

	.ci-hero__card {
		text-align: left;
	}

	.ci-count {
		width: 100%;
		text-align: center;
	}

	.ci-toolbar__actions {
		flex-direction: column;
		gap: 0.45rem;
	}

	.ci-results__meta {
		justify-content: stretch;
	}

	.ci-results-chip {
		min-width: calc(50% - 0.4rem);
		flex: 1 1 calc(50% - 0.4rem);
	}

	.ci-results-empty {
		flex-direction: column;
		align-items: stretch;
	}

	.ci-results-empty .btn {
		width: 100%;
	}

	.ci-hero__grid {
		overflow-x: auto;
		display: flex;
		flex-wrap: nowrap;
		gap: 1rem;
	}

	.ci-hero__metrics {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.4rem;
		scroll-snap-type: x mandatory;
		gap: 0.75rem;
	}

	.ci-hero__metrics .ci-metric {
		flex: 0 0 240px;
		scroll-snap-align: start;
	}

	.ci-hero__card {
		flex: 0 0 260px;
	}

	.ci-panel__title {
		font-size: 1.6rem;
	}

	.ci-panel__copy {
		font-size: 0.9rem;
	}

	.ci-results__actions {
		position: sticky;
		bottom: 0.85rem;
		background: linear-gradient(160deg, rgba(12, 20, 32, 0.92), rgba(12, 20, 32, 0.78));
		border: 1px solid rgba(148, 163, 184, 0.18);
		border-radius: 16px;
		padding: 0.9rem 1rem;
		box-shadow: 0 18px 32px -24px rgba(15, 23, 42, 0.85);
		z-index: 12;
	}

	.ci-results__actions .btn {
		min-width: unset;
	}

	.ci-side-stack {
		gap: 1.1rem;
	}

	.ci-side-card {
		padding: 1.2rem 1.25rem;
	}

	.ci-hero {
		padding: 1.35rem 1.25rem;
	}

	.ci-summary-panel {
		padding: 1.25rem 1.2rem;
	}

	.ci-mini-stats li {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.35rem;
	}
}

.ci-results__header {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0.85rem;
}

.ci-results__header p {
	margin: 0;
}

@media (max-width: 480px) {
	.ci-hero__headline h1 {
		font-size: 1.8rem;
	}


.card-identifier-page .upload-left,
.card-identifier-page .upload-right {
	background: linear-gradient(160deg, rgba(10, 18, 31, 0.9), rgba(9, 16, 28, 0.72));
	border: 1px solid rgba(148, 163, 184, 0.16);
	box-shadow: 0 26px 46px -34px rgba(2, 8, 23, 0.95);
}

.card-identifier-page .ci-upload-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.card-identifier-page .ci-upload-intro {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.card-identifier-page .ci-upload-pill-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.card-identifier-page .ci-upload-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(96, 165, 250, 0.22);
	background: rgba(15, 23, 42, 0.64);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(226, 232, 240, 0.88);
}

.card-identifier-page .ci-upload-pill .material-icons-round {
	font-size: 1rem;
	color: #7dd3fc;
}

.card-identifier-page .ci-category-card {
	padding: 0.95rem 1rem;
	border-radius: 18px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.55));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.card-identifier-page .ci-category-card .form-label {
	margin-bottom: 0.55rem;
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(226, 232, 240, 0.72);
}

.card-identifier-page .ci-drop-area {
	display: grid;
	gap: 1rem;
	padding: 1.2rem 1.15rem;
	border: 1px dashed rgba(125, 211, 252, 0.34);
	border-radius: 22px;
	background: linear-gradient(160deg, rgba(9, 16, 28, 0.92), rgba(17, 24, 39, 0.72));
	box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.06), 0 20px 34px -28px rgba(14, 165, 233, 0.35);
}

.card-identifier-page .ci-drop-area__copy {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	text-align: left;
}

.card-identifier-page .ci-drop-area__copy strong {
	display: block;
	margin-bottom: 0.28rem;
	font-size: 1rem;
	color: #f8fafc;
}

.card-identifier-page .ci-drop-area__icon {
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.24), rgba(37, 99, 235, 0.24));
	border: 1px solid rgba(125, 211, 252, 0.25);
	color: #93c5fd;
	font-size: 1.3rem;
}

.card-identifier-page .ci-drop-area__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.card-identifier-page .ci-drop-area__actions .btn {
	min-width: 126px;
	border-radius: 999px;
	padding-inline: 0.95rem;
}

.card-identifier-page .ci-preview-shell {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	padding: 0.95rem 1rem 1rem;
	border-radius: 20px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	background: linear-gradient(160deg, rgba(11, 18, 30, 0.84), rgba(15, 23, 42, 0.6));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.card-identifier-page .ci-preview-shell__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.7rem;
}

.card-identifier-page .ci-preview-shell__header h4 {
	margin: 0.2rem 0 0;
	font-size: 1rem;
	color: #f8fafc;
}

.card-identifier-page .ci-preview-strip {
	position: static;
	min-height: 120px;
	gap: 0.75rem;
	padding: 0;
	background: transparent;
	border: none;
	backdrop-filter: none;
}

.card-identifier-page #previewContainer:empty::before {
	content: 'Uploaded shots appear here once they are queued.';
	width: 100%;
	padding: 1rem 1.1rem;
	border-radius: 16px;
	border: 1px dashed rgba(148, 163, 184, 0.22);
	background: rgba(15, 23, 42, 0.32);
	color: rgba(226, 232, 240, 0.64);
	font-size: 0.86rem;
	text-align: center;
}

.card-identifier-page .ci-manual-rate {
	padding: 0.95rem 1rem;
	border-radius: 18px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	background: rgba(15, 23, 42, 0.44);
}

.card-identifier-page .ci-upload-actions {
	padding: 1rem 1.05rem;
	border-radius: 20px;
	border: 1px solid rgba(96, 165, 250, 0.18);
	background: linear-gradient(145deg, rgba(15, 23, 42, 0.88), rgba(9, 16, 28, 0.74));
	box-shadow: 0 22px 40px -32px rgba(14, 165, 233, 0.45);
}

.card-identifier-page .ci-upload-status {
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: #f8fafc;
}

.card-identifier-page .results-list {
	display: grid;
	gap: 1rem;
}

.card-identifier-page .result-card {
	padding: 1.1rem 1.15rem 1.2rem;
	border-radius: 24px;
	border: 1px solid rgba(148, 163, 184, 0.18);
	background: linear-gradient(160deg, rgba(17, 24, 39, 0.94), rgba(9, 16, 28, 0.82));
	box-shadow: 0 30px 50px -36px rgba(2, 8, 23, 0.98);
	overflow: hidden;
}

.card-identifier-page .result-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(125, 211, 252, 0.28), rgba(59, 130, 246, 0.08), transparent 82%);
	pointer-events: none;
}

.card-identifier-page .result-card--error {
	border-color: rgba(248, 113, 113, 0.22);
	box-shadow: 0 30px 50px -36px rgba(127, 29, 29, 0.55);
}

.card-identifier-page .result-card__meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-left: 1.45rem;
	padding-right: 4.6rem;
	margin-bottom: 0.9rem;
	min-width: 0;
}

.card-identifier-page .result-card__meta-copy {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	min-width: 0;
}

.card-identifier-page .result-card__eyebrow {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(125, 211, 252, 0.78);
}

.card-identifier-page .result-card__filename {
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #f8fafc;
}

.card-identifier-page .result-card__state {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.42rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(52, 211, 153, 0.24);
	background: rgba(16, 185, 129, 0.14);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #a7f3d0;
	white-space: nowrap;
}

.card-identifier-page .result-card__state--error {
	border-color: rgba(248, 113, 113, 0.26);
	background: rgba(248, 113, 113, 0.14);
	color: #fecaca;
}

.card-identifier-page .result-shell {
	gap: 1.15rem;
}

.card-identifier-page .result-overview {
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 1.1rem 1.35rem;
	align-items: start;
}

.card-identifier-page .result-summary {
	gap: 0.85rem;
	padding-top: 0.1rem;
}

.card-identifier-page .result-summary__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: #f8fafc;
}

.card-identifier-page .result-summary__file {
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: rgba(226, 232, 240, 0.62);
}

.card-identifier-page .result-summary__chips,
.card-identifier-page .result-summary__flags,
.card-identifier-page .result-summary__subgrades,
.card-identifier-page .result-summary__pricing {
	gap: 0.5rem;
}

.card-identifier-page .result-score {
	min-width: 90px;
	min-height: 90px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.18rem;
	padding: 0.75rem;
	border-radius: 26px;
	border: 1px solid rgba(96, 165, 250, 0.2);
	background: linear-gradient(160deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.94));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.card-identifier-page .result-score__value {
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1;
	color: #f8fafc;
}

.card-identifier-page .result-score__label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(226, 232, 240, 0.64);
}

.card-identifier-page .result-score.tier-high {
	border-color: rgba(52, 211, 153, 0.28);
	background: linear-gradient(160deg, rgba(6, 78, 59, 0.86), rgba(15, 23, 42, 0.96));
}

.card-identifier-page .result-score.tier-med {
	border-color: rgba(250, 204, 21, 0.26);
	background: linear-gradient(160deg, rgba(120, 53, 15, 0.78), rgba(15, 23, 42, 0.96));
}

.card-identifier-page .result-score.tier-low {
	border-color: rgba(248, 113, 113, 0.24);
	background: linear-gradient(160deg, rgba(127, 29, 29, 0.78), rgba(15, 23, 42, 0.96));
}

.card-identifier-page .result-sections {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0.85rem;
}

.card-identifier-page .result-section {
	grid-column: span 4;
	padding: 0.95rem 1rem 1rem;
	border-radius: 18px;
	border: 1px solid rgba(148, 163, 184, 0.14);
	background: linear-gradient(160deg, rgba(15, 23, 42, 0.58), rgba(15, 23, 42, 0.38));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	min-width: 0;
}

.card-identifier-page .result-section--wide {
	grid-column: span 6;
}

.card-identifier-page .result-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.card-identifier-page .result-section__title {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(226, 232, 240, 0.68);
}

.card-identifier-page .result-section__body {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	min-width: 0;
}

body.grid-packed .card-identifier-page .result-card__meta {
	padding-right: 3.2rem;
	margin-bottom: 0.65rem;
}

body.grid-packed .card-identifier-page .result-card__filename {
	font-size: 0.8rem;
}

@media (max-width: 991.98px) {
	.card-identifier-page .result-overview {
		grid-template-columns: minmax(0, 1fr);
	}

	.card-identifier-page .result-sections {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.card-identifier-page .result-section,
	.card-identifier-page .result-section--wide {
		grid-column: auto;
	}
}

@media (max-width: 767.98px) {
	.card-identifier-page .ci-drop-area {
		padding: 1rem;
	}

	.card-identifier-page .ci-drop-area__copy,
	.card-identifier-page .ci-preview-shell__header,
	.card-identifier-page .result-card__meta {
		flex-direction: column;
		align-items: flex-start;
	}

	.card-identifier-page .result-card__meta {
		padding-right: 2.75rem;
	}

	.card-identifier-page .result-sections {
		grid-template-columns: minmax(0, 1fr);
	}
}
	.ci-metric {
		padding: 0.6rem 0.85rem;
	}

	.ci-panel {
		padding: 1.35rem 1.1rem 1.5rem;
	}

	.upload-grid {
		gap: 1rem;
	}

	.upload-left,
	.upload-right {
		padding: 1rem;
		border-radius: 14px;
	}

	.ci-upload-actions {
		padding: 1rem 1.05rem;
	}

	.drop-area {
		padding: 0.95rem 1rem;
	}

	.ci-upload-tips {
		margin-top: 1.1rem;
		padding: 1rem 1.05rem;
	}

	.ci-processing__copy h3,
	.ci-results__header h3 {
		font-size: 1.35rem;
	}

	.ci-summary-panel {
		padding: 1.1rem 1.05rem;
	}

	.ci-mini-stats li {
		padding: 0.65rem 0.8rem;
	}
}

.ci-count {
	min-width: 120px;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.55rem 0.9rem;
	background: rgba(15, 23, 42, 0.68);
	border-radius: 999px;
	border: 1px solid rgba(148, 163, 184, 0.28);
	color: rgba(226, 233, 243, 0.92);
}

.ci-hero__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(1rem, 2vw, 1.4rem);
	align-content: stretch;
}

.ci-hero__card {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1.1rem 1.25rem;
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: linear-gradient(160deg, rgba(26, 37, 55, 0.82), rgba(12, 21, 36, 0.68));
	box-shadow: 0 18px 38px -28px rgba(59, 130, 246, 0.28);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ci-hero__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -28px rgba(59, 130, 246, 0.4);
}

.ci-hero__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.ci-panel {
	padding: clamp(1.35rem, 2vw + 0.9rem, 1.9rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.1rem, 2vw, 1.6rem);
}

.ci-panel__header h2,
.ci-side-card__header h4,
.ci-side-card__body dt,
.ci-side-card__body dd,
.ci-hero__card h6,
.ci-hero__card p {
	word-break: break-word;
}

.ci-panel__header {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	border-bottom: 1px solid rgba(148, 163, 184, 0.16);
	padding-bottom: 1rem;
}

.ci-panel__eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	font-weight: 600;
	color: rgba(148, 201, 255, 0.78);
}

.ci-panel__title {
	margin-top: 0.4rem;
	font-size: clamp(1.5rem, 2vw + 0.5rem, 1.9rem);
	color: #f7fbff;
}

.ci-panel__title,
.ci-panel__copy {
	word-break: break-word;
}

.ci-panel__copy {
	margin-top: 0.6rem;
	font-size: 0.95rem;
	color: rgba(226, 233, 243, 0.78);
}

.ci-stepper-wrap {
	padding: 0.5rem 0;
}

.ci-wizard {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ci-helper-text {
	font-size: 0.85rem;
	color: rgba(226, 233, 243, 0.68);
	margin-bottom: 0.85rem;
}

.ci-manual-rate {
	margin-bottom: 1.25rem;
}

.ci-manual-rate .input-group-text {
	background: rgba(12, 20, 32, 0.9);
	color: rgba(226, 233, 243, 0.78);
	border-color: rgba(148, 163, 184, 0.24);
}

.ci-manual-rate .form-control {
	background: rgba(9, 14, 26, 0.82);
	color: #f8fbff;
	border-color: rgba(148, 163, 184, 0.22);
}

.ci-manual-rate .form-control:focus {
	border-color: rgba(59, 130, 246, 0.58);
	box-shadow: 0 0 0 0.12rem rgba(59, 130, 246, 0.18);
	background: rgba(9, 14, 26, 0.95);
}

.ci-upload-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	padding: 1rem 1.25rem;
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.22);
	background: linear-gradient(170deg, rgba(13, 20, 34, 0.92), rgba(7, 11, 20, 0.82));
	box-shadow: 0 18px 32px -26px rgba(37, 99, 235, 0.6);
}

.ci-upload-actions__meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ci-upload-status {
	font-size: 1.05rem;
	font-weight: 600;
	color: #f8fafc;
}

.ci-upload-actions .btn {
	min-width: 160px;
}

.ci-summary-panel {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.2rem 1.35rem;
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: linear-gradient(165deg, rgba(20, 30, 48, 0.8), rgba(10, 16, 28, 0.72));
	box-shadow: 0 16px 34px -24px rgba(59, 130, 246, 0.32);
}

.ci-summary-panel__header h4 {
	color: #f7fbff;
	font-weight: 700;
}

.ci-summary-panel__header {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.ci-mini-stats {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ci-mini-stats li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 12px;
	padding: 0.75rem 0.9rem;
	background: rgba(12, 20, 32, 0.6);
	border: 1px solid rgba(148, 163, 184, 0.14);
}

.ci-mini-stats .label {
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(148, 201, 255, 0.76);
}

.ci-mini-stats .value {
	font-size: 1.1rem;
	font-weight: 700;
	color: #f8fafc;
}

.ci-summary-steps {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ci-summary-steps li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	color: rgba(226, 233, 243, 0.82);
	font-size: 0.9rem;
}

.ci-summary-steps .material-icons-round {
	font-size: 1.1rem;
	color: #60a5fa;
	margin-top: 0.1rem;
}

.ci-upload-tips {
	margin-top: 1.25rem;
	padding: 1.05rem 1.25rem;
	border-radius: 14px;
	border: 1px dashed rgba(148, 163, 184, 0.28);
	background: linear-gradient(165deg, rgba(26, 37, 55, 0.75), rgba(12, 20, 32, 0.6));
}

.ci-tips__title {
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 0.75rem;
	color: #f8fafc;
}

.ci-tips__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	font-size: 0.85rem;
}

.ci-tips__list li {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	color: rgba(226, 233, 243, 0.8);
}

.ci-tips__list .material-icons-round {
	font-size: 1.1rem;
	color: #60a5fa;
}

@media (min-width: 768px) {
	.ci-summary-steps,
	.ci-tips__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem 1.25rem;
	}

	.ci-summary-steps li,
	.ci-tips__list li {
		align-items: flex-start;
	}

	.ci-results__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.ci-results__header p {
		max-width: 420px;
	}
}

.ci-processing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.15rem 1.35rem;
	border-radius: 18px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: rgba(15, 23, 42, 0.68);
}

.ci-processing__copy h3 {
	margin-bottom: 0.5rem;
}

.ci-processing__copy p {
	margin: 0;
	color: rgba(226, 233, 243, 0.75);
	line-height: 1.6;
}

.ci-processing__spinner {
	display: inline-flex;
	padding: 0.85rem;
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, 0.18);
	background: rgba(11, 18, 33, 0.7);
}

.ci-processing__skeletons {
	margin-top: 1.4rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.ci-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: rgba(15, 23, 42, 0.7);
	margin-bottom: 1rem;
}

.ci-toolbar__search {
	flex: 1 1 240px;
}

.ci-toolbar__actions {
	display: flex;
	gap: 0.65rem;
	flex-wrap: wrap;
}

.ci-toolbar__actions .btn {
	flex: 0 1 auto;
}

.ci-toolbar__actions .btn {
	min-width: 120px;
}

.ci-results__header h3 {
	margin-bottom: 0;
}

.ci-results__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: flex-end;
}

.ci-results-chip {
	min-width: 102px;
	padding: 0.78rem 0.9rem;
	border-radius: 14px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: linear-gradient(165deg, rgba(26, 37, 55, 0.84), rgba(10, 16, 28, 0.7));
	box-shadow: 0 16px 30px -24px rgba(15, 23, 42, 0.85);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.ci-results-chip__label {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(148, 201, 255, 0.76);
}

.ci-results-chip strong {
	color: #f8fafc;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.1;
}

.ci-results-chip--danger strong {
	color: #fda4af;
}

.ci-results-empty {
	display: none;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.1rem;
	margin-bottom: 1rem;
	border-radius: 16px;
	border: 1px dashed rgba(148, 163, 184, 0.24);
	background: linear-gradient(165deg, rgba(26, 37, 55, 0.68), rgba(12, 20, 32, 0.56));
	box-shadow: 0 18px 34px -26px rgba(15, 23, 42, 0.75);
}

.ci-results-empty:not(.initially-hidden) {
	display: flex;
}

.ci-results-empty__icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(59, 130, 246, 0.14);
	color: #93c5fd;
	flex: 0 0 auto;
}

.ci-results-empty__copy {
	flex: 1 1 auto;
	min-width: 0;
}

.ci-results-empty__copy h4 {
	margin-bottom: 0.35rem;
	color: #f8fafc;
	font-size: 1rem;
}

.ci-results-empty__copy p {
	margin: 0;
	color: rgba(226, 233, 243, 0.74);
	font-size: 0.9rem;
	line-height: 1.55;
}

.ci-results__actions {
	margin-top: 1.2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	justify-content: flex-end;
}

.ci-results__actions .btn {
	min-width: 120px;
}

.ci-results__actions .btn:focus-visible {
	outline: 3px solid rgba(59, 130, 246, 0.45);
	outline-offset: 2px;
}

.failed-cards-container {
	margin-top: 1.75rem;
	padding: 1.3rem 1.45rem 1.4rem;
	border-radius: 16px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: rgba(12, 20, 32, 0.7);
}

.failed-cards__header {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.failed-cards-container ul {
	margin: 0;
}

.ci-side-stack {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.35rem);
}

.ci-side-card {
	padding: 1.2rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.ci-side-card__header {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.ci-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	font-size: 0.88rem;
}

.ci-checklist li {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	color: rgba(226, 233, 243, 0.8);
}

.ci-checklist .material-icons-round {
	font-size: 1.2rem;
	color: #4ade80;
}

.ci-side-card__body ul,
.ci-side-card__body li {
	word-break: break-word;
}

.ci-side-card__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ci-statlist {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
}

.ci-statlist dt {
	font-size: 0.78rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(148, 201, 255, 0.78);
	margin-bottom: 0.35rem;
}

.ci-statlist dd {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(226, 233, 243, 0.86);
}

.ci-side-card strong {
	color: #f8fafc;
}

.card-identifier-page .upload-left,
.card-identifier-page .upload-right {
	background: rgba(16, 25, 40, 0.8);
	border-color: rgba(148, 163, 184, 0.18);
	box-shadow: 0 18px 32px -28px rgba(15, 23, 42, 0.85);
}

.card-identifier-page .drop-area {
	background: rgba(12, 20, 32, 0.75);
	border-color: rgba(94, 234, 212, 0.35);
	color: rgba(226, 233, 243, 0.82);
}

.card-identifier-page .drop-area.dragover {
	background: rgba(37, 99, 235, 0.18);
	border-color: rgba(37, 99, 235, 0.45);
}

.card-identifier-page .preview-sticky {
	background: rgba(10, 16, 28, 0.85);
	border-color: rgba(148, 163, 184, 0.18);
}

.card-identifier-page .stepper {
	gap: 0.75rem;
}

.card-identifier-page .stepper .step {
	background: rgba(15, 23, 42, 0.72);
	border: 1px solid rgba(148, 163, 184, 0.18);
	color: #e8eefc;
	box-shadow: 0 12px 28px -18px rgba(59, 130, 246, 0.4);
}

.card-identifier-page .stepper .step .step-label {
	font-weight: 600;
	letter-spacing: 0.04em;
}

.card-identifier-page .stepper .step .step-index {
	background: rgba(100, 116, 139, 0.45);
	color: #f8fafc;
}

.card-identifier-page .stepper .step.active .step-index {
	background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
}

.card-identifier-page .stepper .step.completed .step-index {
	background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
}

.card-identifier-page .wizard-step {
	background: transparent;
}

.card-identifier-page #wizard h3 {
	color: #f8fbff;
}

.card-identifier-page .form-control,
.card-identifier-page .form-select {
	background: rgba(9, 14, 26, 0.82);
	color: #f8fbff;
	border-color: rgba(148, 163, 184, 0.22);
}

.card-identifier-page .form-control::placeholder {
	color: rgba(226, 233, 243, 0.48);
}

.card-identifier-page .form-control:focus,
.card-identifier-page .form-select:focus {
	border-color: rgba(59, 130, 246, 0.58);
	box-shadow: 0 0 0 0.15rem rgba(59, 130, 246, 0.18);
	background: rgba(9, 14, 26, 0.92);
}

.card-identifier-page .btn-primary {
	background: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
	border: none;
	box-shadow: 0 14px 24px -18px rgba(37, 99, 235, 0.9);
}

.card-identifier-page .btn-primary:hover {
	background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
}

.card-identifier-page .btn-secondary {
	background: rgba(15, 23, 42, 0.65);
	border-color: rgba(148, 163, 184, 0.24);
	color: #e2e8f0;
}

.card-identifier-page .btn-secondary:hover {
	background: rgba(15, 23, 42, 0.55);
}

@media (max-width: 1199.98px) {
	.ci-panel,
	.ci-hero,
	.ci-side-card {
		padding: 1.6rem 1.75rem;
	}
}

@media (max-width: 991.98px) {
	.ci-hero__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.ci-hero__actions {
		align-items: flex-start;
		width: 100%;
		min-width: 0;
	}

	.ci-hero__buttons {
		justify-content: flex-start;
	}

	.ci-panel__header {
		text-align: left;
	}

	.ci-panel__copy {
		max-width: 620px;
	}

		.ci-toolbar__actions .btn {
			flex: 0 1 auto;
		}
}

/* Card Identifier page specific styles extracted to satisfy CSP (no inline <style>) */
.result-card { background:#fff; box-shadow:0 4px 18px -6px rgba(0,0,0,0.12),0 2px 4px rgba(0,0,0,.06); position:relative; border-radius:16px; padding:1rem 1.1rem 1.1rem; margin-bottom:.95rem; font-size:.9rem; line-height:1.28; display:flex; flex-direction:column; gap:.75rem; min-height:0; }
body[data-theme='dark'] .result-card { font-size:.95rem; }
.results-grid .result-card { margin-bottom:0; height:100%; }
body.compact-mode .result-card { padding:.65rem .7rem .75rem; border-radius:10px; gap:.55rem; }
body.grid-packed .result-card { padding:.55rem .6rem .6rem; border-radius:10px; gap:.5rem; }
.result-card.glass { background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(8px) saturate(160%) contrast(105%); backdrop-filter:blur(8px) saturate(160%) contrast(105%); box-shadow:0 4px 24px -4px rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.4); }
body[data-theme='dark'] .result-card.glass { background:rgba(30,36,42,.65); border-color:rgba(255,255,255,.08); box-shadow:0 4px 28px -6px rgba(0,0,0,.6); }
.results-grid { display:grid; gap:clamp(.8rem,1.6vw,1.1rem); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:stretch; }
body.compact-mode .results-grid { gap:.65rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
body.grid-packed .results-grid { gap:.55rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.result-shell { display:flex; flex-direction:column; gap:1rem; }
.result-overview { display:grid; grid-template-columns:minmax(0,280px) minmax(0,1fr); gap:clamp(1rem,2vw,1.6rem); align-items:stretch; }
.result-visual { display:flex; flex-direction:column; gap:.85rem; }
.result-summary { display:flex; flex-direction:column; gap:.75rem; }
.result-summary__top { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.result-summary__titles { display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.result-summary__title { font-size:1.05rem; font-weight:600; line-height:1.2; }
.result-summary__file { font-size:.82rem; color:rgba(71,85,105,.85); }
body[data-theme='dark'] .result-summary__file { color:rgba(226,233,243,.7); }
.result-summary__chips, .result-summary__flags, .result-summary__subgrades { display:flex; flex-wrap:wrap; gap:.45rem; }
.result-summary__pricing { display:flex; flex-wrap:wrap; gap:.4rem; font-size:.78rem; color:rgba(71,85,105,.9); }
body[data-theme='dark'] .result-summary__pricing { color:rgba(202,210,220,.85); }

.pc-price-chip { display:inline-flex; align-items:center; gap:.25rem; padding:.35rem .55rem; border-radius:14px; background:rgba(59,130,246,.12); color:#2563eb; font-size:.74rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.pc-price-chip.muted { background:rgba(148,163,184,.18); color:rgba(71,85,105,.85); }
body[data-theme='dark'] .pc-price-chip { background:rgba(96,165,250,.18); color:#93c5fd; }
body[data-theme='dark'] .pc-price-chip.muted { background:rgba(148,163,184,.12); color:rgba(226,233,243,.82); }

.result-gallery { display:flex; flex-direction:column; gap:.75rem; }
.result-gallery__viewport { position:relative; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:18px; background:rgba(15,23,42,.65); }
body[data-theme='dark'] .result-gallery__viewport { background:rgba(16,23,33,.7); }
.result-gallery__track { display:flex; }
.result-gallery__item { flex:0 0 100%; scroll-snap-align:center; padding:1rem; display:flex; flex-direction:column; gap:.6rem; align-items:center; }
.result-gallery__media { width:100%; display:flex; justify-content:center; }
.result-gallery__img { width:100%; height:auto; max-height:360px; object-fit:cover; border-radius:16px; border:1px solid rgba(148,163,184,.25); box-shadow:0 14px 38px -18px rgba(15,23,42,.65); }
body[data-theme='dark'] .result-gallery__img { border-color:rgba(255,255,255,.12); box-shadow:0 16px 42px -20px rgba(0,0,0,.8); }
.result-gallery__caption { display:flex; flex-direction:column; gap:.25rem; align-items:center; text-align:center; font-size:.78rem; color:rgba(226,233,243,.8); }
.result-gallery__badge { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#60a5fa; }
body[data-theme='dark'] .result-gallery__badge { color:#93c5fd; }
.result-gallery__text { font-size:.78rem; line-height:1.3; color:inherit; }
.result-gallery__controls { display:flex; align-items:center; justify-content:center; gap:.65rem; }
.gallery-nav { width:34px; height:34px; border-radius:50%; border:1px solid rgba(148,163,184,.3); background:rgba(15,23,42,.75); color:#e2e8f0; display:flex; align-items:center; justify-content:center; font-size:1.15rem; font-weight:600; cursor:pointer; transition:background .25s, transform .2s; }
.gallery-nav:hover:not(:disabled) { background:rgba(59,130,246,.32); transform:translateY(-1px); }
.gallery-nav:disabled { opacity:.35; cursor:default; }
body[data-theme='dark'] .gallery-nav { background:rgba(30,38,50,.85); border-color:rgba(148,163,184,.18); }
.result-gallery__dots { display:flex; gap:.4rem; }
.result-gallery__dot { width:8px; height:8px; border-radius:50%; border:1px solid rgba(148,163,184,.45); background:transparent; padding:0; cursor:pointer; transition:background .2s, transform .2s; }
.result-gallery__dot.is-active { background:rgba(59,130,246,.9); border-color:rgba(59,130,246,.9); transform:scale(1.1); }
body[data-theme='dark'] .result-gallery__dot { border-color:rgba(148,163,184,.4); }
body[data-theme='dark'] .result-gallery__dot.is-active { background:#60a5fa; border-color:#60a5fa; }
.result-gallery__thumbs { display:flex; gap:.55rem; padding:.25rem 0; overflow-x:auto; }
.result-gallery__thumb { border:none; background:transparent; padding:0; border-radius:14px; overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s; }
.result-gallery__thumb img { width:70px; height:96px; object-fit:cover; border-radius:inherit; border:1px solid rgba(148,163,184,.25); }
.model-details{display:flex;flex-direction:column;gap:.9rem;}
.model-side-card{background:rgba(248,250,252,.82);border:1px solid rgba(148,163,184,.28);border-radius:14px;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.65rem;}
body[data-theme='dark'] .model-side-card{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.22);}
.model-side-card__header{display:flex;align-items:center;justify-content:space-between;gap:.65rem;}
.model-side-card__title{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#1f2937;font-weight:600;}
body[data-theme='dark'] .model-side-card__title{color:#e2e8f0;}
.model-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem .8rem;margin:0;}
.model-stat-grid dt{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(71,85,105,.78);margin-bottom:.15rem;}
body[data-theme='dark'] .model-stat-grid dt{color:rgba(148,163,184,.78);}
.model-stat-grid dd{margin:0;font-weight:600;color:#0f172a;font-size:.82rem;}
body[data-theme='dark'] .model-stat-grid dd{color:#e2e8f0;}
.model-chip-section{display:flex;flex-direction:column;gap:.45rem;}
.model-chip-section__title{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(71,85,105,.84);}
body[data-theme='dark'] .model-chip-section__title{color:rgba(148,163,184,.84);}
.model-chipline{display:flex;flex-wrap:wrap;gap:.45rem;}
.model-chip{display:flex;flex-direction:column;gap:.25rem;padding:.35rem .55rem;border-radius:12px;border:1px solid rgba(148,163,184,.28);background:rgba(248,250,252,.85);font-size:.72rem;color:#0f172a;min-width:0;}
body[data-theme='dark'] .model-chip{background:rgba(30,41,59,.6);border-color:rgba(148,163,184,.24);color:#e2e8f0;}
.model-chip strong{font-weight:600;}
.model-chip__meta{font-size:.65rem;opacity:.75;}
.model-chip--tag{background:rgba(191,219,254,.35);border-color:rgba(147,197,253,.55);}
body[data-theme='dark'] .model-chip--tag{background:rgba(37,99,235,.16);border-color:rgba(96,165,250,.35);}
.model-chip--object{background:rgba(165,180,252,.3);border-color:rgba(129,140,248,.45);}
body[data-theme='dark'] .model-chip--object{background:rgba(99,102,241,.22);border-color:rgba(129,140,248,.35);}
.model-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;}
.model-meta-card{background:rgba(248,250,252,.82);border:1px solid rgba(148,163,184,.24);border-radius:14px;padding:.75rem .9rem;display:flex;flex-direction:column;gap:.45rem;}
body[data-theme='dark'] .model-meta-card{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.22);}
.model-meta-card h6{margin:0;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(71,85,105,.9);}
body[data-theme='dark'] .model-meta-card h6{color:rgba(226,232,240,.86);}
.model-meta-card__body{font-size:.8rem;color:#0f172a;}
body[data-theme='dark'] .model-meta-card__body{color:#e2e8f0;}
.model-timings{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;}
.model-timings li{display:flex;justify-content:space-between;gap:.65rem;color:#111827;}
body[data-theme='dark'] .model-timings li{color:#e2e8f0;}
.model-simple-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.4rem .7rem;margin:0;}
.model-simple-list dt{font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(71,85,105,.75);margin:0 0 .15rem;}
body[data-theme='dark'] .model-simple-list dt{color:rgba(148,163,184,.78);}
.model-simple-list dd{margin:0;font-size:.78rem;font-weight:600;color:#0f172a;}
body[data-theme='dark'] .model-simple-list dd{color:#e2e8f0;}
.model-meta-code{font-size:.68rem;margin-left:.3rem;opacity:.75;}
.model-raw{border:1px solid rgba(148,163,184,.32);border-radius:12px;padding:.75rem .9rem;background:rgba(248,250,252,.78);font-size:.78rem;color:#0f172a;}
body[data-theme='dark'] .model-raw{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.25);color:#e2e8f0;}
.model-raw summary{cursor:pointer;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:.72rem;}
.model-raw pre{margin:.55rem 0 0;max-height:260px;overflow:auto;font-size:.7rem;line-height:1.45;background:rgba(15,23,42,.9);color:#e2e8f0;padding:.75rem;border-radius:10px;}
body[data-theme='dark'] .model-raw pre{background:rgba(9,13,23,.9);}
@media (max-width:640px){
	.model-stat-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
	.model-meta-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
}
.result-gallery__thumb.is-active { box-shadow:0 0 0 2px rgba(59,130,246,.75); transform:translateY(-2px); }
body[data-theme='dark'] .result-gallery__thumb img { border-color:rgba(255,255,255,.15); }
body[data-theme='dark'] .result-gallery__thumb.is-active { box-shadow:0 0 0 2px rgba(96,165,250,.85); }

.pricing-summary { display:flex; flex-wrap:wrap; gap:.4rem; margin:0.5rem 0 0; }
.pricing-summary__chip { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .55rem; border-radius:14px; background:rgba(148,163,184,.15); font-size:.78rem; font-weight:600; letter-spacing:.03em; color:rgba(51,65,85,.92); }
.pricing-summary__chip strong { font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; }
.pricing-summary__chip.muted { color:rgba(71,85,105,.78); }
body[data-theme='dark'] .pricing-summary__chip { background:rgba(255,255,255,.08); color:rgba(226,233,243,.88); }
body[data-theme='dark'] .pricing-summary__chip.muted { color:rgba(203,213,225,.75); }
.pricing-cards { display:none; gap:.85rem; margin-top:.8rem; }
.pricing-card { background:rgba(255,255,255,.85); border:1px solid rgba(148,163,184,.35); border-radius:16px; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.65rem; box-shadow:0 10px 26px -18px rgba(15,23,42,.6); }
.pricing-card.is-best { border-color:#2563eb; box-shadow:0 12px 30px -18px rgba(37,99,235,.55); }
.pricing-card__header { display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-size:.8rem; }
.pricing-card__source { font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(71,85,105,.9); }
.pricing-card__price { display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:1rem; color:#1d4ed8; }
.pricing-card__badge { display:inline-flex; align-items:center; justify-content:center; width:32px; height:20px; border-radius:999px; background:#dbeafe; color:#1d4ed8; font-size:.6rem; font-weight:700; letter-spacing:.08em; }
.pricing-card__title { font-size:.92rem; font-weight:600; margin:0; line-height:1.35; color:rgba(30,41,59,.92); }
.pricing-card__meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem .6rem; margin:0; }
.pricing-card__meta dt { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(100,116,139,.85); font-weight:600; }
.pricing-card__meta dd { margin:0; font-size:.82rem; color:rgba(30,41,59,.9); font-weight:600; }
.pricing-card__actions { margin-top:.35rem; }
.pricing-card__link { font-size:.78rem; font-weight:600; color:#2563eb; }
body[data-theme='dark'] .pricing-card { background:linear-gradient(150deg,rgba(28,36,46,.82),rgba(20,26,34,.68)); border-color:rgba(148,163,184,.22); box-shadow:0 12px 34px -20px rgba(0,0,0,.75); }
body[data-theme='dark'] .pricing-card__source { color:rgba(226,233,243,.75); }
body[data-theme='dark'] .pricing-card__title { color:rgba(226,233,243,.92); }
body[data-theme='dark'] .pricing-card__meta dt { color:rgba(148,163,184,.7); }
body[data-theme='dark'] .pricing-card__meta dd { color:rgba(226,233,243,.92); }
body[data-theme='dark'] .pricing-card__price { color:#93c5fd; }
body[data-theme='dark'] .pricing-card__badge { background:rgba(147,197,253,.18); color:#bfdbfe; }
body[data-theme='dark'] .pricing-card__link { color:#93c5fd; }
.result-filename { font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:80%; }
.remove-btn, .remove-preview { position:absolute; top:10px; right:10px; }
.preview-container { position:relative; margin:6px; }
.card-pair-preview { display:flex; flex-direction:column; align-items:center; gap:.65rem; padding:.85rem .9rem 1rem; border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 18px 36px -26px rgba(15,23,42,.55); border:1px solid rgba(148,163,184,.35); width:200px; max-width:100%; transition:transform .2s ease, box-shadow .2s ease; }
.card-pair-preview:hover { transform:translateY(-2px); box-shadow:0 24px 42px -26px rgba(15,23,42,.55); }
.card-pair-preview .remove-preview { top:12px; right:12px; }
.preview-img { max-width:160px; width:100%; border:1px solid rgba(148,163,184,.4); border-radius:14px; box-shadow:0 10px 20px -14px rgba(15,23,42,.45); }
.preview-meta-controls { display:flex; flex-direction:column; align-items:stretch; gap:.45rem; width:100%; background:rgba(226,232,240,.55); border-radius:14px; padding:.65rem .7rem .75rem; backdrop-filter:blur(4px); }
.preview-file-name { font-size:.78rem; font-weight:600; color:rgba(30,41,59,.88); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-controls-row { display:flex; flex-wrap:wrap; gap:.55rem; }
.preview-control { flex:1 1 120px; display:flex; flex-direction:column; gap:.2rem; min-width:120px; }
.preview-label { margin:0; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:rgba(71,85,105,.88); }
.preview-side-select,
.preview-pair-select { font-size:.82rem; padding:.35rem .55rem; border-radius:10px; border:1px solid rgba(148,163,184,.45); background:#fff; color:rgba(30,41,59,.9); box-shadow:0 10px 24px -18px rgba(15,23,42,.45); transition:border-color .2s ease, box-shadow .2s ease; }
.preview-side-select:focus,
.preview-pair-select:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.18); outline:none; }
.preview-side-select option,
.preview-pair-select option { font-size:.86rem; }
.preview-meta-controls .form-select-sm { padding:.35rem .55rem; }
.preview-meta-controls .form-label-sm { font-size:.68rem; }
body[data-theme='dark'] .card-pair-preview { background:linear-gradient(160deg,rgba(30,41,59,.92),rgba(17,25,40,.88)); border-color:rgba(148,163,184,.22); box-shadow:0 22px 45px -32px rgba(0,0,0,.8); }
body[data-theme='dark'] .card-pair-preview:hover { box-shadow:0 26px 52px -28px rgba(12,20,33,.85); }
body[data-theme='dark'] .preview-img { border-color:rgba(148,163,184,.3); box-shadow:0 14px 32px -26px rgba(0,0,0,.85); }
body[data-theme='dark'] .preview-meta-controls { background:rgba(30,41,59,.65); }
body[data-theme='dark'] .preview-label { color:rgba(203,213,225,.88); }
body[data-theme='dark'] .preview-file-name { color:rgba(226,233,243,.92); }
body[data-theme='dark'] .preview-side-select,
body[data-theme='dark'] .preview-pair-select { background:rgba(15,23,42,.92); color:rgba(226,233,243,.92); border-color:rgba(148,163,184,.25); box-shadow:none; }
body[data-theme='dark'] .preview-side-select:focus,
body[data-theme='dark'] .preview-pair-select:focus { border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.22); }
.result-img { max-width:190px; margin-bottom:12px; cursor:pointer; border:1px solid rgba(255,255,255,.4); border-radius:14px; transition:transform .25s ease, box-shadow .25s; box-shadow:0 4px 14px -4px rgba(0,0,0,.35); }
body[data-theme='dark'] .result-img { border-color:rgba(255,255,255,.15); }
.result-img:hover { transform:scale(1.08); box-shadow:0 6px 22px -6px rgba(0,0,0,.55); }
.result-large { max-width:320px; width:auto; height:auto; }
/* Unified thumbnail sizing (smaller) */
.thumb { max-width:90px; max-height:130px; width:auto; height:auto; object-fit:cover; }
.thumb:hover { transform:scale(1.4); z-index:5; box-shadow:0 4px 10px rgba(0,0,0,.35); }
/* Skeletons */
.skeleton-card { overflow:hidden; }
.skeleton-thumb { width:80px; height:110px; background:#dfe5ea; border-radius:6px; margin-bottom:.5rem; }
body[data-theme='dark'] .skeleton-thumb { background:#2e3b44; }
.skeleton-lines { display:flex; flex-direction:column; gap:.4rem; }
.skeleton-lines .line { height:10px; border-radius:4px; background:#dfe5ea; }
body[data-theme='dark'] .skeleton-lines .line { background:#2e3b44; }
.line.w-50{ width:50%; } .line.w-75{ width:75%; } .line.w-40{ width:40%; } .line.w-60{ width:60%; }
.shimmer { position:relative; overflow:hidden; }
.shimmer:after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.65) 45%, rgba(255,255,255,0) 80%); transform:translateX(-100%); animation:shimmer 1.6s linear infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }

/* Pricing table enhancements */
.pricing-table-wrapper { position:relative; margin-top:.5rem; }
.pricing-table-scroll { max-width:100%; overflow-x:auto; }
.pricing-table-wrapper.no-scroll { overflow-x:visible; }
.pricing-table-wrapper.no-scroll table.pricing-fit { table-layout:auto; width:100%; }
.pricing-table-wrapper.no-scroll table.pricing-fit th, .pricing-table-wrapper.no-scroll table.pricing-fit td { white-space:normal; }
.pricing-table-wrapper.no-scroll table.pricing-fit th { min-width:40px; }
.pricing-auto-wrap th, .pricing-auto-wrap td { white-space:normal; }
.pricing-table-wrapper table { font-size:0.85rem; }
.pricing-table-wrapper thead th { background:#f5f7fa; white-space:nowrap; }
.pricing-table-wrapper tbody td { vertical-align:middle; }
.pricing-table-wrapper .best-price-row { background: #e6ffe9; font-weight:600; }
.pricing-table-wrapper .price-badge { font-size:10px; margin-left:4px; padding:2px 4px; border-radius:3px; background:#0d6efd; color:#fff; }
.pricing-table-wrapper .source-cell { font-weight:500; }
.result-img:hover { transform:scale(1.08); }
.no-wrap-table th, .no-wrap-table td { white-space:nowrap; }
.drop-area { border:2px dashed #bbb; padding:25px; text-align:center; border-radius:10px; cursor:pointer; transition:background .2s,border-color .2s; background:#fafafa; }
.drop-area.dragover { background:#e8f4ff; border-color:#2196f3; }
.hidden-input { display:none; }
.initially-hidden { display:none !important; }
.wizard-step { display:none; }
.wizard-step.active { display:block; }
.auto-width { width:auto; display:inline-block; }
.icon-heart { vertical-align: middle; }
.theme-toggle { position:fixed; top:12px; right:12px; background:#fff; width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow:0 2px 8px rgba(0,0,0,.15); cursor:pointer; z-index:1100; transition:background .25s,border-color .25s; }
body[data-theme='dark'] .theme-toggle { background:#222; color:#eee; }
body[data-theme='dark'] { background:#121212; color:#e0e0e0; }
body[data-theme='dark'] .result-card { background:#1e1e1e; box-shadow:0 2px 6px rgba(0,0,0,.6); }
body[data-theme='dark'] .main-content, body[data-theme='dark'] main.main-content { background:linear-gradient(170deg,#0e1114,#161b21 40%,#101418); }
body[data-theme='dark'] .wizard-step, body[data-theme='dark'] .upload-grid { background:transparent; }
body[data-theme='dark'] .result-card { background:linear-gradient(145deg,#141a1f,#101518); border:1px solid #20282f; }
body.compact-mode[data-theme='dark'] .result-card { background:linear-gradient(145deg,#141a1f,#12171c); }
body.grid-packed[data-theme='dark'] .result-card { background:linear-gradient(155deg,#141a1f,#151b21); }
body[data-theme='dark'] .stepper .step { background:#14191f; }
body[data-theme='dark'] .drop-area { background:#14191f; border-color:#27323b; }
body[data-theme='dark'] .card-edit-form { background:#14191f; border-color:#24303a; }
body[data-theme='dark'] .card-edit-form .form-control { background:#1b2229; border-color:#2d3943; color:#d5dbe1; }
body[data-theme='dark'] input, body[data-theme='dark'] select, body[data-theme='dark'] textarea { background:#1b2229; color:#d5dbe1; border-color:#2d3943; }
body[data-theme='dark'] .btn-outline-secondary { color:#cfd6dc; border-color:#35424d; }
body[data-theme='dark'] .btn-outline-secondary:hover { background:#35424d; color:#fff; }
body[data-theme='dark'] .pricing-overlay-inner { background:#12171c; }
.stepper { display:flex; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.stepper .step { position:relative; display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem; background:#fff; border-radius:30px; font-size:.9rem; box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:default; }
body[data-theme='dark'] .stepper .step { background:#1e1e1e; }
.stepper .step .step-index { width:26px; height:26px; line-height:26px; text-align:center; border-radius:50%; background:#e0e0e0; font-weight:600; font-size:.75rem; }
.stepper .step.active .step-index { background:#1976d2; color:#fff; }
.stepper .step.completed .step-index { background:#2e7d32; color:#fff; }
.floating-actions { position:fixed; bottom:20px; right:20px; display:flex; gap:.5rem; background:rgba(255,255,255,.9); padding:.75rem 1rem; border-radius:14px; box-shadow:0 4px 20px rgba(0,0,0,.15); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
body[data-theme='dark'] .floating-actions { background:rgba(30,30,30,.9); }
#cardCountBadge { display:inline-block; }
@media (max-width:576px){ .wizard-step h3 { font-size:1.2rem; } .drop-area{ padding:15px; } }
/* Sidebar content offset handled globally in responsive.css (--gsp-sidebar-w,
   1200px breakpoint). Removed the old 280px/769px page rule that conflicted. */
.fade-slide-enter { animation: fadeSlide .45s ease both; }
@keyframes fadeSlide { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.toast-container { position:fixed; top:1rem; right:1rem; z-index:2000; display:flex; flex-direction:column; gap:.5rem; }
.app-toast { background:#323232; color:#fff; padding:.75rem 1rem; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.3); font-size:.85rem; display:flex; align-items:center; gap:.5rem; animation: toastIn .35s ease; }
.app-toast.success { background:#2e7d32; }
.app-toast.error { background:#c62828; }
@keyframes toastIn { from { opacity:0; transform:translateY(-6px);} to { opacity:1; transform:translateY(0);} }
.app-toast button { background:transparent; border:none; color:#fff; cursor:pointer; font-size:1rem; line-height:1; }
body[data-theme='dark'] .app-toast { background:#222; }
.lazy-img { filter:blur(6px); transition:filter .4s ease; }
.lazy-img.loaded { filter:blur(0); }
:focus-visible { outline:3px solid #1976d2; outline-offset:2px; }
/* Identification & Grading polish */
/* Heading upscale */
.result-card h6 { font-weight:600; letter-spacing:.6px; text-transform:uppercase; font-size:.82rem; opacity:.9; margin:0 0 .45rem; }
body.compact-mode .result-card h6 { font-size:.65rem; margin-bottom:.25rem; }
body.grid-packed .result-card h6 { font-size:.6rem; margin-bottom:.22rem; }
.result-card ul { list-style:none; padding-left:0; margin:0 0 .45rem; font-size:.72rem; }
.result-card ul li { display:flex; gap:.3rem; line-height:1.05rem; }
body.compact-mode .result-card ul { font-size:.68rem; }
body.grid-packed .result-card ul { font-size:.64rem; }
.result-card ul li .label { font-weight:600; color:#607d8b; min-width:62px; }
body[data-theme='dark'] .result-card ul li .label { color:#90a4ae; }
.ident-chip { display:inline-block; background:#eef3f7; color:#34495e; padding:2px 6px; margin:2px 4px 0 0; border-radius:12px; font-size:.6rem; font-weight:600; letter-spacing:.05em; }
body[data-theme='dark'] .ident-chip { background:#2a3842; color:#cfd8dc; }
.grade-row { align-items:center; }
.grade-label { font-weight:600; color:#546e7a; min-width:70px; }
body[data-theme='dark'] .grade-label { color:#90a4ae; }
/* Grade pill upscale */
.grade-pill { display:inline-block; min-width:48px; text-align:center; font-size:.7rem; font-weight:600; padding:6px 10px; border-radius:20px; background:linear-gradient(145deg,#eceff1,#dfe5e9); color:#2b3941; box-shadow:0 2px 4px rgba(0,0,0,.16); }
body[data-theme='dark'] .grade-pill { background:linear-gradient(145deg,#2c3942,#1f272d); color:#e2ecf2; }
body.compact-mode .grade-pill { min-width:34px; font-size:.55rem; }
body.grid-packed .grade-pill { min-width:30px; font-size:.5rem; }
.grade-pill.grade-high { background:#2e7d32; color:#fff; }
.grade-pill.grade-med { background:#f9a825; color:#222; }
.grade-pill.grade-low { background:#ef5350; color:#fff; }
.grade-pill.grade-na { background:#cfd8dc; color:#546e7a; }
body[data-theme='dark'] .grade-pill { background:#37474f; color:#eceff1; }
body[data-theme='dark'] .grade-pill.grade-high { background:#1b5e20; }
body[data-theme='dark'] .grade-pill.grade-med { background:#ffb300; color:#222; }
body[data-theme='dark'] .grade-pill.grade-low { background:#c62828; }
body[data-theme='dark'] .grade-pill.grade-na { background:#455a64; }
.pricing-header { border-top:1px solid #e0e6eb; padding-top:.35rem; margin-top:.5rem; }
body[data-theme='dark'] .pricing-header { border-color:#2d3c47; }
.pricing-table-wrapper { background:#fafcfe; border:1px solid #e1e7ec; border-radius:8px; padding:.5rem .5rem .4rem; }
body[data-theme='dark'] .pricing-table-wrapper { background:#1c242b; border-color:#2d3c47; }
/* Dark mode refinement additions */
body[data-theme='dark'] { --dm-bg:#161a1f; --dm-surface:#1f242a; --dm-border:#2d3c47; --dm-text:#d3d9df; --dm-subtle:#7b8894; }
body[data-theme='dark'] main.main-content{ background:linear-gradient(145deg,#161a1f,#1b2026); }
main.main-content .container-fluid, .main-content .container-fluid { max-width:1800px; }
body.grid-packed #resultsContainer.results-grid { justify-items:stretch; }
body[data-theme='dark'] .result-card.glass{ background:linear-gradient(150deg,rgba(31,36,42,.78),rgba(31,36,42,.58)); }
body[data-theme='dark'] .panel-header h6{ color:var(--dm-text); }
body[data-theme='dark'] .ia-value{ color:var(--dm-text); }
body[data-theme='dark'] .ia-label{ color:var(--dm-subtle); }
body[data-theme='dark'] .ident-chip{ background:#2b3944; color:#e2e8ef; }
body[data-theme='dark'] .pricing-header h6{ color:var(--dm-subtle); }
body[data-theme='dark'] .result-filename{ color:var(--dm-text); }
body[data-theme='dark'] .quick-actions .btn-outline-secondary{ border-color:#3a4650; color:#cfd5da; }
body[data-theme='dark'] .quick-actions .btn-outline-secondary:hover{ background:#3a4650; color:#fff; }
/* Utility highlight & panel block compaction */
.flash-highlight { animation:flashPulse 1.2s ease 0s 2; }
@keyframes flashPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(33,150,243,.0);} 50%{ box-shadow:0 0 0 4px rgba(33,150,243,.35);} }
.panel-block { background:transparent; transition:background .25s; border-radius:10px; }
body[data-theme='dark'] .panel-block:hover { background:rgba(255,255,255,.03); }
/* Remove section rails (glass columns) */
.result-horizontal { display:flex; gap:.9rem; }
.result-horizontal .rh-section { background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; }
.result-horizontal .rh-section .panel-header { background:transparent; box-shadow:none; padding:0 0 .25rem 0; }
.result-horizontal .rh-section .panel-header h6 { font-size:.6rem; opacity:.7; }
.result-horizontal .image-frame { padding:0; background:transparent; box-shadow:none; }
.result-horizontal .rh-section + .rh-section { border-left:1px solid rgba(255,255,255,.05); padding-left:.9rem !important; }
body[data-theme='dark'] .result-horizontal .rh-section + .rh-section { border-color:rgba(255,255,255,.06); }
body.grid-packed .result-horizontal { display:none; }
/* Packed grid condensed card */
body.grid-packed .result-horizontal { display:none; }
body.grid-packed .packed-card { display:flex; gap:.55rem; align-items:flex-start; }
body.grid-packed .packed-card { background:transparent; }
body.grid-packed .packed-card .pc-img-col { display:flex; flex-direction:column; gap:.35rem; }
body.grid-packed .pc-main-img { max-width:86px; border-radius:8px; box-shadow:0 4px 12px -4px rgba(0,0,0,.5); }
body.grid-packed .packed-card .pc-core { flex:1; display:flex; flex-direction:column; gap:.22rem; }
body.grid-packed .packed-card .pc-line { line-height:1.05; }
body.grid-packed .packed-card .pc-name { font-size:.62rem; font-weight:600; display:flex; align-items:center; gap:.35rem; }
body.grid-packed .packed-card .pc-ident { display:flex; flex-wrap:wrap; gap:.25rem; }
body.grid-packed .packed-card .pc-grades { font-size:.55rem; }
body.grid-packed .packed-card .pc-pricing { font-size:.55rem; display:flex; gap:.25rem; flex-wrap:wrap; }
body.grid-packed .price-chip { background:var(--accent-color-faint); color:var(--accent-color); padding:2px 6px; border-radius:12px; font-size:.55rem; font-weight:600; letter-spacing:.03em; }
body.grid-packed .grade-badge-small { background:#1b5e20; color:#fff; font-size:.55rem; padding:2px 6px; border-radius:12px; font-weight:600; }
body.grid-packed .result-card { padding:.5rem .55rem .55rem; }
body.grid-packed .result-card h5.result-filename { display:none; }
body.grid-packed .result-card .quick-actions { display:none; }
body.grid-packed .result-card .card-select-checkbox, body.grid-packed .result-card .remove-btn, body.grid-packed .result-card .edit-inline-btn { transform:scale(.8); }
body.grid-packed .result-card .remove-btn { top:8px; right:8px; }
.result-card .remove-btn { top:10px; right:10px; z-index:6; padding:4px 12px; line-height:1.15; font-size:.7rem; border-radius:22px; font-weight:600; letter-spacing:.05em; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); background:rgba(210,60,75,.85); border:1px solid rgba(255,255,255,.25); box-shadow:0 4px 14px -4px rgba(0,0,0,.5); }
body[data-theme='dark'] .result-card .remove-btn { background:#962a37; border:none; }
body[data-theme='dark'] .result-card .remove-btn:hover { background:#b03544; }
.edit-inline-btn { position:absolute; top:10px; left:10px; z-index:6; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(10px) saturate(180%); backdrop-filter:blur(10px) saturate(180%); border:1px solid rgba(255,255,255,.35); padding:4px 12px; font-size:.7rem; font-weight:600; border-radius:22px; letter-spacing:.05em; cursor:pointer; transition:background .25s,box-shadow .25s, transform .2s; box-shadow:0 4px 14px -4px rgba(0,0,0,.4); }
body[data-theme='dark'] .edit-inline-btn { background:rgba(55,64,72,.65); border:1px solid rgba(255,255,255,.08); color:#d2dde2; }
.edit-inline-btn:hover { box-shadow:0 6px 22px -6px rgba(0,0,0,.55); transform:translateY(-1px); }
/* Liquid grid layout */
.result-liquid-grid { display:grid; grid-template-areas: 'img ident pricing' 'img grading grading'; grid-template-columns: 130px 1fr 1fr; gap:1rem; align-items:start; }
body.compact-mode .result-liquid-grid { gap:.75rem; }
.result-liquid-grid .rlg-section { position:relative; }
.result-liquid-grid .rlg-image { grid-area: img; }
.result-liquid-grid .rlg-ident { grid-area: ident; }
.result-liquid-grid .rlg-pricing { grid-area: pricing; }
.result-liquid-grid .rlg-grading { grid-area: grading; }
.result-liquid-grid .rlg-wide { grid-column:2 / span 2; }
/* Upscaled liquid glass tile */
.liquid-tile { background:rgba(255,255,255,.50); -webkit-backdrop-filter:blur(18px) saturate(190%) contrast(110%); backdrop-filter:blur(18px) saturate(190%) contrast(110%); border:1px solid rgba(255,255,255,.45); border-radius:22px; padding:1rem .95rem 1.05rem; box-shadow:0 12px 48px -14px rgba(0,0,0,.28),0 4px 18px -8px rgba(0,0,0,.22); }
body[data-theme='dark'] .liquid-tile { background:linear-gradient(145deg,rgba(30,38,46,.72),rgba(20,26,32,.58)); border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 34px -12px rgba(0,0,0,.7),0 2px 10px -4px rgba(0,0,0,.55); }
.result-liquid-grid .panel-header.mini { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.result-liquid-grid .panel-header.mini h6 { font-size:.9rem; letter-spacing:.07em; opacity:.92; text-transform:uppercase; }
.result-liquid-grid .panel-header.mini button.btn { font-size:.65rem; padding:4px 8px; border-radius:14px; }
.result-liquid-grid .pricing-wrapper table { font-size:.8rem; }
.result-liquid-grid .pricing-wrapper table td, .result-liquid-grid .pricing-wrapper table th { padding:.45rem .55rem; }
.result-liquid-grid .grading-wrapper { font-size:.85rem; }
.larger-text .ia-label { font-size:.75rem; }
.larger-text .ia-value { font-size:.86rem; }
body.compact-mode .larger-text .ia-value { font-size:.8rem; }
/* High resolution screens further scaling */
@media (min-width:1400px){
	.result-liquid-grid .pricing-wrapper table { font-size:.85rem; }
	.result-liquid-grid .grading-wrapper { font-size:.9rem; }
	.larger-text .ia-label { font-size:.8rem; }
	.larger-text .ia-value { font-size:.92rem; }
}
/* Futuristic grading orb system */
.grading-orbular { display:flex; gap:1.75rem; align-items:stretch; }
.grading-orbular .go-left { flex:0 0 auto; display:flex; align-items:center; }
.grading-orbular .go-right { flex:1; display:flex; flex-direction:column; gap:.85rem; justify-content:center; }
.grade-orb { position:relative; width:140px; height:140px; border-radius:50%; display:flex; align-items:center; justify-content:center; --orb-accent:var(--grade-accent,#2196f3); }
.grade-orb:before { content:""; position:absolute; inset:0; padding:3px; border-radius:50%; background:conic-gradient(var(--orb-accent) calc(var(--val,0)*1%), rgba(255,255,255,0) 0); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude; filter:blur(.5px); opacity:.85; animation:orbSpin 12s linear infinite; }
.grade-orb:after { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.35) 55%,rgba(255,255,255,.1) 70%,rgba(255,255,255,0) 80%), linear-gradient(155deg,rgba(255,255,255,.35),rgba(255,255,255,.08)); box-shadow:0 18px 48px -12px rgba(0,0,0,.55),0 4px 18px -6px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.4); }
body[data-theme='dark'] .grade-orb:after { background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.3),rgba(255,255,255,.08) 55%,rgba(255,255,255,.02) 70%,rgba(255,255,255,0) 80%), linear-gradient(155deg,rgba(40,46,52,.85),rgba(25,30,35,.55)); box-shadow:0 22px 54px -16px rgba(0,0,0,.9),0 6px 24px -10px rgba(0,0,0,.65), inset 0 0 0 2px rgba(255,255,255,.05); }
.grade-orb .orb-core { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
.grade-orb .orb-value { font-size:2.45rem; font-weight:700; letter-spacing:.05em; line-height:1; text-shadow:0 3px 12px rgba(0,0,0,.3); }
body[data-theme='dark'] .grade-orb .orb-value { text-shadow:0 4px 14px rgba(0,0,0,.7); }
.grade-orb .orb-caption { margin-top:.3rem; font-size:.7rem; letter-spacing:.12em; font-weight:600; opacity:.7; text-transform:uppercase; }
.grade-orb.tier-high { --orb-accent:#2e7d32; }
.grade-orb.tier-med { --orb-accent:#f9a825; }
.grade-orb.tier-low { --orb-accent:#ef5350; }
.grade-orb.tier-na { --orb-accent:#90a4ae; }
/* Discrete progress buckets to avoid inline style (CSP friendly) */
.grade-orb,.sub-orb { --val:0; }
/* 0..100 in 10% increments */
.pv-0 { --val:0; }
.pv-10 { --val:.10; }
.pv-20 { --val:.20; }
.pv-30 { --val:.30; }
.pv-40 { --val:.40; }
.pv-50 { --val:.50; }
.pv-60 { --val:.60; }
.pv-70 { --val:.70; }
.pv-80 { --val:.80; }
.pv-90 { --val:.90; }
.pv-100 { --val:1; }
@keyframes orbSpin { to { transform:rotate(360deg); } }
.sub-orbs { display:flex; flex-wrap:wrap; gap:.6rem .75rem; }
.sub-orb { position:relative; width:96px; height:96px; border-radius:22px; padding:.55rem .6rem .6rem; background:linear-gradient(140deg,rgba(255,255,255,.65),rgba(255,255,255,.35)); -webkit-backdrop-filter:blur(14px) saturate(180%); backdrop-filter:blur(14px) saturate(180%); border:1px solid rgba(255,255,255,.45); box-shadow:0 10px 40px -14px rgba(0,0,0,.3),0 4px 14px -6px rgba(0,0,0,.25); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; overflow:hidden; }
body[data-theme='dark'] .sub-orb { background:linear-gradient(155deg,rgba(45,54,62,.78),rgba(30,38,46,.55)); border-color:rgba(255,255,255,.08); box-shadow:0 14px 44px -16px rgba(0,0,0,.85),0 6px 18px -8px rgba(0,0,0,.6); }
.sub-orb:before { content:""; position:absolute; inset:0; background:conic-gradient(var(--sub-accent,#2196f3) calc(var(--val,0)*1%), rgba(255,255,255,0) 0); opacity:.9; mix-blend-mode:overlay; animation:orbSpin 14s linear infinite reverse; }
.sub-orb:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 28% 25%,rgba(255,255,255,.9),rgba(255,255,255,.25) 55%,rgba(255,255,255,.1) 70%,rgba(255,255,255,0) 80%); }
body[data-theme='dark'] .sub-orb:after { background:radial-gradient(circle at 28% 25%,rgba(255,255,255,.35),rgba(255,255,255,.06) 55%,rgba(255,255,255,.02) 70%,rgba(255,255,255,0) 80%); }
.sub-orb .sub-orb-ring { position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px rgba(255,255,255,.45); }
body[data-theme='dark'] .sub-orb .sub-orb-ring { box-shadow:inset 0 0 0 2px rgba(255,255,255,.08); }
.sub-orb .sub-orb-val { position:relative; z-index:2; font-size:1.35rem; font-weight:600; line-height:1; margin-top:.15rem; letter-spacing:.04em; text-shadow:0 2px 8px rgba(0,0,0,.25); }
body[data-theme='dark'] .sub-orb .sub-orb-val { text-shadow:0 3px 10px rgba(0,0,0,.65); }
.sub-orb .sub-orb-label { position:relative; z-index:2; margin-top:auto; font-size:.58rem; letter-spacing:.15em; font-weight:600; opacity:.7; text-transform:uppercase; }
.sub-orb.tier-high { --sub-accent:#2e7d32; }
.sub-orb.tier-med { --sub-accent:#f9a825; }
.sub-orb.tier-low { --sub-accent:#ef5350; }
.sub-orb.tier-na { --sub-accent:#90a4ae; }
.grade-condition { font-size:.7rem; letter-spacing:.08em; font-weight:600; opacity:.65; text-transform:uppercase; margin-top:.25rem; }
/* Deep-dive grading additions */
.grade-orb .grade-spark { width:90px; height:24px; margin-top:.4rem; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
body[data-theme='dark'] .grade-orb .grade-spark { opacity:.85; }
.grade-orb .grade-spark polyline { fill:none; stroke:var(--orb-accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; opacity:.9; }
.sub-orb-segs { position:absolute; inset:0; display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); pointer-events:none; mix-blend-mode:overlay; }
.sub-orb-segs .seg { border:1px solid rgba(255,255,255,.35); margin:2px; border-radius:6px; opacity:.25; animation:segPulse 6s ease-in-out infinite; }
.sub-orb-segs .seg.s1 { animation-delay:1.2s; }
.sub-orb-segs .seg.s2 { animation-delay:2.4s; }
.sub-orb-segs .seg.s3 { animation-delay:3.6s; }
@keyframes segPulse { 0%,100%{ opacity:.2; } 50%{ opacity:.55; } }
.grade-stats { display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:.35rem; }
.grade-stats .gs-label { display:block; font-size:.55rem; text-transform:uppercase; letter-spacing:.15em; opacity:.55; font-weight:600; }
.grade-stats .gs-val { display:block; font-size:.85rem; font-weight:600; letter-spacing:.05em; }
body[data-theme='dark'] .grade-stats .gs-val { color:#e0e8ee; }
.grade-orb .orb-core { align-items:center; justify-content:center; }
.grade-orb .orb-value { display:flex; align-items:center; justify-content:center; width:100%; text-align:center; }
.orb-delta { position:absolute; top:10px; right:10px; padding:4px 8px; border-radius:16px; font-size:.6rem; font-weight:600; letter-spacing:.06em; background:rgba(255,255,255,.65); -webkit-backdrop-filter:blur(6px) saturate(160%); backdrop-filter:blur(6px) saturate(160%); box-shadow:0 4px 12px -4px rgba(0,0,0,.4); }
body[data-theme='dark'] .orb-delta { background:rgba(40,48,56,.7); color:#e2e8ed; }
.orb-delta.up { color:#1b5e20; }
body[data-theme='dark'] .orb-delta.up { color:#66dd7f; }
.orb-delta.down { color:#b71c1c; }
body[data-theme='dark'] .orb-delta.down { color:#ff7b7b; }
.orb-delta.flat { color:#607d8b; }
body[data-theme='dark'] .orb-delta.flat { color:#90a4ae; }
/* Per-subgrade delta badge */
.sub-orb-delta { position:absolute; top:4px; right:4px; padding:2px 5px; font-size:.48rem; font-weight:600; letter-spacing:.05em; border-radius:10px; background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(4px) saturate(160%); backdrop-filter:blur(4px) saturate(160%); box-shadow:0 2px 6px -2px rgba(0,0,0,.35); line-height:1; }
body[data-theme='dark'] .sub-orb-delta { background:rgba(42,50,58,.8); color:#d5dde3; }
.sub-orb-delta.up { color:#1b5e20; }
body[data-theme='dark'] .sub-orb-delta.up { color:#66dd7f; }
.sub-orb-delta.down { color:#b71c1c; }
body[data-theme='dark'] .sub-orb-delta.down { color:#ff7b7b; }
.sub-orb-delta.flat { color:#546e7a; }
body[data-theme='dark'] .sub-orb-delta.flat { color:#90a4ae; }
/* Generic tooltip helper */
[data-tip]{ position:relative; }
[data-tip]:hover:after,[data-tip]:focus:after { content:attr(data-tip); position:absolute; z-index:50; bottom:100%; left:50%; transform:translate(-50%,-6px); background:rgba(20,24,28,.92); color:#e2e8ee; padding:6px 8px; border-radius:6px; font-size:.55rem; white-space:nowrap; pointer-events:none; box-shadow:0 4px 14px -4px rgba(0,0,0,.5); }
[data-tip]:hover:before,[data-tip]:focus:before { content:""; position:absolute; bottom:100%; left:50%; transform:translate(-50%,-2px); border:6px solid transparent; border-top-color:rgba(20,24,28,.92); }
.sub-orb-slider { position:absolute; left:8px; right:8px; bottom:6px; height:18px; cursor:pointer; -webkit-appearance:none; appearance:none; /* Two-layer background: filled portion + remainder */ background:linear-gradient(90deg,var(--sub-accent,#2196f3) 0,var(--sub-accent,#2196f3) calc(var(--val,0)*1%),rgba(255,255,255,.25) calc(var(--val,0)*1%),rgba(255,255,255,.25) 100%); border-radius:8px; outline:none; border:1px solid rgba(255,255,255,.4); transition:filter .25s,background-size .25s; }
body[data-theme='dark'] .sub-orb-slider { background:linear-gradient(90deg,var(--sub-accent,#2196f3) 0,var(--sub-accent,#2196f3) calc(var(--val,0)*1%),rgba(255,255,255,.12) calc(var(--val,0)*1%),rgba(255,255,255,.12) 100%); border-color:rgba(255,255,255,.12); }
.sub-orb-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--sub-accent,#2196f3); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4); cursor:pointer; }
body[data-theme='dark'] .sub-orb-slider::-webkit-slider-thumb { border-color:#1d2227; }
.sub-orb-slider::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--sub-accent,#2196f3); border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.4); cursor:pointer; }
.sub-orb { padding-bottom:2.2rem; }
.sub-orb:hover .sub-orb-slider { filter:brightness(1.1); }
.grade-actions .btn { font-size:.55rem; letter-spacing:.08em; padding:.35rem .7rem; -webkit-backdrop-filter:blur(6px) saturate(160%); backdrop-filter:blur(6px) saturate(160%); }
body[data-theme='dark'] .grade-actions .btn { background:rgba(40,48,56,.6); border-color:rgba(255,255,255,.08); color:#d5dde3; }
.grade-actions .btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px -4px rgba(0,0,0,.4); }
body[data-theme='dark'] .grade-actions .btn:hover { background:rgba(55,64,72,.7); }
@media (max-width:1000px){ .grading-orbular { flex-direction:column; align-items:flex-start; } .grade-orb { width:120px; height:120px; } .sub-orb { width:calc(50% - .6rem); flex:1 1 calc(50% - .6rem); } }
@media (max-width:640px){ .sub-orb { width:100%; height:82px; flex-direction:row; align-items:center; } .sub-orb .sub-orb-val { font-size:1.2rem; margin:0 .85rem 0 0; } .sub-orb .sub-orb-label { margin-top:0; } }
/* Extra small devices optimizations */
@media (max-width:560px){
	.result-liquid-grid { gap:.65rem; }
	.result-liquid-grid .panel-header.mini h6 { font-size:.8rem; }
	.result-liquid-grid .panel-header.mini button.btn { font-size:.6rem; padding:3px 7px; }
	.grading-orbular { flex-direction:column; align-items:stretch; }
	.grading-orbular .go-left { width:100%; justify-content:center; margin-bottom:.6rem; }
	.grading-orbular .go-right { width:100%; }
		.grading-orbular .sub-orbs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:.4rem; }
	.grading-orbular .sub-orbs::-webkit-scrollbar { height:6px; }
	.grading-orbular .sub-orbs::-webkit-scrollbar-track { background:transparent; }
	.grading-orbular .sub-orbs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.25); border-radius:4px; }
	body[data-theme='dark'] .grading-orbular .sub-orbs::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); }
	.sub-orb { min-width:140px; flex:0 0 140px; }
	.sub-orb-slider { bottom:4px; height:16px; }
		.grade-actions { position:sticky; bottom:0; background:rgba(20,24,30,.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:.4rem .5rem; margin-top:.4rem; border-radius:10px; display:flex; gap:.5rem; justify-content:space-between; }
	body[data-theme='dark'] .grade-actions { background:rgba(13,17,21,.75); }
	.grade-orb { width:130px; height:130px; }
	.orb-delta { top:6px; right:6px; }
	.result-card { padding:.75rem .7rem; }
	.result-filename { font-size:.75rem; }
	.ident-grid, .pricing-wrapper, .grading-wrapper { font-size:.85rem; }
	.thumb-stack { flex-direction:row; overflow-x:auto; max-width:100%; }
	.thumb-stack .thumb { max-width:56px; }
	.existing-results-panel { position:sticky; top:0; z-index:25; }
}
@media (max-width:430px){
	.grade-orb { width:120px; height:120px; }
	.sub-orb { min-width:130px; flex:0 0 130px; }
	.sub-orb .sub-orb-val { font-size:1.05rem; }
	.result-card .remove-btn, .result-card .edit-inline-btn { font-size:.55rem; padding:3px 6px; }
	.layout-toggle-group .btn, .grade-actions .btn { font-size:.55rem; }
	.orb-delta, .sub-orb-delta { font-size:.5rem; }
	.price-chip { font-size:.55rem; }
}
.result-liquid-grid .image-frame img { border-radius:12px; box-shadow:0 6px 18px -6px rgba(0,0,0,.5); }
.thumb-stack { margin-top:.6rem; display:flex; flex-direction:column; gap:.4rem; }
.thumb-stack .thumb { max-width:70px; }
body.compact-mode .result-liquid-grid { grid-template-columns:120px 1fr 1fr; }
@media (max-width:1200px){ .result-liquid-grid { grid-template-areas:'img ident ident' 'pricing pricing pricing' 'grading grading grading'; grid-template-columns:110px 1fr 1fr; } }
@media (max-width:820px){ .result-liquid-grid { grid-template-areas:'img' 'ident' 'pricing' 'grading'; grid-template-columns:1fr; } .result-liquid-grid .rlg-wide { grid-column:auto; } }
/* Ultra-mobile stacking refinements */
@media (max-width:600px){
	.result-liquid-grid { grid-template-areas:'img' 'grading' 'ident' 'pricing'; }
	.result-liquid-grid .rlg-section { box-shadow:0 4px 12px -6px rgba(0,0,0,.35); }
	.result-liquid-grid .rlg-image { display:flex; gap:.75rem; }
	.result-liquid-grid .rlg-image .thumb-stack { order:2; flex-direction:row; }
	.result-liquid-grid .rlg-ident, .result-liquid-grid .rlg-pricing, .result-liquid-grid .rlg-grading { padding-top:.6rem; }
	.grading-orbular .go-left { margin:0 auto .5rem; }
	.grading-orbular .sub-orbs { gap:.5rem; }
	.result-card { border-radius:18px; }
	.grading-orbular { align-items:flex-start; }
	.grading-orbular .go-right { width:100%; }
	.grading-orbular .sub-orbs { display:flex; width:100%; }
	.grading-wrapper { overflow:visible; }
}
@media (max-width:500px){
	.result-liquid-grid { gap:.55rem; }
	.result-card { padding:.65rem .6rem; }
	.panel-header.mini h6 { font-size:.75rem; }
	.panel-header.mini button.btn { padding:2px 7px; }
	.price-chip { padding:2px 6px; }
	.ident-chip { padding:2px 6px; font-size:.55rem; }
	.grading-orbular .sub-orbs { padding-bottom:.3rem; }
	.grade-orb { width:115px; height:115px; }
}
/* Accent hue & dynamic theming */
:root{ --accent-hue:210; --accent-color:hsl(var(--accent-hue) 90% 55%); --accent-color-faint:hsl(var(--accent-hue) 90% 55% / .18); --card-gap:1rem; }
body.grid-packed .result-filename { font-size:.6rem; }
body.grid-packed .ident-chip { font-size:.5rem; padding:2px 5px; }
body.grid-packed .panel-block { padding:.4rem .5rem !important; }
body.compact-mode .panel-block { padding:.55rem .65rem !important; }
.layout-toggle-group { display:inline-flex; gap:.4rem; }
.layout-toggle-group .btn { padding:.35rem .55rem; font-size:.6rem; letter-spacing:.05em; }
.dark-version, body[data-theme='dark'] { --nav-bg:#0d1115; --page-bg:#0d1115; }
body[data-theme='dark'] .navbar.navbar-main, body[data-theme='dark'] .navbar.navbar-light, body[data-theme='dark'] .navbar.navbar-transparent, body[data-theme='dark'] .navbar { background:#0d1115 !important; box-shadow:0 2px 8px -4px rgba(0,0,0,.7); }
body[data-theme='dark'] .navbar .nav-link, body[data-theme='dark'] .navbar-brand { color:#d5dbe1 !important; }
body[data-theme='dark'] .navbar .nav-link:hover { color:#fff !important; }
body[data-theme='dark'] .sidenav { background:linear-gradient(180deg,#12181e,#0d1115) !important; box-shadow: 2px 0 8px -2px rgba(0,0,0,.6); }
body[data-theme='dark'] .sidenav .nav-link { color:#c2cbd2 !important; }
body[data-theme='dark'] .sidenav .nav-link.active, body[data-theme='dark'] .sidenav .nav-link:hover { background:rgba(255,255,255,.04); color:#fff !important; border-radius:8px; }
body[data-theme='dark'] .card, body[data-theme='dark'] .card.p-3, body[data-theme='dark'] .card.p-2 { background:#14191f; border-color:#1f262c; box-shadow:0 2px 8px -2px rgba(0,0,0,.7); }
body[data-theme='dark'] .card-header { background:#14191f; border-bottom:1px solid #1f262c; }
body[data-theme='dark'] .bg-white, body[data-theme='dark'] .badge.bg-white, body[data-theme='dark'] .dropdown-menu, body[data-theme='dark'] .choices__list.choices__list--dropdown, body[data-theme='dark'] .popover, body[data-theme='dark'] .tooltip-inner { background:#1b2229 !important; color:#d5dbe1; }
body[data-theme='dark'] .text-dark { color:#d5dbe1 !important; }
body[data-theme='dark'] .border, body[data-theme='dark'] .dropdown-menu, body[data-theme='dark'] .popover { border-color:#27323b !important; }
body[data-theme='dark'] .shadow, body[data-theme='dark'] .dropdown-menu { box-shadow:0 10px 28px -10px rgba(0,0,0,.85),0 4px 16px -6px rgba(0,0,0,.6) !important; }
body[data-theme='dark'] .badge.bg-secondary { background:#27323b !important; color:#d5dbe1; }
body[data-theme='dark'] .btn-light, body[data-theme='dark'] .btn-white { background:#27323b; color:#e0e6eb; border-color:#2f3b45; }
body[data-theme='dark'] .btn-light:hover, body[data-theme='dark'] .btn-white:hover { background:#32404b; }
body[data-theme='dark'] .table { --bs-table-bg:transparent; --bs-table-striped-color:#d5dbe1; --bs-table-striped-bg:#1a2026; color:#d5dbe1; }
body[data-theme='dark'] .table thead th { background:#1d2329 !important; }
body[data-theme='dark'] .table-bordered, body[data-theme='dark'] .table-bordered>tbody>tr>td, body[data-theme='dark'] .table-bordered>thead>tr>th { border-color:#2b343c; }
body[data-theme='dark'] hr, body[data-theme='dark'] .horizontal-line { border-color:#27323b; }
body[data-theme='dark'] .dropdown-item { color:#c9d1d7; }
body[data-theme='dark'] .dropdown-item:hover { background:#22303a; color:#fff; }
body[data-theme='dark'] .form-control, body[data-theme='dark'] .form-select { background:#1b2229 !important; border-color:#2d3943 !important; color:#d5dbe1 !important; }
body[data-theme='dark'] .form-control:focus, body[data-theme='dark'] .form-select:focus { box-shadow:0 0 0 1px #0d6efd; }
body[data-theme='dark'] .choices__inner { background:#1b2229 !important; border-color:#2d3943 !important; }
body[data-theme='dark'] .choices__list--dropdown .choices__item--selectable.is-highlighted { background:#22303a; }
body[data-theme='dark'] .navbar .btn-outline-primary, body[data-theme='dark'] .btn-outline-primary { color:#7fb4ff; border-color:#215a9f; }
body[data-theme='dark'] .btn-outline-primary:hover { background:#215a9f; color:#fff; }
/* Global page background & gutter whitening removal */
html[data-theme='dark'], body[data-theme='dark'] { background:#0b1014 !important; color-scheme:dark; }
body[data-theme='dark'].bg-gray-100, body[data-theme='dark'] .bg-gray-100, body[data-theme='dark'] .bg-white, body[data-theme='dark'] .bg-light { background:#0b1014 !important; }
body[data-theme='dark'] main, body[data-theme='dark'] .main-content, body[data-theme='dark'] .content-wrapper, body[data-theme='dark'] .container-fluid, body[data-theme='dark'] .py-4, body[data-theme='dark'] .py-3 { background:linear-gradient(180deg,#0b1014,#0e1419 35%,#0b1014) !important; }
body[data-theme='dark'] .main-content { box-shadow:none; }
body[data-theme='dark'] .navbar + .main-content { border-top:1px solid #121a21; }
body[data-theme='dark'] ::-webkit-scrollbar { width:10px; }
body[data-theme='dark'] ::-webkit-scrollbar-track { background:#10171d; }
body[data-theme='dark'] ::-webkit-scrollbar-thumb { background:#1f2a32; border-radius:6px; }
body[data-theme='dark'] ::-webkit-scrollbar-thumb:hover { background:#2b3842; }
.accent-picker input[type=range]{ accent-color:var(--accent-color); }

/* Collapsible section buttons */
.btn.btn-xs{ padding:2px 6px; font-size:11px; line-height:1.1; }
.rh-section .btn-toggle-section, .rh-section .btn-load-pricing{ background:var(--accent-color-faint); border:1px solid var(--accent-color); color:var(--accent-color); border-radius:6px; }
.rh-section .btn-toggle-section:hover, .rh-section .btn-load-pricing:hover{ background:var(--accent-color); color:#fff; }
.rh-section .btn-load-pricing[data-loaded='true']{ background:var(--accent-color); color:#fff; }

/* Stagger animation for .appear */
.appear{ opacity:0; transform:translateY(4px); animation:fadeUp .4s ease forwards; animation-delay:calc(var(--stagger-index,0)*45ms); }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .appear{ animation:none; opacity:1; transform:none; } }
.staggered{ will-change:opacity,transform; }

/* Visually hidden (fallback if not present) */
.visually-hidden{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }

/* Pricing lazy placeholder */
.lazy-placeholder{ padding:.35rem .5rem; background:rgba(0,0,0,.04); border-radius:6px; font-style:italic; }
body[data-theme='dark'] .lazy-placeholder{ background:rgba(255,255,255,.06); }
.aggregates-footer{ display:flex; flex-wrap:wrap; gap:.85rem .75rem; font-size:.65rem; align-items:center; padding:.65rem .85rem; background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.5)); border:1px solid rgba(255,255,255,.6); border-radius:14px; }
body[data-theme='dark'] .aggregates-footer{ background:linear-gradient(150deg,rgba(25,30,35,.85),rgba(25,30,35,.65)); border-color:rgba(255,255,255,.05); box-shadow:0 4px 16px -6px rgba(0,0,0,.7); }
.aggregates-footer .agg-label{ font-weight:600; text-transform:uppercase; letter-spacing:.5px; opacity:.75; margin-right:.15rem; }
.aggregates-footer .agg-val{ font-weight:600; color:#0d6efd; margin-right:.85rem; }
body[data-theme='dark'] .aggregates-footer .agg-val{ color:#62a8ff; }
.aggregates-footer .agg-val.rarity{ white-space:normal; max-width:100%; flex:1 1 100%; color:#88939d; font-weight:500; }
body[data-theme='dark'] .aggregates-footer .agg-val.rarity{ color:#a0aab4; }
.aggregates-footer .agg-line{ display:flex; flex-wrap:wrap; gap:.65rem .75rem; }
.summary-inline{ display:none; }
.pricing-table-wrapper table { background:transparent; }
.pricing-table-wrapper thead th { position:sticky; top:0; z-index:2; }
.pricing-expand-btn { font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 8px; }
/* Pricing overlay expanded view */
/* Fullscreen pricing overlay */
.pricing-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:5000; display:none; padding:0; }
.pricing-overlay.open { display:block; }
.pricing-overlay-inner { position:relative; width:100%; height:100%; background:#fff; display:flex; flex-direction:column; padding:0.75rem 1rem 1rem; border-radius:0; box-shadow:0 0 0 rgba(0,0,0,0); }
.pricing-overlay-inner .pricing-overlay-header { position:sticky; top:0; background:inherit; z-index:10; padding:0 0 .5rem 0; border-bottom:1px solid #e0e6eb; display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.pricing-overlay-inner .pricing-overlay-header h5 { margin:0; font-size:1rem; }
.pricing-overlay-body { flex:1; overflow:auto; padding-top:.25rem; }
.pricing-overlay-body table { min-width:1100px; }
.pricing-overlay-body thead th { top:0; }
body[data-theme='dark'] .pricing-overlay-inner .pricing-overlay-header { border-color:#2d3c47; }
body.no-scroll { overflow:hidden; }
body[data-theme='dark'] .pricing-overlay-inner { background:#1e1e1e; }

/* Upload step new two-column layout */
.upload-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1.25rem; align-items:start; }
.upload-left, .upload-right { background:rgba(255,255,255,0.6); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid #e2e8f0; padding:1rem 1.1rem 1.1rem; border-radius:14px; box-shadow:0 4px 12px -2px rgba(0,0,0,0.05); }
body[data-theme='dark'] .upload-left, body[data-theme='dark'] .upload-right { background:#12161b; border-color:#273038; }
body[data-theme='dark'] .pricing-table-wrapper { background:#14191f; border-color:#27323b; }
body[data-theme='dark'] .pricing-table-wrapper thead th { background:#1d2329; color:#d0d6dc; }
body[data-theme='dark'] .pricing-table-wrapper tbody td { color:#c4ccd2; }
.step-heading { font-size:1rem; font-weight:600; margin-bottom:.75rem; display:flex; align-items:center; gap:.5rem; }

/* Compact mode */
body.compact-mode .upload-left, body.compact-mode .upload-right { padding:.65rem .7rem .75rem; }
body.compact-mode #wizard h3, body.compact-mode .step-heading { margin-bottom:.5rem; }
body.compact-mode .drop-area { padding:.75rem .75rem 1rem; }
body.compact-mode .drop-area p { font-size:.65rem; }
body.compact-mode .result-card { padding:.6rem .65rem .7rem; }
body.compact-mode .result-card h5 { font-size:.7rem; }
body.compact-mode .grade-pill { font-size:.55rem; padding:2px 5px; }
body.compact-mode .ident-chip { font-size:.5rem; }
body.compact-mode .pricing-table-wrapper { padding:.35rem .35rem .3rem; }
body.compact-mode .result-filename { margin-top:0; }
.btn-xs { --bs-btn-padding-y:2px; --bs-btn-padding-x:6px; --bs-btn-font-size:.6rem; }

/* Wide mode for pricing overlay */
.pricing-overlay-inner.wide .pricing-overlay-body table { min-width:1400px; }

/* Floating actions bar */
#resultsFloatingBar { position:fixed; bottom:16px; right:16px; z-index:4500; display:flex; gap:.5rem; flex-wrap:wrap; background:rgba(255,255,255,0.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:.55rem .7rem .6rem; border:1px solid #d9e2ec; border-radius:14px; box-shadow:0 6px 20px -4px rgba(0,0,0,.25); }
body[data-theme='dark'] #resultsFloatingBar { background:rgba(30,30,30,.85); border-color:#2d3c47; }
#resultsFloatingBar .btn { padding:.35rem .65rem; font-size:.65rem; }

/* Inline edit form */
.edit-card-btn { position:absolute; top:.35rem; right:.35rem; z-index:5; }
.result-card { position:relative; }
.card-edit-form { margin-top:.5rem; background:#f5f8fa; border:1px solid #e3e9ef; border-radius:10px; padding:.5rem .6rem .65rem; display:none; }
body[data-theme='dark'] .card-edit-form { background:#253039; border-color:#2d3c47; }
.card-edit-form.active { display:block; animation:fadeSlide .25s ease; }
.card-edit-form .form-control { padding:.15rem .4rem; height:1.85rem; font-size:.65rem; }
.quick-actions { display:flex; gap:.35rem; flex-wrap:wrap; margin:.35rem 0 .4rem; }
.quick-actions .btn { font-size:.55rem; padding:.25rem .45rem; }

/* Docked pricing overlay */
.pricing-overlay.docked { inset:auto; top:70px; right:12px; bottom:12px; left:auto; width:480px; max-width:50vw; border-radius:14px; }
.pricing-overlay.docked .pricing-overlay-inner { border-radius:14px; height:100%; box-shadow:0 8px 28px -4px rgba(0,0,0,.45); }
.pricing-overlay.docked .pricing-overlay-inner.wide { width:100%; }
.pricing-overlay.docked .pricing-overlay-body table { min-width:820px; }
.pricing-overlay.docked .pricing-overlay-header { cursor:move; }

/* Card selection + grade tier coloring */
.result-card { transition:box-shadow .18s ease, border-color .18s ease, background .25s; }
.result-card.selected { border:2px solid var(--bs-primary); box-shadow:0 0 0 3px rgba(25,118,210,0.25); }
.grade-tier-high { border-left:4px solid #2e7d32; }
.grade-tier-med { border-left:4px solid #f9a825; }
.grade-tier-low { border-left:4px solid #ef5350; }
body[data-theme='dark'] .result-card.selected { box-shadow:0 0 0 3px rgba(144,202,249,0.35); }
.card-select-checkbox { position:absolute; top:.35rem; left:.4rem; z-index:6; }
.edit-card-btn { right:.4rem; }
.result-card .result-filename { padding-left:1.2rem; }

/* Inline edit grid tweaks for additional grade fields */
.card-edit-form .col-6 { flex:0 0 50%; max-width:50%; }
.card-edit-form.compact-fields .col-6 { padding-right:4px; }

@media (max-width: 900px){
	#resultsFloatingBar { left:50%; transform:translateX(-50%); right:auto; }
	.pricing-overlay.docked { position:fixed; top:0; right:0; left:0; bottom:0; width:100%; max-width:none; border-radius:0; }
}

/* Sticky preview strip */
.preview-sticky { position:sticky; top:0; z-index:15; background:rgba(255,255,255,0.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); margin-bottom:.75rem; padding:.4rem .4rem .3rem; border:1px solid #e2e8f0; border-radius:10px; }
body[data-theme='dark'] .preview-sticky { background:rgba(34,34,34,0.85); border-color:#2d3c47; }

/* Existing results mini panel */
.existing-results-panel { max-height:320px; overflow:auto; font-size:.7rem; }
.existing-results-panel strong { font-size:.75rem; }
.existing-results-panel .existing-results-thumbs { max-height:220px; overflow:auto; }
.existing-results-panel img.existing-thumb { width:50px; height:70px; object-fit:cover; border:2px solid transparent; border-radius:6px; box-shadow:0 2px 4px rgba(0,0,0,.15); background:#eee; }
body[data-theme='dark'] .existing-results-panel img.existing-thumb { background:#2a2f33; }
.existing-results-panel img.existing-thumb:hover { border-color:var(--bs-primary); cursor:pointer; }
.flash-highlight { animation: flashPulse 1.2s ease-in-out 1; }
@keyframes flashPulse { 0% { box-shadow:0 0 0 0 rgba(13,110,253,.9); } 50% { box-shadow:0 0 0 10px rgba(13,110,253,0); } 100% { box-shadow:0 0 0 0 rgba(13,110,253,0); } }

/* Horizontal result layout */
.result-horizontal { display:grid; grid-template-columns:140px 1fr 1fr 1.2fr; gap:.85rem; align-items:flex-start; }
.result-horizontal .rh-section h6 { margin-top:0; font-size:.75rem; letter-spacing:.5px; text-transform:uppercase; opacity:.85; }
.result-horizontal ul { list-style:none; margin:0; padding:0; font-size:.65rem; }
.result-horizontal .rh-image img { max-width:130px; width:100%; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.result-horizontal .rh-pricing .pricing-table-wrapper { padding:.25rem .35rem; }
.result-horizontal .pricing-table-wrapper table { font-size:.55rem; }
.result-horizontal .pricing-header { margin-top:0!important; }
.result-horizontal .pricing-table-scroll { max-height:180px; }
body.compact-mode .result-horizontal { grid-template-columns:110px 1fr 1fr 1.1fr; gap:.55rem; }
@media (max-width:1100px){ .result-horizontal { grid-template-columns:120px 1fr 1fr; grid-template-areas:"img ident grading" "pricing pricing pricing"; } .result-horizontal .rh-pricing { grid-area:pricing; } }
@media (max-width:800px){ .result-horizontal { display:block; } }

/* Futuristic glass / dynamic panels */
.glass-stack { position:relative; }
.glass-tile { background:linear-gradient(135deg,rgba(255,255,255,0.72),rgba(255,255,255,0.45)); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(255,255,255,0.6); box-shadow:0 4px 18px -4px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,0.3); border-radius:18px; padding:.55rem .65rem .6rem; position:relative; overflow:hidden; }
body[data-theme='dark'] .glass-tile { background:linear-gradient(155deg,rgba(28,31,36,0.82),rgba(28,31,36,0.60) 42%,rgba(28,31,36,0.48)); border-color:rgba(255,255,255,0.06); box-shadow:0 6px 28px -8px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,0.04), 0 0 0 1px rgba(255,255,255,0.02); }
.glass-tile:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 15% 20%, rgba(255,255,255,.55),rgba(255,255,255,0)); pointer-events:none; }
.glass-tile.depth-1 { z-index:1; }
.panel-header { display:flex; align-items:center; gap:.4rem; margin:-.15rem 0 .4rem; font-size:.65rem; letter-spacing:.6px; text-transform:uppercase; opacity:.85; }
.panel-header .ph-dot { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#0d6efd,#6c2bd9); box-shadow:0 0 0 2px rgba(13,110,253,.25); }
body[data-theme='dark'] .panel-header .ph-dot { box-shadow:0 0 0 2px rgba(13,110,253,.4); }
.ident-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.4rem .55rem; }
.id-attr { position:relative; padding:.4rem .45rem .45rem; border:1px solid rgba(0,0,0,0.06); border-radius:10px; background:linear-gradient(135deg,rgba(255,255,255,0.55),rgba(255,255,255,0.35)); font-size:.6rem; line-height:1.05rem; }
body[data-theme='dark'] .id-attr { border-color:rgba(255,255,255,0.06); background:linear-gradient(160deg,rgba(48,54,62,0.72),rgba(48,54,62,0.50)); }
.ia-label { display:block; font-size:.55rem; text-transform:uppercase; letter-spacing:.5px; opacity:.65; }
.ia-value { font-weight:600; font-size:.62rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.id-links { grid-column:1/-1; font-size:.55rem; padding:.3rem .4rem; border-radius:8px; background:linear-gradient(135deg,rgba(0,123,255,0.08),rgba(0,123,255,0.02)); border:1px solid rgba(0,123,255,0.15); }
body[data-theme='dark'] .id-links { background:linear-gradient(135deg,rgba(13,110,253,0.20),rgba(13,110,253,0.08)); border-color:rgba(13,110,253,0.28); }
.ident-chip-row { margin-top:.3rem; display:flex; flex-wrap:wrap; gap:.3rem; }
.ident-chip.neo { background:linear-gradient(135deg,#0d6efd,#6c2bd9); color:#fff; font-size:.55rem; padding:.25rem .45rem; border-radius:20px; box-shadow:0 2px 6px -2px rgba(0,0,0,.38); position:relative; overflow:hidden; }
.ident-chip.neo:before { content:''; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,0)); mix-blend-mode:overlay; }
.grading-flex { display:flex; gap:.65rem; align-items:stretch; }
.grade-ring { position:relative; width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.35rem; letter-spacing:.6px; background:linear-gradient(155deg,#ffffff,#e8f1ff); box-shadow:0 10px 26px -8px rgba(0,0,0,.25), inset 0 0 0 3px rgba(255,255,255,.65); overflow:hidden; }
body[data-theme='dark'] .grade-ring { background:linear-gradient(160deg,#2d343b,#1b2126); box-shadow:0 14px 32px -10px rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,255,255,.05); }
.grade-ring:before { content:""; position:absolute; inset:0; border-radius:50%; padding:3px; background:linear-gradient(140deg,var(--grade-accent, #2196f3),transparent 65%); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor; mask-composite:exclude; animation:gradeSweep 6s linear infinite; opacity:.55; }
@keyframes gradeSweep { to { transform:rotate(360deg); } }
body[data-theme='dark'] .grade-ring { background:linear-gradient(145deg,#2b3239,#1d2227); box-shadow:0 10px 24px -8px rgba(0,0,0,.8), inset 0 0 0 2px rgba(255,255,255,.05); }
.grade-ring.tier-high { --grade-accent:#2e7d32; box-shadow:0 0 0 4px rgba(46,125,50,.35),0 10px 26px -8px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.5); }
.grade-ring.tier-med { --grade-accent:#f9a825; box-shadow:0 0 0 4px rgba(249,168,37,.35),0 10px 26px -8px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.5); }
.grade-ring.tier-low { --grade-accent:#ef5350; box-shadow:0 0 0 4px rgba(239,83,80,.35),0 10px 26px -8px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.5); }
.grade-ring.tier-na { --grade-accent:#90a4ae; box-shadow:0 0 0 4px rgba(144,164,174,.28),0 10px 26px -8px rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.5); }
.gr-inner { text-shadow:0 1px 2px rgba(0,0,0,.25); }
.gr-caption { position:absolute; bottom:-14px; font-size:.55rem; text-transform:uppercase; letter-spacing:.4px; opacity:.7; }
.subgrades-wrap { display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-content:flex-start; }
.subgrade-chip { font-size:.66rem; position:relative; padding:.4rem .55rem .42rem; border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(255,255,255,.4)); border:1px solid rgba(0,0,0,0.06); min-width:78px; display:flex; justify-content:space-between; align-items:center; gap:.4rem; font-weight:600; letter-spacing:.04em; line-height:1; }
body[data-theme='dark'] .subgrade-chip { background:linear-gradient(150deg,rgba(55,63,70,.68),rgba(55,63,70,.45)); border-color:rgba(255,255,255,0.08); }
.subgrade-chip.tier-high { box-shadow:0 0 0 1px #2e7d32 inset,0 2px 6px -2px rgba(46,125,50,.5); }
.subgrade-chip.tier-med { box-shadow:0 0 0 1px #f9a825 inset,0 2px 6px -2px rgba(249,168,37,.5); }
.subgrade-chip.tier-low { box-shadow:0 0 0 1px #ef5350 inset,0 2px 6px -2px rgba(239,83,80,.45); }
.subgrade-chip.tier-na { box-shadow:0 0 0 1px #9e9e9e inset; }
.subgrade-chip .sg-label { opacity:.65; font-size:.55em; text-transform:uppercase; }
.subgrade-chip .sg-val { font-size:.85em; font-weight:700; }
.subgrades-wrap { display:flex; flex-wrap:wrap; gap:.55rem .6rem; align-content:flex-start; }
.grading-flex { display:flex; gap:1.25rem; align-items:center; }
.grading-flex .gr-inner { position:relative; z-index:2; }
.grade-ring .gr-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.grade-ring .gr-caption { font-size:.55rem; letter-spacing:.08em; opacity:.65; margin-top:.15rem; font-weight:600; text-transform:uppercase; }
.grade-ring .gr-inner:after { content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px rgba(255,255,255,.4), inset 0 0 18px -6px rgba(0,0,0,.35); pointer-events:none; }
.grading-flex:hover .grade-ring { transform:translateY(-2px); transition:transform .45s ease; }
.grade-ring { transition:transform .5s cubic-bezier(.25,.9,.3,1.2); }
.sg-label { opacity:.65; font-weight:500; }
.sg-val { font-weight:600; }
.image-frame { position:relative; padding:.4rem; border-radius:14px; background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.35)); box-shadow:0 4px 18px -6px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.4); }
body[data-theme='dark'] .image-frame { background:linear-gradient(135deg,rgba(42,48,56,.65),rgba(42,48,56,.4)); box-shadow:0 4px 22px -6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05); }


/* Collapsible pricing */
.pricing-collapsed #pricingGrid, .pricing-collapsed #priceEstimate { display:none !important; }
.pricing-collapsed #pricingCollapseBtn[aria-expanded='false']::after { content:' (collapsed)'; font-weight:400; font-size:.65rem; }

/* Subscription modal revamp */
#subscriptionModal .modal-dialog {
	max-width: 560px;
}
#subscriptionModal .modal-content {
	border-radius: 26px;
	border: 1px solid rgba(96, 165, 250, 0.28);
	box-shadow: 0 44px 96px -40px rgba(2, 6, 23, 0.85);
	background: linear-gradient(155deg, rgba(8, 15, 36, 0.95), rgba(15, 23, 42, 0.92) 55%, rgba(30, 64, 175, 0.88) 100%);
	color: #e2e8f0;
	padding: 0.35rem 0.35rem 0.6rem;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}
body.card-identifier-page #subscriptionModal .modal-content {
	background: linear-gradient(160deg, rgba(11, 19, 40, 0.96), rgba(15, 23, 42, 0.92) 58%, rgba(37, 99, 235, 0.78) 100%);
	color: #f1f5f9;
}
#subscriptionModal .modal-header {
	border-bottom: 1px solid rgba(96, 165, 250, 0.28);
	padding: 1.2rem 1.6rem 0.85rem;
}
#subscriptionModal .modal-title {
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #f8fafc;
}
.subscription-modal {
	padding: 0 1.6rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}
.subscription-modal__intro {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.subscription-modal__intro h3 {
	font-size: 1.35rem;
	margin-bottom: 0.3rem;
	font-weight: 700;
}
.subscription-modal__intro p {
	margin-bottom: 0;
	color: rgba(226, 232, 240, 0.82);
}
.subscription-modal__icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(37, 99, 235, 0.22), rgba(96, 165, 250, 0.16));
	color: #bfdbfe;
	font-size: 1.75rem;
	box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}
.subscription-modal__discount {
	margin: -0.4rem 0 0;
	border-radius: 14px;
	border: 1px solid rgba(45, 212, 191, 0.35);
	background: rgba(16, 185, 129, 0.22);
	color: #ccfbf1;
}
.subscription-modal__perks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 1rem;
}
.subscription-perk {
	background: linear-gradient(155deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.68));
	border-radius: 18px;
	padding: 1rem 1.15rem;
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	border: 1px solid rgba(96, 165, 250, 0.28);
	box-shadow: 0 24px 44px -32px rgba(8, 16, 32, 0.8);
}
.subscription-perk span.material-icons-round {
	font-size: 1.35rem;
	color: #60a5fa;
}
.subscription-perk h4 {
	font-size: 1rem;
	margin-bottom: 0.25rem;
	font-weight: 700;
	color: #f8fafc;
}
.subscription-perk p {
	margin: 0;
	color: rgba(226, 232, 240, 0.8);
}
.subscription-modal__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
}
.subscription-option {
	background: linear-gradient(160deg, rgba(13, 23, 44, 0.82), rgba(17, 28, 52, 0.78));
	border-radius: 20px;
	padding: 1.4rem 1.35rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	border: 1px solid rgba(100, 150, 255, 0.35);
	box-shadow: 0 32px 64px -32px rgba(5, 12, 28, 0.85);
}
.subscription-option.is-featured {
	border-color: rgba(96, 165, 250, 0.5);
	background: linear-gradient(160deg, rgba(37, 99, 235, 0.45), rgba(14, 116, 198, 0.42));
	box-shadow: 0 40px 80px -36px rgba(14, 116, 198, 0.7);
}
.subscription-option.is-coming-soon {
	border-color: rgba(148, 163, 184, 0.38);
	background: linear-gradient(160deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.82));
	box-shadow: 0 28px 60px -34px rgba(8, 14, 28, 0.75);
}
.subscription-option.is-coming-soon .subscription-option__eyebrow {
	color: rgba(148, 163, 184, 0.75);
}
.subscription-option.is-coming-soon .subscription-option__eyebrow::before {
	background: rgba(148, 163, 184, 0.75);
}
.subscription-option.is-coming-soon h4 {
	color: rgba(226, 232, 240, 0.95);
}
.subscription-option.is-coming-soon .btn[disabled] {
	background: rgba(71, 85, 105, 0.3);
	color: rgba(203, 213, 225, 0.75);
	border-color: rgba(148, 163, 184, 0.4);
	cursor: not-allowed;
	box-shadow: none;
}
.subscription-option.is-coming-soon .btn[disabled]:hover,
.subscription-option.is-coming-soon .btn[disabled]:focus {
	background: rgba(71, 85, 105, 0.32);
	color: rgba(203, 213, 225, 0.78);
}
.subscription-option__header h4 {
	font-size: 1.1rem;
	margin-bottom: 0.35rem;
	font-weight: 700;
}
.subscription-option__header p {
	margin-bottom: 0;
	color: rgba(226, 232, 240, 0.82);
}
.subscription-option__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	color: #1d4ed8;
	margin-bottom: 0.65rem;
}
.subscription-option__eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.subscription-option__list {
	margin: 0;
	padding-left: 1.1rem;
	display: grid;
	gap: 0.4rem;
	color: rgba(226, 232, 240, 0.8);
}
.subscription-option__list li::marker {
	color: rgba(165, 180, 252, 0.75);
}
.subscription-option .btn {
	border-radius: 14px;
	font-weight: 600;
	padding: 0.85rem 1rem;
}
.subscription-option .btn-outline-primary {
	background: rgba(37, 99, 235, 0.18);
	border-width: 2px;
	color: #e0f2fe;
}
.subscription-option .btn-outline-primary:hover,
.subscription-option .btn-outline-primary:focus {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	color: #f8fafc;
	box-shadow: 0 18px 36px -20px rgba(37, 99, 235, 0.55);
}
.subscription-option .btn[disabled] {
	opacity: 0.7;
	border-width: 2px;
	background: rgba(71, 85, 105, 0.28);
	color: rgba(203, 213, 225, 0.75);
	cursor: not-allowed;
}
.subscription-option .btn[disabled]:hover,
.subscription-option .btn[disabled]:focus {
	color: rgba(203, 213, 225, 0.78);
	background: rgba(71, 85, 105, 0.32);
	box-shadow: none;
}
.subscription-modal__note {
	background: linear-gradient(160deg, rgba(13, 23, 44, 0.8), rgba(17, 28, 52, 0.76));
	border-radius: 16px;
	padding: 0.9rem 1rem;
	border: 1px solid rgba(96, 165, 250, 0.3);
	box-shadow: 0 24px 52px -36px rgba(6, 10, 24, 0.85);
}
.subscription-modal__note a {
	color: #bfdbfe;
	font-weight: 600;
}
.subscription-modal__footer {
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid rgba(96, 165, 250, 0.28);
	padding: 1rem 1.6rem 0.4rem;
}
.subscription-modal__divider {
	flex: 1 1 auto;
	height: 1px;
	background: rgba(96, 165, 250, 0.28);
	margin-inline: 1rem;
}
#subscriptionModal .btn-link {
	color: #bfdbfe;
	font-weight: 600;
}
#subscriptionModal .btn-link:hover,
#subscriptionModal .btn-link:focus {
	color: #e0f2fe;
}

body.card-identifier-page #subscriptionModal .subscription-perk,
body.card-identifier-page #subscriptionModal .subscription-option,
body.card-identifier-page #subscriptionModal .subscription-modal__note,
body.card-identifier-page #subscriptionModal .subscription-modal__discount {
	background: inherit;
}

@media (max-width: 575.98px) {
	#subscriptionModal .modal-content {
		padding: 0.15rem;
	}
	.subscription-modal {
		padding: 0 1.1rem 1.35rem;
		gap: 1.1rem;
	}
	.subscription-modal__intro {
		flex-direction: column;
		align-items: flex-start;
	}
	.subscription-modal__perks {
		grid-template-columns: minmax(0, 1fr);
	}
	.subscription-modal__options {
		grid-template-columns: minmax(0, 1fr);
	}
	.subscription-modal__footer {
		flex-direction: column;
		gap: 0.75rem;
		align-items: stretch;
	}
	.subscription-modal__divider {
		display: none;
	}
	#subscriptionModal .btn-link {
		text-align: center;
	}
}

/* ==========================================================================
   Cinematic refresh layer (2026-05-28)
   Appended last so it takes precedence over earlier card-identifier.css rules.
   ========================================================================== */

.card-identifier-page {
	--ci-ink: #f4f8ff;
	--ci-ink-dim: rgba(214, 226, 247, 0.74);
	--ci-ink-faint: rgba(180, 200, 230, 0.55);
	--ci-cyan: #38bdf8;
	--ci-cyan-deep: #0ea5e9;
	--ci-violet: #8b5cf6;
	--ci-magenta: #f472b6;
	--ci-glow-cyan: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 18px 48px -22px rgba(14, 165, 233, 0.55);
	--ci-glow-violet: 0 0 0 1px rgba(139, 92, 246, 0.35), 0 18px 48px -22px rgba(139, 92, 246, 0.55);
	--ci-surface-deep: rgba(8, 13, 26, 0.78);
	--ci-surface-glass: linear-gradient(155deg, rgba(20, 30, 52, 0.72), rgba(9, 15, 28, 0.68));
	--ci-stroke-soft: rgba(148, 175, 215, 0.16);
	--ci-stroke-strong: rgba(125, 211, 252, 0.28);
	background:
		radial-gradient(120% 100% at 80% -10%, rgba(139, 92, 246, 0.22), transparent 55%),
		radial-gradient(110% 90% at 10% 110%, rgba(14, 165, 233, 0.28), transparent 50%),
		radial-gradient(80% 80% at 50% 0%, rgba(244, 114, 182, 0.10), transparent 60%),
		#04070f;
}

/* Slow aurora field behind everything */
.card-identifier-page::before {
	content: '';
	position: fixed;
	inset: -10vmax;
	z-index: 0;
	background:
		radial-gradient(35vmax 35vmax at 15% 20%, rgba(56, 189, 248, 0.28), transparent 60%),
		radial-gradient(40vmax 35vmax at 80% 30%, rgba(139, 92, 246, 0.25), transparent 60%),
		radial-gradient(30vmax 30vmax at 60% 90%, rgba(244, 114, 182, 0.18), transparent 65%);
	filter: blur(40px) saturate(140%);
	opacity: 0.95;
	pointer-events: none;
	animation: ci-aurora 28s ease-in-out infinite alternate;
}

/* Fine grain over everything for cinematic noise */
.card-identifier-page::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(rgba(255, 255, 255, 0.06) 0.6px, transparent 0.6px),
		radial-gradient(rgba(255, 255, 255, 0.04) 0.4px, transparent 0.4px);
	background-size: 3px 3px, 5px 5px;
	background-position: 0 0, 1px 1.5px;
	mix-blend-mode: overlay;
	opacity: 0.5;
}

.card-identifier-page .main-content,
.card-identifier-page .wrapper {
	position: relative;
	z-index: 1;
}

@keyframes ci-aurora {
	0%   { transform: translate3d(-2vmax, -1vmax, 0) rotate(0deg); }
	50%  { transform: translate3d(2vmax,  1vmax, 0) rotate(8deg); }
	100% { transform: translate3d(-1vmax, 2vmax, 0) rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page::before { animation: none; }
}

/* ---- Layout: full-width primary, no right rail ---- */

.card-identifier-page .ci-main-grid {
	display: block !important;
	grid-template-columns: none !important;
	margin-top: clamp(1.1rem, 2vw, 1.6rem);
}

.card-identifier-page .ci-main-grid__primary {
	width: 100%;
}

/* ---- HERO ---- */

.card-identifier-page .ci-hero {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	border: 1px solid var(--ci-stroke-soft);
	background:
		linear-gradient(155deg, rgba(15, 23, 42, 0.72), rgba(7, 12, 24, 0.78)),
		radial-gradient(80% 100% at 0% 0%, rgba(56, 189, 248, 0.22), transparent 60%),
		radial-gradient(70% 90% at 100% 100%, rgba(139, 92, 246, 0.25), transparent 60%);
	box-shadow:
		0 30px 70px -40px rgba(2, 6, 23, 0.95),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
	padding: clamp(1.6rem, 2.4vw + 0.9rem, 2.6rem);
	isolation: isolate;
	/* Override the earlier 2-column grid that left an empty right column */
	display: block !important;
	grid-template-columns: none !important;
}

.card-identifier-page .ci-hero__aurora {
	position: absolute;
	inset: -20%;
	z-index: 0;
	background:
		conic-gradient(from 120deg at 70% 30%, rgba(56, 189, 248, 0.0) 0deg, rgba(56, 189, 248, 0.35) 60deg, rgba(139, 92, 246, 0.35) 180deg, rgba(244, 114, 182, 0.25) 260deg, rgba(56, 189, 248, 0.0) 360deg);
	filter: blur(60px);
	opacity: 0.55;
	pointer-events: none;
	animation: ci-hero-aurora 22s linear infinite;
}

.card-identifier-page .ci-hero__grain {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
	mix-blend-mode: screen;
	pointer-events: none;
}

.card-identifier-page .ci-hero > .ci-hero__header,
.card-identifier-page .ci-hero > .ci-hero__metrics {
	position: relative;
	z-index: 1;
}

@keyframes ci-hero-aurora {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page .ci-hero__aurora { animation: none; }
}

.card-identifier-page .ci-hero__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.4rem);
	align-items: start;
}

@media (min-width: 900px) {
	.card-identifier-page .ci-hero__header {
		grid-template-columns: minmax(0, 1fr) max-content;
	}
}

.card-identifier-page .ci-hero__headline {
	max-width: 760px;
	flex: none;
	min-width: 0;
}

.card-identifier-page .ci-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.65rem;
	flex: 0 0 auto;
}

@media (min-width: 900px) {
	.card-identifier-page .ci-hero__actions {
		align-items: flex-end;
	}
}

.card-identifier-page .ci-overline {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.85rem 0.4rem 0.55rem;
	border-radius: 999px;
	border: 1px solid rgba(125, 211, 252, 0.28);
	background: linear-gradient(120deg, rgba(56, 189, 248, 0.14), rgba(139, 92, 246, 0.14));
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #cfe9ff;
}

.card-identifier-page .ci-overline__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ci-cyan), var(--ci-violet));
	box-shadow: 0 0 12px rgba(56, 189, 248, 0.9), 0 0 22px rgba(139, 92, 246, 0.6);
	animation: ci-dot-pulse 2.6s ease-in-out infinite;
}

@keyframes ci-dot-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.25); opacity: 0.7; }
}

.card-identifier-page .ci-hero__title {
	margin: 0.95rem 0 0.85rem;
	font-family: "Roboto Slab", "Roboto", Georgia, serif;
	font-size: clamp(2.2rem, 4.4vw + 0.6rem, 4.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.02;
	color: var(--ci-ink);
}

.card-identifier-page .ci-hero__title span {
	background: linear-gradient(110deg, #e0f2fe 0%, #93c5fd 28%, #c4b5fd 55%, #f0abfc 80%, #fde68a 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 220% 100%;
	animation: ci-title-shift 12s ease-in-out infinite;
}

.card-identifier-page .ci-hero__title em {
	font-style: normal;
	font-weight: 400;
	color: rgba(226, 232, 240, 0.78);
	font-size: 0.78em;
	letter-spacing: -0.01em;
	margin-left: 0.15em;
}

@keyframes ci-title-shift {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page .ci-hero__title span { animation: none; }
}

.card-identifier-page .ci-hero__copy {
	max-width: 56ch;
	font-size: clamp(0.98rem, 0.4vw + 0.85rem, 1.12rem);
	line-height: 1.55;
	color: var(--ci-ink-dim);
	margin: 0 0 1.4rem;
}

.card-identifier-page .ci-hero__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 0.75rem;
	margin-top: 0;
}

.card-identifier-page .ci-metric {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.95rem 1.1rem;
	border-radius: 18px;
	border: 1px solid var(--ci-stroke-soft);
	background: linear-gradient(155deg, rgba(20, 30, 52, 0.6), rgba(9, 15, 28, 0.55));
	overflow: hidden;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card-identifier-page .ci-metric::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.55), rgba(139, 92, 246, 0.55), transparent 60%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.card-identifier-page .ci-metric:hover {
	transform: translateY(-2px);
	border-color: rgba(125, 211, 252, 0.32);
	box-shadow: 0 22px 40px -28px rgba(14, 165, 233, 0.45);
}

.card-identifier-page .ci-metric:hover::before { opacity: 1; }

.card-identifier-page .ci-metric .material-icons-round {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(139, 92, 246, 0.22));
	border: 1px solid rgba(125, 211, 252, 0.25);
	color: #bae6fd;
	font-size: 1.25rem;
	flex: 0 0 auto;
}

.card-identifier-page .ci-metric__label {
	font-size: 0.66rem;
	letter-spacing: 0.16em;
}

.card-identifier-page .ci-metric__value {
	font-size: 0.98rem;
	color: #f8fafc;
}

.card-identifier-page .ci-hero__actions {
	align-items: flex-end;
	min-width: 0;
}

.card-identifier-page .ci-count {
	background: rgba(15, 23, 42, 0.55);
	border: 1px solid var(--ci-stroke-strong);
	color: #e0f2fe;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.card-identifier-page .ci-count:not(:empty)::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ci-cyan);
	box-shadow: 0 0 10px var(--ci-cyan);
	margin-right: 0.5rem;
	vertical-align: middle;
}

.card-identifier-page .ci-hero__buttons .btn-outline-light {
	border-color: rgba(186, 230, 253, 0.35);
	color: #e2f3ff;
	background: rgba(15, 23, 42, 0.45);
	backdrop-filter: blur(6px);
}

.card-identifier-page .ci-hero__buttons .btn-outline-light:hover {
	background: rgba(56, 189, 248, 0.18);
	border-color: rgba(125, 211, 252, 0.55);
}

@media (max-width: 991.98px) {
	.card-identifier-page .ci-hero__header {
		grid-template-columns: minmax(0, 1fr);
	}
	.card-identifier-page .ci-hero__actions {
		align-items: flex-start;
	}
}

/* ---- PANEL + STEPPER ---- */

.card-identifier-page .ci-panel {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	border: 1px solid var(--ci-stroke-soft);
	background:
		linear-gradient(155deg, rgba(13, 21, 38, 0.82), rgba(7, 12, 24, 0.84));
	box-shadow: 0 30px 70px -44px rgba(2, 6, 23, 0.95);
	padding: clamp(1.4rem, 2vw + 0.9rem, 2.2rem);
	margin-top: clamp(1.2rem, 2vw, 1.8rem);
}

.card-identifier-page .ci-panel__header {
	border-bottom: 1px solid var(--ci-stroke-soft);
	padding-bottom: 1.1rem;
}

.card-identifier-page .ci-panel__eyebrow {
	color: rgba(186, 230, 253, 0.82);
	letter-spacing: 0.22em;
	font-weight: 700;
}

.card-identifier-page .ci-panel__title {
	font-family: "Roboto Slab", "Roboto", Georgia, serif;
	font-size: clamp(1.4rem, 1.4vw + 0.9rem, 1.9rem);
	letter-spacing: -0.015em;
	color: #f8fbff;
	margin-top: 0.5rem;
}

.card-identifier-page .ci-panel__copy {
	color: var(--ci-ink-dim);
	max-width: 64ch;
}

.card-identifier-page .ci-stepper-wrap {
	padding: 0.4rem 0 0.2rem;
}

.card-identifier-page .stepper {
	display: flex;
	gap: 0.4rem;
	background: rgba(8, 14, 28, 0.72);
	border: 1px solid var(--ci-stroke-soft);
	border-radius: 18px;
	padding: 0.45rem;
	width: max-content;
	max-width: 100%;
	overflow: auto;
}

.card-identifier-page .stepper .step {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.55rem 1.05rem;
	border-radius: 14px;
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none;
	color: rgba(214, 226, 247, 0.7);
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.card-identifier-page .stepper .step .step-index {
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	background: rgba(148, 163, 184, 0.18);
	color: #cbd5f5;
	font-size: 0.72rem;
	box-shadow: none;
}

.card-identifier-page .stepper .step.active {
	color: #f8fbff;
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(139, 92, 246, 0.22));
	border-color: rgba(125, 211, 252, 0.45);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 18px 32px -22px rgba(14, 165, 233, 0.55);
}

.card-identifier-page .stepper .step.active .step-index {
	background: linear-gradient(135deg, var(--ci-cyan), var(--ci-violet));
	color: #04070f;
	box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18);
	animation: ci-step-pulse 2.4s ease-in-out infinite;
}

@keyframes ci-step-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.18); }
	50%      { box-shadow: 0 0 0 9px rgba(56, 189, 248, 0.0); }
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page .stepper .step.active .step-index { animation: none; }
}

.card-identifier-page .stepper .step.completed .step-index {
	background: linear-gradient(135deg, #34d399, #22d3ee);
	color: #04070f;
}

/* ---- UPLOAD STEP ---- */

.card-identifier-page .upload-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
}

@media (min-width: 1100px) {
	.card-identifier-page .upload-grid {
		grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.45fr);
		align-items: start;
	}
}

.card-identifier-page .upload-left,
.card-identifier-page .upload-right {
	border-radius: 22px;
	border: 1px solid var(--ci-stroke-soft);
	background: var(--ci-surface-glass);
	box-shadow: 0 24px 50px -36px rgba(2, 6, 23, 0.95);
	padding: clamp(1.1rem, 1.4vw + 0.8rem, 1.6rem);
}

.card-identifier-page .ci-drop-area {
	position: relative;
	min-height: 260px;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	border-radius: 24px;
	border: 1.5px dashed rgba(125, 211, 252, 0.4);
	background:
		radial-gradient(60% 80% at 50% 0%, rgba(56, 189, 248, 0.14), transparent 65%),
		linear-gradient(165deg, rgba(9, 16, 28, 0.95), rgba(15, 23, 42, 0.78));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1.2rem;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.card-identifier-page .ci-drop-area::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from 90deg, rgba(56, 189, 248, 0.0), rgba(56, 189, 248, 0.6), rgba(139, 92, 246, 0.6), rgba(56, 189, 248, 0.0));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.25s ease;
	animation: ci-trace 6s linear infinite;
	pointer-events: none;
}

.card-identifier-page .ci-drop-area:hover {
	transform: translateY(-2px);
	border-color: rgba(125, 211, 252, 0.6);
	box-shadow: 0 28px 60px -34px rgba(14, 165, 233, 0.55);
}

.card-identifier-page .ci-drop-area:hover::before,
.card-identifier-page .ci-drop-area.dragover::before { opacity: 1; }

.card-identifier-page .ci-drop-area.dragover {
	border-color: var(--ci-cyan);
	background:
		radial-gradient(70% 90% at 50% 0%, rgba(56, 189, 248, 0.3), transparent 65%),
		linear-gradient(165deg, rgba(9, 16, 28, 0.95), rgba(15, 23, 42, 0.85));
	box-shadow: 0 32px 70px -28px rgba(56, 189, 248, 0.6);
}

@keyframes ci-trace {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page .ci-drop-area::before { animation: none; opacity: 0.6; }
}

.card-identifier-page .ci-drop-area__icon {
	width: 64px;
	height: 64px;
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.35), rgba(139, 92, 246, 0.35));
	border: 1px solid rgba(186, 230, 253, 0.3);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 26px -14px rgba(14, 165, 233, 0.6);
	color: #f0f9ff;
	font-size: 2rem;
	margin-bottom: 0.4rem;
}

.card-identifier-page .ci-drop-area__copy strong {
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: #f8fbff;
}

.card-identifier-page .ci-drop-area__copy p {
	color: var(--ci-ink-dim);
	font-size: 0.95rem;
}

.card-identifier-page .ci-drop-area__actions .btn {
	background: rgba(15, 23, 42, 0.7);
	border: 1px solid var(--ci-stroke-strong);
	color: #e2f3ff;
	min-width: 110px;
	font-weight: 600;
}

.card-identifier-page .ci-drop-area__actions .btn:hover {
	background: rgba(56, 189, 248, 0.16);
	border-color: rgba(125, 211, 252, 0.6);
}

.card-identifier-page .ci-category-card {
	border-radius: 18px;
	border: 1px solid var(--ci-stroke-soft);
	background: linear-gradient(155deg, rgba(15, 23, 42, 0.75), rgba(9, 15, 28, 0.65));
}

.card-identifier-page .ci-upload-pill {
	background: rgba(15, 23, 42, 0.65);
	border: 1px solid var(--ci-stroke-strong);
	color: #cfe9ff;
}

/* Live rail (replaces the two summary panels) */
.card-identifier-page .ci-live-rail {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: clamp(1.1rem, 1.4vw + 0.8rem, 1.5rem);
	border-radius: 22px;
	border: 1px solid var(--ci-stroke-soft);
	background:
		radial-gradient(80% 80% at 100% 0%, rgba(139, 92, 246, 0.18), transparent 60%),
		linear-gradient(155deg, rgba(15, 23, 42, 0.78), rgba(9, 15, 28, 0.72));
	position: sticky;
	top: 1rem;
}

.card-identifier-page .ci-live-rail__head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.card-identifier-page .ci-live-rail__pulse {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--ci-cyan);
	box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45);
	animation: ci-rail-pulse 2.4s ease-out infinite;
	flex: 0 0 auto;
}

@keyframes ci-rail-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.45); }
	100% { box-shadow: 0 0 0 14px rgba(56, 189, 248, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page .ci-live-rail__pulse { animation: none; }
}

.card-identifier-page .ci-live-rail__title {
	color: #f8fbff;
	margin: 0.15rem 0 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.card-identifier-page .ci-mini-stats {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.6rem;
}

.card-identifier-page .ci-mini-stats li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1rem;
	border-radius: 14px;
	background: rgba(8, 14, 28, 0.7);
	border: 1px solid var(--ci-stroke-soft);
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.card-identifier-page .ci-mini-stats li:hover {
	border-color: rgba(125, 211, 252, 0.3);
	transform: translateX(2px);
}

.card-identifier-page .ci-mini-stats .label {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	color: rgba(186, 230, 253, 0.78);
}

.card-identifier-page .ci-mini-stats .value {
	font-family: "Roboto Slab", "Roboto", Georgia, serif;
	font-size: 1.4rem;
	font-weight: 700;
	color: #f8fbff;
	font-variant-numeric: tabular-nums;
}

/* Upload action bar - the primary CTA surface */
.card-identifier-page .ci-upload-actions {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid rgba(125, 211, 252, 0.28);
	background:
		linear-gradient(135deg, rgba(56, 189, 248, 0.10), rgba(139, 92, 246, 0.10)),
		linear-gradient(155deg, rgba(15, 23, 42, 0.92), rgba(9, 15, 28, 0.86));
	box-shadow: 0 28px 60px -36px rgba(14, 165, 233, 0.55);
	padding: 1.2rem 1.35rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.card-identifier-page .ci-upload-actions::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 120% at 100% 50%, rgba(139, 92, 246, 0.18), transparent 60%);
	pointer-events: none;
}

.card-identifier-page .ci-upload-actions__meta {
	position: relative;
	z-index: 1;
}

.card-identifier-page .ci-upload-status {
	font-size: 1.05rem;
	font-weight: 600;
	color: #f8fbff;
}

.card-identifier-page #processCardsButton {
	position: relative;
	z-index: 1;
	min-width: 200px;
	padding: 0.95rem 1.55rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ci-cyan) 0%, var(--ci-violet) 100%);
	box-shadow:
		0 18px 40px -14px rgba(56, 189, 248, 0.6),
		inset 0 1px 0 rgba(255, 255, 255, 0.22);
	color: #04070f;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.86rem;
	transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}

.card-identifier-page #processCardsButton:hover:not(:disabled) {
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow:
		0 26px 50px -16px rgba(56, 189, 248, 0.7),
		inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.card-identifier-page #processCardsButton:disabled {
	background: rgba(30, 41, 59, 0.7);
	color: rgba(226, 232, 240, 0.45);
	box-shadow: none;
	cursor: not-allowed;
}

/* Collapsible tips replacing the always-on tips block */
.card-identifier-page .ci-tips-collapsible {
	margin-top: 1.4rem;
	border-radius: 18px;
	border: 1px solid var(--ci-stroke-soft);
	background: rgba(8, 14, 28, 0.55);
	overflow: hidden;
}

.card-identifier-page .ci-tips-collapsible > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.05rem;
	color: var(--ci-ink-dim);
	font-size: 0.88rem;
	font-weight: 600;
}

.card-identifier-page .ci-tips-collapsible > summary::-webkit-details-marker { display: none; }

.card-identifier-page .ci-tips-collapsible[open] > summary {
	border-bottom: 1px solid var(--ci-stroke-soft);
	color: #f0f9ff;
}

.card-identifier-page .ci-tips-collapsible .ci-tips__list {
	padding: 0.85rem 1.05rem 1rem;
	list-style: none;
	margin: 0;
	display: grid;
	gap: 0.6rem;
	font-size: 0.88rem;
	color: var(--ci-ink-dim);
}

.card-identifier-page .ci-tips-collapsible .ci-tips__list li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
}

.card-identifier-page .ci-tips-collapsible .material-icons-round {
	font-size: 1.05rem;
	color: var(--ci-cyan);
}

/* ---- RESULTS STEP ---- */

.card-identifier-page .ci-results__header {
	border-radius: 22px;
	border: 1px solid var(--ci-stroke-soft);
	background: var(--ci-surface-glass);
	padding: 1.1rem 1.4rem;
	margin-bottom: 1rem;
}

.card-identifier-page .ci-results-chip {
	background:
		linear-gradient(155deg, rgba(20, 30, 52, 0.85), rgba(8, 14, 28, 0.78));
	border-color: var(--ci-stroke-soft);
}

.card-identifier-page .ci-toolbar {
	background: var(--ci-surface-glass);
	border: 1px solid var(--ci-stroke-soft);
	border-radius: 18px;
}

.card-identifier-page .result-card {
	background: linear-gradient(155deg, rgba(18, 28, 48, 0.92), rgba(8, 14, 28, 0.86));
	border: 1px solid var(--ci-stroke-soft);
	box-shadow: 0 30px 60px -36px rgba(2, 6, 23, 0.95);
	animation: ci-card-reveal 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes ci-card-reveal {
	from { opacity: 0; transform: translateY(14px) scale(0.985); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page .result-card { animation: none; }
}

.card-identifier-page .result-score {
	background:
		conic-gradient(from 200deg, rgba(56, 189, 248, 0.3), rgba(139, 92, 246, 0.3), rgba(56, 189, 248, 0.3)),
		radial-gradient(70% 70% at 50% 50%, rgba(15, 23, 42, 0.95), rgba(8, 14, 28, 0.98));
	border: 1px solid rgba(125, 211, 252, 0.32);
	box-shadow: 0 0 24px -6px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card-identifier-page .result-score__value {
	color: #f8fbff;
	text-shadow: 0 0 18px rgba(125, 211, 252, 0.4);
}

/* Sticky action bar on results */
.card-identifier-page .ci-results__actions {
	position: sticky;
	bottom: 1rem;
	z-index: 8;
	padding: 0.9rem 1.1rem;
	border-radius: 999px;
	border: 1px solid var(--ci-stroke-soft);
	background: rgba(8, 14, 28, 0.82);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	box-shadow: 0 22px 50px -28px rgba(2, 6, 23, 0.95);
	margin-top: 1.4rem;
	gap: 0.55rem;
	justify-content: center;
	flex-wrap: wrap;
}

.card-identifier-page .ci-results__actions .btn {
	border-radius: 999px;
	border: 1px solid var(--ci-stroke-soft);
	background: rgba(15, 23, 42, 0.7);
	color: #e2f3ff;
	min-width: 100px;
	padding-inline: 1.1rem;
	font-weight: 600;
}

.card-identifier-page #saveSubmissionButton {
	background: linear-gradient(135deg, var(--ci-cyan), var(--ci-violet));
	color: #04070f;
	border-color: transparent;
}

.card-identifier-page #generateInvoiceButton {
	background: linear-gradient(135deg, #34d399, #22d3ee);
	color: #04070f;
	border-color: transparent;
}

@media (max-width: 575.98px) {
	.card-identifier-page .ci-hero {
		padding: 1.5rem 1.25rem;
		border-radius: 22px;
	}
	.card-identifier-page .ci-results__actions {
		border-radius: 22px;
	}
}

/* ==========================================================================
   Result card redesign (2026-05-28 iter-2)
   Goal: compact, info-first cards. No towering image stacks.
   ========================================================================== */

/* Results grid: tighter, more cards per row */
.card-identifier-page .results-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: clamp(0.85rem, 1.4vw, 1.2rem);
}

body.grid-packed .card-identifier-page .results-list {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 640px) {
	.card-identifier-page .results-list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The result card itself — capped height, cleaner frame */
.card-identifier-page .result-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem 1.1rem 1.1rem;
	max-height: 640px;
	overflow: hidden;
	border-radius: 22px;
	border: 1px solid var(--ci-stroke-soft);
	background: linear-gradient(155deg, rgba(18, 28, 48, 0.92), rgba(8, 14, 28, 0.86));
	box-shadow: 0 26px 50px -32px rgba(2, 6, 23, 0.95);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	min-width: 0;
	box-sizing: border-box;
}

/* Inner shell must respect card width */
.card-identifier-page .result-card .result-shell {
	min-width: 0;
	max-width: 100%;
}

.card-identifier-page .result-card .result-overview,
.card-identifier-page .result-card .result-summary {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.card-identifier-page .result-card:hover {
	border-color: rgba(125, 211, 252, 0.32);
	transform: translateY(-2px);
	box-shadow: 0 32px 60px -32px rgba(14, 165, 233, 0.4);
}

/* Header strip — eyebrow + filename + state */
.card-identifier-page .result-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0;
	margin: 0;
	min-width: 0;
}

.card-identifier-page .result-card__meta-copy {
	min-width: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

.card-identifier-page .result-card__eyebrow {
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	font-weight: 700;
	color: rgba(186, 230, 253, 0.7);
}

.card-identifier-page .result-card__filename {
	/* The detected card title in the summary already names the card.
	   Filename is noise in compact mode. */
	display: none;
}

.card-identifier-page .result-card.is-expanded .result-card__filename {
	display: inline;
	font-size: 0.7rem;
	color: rgba(214, 226, 247, 0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-identifier-page .result-card__state {
	background: linear-gradient(135deg, rgba(34, 211, 153, 0.22), rgba(45, 212, 191, 0.22));
	border: 1px solid rgba(52, 211, 153, 0.35);
	color: #a7f3d0;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	padding: 0.32rem 0.7rem;
	flex: 0 0 auto;
}

.card-identifier-page .result-card__state--error {
	background: linear-gradient(135deg, rgba(248, 113, 113, 0.22), rgba(244, 114, 182, 0.22));
	border-color: rgba(248, 113, 113, 0.35);
	color: #fecaca;
}

/* Selection checkbox + Edit/Remove — corner ghost buttons */
.card-identifier-page .result-card .card-select-checkbox {
	position: absolute;
	top: 0.85rem;
	left: 0.85rem;
	z-index: 3;
	width: 18px;
	height: 18px;
	border-radius: 6px;
	border: 1px solid var(--ci-stroke-strong);
	background: rgba(8, 14, 28, 0.85);
	cursor: pointer;
}

.card-identifier-page .result-card .card-select-checkbox:checked {
	background: linear-gradient(135deg, var(--ci-cyan), var(--ci-violet));
	border-color: transparent;
}

.card-identifier-page .result-card .edit-inline-btn,
.card-identifier-page .result-card .remove-btn,
.card-identifier-page .result-card .expand-btn {
	position: absolute;
	top: 0.75rem;
	z-index: 3;
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	background: rgba(8, 14, 28, 0.75);
	border: 1px solid var(--ci-stroke-soft);
	color: rgba(214, 226, 247, 0.78);
	font-size: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	cursor: pointer;
}

/* Corner stack right-to-left: Remove → Edit → Expand */
.card-identifier-page .result-card .remove-btn { right: 0.75rem; }
.card-identifier-page .result-card .edit-inline-btn { right: 2.85rem; }
.card-identifier-page .result-card .expand-btn { right: 4.95rem; }

.card-identifier-page .result-card .edit-inline-btn:hover {
	background: rgba(56, 189, 248, 0.18);
	border-color: rgba(125, 211, 252, 0.55);
	color: #e0f2fe;
}

.card-identifier-page .result-card .remove-btn:hover {
	background: rgba(248, 113, 113, 0.2);
	border-color: rgba(248, 113, 113, 0.5);
	color: #fecaca;
}

.card-identifier-page .result-card .expand-btn:hover {
	background: rgba(139, 92, 246, 0.18);
	border-color: rgba(167, 139, 250, 0.55);
	color: #e9d5ff;
}

.card-identifier-page .result-card .edit-inline-btn::before {
	content: '\270E';
	font-size: 0.85rem;
	line-height: 1;
}

.card-identifier-page .result-card .remove-btn::before {
	content: '\00D7';
	font-size: 1.2rem;
	line-height: 1;
	font-weight: 300;
}

.card-identifier-page .result-card .expand-btn::before {
	content: '\25BE'; /* down-pointing chevron */
	font-size: 0.85rem;
	line-height: 1;
	transition: transform 0.25s ease;
}

.card-identifier-page .result-card.is-expanded .expand-btn::before {
	transform: rotate(180deg);
}

.card-identifier-page .result-card.is-expanded .expand-btn {
	background: rgba(139, 92, 246, 0.22);
	border-color: rgba(167, 139, 250, 0.6);
	color: #e9d5ff;
}

/* Trim the header padding to make room for THREE corner buttons */
.card-identifier-page .result-card__meta {
	padding-left: 2rem !important;
	padding-right: 6.4rem !important;
	margin-bottom: 0 !important;
}

/* Hide the small redundant thumbnail above the gallery */
.card-identifier-page .result-card > img.thumb,
.card-identifier-page .result-card > a > img.thumb,
.card-identifier-page .result-card > .preview-container {
	display: none;
}

/* ----- Result shell + overview: tight, single-column on smaller cards ----- */

.card-identifier-page .result-shell {
	gap: 0.85rem;
	min-height: 0;
}

.card-identifier-page .result-overview {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

@media (min-width: 720px) {
	.card-identifier-page .result-overview {
		grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
	}
}

/* Visual column (gallery) — capped */
.card-identifier-page .result-visual {
	min-width: 0;
}

/* GALLERY — force single visible slide, capped height, horizontal-only flow */
.card-identifier-page .result-gallery {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.45rem !important;
	width: 100%;
	min-width: 0;
}

.card-identifier-page .result-gallery__viewport {
	position: relative;
	width: 100%;
	height: 200px !important;
	max-height: 200px !important;
	border-radius: 14px;
	background: rgba(8, 14, 28, 0.85);
	border: 1px solid var(--ci-stroke-soft);
	overflow: hidden !important; /* clip; nav arrows + dots are below */
	scroll-snap-type: x mandatory;
}

.card-identifier-page .result-gallery__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: 100%;
	height: 100%;
}

.card-identifier-page .result-gallery__item {
	flex: 0 0 100% !important;
	width: 100% !important;
	height: 100%;
	min-width: 100%;
	padding: 0.4rem !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	scroll-snap-align: start;
	box-sizing: border-box;
}

.card-identifier-page .result-gallery__media {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-identifier-page .result-gallery__img {
	max-height: 100% !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	border-radius: 10px;
	border: 1px solid var(--ci-stroke-soft);
	box-shadow: none;
}

.card-identifier-page .result-gallery__caption {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.6rem;
	color: rgba(214, 226, 247, 0.55);
	text-align: center;
}

.card-identifier-page .result-gallery__badge {
	font-size: 0.55rem;
	letter-spacing: 0.14em;
	color: rgba(186, 230, 253, 0.7);
	font-weight: 600;
	text-transform: uppercase;
}

.card-identifier-page .result-gallery__text {
	font-size: 0.6rem;
	color: rgba(214, 226, 247, 0.45);
}

.card-identifier-page .result-gallery__controls {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.4rem !important;
	padding: 0 !important;
	margin: 0 !important;
}

.card-identifier-page .result-gallery__dots {
	display: inline-flex !important;
	gap: 0.3rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.card-identifier-page .result-gallery__dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(148, 175, 215, 0.4) !important;
	background: transparent !important;
	padding: 0 !important;
}

.card-identifier-page .result-gallery__dot.is-active {
	background: var(--ci-cyan) !important;
	border-color: var(--ci-cyan) !important;
	box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}

.card-identifier-page .result-gallery__thumbs {
	display: flex !important;
	gap: 0.3rem !important;
	padding: 0 !important;
	overflow-x: auto;
	scrollbar-width: thin;
}

.card-identifier-page .result-gallery__thumb {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	border-radius: 6px !important;
	flex: 0 0 auto;
	cursor: pointer;
}

.card-identifier-page .result-gallery__thumb img {
	width: 32px !important;
	height: 44px !important;
	border-radius: 6px;
	border: 1px solid var(--ci-stroke-soft) !important;
	object-fit: cover;
}

.card-identifier-page .result-gallery__thumb.is-active img {
	box-shadow: 0 0 0 2px var(--ci-cyan);
}

.card-identifier-page .gallery-nav {
	width: 22px !important;
	height: 22px !important;
	font-size: 0.85rem !important;
	border-radius: 50% !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	background: rgba(8, 14, 28, 0.75) !important;
	color: rgba(214, 226, 247, 0.78) !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.card-identifier-page .gallery-nav:hover:not(:disabled) {
	background: rgba(56, 189, 248, 0.18) !important;
	border-color: rgba(125, 211, 252, 0.55) !important;
	color: #e0f2fe !important;
}

.card-identifier-page .gallery-nav:disabled {
	opacity: 0.3 !important;
}

/* Summary column — title + grade + chips, compact */
.card-identifier-page .result-summary {
	gap: 0.55rem;
	min-width: 0;
}

.card-identifier-page .result-summary__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.65rem;
	min-width: 0;
	flex-wrap: nowrap;
}

.card-identifier-page .result-summary__titles {
	flex: 1 1 auto;
	min-width: 0;
}

.card-identifier-page .result-summary__top .result-score {
	flex: 0 0 auto;
	margin-right: 0;
}

.card-identifier-page .result-summary__titles {
	min-width: 0;
	gap: 0.18rem;
}

.card-identifier-page .result-summary__title {
	font-family: "Roboto Slab", "Roboto", Georgia, serif;
	font-size: 0.98rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #f8fbff;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-identifier-page .result-summary__file {
	/* Redundant with the card header eyebrow which already shows Upload #N + filename.
	   Hide in compact mode; re-show when card is expanded. */
	display: none;
}

.card-identifier-page .result-card.is-expanded .result-summary__file {
	display: block;
	font-size: 0.66rem !important;
	color: rgba(180, 200, 230, 0.5) !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Grade disc — the focal point */
.card-identifier-page .result-score {
	min-width: 56px !important;
	min-height: 56px !important;
	width: 56px;
	height: 56px;
	padding: 0 !important;
	border-radius: 50% !important;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.card-identifier-page .result-score__value {
	font-size: 1.15rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.02em;
}

.card-identifier-page .result-score__label {
	font-size: 0.5rem !important;
	letter-spacing: 0.18em;
	margin-top: 0.1rem;
}

.card-identifier-page .result-score.tier-high {
	background:
		conic-gradient(from 200deg, rgba(52, 211, 153, 0.4), rgba(34, 211, 238, 0.4), rgba(52, 211, 153, 0.4)),
		radial-gradient(70% 70% at 50% 50%, rgba(8, 14, 28, 0.98), rgba(8, 14, 28, 1));
	border-color: rgba(52, 211, 153, 0.45);
	box-shadow: 0 0 28px -6px rgba(52, 211, 153, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card-identifier-page .result-score.tier-med {
	background:
		conic-gradient(from 200deg, rgba(251, 191, 36, 0.4), rgba(244, 114, 182, 0.4), rgba(251, 191, 36, 0.4)),
		radial-gradient(70% 70% at 50% 50%, rgba(8, 14, 28, 0.98), rgba(8, 14, 28, 1));
	border-color: rgba(251, 191, 36, 0.4);
	box-shadow: 0 0 28px -6px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card-identifier-page .result-score.tier-low {
	background:
		conic-gradient(from 200deg, rgba(248, 113, 113, 0.4), rgba(244, 114, 182, 0.4), rgba(248, 113, 113, 0.4)),
		radial-gradient(70% 70% at 50% 50%, rgba(8, 14, 28, 0.98), rgba(8, 14, 28, 1));
	border-color: rgba(248, 113, 113, 0.4);
	box-shadow: 0 0 28px -6px rgba(248, 113, 113, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card-identifier-page .result-score.tier-na {
	background:
		conic-gradient(from 200deg, rgba(148, 163, 184, 0.25), rgba(125, 211, 252, 0.25), rgba(148, 163, 184, 0.25)),
		radial-gradient(70% 70% at 50% 50%, rgba(8, 14, 28, 0.98), rgba(8, 14, 28, 1));
	border-color: var(--ci-stroke-soft);
}

/* Chips row — compact pills */
.card-identifier-page .result-summary__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.15rem;
}

.card-identifier-page .pc-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.7);
	border: 1px solid var(--ci-stroke-soft);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(214, 226, 247, 0.85);
	white-space: nowrap;
}

.card-identifier-page .pc-confidence,
.card-identifier-page .pc-condition {
	display: inline-flex;
	align-items: center;
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(139, 92, 246, 0.2));
	border: 1px solid rgba(125, 211, 252, 0.35);
	color: #cfe9ff;
}

/* Pricing chips */
.card-identifier-page .result-summary__pricing,
.card-identifier-page .pc-pricing {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.2rem;
}

.card-identifier-page .pc-price-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.28rem 0.6rem;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(22, 163, 74, 0.18));
	border: 1px solid rgba(34, 197, 94, 0.32);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #bbf7d0;
}

.card-identifier-page .pc-price-chip.muted {
	background: rgba(15, 23, 42, 0.7);
	border-color: var(--ci-stroke-soft);
	color: rgba(214, 226, 247, 0.5);
}

/* Subgrade pills */
.card-identifier-page .pc-subgrade {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.5rem;
	border-radius: 8px;
	background: rgba(8, 14, 28, 0.7);
	border: 1px solid var(--ci-stroke-soft);
	font-size: 0.62rem;
}

.card-identifier-page .pc-subgrade-label {
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(186, 230, 253, 0.78);
}

.card-identifier-page .pc-subgrade-value {
	color: #f8fbff;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Sections (Identification / Pricing / Grading / Model Output) — the chips above
   already cover the high-signal info, so hide these sections by default in the
   compact view. Re-show smoothly only when the user expands the card. */
.card-identifier-page .result-sections {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	margin-top: 0;
	padding-right: 0.25rem;
	transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.card-identifier-page .result-card.is-expanded .result-sections {
	max-height: 360px;
	overflow-y: auto;
	scrollbar-width: thin;
	opacity: 1;
	margin-top: 0.6rem;
}

.card-identifier-page .result-card.is-expanded {
	max-height: none;
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page .result-sections { transition: none; }
}

/* Expand button (we add it via the cinematic CSS as a small chevron in the corner) */
.card-identifier-page .result-card .result-summary__top::after {
	content: '';
	display: none;
}

.card-identifier-page .result-section {
	grid-column: auto !important;
	padding: 0.7rem 0.85rem !important;
	border-radius: 12px !important;
	background: rgba(8, 14, 28, 0.55) !important;
	border-color: var(--ci-stroke-soft) !important;
}

.card-identifier-page .result-section__title {
	font-size: 0.62rem !important;
	letter-spacing: 0.18em !important;
	color: rgba(186, 230, 253, 0.72) !important;
}

.card-identifier-page .result-section__body {
	font-size: 0.78rem;
	color: rgba(214, 226, 247, 0.85);
	gap: 0.45rem !important;
}

/* Constrain ANY image inside the result-section body so nothing else can tower */
.card-identifier-page .result-section img,
.card-identifier-page .result-section .result-img,
.card-identifier-page .result-section__body img {
	max-height: 140px !important;
	width: auto !important;
	object-fit: contain !important;
	border-radius: 8px;
}

/* Bottom action area (Edit button below content) — keep it but ghost it */
.card-identifier-page .result-card .edit-card-btn,
.card-identifier-page .result-card .btn-edit-card,
.card-identifier-page .result-card button.edit-card {
	border-radius: 999px;
	background: rgba(15, 23, 42, 0.7);
	border: 1px solid var(--ci-stroke-soft);
	color: rgba(214, 226, 247, 0.85);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.45rem 0.95rem;
	text-transform: uppercase;
}

/* Selected state ring */
.card-identifier-page .result-card.selected {
	border-color: var(--ci-cyan) !important;
	box-shadow: 0 0 0 1px var(--ci-cyan), 0 30px 60px -28px rgba(56, 189, 248, 0.5) !important;
}

/* ---- Hide the raw JSON dump sections in the expanded view ----
   FRONT RAW DATA / IDENTIFICATION JSON / GRADING JSON are admin/debug only — they
   shouldn't appear in the user-facing detail. Hide via section data-key + summary. */
.card-identifier-page .result-card .result-section[data-section="modeldata"],
.card-identifier-page .result-card details.model-raw {
	display: none !important;
}

/* ---- Restyle the model-side-card / model-stat-grid / model-meta-grid ----
   These render inside an expanded card's "Grading" section showing per-axis
   numbers + chip tags. They had a bright pale background — switch to cinematic. */
.card-identifier-page .model-details {
	gap: 0.6rem !important;
}

.card-identifier-page .model-side-card,
.card-identifier-page .model-meta-card {
	background: rgba(8, 14, 28, 0.55) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	border-radius: 14px !important;
	padding: 0.7rem 0.85rem !important;
}

.card-identifier-page .model-side-card__title,
.card-identifier-page .model-meta-card h6 {
	font-size: 0.6rem !important;
	letter-spacing: 0.18em !important;
	color: rgba(186, 230, 253, 0.72) !important;
	font-weight: 700;
}

.card-identifier-page .model-stat-grid {
	grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)) !important;
	gap: 0.35rem 0.5rem !important;
}

.card-identifier-page .model-stat-grid dt {
	font-size: 0.55rem !important;
	letter-spacing: 0.14em !important;
	color: rgba(186, 230, 253, 0.62) !important;
	font-weight: 700;
	text-transform: uppercase;
}

.card-identifier-page .model-stat-grid dd {
	color: #f8fbff !important;
	font-size: 0.85rem !important;
	font-weight: 700;
	font-family: "Roboto Slab", "Roboto", Georgia, serif;
	font-variant-numeric: tabular-nums;
}

.card-identifier-page .model-meta-grid {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	gap: 0.55rem !important;
}

.card-identifier-page .model-meta-card__body {
	color: rgba(214, 226, 247, 0.85) !important;
	font-size: 0.75rem !important;
}

.card-identifier-page .model-chip {
	background: rgba(15, 23, 42, 0.7) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	color: rgba(214, 226, 247, 0.88) !important;
	border-radius: 10px !important;
	padding: 0.3rem 0.5rem !important;
	font-size: 0.66rem !important;
}

.card-identifier-page .model-chip--tag {
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.16), rgba(56, 189, 248, 0.08)) !important;
	border-color: rgba(125, 211, 252, 0.32) !important;
}

.card-identifier-page .model-chip--object {
	background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(139, 92, 246, 0.08)) !important;
	border-color: rgba(167, 139, 250, 0.32) !important;
}

.card-identifier-page .model-chip__meta {
	color: rgba(214, 226, 247, 0.55) !important;
	font-size: 0.6rem !important;
}

.card-identifier-page .model-chip-section__title {
	color: rgba(186, 230, 253, 0.72) !important;
	font-size: 0.6rem !important;
	letter-spacing: 0.16em !important;
}

.card-identifier-page .model-timings li {
	color: rgba(214, 226, 247, 0.82) !important;
}

.card-identifier-page .model-simple-list dt {
	font-size: 0.55rem !important;
	letter-spacing: 0.14em !important;
	color: rgba(186, 230, 253, 0.62) !important;
}

.card-identifier-page .model-simple-list dd {
	color: #f8fbff !important;
	font-size: 0.75rem !important;
	font-weight: 600;
}

/* ---- Restyle the per-axis grade pills (Identification body) ----
   The "CORNERS / 8.5 / EDGES / 7.5 / SURFACE / 9.5 / CENTERING / 8" block
   showing as plain dt/dd pairs in your screenshot. Make it a compact stat grid. */
.card-identifier-page .id-attr {
	display: grid !important;
	grid-template-columns: minmax(60px, 80px) 1fr;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	border-radius: 8px;
	background: rgba(8, 14, 28, 0.5);
	border: 1px solid var(--ci-stroke-soft);
	margin-bottom: 0.3rem;
}

.card-identifier-page .id-attr .ia-label {
	font-size: 0.58rem !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	color: rgba(186, 230, 253, 0.7) !important;
	font-weight: 700;
}

.card-identifier-page .id-attr .ia-value {
	font-size: 0.78rem !important;
	color: #f8fbff !important;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-identifier-page .id-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.4rem;
}

.card-identifier-page .id-links a.badge {
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.14), rgba(139, 92, 246, 0.14)) !important;
	border: 1px solid rgba(125, 211, 252, 0.32) !important;
	color: #cfe9ff !important;
	font-size: 0.65rem !important;
	padding: 0.32rem 0.6rem !important;
	border-radius: 999px !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.card-identifier-page .ident-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.5rem;
}

.card-identifier-page .ident-chip {
	background: rgba(15, 23, 42, 0.7) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	color: rgba(214, 226, 247, 0.85) !important;
	font-size: 0.65rem !important;
	padding: 0.25rem 0.55rem !important;
	border-radius: 999px !important;
}

/* ---- EDIT footer button (bottom of card) — restyle from "UPPERCASE CHUNK"
   to cinematic ghost pill ---- */
.card-identifier-page .result-card .edit-card-btn,
.card-identifier-page .result-card .card-edit-trigger,
.card-identifier-page .result-card .btn-edit-card,
.card-identifier-page .result-card .result-card__edit,
.card-identifier-page .result-card button.editBtn,
.card-identifier-page .result-card .card-edit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.55rem 1rem !important;
	border-radius: 999px !important;
	background: rgba(15, 23, 42, 0.7) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	color: rgba(214, 226, 247, 0.8) !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.card-identifier-page .result-card .edit-card-btn:hover,
.card-identifier-page .result-card .card-edit-trigger:hover,
.card-identifier-page .result-card .btn-edit-card:hover,
.card-identifier-page .result-card .result-card__edit:hover,
.card-identifier-page .result-card button.editBtn:hover,
.card-identifier-page .result-card .card-edit-btn:hover {
	background: rgba(56, 189, 248, 0.14) !important;
	border-color: rgba(125, 211, 252, 0.45) !important;
	color: #e0f2fe !important;
}

/* ---- Make sure result card fills its grid column even when content is short.
   With a single uploaded card the column was shrinking to image width. ---- */
.card-identifier-page #resultsContainer,
.card-identifier-page .results-list {
	width: 100% !important;
}

.card-identifier-page .result-card {
	width: auto !important;
	min-width: 0 !important;
}

/* When single column (1 card), don't let the card take the full row width —
   limit to a comfortable max so the layout doesn't look lonely. */
.card-identifier-page .results-list:not(.results-grid) .result-card:only-child {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Tighten the header strip: the empty band at top of each card was the
   default top-padding of the absolutely-positioned button row. Pull eyebrow up. ---- */
.card-identifier-page .result-card {
	padding-top: 0.85rem !important;
}

.card-identifier-page .result-card__meta {
	padding-top: 0 !important;
	min-height: 32px;
	align-items: center;
}

.card-identifier-page .result-card__eyebrow {
	font-size: 0.55rem !important;
	color: rgba(186, 230, 253, 0.72) !important;
}

/* ==========================================================================
   v3 — Cinematic Results Rebuild (2026-05-28)
   Goal: visually modern, fire animations, professional. Last in cascade so
   everything below wins. Drops the filter toolbar; the new ribbon header takes
   over.
   ========================================================================== */

/* Hide all the legacy controls; the search input + view-toggle buttons are
   kept in DOM solely so card-identifier.js's getElementById() calls don't
   throw. */
.card-identifier-page .ci-hidden-controls,
.card-identifier-page #resultsToolbar.ci-hidden-controls,
.card-identifier-page #resultsFloatingBar {
	display: none !important;
}

/* ---- NEW RIBBON HEADER ---- */
.card-identifier-page .ci-results__ribbon {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.4rem;
	padding: 1rem 1.4rem;
	margin-bottom: 1.1rem;
	border-radius: 20px;
	border: 1px solid var(--ci-stroke-soft);
	background:
		linear-gradient(135deg, rgba(56, 189, 248, 0.06), rgba(139, 92, 246, 0.06)),
		linear-gradient(155deg, rgba(15, 23, 42, 0.85), rgba(8, 14, 28, 0.78));
	box-shadow: 0 24px 50px -32px rgba(2, 6, 23, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	position: relative;
	overflow: hidden;
}

.card-identifier-page .ci-results__ribbon::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(50% 100% at 100% 50%, rgba(139, 92, 246, 0.16), transparent 70%);
	pointer-events: none;
}

.card-identifier-page .ci-results__title {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	min-width: 0;
	position: relative;
	z-index: 1;
}

.card-identifier-page .ci-results__heading {
	margin: 0;
	font-family: "Roboto Slab", "Roboto", Georgia, serif;
	font-size: clamp(1.35rem, 1.6vw + 0.7rem, 1.85rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	background: linear-gradient(110deg, #e0f2fe 0%, #93c5fd 30%, #c4b5fd 60%, #f0abfc 90%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-size: 220% 100%;
	animation: ci-title-shift 14s ease-in-out infinite;
}

.card-identifier-page .ci-results__counts {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.card-identifier-page .ci-stat {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05rem;
	padding: 0.55rem 0.95rem;
	border-radius: 14px;
	border: 1px solid var(--ci-stroke-soft);
	background: rgba(8, 14, 28, 0.7);
	min-width: 64px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card-identifier-page .ci-stat:hover {
	transform: translateY(-2px);
	border-color: rgba(125, 211, 252, 0.4);
	box-shadow: 0 18px 32px -22px rgba(56, 189, 248, 0.45);
}

.card-identifier-page .ci-stat strong {
	font-family: "Roboto Slab", "Roboto", Georgia, serif;
	font-size: 1.45rem;
	font-weight: 800;
	color: #f8fbff;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.card-identifier-page .ci-stat__label {
	font-size: 0.56rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(186, 230, 253, 0.7);
	font-weight: 700;
	margin-top: 0.2rem;
}

.card-identifier-page .ci-stat--selected strong { color: #bae6fd; text-shadow: 0 0 16px rgba(56, 189, 248, 0.55); }
.card-identifier-page .ci-stat--failed strong { color: #fda4af; text-shadow: 0 0 16px rgba(248, 113, 113, 0.45); }
.card-identifier-page .ci-stat--total strong { color: #e9d5ff; text-shadow: 0 0 16px rgba(167, 139, 250, 0.45); }

/* ---- RESULTS GRID — let the page breathe but use space ---- */
.card-identifier-page .results-list {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)) !important;
	gap: 1.1rem !important;
	width: 100%;
	align-items: stretch;
	perspective: 1200px;
}

@media (max-width: 720px) {
	.card-identifier-page .results-list {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Single card centers neatly, doesn't sit lonely at the left edge */
.card-identifier-page .results-list:has(> .result-card:only-child) {
	grid-template-columns: minmax(0, 560px) !important;
	justify-content: center;
}

/* ---- THE RESULT CARD — horizontal poster ---- */
.card-identifier-page #resultsContainer .result-card {
	display: grid !important;
	grid-template-columns: minmax(0, 180px) minmax(0, 1fr) !important;
	grid-template-rows: auto 1fr auto !important;
	grid-template-areas:
		"head head"
		"media body"
		"foot foot" !important;
	gap: 0.9rem 1rem !important;
	padding: 0.9rem 1.05rem 1rem !important;
	max-height: none !important;
	min-height: 280px;
	overflow: hidden !important;
	border-radius: 22px !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	background:
		linear-gradient(155deg, rgba(20, 30, 52, 0.92), rgba(8, 14, 28, 0.92)) !important;
	box-shadow: 0 30px 60px -34px rgba(2, 6, 23, 0.95) !important;
	transform-style: preserve-3d;
	will-change: transform;
	transform: translateZ(0);
	animation: ci-card-reveal-v3 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--card-i, 0) * 70ms);
	transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Holographic edge sheen */
.card-identifier-page #resultsContainer .result-card::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from 180deg at 50% 50%, rgba(56, 189, 248, 0.0) 0deg, rgba(56, 189, 248, 0.55) 90deg, rgba(139, 92, 246, 0.55) 180deg, rgba(244, 114, 182, 0.4) 270deg, rgba(56, 189, 248, 0.0) 360deg);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	z-index: 0;
}

.card-identifier-page #resultsContainer .result-card:hover {
	transform: translateY(-4px) rotateX(0.5deg) rotateY(-0.5deg);
	border-color: rgba(125, 211, 252, 0.45) !important;
	box-shadow: 0 40px 80px -32px rgba(14, 165, 233, 0.55) !important;
}

.card-identifier-page #resultsContainer .result-card:hover::before { opacity: 1; }

@keyframes ci-card-reveal-v3 {
	from {
		opacity: 0;
		transform: translateY(28px) translateZ(0) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) translateZ(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page #resultsContainer .result-card {
		animation: none;
		transition: none;
	}
	.card-identifier-page #resultsContainer .result-card:hover {
		transform: none;
	}
}

/* ---- CARD HEADER ROW ---- */
.card-identifier-page #resultsContainer .result-card__meta {
	grid-area: head !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
	gap: 0.65rem !important;
	min-height: 32px;
	padding: 0 6.4rem 0 2rem !important;
	margin: 0 !important;
	z-index: 2;
}

.card-identifier-page #resultsContainer .result-card__eyebrow {
	font-size: 0.55rem !important;
	letter-spacing: 0.22em !important;
	font-weight: 700 !important;
	color: rgba(186, 230, 253, 0.75) !important;
	text-transform: uppercase;
}

.card-identifier-page #resultsContainer .result-card__filename { display: none !important; }
.card-identifier-page #resultsContainer .result-summary__file { display: none !important; }

.card-identifier-page #resultsContainer .result-card__state {
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(45, 212, 191, 0.22)) !important;
	border: 1px solid rgba(52, 211, 153, 0.4) !important;
	color: #a7f3d0 !important;
	border-radius: 999px !important;
	font-size: 0.6rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	padding: 0.28rem 0.7rem !important;
	text-transform: uppercase;
}

.card-identifier-page #resultsContainer .result-card__state--error {
	background: linear-gradient(135deg, rgba(248, 113, 113, 0.24), rgba(244, 114, 182, 0.24)) !important;
	border-color: rgba(248, 113, 113, 0.4) !important;
	color: #fecaca !important;
}

/* ---- SHELL / OVERVIEW: re-grid into our areas ---- */
.card-identifier-page #resultsContainer .result-shell {
	display: contents !important;
}

.card-identifier-page #resultsContainer .result-overview {
	display: contents !important;
}

.card-identifier-page #resultsContainer .result-visual {
	grid-area: media !important;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	position: relative;
	z-index: 1;
}

.card-identifier-page #resultsContainer .result-summary {
	grid-area: body !important;
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.55rem !important;
	position: relative;
	z-index: 1;
}

/* ---- MEDIA: big constrained image, integrated grade orb overlay ---- */
.card-identifier-page #resultsContainer .result-gallery {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.4rem !important;
}

.card-identifier-page #resultsContainer .result-gallery__viewport {
	position: relative;
	width: 100%;
	height: 240px !important;
	max-height: 240px !important;
	border-radius: 16px !important;
	background:
		radial-gradient(80% 80% at 50% 0%, rgba(56, 189, 248, 0.12), transparent 60%),
		linear-gradient(165deg, rgba(8, 14, 28, 0.95), rgba(15, 23, 42, 0.75)) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	overflow: hidden !important;
	scroll-snap-type: x mandatory;
}

/* Subtle pan/scan effect on the active image */
.card-identifier-page #resultsContainer .result-gallery__viewport::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(8, 14, 28, 0.55) 100%);
	pointer-events: none;
	z-index: 1;
}

.card-identifier-page #resultsContainer .result-gallery__track {
	display: flex !important;
	flex-wrap: nowrap !important;
	height: 100%;
}

.card-identifier-page #resultsContainer .result-gallery__item {
	flex: 0 0 100% !important;
	min-width: 100% !important;
	height: 100% !important;
	padding: 0.5rem !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
	scroll-snap-align: start;
}

.card-identifier-page #resultsContainer .result-gallery__media {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.card-identifier-page #resultsContainer .result-gallery__img {
	max-height: 100% !important;
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	border-radius: 10px;
	border: 1px solid rgba(125, 211, 252, 0.18) !important;
	box-shadow: 0 14px 28px -18px rgba(2, 6, 23, 0.95) !important;
	transition: transform 0.5s ease;
}

.card-identifier-page #resultsContainer .result-card:hover .result-gallery__img {
	transform: scale(1.03);
}

.card-identifier-page #resultsContainer .result-gallery__caption {
	display: none !important; /* keep the viewport clean */
}

.card-identifier-page #resultsContainer .result-gallery__controls {
	display: flex !important;
	justify-content: center;
	gap: 0.35rem !important;
	margin-top: -1.5rem !important;
	position: relative;
	z-index: 3;
}

.card-identifier-page #resultsContainer .result-gallery__dots {
	display: inline-flex !important;
	gap: 0.3rem !important;
}

.card-identifier-page #resultsContainer .result-gallery__dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(186, 230, 253, 0.45) !important;
	background: rgba(8, 14, 28, 0.7) !important;
	padding: 0 !important;
	transition: background 0.2s ease, transform 0.2s ease;
}

.card-identifier-page #resultsContainer .result-gallery__dot.is-active {
	background: var(--ci-cyan) !important;
	border-color: var(--ci-cyan) !important;
	transform: scale(1.25);
	box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}

.card-identifier-page #resultsContainer .gallery-nav {
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	background: rgba(8, 14, 28, 0.85) !important;
	color: rgba(214, 226, 247, 0.78) !important;
	font-size: 0.8rem !important;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.card-identifier-page #resultsContainer .gallery-nav:hover:not(:disabled) {
	background: rgba(56, 189, 248, 0.18) !important;
	border-color: rgba(125, 211, 252, 0.55) !important;
}

.card-identifier-page #resultsContainer .gallery-nav:disabled { opacity: 0.3 !important; }

.card-identifier-page #resultsContainer .result-gallery__thumbs {
	display: flex !important;
	gap: 0.3rem !important;
	overflow-x: auto;
	padding: 0 !important;
}

.card-identifier-page #resultsContainer .result-gallery__thumb {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	cursor: pointer;
	flex: 0 0 auto;
}

.card-identifier-page #resultsContainer .result-gallery__thumb img {
	width: 32px !important;
	height: 44px !important;
	border-radius: 6px;
	border: 1px solid var(--ci-stroke-soft) !important;
	object-fit: cover;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-identifier-page #resultsContainer .result-gallery__thumb:hover img {
	transform: translateY(-1px);
}

.card-identifier-page #resultsContainer .result-gallery__thumb.is-active img {
	box-shadow: 0 0 0 2px var(--ci-cyan);
}

/* ---- TITLE + GRADE ORB ROW (BODY HEADER) ---- */
.card-identifier-page #resultsContainer .result-summary__top {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 0.65rem !important;
	flex-wrap: nowrap !important;
	min-width: 0;
}

.card-identifier-page #resultsContainer .result-summary__titles {
	flex: 1 1 auto;
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	gap: 0.2rem !important;
}

.card-identifier-page #resultsContainer .result-summary__title {
	font-family: "Roboto Slab", "Roboto", Georgia, serif !important;
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	line-height: 1.22 !important;
	color: #f8fbff !important;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---- GRADE ORB — the focal point ---- */
.card-identifier-page #resultsContainer .result-score {
	position: relative;
	flex: 0 0 auto;
	width: 64px !important;
	min-width: 64px !important;
	height: 64px !important;
	min-height: 64px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	isolation: isolate;
}

/* Conic ring + inner radial — combined background per tier */
.card-identifier-page #resultsContainer .result-score::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from var(--orb-angle, 0deg), var(--orb-c1, rgba(56, 189, 248, 0.6)), var(--orb-c2, rgba(139, 92, 246, 0.6)), var(--orb-c1, rgba(56, 189, 248, 0.6)));
	z-index: 0;
	animation: ci-orb-spin 8s linear infinite;
}

.card-identifier-page #resultsContainer .result-score::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 30%, rgba(30, 41, 60, 0.95), rgba(8, 14, 28, 1));
	z-index: 1;
}

.card-identifier-page #resultsContainer .result-score__value,
.card-identifier-page #resultsContainer .result-score__label {
	position: relative;
	z-index: 2;
}

.card-identifier-page #resultsContainer .result-score__value {
	font-size: 1.3rem !important;
	font-weight: 800 !important;
	letter-spacing: -0.03em !important;
	line-height: 1 !important;
	color: #f8fbff !important;
	text-shadow: 0 0 14px var(--orb-glow, rgba(56, 189, 248, 0.5));
}

.card-identifier-page #resultsContainer .result-score__label {
	font-size: 0.46rem !important;
	letter-spacing: 0.18em !important;
	margin-top: 0.15rem !important;
	color: rgba(186, 230, 253, 0.7) !important;
	font-weight: 700;
}

/* Per-tier orb colors */
.card-identifier-page #resultsContainer .result-score.tier-high { --orb-c1: rgba(52, 211, 153, 0.85); --orb-c2: rgba(34, 211, 238, 0.85); --orb-glow: rgba(52, 211, 153, 0.55); }
.card-identifier-page #resultsContainer .result-score.tier-med  { --orb-c1: rgba(251, 191, 36, 0.85); --orb-c2: rgba(244, 114, 182, 0.85); --orb-glow: rgba(251, 191, 36, 0.5); }
.card-identifier-page #resultsContainer .result-score.tier-low  { --orb-c1: rgba(248, 113, 113, 0.85); --orb-c2: rgba(244, 114, 182, 0.85); --orb-glow: rgba(248, 113, 113, 0.5); }
.card-identifier-page #resultsContainer .result-score.tier-na   { --orb-c1: rgba(148, 175, 215, 0.4);  --orb-c2: rgba(125, 211, 252, 0.4);  --orb-glow: rgba(148, 175, 215, 0.3); }

@keyframes ci-orb-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.card-identifier-page #resultsContainer .result-score::before { animation: none; }
}

/* ---- CHIPS / SUBGRADES / PRICING ---- */
.card-identifier-page #resultsContainer .result-summary__chips {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.28rem !important;
}

.card-identifier-page #resultsContainer .pc-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.55rem !important;
	border-radius: 999px !important;
	background: rgba(15, 23, 42, 0.7) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	font-size: 0.62rem !important;
	font-weight: 600 !important;
	color: rgba(214, 226, 247, 0.85) !important;
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.card-identifier-page #resultsContainer .result-summary__subgrades {
	display: flex !important;
	gap: 0.3rem !important;
	flex-wrap: wrap !important;
	padding: 0.5rem !important;
	border-radius: 12px !important;
	background: rgba(8, 14, 28, 0.55) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
}

.card-identifier-page #resultsContainer .pc-subgrade {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.3rem !important;
	padding: 0.3rem 0.5rem !important;
	border-radius: 8px !important;
	background: rgba(15, 23, 42, 0.85) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	font-size: 0.62rem !important;
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

.card-identifier-page #resultsContainer .pc-subgrade-label {
	font-weight: 800 !important;
	letter-spacing: 0.1em !important;
	color: rgba(186, 230, 253, 0.78) !important;
}

.card-identifier-page #resultsContainer .pc-subgrade-value {
	color: #f8fbff !important;
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums;
}

.card-identifier-page #resultsContainer .result-summary__flags {
	display: flex !important;
	gap: 0.3rem !important;
	flex-wrap: wrap !important;
}

.card-identifier-page #resultsContainer .pc-condition,
.card-identifier-page #resultsContainer .pc-confidence {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.2rem 0.55rem !important;
	border-radius: 999px !important;
	font-size: 0.6rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(139, 92, 246, 0.2)) !important;
	border: 1px solid rgba(125, 211, 252, 0.35) !important;
	color: #cfe9ff !important;
}

.card-identifier-page #resultsContainer .result-summary__pricing {
	display: flex !important;
	gap: 0.3rem !important;
	flex-wrap: wrap !important;
}

.card-identifier-page #resultsContainer .pc-price-chip {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0.28rem 0.6rem !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.18)) !important;
	border: 1px solid rgba(34, 197, 94, 0.35) !important;
	font-size: 0.64rem !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #bbf7d0 !important;
}

.card-identifier-page #resultsContainer .pc-price-chip.muted {
	background: rgba(15, 23, 42, 0.7) !important;
	border-color: var(--ci-stroke-soft) !important;
	color: rgba(214, 226, 247, 0.5) !important;
}

/* ---- CORNER ICON BUTTONS (Expand / Edit / Remove) ---- */
.card-identifier-page #resultsContainer .result-card .expand-btn,
.card-identifier-page #resultsContainer .result-card .edit-inline-btn,
.card-identifier-page #resultsContainer .result-card .remove-btn {
	position: absolute !important;
	top: 0.7rem !important;
	z-index: 4;
	width: 30px !important;
	height: 30px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	background: rgba(8, 14, 28, 0.8) !important;
	color: rgba(214, 226, 247, 0.78) !important;
	font-size: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.card-identifier-page #resultsContainer .result-card .remove-btn { right: 0.7rem !important; }
.card-identifier-page #resultsContainer .result-card .edit-inline-btn { right: 2.85rem !important; }
.card-identifier-page #resultsContainer .result-card .expand-btn { right: 5rem !important; }

.card-identifier-page #resultsContainer .result-card .edit-inline-btn:hover {
	background: rgba(56, 189, 248, 0.2) !important;
	border-color: rgba(125, 211, 252, 0.55) !important;
	color: #e0f2fe !important;
	transform: translateY(-1px);
}

.card-identifier-page #resultsContainer .result-card .remove-btn:hover {
	background: rgba(248, 113, 113, 0.22) !important;
	border-color: rgba(248, 113, 113, 0.55) !important;
	color: #fecaca !important;
	transform: translateY(-1px);
}

.card-identifier-page #resultsContainer .result-card .expand-btn:hover {
	background: rgba(139, 92, 246, 0.22) !important;
	border-color: rgba(167, 139, 250, 0.6) !important;
	color: #e9d5ff !important;
	transform: translateY(-1px);
}

.card-identifier-page #resultsContainer .result-card .edit-inline-btn::before { content: '\270E'; font-size: 0.78rem; line-height: 1; }
.card-identifier-page #resultsContainer .result-card .remove-btn::before { content: '\00D7'; font-size: 1.2rem; line-height: 1; font-weight: 300; }
.card-identifier-page #resultsContainer .result-card .expand-btn::before {
	content: '\25BE';
	font-size: 0.78rem;
	line-height: 1;
	transition: transform 0.3s ease;
}

.card-identifier-page #resultsContainer .result-card.is-expanded .expand-btn::before { transform: rotate(180deg); }
.card-identifier-page #resultsContainer .result-card.is-expanded .expand-btn {
	background: rgba(139, 92, 246, 0.28) !important;
	border-color: rgba(167, 139, 250, 0.65) !important;
	color: #e9d5ff !important;
}

/* Selection checkbox in the corner */
.card-identifier-page #resultsContainer .result-card .card-select-checkbox {
	position: absolute !important;
	top: 0.85rem !important;
	left: 0.85rem !important;
	z-index: 4;
	width: 16px !important;
	height: 16px !important;
	border-radius: 5px !important;
	border: 1px solid var(--ci-stroke-strong) !important;
	background: rgba(8, 14, 28, 0.85) !important;
}

.card-identifier-page #resultsContainer .result-card .card-select-checkbox:checked {
	background: linear-gradient(135deg, var(--ci-cyan), var(--ci-violet)) !important;
	border-color: transparent !important;
}

/* ---- EXPANDED SECTIONS ---- */
.card-identifier-page #resultsContainer .result-sections {
	grid-area: foot !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 0.5rem !important;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding-right: 0.25rem;
	transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.card-identifier-page #resultsContainer .result-card.is-expanded .result-sections {
	max-height: 380px;
	overflow-y: auto;
	scrollbar-width: thin;
	opacity: 1;
	margin-top: 0.4rem;
}

.card-identifier-page #resultsContainer .result-card.is-expanded {
	max-height: none !important;
}

.card-identifier-page #resultsContainer .result-section {
	padding: 0.75rem 0.95rem !important;
	border-radius: 12px !important;
	background: rgba(8, 14, 28, 0.6) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
}

.card-identifier-page #resultsContainer .result-section__title {
	font-size: 0.6rem !important;
	letter-spacing: 0.2em !important;
	color: rgba(186, 230, 253, 0.78) !important;
	font-weight: 700;
	text-transform: uppercase;
}

/* Hide raw JSON / debug-only sections */
.card-identifier-page #resultsContainer .result-section[data-section="modeldata"],
.card-identifier-page #resultsContainer details.model-raw { display: none !important; }

.card-identifier-page #resultsContainer .id-attr {
	display: grid !important;
	grid-template-columns: minmax(60px, 84px) 1fr;
	gap: 0.5rem;
	padding: 0.4rem 0.55rem;
	border-radius: 8px;
	background: rgba(15, 23, 42, 0.55);
	border: 1px solid var(--ci-stroke-soft);
	margin-bottom: 0.3rem;
}

.card-identifier-page #resultsContainer .id-attr .ia-label {
	font-size: 0.56rem !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase;
	color: rgba(186, 230, 253, 0.7) !important;
	font-weight: 700;
}

.card-identifier-page #resultsContainer .id-attr .ia-value {
	font-size: 0.78rem !important;
	color: #f8fbff !important;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* Restyle model panels (raw JSON area) */
.card-identifier-page #resultsContainer .model-side-card,
.card-identifier-page #resultsContainer .model-meta-card {
	background: rgba(8, 14, 28, 0.55) !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	border-radius: 12px !important;
}

.card-identifier-page #resultsContainer .model-stat-grid dd,
.card-identifier-page #resultsContainer .model-simple-list dd {
	color: #f8fbff !important;
	font-family: "Roboto Slab", "Roboto", Georgia, serif;
	font-weight: 700;
}

/* ---- HIDE the small bottom inline EDIT chunk that comes from the legacy
   attachEditFeatures path; the corner pencil button covers it. ---- */
.card-identifier-page #resultsContainer .result-card > .card-edit-form,
.card-identifier-page #resultsContainer .result-card > .edit-card-btn,
.card-identifier-page #resultsContainer .result-card > .card-edit-btn,
.card-identifier-page #resultsContainer .result-card > button.editBtn {
	display: none !important;
}

/* ---- STICKY ACTION BAR (already present, just retune for v3) ---- */
.card-identifier-page .ci-results__actions {
	position: sticky;
	bottom: 1rem;
	z-index: 8;
	margin-top: 1.4rem !important;
	padding: 0.75rem 1rem !important;
	border-radius: 999px !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	background: rgba(8, 14, 28, 0.82) !important;
	backdrop-filter: blur(18px) saturate(160%);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	box-shadow: 0 30px 60px -30px rgba(2, 6, 23, 0.95) !important;
	display: flex !important;
	gap: 0.55rem !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
}

.card-identifier-page .ci-results__actions .btn {
	border-radius: 999px !important;
	border: 1px solid var(--ci-stroke-soft) !important;
	background: rgba(15, 23, 42, 0.7) !important;
	color: #e2f3ff !important;
	min-width: 100px !important;
	padding: 0.5rem 1.05rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	font-size: 0.72rem !important;
	text-transform: uppercase;
	transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.card-identifier-page .ci-results__actions .btn:hover {
	transform: translateY(-2px);
	background: rgba(15, 23, 42, 0.85) !important;
	border-color: rgba(125, 211, 252, 0.45) !important;
}

.card-identifier-page #saveSubmissionButton {
	background: linear-gradient(135deg, var(--ci-cyan), var(--ci-violet)) !important;
	color: #04070f !important;
	border-color: transparent !important;
}

.card-identifier-page #generateInvoiceButton {
	background: linear-gradient(135deg, #34d399, #22d3ee) !important;
	color: #04070f !important;
	border-color: transparent !important;
}

/* ---- SHIMMER SWEEP across the orb every 6s (extra fire) ---- */
.card-identifier-page #resultsContainer .result-card:hover .result-score::after {
	background:
		radial-gradient(circle at 50% 30%, rgba(30, 41, 60, 0.95), rgba(8, 14, 28, 1)),
		linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%);
}

/* ---- MOBILE: single column, but keep horizontal poster layout ---- */
@media (max-width: 640px) {
	.card-identifier-page #resultsContainer .result-card {
		grid-template-columns: minmax(0, 140px) minmax(0, 1fr) !important;
		min-height: 240px;
	}

	.card-identifier-page #resultsContainer .result-gallery__viewport {
		height: 200px !important;
	}

	.card-identifier-page #resultsContainer .result-summary__title {
		font-size: 0.92rem !important;
	}

	.card-identifier-page #resultsContainer .result-score {
		width: 54px !important;
		min-width: 54px !important;
		height: 54px !important;
		min-height: 54px !important;
	}

	.card-identifier-page #resultsContainer .result-score__value {
		font-size: 1.05rem !important;
	}

	.card-identifier-page .ci-results__ribbon {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.8rem;
	}
}