body:has(.cm-market) { padding: 0; }
.game:has(.cm-market) {
  width: 100%; max-width: none; height: 100dvh; max-height: none; aspect-ratio: auto;
  border: 0; border-radius: 0;
}
.game:has(.cm-market) :is(#vehicle-bar,#display-controls,#tutorial-layer) { display: none; }
.cm-market, .cm-garage, .cm-modal {
  --cm-gold: #ffbd31;
  --cm-border: #30373a;
  --cm-muted: #b9bcbf;
  --cm-panel: linear-gradient(145deg,#1a1e20,#111517);
  color: #f5f6f6;
  font: 500 clamp(.8rem,.9vw,1.025rem)/1.3 Inter, Arial, sans-serif;
}
.cm-market, .cm-garage {
  position: absolute; inset: 0; background: radial-gradient(ellipse at 48% 0,#191a18,#0b0e10 70%);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.cm-market { display: flex; flex-direction: column; overflow: hidden; }
:is(.cm-market,.cm-garage,.cm-modal) :is(button,input,select) {
  color: inherit; font: inherit; border-radius: 7px; border: 1px solid #3a4145;
  background: linear-gradient(#212629,#171b1d); padding: .5em .7em; min-width: 0;
}
:is(.cm-market,.cm-garage,.cm-modal) button { cursor: pointer; }
:is(.cm-market,.cm-garage,.cm-modal) button:disabled { opacity: .45; cursor: default; }
:is(.cm-market,.cm-garage,.cm-modal) :focus-visible { outline: 2px solid #ffe396; outline-offset: -2px; }
:is(.cm-market,.cm-garage,.cm-modal) :is(.cm-gold, [data-category][aria-pressed=true]) {
  color: #181107; background: linear-gradient(#ffd367,#f4ab21); border-color: #ffc551; font-weight: 800;
  box-shadow: inset 0 1px #fff5;
}
:is(.cm-market,.cm-garage,.cm-modal) .icon { width: 1.35em; height: 1.35em; vertical-align: middle; flex: none; }
.cm-hero {
  flex: none; padding: .65em clamp(12px,2vw,36px) .8em;
  border-bottom: 1px solid #ffffff22;
  background: linear-gradient(90deg,#0a0d0f9c,#0d101236 58%,#0b0e1026),
    url('/assets/car-market/hales-auto-market.jpg') center 42% / 100% 205%;
}
.cm-hero-title { position: relative; }
.cm-hero h1 { margin: 0; letter-spacing: -.035em; line-height: 1.08; font-size: clamp(1.45rem,2.7vw,3.15rem); }
.cm-hero p { color: #c7c8c9; margin: .2em 0 .75em; font-size: clamp(.76rem,1.15vw,1.3rem); }
.cm-hero nav { display: flex; gap: .65em; overflow: auto; scrollbar-width: thin; padding: 0 0 2px; }
.cm-hero nav button { flex: 0 0 auto; display: flex; align-items: center; gap: .5em; padding: .72em 1.45em; white-space: nowrap; font-weight: 700; }
.cm-layout {
  display: grid; grid-template-columns: minmax(160px,17.5fr) minmax(0,55fr) minmax(210px,24fr);
  gap: clamp(10px,1.15vw,22px); flex: 1; min-height: 0; padding: .65em clamp(10px,1vw,20px) .8em;
}
.cm-filters,.cm-detail {
  min-height: 0; overflow: auto; min-width: 0; scrollbar-width: thin;
  border: 1px solid var(--cm-border); border-radius: 10px; background: var(--cm-panel);
}
.cm-filters { padding: .85em; }
.cm-filters header { display: flex; align-items: center; gap: .25em; }
.cm-filters h2 { margin: 0 auto 0 0; font-size: 1.35em; }
.cm-filters button[type=reset] { border-color: transparent; background: transparent; color: var(--cm-muted); }
.cm-filters label { display: grid; gap: .3em; margin: .65em 0; }
.cm-filters fieldset { border: 0; border-bottom: 1px solid #ffffff13; padding: 0 0 .7em; margin: .65em 0; min-width: 0; }
.cm-filters legend { font-weight: 700; margin-bottom: .32em; padding: 0; }
.cm-filters .cm-search { position: relative; }
.cm-search .icon { position: absolute; top: 50%; left: .55em; transform: translateY(-50%); color: var(--cm-muted); pointer-events: none; }
.cm-filters .cm-search input { padding-left: 2.1em; background: #0e1214; }
.cm-filters .cm-check { display: flex; align-items: center; margin: .32em 0; gap: .65em; color: #d1d2d3; }
.cm-check input { accent-color: var(--cm-gold); width: 1.25em; height: 1.25em; margin: 0; }
.cm-range { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .4em; }
.cm-slider { position: relative; }
.cm-slider output { position: absolute; top: -1.55em; right: 0; color: var(--cm-muted); }
.cm-slider-track { height: 24px; position: relative; }
.cm-slider-track::before {
  content: ''; position: absolute; inset: calc(50% - 2px) 8px auto; height: 4px; border-radius: 5px;
  background: linear-gradient(90deg,#3b4143 var(--from),var(--cm-gold) var(--from),var(--cm-gold) var(--to),#3b4143 var(--to));
}
.cm-market .cm-slider input {
  appearance: none; position: absolute; inset: 0; width: 100%; margin: 0; border: 0; padding: 0;
  background: transparent; pointer-events: none;
}
.cm-slider input::-webkit-slider-thumb {
  appearance: none; width: 19px; height: 19px; background: #ffc24c; border-radius: 50%;
  border: 1px solid #ffe394; pointer-events: auto; cursor: ew-resize;
}
.cm-slider input::-moz-range-thumb {
  width: 19px; height: 19px; background: #ffc24c; border-radius: 50%;
  border: 1px solid #ffe394; pointer-events: auto; cursor: ew-resize;
}
.cm-filters details { border: 1px solid var(--cm-border); border-radius: 7px; padding: .55em; }
.cm-filters summary { cursor: pointer; font-weight: 700; }
.cm-filters button[type=submit] { width: 100%; margin-top: .8em; }
.cm-results { display: flex; flex-direction: column; gap: .65em; min-height: 0; min-width: 0; }
.cm-toolbar { display: flex; align-items: center; gap: .55em; flex-wrap: wrap; min-width: 0; }
.cm-toolbar label { display: flex; align-items: center; gap: .5em; color: var(--cm-muted); }
.cm-toolbar select { color: #f5f5f5; }
.cm-toolbar .cm-gold { margin-left: auto; white-space: nowrap; }
.cm-count { margin-left: auto; color: var(--cm-muted); }
.cm-status,.cm-detail-status { margin: 0; color: #ffd183; }
.cm-status:empty,.cm-detail-status:empty { display: none; }
.cm-cards {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: max-content;
  align-content: start; gap: .7em; min-height: 0; overflow: auto; scrollbar-width: thin;
}
.cm-card {
  position: relative; min-width: 0; overflow: hidden; border-radius: 11px;
  border: 1px solid var(--cm-border); background: var(--cm-panel);
}
.cm-card.selected { border-color: var(--cm-gold); box-shadow: inset 0 0 0 1px var(--cm-gold); }
.cm-market .cm-select { display: block; width: 100%; border: 0; border-radius: 0; background: none; padding: 0; text-align: left; }
.cm-card-photo,.cm-detail-photo,.cm-modal-photo {
  position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 2;
  background: linear-gradient(0deg,#0c1012 1%,transparent 35%), radial-gradient(ellipse at 60% 45%,#876d4863,#100e0ddc),
    url('/assets/car-market/hales-auto-market.jpg') 55% bottom / cover no-repeat;
}
:is(.cm-card-photo,.cm-detail-photo,.cm-modal-photo) img { width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; }
:is(.cm-card-photo,.cm-detail-photo,.cm-modal-photo)>.icon { width: 24%; height: auto; color: #e4c17d; opacity: .55; }
.cm-badge { display: inline-flex; align-items: center; gap: .35em; border-radius: 6px; padding: .26em .5em; font-size: .86em; font-weight: 800; background: #394044; }
.cm-card-photo .cm-badge { position: absolute; top: .55em; left: .55em; }
.cm-badge.cm-auction { color: #1c1207; background: #ffbd3c; }
.cm-badge.cm-retired { color: #1c1c1c; background: #c3c4c3; }
.cm-badge.cm-damaged { color: #25180e; background: #e3a685; }
.cm-badge.cm-rare { color: #20170a; background: #dfb755; }
.cm-market .cm-favorite,.cm-market .cm-quick-buy,.cm-market .cm-expand { position: absolute; display: grid; place-items: center; padding: .35em; }
.cm-market .cm-favorite { right: .35em; top: .35em; background: #0c0f10b9; border-color: #ffffff2b; }
.cm-favorite[aria-pressed=true] svg { fill: var(--cm-gold); color: var(--cm-gold); }
.cm-market .cm-quick-buy { right: .45em; bottom: .45em; min-width: 2.4em; }
.cm-card-body { display: grid; gap: .22em; padding: .55em .7em; }
.cm-card-body h3 { font-size: clamp(.93rem,1.2vw,1.4rem); letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
.cm-meta { color: var(--cm-muted); margin: 0; overflow-wrap: anywhere; }
.cm-card-description { display: grid; gap: .18em; }
.cm-condition { display: flex; align-items: center; gap: .5em; margin: .25em 0; color: #dbddde; }
.cm-condition span { white-space: nowrap; }
.cm-condition meter { display: block; flex: 1; min-width: 1rem; height: .55em; appearance: none; }
.cm-condition meter::-webkit-meter-bar { background: #303638; border: 0; border-radius: 1em; }
.cm-condition meter::-webkit-meter-optimum-value { background: var(--meter); border-radius: 1em; }
.cm-condition meter::-moz-meter-bar { background: var(--meter); border-radius: 1em; }
.cm-green { --meter: #81eb71; }.cm-yellow { --meter: #f5d469; }.cm-orange { --meter: #eea14b; }.cm-red { --meter: #f06a58; }
.cm-clock { color: #ff7466; font-weight: 750; display: inline-flex; align-items: center; gap: .25em; }
.cm-card-price { min-height: 1.65em; display: flex; align-items: center; gap: .3em; flex-wrap: wrap; }
.cm-card-price span { color: var(--cm-muted); }
.cm-card-price strong { font-size: 1.55em; }
.cm-pages { display: flex; justify-content: center; gap: .3em; }
.cm-pages:empty { display: none; }
.cm-pages button { min-width: 2.15em; }
.cm-pages [aria-current=page] { border-color: var(--cm-gold); color: var(--cm-gold); }
.cm-empty { grid-column: 1/-1; margin: 0; padding: 1.25em; color: var(--cm-muted); }
.cm-detail { border-color: #725a37; }
.cm-detail-photo { aspect-ratio: 1.83; }
.cm-market .cm-expand { right: .5em; bottom: .5em; background: #0e1113d9; }
.cm-gallery {
  position: absolute; bottom: .4em; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: .3em; background: #0b0e10c7; border-radius: 8px; white-space: nowrap;
}
.cm-gallery button { border: 0; background: transparent; }
.cm-detail-info { display: grid; justify-items: start; gap: .45em; padding: .75em .95em 1em; min-width: 0; }
.cm-detail-specs,.cm-detail-checkout { width: 100%; display: grid; justify-items: start; gap: .45em; min-width: 0; }
.cm-detail h2 { margin: 0; font-size: clamp(1.25rem,1.7vw,2rem); letter-spacing: -.035em; overflow-wrap: anywhere; }
.cm-detail-info .cm-condition,.cm-detail-info .cm-specs,.cm-price-box,.cm-checkout { width: 100%; }
.cm-specs { margin: 0; display: grid; gap: .3em; }
.cm-specs div { display: flex; align-items: baseline; gap: .45em; }
.cm-specs div::after { content: ''; order: 1; border-bottom: 1px dotted #515658; flex: 1; }
.cm-specs dt { color: var(--cm-muted); }
.cm-specs dd { order: 2; text-align: right; margin: 0; overflow-wrap: anywhere; }
.cm-inspect { color: var(--cm-muted); }
.cm-price-box { border: 1px solid #a47230; border-radius: 8px; padding: .6em; background: linear-gradient(150deg,#2b2217,#151617); }
.cm-price-box div { display: flex; justify-content: space-between; align-items: center; gap: .4em; flex-wrap: wrap; }
.cm-price-box strong { font-size: 1.4em; }
.cm-price-box small { color: var(--cm-muted); }
.cm-market .cm-checkout { min-height: 44px; font-size: 1.2em; }
.cm-checkout .icon { margin-right: .35em; }
.cm-market .cm-mobile { display: none; }
.cm-modal>section { padding: 1rem; }
.cm-modal [data-close] { float: right; }
.cm-modal form { border-top: 0; padding: .5em 0 0; }
.cm-modal fieldset { padding: .4em; border: 1px solid var(--cm-border); }
.cm-modal select { width: 100%; }
.cm-modal-photo { width: 100%; margin-bottom: .7em; }
.cm-garage { overflow: auto; padding: 1rem; }
.cm-garage header { display: flex; align-items: center; justify-content: space-between; }
.cm-garage-cars { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),300px)); gap: .8em; }
.cm-garage .cm-card-body p { margin: .18em 0; }
.cm-garage-history { margin-top: 1em; }
@media (max-width: 1100px) {
  .cm-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1000px) {
  .cm-layout { grid-template-columns: minmax(0,1fr); }
  .cm-hero { padding: .28em .8em .3em; }
  .cm-hero h1 { font-size: 1.45rem; }
  .cm-hero p { margin: .1em 0 .24em; }
  .cm-hero nav button { padding: .42em .68em; min-height: 34px; }
  .cm-market .cm-mobile { display: inline-flex; align-items: center; gap: .3em; }
  .cm-toolbar label { font-size: 0; }
  .cm-toolbar select { font-size: .82rem; }
  .cm-filters,.cm-detail { display: none; }
  .cm-filters-open .cm-filters {
    display: block; position: absolute; z-index: 9; inset: 0 auto 0 0;
    width: min(350px,90%); border-radius: 0 10px 10px 0; box-shadow: 0 0 0 100vmax #0009;
  }
  .cm-detail-open .cm-detail {
    display: grid; position: absolute; z-index: 8; inset: 0;
    grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); grid-template-rows: auto minmax(0,1fr);
    gap: .4em .8em; padding: .55em .75em; overflow: hidden;
  }
  .cm-market .cm-detail-back { grid-column: 1/-1; justify-self: start; min-height: 35px; }
  .cm-detail-open .cm-detail-photo { height: 100%; min-height: 0; aspect-ratio: auto; border-radius: 9px; }
  .cm-detail-open .cm-detail-info { min-height: 0; grid-template-rows: minmax(0,1fr) auto; align-content: stretch; padding: .2em .4em; }
  .cm-detail-open .cm-detail-specs { overflow: auto; align-content: start; scrollbar-width: thin; }
  .cm-detail-checkout { padding-top: .35em; background: #141719; }
  .cm-detail-checkout .cm-price-box { padding: .35em .6em; }
  .cm-market .cm-checkout { min-height: 39px; }
  .cm-card-photo { aspect-ratio: auto; height: clamp(86px,23dvh,148px); }
  .cm-card-photo img { transform: scale(1.22); }
  .cm-card-body { grid-template-columns: 1fr auto; gap: .12em .35em; padding-block: .44em; }
  .cm-card-body :is(h3,.cm-meta,.cm-condition) { grid-column: 1/-1; }
  .cm-card-description { display: flex; flex-wrap: wrap; gap: .1em .5em; }
  .cm-card-description span + span::before { content: '·'; margin-right: .45em; }
  .cm-card-body .cm-card-price { align-self: center; }
  .cm-card-body .cm-clock { align-self: center; }
  .cm-market .cm-quick-buy,.cm-market .cm-favorite { min-width: 36px; min-height: 36px; }
}
@media (max-width: 1000px) and (max-height: 380px) {
  .cm-hero p { display: none; }
  .cm-hero h1 { margin-bottom: .15em; }
}
@media (max-width: 720px) {
}
@media (max-width: 520px) {
  .cm-cards { grid-template-columns: minmax(0,1fr); }
  .cm-count { display: none; }
}

.cm-style-preview{position:absolute;inset:0}
.cm-style-preview canvas{display:block;width:100%;height:100%;touch-action:none}

.cm-thumbnail-render{position:fixed;left:-1000px;top:0;width:420px;height:230px;pointer-events:none}
.cm-thumbnail-render canvas{display:block;width:100%;height:100%}

@media(max-height:550px){.cm-modal [data-sale-preview]{max-height:36dvh}}