.showcase-launch-card { overflow: hidden; border-color: color-mix(in srgb, var(--primary) 24%, var(--border-color)); }
.showcase-launch-card.is-live { border-color: #22c55e; }
.showcase-launch-grid, .showcase-url-bar, .showcase-lead-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.showcase-launch-grid h3 { margin: .2rem 0; }
.showcase-launch-grid p { margin: 0; color: var(--text-secondary); }
.showcase-url-bar { padding: .8rem 1rem; background: var(--background); border-top: 1px solid var(--border-color); flex-wrap: wrap; }
.showcase-url-bar code { overflow-wrap: anywhere; }
.showcase-url-bar div { display: flex; gap: .5rem; }
.showcase-switch { min-height: 48px; display: inline-flex; align-items: center; gap: .65rem; padding: .65rem .9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-color); font-weight: 700; }
.showcase-switch input { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); }
.showcase-settings-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 1rem; margin: 1rem 0; }
.showcase-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.showcase-field-grid label, .showcase-color-field, .showcase-media-grid > div { display: grid; gap: .4rem; font-weight: 650; }
.showcase-field-grid .is-wide { grid-column: 1 / -1; }
.showcase-slug-field { display: flex; align-items: center; }
.showcase-slug-field input { border-radius: .6rem 0 0 .6rem; }
.showcase-slug-field span { align-self: stretch; display: flex; align-items: center; padding: 0 .65rem; background: var(--background); border: 1px solid var(--border-color); border-left: 0; border-radius: 0 .6rem .6rem 0; color: var(--text-secondary); }
.showcase-theme-options { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.showcase-theme-options label { cursor: pointer; }
.showcase-theme-options input { position: absolute; opacity: 0; }
.showcase-theme-options span { display: grid; gap: .2rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: .8rem; }
.showcase-theme-options input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.showcase-theme-options small { color: var(--text-secondary); font-weight: 400; }
.showcase-color-field { margin: 1rem 0; grid-template-columns: 1fr auto auto; align-items: center; }
.showcase-color-field input { width: 48px; height: 44px; border: 0; background: none; }
.showcase-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.showcase-media-grid img, .showcase-media-empty { width: 100%; height: 120px; object-fit: cover; border-radius: .75rem; background: var(--background); border: 1px dashed var(--border-color); }
.showcase-media-grid img.is-logo { object-fit: contain; padding: .65rem; }
.showcase-media-grid small { min-height: 2.5em; color: var(--text-secondary); font-weight: 400; }
.showcase-media-empty { display: grid; place-content: center; gap: .2rem; padding: .75rem; color: var(--text-secondary); text-align: center; font-weight: 400; }
.showcase-media-empty strong { color: var(--text); font-size: 1rem; }
.showcase-media-empty span { font-size: .8rem; }
.showcase-media-empty.is-text-only strong { color: var(--primary); font-size: 1.08rem; }
.showcase-media-visibility { min-height: 44px; display: flex; align-items: center; gap: .45rem; font-weight: 650; }
.showcase-media-visibility input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.showcase-identity-card, .showcase-appearance-card { margin: 1rem 0; }
.showcase-appearance-sections { display: grid; gap: 1.25rem; }
.showcase-appearance-section { display: grid; gap: .85rem; }
.showcase-appearance-section + .showcase-appearance-section { padding-top: 1.25rem; border-top: 1px solid var(--border-color); }
.showcase-section-heading h4 { margin: 0; color: var(--text); font-size: 1rem; }
.showcase-section-heading p { margin: .25rem 0 0; color: var(--text-secondary); font-size: .88rem; }
.showcase-branding-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.showcase-branding-option { cursor: pointer; }
.showcase-branding-option > input { position: absolute; opacity: 0; pointer-events: none; }
.showcase-branding-option > span { min-height: 100%; display: grid; gap: .35rem; padding: .65rem; border: 1px solid var(--border-color); border-radius: .9rem; background: var(--background); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.showcase-branding-option:hover > span { transform: translateY(-1px); }
.showcase-branding-option > input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.showcase-branding-option > input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent); }
.showcase-branding-preview { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .5rem; height: 104px; margin-bottom: .25rem; }
.showcase-branding-preview img, .showcase-branding-no-media { width: 100%; height: 100%; object-fit: cover; border-radius: .65rem; background: var(--surface); }
.showcase-branding-preview img.is-logo { object-fit: contain; padding: .35rem; }
.showcase-branding-no-media { display: grid; place-items: center; padding: .45rem; color: var(--text-secondary); text-align: center; font-size: .72rem; }
.showcase-branding-no-media.is-logo b { color: var(--primary); font-size: .78rem; line-height: 1.15; overflow-wrap: anywhere; }
.showcase-branding-option b { color: var(--text); }
.showcase-branding-option small { color: var(--text-secondary); }
.showcase-branding-option em { margin-top: .15rem; color: var(--primary); font-size: .78rem; font-style: normal; font-weight: 750; }
.showcase-display-options { display: flex; flex-wrap: wrap; gap: 1rem; }
.showcase-contacts-card { margin: 1rem 0; }
.showcase-contacts-card .settings-card-header { align-items: center; }
.showcase-contact-list { display: grid; gap: .9rem; }
.showcase-contact-editor { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: .9rem; background: var(--background); }
.showcase-contact-editor[data-busy="1"] { opacity: .7; }
.showcase-contact-photo-column { display: grid; align-content: start; gap: .55rem; }
.showcase-contact-photo-preview { width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px dashed var(--border-color); border-radius: .85rem; background: var(--surface); }
.showcase-contact-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.showcase-contact-photo-preview span { width: 100%; height: 100%; display: grid; place-items: center; color: var(--primary); font-size: 2rem; font-weight: 800; }
.showcase-contact-photo-button { position: relative; overflow: hidden; text-align: center; }
.showcase-contact-photo-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.showcase-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.showcase-contact-fields label { display: grid; gap: .35rem; font-weight: 650; }
.showcase-contact-feedback { grid-column: 1 / -1; min-height: 1.2rem; margin: 0; color: var(--text-secondary); font-size: .85rem; }
.showcase-contact-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .55rem; }
.showcase-contact-empty { padding: 2rem 1rem; text-align: center; color: var(--text-secondary); }
.showcase-contact-empty p { max-width: 520px; margin: .35rem auto 0; }
.showcase-vehicle-list, .showcase-lead-list { display: grid; gap: .6rem; }
.showcase-vehicle-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: center; gap: .75rem 1rem; padding: .85rem; border: 1px solid var(--border-color); border-radius: .75rem; background: var(--background); transition: border-color .15s ease, opacity .15s ease; }
.showcase-vehicle-row[hidden] { display: none; }
.showcase-vehicle-row.is-published { border-color: color-mix(in srgb, #22c55e 40%, var(--border-color)); }
.showcase-vehicle-row.is-hidden { border-style: dashed; }
.showcase-vehicle-row[aria-busy="true"] { opacity: .7; }
.showcase-vehicle-photo { width: 112px; height: 84px; object-fit: cover; border-radius: .65rem; background: var(--surface); }
.showcase-vehicle-identity, .showcase-lead-row > div { display: grid; min-width: 0; }
.showcase-vehicle-row small, .showcase-lead-row small { color: var(--text-secondary); }
.showcase-publication-control { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.showcase-vehicle-row select { width: 150px; }
.showcase-inline-toggle { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.showcase-inline-toggle input { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); }
.showcase-row-status { grid-column: 1 / -1; min-height: 0; text-align: right; }
.showcase-row-status:empty { display: none; }
.showcase-lead-row { align-items: start; flex-wrap: wrap; }
.showcase-lead-row p { flex: 1 1 240px; margin: 0; white-space: pre-wrap; }
.showcase-lead-row select { max-width: 140px; }
.showcase-empty { color: var(--text-secondary); text-align: center; padding: 1.5rem; }
.showcase-view-header { align-items: flex-end; }
.showcase-view-header h1 { margin-bottom: .2rem; }
.showcase-view-header p, .showcase-catalog-shortcut p { margin: 0; color: var(--text-secondary); }
.showcase-view-tabs { display: inline-flex; gap: .35rem; margin: 1rem 0; padding: .3rem; border: 1px solid var(--border-color); border-radius: .85rem; background: var(--background); }
.showcase-view-tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .55rem 1rem; border: 0; border-radius: .65rem; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 750; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.showcase-view-tab:hover { color: var(--text); }
.showcase-view-tab.active { background: var(--surface); color: var(--primary); box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.showcase-view-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[data-showcase-view-panel][hidden] { display: none; }
.showcase-tab-badge, .showcase-nav-badge { min-width: 1.35rem; height: 1.35rem; display: inline-grid; place-items: center; padding: 0 .35rem; border-radius: 999px; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1; }
.showcase-tab-badge[hidden], .showcase-nav-badge[hidden] { display: none; }
.nav-more.has-showcase-leads { position: relative; }
.nav-more.has-showcase-leads::after { content: attr(data-showcase-lead-count); position: absolute; top: -.15rem; right: -.25rem; z-index: 1; min-width: 1.15rem; height: 1.15rem; display: grid; place-items: center; padding: 0 .25rem; border: 2px solid var(--surface); border-radius: 999px; background: #dc2626; color: #fff; font-size: .62rem; font-weight: 800; line-height: 1; pointer-events: none; }
.showcase-listings-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.showcase-listings-summary article { display: grid; gap: .15rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: .9rem; background: var(--surface); }
.showcase-listings-summary span { color: var(--text-secondary); font-size: .85rem; font-weight: 650; }
.showcase-listings-summary strong { color: var(--text); font-size: 1.65rem; line-height: 1.1; }
.showcase-listings-summary small { color: var(--text-secondary); }
.showcase-listings-card { overflow: hidden; }
.showcase-listings-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 1rem 0; }
.showcase-listings-toolbar .search-input { flex: 1 1 320px; min-width: 0; }
.showcase-status-filter { flex: 0 1 190px; display: grid; gap: .25rem; color: var(--text-secondary); font-size: .78rem; font-weight: 650; }
.showcase-status-filter select { min-width: 170px; }
.showcase-listings-toolbar .settings-tabs { flex: 0 0 auto; margin: 0; }
.showcase-truck-status { margin-top: .2rem; color: var(--text-secondary); font-size: .78rem; }
.showcase-truck-status b { color: var(--text); }
.showcase-listings-footer { align-items: center; gap: .75rem; }
.showcase-listings-footer > span { color: var(--text-secondary); }
.showcase-listings-footer > div { display: flex; gap: .5rem; }
.showcase-inbox-card { margin-top: 1rem; overflow: hidden; }
.showcase-inbox-count { padding: .35rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, var(--background)); color: var(--primary); font-size: .85rem; font-weight: 750; }
.showcase-inbox-list { display: grid; gap: .75rem; }
.showcase-inbox-row { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(190px, .75fr) minmax(190px, .75fr); gap: .8rem 1rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: .85rem; background: var(--background); }
.showcase-inbox-row.is-new { border-left: 4px solid var(--primary); }
.showcase-inbox-row[aria-busy="true"] { opacity: .7; }
.showcase-inbox-identity { display: flex; justify-content: space-between; gap: .75rem; grid-column: 1 / -1; }
.showcase-inbox-identity > div { display: grid; }
.showcase-inbox-identity span, .showcase-inbox-identity small { color: var(--text-secondary); }
.showcase-inbox-contact { display: grid; align-content: start; gap: .25rem; min-width: 0; }
.showcase-inbox-contact a { overflow-wrap: anywhere; color: var(--primary); font-weight: 650; }
.showcase-inbox-vehicle { display: grid; align-content: start; gap: .2rem; padding: .65rem .75rem; border-radius: .65rem; background: var(--surface); }
.showcase-inbox-vehicle span { color: var(--text-secondary); font-size: .8rem; }
.showcase-inbox-vehicle.is-general { color: var(--text-secondary); }
.showcase-inbox-message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.showcase-inbox-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; grid-column: 1 / -1; padding-top: .75rem; border-top: 1px solid var(--border-color); }
.showcase-inbox-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.showcase-lead-state { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.showcase-lead-state-badge.is-new { color: var(--primary); background: color-mix(in srgb, var(--primary) 13%, var(--surface)); }
.showcase-lead-state-badge.is-read { color: var(--text-secondary); background: var(--surface); }
.showcase-lead-state-badge.is-replied { color: #166534; background: #dcfce7; }
@media (max-width: 850px) { .showcase-settings-grid, .showcase-field-grid { grid-template-columns: 1fr; } .showcase-field-grid .is-wide { grid-column: auto; } .showcase-inbox-row { grid-template-columns: 1fr 1fr; } .showcase-inbox-message { grid-column: 1 / -1; } }
@media (max-width: 720px) { .showcase-branding-options, .showcase-listings-summary { grid-template-columns: 1fr; } .showcase-branding-preview { height: 132px; } .showcase-listings-toolbar { align-items: stretch; flex-direction: column; } .showcase-status-filter { width: 100%; } .showcase-status-filter select { width: 100%; } .showcase-listings-toolbar .settings-tabs { width: 100%; overflow-x: auto; } }
@media (max-width: 620px) { .showcase-launch-grid { align-items: stretch; flex-direction: column; } .showcase-theme-options, .showcase-media-grid { grid-template-columns: 1fr; } .showcase-contacts-card .settings-card-header { align-items: stretch; flex-direction: column; } .showcase-contact-editor { grid-template-columns: 1fr; } .showcase-contact-photo-column { grid-template-columns: 92px minmax(0, 1fr); align-items: center; } .showcase-contact-photo-preview { grid-row: 1 / 3; } .showcase-contact-fields { grid-template-columns: 1fr; } .showcase-contact-feedback, .showcase-contact-actions { grid-column: auto; } .showcase-contact-actions { flex-direction: column-reverse; } .showcase-contact-actions .btn { width: 100%; } .showcase-view-tabs { width: 100%; } .showcase-view-tab { flex: 1; padding-inline: .7rem; } .showcase-vehicle-row { grid-template-columns: 88px minmax(0, 1fr); align-items: start; } .showcase-vehicle-photo { width: 88px; height: 66px; } .showcase-inbox-row { grid-template-columns: 1fr; } .showcase-inbox-identity, .showcase-inbox-message, .showcase-inbox-actions { grid-column: auto; } .showcase-inbox-identity, .showcase-inbox-actions { align-items: stretch; flex-direction: column; } .showcase-inbox-buttons { width: 100%; flex-direction: column-reverse; } .showcase-inbox-actions .btn { width: 100%; } .showcase-publication-control { grid-column: 1 / -1; align-items: stretch; flex-direction: column; } .showcase-vehicle-row select { width: 100%; } .showcase-row-status { grid-column: 1 / -1; text-align: left; } .showcase-listings-footer { align-items: stretch; flex-direction: column; } .showcase-listings-footer > div { width: 100%; } .showcase-listings-footer .btn { flex: 1; } }
