@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans TC', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .progress-bar {
            transition: width 0.5s ease-in-out;
        }
        
        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn-secondary {
            background: #f3f4f6;
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            transform: translateY(-2px);
            background: #e5e7eb;
        }
        
        .value-chip {
            transition: all 0.2s ease;
        }
        
        .value-chip:hover {
            transform: scale(1.05);
        }
        
        .comparison-card {
            transition: all 0.3s ease;
        }
        
        .comparison-card:hover {
            transform: scale(1.02);
        }
        
        .category-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .category-card.selected {
            border: 3px solid #764ba2;
        }
        
        .back-button {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 0.85rem;
            color: #9ca3af;
            background: transparent;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .back-button:hover {
            background: #f3f4f6;
            color: #4b5563;
        }
        
        .result-image {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .text-gray-800 {
          color: #1F2937 !important; /* Tailwind Gray 800 */
        }
        
        .text-gray-600 {
          color: #4B5563 !important; /* Tailwind Gray 600 */
        }
        
        .text-gray-700 {
          color: #374151 !important; /* Tailwind Gray 700 */
        }
        
        .text-purple-600 {
          color: #8B5CF6 !important; /* Tailwind Purple 600 */
        }
        
        .bg-gray-200 {
          background-color: #E5E7EB !important; /* Tailwind Gray 200 */
        }
        
        /* bg-gradient-to-r from-yellow-400 to-yellow-600 強制用純色近似，可選擇中間色或兩端色 */
        /* 這裡用黃色漸層兩端色分別覆蓋，或只用中間色近似 */
        .bg-gradient-to-r,
        .from-yellow-400,
        .to-yellow-600 {
          background: linear-gradient(to right, #FACC15, #CA8A04) !important; /* yellow-400, yellow-600 */
        }
        /* 如果你只想用單一色近似，可以選用 #FACC15 或 #EAB308 */
        
        
html {
  background: #f5f5f5; /* 請換成你的背景色 */
}

@media (max-width: 430px) {
  body {
    transform: scale(calc(100vw / 430));
    transform-origin: top left;
    width: 430px;
    min-width: 430px;
    overflow-x: auto;
    background: transparent;
  }
  span {
    font-size: 80% !important; /* 或 font-size: 0.5em; 或 0.5rem; 視你的基準而定 */
  }
}

@media (max-width: 375px) {
  body {
    transform: scale(calc(100vw / 375));
    width: 375px;
    min-width: 375px;
  }
}