.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 14px;
  padding: 4px;
  background: #090a0d;
  border: 1px solid #252832;
  border-radius: 13px;
}
.segment button {
  padding: 10px 6px;
  color: #858994;
  background: transparent;
  border: 0;
  border-radius: 10px;
}
.segment button.active { color: #fff; font-weight: 700; background: #252832; }
.segment.three { grid-template-columns: .9fr .8fr 1.3fr; }
.segment.three button { padding: 10px 4px; font-size: 11px; }
.keepOriginal {
  padding: 15px;
  color: #b8c0c9;
  text-align: center;
  background: #111820;
  border: 1px solid #25303b;
  border-radius: 13px;
}
.keepButton {
  width: 100%;
  margin-bottom: 13px;
  padding: 12px;
  color: #c3c7cc;
  background: #15171d;
  border: 1px solid #2b2e37;
  border-radius: 13px;
}
.keepButton.active {
  color: #fff;
  background: #132019;
  border-color: #39704b;
}
.vinylGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vinylCard {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  color: #fff;
  text-align: left;
  background: #15171d;
  border: 1px solid #292c35;
  border-radius: 13px;
}
.vinylCard.active {
  background: #251116;
  border-color: var(--red);
  box-shadow: 0 0 0 1px rgba(242, 30, 52, .22);
}
.vinylSample {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  box-shadow: inset 0 0 12px rgba(255, 255, 255, .08);
}
.vinylCard b, .wheelInfo b {
  display: block;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.2;
}
.vinylCard small, .wheelInfo small {
  display: block;
  margin-top: 4px;
  color: #858994;
  font-size: 9px;
}
.catalogHint { margin: -8px 0 12px; color: #858994; font-size: 11px; }
.wheelGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wheelCard {
  min-width: 0;
  padding: 9px 7px;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, #191b21, #0d0f13);
  border: 1px solid #292c35;
  border-radius: 15px;
}
.wheelCard.active {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px rgba(242, 30, 52, .3), 0 8px 20px rgba(0, 0, 0, .25);
}
.wheelPreview { display: block; width: 86px; height: 86px; margin: 0 auto 5px; }
.wheelPreview svg { width: 100%; height: 100%; filter: drop-shadow(0 5px 7px #000); }
.wheelInfo { display: block; min-height: 34px; }
.wheelColors { display: flex; gap: 7px; overflow-x: auto; padding: 3px 1px; }
.wheelColor {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  color: #aaa;
  background: #15171d;
  border: 1px solid #2b2e37;
  border-radius: 12px;
}
.wheelColor i { width: 16px; height: 16px; border: 1px solid #777; border-radius: 50%; }
.wheelColor.active { color: #fff; background: #261116; border-color: var(--red); }

.brandChips { display: flex; gap: 7px; margin: 0 -2px 12px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.brandChips::-webkit-scrollbar { display: none; }
.brandChip { flex: 0 0 auto; padding: 8px 13px; color: #aab0ba; background: #15171d; border: 1px solid #2b2e37; border-radius: 20px; font-size: 12px; white-space: nowrap; }
.brandChip.active { color: #fff; background: #261116; border-color: #f21e34; }

.wheelCard { position: relative; }
.wheelPreview.photo { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 7px; }
.wheelPreview.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.favBtn { position: absolute; top: 8px; right: 9px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; font-size: 16px; line-height: 1; color: #fff8; background: #0009; border-radius: 50%; }
.favBtn.on { color: #f21e34; }
.carLine { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; color: #b8c0c9; font-size: 13px; }
.carLine b { color: #fff; }
.carLine button { margin-left: auto; padding: 5px 10px; color: #ff5364; background: none; border: 0; font-size: 12px; }
.wheelSearch { margin: 10px 0 8px !important; }

.cmpBox { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.cmpBox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmpBefore { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmpTag { position: absolute; top: 10px; padding: 5px 11px; font-size: 11px; font-weight: 800; letter-spacing: .6px; color: #fff; background: rgba(5,6,8,.72); border-radius: 14px; pointer-events: none; }
.cmpTag.l { left: 10px; } .cmpTag.r { right: 10px; background: #f21e34; }
.cmpHandle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.6); pointer-events: none; }
.cmpHandle i { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center; font-style: normal; font-size: 16px; color: #111; background: #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0,0,0,.5); }
.editorImage.busy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 250% 100%; animation: shimmer 1.4s linear infinite; pointer-events: none; }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.genBox { display: grid; gap: 8px; justify-items: center; padding: 16px; text-align: center; background: #151820; border: 1px solid #2c303a; border-radius: 15px; }
.genBox small { color: #8e919a; }
.genError { margin-bottom: 9px; padding: 12px 14px; color: #ff9aa5; font-size: 13px; background: #291116; border: 1px solid #54202a; border-radius: 13px; }
.btnRow { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.sharePrev { display: block; width: 100%; max-height: 46vh; margin: 6px 0 12px; object-fit: contain; background: #000; border-radius: 14px; }