*{box-sizing: border-box;}
:root {
  --ranzt-primary-color: #ff5a5a;
  --ranzt-secondary-color: #d74141;
  --ranzt-bg-gradient: rgba(0, 0, 0, 0) linear-gradient(120deg, #f66896 0%, #ff8565 100%);
  --ranzt-bg-hover-gradient: rgba(0, 0, 0, 0) linear-gradient(120deg, #ff8565 0%, #f66896 100%);
  --ranzt-shadow: 0 2px 8px rgba(242, 0, 0, 0.2);
  --ranzt-text-color: #666;
  --ranzt-bg-color: #f8f8f8;
  --ranzt-border-color: #eee;
  --ranzt-highlight-color: red;
  --ranzt-base-font-size: 16px; /* 基础字体大小 */
  --ranzt-border-radius: 10px; 
}
/* 暗夜模式下的样式 */
html[class*="dark"],
html[class*="night"],
body[class*="dark"],
body[class*="night"],
html[data-theme*="dark"],
body[data-theme*="dark"]{
  --ranzt-bg-color: #242a31;
  --ranzt-border-color: #35393E;
}
.recommendation-list {
  padding:.5rem 0 !important;
}
.recommendation-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1.25rem !important; /* 20px */
  background: var(--ranzt-bg-color) !important;
  border-radius: var(--ranzt-border-radius) !important;
  border: 1px solid var(--ranzt-border-color)!important;
}
.recommendation-image {
  flex: 0 1 auto !important;
  margin-right: 1.25rem !important; /* 20px */  
  display: flex!important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}
.recommendation-image img {
  object-fit: cover;
  width: auto !important;
  height: 3.75rem !important; /* 60px */
  border-radius: var(--ranzt-border-radius) !important;
}
.recommendation-content {
  flex: 1 !important;
}
.recommendation-title {
  font-size: 1.125rem !important; /* 18px */
  font-weight: bold !important;
  margin-bottom: 0.2rem !important;
  line-height: 1.2;
}
.recommendation-title span {
  font-size: 0.875rem !important; /* 14px */
  margin-left: 0.625rem !important; /* 10px */
  background: linear-gradient(to right, #ff8a00, #e52e71);
  background-clip: text !important;
  -webkit-background-clip: text; 
  color: transparent !important; 
}
.recommendation-description {
  font-size: 0.875rem !important; /* 14px */
  opacity: .7!important;
  line-height: 1.4!important;
}
.recommendation-button{
  margin-left: 0.625rem !important; /* 10px */
}
.recommendation-button a {
  cursor: pointer!important;
  display: inline-block !important;
  padding: 0.5rem 1rem !important; /* 8px 16px */
  background: var(--ranzt-bg-gradient) !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: calc(var(--ranzt-border-radius) - 5px) !important;
  box-shadow:var(--ranzt-shadow)!important;
  transition: background-color 0.3s ease, transform 0.3s ease !important;

}
.recommendation-button a:hover {
  background: var(--ranzt-bg-hover-gradient) !important;
  border:none!important;
  transform: scale(1.05);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .recommendation-list {
    width: calc(100% + 1.25rem) !important;/* 20px */
    margin-left: -0.625rem !important;/* 10px */
  }  
  .recommendation-item {
    display: flex !important;
    align-items: center !important;
    padding: 0.625rem !important; /* 10px */
  }
  .recommendation-image {
    margin-right: 0.625rem !important; /* 10px */
  }
  .recommendation-content {
    display: flex!important;
    /*flex: 0 0 52%!important;*/
    flex-direction: column !important;
  }  
  .recommendation-image img {
    border-radius: calc(var(--ranzt-border-radius) - 5px) !important;
    width: 3rem !important; /* 48px */
    height: auto !important;
  }    
  .recommendation-button{
    margin-left: 0.625rem !important;/* 10px */
  }
  .recommendation-button a{
    font-size: calc(var(--ranzt-base-font-size) - 3px) !important;
    padding: 0.5rem!important;
  }
  .recommendation-description {
    font-size: calc(var(--ranzt-base-font-size) - 3px) !important;
    /*height:1.2rem!important;*/
    overflow: hidden!important;
    text-overflow: ellipsis!important;
  }  
  .recommendation-title {
    font-size: 1rem !important;
  }
}
/* ranzt_imp_toast样式 */
.ranzt_imp_toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 15px 20px;
    white-space:nowrap;
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1000;
}
.ranzt_imp_toast.show {
    opacity: 1;
}
.ranzt_imp_toast svg {
    margin-right: 10px;
    width: 22px;
    height:22px;
}
.ranzt_imp_toast .message {
    font-size: 16px;
}