flex-direction: column;
gap: var(--space-2);
}

.input-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--primary-1);
}

.input-field {
padding: var(--space-3);
border: 1px solid var(--gray-300);
border-radius: var(--radius-md);
font-size: 0.875rem;
transition: all var(--transition-fast);
background: white;
}

.input-field:focus {
outline: none;
border-color: var(--primary-1);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ===== 滑块控件 ===== */
.slider-group {
display: flex;
flex-direction: column;
gap: var(--space-2);
}

.slider-label {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
color: var(--primary-1);
}

.slider-value {
font-weight: 600;
color: var(--primary-2);
}

/* ===== 按钮系统 ===== */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border: none;
border-radius: var(--radius-md);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-normal);
text-decoration: none;
background: var(--primary-1);
color: white;
}

.btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.btn-primary { background: var(--primary-1); }
.btn-success { background: var(--success-1); }
.btn-warning { background: var(--warning-1); }
.btn-danger { background: var(--danger-1); }
.btn-info { background: var(--info-1); }

.btn-outline {
background: transparent;
border: 2px solid var(--primary-1);
color: var(--primary-1);
}

.btn-group {
display: flex;
gap: var(--space-3);
}

/* ===== 编辑器系统 ===== */
.editor-container {
display: flex;
flex-direction: column;
gap: var(--space-4);
}

.editor-tabs {
display: flex;
gap: var(--space-2);
border-bottom: 2px solid var(--gray-200);
padding-bottom: var(--space-3);
}

.editor-tab {
padding: var(--space-3) var(--space-5);
background: var(--gray-100);
border-radius: var(--radius-md) var(--radius-md) 0 0;
cursor: pointer;
font-size: 0.875rem;
transition: all var(--transition-normal);
border: 1px solid transparent;
}

.editor-tab.active {
background: var(--primary-1);
color: white;
border-color: var(--primary-1);
}

.editor {
min-height: 300px;
padding: var(--space-5);
border: 1px solid var(--gray-300);
border-radius: var(--radius-lg);
font-family: var(--font-family-mono);
font-size: 0.875rem;
line-height: 1.5;
resize: vertical;
background: var(--gray-50);
}

/* ===== 可视化系统 ===== */
.visualization-system {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}

.visualization-panel {
height: 120px;
background: var(--gray-50);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
border: 1px solid var(--gray-300);
}

.timeline-panel {
grid-column: 1 / -1;
height: 100px;
background: var(--gray-50);
border-radius: var(--radius-lg);
position: relative;
overflow: hidden;
border: 1px solid var(--gray-300);
}

/* ===== 进度系统 ===== */
.progress-container {
display: flex;
flex-direction: column;
gap: var(--space-3);
}

.progress-bar {
width: 100%;
height: 6px;
background: var(--gray-300);
border-radius: 3px;
overflow: hidden;
position: relative;
}

.progress-fill {
height: 100%;
background: var(--primary-1);
width: 0%;
transition: width 0.1s linear;
}

.section-markers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.section-marker {
position: absolute;
top: 0;
width: 2px;
height: 100%;
background: var(--warning-1);
}

/* ===== 状态系统 ===== */
.status-system {
display: flex;
flex-direction: column;
gap: var(--space-2);
text-align: right;
}

.current-status {
font-weight: 600;
color: var(--primary-1);
}

.status-details {
font-size: 0.875rem;
color: var(--gray-600);
}

/* ===== 消息通知系统 ===== */
.message-system {
position: fixed;
top: var(--space-6);
right: var(--space-6);
z-index: var(--z-tooltip);
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 400px;
}

.message {
padding: var(--space-4);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
backdrop-filter: blur(10px);
animation: slideInRight 0.3s ease;
border-left: 4px solid;
background: rgba(255, 255, 255, 0.