body { font-family: 'Tajawal', sans-serif; user-select: none; background-color: #0f172a; color: white; overflow: hidden; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }
::-webkit-scrollbar-track { background: #1e293b; }

.pop-in { animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

.studio-bg { 
    background-image: radial-gradient(#334155 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #1e293b;
}

.item-card:hover { transform: translateY(-2px); border-color: #f59e0b; }
.item-disabled { opacity: 0.5; pointer-events: none; filter: grayscale(100%); }

.float-text { position: absolute; animation: floatUp 2s forwards; pointer-events: none; font-weight: bold; z-index: 50; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-80px); } }

.tab-active { color: #f59e0b !important; border-bottom-color: #f59e0b !important; background-color: rgba(30, 41, 59, 0.5); }

#error-box { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); color: white; z-index: 9999; flex-direction: column; align-items: center; justify-content: center; text-align: center; }

.shake-screen { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

/* Toast Notification */
#toast-container { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 10px; pointer-events: none; width: max-content; }
.toast { background: rgba(31, 41, 55, 0.95); color: white; padding: 12px 24px; border-radius: 50px; font-weight: bold; font-size: 0.9rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); animation: slideUp 0.3s ease-out; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 10px; }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }