/* Ximilar result renderer styles — served statically (was injectStyles() in
   ximilar-results.js). Loaded by server-rendered record pages; the JS file
   keeps its copy for the live grading flow. */
/* ── Command Center design system ─────────────────────────────
   Dark is the default (matches the Command Center layout).
   [data-xim-theme="light"] flips every token to the light palette. */
.ximilar-result {
    --xg-bg: #0b1424;
    --xg-panel: #121c31;
    --xg-subtle: #0e1728;
    --xg-border: #243356;
    --xg-text: #e9effc;
    --xg-text-2: #b9c5dc;
    --xg-muted: #8291ad;
    --xg-accent: #22d3ee;
    --xg-accent-contrast: #062a30;
    --xg-accent-soft: rgba(34,211,238,0.10);
    --xg-accent-line: rgba(34,211,238,0.35);
    --xg-good: #34d399;
    --xg-good-soft: rgba(52,211,153,0.10);
    --xg-good-line: rgba(52,211,153,0.35);
    --xg-good-strong: #6ee7a7;
    --xg-warn: #fbbf24;
    --xg-warn-soft: rgba(251,191,36,0.10);
    --xg-warn-line: rgba(251,191,36,0.35);
    --xg-warn-strong: #fcd34d;
    --xg-bad: #f87171;
    --xg-bad-soft: rgba(248,113,113,0.10);
    --xg-bad-line: rgba(248,113,113,0.35);
    --xg-info: #60a5fa;
    --xg-info-soft: rgba(96,165,250,0.10);
    --xg-info-line: rgba(96,165,250,0.35);
    --xg-shadow: 0 12px 32px rgba(0,0,0,0.35);
    --xg-ring-track: #1c2a47;
    --xg-chip-bg: rgba(255,255,255,0.05);
    background: var(--xg-bg);
    color: var(--xg-text);
    border: 1px solid var(--xg-border);
    border-radius: 20px;
    padding: 22px;
}
.ximilar-result[data-xim-theme="light"] {
    --xg-bg: #eef2f7;
    --xg-panel: #ffffff;
    --xg-subtle: #f6f8fb;
    --xg-border: #dfe6ef;
    --xg-text: #0f172a;
    --xg-text-2: #3b4a63;
    --xg-muted: #64748b;
    --xg-accent: #0891b2;
    --xg-accent-soft: rgba(8,145,178,0.08);
    --xg-accent-line: rgba(8,145,178,0.30);
    --xg-good: #059669;
    --xg-good-soft: #ecfdf5;
    --xg-good-line: #bbf7d0;
    --xg-good-strong: #047857;
    --xg-warn: #d97706;
    --xg-warn-soft: #fffbeb;
    --xg-warn-line: #fde68a;
    --xg-warn-strong: #92400e;
    --xg-bad: #dc2626;
    --xg-bad-soft: #fef2f2;
    --xg-bad-line: #fecaca;
    --xg-info: #2563eb;
    --xg-info-soft: #eff6ff;
    --xg-info-line: #bfdbfe;
    --xg-shadow: 0 6px 20px rgba(15,23,42,0.08);
    --xg-ring-track: #e6ecf4;
    --xg-chip-bg: #f1f5f9;
}
.ximilar-result .ximilar-result-card,
.ximilar-result .ximilar-result-header {
    background: var(--xg-panel);
    border-color: var(--xg-border);
}
.ximilar-result .ximilar-result-card > h3,
.ximilar-result .ximilar-result-card h3:first-child {
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 12.5px !important;
    color: var(--xg-accent) !important;
}
.ximilar-result a { color: var(--xg-info); }
/* theme toggle — segmented Light | Dark switch */
.xim-theme-toggle {
    display: inline-flex; align-items: center; gap: 0;
    border-radius: 8px; cursor: pointer; overflow: hidden;
    background: var(--xg-subtle); border: 1px solid var(--xg-border);
    flex-shrink: 0; transition: all .2s;
}
.xim-theme-toggle:hover { border-color: var(--xg-accent-line); }
.xim-theme-toggle span {
    padding: 5px 14px; font-size: 12px; font-weight: 700;
    color: var(--xg-muted); transition: all .15s; user-select: none;
    display: inline-flex; align-items: center; gap: 5px;
}
.xim-theme-toggle span.active {
    background: var(--xg-accent); color: #fff;
}
.ximilar-result[data-xim-theme="dark"] .xim-theme-toggle .xt-light { color: var(--xg-muted); }
.ximilar-result[data-xim-theme="dark"] .xim-theme-toggle .xt-dark { color: var(--xg-text); background: var(--xg-subtle); }
.ximilar-result[data-xim-theme="light"] .xim-theme-toggle .xt-light { color: var(--xg-text); background: var(--xg-subtle); }
.ximilar-result[data-xim-theme="light"] .xim-theme-toggle .xt-dark { color: var(--xg-muted); }
/* grade ring */
.xg-ring {
    --pct: 0; --ring-color: var(--xg-accent);
    width: 168px; height: 168px; border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--xg-ring-track) 0);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
}
.xg-ring-inner {
    width: calc(100% - 22px); height: calc(100% - 22px); border-radius: 50%;
    background: var(--xg-panel); border: 1px solid var(--xg-border);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 10px;
}
.xg-ring-grade { font-size: 44px; font-weight: 800; line-height: 1; color: var(--ring-color); }
.xg-ring-label { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--xg-accent); margin-top: 6px; }
.xg-ring-sub { font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--xg-muted); margin-top: 3px; }
/* KPI strip */
.xg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.xg-kpi { background: var(--xg-panel); border: 1px solid var(--xg-border); border-top: 2px solid var(--xg-accent-line); border-radius: 12px; padding: 12px 14px; }
.xg-kpi-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--xg-muted); }
.xg-kpi-value { font-size: 22px; font-weight: 800; color: var(--xg-text); margin-top: 3px; line-height: 1.15; }
.xg-kpi-value small { font-size: 12px; color: var(--xg-muted); font-weight: 700; }
.xg-kpi-sub { font-size: 10.5px; color: var(--xg-muted); margin-top: 2px; }
/* subgrade rows with severity */
.xg-sgrow { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.xg-sgrow:last-child { margin-bottom: 0; }
.xg-sgrow .xim-bar-label { width: 92px; flex-shrink: 0; }
.xg-sgrow .xim-bar-val { width: 40px; flex-shrink: 0; text-align: right; }
/* Fixed-width severity badge so every row aligns identically
   regardless of label length (Fair / Very Good / Excellent ...). */
.xg-sev { display: inline-flex; align-items: center; justify-content: center;
    width: 92px; flex-shrink: 0; padding: 3px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.02em; color: #fff;
    text-align: center; white-space: nowrap; box-sizing: border-box; }
/* subgrade mobile rules are in the main mobile block below */
.xim-metric { background: var(--xg-panel); padding: 12px 10px 10px; border-radius: 6px; text-align: center; border: 1px solid var(--xg-border); overflow: hidden; }
.xim-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 16px; }
.xim-mkt-links { display: flex; flex-wrap: wrap; gap: 8px; }
.xim-mkt-links a { flex: 0 0 auto; }
@media (max-width: 640px) { .xim-metric-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (max-width: 640px) { .xim-metric { padding: 8px 6px 7px; } }
@media (max-width: 640px) { .xim-metric__value { font-size: 14px; } }
@media (max-width: 640px) { .xim-metric__label { font-size: 10px; } }
.xim-metric__label { font-size: 11px; color: var(--xg-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; }
.xim-metric__value { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--xg-text); }
.xim-metric__sub { font-size: 11px; color: var(--xg-muted); margin-top: 2px; font-weight: 500; }
.xim-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--xg-subtle); color: var(--xg-text-2); border: 1px solid var(--xg-border); }
.ucid-chip, .ucid-stat { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.3; border: 1px solid transparent; }
.ucid-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; }
.xim-chip b { font-weight: 700; color: var(--xg-text); }
.xim-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.xim-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.xim-bar-row:last-child { margin-bottom: 0; }
.xim-bar-label { width: 92px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--xg-text-2); }
.xim-bar-track { flex: 1; height: 9px; background: var(--xg-ring-track); border-radius: 999px; overflow: hidden; }
.xim-bar-fill { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.22,.61,.36,1); }
.xim-bar-val { width: 40px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 700; color: var(--xg-text); }
.xim-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 18px; min-width: 0; }
.xim-kv > div { font-size: 13px; color: var(--xg-text-2); line-height: 1.5; padding: 4px 0; border-bottom: 1px dashed var(--xg-border); word-break: break-word; overflow-wrap: break-word; min-width: 0; }
.xim-kv strong { color: var(--xg-text); font-weight: 700; }
.xim-hero-grid { display: grid; grid-template-columns: minmax(170px, 220px) 1fr; gap: 18px; align-items: stretch; margin-bottom: 18px; }
.ximilar-images-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ximilar-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ximilar-detail-section { background: var(--xg-panel); border: 1px solid var(--xg-border); border-radius: 8px; padding: 8px; margin-bottom: 8px; box-shadow: var(--xg-shadow); }
.ximilar-detail-card { background: var(--xg-subtle); border: 1px solid var(--xg-border); border-radius: 8px; overflow: hidden; }
.ximilar-detail-card h4 { margin: 0; padding: 5px 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--xg-muted); border-bottom: 1px solid var(--xg-border); }
.ximilar-detail-card .ximilar-zoomable {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--xg-subtle);
    border-top: 1px solid var(--xg-border);
    border-radius: 0 0 6px 6px;
    padding: 8px;
    cursor: zoom-in;
    min-height: 96px;
}
.ximilar-detail-card .ximilar-zoomable img {
    max-width: 100%;
    max-height: 96px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
@media (max-width: 1100px) { .ximilar-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ximilar-detail-grid { grid-template-columns: 1fr; } }
/* Base expander rules — apply at ALL viewport widths. The mobile
   block below overrides display to grid for expanded rows. */
.xim-expandable-rows tr.xim-extra-row { display: none; }
.xim-expandable-rows.xim-expanded tr.xim-extra-row { display: table-row; }
/* Replaces inline onmouseover/onmouseout handlers (CSP) — hover styles */
.xim-expandable-rows tbody tr:hover { background: var(--xg-subtle, rgba(255,255,255,0.05)); }
.xim-hover-link:hover { opacity: 0.85; }
.xim-hover-card:hover { transform: translateY(-2px); }
/* Image-matched listings (Google Lens "looks like your card") — compact
   card grid; the whole card is the link to the listing. */
.xim-imgmatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.xim-imgmatch-item {
    display: block;
    padding: 8px;
    border-radius: 10px;
    background: var(--xg-subtle);
    border: 1px solid var(--xg-border);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
a.xim-imgmatch-item:hover { border-color: #4285f4; box-shadow: 0 2px 10px rgba(66,133,244,0.25); }
a.xim-imgmatch-item:hover .xim-imgmatch-title { color: var(--xg-text); text-decoration: underline; }
a.xim-imgmatch-item:focus-visible { outline: 2px solid #4285f4; outline-offset: 2px; }
.xim-imgmatch-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 104px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--xg-panel);
    border: 1px solid var(--xg-border);
    margin-bottom: 8px;
    color: var(--xg-muted);
}
.xim-imgmatch-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--xg-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.xim-imgmatch-ext { color: var(--xg-muted); margin-left: 3px; font-weight: 700; }
@media (max-width: 560px) { .xim-imgmatch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ucid-ocr > summary { list-style: none; }
.ucid-ocr > summary::-webkit-details-marker { display: none; }
.ucid-ocr[open] > summary .ucid-ocr-chev { transform: rotate(180deg); }
.hybrid-forecast-panel { background: var(--xg-subtle); border: 1px solid var(--xg-border); border-radius: 8px; padding: 20px; margin-top: 16px; }
.hybrid-forecast-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hybrid-forecast-card { background: var(--xg-panel); padding: 18px 12px; border-radius: 8px; border: 1px solid var(--xg-border); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; }
.xim-corner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.xim-profit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 768px) { .ximilar-images-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hybrid-forecast-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ximilar-images-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .xim-hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .xim-kv { grid-template-columns: repeat(2, 1fr); } }
/* Image Quality Analysis: stack the thumbnail above the commentary on narrow screens */
.xim-iq-thumb { flex-shrink: 0; width: 180px; margin-right: 16px; }
.xim-iq-image-trigger,
.xim-iq-zone-trigger { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.xim-iq-image-trigger img { display: block; width: 180px; max-width: 38vw; height: auto; border-radius: 8px; border: 1px solid var(--xg-border); object-fit: cover; }
.xim-iq-image-trigger:focus-visible,
.xim-iq-zone-trigger:focus-visible { outline: 3px solid #0891b2; outline-offset: 3px; border-radius: 8px; }
.xim-iq-zonemap { flex: 0 0 200px; width: 200px; margin-right: 16px; }
.xim-iq-zone-visual { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 8px; border: 1px solid var(--xg-border); background: var(--xg-panel); }
.xim-iq-image-cta,
.xim-iq-map-cta { display: block; margin-top: 7px; color: var(--xg-text-2); font-size: 12px; font-weight: 700; text-align: center; }
.xim-iq-zone-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; color: var(--xg-text-2); font-size: 12px; line-height: 1.35; }
.xim-iq-zone-legend > div { display: flex; align-items: center; gap: 6px; }
.xim-iq-zone-swatch { display: inline-block; flex: 0 0 13px; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.96); border-radius: 3px; box-sizing: border-box; }
.xim-iq-zone-swatch.is-blown { background: rgba(245,158,11,0.52); box-shadow: inset 0 0 0 1px rgba(180,83,9,0.98); }
.xim-iq-zone-swatch.is-shadow { background: rgba(8,145,178,0.48); box-shadow: inset 0 0 0 1px rgba(14,116,144,0.98); }
.xim-iq-zone-lightbox { position: fixed; inset: 0; z-index: 100001; display: none; align-items: center; justify-content: center; padding: 64px 24px 24px; background: rgba(8,12,24,0.94); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.xim-iq-zone-lightbox[aria-hidden="false"] { display: flex; }
.xim-iq-zone-dialog { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; max-height: 100%; }
.xim-iq-zone-close { position: absolute; top: -48px; right: 0; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; background: rgba(15,23,42,0.8); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.xim-iq-zone-viewer { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; max-height: calc(100vh - 110px); overflow: auto; }
.xim-iq-zone-viewer .xim-iq-zone-visual { border-color: rgba(255,255,255,0.55); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.xim-iq-zone-viewer .xim-iq-zone-legend { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px 18px; color: #e2e8f0; font-size: 14px; }
@media (max-width: 640px) {
    .xim-iq-layout { flex-direction: column !important; }
    .xim-iq-thumb { width: 170px; margin-right: 0 !important; margin-bottom: 14px !important; }
    .xim-iq-thumb img { width: 170px !important; max-width: 76vw; }
    .xim-iq-zonemap { flex-basis: auto; width: min(190px, 72vw); margin-right: 0 !important; margin-bottom: 14px !important; }
    .xim-iq-zone-lightbox { padding: 58px 14px 18px; }
    .xim-iq-zone-viewer .xim-iq-zone-legend { flex-direction: column; gap: 5px; font-size: 12px; }
}
@media (max-width: 640px) { .xim-corner-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (max-width: 640px) { .xim-corner-grid > div { padding: 8px 6px !important; } }
@media (max-width: 640px) { .xim-corner-grid > div > div:nth-child(2) { font-size: 1.2rem !important; } }
@media (max-width: 640px) { .xim-profit-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
@media (max-width: 400px) { .xim-profit-grid { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 400px) { .xim-profit-grid > div { border-right: none !important; border-bottom: 1px solid var(--xg-border); padding-right: 0 !important; padding-bottom: 10px; } }
@media (max-width: 768px) { .ximilar-price-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; } }
@media (max-width: 768px) { .ximilar-price-grid > div { padding: 6px 4px !important; } }
@media (max-width: 768px) { .ximilar-price-grid > div > div:first-child { font-size: 8px !important; } }
@media (max-width: 768px) { .ximilar-price-grid > div > div:last-child { font-size: 13px !important; } }
@media (max-width: 480px) { .ximilar-price-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px) { .ximilar-price-trend > div:last-child { gap: 6px !important; } }
@media (max-width: 768px) { .ximilar-price-trend > div:last-child > div { padding: 4px 8px !important; } }
/* PSA pop ladder keeps its 5-col grid on mobile (header.php blanket-collapses inline grids at 768px) */
@media (max-width: 768px) { .ximilar-result .xg-pop-row { grid-template-columns: 24px 1fr 30px 44px 54px !important; gap: 6px !important; } }
@media (max-width: 400px) { .ximilar-result .xg-pop-row { grid-template-columns: 22px 1fr 26px 40px 48px !important; font-size: 10px !important; } }
@media (max-width: 480px) { .ximilar-result .xg-pop-hd-grade { visibility: hidden; } }
@media (max-width: 768px) {
    .ximilar-listings-table thead { display: none; }
    .ximilar-listings-table, .ximilar-listings-table tbody, .ximilar-listings-table tr { display: block; width: 100% !important; }
    .ximilar-listings-table tr {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto;
        gap: 4px 10px !important;
        align-items: center !important;
        border: 1px solid var(--xg-border) !important;
        border-radius: 8px !important;
        margin-bottom: 6px !important;
        padding: 8px 10px !important;
        background: var(--xg-panel) !important;
    }
    .xim-expandable-rows tr.xim-extra-row {
        display: none !important;
    }
    .xim-expandable-rows.xim-expanded tr.xim-extra-row {
        display: grid !important;
    }
    .ximilar-listings-table td {
        display: block !important;
        border: none !important;
        padding: 0 !important;
        width: auto !important;
    }
    .ximilar-listings-table td::before { display: none !important; }
    .ximilar-listings-table td[data-label="Listing"] {
        grid-column: 1 / -1;
        font-size: 12px !important;
        line-height: 1.35 !important;
        margin-bottom: 2px;
    }
    .ximilar-listings-table td[data-label="Listing"] > div:first-child {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px !important;
    }
    .ximilar-listings-table td[data-label="Listing"] > div:last-child {
        margin-top: 2px !important;
    }
    .ximilar-listings-table td[data-label="Price"] {
        grid-column: 1;
        font-weight: 800 !important;
        font-size: 14px !important;
    }
    .ximilar-listings-table td[data-label="Source"] {
        grid-column: 2;
        text-align: right;
    }
    .ximilar-listings-table td[data-label="Source"] a {
        padding: 3px 8px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }
    .ximilar-listings-table td[data-label="Date"] {
        grid-column: 1 / -1;
        font-size: 10px !important;
        color: var(--xg-muted) !important;
        margin-top: -2px;
    }
}

/* ===== Economics card mobile optimization ===== */
@media (max-width: 640px) {
    .xim-econ-card { padding: 12px !important; border-radius: 10px; margin: 0 10px 12px !important; }
    .xim-econ-header { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 12px !important; }
    .xim-econ-header > div:first-child { display: flex !important; align-items: center !important; gap: 10px !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
    .xim-econ-header > div:first-child > div:first-child { flex-shrink: 0 !important; width: 40px !important; height: 40px !important; font-size: 20px !important; }
    .xim-econ-header > div:first-child > div:last-child { min-width: 0 !important; }
    .xim-econ-header > span { width: auto !important; text-align: right !important; flex-shrink: 0 !important; font-size: 11px !important; padding: 4px 10px !important; }
    .xim-econ-header h3 { font-size: 17px !important; font-weight: 800 !important; margin: 0 !important; line-height: 1.2 !important; }
    .xim-econ-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-bottom: 12px !important; }
    .xim-econ-stat { min-width: 0 !important; padding: 8px 10px !important; border-radius: 8px !important; }
    .xim-econ-stat > div:first-child { font-size: 10px !important; }
    .xim-econ-stat > div:nth-child(2) { font-size: 16px !important; }
    /* Compact company cards instead of stacked table rows */
    .xim-econ-table { min-width: 0 !important; width: 100% !important; }
    .xim-econ-table thead { display: none; }
    .xim-econ-table, .xim-econ-table tbody { display: block; width: 100% !important; }
    .xim-econ-table tr { display: grid !important; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; border: 1px solid var(--xg-border) !important; border-radius: 10px; margin-bottom: 8px; padding: 10px 12px; width: 100%; }
    .xim-econ-table td { display: block !important; border: none !important; padding: 0 !important; font-size: 13px !important; width: auto !important; }
    .xim-econ-table td::before { display: none !important; }
    .xim-econ-table td[data-label="Company"] { grid-column: 1; font-weight: 700; font-size: 14px !important; }
    .xim-econ-table td[data-label="Company"] > span { font-size: 11px; }
    .xim-econ-table td[data-label="Best Grade"] { grid-column: 2; text-align: right; font-weight: 700; font-size: 16px !important; }
    .xim-econ-table td[data-label="Total Cost"] { grid-column: 1; font-size: 11px !important; color: var(--xg-muted); }
    .xim-econ-table td[data-label="Net Profit"] { grid-column: 1; font-size: 13px !important; font-weight: 700; }
    .xim-econ-table td[data-label="ROI"] { grid-column: 2; text-align: right; font-size: 13px !important; font-weight: 700; }
}

body.ximilar-lightbox-open .back-to-top { display: none !important; }

@media (max-width: 640px) {
    /* Edge-to-edge: outer .container already provides 24px margin.
       Remove .ximilar-result padding to reclaim ~28px of width. */
    .ximilar-result { padding: 0 !important; border-radius: 0; border: none; }
    .ximilar-result-header { padding: 14px !important; border-radius: 10px; margin: 10px 10px 12px; }
    .ximilar-header-inner { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; }
    .ximilar-header-icon { font-size: 32px !important; order: 0 !important; flex-shrink: 0 !important; }
    .ximilar-header-title { min-width: 0 !important; flex: 1 1 auto !important; order: 1 !important; }
    .ximilar-header-h1 { font-size: 20px !important; font-weight: 800; margin: 0 0 2px 0 !important; }
    .ximilar-header-title p { font-size: 12px !important; margin: 0 !important; }
    .ximilar-header-stats { order: 2 !important; gap: 8px !important; width: 100% !important; margin-top: 4px !important; }
}

/* ===== Mobile layout optimization (iPhone-first) =====
   Edge-to-edge layout: outer .container provides the margin.
   Inner panels use 12px padding; fonts enlarged to use the space. */
@media (max-width: 640px) {
    .ximilar-result { overflow-x: hidden; }
    /* Remove body card padding — outer container handles it */
    .ximilar-results-body {
        padding: 0 !important; background: transparent !important;
        border: none !important; box-shadow: none !important;
        margin-bottom: 0 !important;
    }
    /* Other result cards: 12px padding, small margin for separation */
    .ximilar-result-card:not(.ximilar-results-body) {
        padding: 12px !important; margin: 0 10px 12px !important; border-radius: 10px;
    }
    /* Hero grid: reduce gap + panel padding */
    .xim-hero-grid { gap: 10px; margin: 0 10px 12px; }
    .xim-hero-grid > div { padding: 14px !important; border-radius: 10px; }
    /* Grade ring: compact but readable */
    /* Grade ring: compact — shrink inner ring border so grade+label fit */
    .xg-ring { width: 128px; height: 128px; }
    .xg-ring-inner { width: calc(100% - 14px); height: calc(100% - 14px); padding: 6px; }
    .xg-ring-grade { font-size: 34px; }
    .xg-ring-label { font-size: 10px; margin-top: 4px; }
    .xg-ring-sub { font-size: 7.5px; margin-top: 2px; }
    /* KPI strip: 2 columns, larger fonts w/ extra width */
    .xg-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; margin: 0 10px 12px; }
    .xg-kpi { padding: 10px 12px; }
    .xg-kpi-value { font-size: 20px; }
    .xg-kpi-label { font-size: 10px; }
    .xg-kpi-sub { font-size: 11px; }
    /* Subgrade rows: enlarge fonts w/ extra width */
    .xg-sgrow { gap: 10px; margin-bottom: 11px; }
    .xg-sgrow .xim-bar-label { width: 72px; font-size: 13px; }
    .xg-sgrow .xim-bar-val { width: 34px; font-size: 15px; }
    .xg-sev { width: 80px; font-size: 10px; padding: 3px 8px; }
    .xim-bar-track { height: 10px; }
    /* Data blocks: 12px padding, larger body text */
    .xg-block { padding: 12px !important; margin: 0 10px 12px !important; border-radius: 10px; }
    .xg-block h4 { font-size: 13px !important; }
    .xg-block > div { font-size: 14px !important; line-height: 1.55 !important; }
    /* Hybrid forecast: reduce padding, enlarge grades */
    .hybrid-forecast-panel { padding: 14px; margin: 0 10px 12px; border-radius: 10px; }
    .hybrid-forecast-card { padding: 14px 8px; }
    .hybrid-forecast-grade { font-size: 2.4rem !important; }
    .hybrid-forecast-label { font-size: 12px !important; }
    .hybrid-forecast-note { font-size: 11px !important; }
    /* Profit grid: reduce gap, keep 3 cols */
    .xim-profit-grid { gap: 8px; }
    .xim-profit-grid > div > div:first-child { font-size: 11px !important; }
    .xim-profit-grid > div > div:nth-child(2) { font-size: 1.8rem !important; }
    /* Images: 2 columns, taller thumbnails */
    .ximilar-images-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; margin: 0 10px 12px; }
    .ximilar-image-item img { height: 130px !important; }
    /* Detail grids: 2 columns */
    .ximilar-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ximilar-detail-section { margin: 0 10px 12px; }
    /* Corner/edge grids: 2 columns, larger grade numbers */
    .xim-corner-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .xim-corner-grid > div { padding: 12px 10px !important; }
    .xim-corner-grid > div > div:nth-child(2) { font-size: 1.5rem !important; }
    /* Chips: slightly larger */
    .xim-chip { font-size: 13px; padding: 7px 13px; }
    /* KV grid: larger text */
    .xim-kv > div { font-size: 14px !important; line-height: 1.5 !important; }
    /* Identification section: clean single-column list on mobile */
    .xim-id-hero { margin: 0 10px 12px !important; padding: 14px 16px !important; border-radius: 10px; }
    .xim-id-hero > div:nth-child(2) { font-size: 20px !important; }
    .xim-id-hero > div:nth-child(3) { font-size: 14px !important; }
    .xim-id-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; margin: 0 10px 12px !important; background: var(--xg-panel); border: 1px solid var(--xg-border); border-radius: 10px; overflow: hidden; }
    .xim-id-item { background: transparent !important; border: none !important; border-bottom: 1px solid var(--xg-border) !important; border-right: 1px solid var(--xg-border) !important; border-radius: 0 !important; padding: 8px 10px !important; text-align: left !important; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
    .xim-id-item:nth-child(2n) { border-right: none !important; }
    .xim-id-item .xim-metric__label { margin-bottom: 0 !important; font-size: 10px !important; }
    .xim-id-item .xim-metric__value { font-size: 14px !important; text-align: left; word-break: break-word; overflow-wrap: break-word; }
    .xim-id-kv { grid-template-columns: repeat(2, 1fr) !important; gap: 0 !important; margin-top: 12px !important; }
    .xim-id-kv > div { border-bottom: 1px solid var(--xg-border) !important; padding: 8px 10px !important; }
    /* Attribute chips (Side/Category/Damaged/Detection): 2-up on mobile.
       A nowrap pill + 999px radius turns into an oval blob with wrapped
       text (#11442 iPhone screenshot) — let the content wrap inside a
       rounded tile instead. */
    .xim-attr-chips { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; align-items: stretch; }
    .xim-attr-chips .xim-chip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap: 3px 5px; width: 100%; box-sizing: border-box; font-size: 11.5px; line-height: 1.3; padding: 7px 8px; border-radius: 12px; text-align: center; white-space: normal; }
    .xim-attr-chips .xim-chip > span { white-space: normal; }
    /* Centering pair (Ximilar overlay + SVG): keep side-by-side on mobile */
    .xim-centering-pair { flex-wrap: nowrap !important; gap: 8px !important; }
    .xim-centering-pair .xim-centering-fig,
    .xim-centering-pair .xim-centering-svg { flex: 1 1 0 !important; min-width: 0 !important; }
    /* SportsDB player/team profile: full-width cards, side-by-side image+text */
    .ximilar-sportsdb-content { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; justify-content: flex-start !important; }
    .ximilar-sportsdb-content > div { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; }
    .ximilar-sportsdb-content > div > div:first-child { flex-wrap: nowrap !important; }
    .ximilar-sportsdb-content img { width: 60px !important; height: 60px !important; flex-shrink: 0 !important; }
    /* Share buttons: uniform 2-column grid on mobile */
    .xim-share-buttons { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .xim-share-buttons > a, .xim-share-buttons > button {
        width: 100% !important; justify-content: center !important; box-sizing: border-box !important;
        padding: 10px 8px !important; font-size: 12px !important;
    }
    /* Share section + referral promo: edge-to-edge w/ margin */
    .ximilar-share-section, .ximilar-referral-promo { margin: 0 10px 12px !important; padding: 14px 16px !important; border-radius: 10px; }
    /* Grade tips + upsell cards: override inline padding/margin */
    .ximilar-grade-tips, .ximilar-post-result-upsell { padding: 12px !important; margin: 0 10px 12px !important; border-radius: 10px; }
    /* Upsell "Ready for your next card?" — stack text + button vertically on mobile */
    .ximilar-post-result-upsell > div[style*="space-between"] {
        flex-direction: column !important; align-items: stretch !important; gap: 12px !important;
    }
    .ximilar-post-result-upsell > div[style*="space-between"] > div[style*="min-width"] { min-width: 0 !important; }
    .ximilar-post-result-upsell > div[style*="space-between"] > a,
    .ximilar-post-result-upsell > div[style*="space-between"] > button {
        width: 100% !important; text-align: center !important; box-sizing: border-box !important;
    }
    /* Next steps: 2-column grid on mobile */
    .xim-next-steps-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .xim-next-step { width: 100% !important; text-align: center !important; box-sizing: border-box !important; justify-content: center !important; }
    /* Price grid: 4 columns on mobile (override global 1fr rule) */
    .xg-price-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    .xg-price-grid > div { padding: 6px 2px !important; }
    .xg-price-grid > div > div:first-child { font-size: 9px !important; }
    .xg-price-grid > div > div:last-child { font-size: 14px !important; }
    /* Unified Card Identification card mobile overrides */
    .xim-unified-inner { padding: 12px 10px !important; }
    .xim-unified-header { gap: 10px !important; margin-bottom: 10px !important; }
    .xim-details-section { margin-bottom: 8px !important; }
    .xim-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .xim-info-cell { padding: 4px 6px !important; }
    .xim-info-label { font-size: 9px !important; }
    .xim-info-value { font-size: 12.5px !important; }
    .ucid-chip, .ucid-stat { font-size: 12px !important; padding: 3px 9px !important; }
    /* Centering details panel mobile overrides */
    .xim-border-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
    .xim-border-cell { padding: 5px 9px !important; text-align: left !important; }
    .xim-border-cell span { font-size: 10.5px !important; }
    .xim-border-cell strong { font-size: 12.5px !important; }
    .xim-ratio-row { grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin-top: 6px !important; }
    .xim-ratio-pill { padding: 5px 9px !important; flex: 1 1 0 !important; }
    .xim-ratio-pill span:first-child { font-size: 8.5px !important; }
    .xim-ratio-pill span:last-child { font-size: 13.5px !important; }
    .xim-centering-desc { margin-top: 6px !important; font-size: 11px !important; }
    /* Section headings mobile scale */
    .xim-econ-header h3,
    .hybrid-forecast-panel h4,
    .xg-block h4 { font-size: 16px !important; }
    /* Ensure flex/grid children don't overflow */
    .ximilar-result * { min-width: 0; box-sizing: border-box; }
}
@media (max-width: 360px) {
    .xg-kpis { grid-template-columns: 1fr !important; }
    .ximilar-images-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .xg-price-grid { grid-template-columns: repeat(3, 1fr) !important; }
    .xg-ring { width: 110px; height: 110px; }
    .xg-ring-inner { width: calc(100% - 12px); height: calc(100% - 12px); padding: 4px; }
    .xg-ring-grade { font-size: 30px; }
    .xg-ring-label { font-size: 9px; margin-top: 3px; }
    .xg-ring-sub { font-size: 7px; }
    .xg-sgrow .xim-bar-label { width: 60px; font-size: 12px; }
    .xg-sgrow .xim-bar-val { width: 28px; font-size: 13px; }
    .xg-sev { width: 68px; font-size: 9px; }
}

@media print {
    .ximilar-result {
        --xg-bg: #ffffff; --xg-panel: #ffffff; --xg-subtle: #f8fafc; --xg-border: #e5e7eb;
        --xg-text: #111827; --xg-text-2: #374151; --xg-muted: #6b7280;
        --xg-shadow: none; border: none; border-radius: 0; padding: 0;
    }
    .xim-theme-toggle { display: none !important; }
    .ximilar-result-header,
    .ximilar-result-card,
    .ximilar-results-body,
    .ximilar-images-grid,
    .ximilar-image-item,
    .ximilar-print-banner,
    .ximilar-result {
        break-inside: avoid-page !important;
        page-break-inside: avoid !important;
    }
    .ximilar-print-banner { display: block !important; }
    .ximilar-result-header,
    .ximilar-result-actions,
    .ximilar-report-section,
    .ximilar-sportsdb-lookup,
    .ximilar-tcg-lookup,
    .ximilar-post-result-upsell,
    .ximilar-technical-details,
    .ximilar-share-section,
    .ximilar-lightbox,
    #ximilar-lightbox,
    .ximilar-zoomable > div,
    .ximilar-zoom-icon,
    button { display: none !important; }
    .ximilar-image-item img {
        max-height: 1.8in !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    .ximilar-images-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
    .ximilar-image-corner-detail img,
    .ximilar-image-edge-detail img {
        max-height: 1.5in !important;
    }
}

/* === Variant C identity panel (2026-10-23, owner-approved) =================
   Compact "spec-sheet" layout for the unified card identity block:
   one merged minicell strip (Card/Game/Subject ticks) replaces the stacked
   Card Details + Game Details sections. Used by both renderers
   (includes/ResultRenderer.php + assets/js/services/ximilar-results.js) —
   keep the emitted class names in sync with this sheet.
============================================================================= */
.ucid-headrow{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.ucid-headrow .ucid-title{font-size:20px;font-weight:800;color:var(--xg-text);line-height:1.2;letter-spacing:-.01em}
.ucid-headrow .ucid-rar{font-size:13px;color:var(--xg-muted);font-weight:500}
.ucid-headrow .ucid-full{font-size:13px;color:var(--xg-text-2);margin:2px 0 6px}
.ucid-headrow .ucid-chips{display:flex;flex-wrap:wrap;gap:5px;gap:5px;justify-content:flex-end;margin-left:auto;min-width:220px;max-width:46%}
.ucid-chips-col{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ucid-headrow .ucid-chips-col{margin-left:0;min-width:0;max-width:none;justify-content:flex-start}
.ucid-main2{display:grid;grid-template-columns:1fr;gap:14px}
/* Slab in the identity rail: taller than the card crop, so it gets its own
   column width and no forced aspect-ratio. user-select + draggable are killed
   here — on Windows a mouse drag otherwise paints a selection highlight over
   the image and fights the tilt gesture. */
.ucid-main2.has-img.has-slab{grid-template-columns:172px 1fr}.ucid-slab-frame{display:block;position:relative;cursor:grab;user-select:none;-webkit-user-select:none;-ms-user-select:none;touch-action:none}
.ucid-slab-frame:active{cursor:grabbing}
.ucid-slab-frame img.ucid-slabimg{width:100%;max-width:170px;height:auto;display:block;border-radius:10px;border:1px solid var(--xg-border);background:var(--xg-subtle);pointer-events:none;user-select:none;-webkit-user-drag:none;transition:transform 450ms cubic-bezier(.22,1,.36,1)}
@media (max-width:700px){.ucid-main2.has-img.has-slab{grid-template-columns:1fr}.ucid-slab-frame img.ucid-slabimg{max-width:190px;margin:0 auto}}
.ucid-main2.has-img{grid-template-columns:140px 1fr}
.ucid-rail{display:flex;flex-direction:column;gap:8px;min-width:0}
.ucid-rail img.ucid-cardimg{width:100%;max-width:140px;height:auto;aspect-ratio:5/7;object-fit:contain;background:var(--xg-subtle);border:1px solid var(--xg-border);border-radius:9px}
/* Not scoped to .ucid-rail: the header wordmark renders outside the rail, and
   an unscoped rule is the only thing that keeps a wide set logo (Scarlet &
   Violet) from filling the panel. */
img.ucid-setlogo{max-height:44px;max-width:130px;width:auto;height:auto;object-fit:contain}
.ucid-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--xg-border);border:1px solid var(--xg-border);border-radius:10px;overflow:hidden;align-content:start;margin-bottom:14px}
.ucid-cell{background:var(--xg-panel);padding:6px 10px 7px;border-top:2px solid #2563eb;min-width:0}
.ucid-cell[data-g="game"]{border-top-color:#7c3aed}
.ucid-cell[data-g="subj"]{border-top-color:#059669}
.ucid-cell .k{display:block;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--xg-muted)}
.ucid-cell .v{display:block;font-size:12.5px;font-weight:650;color:var(--xg-text)}
.ucid-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;font-weight:600;color:var(--xg-muted);margin:0 0 6px}
.ucid-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.ucid-sec{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--xg-muted);margin:12px 0 6px}
.ucid-atks{margin-top:10px;border:1px solid var(--xg-border);border-radius:10px;overflow:hidden}
.ucid-atk{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:start;padding:7px 10px;font-size:12.5px}
.ucid-atk:nth-child(even){background:var(--xg-subtle)}
.ucid-atk .pips{display:inline-flex;gap:3px;padding-top:2px}
.ucid-atk .pips .pip,.pip{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(15,23,42,.15)}
.pip.el-water{background:#3b82f6}.pip.el-fire{background:#ef4444}.pip.el-grass{background:#22c55e}.pip.el-lightning{background:#facc15}
.pip.el-fighting{background:#b45309}.pip.el-psychic{background:#a855f7}.pip.el-darkness{background:#334155}.pip.el-metal{background:#94a3b8}
.pip.el-colorless{background:#cbd5e1}.pip.el-dragon{background:#f97316}.pip.el-fairy{background:#f472b6}.pip.el-other{background:#e2e8f0}
.pip-txt{display:inline-block;padding:1px 6px;background:var(--xg-subtle);border:1px solid var(--xg-border);border-radius:6px;font-size:10px;font-weight:600;color:var(--xg-text-2)}
.ucid-atk .at{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.ucid-atk .at .n{font-weight:750;color:var(--xg-text)}
.ucid-atk .at .dmg{font-weight:800;color:#b91c1c}
.ucid-atk .at .cost{font-size:11px;color:var(--xg-muted)}
.ucid-atk .at .t{width:100%;color:var(--xg-text-2);font-size:12px;line-height:1.4}
@media (max-width:700px){
  .ucid-main2.has-img{grid-template-columns:1fr}
  .ucid-rail{align-items:center;max-width:190px;margin:0 auto}
  .ucid-headrow .ucid-chips{margin-left:0;max-width:none;justify-content:flex-start}
  .ucid-strip{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}