/* =============================================================================
   Rock Identifier — Front-end Stylesheet
   All classes are namespaced with .rit- to avoid theme conflicts.
   Mobile-first: base styles target small screens; larger breakpoints via @media.
   No external framework dependency — pure CSS.
   ============================================================================= */

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
.rit-wrapper *,
.rit-wrapper *::before,
.rit-wrapper *::after {
	box-sizing: border-box;
}

.rit-wrapper {
	--rit-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--rit-radius:      12px;
	--rit-radius-sm:   8px;
	--rit-shadow:      0 2px 16px rgba(0,0,0,.08);
	--rit-shadow-md:   0 4px 24px rgba(0,0,0,.12);
	--rit-border:      #e2e8f0;
	--rit-bg:          #f8fafc;
	--rit-card-bg:     #ffffff;
	--rit-text:        #1e293b;
	--rit-text-muted:  #64748b;
	--rit-accent:      #4f46e5;
	--rit-accent-light:#ede9fe;
	--rit-green:       #16a34a;
	--rit-amber:       #d97706;
	--rit-red:         #dc2626;
	--rit-transition:  200ms ease;

	font-family: var(--rit-font);
	color:       var(--rit-text);
	line-height: 1.6;
	max-width:   760px;
	margin:      0 auto;
	padding:     0 16px;
}

.rit-hidden {
	display: none !important;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.rit-header {
	text-align: center;
	padding:    32px 16px 24px;
}

.rit-header-icon {
	font-size: 3rem;
	line-height: 1;
	margin-bottom: 8px;
}

.rit-title {
	font-size:   1.75rem;
	font-weight: 700;
	margin:      0 0 8px;
	color:       var(--rit-text);
}

.rit-subtitle {
	color:     var(--rit-text-muted);
	font-size: .95rem;
	margin:    0;
}

/* ── Drop Zone ─────────────────────────────────────────────────────────────── */
.rit-dropzone {
	position:      relative;
	border:        2px dashed var(--rit-border);
	border-radius: var(--rit-radius);
	background:    var(--rit-card-bg);
	cursor:        pointer;
	transition:    border-color var(--rit-transition), background var(--rit-transition);
	overflow:      hidden;
}

.rit-dropzone:hover,
.rit-dropzone:focus,
.rit-dropzone--active {
	border-color: var(--rit-accent);
	background:   var(--rit-accent-light);
	outline:      none;
}

.rit-dropzone-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	justify-content:center;
	padding:        40px 24px;
	pointer-events: none; /* Clicks go to the parent drop zone. */
	text-align:     center;
}

.rit-upload-icon {
	width:  52px;
	height: 52px;
	color:  var(--rit-accent);
	margin-bottom: 12px;
}

.rit-dropzone-label {
	font-size:   1rem;
	font-weight: 600;
	margin:      0 0 4px;
}

.rit-dropzone-sublabel,
.rit-dropzone-formats {
	font-size: .85rem;
	color:     var(--rit-text-muted);
	margin:    0;
}

/* ── Thumbnail preview strip ───────────────────────────────────────────────── */
.rit-preview-strip {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
	margin:    16px 0 8px;
	min-height: 0;
}

.rit-thumb {
	position:      relative;
	width:         88px;
	height:        88px;
	border-radius: var(--rit-radius-sm);
	overflow:      hidden;
	border:        2px solid var(--rit-border);
	flex-shrink:   0;
}

.rit-thumb-img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
}

.rit-thumb-remove {
	position:      absolute;
	top:           4px;
	right:         4px;
	background:    rgba(0,0,0,.65);
	border:        none;
	border-radius: 50%;
	width:         22px;
	height:        22px;
	color:         #fff;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	padding:       0;
	transition:    background var(--rit-transition);
}

.rit-thumb-remove:hover {
	background: var(--rit-red);
}

/* ── Image counter ─────────────────────────────────────────────────────────── */
.rit-image-counter {
	font-size: .85rem;
	color:     var(--rit-text-muted);
	margin:    4px 0 0;
}

/* ── Collapsible details section ───────────────────────────────────────────── */
.rit-details-section {
	background:    var(--rit-card-bg);
	border:        1px solid var(--rit-border);
	border-radius: var(--rit-radius);
	margin:        20px 0;
	overflow:      hidden;
}

.rit-details-summary {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     14px 18px;
	cursor:      pointer;
	font-weight: 600;
	font-size:   .95rem;
	list-style:  none;
	user-select: none;
}

.rit-details-summary::-webkit-details-marker { display: none; }

.rit-details-summary:hover {
	background: var(--rit-bg);
}

.rit-details-chevron {
	margin-left: auto;
	width:       18px;
	height:      18px;
	border-right:  2px solid var(--rit-text-muted);
	border-bottom: 2px solid var(--rit-text-muted);
	transform: rotate(45deg);
	transition: transform var(--rit-transition);
	flex-shrink: 0;
}

.rit-details-section[open] .rit-details-chevron {
	transform: rotate(-135deg);
}

.rit-details-body {
	padding:    4px 18px 18px;
	display:    grid;
	gap:        14px;
}

/* ── Form fields ───────────────────────────────────────────────────────────── */
.rit-field-group {
	display:        flex;
	flex-direction: column;
	gap:            5px;
}

.rit-label {
	font-size:   .875rem;
	font-weight: 600;
	color:       var(--rit-text);
}

.rit-label-hint {
	font-weight: 400;
	color:       var(--rit-text-muted);
	font-size:   .8rem;
}

.rit-input,
.rit-select,
.rit-textarea {
	padding:       10px 12px;
	border:        1px solid var(--rit-border);
	border-radius: var(--rit-radius-sm);
	font-size:     .9rem;
	font-family:   var(--rit-font);
	color:         var(--rit-text);
	background:    var(--rit-card-bg);
	transition:    border-color var(--rit-transition), box-shadow var(--rit-transition);
	width:         100%;
}

.rit-input:focus,
.rit-select:focus,
.rit-textarea:focus {
	outline:      none;
	border-color: var(--rit-accent);
	box-shadow:   0 0 0 3px rgba(79,70,229,.15);
}

.rit-textarea {
	resize:      vertical;
	min-height:  72px;
}

.rit-char-counter {
	font-size: .78rem;
	color:     var(--rit-text-muted);
	align-self: flex-end;
}

/* ── Error box ─────────────────────────────────────────────────────────────── */
.rit-error-box {
	background:    #fef2f2;
	border:        1px solid #fca5a5;
	border-radius: var(--rit-radius-sm);
	color:         #b91c1c;
	padding:       12px 16px;
	font-size:     .9rem;
	margin:        16px 0;
}

/* ── Submit button ─────────────────────────────────────────────────────────── */
.rit-submit-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             8px;
	width:           100%;
	padding:         16px 24px;
	background:      var(--rit-accent);
	color:           #fff;
	border:          none;
	border-radius:   var(--rit-radius);
	font-size:       1.05rem;
	font-weight:     700;
	font-family:     var(--rit-font);
	cursor:          pointer;
	transition:      background var(--rit-transition), transform var(--rit-transition), opacity var(--rit-transition);
	margin-top:      8px;
}

.rit-submit-btn:hover:not(:disabled) {
	background: #4338ca;
}

.rit-submit-btn:active:not(:disabled) {
	transform: scale(.98);
}

.rit-submit-btn:disabled {
	opacity: .65;
	cursor:  not-allowed;
}

.rit-helper-text {
	text-align: center;
	font-size:  .82rem;
	color:      var(--rit-text-muted);
	margin:     8px 0 0;
}

/* ── Loading overlay ───────────────────────────────────────────────────────── */
.rit-loading-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(15,23,42,.55);
	display:         flex;
	align-items:     center;
	justify-content: center;
	z-index:         9999;
	backdrop-filter: blur(3px);
}

.rit-loading-card {
	background:    var(--rit-card-bg);
	border-radius: var(--rit-radius);
	padding:       36px 48px;
	text-align:    center;
	max-width:     320px;
	box-shadow:    var(--rit-shadow-md);
}

.rit-spinner {
	width:         48px;
	height:        48px;
	border:        4px solid var(--rit-accent-light);
	border-top-color: var(--rit-accent);
	border-radius: 50%;
	animation:     rit-spin 0.8s linear infinite;
	margin:        0 auto 16px;
}

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

.rit-loading-message {
	font-size:   .9rem;
	color:       var(--rit-text-muted);
	margin:      0;
	min-height:  1.4em;
	transition:  opacity .3s;
}

/* ── Result Card ───────────────────────────────────────────────────────────── */
.rit-result-section {
	padding-bottom: 40px;
}

.rit-result-card {
	background:    var(--rit-card-bg);
	border:        1px solid var(--rit-border);
	border-radius: var(--rit-radius);
	box-shadow:    var(--rit-shadow);
	overflow:      hidden;
}

/* Scope / quality notices: same card chrome as a full ID, fewer grid sections */
.rit-result-card--notice {
	border-color: #c7d2fe;
	box-shadow:   0 4px 24px rgba(79, 70, 229, 0.08);
}

.rit-result-card--notice.rit-result-card--poor-image {
	border-color: #fcd34d;
	box-shadow:   0 4px 24px rgba(245, 158, 11, 0.1);
}

.rit-result-card--notice .rit-genuineness-banner {
	display: none !important;
}

.rit-type-not-applicable {
	background: #eef2ff;
	color:      #4338ca;
}

.rit-type-poor-image {
	background: #fffbeb;
	color:      #b45309;
}

/* Header */
.rit-result-header {
	display:        flex;
	align-items:    flex-start;
	justify-content:space-between;
	padding:        24px 24px 20px;
	background:     linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
	border-bottom:  1px solid var(--rit-border);
	gap:            16px;
}

.rit-result-header-content {
	flex: 1;
	min-width: 0;
}

.rit-rock-name {
	font-size:   1.6rem;
	font-weight: 800;
	margin:      0 0 4px;
	color:       var(--rit-text);
	word-break:  break-word;
}

.rit-scientific-name {
	font-style: italic;
	color:      var(--rit-text-muted);
	font-size:  .95rem;
	margin:     0 0 10px;
}

.rit-badges-row {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px;
	margin-top:6px;
}

.rit-result-header-icon {
	font-size:   2.5rem;
	flex-shrink: 0;
}

/* Type badges */
.rit-type-badge,
.rit-subtype-badge {
	display:       inline-block;
	padding:       4px 12px;
	border-radius: 999px;
	font-size:     .78rem;
	font-weight:   700;
	text-transform:uppercase;
	letter-spacing:.04em;
}

.rit-type-igneous    { background: #fff0e6; color: #c05621; }
.rit-type-sedimentary{ background: #fffbeb; color: #92400e; }
.rit-type-metamorphic{ background: #f5f3ff; color: #6d28d9; }
.rit-type-mineral    { background: #eff6ff; color: #1d4ed8; }
.rit-type-gemstone   { background: #f0fdfa; color: #0f766e; }
.rit-type-fossil     { background: #fff7ed; color: #9a3412; }
.rit-type-coral      { background: #ecfeff; color: #0e7490; }
.rit-type-metal      { background: #f1f5f9; color: #334155; }
.rit-type-granite    { background: #fff7ed; color: #9a3412; }
.rit-type-obsidian   { background: #e2e8f0; color: #0f172a; }
.rit-type-jade       { background: #ecfdf5; color: #047857; }
.rit-type-sapphire   { background: #eff6ff; color: #1d4ed8; }
.rit-type-emerald    { background: #ecfdf5; color: #15803d; }
.rit-type-opal       { background: #fdf2f8; color: #9d174d; }
.rit-type-garnet     { background: #fff7ed; color: #9a3412; }
.rit-type-moonstone  { background: #f8fafc; color: #334155; }
.rit-type-fluorite   { background: #f5f3ff; color: #6d28d9; }
.rit-type-topaz      { background: #eff6ff; color: #0369a1; }
.rit-type-tourmaline { background: #ecfdf5; color: #15803d; }
.rit-type-citrine    { background: #fffbeb; color: #ca8a04; }
.rit-type-chalcedony { background: #f8fafc; color: #475569; }
.rit-type-aquamarine { background: #e0f2fe; color: #0284c7; }
.rit-type-malachite  { background: #f0fdf4; color: #166534; }
.rit-type-onyx       { background: #f8fafc; color: #0f172a; }
.rit-type-lapis-lazuli { background: #eef2ff; color: #1e3a8a; }
.rit-type-selenite   { background: #f8fafc; color: #334155; }
.rit-type-rhodonite  { background: #fff1f2; color: #9f1239; }
.rit-type-sodalite   { background: #eff6ff; color: #1d4ed8; }
.rit-type-unknown    { background: #f1f5f9; color: #475569; }

.rit-subtype-badge {
	background: #f1f5f9;
	color:      #475569;
	font-weight: 500;
	text-transform: none;
}

/* ── Confidence meter ──────────────────────────────────────────────────────── */
.rit-confidence-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--rit-border);
}

.rit-confidence-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   10px;
}

.rit-confidence-label {
	font-weight: 600;
	font-size:   .9rem;
}

.rit-confidence-value {
	font-size:   1.1rem;
	font-weight: 700;
}

.rit-confidence-track {
	height:        10px;
	background:    #e2e8f0;
	border-radius: 999px;
	overflow:      hidden;
}

.rit-confidence-bar {
	height:        100%;
	border-radius: 999px;
	transition:    width 1s cubic-bezier(.4,0,.2,1), background .4s;
}

.rit-conf-high { background: var(--rit-green); }
.rit-conf-mid  { background: var(--rit-amber); }
.rit-conf-low  { background: var(--rit-red);   }

.rit-confidence-reason {
	margin:    8px 0 0;
	font-size: .85rem;
	color:     var(--rit-text-muted);
}

.rit-low-confidence-callout {
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	margin-top:    12px;
	background:    #fff7ed;
	border:        1px solid #fed7aa;
	border-radius: var(--rit-radius-sm);
	padding:       10px 14px;
	font-size:     .85rem;
	color:         #9a3412;
}

/* ── Info grid ─────────────────────────────────────────────────────────────── */
.rit-info-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1px;
	background:            var(--rit-border);
	border-top:            1px solid var(--rit-border);
	border-bottom:         1px solid var(--rit-border);
}

.rit-info-card {
	background: var(--rit-card-bg);
	padding:    18px 20px;
}

.rit-info-full {
	grid-column: 1 / -1;
}

.rit-info-heading {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-size:   .8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:       var(--rit-text-muted);
	margin:      0 0 8px;
}

.rit-info-value {
	font-size:   1rem;
	font-weight: 600;
	margin:      0;
	color:       var(--rit-text);
}

/* ── Tag pills ─────────────────────────────────────────────────────────────── */
.rit-tag-pills {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
}

.rit-tag-pill {
	display:       inline-block;
	padding:       4px 10px;
	background:    var(--rit-bg);
	border:        1px solid var(--rit-border);
	border-radius: 999px;
	font-size:     .82rem;
	color:         var(--rit-text);
}

/* ── Color swatches ────────────────────────────────────────────────────────── */
.rit-color-swatches {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px;
}

.rit-color-swatch {
	display:     flex;
	align-items: center;
	gap:         6px;
}

.rit-color-dot {
	width:         18px;
	height:        18px;
	border-radius: 50%;
	border:        1px solid rgba(0,0,0,.12);
	flex-shrink:   0;
}

.rit-color-label {
	font-size: .85rem;
	color:     var(--rit-text);
	text-transform: capitalize;
}

/* ── Rarity / Value badges ─────────────────────────────────────────────────── */
.rit-rarity-badge,
.rit-value-badge {
	display:       inline-block;
	padding:       4px 12px;
	border-radius: 999px;
	font-size:     .82rem;
	font-weight:   700;
}

/* Rarity */
.rit-rarity-very-common { background: #f0fdf4; color: #15803d; }
.rit-rarity-common      { background: #f0fdf4; color: #16a34a; }
.rit-rarity-uncommon    { background: #fffbeb; color: #b45309; }
.rit-rarity-rare        { background: #fdf4ff; color: #9333ea; }
.rit-rarity-very-rare   { background: #fff0f0; color: #dc2626; }

/* Collector value */
.rit-value-low       { background: #f1f5f9; color: #475569; }
.rit-value-moderate  { background: #eff6ff; color: #1d4ed8; }
.rit-value-high      { background: #f0fdf4; color: #15803d; }
.rit-value-very-high { background: #fdf4ff; color: #9333ea; }
.rit-value-potentially-significant { background: #fff7ed; color: #c2410c; }

/* ── Key properties ────────────────────────────────────────────────────────── */
.rit-properties-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--rit-border);
}

.rit-section-heading {
	display:     flex;
	align-items: center;
	gap:         8px;
	font-size:   1rem;
	font-weight: 700;
	margin:      0 0 14px;
	color:       var(--rit-text);
}

.rit-properties-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        8px;
}

@media (min-width: 480px) {
	.rit-properties-list {
		grid-template-columns: 1fr 1fr;
	}
}

.rit-property-item {
	display:     flex;
	align-items: flex-start;
	gap:         8px;
	font-size:   .9rem;
	background:  var(--rit-bg);
	padding:     10px 12px;
	border-radius: var(--rit-radius-sm);
	border:      1px solid var(--rit-border);
}

.rit-prop-bullet {
	color:      var(--rit-accent);
	flex-shrink: 0;
	font-size:   .75rem;
	margin-top:  2px;
}

/* ── Similar rocks ─────────────────────────────────────────────────────────── */
.rit-similar-section {
	border-bottom: 1px solid var(--rit-border);
}

.rit-section-summary {
	display:     flex;
	align-items: center;
	gap:         8px;
	padding:     16px 24px;
	cursor:      pointer;
	font-weight: 700;
	font-size:   1rem;
	list-style:  none;
	user-select: none;
}

.rit-section-summary::-webkit-details-marker { display: none; }
.rit-section-summary:hover { background: var(--rit-bg); }

.rit-similar-section[open] .rit-details-chevron {
	transform: rotate(-135deg);
}

.rit-similar-list {
	padding:    0 24px 20px;
	display:    grid;
	gap:        12px;
}

.rit-similar-item {
	background:    var(--rit-bg);
	border:        1px solid var(--rit-border);
	border-radius: var(--rit-radius-sm);
	padding:       12px 14px;
}

.rit-similar-name {
	display:     block;
	margin-bottom: 4px;
	color:       var(--rit-text);
	font-size:   .95rem;
}

.rit-similar-diff {
	margin:    0;
	font-size: .85rem;
	color:     var(--rit-text-muted);
}

/* ── Alternative IDs ───────────────────────────────────────────────────────── */
.rit-alt-ids-section {
	padding: 20px 24px;
	border-bottom: 1px solid var(--rit-border);
}

.rit-alt-ids-list {
	display: grid;
	gap:     10px;
}

@media (min-width: 560px) {
	.rit-alt-ids-list {
		grid-template-columns: 1fr 1fr;
	}
}

.rit-alt-card {
	background:    var(--rit-bg);
	border:        1px solid var(--rit-border);
	border-radius: var(--rit-radius-sm);
	padding:       12px 14px;
}

.rit-alt-header {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	margin-bottom:   6px;
	gap:             8px;
}

.rit-alt-name {
	font-weight: 600;
	font-size:   .9rem;
	min-width:   0;
	word-break:  break-word;
}

.rit-alt-conf {
	font-size:     .78rem;
	font-weight:   700;
	padding:       2px 8px;
	border-radius: 999px;
	flex-shrink:   0;
}

.rit-conf-high.rit-alt-conf { background: #dcfce7; color: var(--rit-green); }
.rit-conf-mid.rit-alt-conf  { background: #fef3c7; color: var(--rit-amber); }
.rit-conf-low.rit-alt-conf  { background: #fee2e2; color: var(--rit-red);   }

.rit-alt-reason {
	margin:    0;
	font-size: .83rem;
	color:     var(--rit-text-muted);
}

/* ── Collection tip ────────────────────────────────────────────────────────── */
.rit-tip-box {
	margin: 0;
	background:    #fffbeb;
	border-top:    1px solid var(--rit-border);
	border-bottom: 1px solid var(--rit-border);
	padding:       16px 24px;
}

.rit-tip-header {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 6px;
}

.rit-tip-icon {
	font-size: 1.1rem;
}

.rit-tip-box p {
	margin:    0;
	font-size: .9rem;
	color:     var(--rit-text);
}

/* ── Image quality note ────────────────────────────────────────────────────── */
.rit-quality-note {
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	padding:       12px 24px;
	background:    #f0f9ff;
	border-bottom: 1px solid var(--rit-border);
	font-size:     .85rem;
	color:         #075985;
}

/* ── Result action buttons ─────────────────────────────────────────────────── */
.rit-result-actions {
	display:   flex;
	flex-wrap: wrap;
	gap:       12px;
	padding:   20px 24px;
}

.rit-btn-primary,
.rit-btn-secondary {
	display:     inline-flex;
	align-items: center;
	gap:         6px;
	padding:     11px 20px;
	border-radius: var(--rit-radius-sm);
	font-size:   .9rem;
	font-weight: 600;
	font-family: var(--rit-font);
	cursor:      pointer;
	border:      none;
	transition:  background var(--rit-transition), transform var(--rit-transition);
}

.rit-btn-primary {
	background: var(--rit-accent);
	color:      #fff;
}

.rit-btn-primary:hover {
	background: #4338ca;
}

.rit-btn-secondary {
	background: var(--rit-bg);
	color:      var(--rit-text);
	border:     1px solid var(--rit-border);
}

.rit-btn-secondary:hover {
	background: #e2e8f0;
}

.rit-btn-primary:active,
.rit-btn-secondary:active {
	transform: scale(.97);
}

.rit-share-toast {
	text-align: center;
	font-size:  .85rem;
	color:      var(--rit-green);
	padding:    0 24px 16px;
	margin:     0;
}

/* ── Responsive overrides ──────────────────────────────────────────────────── */
@media (max-width: 560px) {
	.rit-info-grid {
		grid-template-columns: 1fr;
	}

	.rit-info-full {
		grid-column: 1;
	}

	.rit-result-header {
		flex-direction: column;
	}

	.rit-result-header-icon {
		display: none;
	}

	.rit-rock-name {
		font-size: 1.35rem;
	}

	.rit-result-actions {
		flex-direction: column;
	}

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

@media (min-width: 640px) {
	.rit-details-body {
		grid-template-columns: 1fr 1fr;
	}
}

/* ── Pearl / multi-tool extras ─────────────────────────────────────────────── */
.rit-tag-pill {
	display: inline-block;
	padding: 4px 12px;
	background: var(--rit-bg);
	border: 1px solid var(--rit-border);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
}

.rit-genuineness-banner {
	margin: 0;
	padding: 14px 18px;
	font-weight: 700;
	font-size: 1rem;
	text-align: center;
	border-bottom: 1px solid var(--rit-border);
}

.rit-genuineness--definitely-genuine { background: #14532d; color: #fff; }
.rit-genuineness--very-likely-genuine { background: #dcfce7; color: #166534; }
.rit-genuineness--possibly-genuine { background: #fef3c7; color: #92400e; }
.rit-genuineness--likely-imitation { background: #ffedd5; color: #c2410c; }
.rit-genuineness--definitely-imitation { background: #fee2e2; color: #991b1b; }
.rit-genuineness--unknown { background: var(--rit-bg); color: var(--rit-text); }

.rit-auth-tip-box {
	margin: 0;
	background: #eff6ff;
	border-top: 1px solid var(--rit-border);
	border-bottom: 1px solid var(--rit-border);
	padding: 16px 24px;
}

.rit-overtone-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rit-overtone-dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}

.rit-luster-stars {
	letter-spacing: 3px;
	font-size: 1.1rem;
}

/* Pearl API `type` values (underscores → hyphens) */
.rit-type-natural-pearl { background: #ecfdf5; color: #047857; }
.rit-type-cultured-saltwater-pearl { background: #e0f2fe; color: #0369a1; }
.rit-type-cultured-freshwater-pearl { background: #f0fdf4; color: #15803d; }
.rit-type-imitation-pearl { background: #fee2e2; color: #991b1b; }
.rit-type-shell-pearl { background: #fef3c7; color: #b45309; }
.rit-type-collectible_marble { background: #faf5ff; color: #6d28d9; }
.rit-type-unknown { background: #f1f5f9; color: #475569; }