:root {
    --accent: #b3121b;
    --accent-lift: #ea2e39;
    --on-accent: #ffffff;
    --bk-bg: #0d0d0f;
    --bk-raise: #111114;
    --bk-card: #131316;
    --bk-line: #242428;
    --bk-edge: #3a3a40;
    --bk-soft: #1a1a1d;
    --bk-faint: #1c1c20;
    --bk-dim: #6d7078;
    --bk-mid: #9a9da5;
    --bk-text: #cfd2d7;
    --good: #3fbf7f;
    --warn: #e0a23b;
    --bad: #ff6b6b;
    --bad-text: #ff8a80;
    --scale: 1;
    --display: 'Bahnschrift', 'DIN Alternate', 'Arial Narrow', sans-serif;
    --body: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
    --studio: radial-gradient(ellipse 80% 75% at 50% 88%, #27272d 0%, #17171b 55%, #121215 100%);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    color: var(--bk-text);
    font-family: var(--body);
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

[hidden] { display: none !important; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, .tab, .btn, .cat, .card-brand, .card-name, .card-price, .chip, .stk-head, .stk-brand, .stk-name,
.perf-big b, .perf-big span, .perf-meta, .perf-label, .stk-label, .stk-price, .stk-stock, .fin-line b, .form-h,
.slot-head, .pay b, .mini-name, .due-row span, .due, .empty b, .side-empty b, .st-name, .badge, .st-figures span,
.st-figures b, .lg-head span, .lg-car b, .balance, .clock, .kpi span, .kpi b, .member-name b, .member-c, .tb-tab,
#tb-name, .sr-money span, .sr-money b, .person b, .order b, .sale b, .sale-r b, .tx-amt,
.fl-spot, .fl-name, .fl-change span, .sl-brand, .sl-name,
.bk-kicker, .bk-dl b, .bk-new, .bk-chap, .bk-no, .bk-kick, .bk-sec h5, .bk-pt-col h5, .bk-in, .bk-yn, .bk-opt, .bk-btn, .bk-add,
.bk-pt-t b, .bk-pr b, .bk-sold-head b, .bk-sr-name b, .bk-del, .bk-status, .bk-save, .td-label, #td-time {
    font-family: var(--display);
    font-stretch: 75%;
    font-variation-settings: 'wdth' 75;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 8px; }

#scrim {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(10, 11, 13, 0.35), rgba(6, 7, 9, 0.72));
}

#stage {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 1080px;
    transform: translate(-50%, -50%) scale(var(--scale));
    pointer-events: none;
}

#stage.hidden { visibility: hidden; }

@keyframes sheetIn {
    from { opacity: 0; transform: translateY(16px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pulse { 50% { opacity: 0.45; } }

.book {
    --bk-line: #242428;
    --bk-soft: #1a1a1d;
    --bk-faint: #1c1c20;
    --bk-dim: #6d7078;
    --bk-mid: #9a9da5;
    --bk-text: #cfd2d7;
    position: absolute;
    left: 210px;
    top: 125px;
    width: 1500px;
    height: 830px;
    display: grid;
    grid-template-columns: 290px 1fr;
    pointer-events: auto;
    background: #0d0d0f;
    color: var(--bk-text);
    border: 1px solid var(--bk-line);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
    animation: sheetIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.book ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }
.book button:disabled { cursor: not-allowed; }

.bk-spine {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    padding: 30px 26px 26px;
    border-right: 1px solid var(--bk-line);
    background: linear-gradient(#111114, #0b0b0d);
}

.bk-kicker { font-size: 11px; letter-spacing: 0.4em; color: var(--bk-dim); }
.bk-title { margin: 0; font-size: 50px; font-weight: 700; line-height: 0.88; text-transform: uppercase; color: #fff; }
.bk-list { flex: 1; min-height: 0; margin: 0 -8px; padding: 0 8px; overflow-y: auto; display: flex; flex-direction: column; }

.bk-dl {
    display: block;
    width: 100%;
    padding: 14px 0;
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid var(--bk-line);
}

.bk-dl b { display: block; font-size: 21px; font-weight: 700; line-height: 1.02; text-transform: uppercase; color: #fff; }
.bk-dl span { display: block; margin-top: 4px; font-size: 12px; color: #8a8d95; }
.bk-dl em { display: block; margin-top: 4px; font-family: var(--mono); font-size: 10.5px; font-style: normal; letter-spacing: 0.04em; color: var(--bk-dim); }
.bk-dl:hover b, .bk-dl.on b { color: var(--accent-lift); }

.bk-new {
    padding: 13px;
    background: none;
    border: 1px solid #3a3a40;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.bk-new:hover { border-color: #fff; }

.bk-pages { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.bk-head {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    height: 72px;
    padding: 0 22px 0 36px;
    border-bottom: 1px solid var(--bk-line);
}

.bk-chapters { flex: 1; display: flex; gap: 30px; min-width: 0; }

.bk-chap {
    margin-bottom: -1px;
    padding: 0 0 17px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--bk-dim);
    font-size: 17px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bk-chap em { margin-right: 8px; font-size: 13px; font-style: normal; color: #44464c; }
.bk-chap:hover { color: #fff; }
.bk-chap.on { color: #fff; border-bottom-color: var(--accent); }
.bk-chap.on em { color: var(--accent-lift); }

.bk-x {
    align-self: center;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid #3a3a40;
    border-radius: 50%;
    color: var(--bk-mid);
    font-size: 22px;
    line-height: 1;
}

.bk-x:hover { border-color: #fff; color: #fff; }

.bk-body { flex: 1; min-height: 0; position: relative; }

.bk-no {
    position: absolute;
    right: 28px;
    top: 16px;
    font-size: 130px;
    font-weight: 700;
    line-height: 0.8;
    color: var(--bk-faint);
    pointer-events: none;
}

.bk-kick {
    position: relative;
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--accent-lift);
}

.bk-hero h2, .bk-pagehead h2, .bk-cover h2 {
    position: relative;
    margin: 0;
    font-size: 60px;
    font-weight: 700;
    line-height: 0.92;
    text-transform: uppercase;
    color: #fff;
}

.bk-blurb { position: relative; margin: 14px 0 0; max-width: 480px; font-size: 15px; line-height: 1.55; color: var(--bk-mid); }

.bk-spread { display: grid; grid-template-columns: 1fr 1.05fr; height: 100%; }

.bk-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 30px 36px 18px;
    border-right: 1px solid var(--bk-line);
    overflow: hidden;
}

.bk-example {
    position: relative;
    max-width: 480px;
    margin: 18px 0 0;
    padding: 14px 16px;
    background: #131316;
    border-left: 2px solid var(--accent);
    font-size: 15px;
    line-height: 1.5;
    color: #e4e6ea;
}

.bk-photo { flex: 1; min-height: 110px; margin-top: 10px; display: flex; align-items: flex-end; justify-content: center; }
.bk-photo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.85)); }

.bk-spec { min-height: 0; overflow-y: auto; padding: 26px 36px 30px; }

.bk-sec { margin-bottom: 26px; }
.bk-sec:last-child { margin-bottom: 0; }

.bk-sec h5, .bk-pt-col h5 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-lift);
}

.bk-line { display: flex; align-items: baseline; gap: 10px; min-height: 42px; padding: 6px 0; font-size: 16px; }
.bk-label { flex-shrink: 0; color: var(--bk-text); }
.bk-dots { flex: 1; min-width: 20px; border-bottom: 1px dotted #3a3a40; transform: translateY(-5px); }
.bk-val { flex-shrink: 0; display: flex; align-items: baseline; gap: 6px; }
.bk-line.off { opacity: 0.38; }

.bk-note { margin: 4px 0 0; max-width: 560px; font-size: 12.5px; line-height: 1.5; color: #7d8088; }
.bk-note.warn { color: #ff8a80; }

.bk-in {
    padding: 2px 0 3px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--accent);
    border-radius: 0;
    color: #fff;
    font-size: 21px;
    text-align: right;
    outline: none;
}

.bk-in:focus { border-bottom-color: #fff; }
.bk-in::placeholder { color: #55575e; }
.bk-in::-webkit-inner-spin-button, .bk-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.bk-num { width: 84px; }
.bk-text { width: 200px; }
.bk-text.wide { width: 300px; }
.bk-text.upper { text-transform: uppercase; }

.bk-sel { max-width: 300px; cursor: pointer; text-align-last: right; }
.bk-sel.left { text-align: left; text-align-last: left; }
.bk-sel option { background: #141417; color: #fff; }

.bk-field { display: inline-flex; align-items: baseline; gap: 8px; }
.bk-unit { font-size: 13px; font-style: normal; letter-spacing: 0.04em; color: var(--bk-dim); white-space: nowrap; }

.bk-yn, .bk-opt {
    padding: 2px 0 3px;
    background: none;
    border: 0;
    border-bottom: 1px solid #3a3a40;
    color: var(--bk-dim);
    font-size: 21px;
}

.bk-yn { min-width: 64px; text-align: right; }
.bk-yn:hover, .bk-opt:hover { color: #fff; }
.bk-yn.on, .bk-opt.on { color: #fff; border-bottom-color: var(--accent); }
.bk-choice { display: inline-flex; gap: 16px; }
.bk-opt { border-bottom-color: transparent; }

.bk-colour { width: 64px; height: 30px; padding: 0; background: none; border: 1px solid #3a3a40; cursor: pointer; }

.bk-btn {
    padding: 8px 16px;
    background: none;
    border: 1px solid #3a3a40;
    color: #fff;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bk-btn:hover:not(:disabled) { border-color: #fff; }
.bk-btn.ghost { border-color: transparent; color: var(--bk-mid); }
.bk-btn.ghost:hover:not(:disabled) { color: #fff; border-color: #3a3a40; }
.bk-btn.danger { border-color: #5a2226; color: #ff6b6b; }
.bk-btn.danger:hover:not(:disabled) { border-color: #ff6b6b; }
.bk-btn:disabled { opacity: 0.4; }

.bk-add {
    width: 100%;
    padding: 13px;
    background: none;
    border: 1px dashed #3a3a40;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.bk-add:hover:not(:disabled) { border-color: #fff; }
.bk-add:disabled { opacity: 0.45; }

.bk-page { height: 100%; overflow-y: auto; padding: 22px 36px 30px; }

.bk-pagehead {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 26px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bk-line);
}

.bk-pagehead .bk-no { position: static; font-size: 96px; }
.bk-pagehead-t { flex-shrink: 0; }
.bk-pagehead h2 { font-size: 46px; white-space: nowrap; }
.bk-pagehead .bk-blurb { margin: 0 0 4px; max-width: 520px; }

.bk-points { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; }
.bk-pt-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.bk-pt-col .bk-add { margin-top: 14px; }

.bk-pt { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--bk-line); }
.bk-pt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bk-pt-t b { font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; }
.bk-pt.missing .bk-pt-t b::after { content: ' · not placed'; font-size: 14px; letter-spacing: 0.1em; color: #ff8a80; }
.bk-pt-t span { font-size: 13px; line-height: 1.45; color: #8a8d95; }
.bk-pt-t code { font-family: var(--mono); font-size: 11.5px; color: var(--bk-dim); }
.bk-pt-t .bk-sel { align-self: flex-start; max-width: 100%; font-size: 18px; }
.bk-pt-a { display: flex; gap: 6px; flex-shrink: 0; }
.bk-pt-photo { width: 104px; height: 54px; flex-shrink: 0; display: grid; place-items: center; }
.bk-pt-photo img { max-width: 100%; max-height: 54px; object-fit: contain; }

.bk-cars { display: grid; grid-template-columns: 1fr 1.25fr; gap: 32px; }
.bk-pool, .bk-sold { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bk-tools { display: grid; grid-template-columns: 1fr 190px; gap: 14px; align-items: end; }
.bk-tools .bk-sel { font-size: 18px; }

.bk-search {
    width: 100%;
    padding: 8px 2px;
    background: none;
    border: 0;
    border-bottom: 1px solid #3a3a40;
    color: #fff;
    font-size: 15px;
    outline: none;
}

.bk-search:focus { border-bottom-color: var(--accent); }
.bk-search::placeholder { color: #55575e; }

.bk-rows { max-height: 440px; overflow-y: auto; border-top: 1px solid var(--bk-line); }

.bk-pr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 14px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--bk-soft);
}

.bk-pr b { display: block; font-size: 18px; font-weight: 700; text-transform: uppercase; color: #fff; }
.bk-pr span { font-family: var(--mono); font-size: 11px; color: var(--bk-dim); }
.bk-pr.has b { color: var(--bk-dim); }
.bk-pr-price { font-family: var(--mono); font-size: 13px; color: var(--bk-mid); }
.bk-pr .bk-btn { padding: 6px 12px; font-size: 12px; }

.bk-sold-head { display: flex; justify-content: space-between; align-items: baseline; min-height: 38px; }
.bk-sold-head b { font-size: 20px; font-weight: 700; text-transform: uppercase; color: #fff; }
.bk-sold-head span { font-size: 12px; color: var(--bk-dim); }

.bk-sr {
    display: grid;
    grid-template-columns: 76px 1fr 120px 70px 28px;
    align-items: center;
    gap: 12px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--bk-soft);
}

.bk-sr-photo { height: 40px; display: grid; place-items: center; }
.bk-sr-photo img { max-width: 100%; max-height: 40px; object-fit: contain; }
.bk-sr-name { min-width: 0; }
.bk-sr-name b { display: block; font-size: 17px; font-weight: 700; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-sr-name span { font-family: var(--mono); font-size: 11px; color: var(--bk-dim); }
.bk-sr .bk-in { width: 100%; font-size: 19px; }

.bk-rm {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid #3a3a40;
    border-radius: 50%;
    color: var(--bk-mid);
    font-size: 16px;
    line-height: 1;
}

.bk-rm:hover { border-color: #ff6b6b; color: #ff6b6b; }

.bk-cover { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 40px 64px; overflow: hidden; }
.bk-cover .bk-no { right: 56px; top: 44px; font-size: 260px; }
.bk-cover h2 { font-size: 78px; }
.bk-cover .bk-blurb { max-width: 560px; font-size: 16px; }

.bk-confirm {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 36px;
    background: #17171a;
    border-top: 1px solid var(--bk-line);
    font-size: 14px;
    color: #fff;
}

.bk-confirm span { flex: 1; }

.bk-foot {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 70px;
    padding: 0 22px 0 36px;
    border-top: 1px solid var(--bk-line);
}

.bk-del {
    padding: 0;
    background: none;
    border: 0;
    color: var(--bk-dim);
    font-size: 13px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.bk-del:hover { color: #ff6b6b; }
.bk-status { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bk-dim); }
.bk-status.dirty { color: var(--accent-lift); }

.bk-save {
    margin-left: auto;
    padding: 14px 44px;
    background: #fff;
    border: 0;
    color: #0d0d0f;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.bk-save:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); }
.bk-save:disabled { opacity: 0.5; }

.bk-kicker { text-transform: uppercase; }

.sr-title { font-size: 44px; overflow-wrap: anywhere; }
.sr-cats-h { margin-bottom: -8px; }

.sr-cats { flex: 1; min-height: 0; margin: 0 -8px; padding: 0 8px; overflow-y: auto; display: flex; flex-direction: column; }

.cat {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: baseline;
    gap: 6px;
    padding: 10px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--bk-soft);
    text-align: left;
    color: var(--bk-mid);
}

.cat i { font-size: 13px; font-style: normal; letter-spacing: 0.08em; color: #44464c; }
.cat span { font-size: 20px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.cat em { font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--bk-dim); }
.cat:hover { color: #fff; }
.cat.on { color: #fff; }
.cat.on i { color: var(--accent-lift); }

.sr-wallet { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; border-top: 1px solid var(--bk-line); }
.sr-money { display: flex; align-items: baseline; gap: 8px; }
.sr-money span { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-mid); }
.sr-money i { flex: 1; border-bottom: 1px dotted var(--bk-edge); transform: translateY(-4px); }
.sr-money b { font-size: 21px; color: #fff; }

.book .pane { flex: 1; min-height: 0; }

.banner {
    padding: 11px 36px;
    background: var(--bk-card);
    border-bottom: 1px solid var(--bk-line);
    box-shadow: inset 3px 0 0 var(--accent);
    font-size: 14px;
    color: #e4e6ea;
}

.showroom-pane { display: grid; grid-template-columns: 1fr 440px; }

.grid {
    overflow-y: auto;
    padding: 22px 24px 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: max-content;
    gap: 14px;
    align-content: start;
}

.card {
    padding: 0;
    text-align: left;
    background: var(--bk-card);
    border: 1px solid var(--bk-line);
    overflow: hidden;
    transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
    animation: cardIn 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.card:hover { transform: translateY(-2px); border-color: var(--bk-edge); }
.card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), inset 0 -3px 0 var(--accent); }

.card-photo, .mini-photo, .st-photo, .offer-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--studio);
}

.card-photo { height: 122px; border-bottom: 1px solid var(--bk-soft); }

.card-photo img, .mini-photo img, .st-photo img, .offer-photo img {
    max-width: 92%;
    object-fit: contain;
    filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.7));
}

.card-photo img { max-height: 110px; }
.card.soldout .card-photo img { opacity: 0.4; filter: grayscale(1); }

.card-body { padding: 11px 14px 13px; }
.card-brand { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.26em; color: var(--bk-dim); }

.card-name {
    display: block;
    margin: 3px 0 10px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-price { font-size: 21px; font-weight: 600; color: #fff; }

.chip {
    padding: 3px 9px;
    border: 1px solid var(--bk-edge);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bk-mid);
}

.chip.count { color: #fff; }
.chip.out { border-color: var(--bad); color: var(--bad-text); }

.side { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--bk-line); background: #0f0f11; }
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 8px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 24px 18px; }
.statement .actions, .checkout .actions { padding: 0; }

.btn {
    padding: 12px 18px;
    background: transparent;
    border: 1px solid var(--bk-edge);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: border-color 0.15s, color 0.15s, filter 0.15s;
}

.btn:hover:not(:disabled) { border-color: #fff; }
.btn.primary { flex: 1; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover:not(:disabled) { border-color: var(--accent); filter: brightness(1.12); }
.btn.ghost { border-color: transparent; color: var(--bk-mid); }
.btn.ghost:hover:not(:disabled) { border-color: var(--bk-edge); color: #fff; }
.btn.danger { border-color: #5a2226; color: var(--bad); }
.btn.danger:hover:not(:disabled) { border-color: var(--bad); }
.btn.small { padding: 7px 12px; font-size: 13px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.side-error { margin: 8px 0 0; padding: 0 24px; font-size: 13px; color: var(--bad-text); }
.checkout .side-error, .offer-right .side-error { padding: 0; }

.empty, .side-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 220px;
    padding: 40px;
    text-align: center;
    color: var(--bk-dim);
}

.side-empty { flex: 1; }
.empty b, .side-empty b { font-size: 26px; font-weight: 700; color: #fff; text-transform: uppercase; }

.fine { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: #7d8088; }

.sticker { background: var(--bk-raise); border: 1px solid #2a2a2f; animation: cardIn 0.3s both; }

.stk-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 16px;
    background: #17171a;
    border-bottom: 1px solid var(--bk-line);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--bk-dim);
}

.stk-head span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-head span:last-child { flex-shrink: 0; }

.stk-title { padding: 12px 16px 10px; border-bottom: 1px solid var(--bk-line); }
.stk-brand { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.3em; color: var(--accent-lift); }
.stk-name { margin: 3px 0 5px; font-size: 36px; font-weight: 700; line-height: 0.92; text-transform: uppercase; color: #fff; }
.stk-code { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bk-dim); }

.stk-sec { padding: 10px 16px 12px; border-bottom: 1px solid var(--bk-line); }
.stk-sec h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.3em; color: var(--accent-lift); }

.perf-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px dotted var(--bk-edge);
}

.perf-big b { font-size: 46px; font-weight: 700; line-height: 0.84; color: #fff; }
.perf-big span { margin-left: 6px; font-size: 16px; font-weight: 600; letter-spacing: 0.14em; color: var(--bk-mid); }
.perf-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--bk-dim); }

.perf-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; margin: 4px 0; }
.perf-label { font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bk-text); }
.perf-track { height: 8px; background: repeating-linear-gradient(90deg, #222227 0 9px, var(--bk-raise) 9px 10px); }

.perf-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transform-origin: left;
    animation: grow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.equip { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.45; color: var(--bk-mid); }
.equip li::marker { color: var(--accent-lift); }
.fin-line { margin: 0; font-size: 14px; color: var(--bk-mid); }
.fin-line b { font-size: 22px; font-weight: 700; color: #fff; }

.stk-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bk-line);
}

.stk-label { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; color: var(--bk-dim); }
.stk-price { font-size: 42px; font-weight: 700; line-height: 0.92; color: #fff; }

.stk-stock {
    padding: 5px 10px;
    border: 1px solid var(--bk-edge);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
}

.stk-stock.out { border-color: var(--bad); color: var(--bad-text); }

.stk-barcode { display: flex; align-items: center; gap: 12px; padding: 7px 16px 8px; }
.stk-barcode img { width: 170px; height: 22px; opacity: 0.8; }
.stk-barcode span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--bk-dim); }

.mini { display: grid; grid-template-columns: 128px 1fr; gap: 16px; align-items: center; margin-bottom: 4px; }
.mini-photo { height: 80px; border: 1px solid var(--bk-soft); }
.mini-photo img { max-height: 72px; }
.mini-name { display: block; margin: 2px 0 4px; font-size: 30px; font-weight: 700; line-height: 0.95; text-transform: uppercase; color: #fff; }

.buyform { display: flex; flex-direction: column; gap: 8px; }

.form-h {
    margin: 18px 0 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bk-line);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-lift);
}

.paint-slot { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.slot-head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bk-text); }
.swatch-name { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0; color: #fff; text-transform: none; }

.swatches { display: grid; grid-template-columns: repeat(12, 1fr); gap: 7px; }

.swatch {
    position: relative;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.4), inset 0 3px 5px rgba(255, 255, 255, 0.3);
    transition: transform 0.12s;
}

.swatch:hover { transform: scale(1.08); }
.swatch.on { outline: 2px solid #fff; outline-offset: 2px; }
.swatch.factory { background: linear-gradient(135deg, #e9e9ec 44%, var(--bk-bg) 44% 56%, #e9e9ec 56%); }
.swatch.custom { background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); cursor: pointer; }
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.pays { display: flex; flex-direction: column; gap: 8px; }

.pay {
    display: grid;
    gap: 3px;
    padding: 12px 16px;
    text-align: left;
    background: var(--bk-card);
    border: 1px solid var(--bk-line);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.pay b { font-size: 21px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.pay span { font-size: 13px; color: var(--bk-mid); }
.pay em { font-size: 12px; font-style: normal; color: var(--bad-text); }
.pay:hover:not(:disabled) { border-color: var(--bk-edge); }
.pay.on { background: #161619; border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.pay:disabled { opacity: 0.45; cursor: not-allowed; }

.checkout { padding: 14px 24px 18px; border-top: 1px solid var(--bk-line); background: var(--bk-bg); }
.due-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.due-row span { font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bk-dim); }
.due { font-size: 38px; font-weight: 700; color: #fff; }

.people { display: flex; flex-direction: column; gap: 6px; }

.person {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    text-align: left;
    background: var(--bk-card);
    border: 1px solid var(--bk-line);
}

.person b { font-size: 20px; font-weight: 700; text-transform: uppercase; color: #fff; }
.person span { font-family: var(--mono); font-size: 12px; color: var(--bk-dim); }
.person:hover { border-color: var(--bk-edge); }
.person.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

.pane-pad { height: 100%; overflow-y: auto; padding: 26px 36px; }

.statements { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.statement {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bk-raise);
    border: 1px solid var(--bk-line);
    animation: cardIn 0.3s both;
}

.statement.held { border-color: #5a2226; box-shadow: inset 3px 0 0 var(--bad); }

.st-head { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; }
.st-head .card-brand { color: var(--accent-lift); }
.st-photo { height: 68px; border: 1px solid var(--bk-soft); }
.st-photo img { max-height: 60px; }
.st-name { display: block; margin: 2px 0 6px; font-size: 30px; font-weight: 700; line-height: 0.95; text-transform: uppercase; color: #fff; }

.plate {
    display: inline-block;
    padding: 2px 9px;
    background: #eef0f3;
    border: 1px solid #c9ccd1;
    border-radius: 3px;
    color: #1b2a6b;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.badge { padding: 5px 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.badge.ok { border: 1px solid var(--bk-edge); color: #fff; }
.badge.bad { border: 1px solid var(--bad); color: var(--bad-text); }

.st-figures { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--bk-line); border-bottom: 1px solid var(--bk-line); }
.st-figures > div { padding: 10px 0; }
.st-figures span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--bk-dim); }
.st-figures b { font-size: 32px; font-weight: 700; color: #fff; }
.st-figures em { display: block; font-style: normal; font-size: 12px; color: var(--bk-dim); }

.st-warn { margin: 0; padding: 10px 12px; background: rgba(255, 107, 107, 0.08); border-left: 2px solid var(--bad); color: var(--bad-text); font-size: 13px; }

.offer-book {
    position: absolute;
    left: 330px;
    top: 140px;
    width: 1260px;
    height: 800px;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    background: var(--bk-bg);
    border: 1px solid var(--bk-line);
    box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
    animation: sheetIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.offer-head { display: flex; align-items: flex-end; gap: 24px; padding: 26px 36px 22px; border-bottom: 1px solid var(--bk-line); }
.offer-title { flex: 1; min-width: 0; }
.offer-title h1 { margin: 0; font-size: 50px; font-weight: 700; line-height: 0.92; text-transform: uppercase; color: #fff; }

.clock {
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid var(--bk-edge);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
}

.clock.late { border-color: var(--accent); color: var(--accent-lift); animation: pulse 1s ease-in-out infinite; }

.offer-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; }
.offer-left { overflow-y: auto; padding: 22px 30px; border-right: 1px solid var(--bk-line); }
.offer-photo { height: 180px; margin-bottom: 16px; border: 1px solid var(--bk-soft); }
.offer-photo img { max-height: 166px; }
.offer-right { display: flex; flex-direction: column; min-height: 0; background: #0f0f11; }
.offer-right .buyform { flex: 1; overflow-y: auto; padding: 8px 30px 20px; }
.offer-right .checkout { padding: 16px 30px 20px; }

#testdrive {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 290px;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 18px;
    padding: 12px 20px 14px;
    background: rgba(13, 13, 15, 0.94);
    border: 1px solid var(--bk-line);
    box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.9);
    animation: hudIn 0.25s both;
}

@keyframes hudIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

.td-label { font-size: 13px; font-weight: 600; letter-spacing: 0.32em; color: var(--accent-lift); }
#td-time { justify-self: end; font-size: 40px; font-weight: 700; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.td-track { grid-column: 1 / -1; height: 4px; margin-top: 8px; background: var(--bk-faint); overflow: hidden; }
#td-fill { display: block; height: 100%; background: var(--accent); transition: width 0.25s linear; }
#testdrive em { grid-column: 1 / -1; margin-top: 7px; font-size: 11px; font-style: normal; color: var(--bk-dim); }
#testdrive.late #td-time { color: var(--accent-lift); animation: pulse 1s ease-in-out infinite; }

#toasts {
    position: fixed;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.toast {
    padding: 12px 18px;
    background: var(--bk-raise);
    border: 1px solid var(--bk-line);
    border-left: 3px solid var(--accent);
    color: #e4e6ea;
    font-size: 15px;
    box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.9);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s, transform 0.25s;
}

.toast.in { opacity: 1; transform: none; }
.toast.good { border-left-color: var(--good); }
.toast.bad { border-left-color: var(--bad); }

.device {
    position: absolute;
    left: 250px;
    top: 95px;
    width: 1420px;
    height: 890px;
    pointer-events: auto;
    animation: sheetIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.bezel {
    position: relative;
    height: 100%;
    padding: 26px;
    border-radius: 46px;
    background: linear-gradient(150deg, #2b2d32 0%, #16171a 45%, #0c0d0f 100%);
    box-shadow: 0 60px 100px -34px rgba(0, 0, 0, 0.9), inset 0 0 0 2px #3d4047, inset 0 0 0 6px #08090a;
}

.cam {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #4a5160, #0b0c0e 70%);
}

.screen { display: flex; flex-direction: column; height: 100%; border-radius: 20px; overflow: hidden; background: var(--bk-bg); }

.status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    padding: 0 22px;
    background: #060607;
    border-bottom: 1px solid var(--bk-soft);
    color: var(--bk-dim);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.14em;
}

.batt { display: flex; align-items: center; gap: 7px; }
.batt i { width: 24px; height: 11px; border: 1.5px solid var(--bk-dim); border-radius: 2px; background: linear-gradient(90deg, var(--bk-dim) 84%, transparent 84%); background-clip: content-box; padding: 1px; }

.tb-app { flex: 1; min-height: 0; display: grid; grid-template-columns: 270px 1fr; }

.tb-rail {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    padding: 26px 22px 20px;
    background: linear-gradient(#111114, #0b0b0d);
    border-right: 1px solid var(--bk-line);
}

.tb-brand { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--bk-line); }
#tb-name { font-size: 34px; font-weight: 700; line-height: 0.92; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.tb-brand .bk-sel { max-width: 100%; font-size: 16px; color: var(--bk-mid); border-bottom-color: var(--bk-edge); }
.tb-brand .bk-sel:hover, .tb-brand .bk-sel:focus { color: #fff; border-bottom-color: var(--accent); }

.tb-nav { display: flex; flex-direction: column; }

.tb-tab {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--bk-soft);
    text-align: left;
    color: var(--bk-mid);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tb-tab em { font-size: 13px; font-style: normal; letter-spacing: 0.08em; color: #44464c; }
.tb-tab:hover { color: #fff; }
.tb-tab.on { color: #fff; }
.tb-tab.on em { color: var(--accent-lift); }

.tb-duty { margin-top: auto; font-size: 12px; line-height: 1.55; color: var(--bk-dim); }
#tb-close { align-self: stretch; }

.tb-main { position: relative; display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; padding: 26px 34px 30px; }

.tb-head { position: relative; padding-bottom: 16px; border-bottom: 1px solid var(--bk-line); }
.tb-head .bk-no { top: -6px; right: 0; font-size: 110px; }
.tb-head h2 { position: relative; margin: 0; font-size: 56px; font-weight: 700; line-height: 0.9; text-transform: uppercase; color: #fff; }

.tb-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi { padding: 12px 16px; background: var(--bk-card); border: 1px solid var(--bk-line); }
.kpi span, .kpi b { display: block; }
.kpi span { font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bk-dim); }
.kpi b { margin-top: 2px; font-size: 38px; font-weight: 700; line-height: 1.02; color: #fff; }
.kpi.bad b { color: var(--bad-text); }
.kpi.warn b { color: var(--warn); }

.tb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.panel h3 {
    margin: 0 0 10px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--bk-line);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-lift);
}

.panel > .fine:first-of-type { margin: -2px 0 8px; }

.ledger { display: flex; flex-direction: column; }

.lg-row {
    display: grid;
    grid-template-columns: 1.5fr 0.62fr 0.62fr 0.8fr 1.9fr;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bk-soft);
}

.lg-head span { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bk-dim); }
.lg-car b { display: block; font-size: 20px; font-weight: 700; text-transform: uppercase; color: #fff; }
.lg-car em { font-size: 12px; font-style: normal; color: var(--bk-dim); }
.lg-num { font-family: var(--mono); font-size: 14px; color: var(--bk-text); }
.lg-row.out .lg-num:nth-child(2) { color: var(--bad-text); font-weight: 700; }
.lg-order { display: flex; align-items: center; gap: 6px; }

.qty {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--bk-edge);
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.qty:hover { border-color: #fff; }
.qty-n { width: 22px; text-align: center; font-family: var(--mono); font-size: 14px; color: #fff; }
.lg-order .btn { flex: 1; }
.lg-order .btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-lift); }

.order, .sale { padding: 11px 0; border-bottom: 1px solid var(--bk-soft); }
.order { display: flex; flex-direction: column; gap: 3px; }
.order b, .sale b { font-size: 20px; font-weight: 700; text-transform: uppercase; color: #fff; }
.order span, .sale span { display: block; font-size: 12px; color: var(--bk-dim); }
.order em { font-family: var(--mono); font-size: 13px; font-style: normal; color: var(--accent-lift); }
.sale { display: flex; justify-content: space-between; gap: 10px; }
.sale-r { text-align: right; }

.account .balance { display: block; margin: 4px 0 8px; font-size: 60px; font-weight: 700; line-height: 1; color: #fff; }

.tb-amount {
    width: 100%;
    margin: 6px 0 14px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--accent);
    color: #fff;
    font-family: var(--display);
    font-stretch: 75%;
    font-variation-settings: 'wdth' 75;
    font-size: 28px;
    outline: none;
}

.tb-amount:focus { border-bottom-color: #fff; }
.tb-amount::placeholder { color: #55575e; }
.tb-amount::-webkit-inner-spin-button, .tb-amount::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.actions.tight { padding: 0; gap: 8px; }

.tx-list, .team { display: flex; flex-direction: column; }
.tx { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bk-soft); }
.tx b { display: block; font-size: 15px; color: #fff; }
.tx span { display: block; font-size: 12px; color: var(--bk-dim); }
.tx-amt { font-size: 21px; white-space: nowrap; }
.tx-amt.in { color: var(--good); }
.tx-amt.out { color: var(--bad-text); }

.member { display: grid; grid-template-columns: 14px 1fr auto 130px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--bk-soft); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bk-edge); }
.dot.on { background: var(--good); box-shadow: 0 0 0 3px rgba(63, 191, 127, 0.18); }
.dot.idle { background: var(--warn); }
.member-name b { display: block; font-size: 22px; font-weight: 700; text-transform: uppercase; color: #fff; }
.member-name span { font-size: 12px; color: var(--bk-dim); }
.member-n { font-family: var(--mono); font-size: 13px; color: var(--bk-mid); }
.member-c { text-align: right; font-size: 24px; font-weight: 700; color: #fff; }

.fl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; }
.fl-card { display: flex; flex-direction: column; background: var(--bk-card); border: 1px solid var(--bk-line); animation: cardIn 0.3s both; }
.fl-card.swapped { border-color: var(--bk-edge); }

.fl-photo, .sl-photo { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--studio); }
.fl-photo { height: 124px; border-bottom: 1px solid var(--bk-soft); }
.fl-photo img, .sl-photo img { max-width: 92%; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, 0.7)); }
.fl-photo img { max-height: 112px; }

.fl-body { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px 14px; }
.fl-spot { font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-lift); }
.fl-name { font-size: 26px; font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff; }
.fl-meta, .sl-meta { font-size: 13px; color: var(--bk-mid); }
.fl-change { display: flex; align-items: baseline; gap: 10px; margin-top: 2px; }
.fl-change span { flex-shrink: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bk-dim); }
.fl-pick, .sl-pick { flex: 1; min-width: 0; font-size: 17px; }

.fl-reset {
    align-self: flex-start;
    padding: 0;
    background: none;
    border: 0;
    color: var(--bk-mid);
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.fl-reset:hover { color: #fff; }
.fl-body > .btn.fl-sell { flex: none; margin-top: auto; }
.fl-change { margin-bottom: 6px; }

.sl-back { align-self: flex-start; }
.sl-view { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.sl-car { display: flex; flex-direction: column; gap: 6px; }
.sl-photo { height: 210px; margin-bottom: 8px; border: 1px solid var(--bk-soft); }
.sl-photo img { max-height: 196px; }
.sl-brand { font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent-lift); }
.sl-name { font-size: 40px; font-weight: 700; line-height: 0.95; text-transform: uppercase; color: #fff; }
.sl-view .people { margin-bottom: 12px; }
.sl-send { margin-bottom: 8px; }
.sl-send .btn.primary { flex: 1; }