:root { --color-navy-900: #0b1437; --color-navy-800: #111c44; --color-brand: #4318ff; }
body { background-color: var(--color-navy-900); font-family: 'Segoe UI', sans-serif; color: white; overflow: hidden; }
.glass { background: rgba(17, 28, 68, 0.7); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.05); }
.glass-modal { background: rgba(17, 28, 68, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #1b254b; border-radius: 10px; }
.page-section { display: none; animation: fadeIn 0.3s ease-in-out; }
.page-section.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.progress-bar { transition: width 1s ease-in-out; }
input[type=range] { -webkit-appearance: none; background: transparent; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 16px; border-radius: 50%; background: #ffffff; cursor: pointer; margin-top: -6px; box-shadow: 0 0 10px rgba(0,0,0,0.5); }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; cursor: pointer; background: #2b355e; border-radius: 2px; }
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; }
.toast { background: #1b254b; border-left: 4px solid #4318ff; color: white; padding: 16px 24px; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 12px; animation: slideIn 0.3s ease-out; min-width: 300px; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* 优化移动端侧边栏层级 */
#mobile-sidebar { transition: transform 0.3s ease-in-out; }
#mobile-sidebar.closed { transform: translateX(-100%); }
#mobile-sidebar.open { transform: translateX(0); }
.order-row { animation: flash 1s infinite alternate; }
@keyframes flash { from { opacity: 1; } to { opacity: 0.7; } }