.notification-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.notification-overlay.show { opacity: 1; visibility: visible; }
.notification { background: var(--tg-theme-secondary-bg-color, #f8f9fa); border-radius: 12px; padding: 20px; max-width: 90%; width: 400px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transform: scale(0.9); transition: transform 0.3s ease; }
.notification-overlay.show .notification { transform: scale(1); }
.notification-icon { font-size: 48px; margin-bottom: 15px; }
.notification-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; color: var(--tg-theme-text-color, #000000); }
.notification-message { font-size: 14px; color: var(--tg-theme-hint-color, #999999); margin-bottom: 20px; line-height: 1.4; }
.notification-buttons { display: flex; gap: 10px; justify-content: center; }
.notification-button { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s ease; min-width: 80px; }
.notification-button.primary { background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #fff); }
.notification-button.secondary { background: var(--tg-theme-hint-color, #999999); color: var(--tg-theme-text-color, #000000); }
.notification-button:hover { opacity: 0.9; transform: translateY(-1px); }
.notification-button:active { transform: translateY(0); }

.update-indicator { position: fixed; top: 20px; right: 20px; background: var(--tg-theme-button-color, #2481cc); color: white; padding: 8px 12px; border-radius: 20px; font-size: 12px; display: none; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); z-index: 1000; animation: slideIn 0.3s ease; }
.update-indicator.show { display: flex; }
.update-indicator .spinner { width: 12px; height: 12px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: white; border-radius: 50%; animation: spin 0.8s linear infinite; }

@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes slideIn {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}