.rt-swatch-studio { width: 100%; max-width: 85%; margin: 80px auto 0; padding: 0 20px; box-sizing: border-box; clear: both; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    .rt-swatch-studio * { box-sizing: border-box; }
    .rt-swatch-studio .rt-header { text-align: center; margin-bottom: 50px; }
    .rt-swatch-studio .rt-header h2 { font-size: 36px; letter-spacing: 2px; color: #111111; margin: 0 0 12px 0; font-weight: 400; line-height: 1.2; }
    .rt-swatch-studio .rt-header p { font-size: 18px; color: #777777; letter-spacing: 0.5px; margin: 0; line-height: 1.5; }
    .rt-swatch-studio .rt-main-content { display: flex; gap: 60px; align-items: stretch; }
    
    @media (max-width: 900px) { 
      .rt-swatch-studio .rt-main-content { flex-direction: column; gap: 40px; } 
      .rt-swatch-studio .rt-grid-container { max-height: 260px; overflow-y: auto; padding-bottom: 10px; }
      .rt-swatch-studio .rt-header h2 { font-size: 24px; } 
      .rt-swatch-studio .rt-header p { font-size: 14px; } 
      .rt-swatch-studio .rt-tab-trigger { font-size: 12px; padding: 8px 12px; } 
      .rt-swatch-studio .rt-swatch-meta { font-size: 12px; } 
      .rt-swatch-studio .rt-instruction-text { font-size: 12px; margin-bottom: 15px; } 
      .rt-swatch-studio .rt-card-code { font-size: 20px; } 
      .rt-swatch-studio .rt-card-name { font-size: 15px; } 
      .rt-swatch-studio .rt-color-disclaimer { font-size: 10px; } 
      .rt-swatch-studio .rt-cta-action { font-size: 14px; padding: 12px 16px; } 
    }
    
    .rt-swatch-studio .rt-controls-panel { flex: 1.3; width: 100%; }
    .rt-swatch-studio .rt-tabs-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; border-bottom: 1px solid #e0e0e0; padding-bottom: 15px; }
    .rt-swatch-studio .rt-tab-trigger { background: transparent; border: 2px solid #d0d0d0; padding: 10px 16px; font-size: 14px; border-radius: 4px; cursor: pointer; color: #555555; transition: all 0.2s ease; letter-spacing: 0.5px; font-weight: 500; }
    .rt-swatch-studio .rt-tab-trigger:hover { background: #f0f0f0; color: #111111; }
    .rt-swatch-studio .rt-tab-trigger.rt-tab-active { background: #111111; color: #ffffff; border-color: #111111; }
    .rt-swatch-studio .rt-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 15px; margin-bottom: 40px; min-height: 220px; }
    .rt-swatch-studio .rt-swatch-cell { display: flex; flex-direction: column; align-items: center; cursor: pointer; padding: 4px; border-radius: 4px; transition: background-color 0.2s ease; }
    .rt-swatch-studio .rt-swatch-cell:hover { background-color: #f5f5f5; }
    .rt-swatch-studio .rt-circle-swatch { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 0 0 1px #dcdcdc; transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .rt-swatch-studio .rt-swatch-cell:hover .rt-circle-swatch { transform: scale(1.1); }
    .rt-swatch-studio .rt-swatch-cell.rt-cell-selected .rt-circle-swatch { box-shadow: 0 0 0 2px #111111; transform: scale(1.1); }
    .rt-swatch-studio .rt-swatch-meta { font-size: 13px; color: #555555; margin-top: 8px; text-align: center; font-weight: 500; letter-spacing: 0.5px; }
    
    .rt-swatch-studio .rt-cta-action { display: block; width: 100%; text-align: center; background-color: transparent; color: #111111 !important; border: 1px solid #111111; padding: 16px 20px; font-size: 15px; letter-spacing: 1.5px; text-decoration: none !important; border-radius: 4px; font-weight: 600; transition: all 0.25s ease; }
    .rt-swatch-studio .rt-cta-action:hover { background-color: #111111; color: #ffffff !important; }
    
    .rt-swatch-studio .rt-silhouette-display {flex: 1; 
      width: 100%; 
      display: flex; 
      flex-direction: column; 
      align-items: center; 
      /* 将原来的 center 改为 flex-start，强制元素靠顶部对齐 */
      justify-content: flex-start; 
      background-color: #fafafa; 
      border: 1px solid #f0f0f0; 
      border-radius: 8px; 
      /* 缩小上方的内边距，原来是 50px */
      padding: 30px 30px 50px 30px; 
      text-align: center; }
    .rt-swatch-studio .rt-feather-mask-wrapper { width: 240px; height: 320px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.12)); }
    .rt-swatch-studio .rt-feather-color-fill { width: 100%; height: 100%; background-color: #F7F7F7; transition: background-color 0.35s ease; -webkit-mask-image: url("//ueeshop.ly200-cdn.com/u_file/UPAX/UPAX952/2609/04/photo/f2.png"); mask-image: url("//ueeshop.ly200-cdn.com/u_file/UPAX/UPAX952/2609/04/photo/f2.png"); -webkit-mask-size: 120%; mask-size: 120%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; transform: rotate(-10deg); }
    
    .rt-swatch-studio .rt-instruction-text { font-size: 13px; color: #888888; margin-bottom: 25px; }
    .rt-swatch-studio .rt-card-details { width: 100%; border-top: 1px solid #eaeaea; padding-top: 30px; }
    .rt-swatch-studio .rt-card-code { font-family: "Playfair Display", "Times New Roman", Georgia, serif; font-size: 24px; font-weight: 700; color: #111111; letter-spacing: 1px; margin-bottom: 8px; }
    .rt-swatch-studio .rt-card-name { font-size: 18px; color: #555555; margin-bottom: 10px; font-weight: 500; }
    
    .rt-swatch-studio .rt-color-disclaimer { font-size: 11px; color: #a0a0a0; font-style: italic; margin-top: 16px; line-height: 1.5; letter-spacing: 0.3px; max-width: 90%; margin-left: auto; margin-right: auto; }