.task-container { position: relative; overflow: hidden; touch-action: pan-y; min-height: 84px;}.task-background { background: linear-gradient(to right, #84b6f4, #ff6961); position: absolute; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;}.code-timer { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(59, 130, 246, 0.3), rgba(16, 185, 129, 0.3)); /* transform: translateX(-100%); animation: slide 30s linear infinite; animation-delay: 0s; */}@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); }}.copied-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; display: flex; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; z-index: 3;}.copied-overlay.active { opacity: 1; animation: fadeOut 5s forwards;}@keyframes fadeOut { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; }}.modal-wrapper .dark { background-color: #1f2937; color: #f3f4f6;}.modal-body { transform: scale(0); transition: transform 0.3s ease;}.modal-body.active { transform: scale(1);}.dark { background-color: #1f2937; color: #f3f4f6;}.dark .code-card { background-color: #374151; border-color: #4b5563;}.dark label { color: white;}.dark select { background-color: #374151; border-color: white; color: white;}.dark #menu, .dark #footer-menu { background-color: #1f2937; color: #f3f4f6;}body { touch-action: manipulation; overflow-x: hidden;}#bck-number-keys { margin-right: 3px;}