<div style="width: 24px; height: 24px; border-radius: 50%; background: var(--color-warning); display: flex; align-items: center; justify-content: center; color: white; font-size: var(--font-size-xs);">🎤</div>
<div>
<div style="font-weight: 600;">激昂男声</div>
<div style="font-size: var(--font-size-xs); color: var(--color-secondary);">适合摇滚</div>
</div>
</div>
</div>
</div>
</div>

<div class="card">
<h4 style="margin-bottom: var(--space-sm); color: var(--color-primary);">情感智能系统</h4>
<div class="slider-group">
<div class="slider-label">
<span>喜悦</span>
<span class="slider-value" id="happiness-value">50%</span>
</div>
<input type="range" class="input-field" data-emotion="happiness" min="0" max="100" value="50">
</div>
<div class="slider-group">
<div class="slider-label">
<span>悲伤</span>
<span class="slider-value" id="sadness-value">20%</span>
</div>
<input type="range" class="input-field" data-emotion="sadness" min="0" max="100" value="20">
</div>
<div class="slider-group">
<div class="slider-label">
<span>愤怒</span>
<span class="slider-value" id="anger-value">10%</span>
</div>
<input type="range" class="input-field" data-emotion="anger" min="0" max="100" value="10">
</div>
<div class="slider-group">
<div class="slider-label">
<span>平静</span>
<span class="slider-value" id="calmness-value">70%</span>
</div>
<input type="range" class="input-field" data-emotion="calmness" min="0" max="100" value="70">
</div>
</div>

<div class="card">
<h4 style="margin-bottom: var(--space-sm); color: var(--color-primary);">乐器智能系统</h4>
<div class="grid grid-3">
<div class="card card-active" data-instrument="piano">🎹 钢琴</div>
<div class="card" data-instrument="strings">🎻 弦乐</div>
<div class="card" data-instrument="guitar">🎸 吉他</div>
<div class="card" data-instrument="flute">🎵 长笛</div>
<div class="card" data-instrument="drums">🥁 鼓组</div>
<div class="card" data-instrument="bass">🎸 贝斯</div>
</div>
</div>
</nav>

<!-- 主内容系统 -->
<main class="component main-content">
<div style="display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-lg); height: 100%;">
<div class="tabs">
<div class="tab tab-active" data-tab="lyrics">歌词编辑器</div>
<div class="tab" data-tab="melody">旋律编辑器</div>
<div class="tab" data-tab="arrangement">编曲面板</div>
<div class="tab" data-tab="structure">歌曲结构</div>
</div>

<textarea class="input-field" id="lyrics-editor" style="flex: 1; min-height: 300px; font-family: var(--font-family-mono);" placeholder="在此输入歌词...&#10;使用标记定义歌曲结构:&#10;[主歌]&#10;这是主歌部分的歌词&#10;[副歌]&#10;这是副歌部分的歌词&#10;[间奏]&#10;等待8小节&#10;[预副歌]&#10;过渡到副歌的部分">
[主歌]
轻轻的我走了，正如我轻轻的来
我轻轻的招手，作别西天的云彩

[副歌]
那河畔的金柳，是夕阳中的新娘
波光里的艳影，在我的心头荡漾

[间奏]
等待4小节

[预副歌]
软泥上的青荇，油油的在水底招摇
在康河的柔波里，我甘心做一条水草

[副歌]
那榆荫下的一潭，不是清泉，是天上虹
揉碎在浮藻间，沉淀着彩虹似的梦
</textarea>

<div class="visualization-container">
<div class="visualization-panel" id="waveform">
<div style="position: absolute; top: var(--space-sm); left: var(--space-sm); font-size: var(--font-size-xs); color: var(--color-primary);">波形显示</div>
</div>
<div class="visualization-panel" id="spectrum">
<div style="position: absolute; top: var(--space-sm); left: var(--space-sm); font-size: var(--font-size-xs); color: var(--color-primary);">频谱分析</div>
</div>
<div class="timeline-panel" id="timeline">
<div style="position: absolute; top: var(--space-sm); left: var(--space-sm); font-size: var(--font-size-xs); color: var(--color-primary);">时间线</div>
</div>
</div>
</div>
</main>

<!-- 控制系统 -->
<aside class="component advanced-panel">
<div class="component-header">
<h3>🎛️ 高级控制系统</h3>
</div>

<div class="card">
<h4 style="margin-bottom: var(--space-sm); color: var(--color-primary);">音频效果系统</h4>
<div class="slider-group">
<div class="slider-label">
<span>混响</span>
<span class="slider-value" id="reverb-value">30%</span>
</div>
<input type="range" class="input-field" data-effect="reverb" min="0" max="100" value="30">
</div>
<div class="slider-group">
<div class="slider-label">
<span>延迟</span>
<span class="slider-value" id="delay-value">20%</span>
</div>
<input type="range" class="input-field" data-effect="delay" min="0" max="100" value="20">
</div>
<div class="slider-group">
<div class="slider-label">
<span>合唱</span>
<span class="slider-value" id="chorus-value">15%</span>