* 
    header {
      text-align: center;
      margin-bottom: 30px;
      position: relative;
    }

    h1 {
      font-size: 2.8rem;
      margin-bottom: 10px;
      background: linear-gradient(45deg, #ff9a9e, #fad0c4, #a1c4fd);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .subtitle {
      font-size: 1.2rem;
      color: #aaa;
      max-width: 700px;
      margin: 0 auto;
    }

    .notice-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
}
.notice-content {
  background: rgba(25, 25, 35, 0.95);
  border-radius: 20px;
  padding: 30px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}
.notice-scroll {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 15px;
  margin-bottom: 25px;
  line-height: 1.8;
}
.notice-scroll p {
  margin-bottom: 15px;
}
.notice-scroll h3 {
  color: #8f94fb;
  margin: 25px 0 15px;
}
#confirm-btn {
  background: linear-gradient(45deg, #4e54c8, #8f94fb);
  display: block;
  margin: 0 auto;
  font-size: 1.1rem;
  padding: 12px 40px;
}

body.modal-open {
  overflow: hidden;
}
/* 调整滚动条样式 */
.notice-scroll::-webkit-scrollbar {
  width: 8px;
}
.notice-scroll::-webkit-scrollbar-track {
  background: rgba(40, 40, 60, 0.5);
  border-radius: 4px;
}
.notice-scroll::-webkit-scrollbar-thumb {
  background: rgba(106, 123, 212, 0.7);
  border-radius: 4px;
}
.notice-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(106, 123, 212, 0.9);
}

    .dimension-tag {
      display: inline-block;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.85rem;
      margin: 5px 0 15px;
      font-weight: bold;
    }

    .materialism {
      background: rgba(78, 84, 200, 0.3);
    }

    .rationalism {
      background: rgba(106, 176, 76, 0.3);
    }

    .determinism {
      background: rgba(220, 120, 50, 0.3);
    }

    .optimism {
      background: rgba(200, 80, 150, 0.3);
    }

    .test-container {
      display: none;
      transition: all 0.5s ease;
    }

    .question-container {
      background: rgba(40, 40, 60, 0.7);
      border-radius: 15px;
      padding: 25px;
      margin-bottom: 25px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .question-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .question-text {
      font-size: 1.4rem;
      font-weight: 500;
    }

    .question-number {
      background: #4e54c8;
      color: white;
      padding: 8px 15px;
      border-radius: 20px;
      font-size: 0.9rem;
      display: none;
    }


    .option input {
      margin-right: 12px;
      margin-top: 5px;
    }

    .option-label {
      font-size: 1.1rem;
      line-height: 1.5;
    }

    .progress-container {
      margin: 25px 0;
    }

    .progress-text {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 0.9rem;
      color: #aaa;
    }

    .progress-bar {
      height: 10px;
      background: rgba(100, 100, 150, 0.3);
      border-radius: 5px;
      overflow: hidden;
    }

    .progress {
      height: 100%;
      background: linear-gradient(90deg, #4e54c8, #8f94fb);
      border-radius: 5px;
      transition: width 0.5s ease;
    }

    .result-container {
      display: none;
      text-align: center;
      animation: fadeIn 1s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .result-title {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: #8f94fb;
    }

    .philosophy-type-card {
      background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
      border-radius: 15px;
      padding: 30px;
      margin: 30px auto;
      max-width: 600px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      position: relative;
    }

    .type-card-dimension-combination {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2); /* 顶部分隔线 */
  text-align: center;
  font-size: 1.4rem; /* 比描述稍大 */
  font-weight: bold;
  letter-spacing: 0.5px; /* 增加字母间距提升可读性 */
  color: rgba(255, 255, 255, 0.85); /* 比白色稍淡 */
}

    .type-code {
      font-size: 3.5rem;
      font-weight: bold;
      margin-bottom: 15px;
      color: white;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .type-name {
      font-size: 2rem;
      margin-bottom: 15px;
      color: white;
    }

    .type-description {
      font-size: 1.1rem;
      line-height: 1.7;
      margin-bottom: 20px;
    }

    .type-details {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      margin: 25px 0;
      text-align: left;
    }

    .type-detail {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      padding: 20px;
    }

    .type-detail h3 {
      color: #ffcc00;
      margin-bottom: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      padding-bottom: 8px;
    }

    .chart-container {
      max-width: 600px;
      margin: 30px auto;
      background: rgba(30, 30, 50, 0.7);
      padding: 20px;
      border-radius: 15px;
      position: relative;
      height: 500px;
    }

    .result-description {
      background: rgba(40, 40, 60, 0.7);
      border-radius: 15px;
      padding: 25px;
      margin: 25px 0;
      text-align: left;
    }

    .result-description h3 {
      color: #8f94fb;
      margin-bottom: 15px;
    }

    .result-description p {
      margin-bottom: 15px;
      line-height: 1.7;
    }

    .dimension-combination {
      font-size: 1.4rem;
      background: rgba(106, 123, 212, 0.2);
      padding: 10px 20px;
      border-radius: 10px;
      display: inline-block;
      margin: 15px 0;
      font-weight: bold;
    }

    .restart-btn {
      margin: 30px auto;
      padding: 15px 40px;
      font-size: 1.2rem;
    }

    .dimensions {
      display: grid;
      grid-template-columns: repeat(2, 1fr); 
      gap: 20px;
      margin: 30px 0;
    }

    .dimension {
      background: rgba(50, 50, 70, 0.7);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .dimension:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      filter: brightness(1.15);
    }

    .dimension h4 {
      color: #8f94fb;
      margin-bottom: 10px;
      font-size: 1.1rem;
    }

    .dimension-value {
      font-size: 2rem;
      font-weight: bold;
      color: #fdbbbd;
      margin: 10px 0;
    }

    .dimension-direction {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      padding: 0 10px;
      font-size: 0.9rem;
      color: #aaa;
    }

    .direction-positive {
      color: #8f94fb;
    }

    .direction-negative {
      color: #ff9a9e;
    }

    .intro-container {
      text-align: center;
      padding: 30px;
    }

    .intro-text {
      max-width: 700px;
      margin: 20px auto 30px;
      font-size: 1.1rem;
      line-height: 1.8;
    }

    .start-btn {
      margin: 20px auto;
      font-size: 1.2rem;
      padding: 15px 50px;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 25px;
      margin: 40px 0;
    }

    .feature {
      background: rgba(40, 40, 60, 0.7);
      border-radius: 15px;
      padding: 25px;
      text-align: center;
    }

    .feature i {
      font-size: 2.5rem;
      color: #8f94fb;
      margin-bottom: 20px;
    }

    .feature h3 {
      margin-bottom: 15px;
      color: #ff9a9e;
    }

    .philosophy-quote {
      font-style: italic;
      margin: 15px 0;
      color: #aaa;
      border-left: 3px solid #6a7bd4;
      padding-left: 15px;
    }

    .type-cards-container {
      background: rgba(40, 40, 60, 0.7);
      border-radius: 15px;
      padding: 25px;
      margin: 30px 0;
    }
    
    .type-cards-title {
      text-align: center;
      margin-bottom: 20px;
      color: #8f94fb;
      font-size: 1.8rem;
    }
    
    .type-cards-subtitle {
      text-align: center;
      margin-bottom: 25px;
      color: #aaa;
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .type-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;
    }
    
.type-card {
  border-radius: 12px;
  padding: 6px;
  text-align: center;
  transition: filter 0.3s ease, transform 0.3s ease; /* 优化过渡效果 */
  cursor: default;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #f0f0f0;
}
/* 添加伪元素用于平滑的悬停效果 */
.type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  z-index: -1;
  transition: filter 0.3s ease;
}
.type-card:hover {
  filter: brightness(1.2); 
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
    
    .type-code-small {
      font-size: 1.5rem;
      font-weight: bold;
      color: #ff9a9e;
      margin-bottom: 8px;
    }
    
    .type-name-small {
      font-size: 0.95rem;
      color: #f0f0f0;
    }

    .ambiguous-note {
      background: rgba(255, 204, 0, 0.1);
      border-radius: 12px;
      padding: 20px;
      margin: 25px auto;
      text-align: left;
      max-width: 600px;
    }
    
    .ambiguous-note h3 {
      color: #ffcc00;
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .ambiguous-note ul {
      padding-left: 20px;
      margin: 15px 0;
    }
    
    .ambiguous-note li {
      margin-bottom: 8px;
      font-weight: bold;
      color: #ffcc00;
    }

    .radar-labels {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      padding: 0 15px;
      font-size: 0.85rem;
    }
    
    .radar-label-left {
      color: #ff9a9e;
      text-align: left;
    }
    
    .radar-label-right {
      color: #8f94fb;
      text-align: right;
    }

    .neutral-line {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: rgba(255, 255, 255, 0.3);
      transform: translateY(-50%);
    }

    .neutral-text {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      color: #aaa;
      font-size: 0.8rem;
    }
    
    .scores-display {
      background: rgba(40, 40, 60, 0.7);
      border-radius: 12px;
      padding: 20px;
      margin: 25px auto;
      text-align: center;
      max-width: 600px;
    }
    
    .scores-display h3 {
      color: #8f94fb;
      margin-bottom: 15px;
    }
    
    .score-row {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .score-dimension {
      font-weight: bold;
      color: #f0f0f0;
    }
    
    .score-value {
      font-weight: bold;
    }
    
    .score-positive {
      color: #8f94fb;
    }
    
    .score-negative {
      color: #ff9a9e;
    }
    
    .score-neutral {
      color: #ffcc00;
      font-weight: bold;
    }

    @media (max-width: 768px) {

      h1 {
        font-size: 2.2rem;
      }

      .dimension-combination {
        font-size: 1.1rem;
      }

      .type-code {
        font-size: 2.5rem;
      }

      .type-name {
        font-size: 1.6rem;
      }
      
      .dimensions {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
      }
      
      .type-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
  
      .type-cards-container {
        padding: 6px; /* 移动端进一步缩小 */
        margin: 10px 0;
      }

      .feature {
        padding: 10px;
      }    

      .notice-content {
    padding: 20px; /* 减少内边距 */
  }
 
  .notice-content h2 {
    font-size: 1.4rem; /* 标题减小 */
    margin-bottom: 15px;
  }
 
  .notice-scroll {
    max-height: 50vh; /* 增大垂直空间 */
  }
 
  .notice-scroll p {
    font-size: 0.9rem; /* 正文减小 */
    margin-bottom: 12px; /* 段落间距减小 */
    line-height: 1.6; /* 保持可读性 */
  }
 
  #confirm-btn {
    font-size: 1rem; /* 按钮文字减小 */
    padding: 12px 30px; /* 按钮尺寸调整 */
  }
  }

  @media (max-width: 480px) {
  .notice-content {
    width: 95%; /* 宽度增大 */
    padding: 15px;
  }
 
  .notice-scroll p {
    font-size: 0.7rem; /* 进一步减小 */
    line-height: 1.4;
    margin-bottom: 5px;
  }
  
  .notice-scroll {
    max-height: 40vh; 
  }

  #confirm-btn {
    font-size: 0.8rem; /* 按钮文字减小 */
    padding: 5px 5px; /* 按钮尺寸调整 */
  }
}