.perf-inner {
    padding: 28px 32px 0;
}
.perf-header-container {
    max-width: 580px;
    margin: auto;
}
/* 头部标题区 (整合原h1/h2) */
.perf-header {
    text-align: center;
    margin-bottom: 15px;
}
.title-big {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    font-weight: 600;
    font-size: 28px;
    color: #1e293b;
}
.title-big .em {
    font-size: 14px;
    font-weight: 600;
    color: #a9a9a9;
}
.title-sub {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    font-size: 12px;
    color: #5b6e8c;
}
.title-sub .highlight {
    color: #10b981;
    font-weight: 700;
    font-size: 14px;
    background: #e6f7ec;
    padding: 0 8px;
    border-radius: 60px;
}

/* 性能标尺区域 (采用频率指示器的渐变条 + 动态指针) */
.gauge-section {
    position: relative;
}
.gauge-track {
    display: flex;
    height: 10px;
    border-radius: 20px;
    overflow: hidden;
    background: #eef2f8;
}
.gauge-low { background: linear-gradient(90deg, #b2f1e7, #6defda); flex: 1; }
.gauge-mid { background: linear-gradient(90deg, #6defda, #5dd9b6); flex: 1; }
.gauge-high { background: linear-gradient(90deg, #5dd9b6, #3bc9a4); flex: 1; }

/* 动态指针（三角标） */
.gauge-pointer {
    position: absolute;
    top: -5px;
    width: 20px;
    height: 20px;
    background: #10b981;
    border-radius: 15px;
    margin-left: -14px;
    transition: left 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    z-index: 3;
}
.gauge-pointer-inner {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 8px;
    position: absolute;
    top: 5px;
    left: 5px;
}

/* 三段标签 */
.gauge-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    text-align: center;
}
.gauge-label-item {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
}
.gauge-label-item .label-name {
    background: #f8fafc;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 40px;
    border: 1px solid #eef2f8;
    color: #2d3e50;
}
.gauge-label-item .desc {
    font-size: 11px;
    color: #8ba0bc;
    margin-top: 2px;
}

/* 环形图区域 */
.circles-section {
    margin: 20px 0 20px;
}
.circles-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-bottom: 20px;
}
.circle-card {
    cursor: pointer;
    transition: transform 0.2s;
    text-align: center;
}
.circle-card:active {
    transform: scale(0.96);
}
.canvas-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}
.canvas-wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.circle-label {
    font-weight: 600;
    font-size: 12px;
    color: #4b6584;
}
.circle-desc {
    font-size: 11px;
    color: #8ba0bc;
}
/* 底部信息卡片 */
.info-footer {
    background: #f9fafc;
    border-radius: 8px;
    padding: 12px 20px;
    margin-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    border: 1px solid #eef2f8;
}
.analysis-text {
    font-size: 12px;
    color: #2c3e50;
    font-weight: 500;
}
.chip-tip {
    background: #e6f7ec;
    padding: 2px 10px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
    color: #0e7c42;
    display: inline-block;
}
.copyright {
    text-align: center;
    font-size: 12px;
    color: #b9c5d4;
    margin-top: 18px;
    letter-spacing: 0.3px;
}

/* 切换按钮区 */
.demo-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 28px auto 0;
    max-width: 1000px;
    flex-wrap: wrap;
}
.btn-switch {
    background: #6c5ce7;
    border: none;
    padding: 12px 28px;
    border-radius: 60px;
    font-weight: 600;
    font-size: 14px;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(108, 92, 231, 0.25);
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-switch:active {
    transform: scale(0.96);
}
.btn-outline {
    background: white;
    color: #6c5ce7;
    border: 1px solid #cbd5e1;
    box-shadow: none;
}

@media (max-width: 680px) {
    .perf-inner { padding: 20px 25px 0; }
    .title-big { font-size: 24px; }
    .title-sub .highlight { font-size: 13px; }
    .circles-grid { gap: 18px; }
}