:root {
    --sea: #2e8b57;
    --sea-bright: #43ae72;
    --ink: #0e1015;
    --text: #fff;
    --muted: #a2a4ac;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; color: var(--text); }
body { font-family: "Segoe UI", Arial, sans-serif; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.showroom[hidden], .dialog-backdrop[hidden] { display: none !important; }
.showroom { position: fixed; inset: 0; display: flex; background: transparent; isolation: isolate; }
.panel { z-index: 2; background: rgba(9, 11, 17, .92); box-shadow: 0 8px 45px rgba(0, 0, 0, .22); }
.catalog { display: flex; flex-direction: column; width: clamp(400px, 29vw, 560px); padding: 28px 24px 0; min-width: 0; }
.catalog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.eyebrow, .dialog-kicker { font-size: 10px; letter-spacing: .22em; font-weight: 800; color: var(--sea-bright); }
h1 { margin: 5px 0 2px; font-size: clamp(21px, 1.25vw, 27px); line-height: 1.05; font-weight: 900; letter-spacing: -.03em; }
.catalog-head p { margin: 5px 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.close-button { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #34363c; color: #fff; background: #111319; font-size: 28px; font-weight: 300; line-height: 1; transition: border-color .18s, background .18s; }
.close-button:hover { background: #1c3026; border-color: var(--sea); }
.filters { display: flex; gap: 12px; margin-top: 25px; margin-bottom: 19px; }
.search-wrap, .filters select { display: flex; align-items: center; height: 46px; min-width: 0; width: 52%; border: 2px solid #3b3d44; border-radius: 24px; background: #11131a; color: #f6f6f7; }
.search-wrap { padding: 0 14px; gap: 10px; }
.search-wrap span { font-size: 30px; line-height: 1; color: #f1f2f3; transform: translateY(-2px); }
.search-wrap input { width: 100%; border: 0; background: none; outline: 0; color: #fff; font-size: 12px; font-weight: 750; }
.search-wrap input::placeholder { color: #8c8f98; }
.filters select { width: 48%; padding: 0 13px; outline: 0; font-size: 12px; font-weight: 800; }
.filters select option { background: #181a20; color: #fff; }
.search-wrap:focus-within, .filters select:focus-visible { border-color: var(--sea-bright); }
.catalog-count { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.09); padding: 12px 2px; color: #a0a3aa; font-weight: 800; letter-spacing: .08em; font-size: 10px; }
.catalog-count span:last-child { color: var(--sea-bright); }
.vehicle-list { flex: 1; min-height: 0; overflow: auto; padding: 0 7px 18px 0; scrollbar-width: thin; scrollbar-color: var(--sea) transparent; }
.vehicle-list::-webkit-scrollbar, .category-list::-webkit-scrollbar { width: 5px; }
.vehicle-list::-webkit-scrollbar-thumb, .category-list::-webkit-scrollbar-thumb { background: var(--sea); border-radius: 5px; }
.vehicle-card { position: relative; width: 100%; min-height: 126px; padding: 15px 17px; margin: 0 0 13px; display: grid; grid-template-columns: 34% minmax(0,1fr) auto; align-items: center; gap: 8px; text-align: left; color: #fff; border: 2px solid #30333b; border-radius: 13px; background: rgba(25, 26, 32, .79); transition: border-color .15s, background .15s; }
.vehicle-card:hover { background: rgba(35, 39, 43, .93); border-color: #528e69; }
.vehicle-card.selected { border-color: var(--sea); background: rgba(23, 34, 28, .95); }
.vehicle-card.selected::before { position: absolute; content: ""; top: -2px; left: 35%; width: 30%; height: 2px; background: var(--sea-bright); }
.vehicle-image { width: 100%; height: 90px; object-fit: contain; pointer-events: none; }
.vehicle-detail { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vehicle-detail .type { font-size: 12px; color: #a9acb2; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vehicle-detail .name { font-size: 16px; font-weight: 850; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vehicle-meta { display: flex; gap: 5px; margin-top: 7px; }
.vehicle-meta span { border: 1px solid #373b42; background: #24262c; color: #e3e4e6; padding: 4px 8px; border-radius: 18px; font-weight: 750; font-size: 11px; white-space: nowrap; }
.card-price { font-weight: 900; font-size: 15px; white-space: nowrap; padding-left: 2px; }
.empty { padding: 32px 16px; text-align: center; border: 1px solid #343840; border-radius: 12px; color: #b1b4bb; font-size: 14px; line-height: 1.5; }
.stage { position: relative; flex: 1; min-width: 0; height: 100%; pointer-events: none; }
.stage-top { display: flex; flex-direction: column; align-items: center; margin: 22px auto 0; gap: 12px; }
.brand { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)); line-height: 1; }
.brand strong { color: #fff; font-style: italic; letter-spacing: -.12em; font-weight: 1000; font-size: clamp(34px, 3.6vw, 66px); padding-right: .14em; }
.brand strong::first-letter { color: var(--sea-bright); }
.brand span { letter-spacing: .35em; font-size: 9px; font-weight: 900; color: #fff; }
.camera-controls { display: flex; align-items: center; gap: 10px; background: rgba(9, 10, 14, .86); border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 850; pointer-events: auto; white-space: nowrap; }
.camera-controls button { border: 0; border-radius: 4px; background: none; color: #fff; padding: 2px 4px; font-weight: 850; font-size: 12px; }
.camera-controls button:hover { color: var(--sea-bright); }
.camera-controls #zoom-in, .camera-controls #zoom-out { font-size: 21px; line-height: 14px; }
.camera-controls .drag-hint { border-right: 1px solid #45484f; padding-right: 12px; }
.drag-area { position: absolute; top: 135px; bottom: 145px; left: 0; right: 0; pointer-events: auto; cursor: grab; touch-action: none; }
.drag-area.dragging { cursor: grabbing; }
.preview-status { position: absolute; bottom: 170px; left: 50%; transform: translateX(-50%); padding: 8px 12px; border-radius: 7px; color: #f0f0f0; background: rgba(12,14,18,.73); font-size: 12px; font-weight: 650; text-align: center; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.preview-status:empty { display: none; }
.selection { position: absolute; bottom: clamp(18px, 4vh, 44px); width: min(555px, 78%); left: 50%; transform: translateX(-50%); pointer-events: auto; filter: drop-shadow(0 3px 13px rgba(0,0,0,.35)); }
.selection-info { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 14px; text-shadow: 0 2px 8px rgba(0,0,0,.9); }
.selection-info h2 { font-size: 21px; margin: 0; text-transform: uppercase; line-height: 1.1; font-weight: 900; }
.selection-info p { margin: 3px 0 0; color: #ddd; font-size: 14px; font-weight: 750; }
.selection-info strong { font-size: 23px; white-space: nowrap; }
.purchase, .test-drive { width: 100%; height: 53px; border: 0; border-radius: 28px; font-size: 17px; font-weight: 900; transition: background .16s, color .16s, opacity .16s; }
.purchase { background: var(--sea); color: #fff; margin-bottom: 11px; }
.purchase:hover:not(:disabled) { background: var(--sea-bright); }
.test-drive { color: #101217; background: #fff; }
.test-drive:hover:not(:disabled) { background: #e3f3e9; }
.purchase:disabled, .test-drive:disabled { opacity: .55; cursor: default; }
.categories { align-self: flex-start; width: clamp(205px, 14vw, 268px); max-height: calc(100% - 48px); margin: 24px 24px 0 0; padding: 15px 14px 17px; border-radius: 9px; display: flex; flex-direction: column; }
.categories-head { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 900; margin-bottom: 14px; }
.categories-head span:last-child { font-size: 24px; font-weight: 400; color: #9fa4a8; }
.category-list { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--sea) transparent; padding-right: 2px; }
.category-button { display: block; width: 100%; min-height: 39px; border: 0; border-radius: 22px; padding: 7px 10px; margin: 0 0 10px; background: #f9f9f9; color: #16181e; font-size: 13px; font-weight: 850; text-transform: uppercase; }
.category-button:hover { background: #dcf2e4; }
.category-button.active { background: var(--sea); color: #fff; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0,0,0,.64); }
.dialog { width: min(420px, calc(100vw - 36px)); padding: 27px; border-radius: 16px; border: 1px solid #3a4540; background: #171b1d; box-shadow: 0 15px 60px rgba(0,0,0,.45); }
.dialog h2 { margin: 8px 0; font-size: 23px; }
.dialog p { color: #c6ccc9; line-height: 1.5; font-size: 14px; }
.dialog-actions { display: flex; gap: 10px; margin-top: 25px; }
.dialog-actions button { flex: 1; height: 42px; border-radius: 22px; border: 0; font-size: 12px; font-weight: 900; }
.dialog-cancel { color: #111; background: #fff; }
.dialog-confirm { color: white; background: var(--sea); }
.dialog-confirm:hover { background: var(--sea-bright); }
@media (max-width: 1400px) {
    .catalog { width: 385px; padding: 20px 16px 0; }
    .categories { width: 205px; margin-right: 14px; padding: 12px; }
    .vehicle-card { min-height: 103px; padding: 9px; gap: 5px; }
    .vehicle-image { height: 72px; }
    .vehicle-detail .name, .card-price { font-size: 13px; }
    .vehicle-meta span { font-size: 10px; padding: 3px 5px; }
    .selection { width: min(470px, 90%); }
    .camera-controls { gap: 5px; font-size: 10px; }
    .camera-controls .drag-hint { display: none; }
}
@media (max-width: 1050px) {
    .catalog { width: 34%; min-width: 275px; }
    .categories { width: 150px; margin: 12px 9px 0 0; }
    .category-button { font-size: 10px; min-height: 32px; margin-bottom: 6px; }
    .vehicle-card { grid-template-columns: 28% minmax(0,1fr); }
    .card-price { grid-column: 2; padding: 0; }
    .vehicle-image { grid-row: 1 / span 2; }
    .filters { flex-direction: column; gap: 7px; }
    .search-wrap, .filters select { width: 100%; height: 37px; }
    .selection-info strong { font-size: 16px; }
    .selection-info h2 { font-size: 15px; }
    .purchase, .test-drive { height: 40px; font-size: 12px; }
}

.filters .search-wrap { width: 100%; }