/* 雷达图和参数展示样式 */

.radar-chart-container {

    width: 200px;

    height: 200px;

    margin: 0 auto;

    padding: 10px;

}



.parameter-grid {

    display: grid;

    grid-template-columns: 200px 1fr;

    gap: 20px;

    align-items: center;

    margin-top: 15px;

}



.parameter-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.parameter-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.parameter-label {

    flex: 1;

    font-weight: 500;

    color: #e0e0e0;

}



.parameter-bar {

    flex: 2;

    height: 8px;

    background: rgba(255, 255, 255, 0.1);

    border-radius: 4px;

    overflow: hidden;

}



.parameter-value {

    height: 100%;

    border-radius: 4px;

    transition: width 0.5s ease-out;

}



.parameter-score {

    flex: 0.5;

    font-weight: bold;

    color: #4facfe;

    text-align: right;

}



.ai-description {

    margin-top: 20px;

    padding: 15px;

    background: rgba(10, 25, 47, 0.3);

    border-radius: 8px;

    border: 1px solid rgba(79, 172, 254, 0.2);

    font-size: 14px;

    line-height: 1.6;

    color: #e0e0e0;

}



.ai-description p {

    margin-bottom: 15px;

}



.ai-description p:last-child {

    margin-bottom: 0;

}



/* 段落分类样式 */

.ai-description p:nth-child(1) {

    /* 气味特性部分 */

    border-left: 3px solid #4facfe;

    padding-left: 10px;

}



.ai-description p:nth-child(2) {

    /* 感官体验部分 */

    border-left: 3px solid #a18cd1;

    padding-left: 10px;

}



.ai-description p:nth-child(3) {

    /* 应用推荐部分 */

    border-left: 3px solid #fbc2eb;

    padding-left: 10px;

}



/* 高亮文本 */

.highlight-dimension {

    color: #4facfe;

    font-weight: 500;

}



.highlight-category {

    color: #00f2fe;

    font-weight: 500;

}



/* 评估加载动画 */

#ai-loading-assessment {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 30px;

    margin: 15px 0;

    background: rgba(10, 25, 47, 0.5);

    border-radius: 8px;

    border: 1px solid rgba(79, 172, 254, 0.2);

}



#ai-loading-assessment .spinner {

    width: 40px;

    height: 40px;

    border: 4px solid rgba(79, 172, 254, 0.2);

    border-top-color: #4facfe;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



#ai-loading-assessment p {

    margin-top: 15px;

    color: #4facfe;

    font-size: 14px;

}