.loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

input[type=range] { -webkit-appearance: none; width: 100%; height: 10px; background: #cbd5e1; border-radius: 5px; outline: none; opacity: 0.9; transition: opacity .2s; }
input[type=range]:hover { opacity: 1; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #7e22ce; cursor: pointer; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
input[type=range]:disabled { background: #e5e7eb; cursor: not-allowed; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: #f1f1f1; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; }
.dark .scrollbar-thin::-webkit-scrollbar-track { background: #2d3748; }
.dark .scrollbar-thin::-webkit-scrollbar-thumb { background: #4a5568; }

/* Toolbar Styles */
.toolbar-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.375rem; transition: background-color 0.2s; color: #4b5563; }
.dark .toolbar-btn { color: #d1d5db; }
.toolbar-btn:hover { background-color: #e5e7eb; }
.dark .toolbar-btn:hover { background-color: #374151; }
.toolbar-btn.active { background-color: #dbeafe; color: #1e40af; }
.dark .toolbar-btn.active { background-color: #1e3a8a; color: #60a5fa; }

.icon-sm svg { width: 1.0rem; height: 1.0rem; }
.icon-md svg { width: 1.5rem; height: 1.5rem; }
.icon-lg svg { width: 2.0rem; height: 2.0rem; }