.loading-error-container { position: fixed; top: 0; left: 0; right: 0; bottom: 80px; /* Отступ для нижнего бара */ display: flex; justify-content: center; align-items: center; padding: 1rem; } /* Учитываем safe-area для мобильных устройств */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .loading-error-container { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } } .loading-error-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .loading-error-text { color: #374151; font-size: 1.125rem; font-weight: 500; } .loading-error-button { padding: 0.75rem 1.5rem; background: linear-gradient(to right, #4f46e5, #9333ea); color: white; border-radius: 0.5rem; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .loading-error-button:hover { background: linear-gradient(to right, #4338ca, #7e22ce); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .loading-error-button:active { transform: scale(0.98); }