/* Fisa de tuning pe panel (vehicle/{id}/fisa) — PORTUL lui frontend/src/showTuning/ShowTuning.css din joc
   (bhood5m, 30.09.2026). Generat: vh -> var(--u) (unitatea fisei, pusa pe .bh-vsheet), Gilroy -> Manrope,
   GeistMono -> Geist Mono; totul sub .bh-vsheet. Ajustarile pentru panel (fereastra, telefon, teme) sunt la final. */
.bh-vsheet .st, .bh-vsheet .st *, .bh-vsheet .st *::before, .bh-vsheet .st *::after { box-sizing: border-box; }
.bh-vsheet .st { font-family: 'Manrope', system-ui, sans-serif; }
.bh-vsheet .st button { font-family: inherit; }
.bh-vsheet .st h2, .bh-vsheet .st h3, .bh-vsheet .st h4, .bh-vsheet .st p, .bh-vsheet .st dl, .bh-vsheet .st dd, .bh-vsheet .st ul { margin: 0; padding: 0; }
.bh-vsheet .st ul { list-style: none; }

.bh-vsheet .st {
    --ink: #16191b;
    --ink-2: #4a5157;
    --ink-3: #8a9096;
    --paper: #f3f0e7;
    --paper-2: #e9e5d9;
    --rule: rgba(22, 25, 27, .12);
    --green: #13b653;
    --green-d: #0c8a3e;
    --torque: #23292e;
    --gold: #c99a1c;

    position: fixed; inset: 0; z-index: 9990;   /* overlay: peste market / v / licitatie / trade */
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8, 11, 10, .35), rgba(8, 11, 10, .82)),
        rgba(0, 0, 0, .25);
    animation: st-fade .25s ease-out both;
    color: var(--ink);
    user-select: none;
}

.bh-vsheet .st-stage {
    perspective: 1800px;
    display: flex; flex-direction: column; align-items: center; gap: calc(1.4 * var(--u));
}

/* ------------------------------------------------------------------ clipboard */
.bh-vsheet .st-board {
    --rx: 0deg; --ry: 0deg; --mx: .5; --my: .3;
    position: relative;
    width: min(calc(128 * var(--u)), 94vw);
    padding: calc(3.4 * var(--u)) calc(1.4 * var(--u)) calc(1.4 * var(--u));
    border-radius: calc(2 * var(--u));
    background:
        radial-gradient(120% 80% at calc(var(--mx) * 100%) 0%, rgba(255, 255, 255, .10), transparent 55%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 3px, transparent 3px 6px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, .35) 0 3px, transparent 3px 6px),
        linear-gradient(160deg, #23282b, #111416 60%, #0b0d0e);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .14),
        inset 0 -2px 0 rgba(0, 0, 0, .5),
        0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .55),
        0 0 0 1px rgba(0, 0, 0, .6);
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    animation: st-board-in .8s cubic-bezier(.16, .9, .24, 1) backwards;   /* backwards: dupa intrare, transform-ul e iar al inclinarii */
    will-change: transform;
}

@keyframes st-board-in {
    from { opacity: 0; transform: translateY(calc(6 * var(--u))) rotateX(24deg) scale(.94); }
    to   { opacity: 1; transform: rotateX(0deg) rotateY(0deg) scale(1); }
}

/* clema metalica */
.bh-vsheet .st-clip {
    position: absolute; top: calc(-2.2 * var(--u)); left: 50%;
    width: calc(24 * var(--u)); height: calc(6.4 * var(--u));
    transform: translateX(-50%) translateZ(30px);
    border-radius: calc(1.2 * var(--u)) calc(1.2 * var(--u)) calc(1.8 * var(--u)) calc(1.8 * var(--u));
    background: linear-gradient(180deg, #f1f3f5 0%, #b8bec4 38%, #e3e6e9 50%, #8d949b 78%, #6c737a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -2px 3px rgba(0, 0, 0, .35),
        0 calc(1 * var(--u)) calc(1.6 * var(--u)) rgba(0, 0, 0, .55);
    z-index: 5;
}
.bh-vsheet .st-clip span {
    position: absolute; left: 22%; right: 22%; top: calc(1.1 * var(--u)); height: calc(1.3 * var(--u));
    border-radius: calc(1 * var(--u));
    background: linear-gradient(180deg, #3b4045, #1c1f22);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .7);
}
.bh-vsheet .st-clip i {
    position: absolute; bottom: calc(1.1 * var(--u)); width: calc(1.3 * var(--u)); height: calc(1.3 * var(--u)); border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #9aa1a8 55%, #5c636a);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.bh-vsheet .st-clip i:first-child { left: calc(1.6 * var(--u)); }
.bh-vsheet .st-clip i:nth-child(2) { right: calc(1.6 * var(--u)); }

/* ------------------------------------------------------------------ hartia */
.bh-vsheet .st-paper {
    position: relative; overflow: hidden;
    border-radius: calc(.6 * var(--u));
    padding: calc(2.4 * var(--u)) calc(2.8 * var(--u)) 0;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
        linear-gradient(175deg, #f7f5ee 0%, var(--paper) 45%, var(--paper-2) 100%);
    box-shadow:
        inset 0 1px 0 #fff,
        0 calc(.3 * var(--u)) 0 rgba(0, 0, 0, .25),
        0 calc(1.2 * var(--u)) calc(2.4 * var(--u)) calc(-0.8 * var(--u)) rgba(0, 0, 0, .6);
    transform: translateZ(8px);
}
/* reflexul care urmeaza mouse-ul (hartia lucioasa a imprimantei) */
.bh-vsheet .st-sheen {
    position: absolute; inset: 0; pointer-events: none; z-index: 3;
    background: radial-gradient(60% 45% at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255, 255, 255, .45), transparent 70%);
    mix-blend-mode: soft-light;
    transition: background-position .3s;
}

/* aparitia pe rand a sectiunilor */
.bh-vsheet .st-in { animation: st-up .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.25s + var(--i, 0) * .08s); }
@keyframes st-up { from { opacity: 0; transform: translateY(calc(1.4 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes st-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ antet */
.bh-vsheet .st-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: calc(2 * var(--u));
    padding-bottom: calc(1.4 * var(--u));
    border-bottom: 2px solid var(--ink);
    position: relative;
}
.bh-vsheet .st-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; border-bottom: 1px solid var(--ink); }
.bh-vsheet .st-brand { display: flex; flex-direction: column; gap: calc(.4 * var(--u)); }
.bh-vsheet .st-logo { font-weight: 900; font-size: calc(3.4 * var(--u)); letter-spacing: -.02em; line-height: 1; }
.bh-vsheet .st-logo b { color: var(--green); padding: 0 .1em; }
.bh-vsheet .st-brand-sub { font-weight: 700; font-size: calc(1.15 * var(--u)); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.bh-vsheet .st-meta { display: flex; gap: calc(2.6 * var(--u)); }
.bh-vsheet .st-meta div { display: flex; flex-direction: column; gap: calc(.35 * var(--u)); text-align: right; }
.bh-vsheet .st-meta dt { font-size: calc(1 * var(--u)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.bh-vsheet .st-meta dd { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; font-size: calc(1.55 * var(--u)); color: var(--ink); }
.bh-vsheet .st-plate {
    padding: calc(.15 * var(--u)) calc(.8 * var(--u)); border: 1.5px solid var(--ink); border-radius: calc(.4 * var(--u));
    background: #fff; letter-spacing: .08em;
}

/* ------------------------------------------------------------------ masina + grafic */
.bh-vsheet .st-main {
    display: grid; grid-template-columns: 36% 1fr; gap: calc(2.4 * var(--u));
    padding: calc(1.7 * var(--u)) 0 calc(1.3 * var(--u));
    border-bottom: 1px dashed var(--rule);
}
.bh-vsheet .st-car { display: flex; flex-direction: column; min-width: 0; }
.bh-vsheet .st-car-img {
    position: relative; height: calc(16 * var(--u));
    display: flex; align-items: center; justify-content: center;
    transform-style: preserve-3d;
}
.bh-vsheet .st-car-img img {
    position: relative; z-index: 1;
    max-width: 100%; max-height: 100%; object-fit: contain;
    transform: translateZ(40px) translateX(calc((var(--mx) - .5) * calc(-1.4 * var(--u))));
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
    animation: st-car-in 1s cubic-bezier(.16, .9, .24, 1) .35s backwards;
    filter: drop-shadow(0 calc(.5 * var(--u)) calc(.6 * var(--u)) rgba(0, 0, 0, .18));
}
@keyframes st-car-in { from { opacity: 0; transform: translateX(calc(-5 * var(--u))) scale(.92); } to { opacity: 1; } }
.bh-vsheet .st-car-ph { width: 70%; fill: rgba(22, 25, 27, .12); position: relative; z-index: 1; }
.bh-vsheet .st-car-shadow {
    position: absolute; left: 12%; right: 12%; bottom: calc(1.2 * var(--u)); height: calc(2.2 * var(--u));
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .38), transparent);
}
.bh-vsheet .st-car-name {
    font-weight: 900; font-size: calc(3 * var(--u)); line-height: 1.05; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    padding-right: .1em;
}
.bh-vsheet .st-car-sub {
    display: flex; flex-wrap: wrap; align-items: center; gap: calc(.6 * var(--u));
    margin-top: calc(.5 * var(--u)) !important;
    font-size: calc(1.3 * var(--u)); font-weight: 500; color: var(--ink-2);
}
.bh-vsheet .st-car-sub > span:first-child { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--ink-3); }
.bh-vsheet .st-car-sub i { font-style: normal; color: var(--ink-3); }
.bh-vsheet .st-car-sub b { color: var(--ink); font-weight: 700; }

.bh-vsheet .st-stagebar { margin-top: auto; padding-top: calc(1.6 * var(--u)); }
.bh-vsheet .st-stagebar-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(.8 * var(--u)); }
.bh-vsheet .st-stagebar-h span { font-size: calc(1.1 * var(--u)); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.bh-vsheet .st-stagebar-h b { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-size: calc(2 * var(--u)); font-weight: 600; }
.bh-vsheet .st-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(.6 * var(--u)); }
.bh-vsheet .st-seg span {
    position: relative; height: calc(3.2 * var(--u)); border-radius: calc(.5 * var(--u)); overflow: hidden;
    background: repeating-linear-gradient(-45deg, rgba(22, 25, 27, .06) 0 4px, transparent 4px 8px), rgba(22, 25, 27, .05);
    border: 1px solid var(--rule);
    display: flex; align-items: center; justify-content: center;
}
.bh-vsheet .st-seg span::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, #1fd166, var(--green) 55%, var(--green-d));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
    transform: scaleX(0); transform-origin: left;
}
.bh-vsheet .st-seg span.is-on::before { animation: st-seg-fill .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.7s + var(--k) * .14s); }
.bh-vsheet .st-seg em { position: relative; z-index: 1; font-style: normal; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; font-size: calc(1.25 * var(--u)); color: var(--ink-3); }
.bh-vsheet .st-seg span.is-on em { color: #fff; animation: st-fade .2s both; animation-delay: calc(.8s + var(--k) * .14s); }
@keyframes st-seg-fill { to { transform: scaleX(1); } }
.bh-vsheet .st-stagebar.is-bricked .st-stagebar-h b { color: #c62f22; }
.bh-vsheet .st-stagebar.is-bricked .st-seg span::before { background: linear-gradient(180deg, #e2574a, #c62f22); }

/* grafic */
.bh-vsheet .st-dyno { display: flex; flex-direction: column; min-width: 0; }
.bh-vsheet .st-dyno-h { display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--u)); margin-bottom: calc(.6 * var(--u)); }
.bh-vsheet .st-dyno-h h3 { font-weight: 900; font-size: calc(1.5 * var(--u)); letter-spacing: .14em; text-transform: uppercase; }
.bh-vsheet .st-legend { display: flex; gap: calc(1.6 * var(--u)); }
.bh-vsheet .st-legend li { display: flex; align-items: center; gap: calc(.6 * var(--u)); font-size: calc(1.2 * var(--u)); font-weight: 700; color: var(--ink-2); }
.bh-vsheet .st-legend li::before { content: ''; width: calc(2.2 * var(--u)); height: 3px; border-radius: 2px; }
.bh-vsheet .st-legend li.is-p::before { background: var(--green); }
.bh-vsheet .st-legend li.is-n::before { background: var(--torque); }
.bh-vsheet .st-legend li.is-s::before { background: repeating-linear-gradient(90deg, var(--ink-3) 0 4px, transparent 4px 7px); }

.bh-vsheet .st-chart { width: 100%; height: calc(20 * var(--u)); display: block; overflow: visible; }
.bh-vsheet .st-grid-minor line { stroke: rgba(19, 182, 83, .10); stroke-width: .6; }
.bh-vsheet .st-grid-major line { stroke: rgba(19, 182, 83, .22); stroke-width: .8; }
.bh-vsheet .st-grid-frame { fill: none; stroke: rgba(22, 25, 27, .35); stroke-width: 1; }
.bh-vsheet .st-axis text { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10.5px; font-weight: 500; fill: var(--ink-3); }
.bh-vsheet .st-axis text.is-p { fill: var(--green-d); }
.bh-vsheet .st-axis text.is-n { fill: var(--torque); }
.bh-vsheet .st-axis .st-axis-unit { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .12em; }

.bh-vsheet .st-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bh-vsheet .st-line-p { stroke: var(--green); stroke-width: 3.2; animation: st-draw 1.6s cubic-bezier(.45, .05, .25, 1) .55s forwards; filter: drop-shadow(0 1px 1.5px rgba(12, 138, 62, .35)); }
.bh-vsheet .st-line-n { stroke: var(--torque); stroke-width: 2.2; animation: st-draw 1.6s cubic-bezier(.45, .05, .25, 1) .7s forwards; }
.bh-vsheet .st-line-stock { stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 1; animation: st-draw 1.2s ease-out .45s forwards, st-dash 0s linear 1.7s forwards; }
@keyframes st-draw { to { stroke-dashoffset: 0; } }
@keyframes st-dash { to { stroke-dasharray: .012 .01; stroke-dashoffset: 0; } }
.bh-vsheet .st-area { opacity: 0; animation: st-fade .8s ease-out 1.6s forwards; }

.bh-vsheet .st-peak { opacity: 0; animation: st-pop .45s cubic-bezier(.3, 1.6, .5, 1) forwards; }
.bh-vsheet .st-peak-p { animation-delay: 2s; }
.bh-vsheet .st-peak-n { animation-delay: 2.15s; }
.bh-vsheet .st-peak-p circle { fill: var(--green); stroke: #fff; stroke-width: 1.6; }
.bh-vsheet .st-peak-p .st-peak-halo { fill: rgba(19, 182, 83, .18); stroke: none; animation: st-pulse 2s ease-out 2.4s infinite; transform-origin: center; transform-box: fill-box; }
.bh-vsheet .st-peak-n circle { fill: var(--torque); stroke: #fff; stroke-width: 1.4; }
@keyframes st-pop { from { opacity: 0; } to { opacity: 1; } }
@keyframes st-pulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }

.bh-vsheet .st-empty-t { font-family: 'Manrope', system-ui, sans-serif; font-weight: 900; font-size: 15px; letter-spacing: .2em; fill: rgba(22, 25, 27, .35); }
.bh-vsheet .st-empty-s { font-family: 'Manrope', system-ui, sans-serif; font-weight: 500; font-size: 11.5px; fill: var(--ink-3); }

.bh-vsheet .st-dyno-f { margin-top: calc(.4 * var(--u)) !important; font-size: calc(1.15 * var(--u)); font-weight: 500; color: var(--ink-3); text-align: right; }
.bh-vsheet .st-warn { color: #b3541e; font-weight: 700; }

/* ------------------------------------------------------------------ cifrele mari */
.bh-vsheet .st-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px dashed var(--rule);
}
.bh-vsheet .st-stat { display: flex; flex-direction: column; gap: calc(.3 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.8 * var(--u)); position: relative; }
.bh-vsheet .st-stat + .st-stat::before { content: ''; position: absolute; left: 0; top: calc(1.6 * var(--u)); bottom: calc(1.6 * var(--u)); border-left: 1px solid var(--rule); }
.bh-vsheet .st-stat:first-child { padding-left: 0; }
.bh-vsheet .st-stat-k { font-size: calc(1.05 * var(--u)); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.bh-vsheet .st-stat-v { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; font-size: calc(3.8 * var(--u)); line-height: 1; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.bh-vsheet .st-stat-v small { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: calc(1.35 * var(--u)); letter-spacing: .04em; margin-left: calc(.5 * var(--u)); color: var(--ink-2); }
.bh-vsheet .st-stat.is-accent .st-stat-v { color: var(--green-d); }
.bh-vsheet .st-stat-s { font-size: calc(1.2 * var(--u)); font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-vsheet .st-up { color: var(--green-d); font-weight: 700; }

/* ------------------------------------------------------------------ piesele */
.bh-vsheet .st-parts { display: grid; grid-template-columns: 36% 1fr; gap: calc(2.4 * var(--u)); padding: calc(1.3 * var(--u)) 0 calc(1.5 * var(--u)); }
.bh-vsheet .st-col { min-width: 0; }
.bh-vsheet .st-col h4 { font-weight: 900; font-size: calc(1.2 * var(--u)); letter-spacing: .18em; text-transform: uppercase; margin-bottom: calc(.9 * var(--u)) !important; color: var(--ink-2); }
.bh-vsheet .st-chips { display: flex; flex-wrap: wrap; gap: calc(.5 * var(--u)); max-height: calc(13.6 * var(--u)); overflow-y: auto; }
.bh-vsheet .st-chips li {
    display: inline-flex; align-items: center; gap: calc(.6 * var(--u));
    padding: calc(.4 * var(--u)) calc(.8 * var(--u)); border-radius: 99px;
    font-size: calc(1.15 * var(--u)); font-weight: 700;
    background: #fff; border: 1px solid var(--rule);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}
.bh-vsheet .st-chips li b { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; color: var(--green-d); font-size: calc(1.1 * var(--u)); }
.bh-vsheet .st-chips li.is-stage { background: var(--ink); color: #fff; border-color: var(--ink); }
.bh-vsheet .st-chips li.is-bricked { background: #c62f22; color: #fff; border-color: #c62f22; }
.bh-vsheet .st-chips li.is-group { padding: calc(.45 * var(--u)) calc(.2 * var(--u)) calc(.45 * var(--u)) calc(.4 * var(--u)); background: none; border: 0; box-shadow: none; border-radius: 0;
    font-size: calc(1 * var(--u)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.bh-vsheet .st-old { margin-top: calc(.9 * var(--u)) !important; font-size: calc(1.15 * var(--u)); color: var(--ink-3); font-weight: 500; }

.bh-vsheet .st-list {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(2.4 * var(--u));
    max-height: calc(13.6 * var(--u)); overflow-y: auto; padding-right: calc(.6 * var(--u));
}
.bh-vsheet .st-list div { display: flex; align-items: baseline; gap: calc(.8 * var(--u)); padding: calc(.35 * var(--u)) 0; border-bottom: 1px dotted rgba(22, 25, 27, .18); min-width: 0; }
.bh-vsheet .st-list dt { flex: none; font-size: calc(1.2 * var(--u)); font-weight: 700; color: var(--ink-2); }
.bh-vsheet .st-list dd { flex: 1; min-width: 0; text-align: right; font-size: calc(1.2 * var(--u)); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-vsheet .st-none { font-size: calc(1.25 * var(--u)); font-weight: 500; color: var(--ink-3); }

.bh-vsheet .st-chips::-webkit-scrollbar, .bh-vsheet .st-list::-webkit-scrollbar { width: 4px; }
.bh-vsheet .st-chips::-webkit-scrollbar-thumb, .bh-vsheet .st-list::-webkit-scrollbar-thumb { background: rgba(22, 25, 27, .25); border-radius: 4px; }

/* ------------------------------------------------------------------ bonul cu sumele */
.bh-vsheet .st-receipt {
    position: relative;
    margin: 0 calc(-2.8 * var(--u));
    padding: calc(1.7 * var(--u)) calc(2.8 * var(--u));
    background: linear-gradient(180deg, #16191b, #0e1112);
    color: #fff;
    display: flex; align-items: center; gap: calc(3 * var(--u));
}
/* linia perforata dintre fisa si bon */
.bh-vsheet .st-receipt::before {
    content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 10px;
    background: radial-gradient(circle at 5px 5px, var(--paper-2) 3.2px, transparent 3.6px) 0 0 / 14px 10px repeat-x;
}
.bh-vsheet .st-receipt-h { display: flex; flex-direction: column; gap: calc(.5 * var(--u)); flex: none; width: calc(16 * var(--u)); }
.bh-vsheet .st-receipt-h span { font-weight: 900; font-size: calc(1.5 * var(--u)); letter-spacing: .16em; text-transform: uppercase; line-height: 1.25; }
.bh-vsheet .st-receipt-h small { font-size: calc(1.1 * var(--u)); font-weight: 500; color: rgba(255, 255, 255, .5); }

.bh-vsheet .st-sums { flex: 1; display: flex; flex-wrap: wrap; gap: calc(1.2 * var(--u)); min-width: 0; }
.bh-vsheet .st-sum {
    flex: 1 1 auto; min-width: calc(13 * var(--u));
    display: flex; flex-direction: column; gap: calc(.5 * var(--u));
    padding: calc(1.1 * var(--u)) calc(1.4 * var(--u)); border-radius: calc(1 * var(--u));
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .09);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    position: relative; overflow: hidden;
}
.bh-vsheet .st-sum::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.bh-vsheet .st-sum-k { font-size: calc(1.05 * var(--u)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.bh-vsheet .st-sum-v { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; font-size: calc(2.5 * var(--u)); line-height: 1; color: var(--c); white-space: nowrap; letter-spacing: -.02em; }
.bh-vsheet .st-sum-v small { font-family: 'Manrope', system-ui, sans-serif; font-weight: 700; font-size: calc(1.15 * var(--u)); margin-left: calc(.5 * var(--u)); letter-spacing: .08em; opacity: .8; }
.bh-vsheet .st-sum.is-money { --c: #3fdc7e; }
.bh-vsheet .st-sum.is-pp { --c: #f3bd3e; }
.bh-vsheet .st-sum.is-gems { --c: #3ee6c8; }
.bh-vsheet .st-sum.is-bp { --c: #c2a2da; }
.bh-vsheet .st-sum.is-rp { --c: #ffa53d; }
.bh-vsheet .st-none-r { color: rgba(255, 255, 255, .5); flex: 1; }

/* stampila */
.bh-vsheet .st-stamp {
    flex: none;
    width: calc(11.5 * var(--u)); height: calc(11.5 * var(--u)); margin: calc(-1.6 * var(--u)) calc(.4 * var(--u)) calc(-1.6 * var(--u)) 0;
    border-radius: 50%;
    border: calc(.45 * var(--u)) double rgba(63, 220, 126, .9);
    color: rgba(63, 220, 126, .95);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(.3 * var(--u));
    transform: rotate(-14deg);
    text-align: center;
    animation: st-stamp .5s cubic-bezier(.3, 1.5, .5, 1) 1.9s both;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence baseFrequency='.7' numOctaves='2'/><feComponentTransfer><feFuncA type='discrete' tableValues='1 1 1 0 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence baseFrequency='.7' numOctaves='2'/><feComponentTransfer><feFuncA type='discrete' tableValues='1 1 1 0 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>");
}
.bh-vsheet .st-stamp span { font-weight: 900; font-size: calc(1.2 * var(--u)); letter-spacing: .3em; }
.bh-vsheet .st-stamp b { font-weight: 900; font-size: calc(1.75 * var(--u)); letter-spacing: .08em; padding: calc(.3 * var(--u)) calc(.8 * var(--u)); border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.bh-vsheet .st-stamp em { font-style: normal; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-size: calc(1.1 * var(--u)); font-weight: 600; }
.bh-vsheet .st-stamp.is-grey { border-color: rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .45); }
@keyframes st-stamp {
    0%   { opacity: 0; transform: rotate(-14deg) scale(1.9); }
    60%  { opacity: 1; transform: rotate(-14deg) scale(.94); }
    100% { opacity: 1; transform: rotate(-14deg) scale(1); }
}

/* insigna float / conditie (treptele si culorile din market; holograma creste cu treapta, --fi 0..1) */
.bh-vsheet .st-seal {
    --fc: #A3ACB5; --fc1: #dfe3e7; --fc2: #737b83; --fc3: #c2c8ce; --fi: .06;
    position: absolute; left: calc(2.2 * var(--u)); top: calc(10.4 * var(--u)); z-index: 2;
    width: calc(8.4 * var(--u)); height: calc(8.4 * var(--u)); border-radius: 50%;
    background:
        radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255, 255, 255, .9), transparent 46%),
        conic-gradient(from calc(var(--mx) * 360deg), var(--fc1), var(--fc), var(--fc3), var(--fc2), var(--fc), var(--fc1));
    box-shadow:
        0 0 0 calc(.35 * var(--u)) rgba(255, 255, 255, .65),
        0 calc(.4 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, .25),
        0 0 calc(var(--fi) * calc(2.4 * var(--u))) var(--fc),
        inset 0 0 calc(1 * var(--u)) rgba(0, 0, 0, .15);
    display: flex; align-items: center; justify-content: center; text-align: center;
    transform: rotate(-12deg);
    animation: st-seal-in .6s cubic-bezier(.3, 1.5, .5, 1) 1.2s backwards;
}
/* sclipirea care trece peste insigna — doar la treptele rare */
.bh-vsheet .st-seal::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%) -200% 0 / 250% 100% no-repeat;
    opacity: var(--fi);
    animation: st-seal-shine 3.2s ease-in-out 2s infinite;
}
.bh-vsheet .st-seal span { display: flex; flex-direction: column; align-items: center; gap: calc(.15 * var(--u)); color: rgba(22, 25, 27, .82); line-height: 1; }
.bh-vsheet .st-seal em { font-style: normal; font-weight: 900; font-size: calc(.85 * var(--u)); letter-spacing: .14em; opacity: .75; }
.bh-vsheet .st-seal b { font-weight: 900; font-size: calc(1.35 * var(--u)); letter-spacing: .02em; text-transform: uppercase; }
.bh-vsheet .st-seal small { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-size: calc(.85 * var(--u)); font-weight: 600; letter-spacing: .06em; }
.bh-vsheet .st-seal.is-plain span { font-weight: 900; font-size: calc(1.3 * var(--u)); line-height: 1.05; display: block; }
.bh-vsheet .st-seal.is-plain {
    background:
        radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255, 255, 255, .85), transparent 45%),
        conic-gradient(from calc(var(--mx) * 360deg), #7ef0c1, #9fb7ff, #f7a8f0, #ffe38a, #8af7a8, #7ef0c1);
}
.bh-vsheet .st-seal.is-plain::after { display: none; }
/* Perfect: curcubeul din market */
.bh-vsheet .st-seal.is-perfect {
    background:
        radial-gradient(circle at calc(var(--mx) * 100%) calc(var(--my) * 100%), rgba(255, 255, 255, .95), transparent 46%),
        conic-gradient(from calc(var(--mx) * 360deg), #FF5F6D, #FFC371, #50FF00, #3FA9FF, #C77DFF, #FF5F6D);
}
.bh-vsheet .st-seal.is-critical span { color: rgba(255, 255, 255, .9); }
@keyframes st-seal-in { from { opacity: 0; transform: rotate(-40deg) scale(.4); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes st-seal-shine { 0%, 55% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* timpii Dragy, sub grafic */
.bh-vsheet .st-dragy {
    display: flex; align-items: stretch; gap: calc(1.6 * var(--u));
    margin-top: calc(.8 * var(--u)); padding: calc(.8 * var(--u)) calc(1.2 * var(--u));
    border: 1px solid var(--rule); border-radius: calc(.8 * var(--u));
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2));
}
.bh-vsheet .st-dragy-k { display: flex; flex-direction: column; justify-content: center; font-weight: 900; font-size: calc(1.1 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); padding-right: calc(1.4 * var(--u)); border-right: 1px solid var(--rule); }
.bh-vsheet .st-dragy-k small { font-weight: 700; font-size: calc(.9 * var(--u)); letter-spacing: .2em; color: var(--green-d); margin-top: calc(.2 * var(--u)); }
.bh-vsheet .st-dragy > div { flex: 1; display: flex; flex-direction: column; gap: calc(.25 * var(--u)); min-width: 0; }
.bh-vsheet .st-dragy > div span { font-size: calc(1 * var(--u)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.bh-vsheet .st-dragy > div b { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; font-size: calc(2.1 * var(--u)); line-height: 1; color: var(--ink); white-space: nowrap; }
.bh-vsheet .st-dragy > div b small { font-family: 'Manrope', system-ui, sans-serif; font-size: calc(1.1 * var(--u)); margin-left: calc(.3 * var(--u)); color: var(--ink-2); }
.bh-vsheet .st-dragy > div em { font-style: normal; font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-size: calc(1 * var(--u)); color: var(--green-d); }
.bh-vsheet .st-dragy p { align-self: center; font-size: calc(1.2 * var(--u)); font-weight: 500; color: var(--ink-3); }

/* inchiderea */
.bh-vsheet .st.is-closing { animation: st-fade-out .2s ease-in forwards; }
@keyframes st-fade-out { to { opacity: 0; } }

/* ------------------------------------------------------------------ sub fisa */
.bh-vsheet .st-actions { display: flex; align-items: center; gap: calc(1 * var(--u)); color: rgba(255, 255, 255, .6); font-size: calc(1.35 * var(--u)); font-weight: 500; }
.bh-vsheet .st-close {
    padding: calc(1 * var(--u)) calc(2.4 * var(--u)); border-radius: calc(1 * var(--u)); border: 0; cursor: pointer;
    font-weight: 700; font-size: calc(1.4 * var(--u)); color: #fff;
    background: linear-gradient(180deg, #17c964, #13b653 60%, #0f9c47);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 calc(.6 * var(--u)) calc(1.6 * var(--u)) rgba(19, 182, 83, .35);
    transition: transform .15s ease-out, filter .15s ease-out;
}
.bh-vsheet .st-close:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bh-vsheet .st-close:active { transform: translateY(1px); }

/* ferestre joase (1280x720 si mai jos): hartia nu trebuie sa iasa din ecran */
@media (max-aspect-ratio: 4/3) {
    .bh-vsheet .st-meta { gap: calc(1.4 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
    .bh-vsheet .st *, .bh-vsheet .st { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; }
}

/* ====================================================================== PANEL
   Fereastra (Bootstrap 4 .modal montat pe <body>), unitatea --u in loc de vh, telefon, teme. */
.bh-vsheet {
    --u: clamp(6.2px, calc((100vw - 48px) / 128), 8.6px);
    --vs-glass-a: var(--g-pane-a, rgba(255, 255, 255, .068));
    --vs-glass-b: var(--g-pane-b, rgba(255, 255, 255, .026));
    --vs-edge: var(--g-edge-2, rgba(255, 255, 255, .14));
    --vs-text: var(--g-text, #e6ecea);
    --vs-muted: var(--g-muted, #8f9d98);
    --vs-strong: var(--g-strong, #fff);
    --vs-green: var(--g-green, #17c964);
    --vs-green-soft: var(--g-green-soft, rgba(23, 201, 100, .14));
    --vs-green-edge: var(--g-green-edge, rgba(23, 201, 100, .38));
    --vs-float: var(--g-float, rgba(16, 23, 24, .86));
    --vs-r-lg: var(--g-r-lg, 18px);
    --vs-shadow: var(--g-shadow-float, 0 24px 56px -20px rgba(0, 0, 0, .8));
    padding: 0 !important;
}
.bh-vsheet .modal-dialog { max-width: calc(128 * var(--u) + 32px); margin: 28px auto; padding: 0 16px; pointer-events: none; }
/* specificitate peste html.bh-glass[data-bh-theme="light"] .modal-content (bh-glass.css, cu !important) */
.bh-vsheet.modal .modal-dialog .modal-content { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; pointer-events: auto; }
.bh-vsheet.modal .modal-dialog .modal-content::before, .bh-vsheet.modal .modal-dialog .modal-content::after { display: none !important; }

/* in fereastra, fisa nu mai e overlay pe tot ecranul */
.bh-vsheet .st { position: relative; inset: auto; z-index: auto; background: none; display: block; user-select: text; animation: none; }
.bh-vsheet .st-stage { gap: calc(1.4 * var(--u)); padding-top: calc(2.4 * var(--u)); }
.bh-vsheet .st-board { width: 100%; max-width: calc(128 * var(--u)); }
.bh-vsheet .st-close:focus-visible, .bh-vsheet .vs-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.bh-vsheet .st-car-name { color: var(--ink); }
.bh-vsheet .st h2, .bh-vsheet .st h3, .bh-vsheet .st h4 { color: inherit; font-family: inherit; }
.bh-vsheet .st-receipt-h span, .bh-vsheet .st-sum-k { color: inherit; }
.bh-vsheet .st-receipt-h span { color: #fff; }
.bh-vsheet .st-sum-k { color: rgba(255, 255, 255, .55); }
.bh-vsheet .st-none-r a { color: #3fdc7e; }
.bh-vsheet .st-actions { flex-wrap: wrap; justify-content: center; color: rgba(255, 255, 255, .7); }
.bh-vsheet .st-actions a { color: rgba(255, 255, 255, .78); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bh-vsheet .st-close { font-size: 14px; padding: 9px 22px; border-radius: 10px; }

/* X-ul din colt (pe langa „Inchide fisa" si Esc) */
.bh-vsheet .vs-x {
    position: absolute; top: 0; right: 0; z-index: 8;
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(12, 15, 16, .78); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.bh-vsheet .vs-x:hover { background: rgba(30, 36, 38, .9); }

/* incarcare / eroare: sticla panelului (tema dark / light) */
.bh-vsheet .vs-state {
    margin: 12vh auto 0; max-width: 420px; padding: 26px 24px; text-align: center;
    font-family: var(--g-font, 'Manrope', system-ui, sans-serif);
    color: var(--vs-text);
    background: linear-gradient(180deg, var(--vs-glass-a), var(--vs-glass-b)), var(--vs-float);
    border: 1px solid var(--vs-edge); border-radius: var(--vs-r-lg);
    box-shadow: var(--vs-shadow);
}
.bh-vsheet .vs-state b { display: block; color: var(--vs-strong); font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.bh-vsheet .vs-state p { margin: 0 0 16px; color: var(--vs-muted); font-size: 13.5px; line-height: 1.5; }
.bh-vsheet .vs-spin {
    width: 38px; height: 38px; margin: 0 auto 14px; border-radius: 50%;
    border: 3px solid var(--vs-green-soft); border-top-color: var(--vs-green);
    animation: vs-spin .8s linear infinite;
}
@keyframes vs-spin { to { transform: rotate(360deg); } }
.bh-vsheet .vs-state .btn { border-radius: 10px; }

/* butonul „Vezi fisa" de pe carduri / tabele */
.bh-vsheet-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bh-vsheet-btn .mdi { font-size: 15px; line-height: 1; }

/* ---------------------------------------------------------------- tableta / telefon */
@media (max-width: 991.98px) {
    .bh-vsheet { --u: 7.4px; }
    .bh-vsheet .st-meta { flex-wrap: wrap; gap: calc(1.4 * var(--u)) calc(2 * var(--u)); justify-content: flex-end; }
}
@media (max-width: 767.98px) {
    .bh-vsheet { --u: 8.4px; }
    .bh-vsheet .modal-dialog { margin: 10px auto; padding: 0 8px; }
    .bh-vsheet .st-board { padding: calc(3.4 * var(--u)) calc(.8 * var(--u)) calc(.8 * var(--u)); border-radius: 14px; transform: none !important; }
    .bh-vsheet .st-paper { padding: calc(2 * var(--u)) 14px 0; }
    .bh-vsheet .st-clip { width: 18vh; max-width: 150px; }
    .bh-vsheet .st-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .bh-vsheet .st-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    .bh-vsheet .st-meta div { text-align: left; min-width: 0; }
    .bh-vsheet .st-meta dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bh-vsheet .st-plate { display: inline-block; }
    .bh-vsheet .st-main, .bh-vsheet .st-parts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .bh-vsheet .st-car-name { white-space: normal; }
    .bh-vsheet .st-legend { flex-wrap: wrap; gap: 4px 10px; justify-content: flex-end; }
    .bh-vsheet .st-dyno-h { align-items: flex-start; }
    .bh-vsheet .st-chart { height: auto; aspect-ratio: 640 / 300; }
    .bh-vsheet .st-dragy { flex-wrap: wrap; gap: 8px 12px; }
    .bh-vsheet .st-dragy-k { flex: 1 0 100%; flex-direction: row; gap: 8px; align-items: baseline; border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 0 6px; }
    .bh-vsheet .st-dragy > div { flex: 1 1 28%; }
    .bh-vsheet .st-stats { grid-template-columns: 1fr 1fr; }
    .bh-vsheet .st-stat { padding: 10px 12px; }
    .bh-vsheet .st-stat:nth-child(odd) { padding-left: 0; }
    .bh-vsheet .st-stat:nth-child(3)::before { display: none; }
    .bh-vsheet .st-stat:nth-child(n+3) { border-top: 1px solid var(--rule); }
    .bh-vsheet .st-stat-v { font-size: calc(3.2 * var(--u)); }
    .bh-vsheet .st-list { grid-template-columns: minmax(0, 1fr); max-height: none; }
    .bh-vsheet .st-chips { max-height: none; }
    .bh-vsheet .st-receipt { flex-direction: column; align-items: stretch; gap: 12px; margin: 0 -14px; padding: 16px 14px 18px; }
    .bh-vsheet .st-receipt-h { width: auto; }
    .bh-vsheet .st-sum { min-width: calc(50% - 6px); }
    .bh-vsheet .st-stamp { position: static; align-self: center; margin: 4px auto 0; width: 84px; height: 84px; }
    .bh-vsheet .st-seal { left: auto; right: 10px; top: auto; margin-top: 0; width: 64px; height: 64px; }
    .bh-vsheet .st-car { position: relative; }
}
@media (max-width: 380px) {
    .bh-vsheet { --u: 8px; }
    .bh-vsheet .st-stat-v { font-size: calc(2.9 * var(--u)); }
}
/* pe telefon insigna float sta in coltul pozei, nu peste antet */
@media (max-width: 767.98px) {
    .bh-vsheet .st-paper > .st-seal { display: none; }
    .bh-vsheet .st-car .st-seal { display: flex; position: absolute; top: 4px; right: 0; left: auto; }
}
@media (min-width: 768px) {
    .bh-vsheet .st-car .st-seal { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bh-vsheet .vs-spin { animation-duration: 1.6s !important; }
}

/* butonul de pe cardul din market (corpul cardului e grid) */
.mk-card .mk-sheet-btn { justify-self: start; }

/* temele vechi ale panelului pun h1-h6 albe cu !important ([data-theme-version="dark"] h2, html.bh-glass h2):
   pe hartie titlurile raman cerneala, ca in joc */
.bh-vsheet .st .st-car-name, .bh-vsheet .st .st-dyno-h h3 { color: var(--ink) !important; }
.bh-vsheet .st .st-col h4 { color: var(--ink-2) !important; }