body { font-family: sans-serif; transition: background-color 0.3s, color 0.3s; }
.glass { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02); border-radius: 1rem; transition: all 0.3s; }
.dark .glass { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.ui-input { width: 100%; border-radius: 0.5rem; outline: none; transition: border-color 0.2s; font-size: 0.875rem; background-color: #f8fafc; border: 1px solid #cbd5e1; color: #1e293b; }
.ui-input:focus { background-color: #ffffff; border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1); }
.dark .ui-input { background-color: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; }
.dark .ui-input:focus { border-color: #6366f1; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
[v-cloak] { display: none !important; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
.custom-checkbox { appearance: none; width: 16px; height: 16px; border: 2px solid #cbd5e1; border-radius: 4px; position: relative; cursor: pointer; transition: all 0.2s; background-color: #ffffff; }
.dark .custom-checkbox { border-color: rgba(255,255,255,0.3); background-color: rgba(0,0,0,0.5); }
.custom-checkbox:checked { background-color: #6366f1 !important; border-color: #6366f1 !important; }
.custom-checkbox:checked::after { content: '✔'; position: absolute; color: white; font-size: 10px; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.custom-checkbox:indeterminate { background-color: #6366f1 !important; border-color: #6366f1 !important; }
.custom-checkbox:indeterminate::after { content: ''; position: absolute; width: 8px; height: 2px; background: white; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.custom-select-trigger { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s; border: 1px solid #cbd5e1; background-color: #f8fafc; color: #1e293b; }
.dark .custom-select-trigger { border-color: rgba(255, 255, 255, 0.1); background-color: rgba(0, 0, 0, 0.2); color: #e2e8f0; }
.custom-select-trigger:hover { border-color: #6366f1; }
.custom-select-dropdown { position: absolute; top: 110%; left: 0; right: 0; z-index: 50; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); transform-origin: top center; animation: dropdownSlide 0.2s ease-out; }
.dark .custom-select-dropdown { border-color: rgba(255, 255, 255, 0.1); background: rgba(15, 23, 42, 0.95); }
.custom-option { padding: 0.5rem 0.75rem; cursor: pointer; transition: colors 0.1s; font-size: 0.875rem; }
.custom-option:hover { background-color: #f1f5f9; color: #6366f1; }
.dark .custom-option:hover { background-color: rgba(255, 255, 255, 0.1); color: white; }
.custom-option.selected { color: #6366f1; font-weight: 600; background-color: rgba(99, 102, 241, 0.05); }
@keyframes dropdownSlide { from { opacity: 0; transform: scaleY(0.95); } to { opacity: 1; transform: scaleY(1); } }
.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease-in-out; }
.slide-enter-from, .slide-leave-to { transform: translateX(100%); }
.loading-dot { animation: loadingBounce 1s infinite ease-in-out both; }
.loading-dot:nth-child(1) { animation-delay: -0.32s; }
.loading-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes loadingBounce { 0%, 80%, 100% { transform: scale(0); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
.char-avatar-overlay { opacity: 0; transition: opacity 0.2s; }
.char-avatar-container:hover .char-avatar-overlay { opacity: 1; }
.shortcut-remove { opacity: 0; transform: scale(0.8); transition: all 0.2s; }
.shortcut-item:hover .shortcut-remove { opacity: 1; transform: scale(1); }