95);
}

.message-success {
border-left-color: var(--success-1);
color: var(--success-2);
}

.message-warning {
border-left-color: var(--warning-1);
color: var(--warning-2);
}

.message-error {
border-left-color: var(--danger-1);
color: var(--danger-2);
}

.message-info {
border-left-color: var(--info-1);
color: var(--info-2);
}

@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}

/* ===== 加载系统 ===== */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-modal);
backdrop-filter: blur(5px);
}

.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-top: 4px solid var(--primary-1);
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* ===== 底部控制栏 ===== */
.footer-controls {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-top: 1px solid var(--gray-200);
padding: var(--space-5) var(--space-6);
}

.footer-container {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-8);
align-items: center;
max-width: 1400px;
margin: 0 auto;
}

.transport-controls {
display: flex;
gap: var(--space-3);
}

.transport-btn {
padding: var(--space-4) var(--space-6);
border-radius: var(--radius-lg);
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-2);
}

/* ===== 响应式设计 ===== */
@media (max-width: 1200px) {
.system-panels {
grid-template-columns: 280px 1fr;
}
.control-system {
grid-column: 1 / -1;
}
}

@media (max-width: 768px) {
.system-panels {
grid-template-columns: 1fr;
}
.nav-container {
flex-direction: column;
gap: var(--space-4);
}
.footer-container {
grid-template-columns: 1fr;
gap: var(--space-4);
text-align: center;
}
.card-grid-2,
.card-grid-3 {
grid-template-columns: 1fr;
}
.visualization-system {
grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {
.main-content {
padding: var(--space-4);
}
.panel {
padding: var(--space-4);
}
.nav-tabs {
flex-wrap: wrap;
justify-content: center;
}
}

/* ===== 谐音系统特殊样式 ===== */
.rhyme-visual-stage {
width: 100%;
height: 300px;
border: 2px dashed var(--gray-300);
margin: var(--space-4) 0;
position: relative;
background: var(--gray-50);
border-radius: var(--radius-lg);
overflow: hidden;
}

.rhyme-element {
width: 80px;
height: 80px;
background: var(--primary-1);
margin: var(--space-3);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
text-align: center;
color: white;
font-weight: 600;
cursor: pointer;
transition: all var(--transition-normal);
position: absolute;
user-select: none;
}

/* 谐音动画效果 */
.rhyme-click { animation: rhymeClick 0.5s ease; }
.rhyme-pat { animation: rhymePat 1s ease; }
.rhyme-spin { animation: rhymeSpin 2s linear infinite; }
.rhyme-confirm { animation: rhymeConfirm 0.8s ease; }
.rhyme-cancel { animation: rhymeCancel 0.8s ease; }
.rhyme-select { box-shadow: 0 0 0 3px var(--danger-1); }
.rhyme-split { animation: rhymeSplit 1.5s ease; }
.rhyme-fun { animation: rhymeFun 2s ease infinite; }

@keyframes rhymeClick {
0% { transform: scale(1); background: var(--primary-1); }
50% { transform: scale(1.1); background: var(--danger-1); }
100% { transform: scale(1); background: var(--primary-1); }
}

@keyframes rhymePat {
0% { transform: scale(1) rotate(0deg); }
25% { transform: scale(1.2) rotate(-5deg); }
50% { transform: scale(0.8) rotate(5deg); background: var(--warning-1); }
75% { transform: scale(1.1) rotate(-3deg); }
100% { transform: scale(1) rotate(0deg); background: var(--primary-1); }
}

@keyframes rhymeSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@keyframes rhymeConfirm {
0% { background: var(--primary-1); }
50% { background: var(--success-1); transform: scale(1.1); }
100% { background: var(--primary-1); transform: scale(1); }
}

@keyframes rhymeCancel {
0% { background: var(--primary-1); }
50% { background: var(--danger-1); transform: scale(0.