.diy-body {
  height: 100vh;
  min-width: 1200px;
  padding-bottom: 0;
  overflow: hidden;
}


.customizePreview {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100%;
  overflow: hidden;
  background: #222222;
  transition: transform 0.55s ease, opacity 0.55s ease, visibility 0.55s ease;
}

.customizePreview--leave {
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.customizePreview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .48);
}

.customizePreviewImg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.customizePreviewText {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 2;
  width: 9.2rem;
  transform: translate(-50%, -50%);
  text-align: center;
}
.customizePreviewText3DPrepair {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 1;
  width: 9.2rem;
  transform: translate(-50%, -50%);
  text-align: center;
}

.customizePreviewText p,.customizePreviewText3DPrepair P {
  color: #ffffff;
  font-size: .32rem;
  line-height: .5rem;
  font-weight: 400;
}
.diy-btn {
  width: 1.17rem;
  height: 0.48rem;
  background: #c72403;
  border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 0.18rem;
  color: #ffffff;
}

.diy-tip {
  margin-top: -0.12rem;
  font-family: Poppins, Poppins;
  font-weight: 400;
  font-size: 0.16rem;
  color: #c72403;
  line-height: 0.24rem;
  margin-bottom: 0.5rem;
}
.diy-tip+p{
    color: var(--red);
}
.diy-page {
  height: 100vh;
  padding-top: 1.1rem;
  background: #dddddd;
  overflow: hidden;
}

.diy-layout {
  height: calc(100vh - 1.1rem);
  display: grid;
  grid-template-columns: calc(100% - 7.7rem) 7.7rem;
}

.diy-preview {
  display: flex;align-items: center;
  position: relative;
  min-width: 0;
  height: 100%;
  background: #dddddd;
  cursor: pointer;
  overflow: hidden;  
}

.diy-preview-img {
  position: relative;
  z-index: 1;
  width: 100%;
/*  height: 100%;*/
  display: block;
  object-fit: contain;
}

.diy-preview-img[src=""] {
  opacity: 0;
}

.diy-panel {
  position: relative;
  z-index: 2;
  height: 100%;
  background: #ffffff;
  overflow: hidden;
}

.diy-panel-scroll {
  height: calc(100vh - 1.1rem - 0.76rem);
  padding: 0.54rem 0.35rem 0.48rem 0.32rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #bcbcbc transparent;
}

.diy-panel-scroll::-webkit-scrollbar {
  width: 0.06rem;
}

.diy-panel-scroll::-webkit-scrollbar-button {
  display: none;
}

.diy-panel-scroll::-webkit-scrollbar-thumb {
  border-radius: 0.06rem;
  background: #bcbcbc;
}

.diy-section {
  margin-bottom: 0.28rem;
}

.diy-truck-section {
  margin-bottom: 0.55rem;
}

.diy-label,
.diy-section h2,
.diy-form-field span {
  display: block;
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 0.18rem;
  line-height: 0.2rem;
  color: #555555;
}

.diy-label,
.diy-section h2 {
  margin-bottom: 0.12rem;
}

.diy-select-wrap {
  position: relative;
}

.diy-select-wrap::after,
.diy-form-field:has(select)::after {
  content: "";
  position: absolute;
  right: 0.18rem;
  bottom: 0.22rem;
  width: 0.09rem;
  height: 0.09rem;
  border-right: 0.02rem solid #9a9a9a;
  border-bottom: 0.02rem solid #9a9a9a;
  transform: rotate(45deg);
  pointer-events: none;
}
.diy-input-wrap input,
.diy-select-wrap select,
.diy-form-field input,
.diy-form-field select {
  width: 100%;
  height: 0.52rem;
  padding: 0 0.12rem;
  border: 0.01rem solid #dedede;
  border-radius: 0.04rem;
  background: #ffffff;
  font-family: Poppins, Poppins;
  font-weight: 400;
  font-size: 0.18rem;
  color: #333333;
  appearance: none;
}

.diy-input-wrap input[name="truck_type"]{
    border: 0.01rem solid #ff4a48;
}

.diy-form-field input {
  font-size: 0.16rem;
}

.diy-select-wrap select {
  color: #666666;
}
.diy-input-wrap input::placeholder,
.diy-form-field input::placeholder {
  color: #c9c9c9;
}

.diy-choice-group {
  display: grid;
  gap: 0.12rem;
}

.diy-input-select {
  position: relative;
}

.diy-input-select input {
  width: 100%;
  height: 0.52rem;
  padding: 0 0.12rem;
  border: 0.01rem solid #dedede;
  border-radius: 0.04rem;
  font-family: Poppins, Poppins;
  font-weight: 400;
  font-size: 0.16rem;
  color: #333333;
  appearance: none;
  background-color: #ffffff;
}

.diy-input-select input:focus {
  border-color: #e33a32;
  outline: none;
}

.diy-dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 4px;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.diy-dropdown-list div {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #333333;
}

.diy-dropdown-list div:hover {
  background-color: #f5f5f5;
}

.diy-dropdown-list div.active {
  background-color: #e33a32;
  color: #ffffff;
}

.diy-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.diy-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.16rem;
}

.diy-choice {
  width: 100%;
  min-width: 0;
  height: 0.52rem;
  padding: 0 0.16rem;
  border: 0.01rem solid #dedede;
  border-radius: 0.04rem;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.12rem;
  text-align: left;
  transition:
    border-color 0.2s,
    color 0.2s,
    background 0.2s;
}

.diy-choice span,
.diy-choice strong {
  font-family: Poppins, Poppins;
  font-size: 0.18rem;
  line-height: 0.18rem;
}

.diy-choice span {
  min-width: 0;
  flex: 1;
  font-weight: 400;
  color: #606060;
}

.diy-choice strong {
  flex: none;
  font-weight: 600;
  color: #222222;
}

.diy-choice.active {
  border-color: #ff4a48;
}

.diy-choice.active p,
.diy-choice.active span,
.diy-choice.active strong {
  color: #f03d3a;
}

.diy-color-choice {
  justify-content: flex-start;
}

.diy-color-choice p{
    font-weight: 600;
    color: #222222;
        font-family: Poppins, Poppins;
    font-size: 0.18rem;
    line-height: 0.18rem;
        margin-left: auto;
}

.diy-color-choice i {
  width: 0.78rem;
  height: 0.3rem;
  flex: none;
  border: 0.01rem solid #d9d9d9;
  border-radius: 0.03rem;
}

.diy-color-choice span {
  flex: none;
  margin-left: 0.2rem;
}

.diy-mix-swatch {
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

.diy-mix-swatch::before,
.diy-mix-swatch::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.diy-mix-swatch::before {
  left: 0;
  border-top: 0.3rem solid #111111;
  border-right: 0.3rem solid transparent;
}

.diy-mix-swatch::after {
  right: 0;
  border-top: 0.3rem solid #111111;
  border-left: 0.3rem solid transparent;
}

.diy-addon-section {
  margin: 0.53rem -0.32rem;
  padding: 0.48rem 0.32rem;
  border-top: 0.01rem solid #d9d9d9;
  border-bottom: 0.01rem solid #d9d9d9;
}

.diy-addon-list {
  gap: 0.13rem;
}

.diy-form-section {
  padding-bottom: 0.28rem;
}

.diy-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.22rem 0.2rem;
}

.diy-form-field {
  position: relative;
  display: block;
  margin-bottom: 0.24rem;
}

.diy-form-field span {
  margin-bottom: 0.1rem;
  font-size: 0.18rem;
  color: #666666;
}

.diy-form-field em {
  margin-right: 0.02rem;
  font-style: normal;
  color: #e33a32;
  font-size: 0.18rem;
}

.diy-full {
  margin-bottom: 0.22rem;
}

.diy-code-field input {
  padding-right: 0.95rem;
}

.diy-code-flex {
  display: flex;
  gap: 0.2rem;
}

.diy-code-field button {
  /* position: absolute; */
  /* right: .16rem; */
  /* bottom: 0; */
  height: 0.52rem;
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 0.18rem;
  color: var(--red);
  text-decoration: underline;
  white-space: nowrap;
}

.diy-address-field {
  margin-top: 0.22rem;
  margin-bottom: 0;
}

.diy-summary {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.76rem;
  padding: 0 0.35rem 0.01rem 0.32rem;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.diy-summary strong,
.diy-summary span,
.diy-summary button {
  font-family: Poppins, Poppins;
  color: #ffffff;
}

.diy-summary strong {
  display: block;
  font-weight: 600;
  font-size: 0.2rem;
  line-height: 0.2rem;
}

.diy-summary span {
  display: block;
  margin-top: 0.05rem;
  font-weight: 400;
  font-size: 0.16rem;
  line-height: 0.17rem;
}

.diy-summary button {
  width: 2.08rem;
  height: 0.48rem;
  border-radius: 0.05rem;
  background: var(--red);
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 0.18rem;
  color: #ffffff;
  transition: background 0.25s;
}

.diy-summary button:hover {
  background: #bd210c;
}

.diy-build-view {
  display: none;
  height: calc(100vh - 1.1rem);
  grid-template-columns: calc(100% - 7.7rem) 7.7rem;
}

.diy-page.show-build .diy-layout {
  display: none;
}

.diy-page.show-build .diy-build-view {
  display: grid;
}

.diy-build-preview {
  position: relative;
  height: 100%;
  background: #dddddd;
  overflow: hidden;
}

.diy-build-preview-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.diy-build-preview-img[src=""] {
  opacity: 0;
}

.diy-build-panel {
  position: relative;
  min-width: 0;
  height: 100%;
  background: #292929;
  overflow: hidden;
}

.diy-build-head {
  height: 1.04rem;
  margin: 0.34rem 0.3rem 0 0.32rem;
  border-bottom: 0.01rem solid #8c8c8c;
}

.diy-build-head h1 {
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 0.28rem;
  line-height: 0.4rem;
  color: #ffffff;
}

.diy-build-scroll {
  height: calc(100vh - 1.1rem - 1.38rem - 1.24rem);
  padding: 0.25rem 0.3rem 0.38rem 0.32rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #858585 #202020;
}

.diy-build-scroll::-webkit-scrollbar {
  width: 0.08rem;
}

.diy-build-scroll::-webkit-scrollbar-button {
  display: none;
}

.diy-build-scroll::-webkit-scrollbar-track {
  background: #202020;
}

.diy-build-scroll::-webkit-scrollbar-thumb {
  border-radius: 0.08rem;
  background: #858585;
}

.diy-build-list {
  margin: 0;
}

.diy-build-item {
  margin-bottom: 0.48rem;
}

.diy-build-item dt {
  margin-bottom: 0.16rem;
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 0.24rem;
  line-height: 0.34rem;
  color: #a2a2a2;
}

.diy-build-item dd {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.24rem;
}

.diy-build-item dd span,
.diy-build-item dd strong {
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 0.2rem;
  line-height: 0.28rem;
}

.diy-build-item dd span {
  min-width: 0;
  color: #ffffff;
}

.diy-build-item dd strong {
  flex: none;
  color: #a7bf79;
}

.diy-build-summary {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.24rem;
  padding: 0.29rem 0.32rem 0 0.3rem;
  background: #000000;
  display: grid;
  grid-template-columns: 2.45rem 2.52rem 1.64rem;
  column-gap: 0.16rem;
  align-items: flex-start;
}

.diy-build-summary p,
.diy-build-summary span,
.diy-build-summary button {
  font-family: Poppins, Poppins;
  color: #ffffff;
}

.diy-build-summary p {
  font-weight: 400;
  font-size: 0.19rem;
  line-height: 0.28rem;
}

.diy-build-summary p strong {
  margin-left: 0.12rem;
  font-family: Poppins, Poppins;
  font-weight: 500;
  font-size: 0.3rem;
  line-height: 0.42rem;
  color: #ffffff;
}

.diy-build-summary span {
  display: block;
  margin-top: 0.08rem;
  font-weight: 400;
  font-size: 0.17rem;
  line-height: 0.24rem;
}

.diy-build-summary button {
  height: 0.48rem;
  border-radius: 0.05rem;
  font-weight: 500;
  font-size: 0.18rem;
  transition: background 0.25s;
}

.diy-build-email {
  border: 0.01rem solid var(--red);
  background: #931d1b;
}

.diy-build-pay {
  background: var(--red);
}

.diy-build-email:hover {
  background: #85201e;
}

.diy-build-pay:hover {
  background: #bd210c;
}

.diy-thanks-panel {
  position: relative;
  display: none;
  min-width: 0;
  height: 100%;
  background: #1f1f1f;
  overflow: hidden;
}

.diy-page.show-thanks .diy-build-panel {
  display: none;
}

.diy-page.show-thanks .diy-thanks-panel {
  display: block;
}

.diy-thanks-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.diy-thanks-img[src=""] {
  opacity: 0;
}

.diy-thanks-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.34) 54%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

.diy-thanks-content {
  position: absolute;
  left: 0.3rem;
  right: 0.3rem;
  top: 3.56rem;
  z-index: 2;
  text-align: center;
}

.diy-thanks-content h2,
.diy-thanks-content p,
.diy-thanks-actions button {
  font-family: Poppins, Poppins;
  color: #ffffff;
}

.diy-thanks-content h2 {
  font-weight: 600;
  font-size: 0.46rem;
  line-height: 0.64rem;
}

.diy-thanks-content p {
  margin-top: 0.2rem;
  font-weight: 400;
  font-size: 0.3rem;
  line-height: 0.42rem;
}

.diy-thanks-actions {
  position: absolute;
  left: 0.32rem;
  right: 0.32rem;
  bottom: 0.27rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.diy-thanks-actions button {
  height: 0.48rem;
  border-radius: 0.05rem;
  font-weight: 500;
  font-size: 0.18rem;
  transition:
    background 0.25s,
    border-color 0.25s;
}

.diy-thanks-back {
  width: 2.48rem;
  border: 0.01rem solid var(--red);
  background: rgba(0, 0, 0, 0.16);
}

.diy-thanks-pay {
  width: 1.64rem;
  background: var(--red);
}

.diy-thanks-back:hover {
  border-color: #ff3b22;
  background: rgba(145, 29, 27, 0.35);
}

.diy-thanks-pay:hover {
  background: #bd210c;
}


.pp3-learn-modal {
  position: fixed;
  inset: 0;
  z-index: 1310;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s, visibility .25s;
}

.pp3-learn-modal.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.pp3-learn-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .48);
}

.pp3-learn-box {
  position: relative;
  z-index: 2;
  width: 9.6rem;
  height: 5rem;
  margin-top: 2.9rem;
  border-radius: .1rem;
  background: #ffffff;
  box-shadow: 0 .06rem .2rem rgba(0, 0, 0, .26);
  display: grid;
  grid-template-columns: 5rem 4.6rem;
  overflow: hidden;
}

.pp3-learn-pic {
  height: 5rem;
  background: #fff;
}

.pp3-learn-pic img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pp3-learn-pic img[src=""] {
  opacity: 0;
}

.pp3-learn-content {
  position: relative;
  height: 5rem;
  background: #ffffff;
}

.pp3-learn-close {
  position: absolute;
  right: .18rem;
  top: .18rem;
  z-index: 3;
  width: .28rem;
  height: .28rem;
}

.pp3-learn-close::before,
.pp3-learn-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .26rem;
  height: .02rem;
  background: #666666;
}

.pp3-learn-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.pp3-learn-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.pp3-learn-scroll {
  height: 100%;
  padding: .28rem .46rem .32rem .3rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #b5b5b5 transparent;
}

.pp3-learn-scroll::-webkit-scrollbar {
  width: .06rem;
}

.pp3-learn-scroll::-webkit-scrollbar-button {
  display: none;
}

.pp3-learn-scroll::-webkit-scrollbar-thumb {
  border-radius: .06rem;
  background: #b5b5b5;
}

.pp3-learn-scroll h2 {
  padding-right: .32rem;
  font-family: Poppins, Poppins;
  font-weight: 600;
  font-size: .26rem;
  line-height: .36rem;
  color: #202020;
}

.pp3-learn-weight {
  margin-top: .12rem;
  font-family: Poppins, Poppins;
  font-weight: 400;
  font-size: .18rem;
  line-height: .28rem;
  color: #333333;
}

.pp3-learn-weight span {
  margin-left: .06rem;
  font-size: .16rem;
  color: #333333;
}

.pp3-learn-scroll article {
  margin-top: .1rem;
  white-space: pre-line;
}

.pp3-learn-scroll article p {
  margin-top: .28rem;
  font-family: Poppins, Poppins;
  font-weight: 400;
  font-size: .18rem;
  line-height: .28rem;
  color: #333333;
}

.pp3-learn-scroll article p:first-child {
  margin-top: 0;
}


/* 评价卡片之间的间距 */
.evaluate-container .review-list {
    gap: 0.16rem;
}

/* 卡片布局：用户信息、产品信息、评价内容 */
.evaluate-container .review-item {
    position: relative;
    display: grid;
    grid-template-columns: 2.2rem 1.4rem minmax(0, 1fr);
    column-gap: 0.28rem;
    min-height: 3.7rem;
    padding: 0.25rem;
    border: 1px solid #dedede;
    border-radius: 0.1rem;
    background: #fff;
}

/* 原样式会去掉最后一条的底边和留白，这里补回来 */
.evaluate-container .review-item:last-child {
    border-bottom: 1px solid #dedede;
    padding-bottom: 0.25rem;
}


/* 用户信息 */
.evaluate-container .userinfo {
    min-width: 0;
    font-family: Poppins, sans-serif;
    line-height: 1.6;
}

/* 用户名上方的红色短线 */
.evaluate-container .userinfo::before {
    content: "";
    display: block;
    width: 0.36rem;
    height: 0.05rem;
    margin-bottom: 0.1rem;
    background: var(--red, #ab1f24);
}

.evaluate-container .userinfo > div:first-child {
    overflow-wrap: anywhere;
}

/* 国家和国旗放在同一行 */
.evaluate-container .userinfo > div:nth-child(2) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.08rem;
    margin-top: 0.04rem;
    color: #999;
}

/* 国旗排到国家名称前面，保留原来的国旗尺寸 */
.evaluate-container .userinfo > div:nth-child(2) > img {
    order: -1;
    flex-shrink: 0;
    margin-left: 0 !important;
}

/* 产品信息左对齐 */
.evaluate-container .product-section {
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    padding-top: 0.1rem;
}

/* 两行产品文字放到图片前面 */
.evaluate-container .product-section .product-name {
    order: 1;
    max-width: 100%;
    text-align: left;
    overflow-wrap: anywhere;
}

/* 第一行产品型号，例如 TP07B */
.evaluate-container .product-img-box + .product-name {
    font-size: 0.22rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.03rem;
}

/* 产品快照放在型号、名称下方 */
.evaluate-container .product-img-box {
    order: 2;
    width: 100%;
    height: 1.5rem;
    margin-top: 0.2rem;
    margin-bottom: 0;
}

/*
 * 评价内容保留原来的字体、星级和客户图片样式。
 * 右侧留出日期、点赞的位置。
 */
.evaluate-container .review-content {
    min-width: 0;
    padding: 0.14rem 2rem 0 0;
}

/* 避免连续长文字撑开卡片 */
.evaluate-container .review-text {
    overflow-wrap: anywhere;
}

/* 客户图片较多时换行，保留原来的图片尺寸 */
.evaluate-container .review-images {
    flex-wrap: wrap;
}

/* 日期移动到卡片右上角 */
.evaluate-container .review-date {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    margin: 0;
    white-space: nowrap;
}

/* 可选的点赞展示 */
.evaluate-container .review-like {
    position: absolute;
    top: 1.65rem;
    right: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: #999;
    font-family: Poppins, sans-serif;
}

.evaluate-container .review-like svg {
    display: block;
    width: 0.23rem;
    height: 0.23rem;
    color: #bbb;
}


/* 弹窗基础 */
.feedbackModal { display: none; }
.feedbackModal.show { display: block; }
.feedbackModal-mask {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9998;
}
.feedbackModal-box {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 850px; max-width: 92%; max-height: 85vh;
    background: #fff; border-radius: 12px; padding: 35px;
    z-index: 9999; box-sizing: border-box;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* 头部 */
.modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 20px;
}
.quote-icon svg { display: block; }
.feedbackModal-close {
    border: 0; background: none; cursor: pointer;
    font-size: 32px; line-height: 1; color: #999; padding: 0;
    transition: color 0.3s;
}
.feedbackModal-close:hover { color: #333; }

/* 主体左右布局 */
.modal-body {
    display: flex; gap: 30px; margin-bottom: 25px; flex: 1; overflow: hidden;
}
.modal-left {
    flex: 0 0 380px; /* 左侧图片固定宽度 */
}
.modal-left img {
    width: 100%; height: auto; border-radius: 8px; object-fit: cover;
    display: block;
}
.modal-right {
    flex: 1; max-height: 400px; overflow-y: auto; padding-right: 15px;
}
/* 自定义滚动条，匹配截图效果 */
.modal-right::-webkit-scrollbar { width: 6px; }
.modal-right::-webkit-scrollbar-track { background: transparent; }
.modal-right::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

.modal-text {
    font-size: 15px; line-height: 1.8; color: #333;
    white-space: pre-wrap; /* 关键：保留换行符 */
    word-break: break-word;
}
/* 弹窗基础 */
.feedbackModal { display: none; }
.feedbackModal.show { display: block; }
.feedbackModal-mask {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 9998;
}
.feedbackModal-box {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 900px; max-width: 92%; max-height: 85vh;
    background: #fff; border-radius: 12px; padding: 35px;
    z-index: 9999; box-sizing: border-box;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

/* 头部 */
.modal-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 10px;
}
.quote-icon svg { display: block; }
.feedbackModal-close {
    border: 0; background: none; cursor: pointer;
    font-size: 32px; line-height: 1; color: #999; padding: 0;
    transition: color 0.3s;
}
.feedbackModal-close:hover { color: #333; }

/* 主体布局：左图右文 */
.modal-body {
    display: flex; gap: 35px; flex: 1; overflow: hidden; /* 关键：隐藏溢出，让右侧单独滚动 */
    min-height: 0; /* 配合 flex 容器防止溢出 */
}

/* 左侧：图片独立一栏 */
.modal-left {
    flex: 0 0 380px; /* 固定宽度 240px，禁止缩放 */
    align-self: flex-start; /* 图片靠顶部对齐 */
}
.modal-left img {
    width: 100%; height: auto; border-radius: 8px; object-fit: cover;
    display: block;
}

/* 右侧：内容区 */
.modal-right {
    flex: 1;
    display: flex; flex-direction: column;
    min-width: 0; /* 防止文本溢出 */
    min-height: 0;
}

/* 右侧文本：独立滚动 */
.modal-text {
    flex: 1; /* 占据剩余空间 */
    overflow-y: auto; /* 溢出时滚动 */
    font-size: 15px; line-height: 1.8; color: #333;
    white-space: pre-wrap; word-break: break-word;
    padding-right: 15px;
    margin-bottom: 20px;
}
/* 自定义滚动条 */
.modal-text::-webkit-scrollbar { width: 6px; }
.modal-text::-webkit-scrollbar-track { background: transparent; }
.modal-text::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* 底部信息区（固定在右侧底部） */
.modal-footer {
    flex-shrink: 0; /* 禁止被压缩 */
    display: flex; justify-content: space-between; align-items: flex-end;
    border-top: 1px solid #f0f0f0; padding-top: 15px;
}

/* 左侧标签 */
.modal-tags { display: flex; align-items: center; gap: 12px; }
.tag {
    background: #f0f2f5; padding: 6px 12px; border-radius: 4px;
    font-size: 13px; color: #333; cursor: pointer;
    transition: background 0.3s;
}
.tag:hover { background: #e4e6eb; }
.verified { font-size: 13px; color: #666; }

/* 右侧作者信息 */
.modal-author { text-align: right; }
.modal-author h4 {
    font-size: 15px; font-weight: bold; margin: 0 0 5px 0; color: #111;
}
.modal-author p {
    font-size: 13px; color: #888; font-style: italic; margin: 0;
}

/* 星星（在右侧最下方） */
.modal-stars {
    flex-shrink: 0; /* 禁止被压缩 */
    margin-top: 15px;
}
.modal-stars .stars {
    color: #e53935; font-size: 16px; letter-spacing: 2px;
}

#feedbackModal .modal-thumbnails { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
#feedbackModal .modal-thumbnails:empty { display: none; }
#feedbackModal .modal-thumbnails button { flex: 0 0 56px; height: 56px; padding: 2px; border: 1px solid #ddd; border-radius: 4px; background: #fff; cursor: pointer; }
#feedbackModal .modal-thumbnails button[aria-pressed="true"] { border-color: #ab1f24; }
#feedbackModal .modal-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 较窄的屏幕 */
@media (max-width: 1199px) {
    .evaluate-container .review-item {
        grid-template-columns: 1.7rem 1.4rem minmax(0, 1fr);
        column-gap: 0.2rem;
    }

    /* 日期在正文上方，给正文留出空间 */
    .evaluate-container .review-content {
        padding: 0.5rem 0 0.35rem;
    }

    .evaluate-container .review-like {
        top: auto;
        bottom: 0.2rem;
        right: 0.25rem;
    }
}

/* 手机布局 */
@media (max-width: 767px) {
    .evaluate-container {
        width: calc(100% - 32px);
    }

    .evaluate-container .review-item {
        grid-template-columns: minmax(0, 1fr) 1.4rem;
        gap: 0.2rem;
        min-height: 0;
    }

    .evaluate-container .userinfo {
        grid-column: 1;
        grid-row: 1;
    }

    .evaluate-container .product-section {
        grid-column: 2;
        grid-row: 1;
    }

    .evaluate-container .review-content {
        grid-column: 1 / -1;
        padding: 0 0 0.45rem;
    }

    .evaluate-container .review-date {
        top: auto;
        right: auto;
        left: 0.25rem;
        bottom: 0.2rem;
        max-width: calc(100% - 1.2rem);
        white-space: normal;
    }
}