/* ========== 成分檢測區域 ========== */
.ingredient-checker {
    padding: 16px;
}

.ingredient-header h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.ingredient-desc {
    font-size: 13px;
    color: #888;
    margin-bottom: 16px;
}

/* 輸入區 */
.ingredient-input-area {
    margin-bottom: 16px;
}

.ingredient-input-area textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 14px;
    resize: none;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.ingredient-input-area textarea:focus {
    outline: none;
    border-color: #6C63FF;
}

.ingredient-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.ingredient-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
}

.ingredient-btn.primary {
    background: linear-gradient(135deg, #6C63FF, #8B5CF6);
    color: white;
}

.ingredient-btn.primary:active {
    transform: scale(0.97);
}

.ingredient-btn.secondary {
    background: #f0f0f0;
    color: #666;
    flex: 0.4;
}

.ingredient-examples {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.example-label {
    font-size: 12px;
    color: #999;
}

.example-btn {
    padding: 4px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: white;
    font-size: 12px;
    color: #666;
    cursor: pointer;
}

.example-btn:active {
    background: #f5f5f5;
}

/* 載入動畫 */
.ingredient-loading {
    text-align: center;
    padding: 40px 20px;
}

.ingredient-loading .loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f0f0f0;
    border-top: 3px solid #6C63FF;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.ingredient-loading p {
    color: #888;
    font-size: 14px;
}

/* ========== 安全報告 ========== */
.safety-report {
    animation: fadeIn 0.3s ease;
}

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

/* 安全分數卡片 */
.safety-score-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9ff, #f0f4ff);
    border-radius: 16px;
    margin-bottom: 16px;
}

.safety-score-ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.safety-score-ring::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: white;
}

.safety-score-ring.safe {
    background: conic-gradient(#22C55E var(--score-pct, 80%), #e5e7eb 0);
}

.safety-score-ring.warning {
    background: conic-gradient(#F59E0B var(--score-pct, 50%), #e5e7eb 0);
}

.safety-score-ring.danger {
    background: conic-gradient(#EF4444 var(--score-pct, 30%), #e5e7eb 0);
}

.safety-score-value {
    position: relative;
    z-index: 1;
    font-size: 24px;
    font-weight: 700;
}

.safety-score-ring.safe .safety-score-value { color: #22C55E; }
.safety-score-ring.warning .safety-score-value { color: #F59E0B; }
.safety-score-ring.danger .safety-score-value { color: #EF4444; }

.safety-score-info h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.safety-score-info p {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/* 統計區 */
.safety-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.stat-card {
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    background: #f9f9f9;
}

.stat-card .stat-num {
    font-size: 22px;
    font-weight: 700;
    display: block;
}

.stat-card .stat-label {
    font-size: 11px;
    color: #888;
}

.stat-card.safe .stat-num { color: #22C55E; }
.stat-card.warning .stat-num { color: #F59E0B; }
.stat-card.danger .stat-num { color: #EF4444; }

/* 警告區 */
.safety-warnings {
    margin-bottom: 16px;
}

.warning-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.warning-item.critical {
    background: #FEF2F2;
    border-left: 3px solid #EF4444;
    color: #991B1B;
}

.warning-item.high {
    background: #FFFBEB;
    border-left: 3px solid #F59E0B;
    color: #92400E;
}

.warning-icon {
    flex-shrink: 0;
    font-size: 16px;
}

/* 成分列表 */
.ingredient-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ingredient-result-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    background: #f9f9f9;
    gap: 10px;
}

.ingredient-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ingredient-status-dot.green { background: #22C55E; }
.ingredient-status-dot.yellow { background: #F59E0B; }
.ingredient-status-dot.red { background: #EF4444; }
.ingredient-status-dot.gray { background: #ccc; }

.ingredient-info {
    flex: 1;
    min-width: 0;
}

.ingredient-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ingredient-cn {
    font-size: 11px;
    color: #888;
}

.ingredient-risk-badge {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.ingredient-risk-badge.safe {
    background: #DCFCE7;
    color: #166534;
}

.ingredient-risk-badge.warning {
    background: #FEF3C7;
    color: #92400E;
}

.ingredient-risk-badge.danger {
    background: #FEE2E2;
    color: #991B1B;
}

.ingredient-risk-badge.unknown {
    background: #F3F4F6;
    color: #6B7280;
}

.ingredient-warning-text {
    font-size: 11px;
    color: #EF4444;
    margin-top: 2px;
}