.fa-panel {
    background: #ffffff;
    border: 1px solid #d8deeb;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(18, 42, 76, 0.08);
}

.fa-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.fa-inline-control {
    width: 150px;
    display: inline-block;
}

.fa-checkbox {
    margin: 0 12px 0 0;
    font-weight: 600;
}

.fa-checkbox input {
    margin-right: 6px;
}

.fa-timer {
    font-size: 28px;
    font-weight: 700;
    color: #2468c9;
    margin-bottom: 14px;
}

.fa-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.fa-metric-card {
    border: 1px solid #dbe4f5;
    border-radius: 8px;
    padding: 12px;
    background: #f7faff;
}

.fa-label {
    display: block;
    color: #5d6f8f;
    margin-bottom: 6px;
    font-size: 13px;
}

.fa-metric-card strong {
    font-size: 20px;
    color: #102a56;
}

.fa-canvas-wrap {
    background: #ffffff;
    border: 1px solid #e3eaf7;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 10px;
}

.fa-canvas-title {
    font-weight: 700;
    color: #16335f;
    margin-bottom: 6px;
}

#fa-spectrum,
#fa-waveform {
    width: 100%;
    height: auto;
    display: block;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
    border-radius: 6px;
}

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

.fa-recording {
    margin-top: 14px;
}

.fa-recording audio {
    width: 100%;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .fa-metrics {
        grid-template-columns: 1fr;
    }

    .fa-inline-control {
        width: 100%;
    }
}