/* === Resonance App 专业配色方案与样式优化 === */

/* 1. 录音区域 (.rec-audio) */
.post-content .rec-audio {
    background-color: #F0F2F5; /* 默认状态：使用柔和的浅灰色背景 */
    border: 2px dashed #D5D8DC; /* 添加一个虚线边框，增加设计感 */
    border-radius: 50%; /* 确保是圆形 */
    width: 220px !important;
    height: 220px !important;
    margin: 30px auto !important; /* 上下边距30px，左右自动居中 */
    padding: 15px;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* 添加平滑的颜色过渡效果 */
    cursor: pointer;
}

/* 录音激活时的状态 */
.post-content .rec-audio.is-recording {
    background-color: #fadbd8 !important; /* 录音时变为柔和的淡红色 */
    border-color: #E74C3C !important;
}

/* 录音区内部的麦克风图标 */
.post-content .rec-audio img {
    width: 60px !important;
    height: auto;
    margin-bottom: 10px;
}

/* 录音区内部的提示文字 */
.post-content .rec-audio .sound_font_1 p {
    font-size: 18px !important;
    color: #566573 !important;
    font-weight: bold;
    margin: 0;
}

/* 2. 进度条容器 */
.post-content .round3 {
    background-color: #F0F2F5; /* 使用和录音区同样的浅灰色，保持视觉统一 */
    border-radius: 20px;
    padding: 5px; /* 轻微的内边距，让填充条不贴边 */
    max-width: 500px;
    margin: 40px auto; /* 增加与上下元素的间距 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* 添加轻微的内阴影增加质感 */
}

/* 3. 进度条填充部分 (.progress-bar) */
.post-content .progress-bar {
    background-color: #2ECC71; /* 使用一个更明亮、有活力的绿色 */
    height: 18px;
    border-radius: 18px;
    transition: width 0.5s ease;
}

/* 4. START/STOP 按钮 (#start) */
.post-content #start {
    background-color: #8E44AD; /* 使用我们的主强调色：紫色 */
    color: white;
    width: 150px !important;
    height: 150px !important;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.4); /* 添加与按钮颜色匹配的阴影 */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.post-content #start:hover {
    background-color: #9B59B6; /* 鼠标悬停时颜色变亮 */
    transform: scale(1.05); /* 轻微放大 */
}

/* 按钮内的文字 */
.post-content .start_font {
    color: white !important;
}