/* ── Listings Page (Ad Pipeline Wizard) ── */

/* Page wrapper */
.listings-page {
    padding-bottom: 0;
}

/* ── Vehicle badge (shown below sub-header when vehicle selected) ── */
.lst-vehicle-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.lst-vehicle-badge__thumb {
    width: 48px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    overflow: hidden;
    flex-shrink: 0;
}
.lst-vehicle-badge__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lst-vehicle-badge__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Brand + listing filters now use shared pg-filter-select from page-filters.php */
.lst-archived-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.lst-archived-toggle input { accent-color: var(--accent); }

/* ── Panel titles ── */
.lst-panel__title {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 2px;
}
.lst-panel__desc {
    font-size: 13px;
    color: var(--text-muted);
}
.lst-panel__header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}
.lst-panel__actions {
    display: flex;
    gap: 6px;
}

/* ── Sub-header ── */
.lst-subheader {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}
.lst-subheader h3 {
    font-size: 13px;
    font-weight: 700;
}
.lst-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 6px;
}

/* ── Filters ── */
.lst-filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.lst-filters::-webkit-scrollbar { display: none; }
.lst-filter-btn {
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
}
.lst-filter-btn.active {
    border-color: var(--accent);
    background: var(--accent-bg);
    color: var(--accent);
}

/* ── Parts step tabs ── */
.lst-parts-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.lst-parts-tabs::-webkit-scrollbar { display: none; }
.lst-parts-tab {
    flex-shrink: 0;
    padding: 10px 16px;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .15s;
    white-space: nowrap;
}
.lst-parts-tab:hover { color: var(--text-primary); }
.lst-parts-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.lst-parts-tab-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 0;
}

/* Parts error banner */
.lst-parts-error {
    padding: 10px 14px;
    background: var(--tint-danger, rgba(239, 68, 68, .08));
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--color-danger);
    font-weight: 500;
}
.lst-parts-error__link {
    background: none;
    border: none;
    color: var(--color-danger);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
}

/* ── Publish success banner ── */
.lst-publish-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--tint-success);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
}
.lst-publish-banner__icon { font-size: 22px; flex-shrink: 0; }
.lst-publish-banner__body { flex: 1; min-width: 0; }
.lst-publish-banner__title { font-size: 14px; font-weight: 700; color: var(--accent); }
.lst-publish-banner__sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.lst-publish-banner__log {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    font-size: 11px;
    font-family: var(--font-mono);
    max-height: 200px;
    overflow-y: auto;
}
.lst-publish-banner__item { padding: 3px 0; }
.lst-publish-banner__item--ok { color: var(--accent); }
.lst-publish-banner__item--fail { color: var(--color-danger); }
.lst-publish-banner__item a { color: var(--color-info); text-decoration: underline; }
.lst-publish-banner__actions { display: flex; gap: 6px; align-items: flex-start; flex-shrink: 0; }
.lst-publish-banner__toggle {
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.lst-publish-banner__toggle:hover { background: var(--accent); color: #fff; }
.lst-publish-banner__dismiss {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lst-publish-banner__dismiss:hover { background: var(--bg-hover); }

/* ── Saved vehicle card: green-tinted image + save badge ── */
.lst-vcard--saved {
    border-color: #e67e22;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.1);
}
.lst-vcard__saved-tint {
    position: absolute;
    inset: 0;
    background: rgba(230, 126, 34, 0.3);
    z-index: 1;
    pointer-events: none;
}
.lst-vcard__saved-tint--completed {
    background: rgba(16, 185, 129, 0.3);
}
.lst-vcard__save-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.lst-vcard__save-badge--active {
    background: #e67e22;
}
.lst-vcard__save-badge--completed {
    background: var(--accent);
}
.lst-vcard__discard {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #fff;
    border: none;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    z-index: 3;
}
.lst-vcard--saved:hover .lst-vcard__discard { opacity: 1; }

/* Error session card */
.lst-vcard--error {
    border-color: var(--color-danger, #E53238);
    box-shadow: 0 0 0 3px rgba(229, 50, 56, 0.12);
}
.lst-vcard__saved-tint--error {
    background: rgba(229, 50, 56, 0.3);
}
.lst-vcard__save-badge--error {
    background: var(--color-danger, #E53238);
}
.lst-vcard__error-line {
    font-size: 11px;
    color: var(--color-danger, #E53238);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}

/* Completed session card — green check */
.lst-vcard--completed {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* "See more saved" compact card */
.lst-vcard--more {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px dashed var(--accent);
    background: var(--tint-success);
}
.lst-vcard--more:hover {
    background: var(--accent);
}
.lst-vcard__more-inner {
    padding: 20px 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
}
.lst-vcard--more:hover .lst-vcard__more-inner { color: #fff; }

/* ── Vehicle Grid — condensed cards, 4-wide on desktop ── */
.lst-v-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 540px) { .lst-v-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 800px) { .lst-v-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .lst-v-grid { grid-template-columns: repeat(4, 1fr); } }
/* Size toggle button */
.lst-size-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    cursor: pointer;
    font-size: 11px;
    color: var(--text-muted);
}
.lst-size-toggle:hover { background: var(--bg-hover); }
.lst-size-toggle__bar {
    width: 3px;
    height: 12px;
    border-radius: 1px;
    background: var(--border);
    transition: background .15s;
}
.lst-size-toggle__bar--active { background: var(--accent); }

.lst-vcard {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    transition: all .15s;
}
.lst-vcard:hover { box-shadow: var(--shadow-md); }
.lst-vcard.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Compact image with overlay info */
.lst-vcard__img {
    position: relative;
    padding-top: 48%;
    background: var(--bg-hover);
}
.lst-vcard__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lst-vcard__img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-muted);
}
.lst-vcard__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 60%);
    pointer-events: none;
}
.lst-vcard__overlay-title {
    position: absolute;
    bottom: 8px;
    left: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.lst-vcard__overlay-trim {
    font-size: 11px;
    font-weight: 400;
    opacity: .85;
    display: block;
}
.lst-vcard__check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* Compact body */
.lst-vcard__body {
    padding: 8px 10px 10px;
}
.lst-vcard__meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 6px;
}
.lst-vcard__tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.lst-vcard__tag {
    font-family: var(--font-mono);
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lst-vcard__status-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Inline parts bar */
.lst-vcard__parts-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.lst-vcard__bar-track {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}
.lst-vcard__bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .3s;
}
.lst-vcard__parts-nums {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Parts list ── */
.lst-parts-list { display: flex; flex-direction: column; gap: 4px; }
.lst-part-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all .15s;
}
.lst-part-row:hover { box-shadow: var(--shadow-sm); }
.lst-part-row.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.lst-chk {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-card);
    transition: all .15s;
}
.lst-chk.on {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}
.lst-part-row__thumb {
    width: 44px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 11px;
}
.lst-part-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lst-part-row__info { flex: 1; min-width: 0; }
.lst-part-row__name { font-size: 13px; font-weight: 600; }
.lst-part-row__meta {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}
.lst-part-row__badges { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.lst-badge {
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 3px;
    font-weight: 600;
}
.lst-badge--listed { background: var(--tint-success); color: var(--accent); }
.lst-badge--unlisted { background: var(--tint-danger); color: var(--color-danger); }
.lst-badge--no-photo { font-size: 10px; color: var(--color-warning); font-weight: 600; }
.lst-badge--warn {
    background: var(--tint-warning, rgba(245, 158, 11, .1));
    color: var(--color-warning);
    font-size: 10px;
    font-weight: 700;
}

/* Part row warning state */
.lst-part-row--warn {
    border-color: var(--color-warning);
    opacity: 0.8;
}
.lst-chk--blocked {
    border-color: var(--color-warning);
    background: var(--tint-warning, rgba(245, 158, 11, .1));
    color: var(--color-warning);
    font-size: 10px;
    cursor: pointer;
}

/* Edit button on part row */
.lst-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
}
.lst-edit-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Part wrapper (row + edit form) */
.lst-part-wrap { display: flex; flex-direction: column; }
.lst-part-wrap--editing .lst-part-row {
    border-color: var(--accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Inline edit form */
.lst-edit-form {
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-top: none;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 12px 14px;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.lst-edit-form__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 800px) { .lst-edit-form__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .lst-edit-form__grid { grid-template-columns: 1fr; } }
.lst-edit-form__grid label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
    display: block;
}
.lst-edit-input {
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 13px;
    background: var(--bg-card);
    color: var(--text-primary);
    box-sizing: border-box;
}
.lst-edit-form__actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    justify-content: flex-end;
}

@media (max-width: 540px) {
    .lst-part-row { flex-wrap: wrap; }
    .lst-part-row__badges { width: 100%; display: flex; gap: 6px; margin-top: 2px; padding-left: 30px; }
}

/* ── Add part form ── */
.lst-add-form-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    padding: 16px;
}
.lst-add-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 800px) { .lst-add-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .lst-add-form { grid-template-columns: 1fr; } }
.lst-add-form label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
    display: block;
}
.lst-add-form input,
.lst-add-form select {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 13px;
    background: var(--bg-card);
    color: var(--text-primary);
}
.lst-add-form__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}

/* ── Photo step: two-panel layout ── */
@keyframes lstFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lstPopIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

.lst-photos-app {
    display: flex;
    height: calc(100vh - 200px);
    overflow: hidden;
}

/* ── Left panel: photo tray ── */
.lst-photos-left {
    width: 33.333%;
    min-width: 240px;
    max-width: 380px;
    border-right: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.lst-photos-left__head {
    padding: 8px 12px;
    border-bottom: 1px solid var(--bg-hover);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lst-photos-left__title { font-size: 13px; font-weight: 700; }
.lst-photos-left__status { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.lst-photos-left__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
    transition: background .15s;
}
.lst-photos-left__scroll--drop-hover {
    background: var(--tint-success);
}
.lst-photos-left__foot {
    padding: 6px 12px;
    border-top: 1px solid var(--bg-hover);
    flex-shrink: 0;
    background: var(--bg-base);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Right panel: parts list ── */
.lst-photos-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lst-photos-right__head {
    padding: 8px 16px;
    border-bottom: 1px solid var(--bg-hover);
    flex-shrink: 0;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lst-photos-right__title { font-size: 13px; font-weight: 700; }
.lst-photos-right__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}
.lst-photos-dots { display: flex; gap: 4px; align-items: center; }
.lst-photos-dot {
    width: 8px; height: 8px;
    border-radius: 2px;
    background: var(--border);
    transition: background .2s;
}
.lst-photos-dot--ok { background: var(--accent); }

/* ── Pool grid ── */
.lst-pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 6px;
}
.lst-pool-grid--md { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.lst-pool-grid--lg { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

/* ── Pool tiles ── */
.lst-pool-tile {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: var(--radius-md);
    overflow: visible;
    cursor: grab;
    z-index: 1;
}
.lst-pool-tile:active { cursor: grabbing; }
.lst-pool-tile__iw {
    width: 100%; height: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 2px solid var(--border);
    transition: transform .2s ease, border-color .2s, box-shadow .2s;
    background: var(--bg-hover);
    position: relative;
}
.lst-pool-tile:hover .lst-pool-tile__iw {
    transform: scale(3);
    z-index: 9999;
    box-shadow: 0 16px 50px rgba(0,0,0,.5);
    border-color: var(--color-info);
    border-radius: var(--radius-sm);
}
.lst-pool-tile:hover { z-index: 9999; overflow: visible; }
/* Let zoomed tiles overflow the scroll container */
.lst-photos-left__scroll:has(.lst-pool-tile:hover) { overflow: visible; }
.lst-photos-left:has(.lst-pool-tile:hover) { overflow: visible; }
.lst-pool-tile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lst-pool-tile--dragging .lst-pool-tile__iw {
    opacity: .3;
    transform: scale(.95);
    border-color: var(--color-warning);
}
.lst-pool-tile__x {
    position: absolute;
    top: 4px; right: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: none;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    z-index: 10;
    cursor: pointer;
}
.lst-pool-tile:hover .lst-pool-tile__x { opacity: 1; }
.lst-pool-tile__num {
    position: absolute;
    bottom: 4px; left: 4px;
    font-size: 9px;
    font-weight: 700;
    background: rgba(0,0,0,.55);
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    z-index: 2;
}
.lst-pool-tile__badge {
    position: absolute;
    bottom: 4px; left: 4px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .5px;
    background: var(--accent);
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    z-index: 2;
}

/* Upload tile (first in grid) */
.lst-pool-tile--upload { cursor: pointer; }
.lst-pool-tile--upload:hover { z-index: 1; }
.lst-pool-tile__iw--upload {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    border-color: var(--border);
    color: var(--text-muted);
    transition: border-color .15s, color .15s, background .15s;
}
.lst-pool-tile--upload:hover .lst-pool-tile__iw--upload {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--tint-success);
    transform: none;
    box-shadow: none;
}
.lst-pool-tile__iw--upload { flex-direction: column; gap: 2px; }
.lst-pool-tile__upload-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pool completed section */
.lst-pool-completed {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}
.lst-pool-completed__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.lst-pool-completed__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}
.lst-pool-completed__count {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    background: var(--tint-success);
    color: var(--accent);
}

/* Upload progress on pool tile */
.lst-pool-tile--uploading { cursor: default; opacity: .6; }
.lst-pool-tile--uploading .lst-pool-tile__iw { border-color: var(--color-info); }
.lst-pool-tile__uploading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.25);
}
.lst-pool-tile__progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: rgba(0,0,0,.3);
    z-index: 3;
}
.lst-pool-tile__progress-bar {
    height: 100%;
    background: var(--color-info);
    border-radius: 2px;
    transition: width .2s;
}

/* Assigned pool tile (dimmed) */
.lst-pool-tile--assigned {
    opacity: .45;
    cursor: default;
}
.lst-pool-tile--assigned:hover .lst-pool-tile__iw {
    transform: none;
    box-shadow: none;
    border-color: var(--accent);
}
.lst-pool-tile__assigned-overlay {
    position: absolute;
    inset: 0;
    background: rgba(22, 163, 74, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lst-pool-tile__check {
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    width: 18px; height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
}

/* Pool footer */
.lst-pool-foot__ratio { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.lst-pool-foot__bar {
    width: 80px; height: 4px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
}
.lst-pool-foot__bar-fill {
    height: 100%; border-radius: 2px;
    background: var(--color-info);
    transition: width .3s;
}
.lst-pool-foot__bar-fill--done { background: var(--accent); }

/* ── Part drop targets (right panel) ── */
.lst-pt {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    margin-bottom: 8px;
    transition: all .2s;
    overflow: hidden;
    animation: lstFadeUp .2s ease both;
}
.lst-pt--over {
    border-color: var(--accent);
    background: var(--tint-success);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .08);
}
.lst-pt__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}
.lst-pt__thumb {
    width: 52px; height: 40px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-hover);
    flex-shrink: 0;
}
.lst-pt__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lst-pt__thumb-ph {
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 14px;
}
.lst-pt__info { flex: 1; min-width: 0; }
.lst-pt__name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.lst-pt__sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.lst-pt__add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
    transition: all .15s;
}
.lst-pt__add:hover { background: var(--tint-success); }
.lst-pt__count {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}
.lst-pt__count--ok { color: var(--accent); }

/* Landing zone */
.lst-pt__lz {
    min-height: 52px;
    margin: 0 14px 12px;
    padding: 8px;
    border-radius: var(--radius-md);
    border: 2px dashed var(--border);
    background: var(--bg-base);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    transition: all .2s;
}
.lst-pt__lz--over {
    border-color: var(--accent);
    background: var(--tint-success);
}
.lst-pt__lz--has {
    border-style: solid;
    border-color: var(--border);
}
.lst-pt__lz-hint {
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 0;
}
.lst-pt__lz-hint--active {
    color: var(--accent);
    font-weight: 600;
}

/* Placed photos in landing zone */
.lst-placed {
    width: 60px; height: 45px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    border: 2px solid var(--accent);
    animation: lstPopIn .2s ease;
    flex-shrink: 0;
}
.lst-placed img { width: 100%; height: 100%; object-fit: cover; }
.lst-placed--uploading { opacity: .6; }
.lst-placed__progress {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(0,0,0,.3);
}
.lst-placed__progress-bar {
    height: 100%;
    background: var(--color-info);
    border-radius: 2px;
    transition: width .2s;
}
.lst-placed__x {
    position: absolute;
    top: 2px; right: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(0,0,0,.65);
    color: #fff;
    border: none;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s;
    cursor: pointer;
}
.lst-placed:hover .lst-placed__x { opacity: 1; }

/* Main photo star */
.lst-placed__star {
    position: absolute;
    bottom: 2px; left: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    color: #fff;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    z-index: 2;
    background: rgba(0,0,0,.4);
}
.lst-placed__star--on { background: var(--color-warning); }

/* Failed upload overlay */
.lst-placed--failed { outline: 2px solid var(--color-danger); outline-offset: -2px; }
.lst-placed--failed img { opacity: .5; }
.lst-placed__retry {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-danger); color: #fff; border: none;
    font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 2;
}

/* Plus slot in landing zone (also a click-to-upload label) */
.lst-pt__plus-slot {
    width: 60px; height: 45px;
    border-radius: var(--radius-sm);
    border: 2px dashed var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--border);
    font-size: 16px;
    flex-shrink: 0;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.lst-pt__plus-slot:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.lst-pt__plus-slot--active {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
    background: var(--tint-success);
}

/* ── Mobile bulk upload banner (hidden on desktop) ── */
.lst-photos-mob-bulk {
    display: none;
}

/* ── Mobile hint variants ── */
.lst-lz-hint--mob { display: none; }
.lst-lz-hint--desk { display: block; }

/* ── Mobile: per-part direct upload, pool tray hidden ── */
@media (max-width: 700px) {
    /* Show the mobile bulk upload banner */
    .lst-photos-mob-bulk {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
    }
    .lst-photos-mob-bulk__btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        background: var(--bg-hover);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        cursor: pointer;
        flex-shrink: 0;
    }
    .lst-photos-mob-bulk__btn:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg-hover)); }
    .lst-photos-mob-bulk__note {
        font-size: 11px;
        color: var(--text-muted);
        flex: 1;
    }

    /* Hide desktop pool tray on mobile — use per-part upload instead */
    .lst-photos-app { flex-direction: column; height: auto; }
    .lst-photos-left { display: none; }
    .lst-photos-right { width: 100%; border-left: none; }

    /* Larger per-part add button for touch targets */
    .lst-pt__add {
        width: 36px;
        height: 36px;
    }

    /* Swap hints */
    .lst-lz-hint--desk { display: none; }
    .lst-lz-hint--mob { display: block; }

    .lst-pool-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 5px; }
}

/* ── Review grid ── */
/* Review step — vehicle photos header card */
.lst-review-veh-header {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
}
.lst-review-veh-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lst-review-veh-header__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}
.lst-review-veh-header__icon { font-size: 18px; }
.lst-review-veh-header__hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 6px 0 0;
    line-height: 1.4;
}
.lst-review-veh-header__hint strong { color: var(--text); }
/* ══════════════════════════════════════════════
   REVIEW TABLE (Step 4) — full-width inline-edit
   ══════════════════════════════════════════════ */

/* Vehicle photos bar with inline thumbnails */
.lst-rv-veh-bar {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 6px 12px;
}
.lst-rv-veh-bar__left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; order: 0; }
.lst-rv-veh-bar__label { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.lst-rv-veh-bar > .lst-toggle-switch { margin-left: auto; flex-shrink: 0; order: 2; }
.lst-rv-veh-bar__thumbs {
    display: flex; align-items: center; gap: 4px;
    overflow-x: auto; flex: 1; min-width: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.lst-rv-veh-bar__thumbs::-webkit-scrollbar { display: none; }
.lst-rv-veh-bar__thumbs img {
    width: 40px; height: 30px; object-fit: cover;
    border-radius: 3px; border: 1.5px solid var(--border);
    flex-shrink: 0; cursor: pointer; transition: border-color .12s, transform .12s;
}
.lst-rv-veh-bar__thumbs img:hover { border-color: var(--accent); transform: scale(1.08); }
.lst-rv-veh-bar__thumbs:empty::after {
    content: 'No vehicle photos'; font-size: 10px; color: var(--text-muted); font-style: italic;
}
.lst-toggle-switch--sm .lst-toggle-switch__track { width: 32px; height: 18px; }
.lst-toggle-switch--sm .lst-toggle-switch__knob { width: 14px; height: 14px; }
.lst-toggle-switch--sm input:checked + .lst-toggle-switch__track .lst-toggle-switch__knob {
    transform: translateX(14px);
}

/* Header row */
.lst-rv-header {
    display: flex; align-items: center; justify-content: space-between;
}
.lst-rv-header__count { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.lst-rv-export {
    font-size: 10px; font-weight: 700; padding: 4px 10px;
    border-radius: var(--radius-sm);
}

/* Table wrapper */
.lst-rv-table-wrap {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table head — 6 columns: status | part+cat | weight | dims | price | photos */
.lst-rv-thead {
    display: grid;
    grid-template-columns: 52px 1fr 130px 175px 92px 36px;
    align-items: center;
    background: var(--bg-base); border-bottom: 2px solid var(--border);
    min-height: 30px;
}
.lst-rv-th {
    padding: 0 6px; font-size: 9px; font-weight: 800;
    color: var(--text-muted); letter-spacing: 0.8px;
    font-family: var(--font-mono);
}
.lst-rv-th--status { text-align: center; padding: 0; }
.lst-rv-th--photos,
.lst-rv-th--preview { text-align: center; padding: 0; }

/* Table rows */
.lst-rv-row {
    display: grid;
    grid-template-columns: 52px 1fr 130px 175px 92px 36px;
    align-items: center;
    min-height: 40px;
    border-bottom: 1px solid var(--bg-hover);
    transition: background .1s;
}
.lst-rv-row:last-child { border-bottom: none; }
.lst-rv-row:nth-child(even) { background: var(--bg-base); }
.lst-rv-row:hover { background: var(--bg-hover); }
[data-theme="dark"] .lst-rv-row:nth-child(even) { background: rgba(255,255,255,.02); }
[data-theme="dark"] .lst-rv-row:hover { background: var(--bg-hover); }

/* Status cell */
.lst-rv-row__status {
    display: flex; align-items: center; justify-content: center;
    height: 100%; border-right: 1px solid var(--bg-hover);
}
.lst-rv-badge {
    display: inline-flex; align-items: center; gap: 3px;
    border-radius: 4px; padding: 2px 6px;
    font-size: 9px; font-weight: 800; font-family: var(--font-mono);
}
.lst-rv-badge--ok {
    background: var(--tint-success); border: 1px solid rgba(16,185,129,.3);
    color: var(--color-success);
}
.lst-rv-badge--fix {
    background: var(--tint-danger); border: 1px solid rgba(239,68,68,.3);
    color: var(--color-danger);
}

/* Part + Category combined cell */
.lst-rv-row__part {
    padding: 6px 10px; min-width: 0; overflow: hidden;
}
.lst-rv-row__part-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.lst-rv-row__part-cat {
    margin-top: 3px; position: relative;
}

/* Category button */
.lst-rv-cat-btn {
    display: flex; align-items: center; gap: 3px;
    border-radius: var(--radius-sm); padding: 3px 6px;
    cursor: pointer; font-size: 11px; font-weight: 700;
    white-space: nowrap; overflow: hidden;
    border-width: 1.5px; border-style: solid;
    background: none;
}
.lst-rv-cat-btn--set {
    background: var(--tint-success); border-color: rgba(16,185,129,.3);
    color: var(--color-success);
}
.lst-rv-cat-btn--miss {
    background: var(--tint-danger); border-color: rgba(239,68,68,.3);
    color: var(--color-danger);
}
.lst-rv-cat-btn span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.lst-rv-cat-btn svg { flex-shrink: 0; }

/* Inline number inputs */
.lst-rv-ni { display: inline-flex; align-items: center; gap: 2px; }
.lst-rv-ni input {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text-primary);
    font-size: 12px; font-family: var(--font-body); font-weight: 600;
    padding: 3px 2px; outline: none; text-align: right;
    transition: border-color .15s;
}
.lst-rv-ni input:focus { border-color: var(--color-info); }
.lst-rv-ni .lst-rv-suf { font-size: 9px; color: var(--text-muted); font-weight: 700; }
.lst-rv-ni .lst-rv-pre { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.lst-rv-sep { color: var(--border); font-weight: 800; font-size: 10px; margin: 0 1px; }

/* Field cells (weight, dims, price) */
.lst-rv-field { padding: 0 6px; display: flex; align-items: center; }

/* Photo cell */
.lst-rv-row__photos {
    display: flex; align-items: center; justify-content: center;
    gap: 2px; font-size: 10px; font-weight: 700;
    font-family: var(--font-mono);
}
.lst-rv-row__photos--ok { color: var(--color-success); }
.lst-rv-row__photos--miss { color: var(--color-danger); }

/* ── Mobile review ── */
@media (max-width: 767px) {
    .lst-rv-thead { display: none; }
    .lst-rv-row {
        display: flex; min-height: auto; padding: 0;
        grid-template-columns: none;
        border-bottom: 1px solid var(--bg-hover);
    }
    .lst-rv-row:nth-child(even) { background: var(--bg-card); }
    .lst-rv-row:hover { background: var(--bg-card); }
    .lst-rv-row__status,
    .lst-rv-row__part,
    .lst-rv-field,
    .lst-rv-row__photos { display: none; }

    /* Mobile strip + content */
    .lst-rv-mob-strip {
        width: 4px; flex-shrink: 0; border-radius: 2px 0 0 2px;
        align-self: stretch;
    }
    .lst-rv-mob-strip--ok { background: var(--color-success); }
    .lst-rv-mob-strip--fix { background: var(--color-danger); }
    .lst-rv-mob-content {
        flex: 1; padding: 8px 10px;
        display: flex; flex-direction: column; gap: 5px;
    }
    .lst-rv-mob-line1 { display: flex; align-items: center; gap: 6px; }
    .lst-rv-mob-title {
        flex: 1; font-size: 14px; font-weight: 700; color: var(--text-primary);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lst-rv-mob-line2 {
        display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .lst-rv-mob-group {
        display: flex; align-items: center; gap: 3px;
        background: var(--bg-base); border-radius: 4px; padding: 2px 6px;
    }
}
@media (min-width: 768px) {
    .lst-rv-mob-strip,
    .lst-rv-mob-content { display: none !important; }
}

/* Category export modal (copy/paste all part → category results for QA) */
.lst-cat-export-ov {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.lst-cat-export-dlg {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lst-cat-export-dlg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
}
.lst-cat-export-dlg__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.lst-cat-export-dlg__close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 4px;
}
.lst-cat-export-dlg__close:hover { color: var(--text-primary); }
.lst-cat-export-dlg__body {
    padding: 14px 18px;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lst-cat-export-dlg__hint {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
}
.lst-cat-export-dlg__textarea {
    flex: 1;
    min-height: 320px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.55;
    resize: vertical;
}
.lst-cat-export-dlg__textarea:focus {
    outline: none;
    box-shadow: var(--focus-ring);
    border-color: var(--accent);
}
.lst-cat-export-dlg__foot {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 18px;
    border-top: 1px solid var(--border);
    background: var(--bg-base);
}

/* Toggle switch */
.lst-toggle-switch { display: inline-flex; cursor: pointer; }
.lst-toggle-switch input { display: none; }
.lst-toggle-switch__track {
    width: 40px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--border);
    position: relative;
    transition: background .2s;
}
.lst-toggle-switch input:checked + .lst-toggle-switch__track {
    background: var(--accent);
}
.lst-toggle-switch__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform .2s;
}
.lst-toggle-switch input:checked + .lst-toggle-switch__track .lst-toggle-switch__knob {
    transform: translateX(18px);
}

/* Vehicle photo strip */
.lst-review-veh-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 0 2px;
    -webkit-overflow-scrolling: touch;
}
.lst-review-veh-strip img {
    width: 72px;
    height: 52px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .15s, transform .15s;
}
.lst-review-veh-strip img:hover { border-color: var(--accent); transform: scale(1.05); }

/* Lightbox */
.lst-lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    cursor: pointer;
    animation: sc-fade-in .12s ease;
}
.lst-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

/* (old review layout removed — now uses lst-rv-table-wrap) */

/* Review list rows */
.lst-review-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bg-hover);
    cursor: pointer;
    transition: background .12s;
}
.lst-review-row:last-child { border-bottom: none; }
.lst-review-row:hover { background: var(--bg-hover); }
.lst-review-row.is-active { background: rgba(16, 185, 129, .06); }
.lst-review-row__thumb {
    width: 48px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    overflow: hidden;
    flex-shrink: 0;
}
.lst-review-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lst-review-row__info {
    flex: 1;
    min-width: 0;
}
.lst-review-row__title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.lst-review-row__cat {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.lst-review-row__cat-label {
    font-size: 11px;
    color: var(--accent);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    cursor: pointer;
}
.lst-review-row__cat-label:hover { text-decoration: underline; }
.lst-review-row__cat-loading {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}
.lst-review-row__cat-none {
    font-size: 10px;
    color: var(--color-warning, #f59e0b);
    cursor: pointer;
}
.lst-review-row__cat-none:hover { text-decoration: underline; }
.lst-review-row__specs {
    font-size: 11px;
    color: var(--accent);
    font-weight: 500;
    cursor: pointer;
    margin-top: 1px;
}
.lst-review-row__specs:hover { text-decoration: underline; }
.lst-review-row__specs--predicted { font-style: italic; opacity: .75; }

/* Specs edit dropdown */
.lst-specs-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 12px;
    z-index: var(--z-dropdown);
    min-width: 200px;
}
.lst-specs-dropdown__title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.lst-specs-dropdown__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.lst-specs-dropdown__row label {
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
}
.lst-specs-dropdown__row input {
    width: 80px;
    padding: 4px 6px;
    font-size: 12px;
    font-family: var(--font-mono);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    color: var(--text);
    text-align: right;
}
.lst-specs-dropdown__actions {
    margin-top: 8px;
    text-align: right;
}
.lst-review-row__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.lst-review-row__photos {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}
.lst-review-row__price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    min-width: 60px;
    text-align: right;
}
.lst-review-row__edit {
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 2px 6px;
    transition: all .12s;
    flex-shrink: 0;
}
.lst-review-row__edit:hover { color: var(--accent); border-color: var(--accent); }
.lst-review-row__arrow {
    color: var(--text-muted);
    font-size: 14px;
    flex-shrink: 0;
}
@media (max-width: 900px) {
    .lst-review-row__arrow { display: none; }
}

/* Quick-edit popup fields */
.lst-qe-field { margin-bottom: 12px; }
.lst-qe-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.lst-qe-row {
    display: flex;
    gap: 10px;
}
.lst-qe-field--half { flex: 1; }
.lst-qe-cat-wrap { position: relative; }
.lst-qe-cat-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 180px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}
.lst-qe-cat-opt {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background .1s;
}
.lst-qe-cat-opt:hover { background: var(--bg-hover); }
.lst-qe-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* ── Category dropdown (inline on review row) ── */
.lst-cat-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 220px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}
.lst-cat-dropdown__search {
    padding: 8px;
    border-bottom: 1px solid var(--bg-hover);
    position: sticky;
    top: 0;
    background: var(--bg-card);
}
.lst-cat-dropdown__search input {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-base);
    color: var(--text);
}
.lst-cat-dropdown__item {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background .1s;
}
.lst-cat-dropdown__item:hover { background: var(--bg-hover); }
.lst-cat-dropdown__item--active { background: rgba(16, 185, 129, .08); font-weight: 600; }
.lst-cat-dropdown__path { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

/* ── Preview panel ── */
.lst-preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.lst-preview-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.lst-preview-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lst-preview-head__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.lst-preview-head__expand {
    font-size: 11px;
    color: var(--accent);
    cursor: pointer;
    background: none;
    border: none;
    font-weight: 600;
    padding: 2px 6px;
}
.lst-preview-head__expand:hover { text-decoration: underline; }
.lst-preview-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--bg-hover);
}
.lst-preview-thumbs {
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.lst-preview-thumbs::-webkit-scrollbar { display: none; }
.lst-preview-thumb {
    width: 52px;
    height: 40px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .12s;
}
.lst-preview-thumb.is-active { border-color: var(--accent); }
.lst-preview-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lst-preview-body { padding: 14px; }
.lst-preview-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 6px;
    color: var(--text);
}
.lst-preview-price {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 10px;
}
.lst-preview-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lst-preview-detail {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
}
.lst-preview-detail__label {
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 72px;
}
.lst-preview-detail__value {
    color: var(--text);
}
.lst-preview-cat-path {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ── Preview popup (mobile + expand button) ── */
.lst-preview-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    animation: sc-fade-in .12s ease;
    padding: 20px;
}
.lst-preview-popup__inner {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    position: relative;
}
.lst-preview-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--bg-card);
    border: none;
    border-radius: var(--radius-full);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    z-index: 1;
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
}
.lst-preview-popup__close:hover { color: var(--text); }
/* Mobile: tap a row to open preview as popup */
@media (max-width: 900px) {
    .lst-review-row { cursor: pointer; }
}

/* ── Publish header ── */
.lst-pub-header {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lst-pub-header__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.lst-pub-header__count {
    font-size: 12px;
    color: var(--text-muted);
}

/* ── Channel toggle cards ── */
.lst-ch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.lst-ch-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: border-color .15s, box-shadow .15s;
}
.lst-ch-card--on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(16, 185, 129, .1); }
.lst-ch-card--disabled { opacity: .5; }
.lst-ch-card__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lst-ch-card__icon { font-size: 22px; flex-shrink: 0; }
.lst-ch-card__text { min-width: 0; }
.lst-ch-card__label { font-size: 13px; font-weight: 700; display: block; color: var(--text); }
.lst-ch-card__status { font-size: 11px; color: var(--text-muted); }
.lst-ch-card__status--on { color: var(--accent); font-weight: 600; }
.lst-ch-card__status--warn { color: var(--color-warning, #f59e0b); }

/* ── Publish parts list ── */
.lst-pub-list {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.lst-pub-part {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--bg-hover);
}
.lst-pub-part:last-child { border-bottom: none; }
.lst-pub-part__img {
    width: 48px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--bg-hover);
    overflow: hidden;
    flex-shrink: 0;
}
.lst-pub-part__img img { width: 100%; height: 100%; object-fit: cover; }
.lst-pub-part__info { flex: 1; min-width: 0; }
.lst-pub-part__title {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
}
.lst-pub-part__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
}
.lst-pub-part__cat {
    color: var(--accent);
    font-weight: 500;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lst-pub-part__price {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
}

/* eBay config / category search */
.lst-ebay-config { margin-bottom: 12px; }
.lst-ebay-cat-search { position: relative; margin-bottom: 6px; }
.lst-ebay-cat-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
}
.lst-ebay-cat-option {
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background .1s;
}
.lst-ebay-cat-option:hover { background: var(--bg-hover); }
.lst-ebay-cat-id { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.lst-ebay-cat-path { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.lst-ebay-cat-selected {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    padding: 4px 0;
}

/* ── Summary card ── */
.lst-summary-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}
.lst-summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--bg-hover);
}
.lst-summary-row:last-child { border-bottom: none; }
.lst-summary-row__thumb {
    width: 34px;
    height: 24px;
    border-radius: 4px;
    background: var(--bg-hover);
    overflow: hidden;
    flex-shrink: 0;
}
.lst-summary-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lst-summary-row__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
}
.lst-summary-row__price {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}

/* ── Publish total ── */
.lst-publish-total {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
}
.lst-publish-total__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.lst-publish-total__row--sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
}
.lst-publish-total__value {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
}
.lst-publish-total .btn-primary {
    width: 100%;
    margin-top: 14px;
    font-size: 15px;
}

/* Publish progress popup */
.lst-pub-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-hover);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin: 12px 0;
}
.lst-pub-bar__fill {
    height: 100%;
    width: 0%;
    background: var(--color-info);
    border-radius: var(--radius-full);
    transition: width .3s ease;
}
.lst-pub-rows {
    max-height: 340px;
    overflow-y: auto;
    text-align: left;
}
.lst-pub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--bg-hover);
    font-size: 13px;
}
.lst-pub-row:last-child { border-bottom: none; }
.lst-pub-row__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    color: var(--text);
}
.lst-pub-row__status {
    flex-shrink: 0;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.lst-pub-row__status--active { color: var(--color-info); }
.lst-pub-row__status--ok { color: var(--accent); }
.lst-pub-row__status--ok a { color: var(--accent); text-decoration: none; }
.lst-pub-row__status--ok a:hover { text-decoration: underline; }
.lst-pub-row__status--fail { color: var(--color-danger, #dc2626); }
.lst-pub-row__error {
    flex-shrink: 0;
    max-width: 55%;
    margin-left: 10px;
    font-size: 11px;
    color: var(--color-danger, #dc2626);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lst-pub-row__meta { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.lst-pub-row--fail .lst-pub-row__name { color: var(--color-danger, #dc2626); }
.lst-pub-section { margin-bottom: 8px; }
.lst-pub-section:last-child { margin-bottom: 0; }
.lst-pub-section__head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--bg-hover);
}
.lst-pub-section__head--fail { color: var(--color-danger, #dc2626); }
.lst-pub-section__head--ok { color: var(--accent); }

/* ── Bottom Nav (fixed, respects sidebar) ── */
.lst-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 16rem; /* sidebar width */
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 24px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    z-index: var(--z-sidebar);
    gap: 8px;
}
.lst-bottom-nav .lst-step-indicator { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.lst-bottom-nav__row { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; width: 100%; }
.lst-bottom-nav__right { display: flex; gap: 6px; align-items: center; }

/* Review-step progress bar (categories / shipping specs ready) */
.lst-review-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 2px 0;
}
.lst-review-progress__bar {
    flex: 1;
    height: 6px;
    background: var(--bg-input);
    border-radius: var(--radius-full);
    overflow: hidden;
    min-width: 0;
}
.lst-review-progress__fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width 180ms ease-out;
}
.lst-review-progress--done .lst-review-progress__fill {
    background: var(--color-success);
}
.lst-review-progress__label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lst-review-progress--done .lst-review-progress__label {
    color: var(--color-success);
}
/* Content padding to clear fixed nav */
.listings-page { padding-bottom: 56px; }
/* Photo step: bottom nav sits below full-height panels */
.lst-photos-app { margin-bottom: -56px; }
/* Mobile: sidebar hidden, full width */
@media (max-width: 920px) {
    .lst-bottom-nav {
        left: 0;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
    .listings-page { padding-bottom: 70px; }
}
/* Mobile (≤700px): bottom nav is taller with summary row */
@media (max-width: 700px) {
    .listings-page { padding-bottom: 110px; }
}
/* Lift FAB stack above listings bottom nav — class added by JS */
.fab-stack--listings-lift { bottom: 80px !important; }
@media (max-width: 920px) {
    .fab-stack--listings-lift { bottom: 140px !important; }
}
.lst-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.lst-step-dots {
    display: flex;
    gap: 5px;
    align-items: center;
}
.lst-step-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.2s, width 0.2s, height 0.2s;
}
.lst-step-dot--done {
    background: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.lst-step-dot--cur {
    width: 8px;
    height: 8px;
    background: var(--accent);
}
.lst-step-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Loading overlay ── */
.lst-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.lst-loading-overlay__box {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 32px 48px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.lst-loading-overlay__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: lstSpin 0.8s linear infinite;
    margin: 0 auto 12px;
}
@keyframes lstSpin { to { transform: rotate(360deg); } }
.lst-loading-overlay__text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ── Empty state ── */
.lst-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════
   STEP 3: Vehicle Fitment — chassis-driven picker
   Two-tier model selection (Suggested + Browse all),
   replacing the legacy filter/search UI.
   ═══════════════════════════════════════════════ */
.lst-fit2 {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.lst-fit2__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.lst-fit2__header-text { flex: 1; min-width: 0; }
.lst-fit2__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text);
}
.lst-fit2__sub {
    font-size: 12px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}
.lst-fit2__sub strong { color: var(--text); }
.lst-fit2__count {
    flex-shrink: 0;
    text-align: center;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.lst-fit2__count span {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}
.lst-fit2__count small {
    display: block;
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.lst-fit2__loading {
    padding: 30px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}

/* ── Section (Suggested / Browse) ── */
.lst-fit2-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px 18px;
    box-shadow: var(--shadow-sm);
}
.lst-fit2-section--suggested {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 5%, var(--bg-card)),
        var(--bg-card));
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.lst-fit2-section__head {
    margin-bottom: 14px;
}
.lst-fit2-section__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lst-fit2-section__icon {
    font-size: 14px;
    color: var(--accent);
}
.lst-fit2-section__sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.lst-fit2-section__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 7px;
}

/* ── Picker card (one per model/chassis) ── */
.lst-fit2-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-hover);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.lst-fit2-card:active { transform: scale(0.98); }
.lst-fit2-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: var(--bg-card);
}
.lst-fit2-card.is-selected {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.lst-fit2-card input[type="checkbox"] {
    margin-top: 2px;
    accent-color: var(--accent);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.lst-fit2-card__body { flex: 1; min-width: 0; }
.lst-fit2-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    word-wrap: break-word;
}
.lst-fit2-card__make {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lst-fit2-card__model { font-weight: 700; }
.lst-fit2-card__chassis {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono, "Courier New", monospace);
    letter-spacing: 0.04em;
    vertical-align: 1px;
}
.lst-fit2-card__donor-tag {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--color-success, #16a34a) 14%, transparent);
    color: var(--color-success, #16a34a);
    border: 1px solid color-mix(in srgb, var(--color-success, #16a34a) 35%, transparent);
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lst-fit2-card__sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}
.lst-fit2-card--donor {
    background: color-mix(in srgb, var(--color-success, #16a34a) 6%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-success, #16a34a) 30%, var(--border));
}
.lst-fit2-card--donor.is-selected {
    border-color: var(--color-success, #16a34a);
    box-shadow: 0 0 0 1px var(--color-success, #16a34a) inset;
}
.lst-fit2-card--peer.is-selected { background: color-mix(in srgb, var(--accent) 14%, var(--bg-card)); }

/* ── Selected pill bar ── */
.lst-fit2-selected {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
}
.lst-fit2-selected__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.lst-fit2-selected__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lst-fit2-selected__clear {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    color: var(--color-danger, #dc2626);
    border: 1px solid color-mix(in srgb, var(--color-danger, #dc2626) 40%, transparent);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.lst-fit2-selected__clear:hover {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 10%, transparent);
}
.lst-fit2-selected__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.lst-fit2-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 4px 4px 10px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-hover));
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}
.lst-fit2-pill__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    border-radius: var(--radius-full);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.lst-fit2-pill__x:hover {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
}
.lst-fit2-selected__total {
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.lst-fit2-selected__total strong {
    color: var(--text);
    font-weight: 700;
    font-family: var(--font-mono, "Courier New", monospace);
}

/* ── Empty / fallback messaging ── */
.lst-fit2-empty {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    background: var(--bg-hover);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
}

/* ── Per-part adjustment cards (year/engine/model/drivetrain filters) ── */
.lst-fit2-section--per-part {
    background: var(--bg-card);
}
.lst-fit2-pcard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lst-fit2-pcard {
    background: var(--bg-hover);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    transition: border-color 120ms ease, background 120ms ease;
}
.lst-fit2-pcard.has-filters {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: color-mix(in srgb, var(--accent) 4%, var(--bg-hover));
}

.lst-fit2-pcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.lst-fit2-pcard__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    word-wrap: break-word;
}
.lst-fit2-pcard__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--radius-full);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: 1px;
}
.lst-fit2-pcard__count {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    line-height: 1.2;
    font-family: var(--font-mono, "Courier New", monospace);
}
.lst-fit2-pcard__count strong {
    display: block;
    font-size: 16px;
    color: var(--accent);
    font-weight: 700;
}
.lst-fit2-pcard.has-filters .lst-fit2-pcard__count strong {
    color: var(--color-warning, #f59e0b);
}

.lst-fit2-pcard__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* One filter row inside a pcard (label + control) */
.lst-fit2-frow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 28px;
}
.lst-fit2-frow__label {
    flex-shrink: 0;
    width: 80px;
    padding-top: 5px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lst-fit2-frow__ctrl {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.lst-fit2-frow__ctrl--chips {
    gap: 4px;
}
.lst-fit2-yr {
    width: 70px;
    padding: 4px 8px;
    font-size: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-align: center;
    font-family: var(--font-mono, "Courier New", monospace);
}
.lst-fit2-yr:focus {
    outline: none;
    border-color: var(--accent);
}
.lst-fit2-yr-sep {
    color: var(--text-muted);
    font-size: 12px;
}
.lst-fit2-frow__reset {
    margin-left: auto;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.lst-fit2-frow__reset:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* Filter chips (engines/models/drivetrains) */
.lst-fit2-fchip {
    display: inline-block;
    padding: 4px 9px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 11px;
    color: var(--text);
    cursor: pointer;
    transition: all 120ms ease;
}
.lst-fit2-fchip:hover {
    border-color: var(--text-muted);
}
.lst-fit2-fchip.is-on {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}

.lst-fit2-pcard__foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    min-height: 22px;
}
.lst-fit2-pcard__hint {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}
.lst-fit2-pcard__action {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
}
.lst-fit2-pcard__action--reset {
    color: var(--color-danger, #dc2626);
    border-color: color-mix(in srgb, var(--color-danger, #dc2626) 35%, transparent);
}
.lst-fit2-pcard__action--reset:hover {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 8%, transparent);
}
.lst-fit2-pcard__action--apply {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    margin-left: auto;
}
.lst-fit2-pcard__action--apply:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}

@media (max-width: 720px) {
    .lst-fit2__header { flex-direction: column; }
    .lst-fit2__count { align-self: flex-end; }
    .lst-fit2-section__cards { grid-template-columns: 1fr; }
    .lst-fit2-frow { flex-direction: column; gap: 4px; }
    .lst-fit2-frow__label { width: auto; padding-top: 0; }
    .lst-fit2-frow__reset { margin-left: 0; }
    .lst-fit2-pcard__foot { flex-wrap: wrap; }
    .lst-fit2-pcard__action--apply { margin-left: 0; }
}


/* ═══ Review preview: fitment section ═══ */
.lst-review-row__fitment {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.lst-preview-fitment {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bg-hover);
}
.lst-preview-fitment__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.lst-preview-fitment__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.lst-preview-fitment__count {
    font-size: 12px;
    font-weight: 600;
    color: #1d4ed8;
    font-family: var(--font-mono, "Courier New", monospace);
    background: rgba(37,99,235,0.08);
    border: 1px solid rgba(37,99,235,0.25);
    padding: 2px 8px;
    border-radius: 10px;
}
.lst-preview-fitment__empty {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 8px 0;
}
.lst-preview-fitment__groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
}
.lst-preview-fitment__group {
    padding: 8px 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.lst-preview-fitment__ymm {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
}
.lst-preview-fitment__ymm strong {
    color: #1d4ed8;
    font-family: var(--font-mono, "Courier New", monospace);
    font-weight: 700;
    margin-right: 4px;
}
.lst-preview-fitment__badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(37,99,235,0.12);
    color: #1d4ed8;
    font-size: 10px;
    font-weight: 700;
    font-family: var(--font-mono, "Courier New", monospace);
}
.lst-preview-fitment__details {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 5px;
}
.lst-preview-fitment__chip {
    display: inline-block;
    padding: 2px 7px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* MOBILE CREATE LISTING POLISH (≤700px)                                  */
/* Cleaner stepper, card-based layouts, touch targets, light/dark themed  */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Icon button shell — desktop shows label only, mobile shows icon only (except Next) */
.lst-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lst-nav-btn__icon {
    flex-shrink: 0;
    display: none; /* hidden on desktop */
}

/* Publish variant (green instead of accent) — used on step 5 */
.lst-nav-btn--publish {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

/* Mobile wizard stepper — hidden on desktop */
.lst-mob-stepper { display: none; }
/* Mobile bottom bar summary row — hidden on desktop */
.lst-mob-summary { display: none; }

@media (max-width: 700px) {
    /* ── Hide the top mobile stepper entirely ── */
    .lst-mob-stepper {
        display: none;
    }

    /* Hide the top header step pills on mobile — the mob stepper replaces them */
    .listings-page .pg-head__pills {
        display: none;
    }

    /* ── Mobile bottom nav summary row ── */
    .lst-bottom-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 16px;
    }
    .lst-bottom-nav__row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    .lst-mob-summary {
        display: flex;
        justify-content: center;
        gap: 14px;
        padding: 2px 0 2px;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
    }
    .lst-mob-summary__item--ok { color: var(--color-success); }
    .lst-mob-summary__item--warn { color: var(--color-warning); }
    .lst-mob-summary__item--total { color: var(--text-muted); }
    /* Step indicator in bottom nav: step name on top, dots under it */
    .lst-bottom-nav .lst-step-indicator {
        flex: 1;
        flex-direction: column-reverse; /* name above dots */
        gap: 5px;
    }
    .lst-bottom-nav .lst-step-dots {
        display: flex;
    }
    .lst-step-name {
        font-size: 12px;
    }
    /* Hide vehicle badge on mobile to save space — top stepper shows step */
    .lst-bottom-nav .lst-vehicle-badge {
        display: none !important;
    }
    /* Primary Next button on mobile: larger touch target */
    .lst-bottom-nav .btn-primary {
        padding: 12px 18px;
        font-size: 14px;
        font-weight: 700;
    }
    .lst-bottom-nav #lstBackBtn {
        padding: 12px 14px;
        font-size: 13px;
    }

    /* ── Icon-only buttons on mobile ── */
    /* Back button: show icon, hide "Back" label */
    #lstBackBtn.lst-nav-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        flex-shrink: 0;
    }
    #lstBackBtn .lst-nav-btn__icon {
        display: inline-block;
    }
    #lstBackBtn .lst-nav-btn__label {
        display: none;
    }
    /* Save button: show icon, hide "Save" label */
    #lstSaveBtn.lst-nav-btn {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        flex-shrink: 0;
    }
    #lstSaveBtn .lst-nav-btn__icon {
        display: inline-block;
    }
    #lstSaveBtn .lst-nav-btn__label {
        display: none;
    }
    /* Next button: keep label + show icon */
    #lstNextBtn.lst-nav-btn {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }
    #lstNextBtn .lst-nav-btn__icon {
        display: inline-block;
    }

    /* ── Hide desktop-only header chrome on mobile ── */
    .listings-page .lst-archived-toggle {
        display: none;
    }

    /* ── Parts step tabs → clean pill chips ── */
    .lst-parts-tabs {
        gap: 8px;
        padding: 12px 4px 10px;
        margin: 0 12px;
        border-bottom: none;
    }
    .lst-parts-tab {
        padding: 7px 14px;
        font-size: 12px;
        font-weight: 600;
        border-radius: var(--radius-full);
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text-muted);
    }
    .lst-parts-tab.active {
        background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        color: var(--accent);
    }
    /* Hide Select All + Add text buttons on mobile — they can live in a menu */
    .lst-parts-tab-actions {
        gap: 6px;
        margin-left: auto;
    }
    .lst-parts-tab-actions .btn {
        padding: 7px 10px;
        font-size: 11px;
    }

    /* ── Photo card count badge (pill in header) ── */
    .lst-pt__count {
        font-family: var(--font-body);
        font-size: 11px;
        font-weight: 600;
        padding: 4px 11px;
        border-radius: var(--radius-full);
        background: var(--tint-warning);
        color: var(--color-warning);
        border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--border));
        letter-spacing: 0;
    }
    .lst-pt__count--ok {
        background: var(--tint-success);
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
    }

    /* ── Tighten wizard content padding on mobile ── */
    .lst-panel .pg-content {
        padding: 14px 12px 16px;
        gap: 14px;
    }

    /* ── Add-form card: tighter on mobile ── */
    .lst-add-form-card {
        padding: 14px;
    }
    .lst-add-form {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* ── Parts list cards: card-based layout on mobile ── */
    .lst-parts-list { gap: 10px; padding: 0 4px; }
    .lst-part-row {
        padding: 14px 16px;
        border-radius: var(--radius-lg);
        gap: 14px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        align-items: center;
        flex-wrap: nowrap;
    }
    .lst-part-row.selected {
        background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    }
    .lst-chk {
        width: 24px;
        height: 24px;
        border-radius: 7px;
        border-width: 2px;
        flex-shrink: 0;
    }
    /* Hide the small part thumbnail on mobile — clean card look */
    .lst-part-row__thumb {
        display: none;
    }
    .lst-part-row__info {
        flex: 1;
        min-width: 0;
    }
    .lst-part-row__name {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lst-part-row__meta {
        font-family: var(--font-body);
        font-size: 13px;
        font-weight: 700;
        color: var(--accent);
        margin-top: 3px;
    }
    /* Badges column: stays inline, no stacking */
    .lst-part-row__badges {
        width: auto;
        padding: 0;
        margin: 0;
        flex-shrink: 0;
        flex-wrap: wrap;
        max-width: 100px;
        justify-content: flex-end;
    }
    .lst-badge {
        font-size: 10px;
        padding: 2px 8px;
    }

    /* ── Photos step: clean card layout on mobile ── */
    .lst-photos-app {
        padding: 12px 12px 0;
        margin-bottom: 0;
    }
    .lst-photos-right {
        background: transparent;
        border: none;
    }
    .lst-photos-right__head {
        padding: 0 4px 10px;
    }
    .lst-photos-right__title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
    }
    .lst-photos-right__scroll {
        padding: 0;
        gap: 10px;
    }
    /* Part photo cards on mobile: rounded card with photo slot grid */
    .lst-pt {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 14px 16px 14px;
        margin: 0;
    }
    .lst-pt__head {
        padding: 0 0 12px;
        gap: 12px;
        align-items: center;
    }
    /* Hide the tiny part thumbnail in the card header — cleaner look */
    .lst-pt__thumb {
        display: none;
    }
    .lst-pt__info {
        flex: 1;
        min-width: 0;
    }
    .lst-pt__name {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lst-pt__sub {
        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
        margin-top: 2px;
    }
    .lst-pt__count {
        font-size: 11px;
        padding: 4px 11px;
        border-radius: var(--radius-full);
        background: var(--tint-warning);
        color: var(--color-warning);
        border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--border));
        font-weight: 600;
        order: 2; /* push badge to the far right */
    }
    .lst-pt__count--ok {
        background: var(--tint-success);
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    }
    /* Remove the small + add button from the card head on mobile
       (the + is in the photo slots grid below instead) */
    .lst-pt__add {
        display: none;
    }
    .lst-pt__lz {
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        min-height: auto;
        gap: 8px;
        flex-wrap: wrap;
    }
    .lst-pt__lz-hint {
        display: none; /* no hint text on mobile — the slots are self-explanatory */
    }
    .lst-pt__plus-slot {
        width: 68px;
        height: 68px;
        border-radius: var(--radius-md);
        border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
        background: color-mix(in srgb, var(--accent) 4%, transparent);
        font-size: 22px;
        color: var(--accent);
        font-weight: 500;
    }
    /* Placed photos grid: fixed size thumbs matching the + slot */
    .lst-placed {
        width: 68px;
        height: 68px;
        border-radius: var(--radius-md);
    }

    /* Mobile bulk upload banner override — use our tokens */
    .lst-photos-mob-bulk {
        margin: 0 12px 12px;
        padding: 12px 14px;
        background: var(--bg-card);
        border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--border));
        border-radius: var(--radius-lg);
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .lst-photos-mob-bulk__btn {
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--accent);
        font-size: 13px;
        padding: 4px 0;
    }
    .lst-photos-mob-bulk__btn:hover {
        background: transparent;
    }
    .lst-photos-mob-bulk__note {
        text-align: center;
        font-size: 11px;
    }

    /* ── Review step: polished cards on mobile ── */
    .lst-review-list {
        background: transparent;
        border: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 0 4px;
        overflow: visible;
    }
    .lst-review-row {
        padding: 14px 16px;
        border-radius: var(--radius-lg);
        gap: 12px;
        border: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        background: var(--bg-card);
        align-items: flex-start;
    }
    .lst-review-row:last-child { border-bottom: 1px solid var(--border); }
    .lst-review-row.is-active {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
        background: color-mix(in srgb, var(--accent) 4%, var(--bg-card));
    }
    .lst-review-row__thumb {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        flex-shrink: 0;
    }
    .lst-review-row__info {
        flex: 1;
        min-width: 0;
    }
    .lst-review-row__title {
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lst-review-row__cat {
        margin-top: 5px;
    }
    .lst-review-row__cat-label {
        display: inline-block;
        max-width: 100%;
        padding: 3px 10px;
        font-size: 11px;
        font-weight: 600;
        background: var(--tint-success);
        color: var(--accent);
        border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
        border-radius: var(--radius-full);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lst-review-row__cat-none {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 10px;
        font-size: 11px;
        font-weight: 600;
        background: var(--tint-warning);
        color: var(--color-warning);
        border: 1px solid color-mix(in srgb, var(--color-warning) 35%, var(--border));
        border-radius: var(--radius-full);
    }
    .lst-review-row__cat-none::before {
        content: "\26A0"; /* warning triangle */
        font-size: 10px;
    }
    .lst-review-row__cat-loading {
        display: inline-block;
        padding: 3px 10px;
        font-size: 11px;
        color: var(--text-muted);
        border-radius: var(--radius-full);
        background: var(--bg-hover);
        font-style: normal;
    }
    .lst-review-row__specs {
        font-size: 11px;
        color: var(--text-muted);
        margin-top: 5px;
    }
    .lst-review-row__meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        flex-shrink: 0;
    }
    .lst-review-row__price {
        font-size: 16px;
        font-weight: 700;
        color: var(--accent);
    }
    .lst-review-row__photos,
    .lst-review-row__fitment {
        font-size: 10px;
        color: var(--text-muted);
    }
    .lst-review-row__edit {
        padding: 4px 8px;
        font-size: 12px;
    }
    .lst-review-row__arrow {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════ */